جواب:

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

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

جواب: 80px

یکی از مفاهیم مهم در CSS مفهوم margin collapsing است.

این مفهوم معمولا به این صورت توضیح داده می‌شود که وقتی دو عنصر زیر هم قرار دارند و به هردوی آن‌ها در راستای عمودی margin می‌دهیم، فاصله‌ی دو عنصر در راستای عمودی، به اندازه‌ی مقدار بزرگ‌تر margin خواهد بود و نه جمع آن‌ها.
یعنی در این مثال که دو مقدار 50px و 30px را داریم، انتظار داریم که فاصله‌ی دو عنصر 50px باشد.
اما این تمام ماجرا نیست!

برای درک کامل این موضوع باید با مفهوم BFC آشنا باشیم (در یکی از مطالب، مفهوم BFC و نحوه‌ی ایجاد آن را بررسی کردیم).

نکته مهم این است که بلاک‌های BFC، از margin collapsing جلوگیری می‌کنند. و همچنین هر آیتم داخل flex-container یک BFC است.

در نتیجه وقتی از flexbox استفاده می‌کنیم، پدیده margin collapsing اتفاق نمی‌افتد!

حالا دوباره به کد سوال دقت کنید:
چون هر دو عنصر داخل flex-container هستند، margin collapsing اتفاق نمی‌افتد و فاصله‌ی دو عنصر به اندازه‌ی جمع marginهای دو عنصر، یعنی 80px خواهد بود (و نه 50px).

🔺 با سایت زیر موکاپ ویدیو درست کنین. ✨

https://www.livemockups.com/

#link #video #mockup

@ProGraphs

​یکی دیگر از apiهای کاربردی گوگل کروم تابع $$ است. این تابع مشابه متد document.querySelectorAll عمل می‌کند.

با این تفاوت که خروجی تابع querySelectorAll از نوع Array-Like است و به متدهای آرایه‌ها دسترسی ندارد.
ولی خروجی تابع $$ یک آرایه معمولی است. بنابراین می‌توانیم مستقیما تابع‌هایی مثل map را روی آن اجرا کنیم.
(به مطلبی که راجع به Array-Likeها منتشر کردیم مراجعه کنید)

#quicktip #devtools #js

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺 Flowchart Maker & Online Diagram Software ✨

https://www.draw.io/

#tool #software #flowchart #diagram

@ProGraphs

🔺 Free Icon Font & SVG Icons | IcoFont ✨

https://icofont.com/

#link #svg #icon

@ProGraphs