🔺 این سایت به کروم شما قابلیتی اضافه می‌کنه که در صفحه New Tab، به جای یک صفحه خالی، یک نکته کوتاه برنامه‌نویسی ببینین.

https://kutt.it/43V8Dl

‏📌 فعلاً از سوالات مصاحبه کاری و JavaScript و React و PHP و Python و CSS پشتیبانی می‌کنه.

#link #chrome #extension

@ProGraphs

​​به تازگی ویژگی‌های جدید ES2019 برای استانداردسازی تایید شدند و یکی از این ویژگی‌ها، متدهای جدید flat و flatMap هستند.

❗️با استفاده از متد flat می‌توانیم آرایه‌های چند بعدی را flat کنیم:
[1, [2], [3, 4]].flat(); // [1, 2, 3, 4]

❗️همچنین این تابع یک پارامتر اختیاری دریافت می‌کند که مشخص می‌کند آرایه تا چه عمقی flat شود (مقدار پیشفرض این پارامتر 1 است):
[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]

❗️برای اینکه هر آرایه با عمق دلخواه را کاملا flat کنیم، می‌توانیم Infinity را به عنوان عمق تعریف کنیم:
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]

در تصویر یک نمونه کاربرد عملی از تابع flat را می‌بینید.

#quicktip #js

@ProGraphs

یکی از دوستان این پروژه‌ی Todo List رو به عنوان یه مثال ساده از این ابزارها ساختند:

- React
- Mobx
- Ant Design
- Emotion JS

اگر می‌خواید کار با این ابزار‌ها رو شروع کنید، می‌تونه براتون مفید باشه 👌

https://github.com/iran-react-community/todo-list

​​می‌دانیم که مقادیری که ما برای ویژگی‌های CSS تعیین می‌کنیم، می‌توانند نسبی باشند،‌ نسبت به عنصر والد تعیین شوند، درصدی باشند، اعشاری باشند و ... .

آیا می‌دانید این مقادیر چه پروسه‌ای را طی می‌کنند تا مقدار دقیق اعمال شده روی عناصر محاسبه شود؟

به طور کلی این مراحل را توضیح دهید

#interviewquestion #css

@ProGraphs

🔺 انتشار نسخه 16.8 React

https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

#link #react

@ProGraphs

🔺یه منبع خوب برای دانلود Stock video ✨

https://mixkit.co/

#link #stockvideo #footage

@ProGraphs

جواب:

زمانی که مرورگر استایل‌های ما را دریافت می‌کند، این مراحل را طی می‌کند تا مقدار نهایی هر ویژگی را محاسبه کند:

Cascaded Values:
معمولا با توجه به استایل‌های پیشفرض مرورگر و تعداد زیاد استایل‌ها، چندین استایل برای یک عنصر تعریف می‌شود. در این مرحله مرورگر با توجه به قوانین CSS تصمیم می‌گیرد که کدام‌یک از این استایل‌ها بر روی عنصر اعمال شود.

Specified Values:
در این مرحله اگر مقداری برای یک پراپرتی تعیین نشده باشد، مقدار از عنصر والد ارث‌بری می‌شود و یا مقدار پیشفرض برای آن پراپرتی تعیین می‌شود.

Computed Values:
در این مرحله، مقادیر نسبی به مقادیر مطلق تبدیل می‌شوند. مثلا مقادیری که با واحد em تعریف شده‌اند، با توجه به سایز فونت محاسبه می‌شوند.
همچنین کلمات کلیدی مثل smaller و ... به مقادیر مطلق تبدیل می‌شوند.

‌Used Values:
بعضی از مقادیر با توجه به layout صفحه به مقدار مطلق تبدیل می‌شوند. مثلا مقدار auto برای ویژگی width نمی‌تواند در مرحله قبل محاسبه شود. چون با توجه به layout می‌تواند مقادیر متفاوتی داشته باشد. این مقادیر، در این مرحله تبدیل به مقدار مطلق می‌شوند. (در واقع این مرحله، مکمل مرحله قبل است)

Actual Values:
تا اینجا مقدار مورد نظر به طور کامل محاسبه شده است. اما ممکن است مرورگر محدودیت‌هایی برای نمایش بعضی مقادیر داشته باشد و مجبور به تغییر آن‌ها شود. برای مثال مرورگر قادر به نمایش مقدار اعشاری برای بعضی از ویژگی‌ها نیست و این مقادیر را در این مرحله به مقدار صحیح تبدیل می‌کند. (به همین دلیل است که وقتی مقدار border-width را از 2px به 2.3px تغییر می‌دهیم، تغییری مشاهده نمی‌کنیم!)

یه توضیح کوتاه راجع به اهمیت این مطلب:

حفظ بودن نام این مراحل عملا کمکی به ما نمیکنه (خودم هم حفظ نیستم 😁) و احتمال مطرح شدن این سوال تو یه مصاحبه واقعی هم خیلی کمه.

اما درک کلیت این پروسه کمک می‌کنه که دید خیلی بهتر و عمیق‌تری نسبت به رفتار CSS داشته باشیم.

و در نهایت، عمیق شدن تو مطالب باعث می‌شه که هیچ رفتار CSS برامون خیلی عجیب نباشه، هیچ ابزاری به نظرمون جادویی نباشه، دیباگ کردن برامون ساده باشه و ...

🔺 Hyper, a terminal built on web technologies. 😌

#tool #terminal

@ProGraphs🔺

​متد flatMap همانطور که از اسم آن پیداست، ترکیبی است از متد map و متد flat.

❗️ فرض کنید می‌خواهیم آرایه‌ای از stringها را به آرایه‌ای از تک تک حروف این stringها تبدیل کنیم (بدون استفاده از flatMap):

مرحله اول: ابتدا با استفاده از map، همه‌ی stringها را به یک آرایه از حروفشان تبدیل می‌کنیم:

var mapped = ['ab', 'cd'].map(s => s.split(''));
// [['a', 'b'], ['c', 'd']]

مرحله دوم: این آرایه دو بعدی را flat می‌کنیم:

mapped = mapped.flat();
// ['a', 'b', 'c', 'd']

❗️با استفاده از متد flatMap می‌توانیم دقیقا همین 2 مرحله را به صورت همزمان انجام دهیم:

['ab', 'cd'].flatMap(s => s.split(''))
// ['a', 'b', 'c', 'd']

در تصویر یک مثال دیگر از کاربرد flatMap را می‌بینید.

#quicktip #js

@ProGraphs

🔺 با سایت زیر هر چیزی رو به هر چیزی تبدیل کن! 😎

https://www.ps2pdf.com/

#link #convertor

@ProGraphs

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

#interviewquestion #js

@ProGraphs

🔺 Mockuplove - Free UI Design Resources 🎉

https://mockuplove.com

#link #mockup #ui #design #resource

@ProGraphs

جواب: Window Title

چند وقت پیش 4 قانون ساده برای تعیین مقدار this را بررسی کردیم. همچنین دیدیم که برای تعیین مقدار this در یک تابع، فقط به جایی که تابع صدا شده است توجه می‌کنیم و اصلا کاری نداریم که کجا و چطور تعریف شده است.

حالا با استفاده از همین 4 قانون، مقدار this را تعیین می‌کنیم:
1- آیا تابع با کلمه کلیدی new صدا شده است؟
خیر.

2- آیا تابع با استفاده از call یا apply صدا شده است؟
خیر.

3- آیا تابع به عنوان متد آبجکت و به صورت obj.func صدا شده است؟
خیر! شاید فکر کنید که تابع داخل آبجکت تعریف شده است. اما گفتیم که نحوه‌ی تعریف شدن تابع، تاثیری در مقدار this ندارد و فقط نحوه‌ی صدا شدن تابع را بررسی می‌کنیم.
در اینجا تابع به صورت IIFE تعریف شده است. یعنی بلافاصله به صورت معمولی صدا شده و واضح است که به صورت obj.printTitle صدا نشده است.

4- آیا جواب سوال‌های بالا خیر بود؟
بله! بنابراین تابع به صورت معمولی صدا شده و مقدار this، آبجکت window است. (اگر در حالت strict-mode بودیم، مقدار this برابر undefined بود). بنابراین مقدار window.title یا همان متغیر گلوبال title در کنسول چاپ می‌شود.

🔺 HEML, an open source markup language for building responsive email.

https://heml.io/

#link #tool #html #css

@ProGraphs

🔺 ابزار مدیریت پروژه YouTrack

https://www.jetbrains.com/youtrack/

#tool #agile #projectmanagement

@ProGraphs

​در مطالب قبلی متدهای flat و flatMap که در ES2019 اضافه شده‌اند را بررسی کردیم.

یکی از کاربردهای جالب متد flat، اضافه کردن چند آیتم در یک موقعیت خاص از آرایه به صورت شرطی است.

به کد داخل تصویر دقت کنید. اگر شرط اول true باشد، آرایه [1, 2, 3] و اگر نه، یک آرایه خالی در موقعیت مورد نظر اضافه می‌شود.
و در نهایت چون کل آرایه را flat می‌کنیم، یک آرایه تک بعدی دریافت می‌کنیم.

#quicktip #js

@ProGraphs

🔺 نقشه‌ راه برای Web developer شدن در سال 2019

https://vrgl.ir/EvB4w

#link #web #roadmap

@ProGraphs

فرض کنید یک عنصر container داریم که دو عنصر فرزند داخل آن قرار دارند و این CSS را بر روی عناصر اعمال کرده‌ایم.

فاصله‌ی دو عنصر child از هم در راستای عمودی چند پیکسل است؟

#interviewquestion #css

@ProGraphs

🔺 یک بازی ساده برای تست مهارت‌های طراحی شما ✌🏻

https://cantunsee.space/

#link #design #test

@ProGraphs