جواب: 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

جواب: "two" !

با بررسی این کد متوجه می‌شویم که دو مقداری که با هم مقایسه می‌شوند، نوع متفاوتی دارند (یکی boolean و یکی number). و چون از عملگر == استفاده کرده‌ایم، نوع داده‌ی یکی از این مقادیر به صورت خودکار تغییر می‌کند تا شرط، بین دو مقدار با نوع یکسان چک شود.

پس منطقاً انتظار داریم عدد 20، به مقدار true تبدیل شود (همه‌ی اعداد به جز 0، truthy هستند). و سپس مقدار "one" در کنسول چاپ شود.
اما این اتفاق نمی‌افتد 😄

چرا "two" در کنسول چاپ شد؟
اگر به spec زبان جاوااسکریپت مراجعه کنیم، متوجه می‌شویم که متاسفانه وقتی با استفاده از عملگر ==، هر مقداری را با true یا false مقایسه می‌کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود 😐 (حتما خودتان با مقادیر مختلف این عملیات را تست کنید).

یعنی در این کد مقدار true، تبدیل به عدد 1 می‌شود. سپس عدد 1 با عدد 20 مقایسه می‌شود و در نتیجه وارد قسمت else می‌شویم و "two" در کنسول چاپ می‌شود (دقیقا برعکس چیزی که انتظار داشتیم)!

مشخص است که این کد برای بیشتر دولوپرها کاملا گیج کننده است و باید از یک روش دیگر برای مقایسه با true یا false استفاده کنیم:
روش اول: اگر یک طرف شرط، true یا false بود، از عملگر === استفاده کنیم:
20 === true

روش دوم: خودمان طرف دیگر شرط را به boolean تبدیل کنیم:
Boolean(20) == true

روش سوم: اگر با یکی از 6 نفری که گزینه درست رو انتخاب کردند همکار هستید، هر طور که دوست دارید شرط رو بنویسید 😁

🔺 تحریم‌های اینترنتی رو بی‌اثر کن! 👊

https://shecan.ir/

#link

@ProGraphs

​احتمالا شما هم با این مشکل مواجه شده‌اید که یک متن را روی یک تصویر قرار دهید و تشابه رنگ متن و تصویر باعث ناخوانا شدن متن در بعضی نقاط شود.

برای حل این مشکل با استفاده از mix-blend-mode می‌توانیم خیلی ساده و فقط با CSS، در همه‌ی نقاط بین متن و تصویر contrast ایجاد کنیم.

#quicktip #css #trick

@ProGraphs

🔺 چیز‌هایی که دوست داریم در سال 2019 به CSS اضافه شود.

https://css-tricks.com/2019-css-wishlist/

#link #css

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺 احتمالاً jQuery از Bootstarp5 حذف خواهد شد.

https://kutt.it/DDYQ8j

#link #bootstrap #jquery

@ProGraphs

🔺شما هم در نظر سنجی State of CSS شرکت کنید. ✌🏻

https://stateofcss.com/

#link #css #survey

@ProGraphs

جواب: false

احتمالا همه‌ی ما با مفهوم Operator Precedence آشنا هستیم و می‌دانیم که یک عبارت که از چند عملگر تشکیل شده، بر اساس اولویت عملگرها parse می‌شود (و نه لزوما از چپ به راست).

اما چند عملگر با اولویت یکسان چطور؟
آیا چند عملگر با اولویت یکسان همیشه از چپ به راست parse می‌شوند؟

برای درک این موضوع باید با مفهوم Associativity آشنا باشیم. Associativity مشخص می‌کند که چند عملگر با اولیت یکسان، به چه ترتیبی اعمال می‌شوند.

این مقدار برای بعضی عملگرها مثل < و > "left-to-right" و برای بعضی عملگرها مثل :? و = "right-to-left" است.

دوباره به کد سوال دقت کنید:
اولویت عملگرها یکسان است. پس با توجه به Associativity عملگر <، عبارت را از چپ به راست می‌خوانیم:
(3 > 2) > 1
true > 1
حالا فقط یک عبارت ساده با یک عملگر داریم:
true > 1
1 > 1
false

لیست اولویت و Associativity همه‌ی عملگرها رو می‌تونید اینجا ببینید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table

​همه‌ی ما این جمله را شنیده‌ایم که "همه چیز در جاوااسکریپت آبجکت است"!

اما جالب است بدانید که این جمله کاملا غلط است. در واقع نوع داده‌ها در جاوااسکریپت به دو دسته کلی آبجکت‌ و primitiveها دسته بندی می‌شوند.
و مقادیری مثل اعداد، stringها, booleanها و ... هیچ کدام آبجکت نیستند!

شاید بپرسید اگر stringها و ... آبجکت نیستند، پس چطور می‌توانند (مثل آبجکت‌ها) پراپرتی و متد داشته باشند؟
"some string".includes('some');

هفته آینده این موضوع را به طور کامل بررسی می‌کنیم 😉

#quicktip #js

@ProGraphs

🔺 Landing page Collection 👌

https://www.h69.design/

#link #inspiration #design

@ProGraphs

آیا با مفهوم TDZ یا Temporal Dead Zone در جاوااسکریپت آشنا هستید؟

#interviewquestion #js

@ProGraphs

​یه روش باحال برای دیباگ کردن 😅

https://rubberduckdebugging.com

#link #debugging #fun

@ProGraphs

جواب:

یادآوری hoisting: در یکی از مطالب قدیمی‌تر مفهوم hoisting را بررسی کردیم و دیدیم که در جاوااسکریپت، (به دلیل کامپایل شدن کد قبل از اجرای آن) می‌توانیم متغیرها را حتی قبل از تعریفشان مقدار دهی کنیم:

a = 2;
var a;

اما متغیرهایی که با let و const تعریف می‌شوند، hoist نمی‌شوند:

a = 2; // Error!
let a;

❗️همانطور که می‌بینید، از جایی که وارد scope می‌شویم تا جایی که متغیر تعریف شده است، به متغیر دسترسی نداریم. به این قسمت از کد، TDZ یا Temporal Dead Zone می‌گوییم. و دسترسی به متغیر در این قسمت باعث خطا در برنامه می‌شود.

❗️گفتیم که دلیل hoist شدن متغیرهایی که با var تعریف می‌شوند، تعریف شدن متغیرها در زمان کامپایل شدن کد (قبل از اجرا) است. اما آیا این به این معناست که متغیرهایی که با let تعریف می‌شوند، در زمان کامپایل تعریف نمی‌شوند؟

خیر! در واقع متغیرهایی که با var تعریف می‌شوند، علاوه بر bind شدن به scope تابع، هم‌زمان initialize هم می‌شوند و مقدار اولیه undefined را می‌گیرند.
ولی متغیرهایی که با let تعریف می‌شوند فقط به scope بلاک bind می‌شوند و بلافاصله مقدار اولیه نمی‌گیرند.
به همین دلیل متغیرهایی که let تعریف می‌شوند hoist نمی‌شوند و تا زمانی که به نقطه‌ای از کد که متغیر در آن تعریف شده نرسیده‌ایم، به متغیر دسترسی نداریم.

پس در هر دو صورت متغیرها در زمان کامپایل تعریف می‌شوند!