🔺 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 نمی‌شوند و تا زمانی که به نقطه‌ای از کد که متغیر در آن تعریف شده نرسیده‌ایم، به متغیر دسترسی نداریم.

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

مفهوم TDZ رو تا حد لازم (و حتی بیشتر 😅)‌ بررسی کردیم. ولی اگه دوست دارید بیشتر راجع به این موضوع بدونید این مطالب خوبه:

https://exploringjs.com/es6/ch_variables.html#sec_temporal-dead-zone

https://wesbos.com/temporal-dead-zone/

https://2ality.com/2015/10/why-tdz.html

🔺نتایج نظرسنجی ابزار‌های طراحی سال 2018 🎉

https://uxtools.co/survey-2018

#link #design #tool #survey

@ProGraphs

​چطور در جاوااسکریپت اعداد و ... که از نوع primitive هستند، می‌توانند (مثل آبجکت‌ها) متد داشته باشند؟

قبل از جواب دادن به این سوال، بیایید مفهوم Wrapper Object را بررسی کنیم:
var num = new Number(2);
در این کد برخلاف چیزی که به نظر می‌رسد، مقدار متغیر num یک عدد نیست! بلکه آبجکتی است که عدد 2 در آن وجود دارد. به این آبجکت، wrapper object گفته می‌شود.

❗️اما چه فایده‌ای دارد که خروجی new Number یک آبجکت باشد و نه یک عدد؟
در یکی از مطالب قدیمی‌تر مفهوم [[prototype]] را بررسی کردیم و دیدیم که یک مکانیزم برای لینک کردن آبجکت‌ها به یکدیگر است.
حالا آبجکتی در جاوااسکریپت وجود دارد به نام ‌Number.prototype که همه‌ی متدهای اعداد در آن تعریف شده است و آبجکتی که از صدا کردن new Number دریافت می‌کنیم، به آن لینک شده است.

مشابه این آبجکت‌، String.prototype و Boolean.prototype هم وجود دارد.

❗️و حالا جواب سوال:
وقتی این کد را می‌نویسیم:
"some string".toUpperCase()
جاوااسکریپت به صورت خودکار مقدار primitive را تبدیل به یک wrapper object می‌کند و متد مورد نظر را روی آن صدا می‌کند. و البته توجه کنید که متد مورد نظر در آبجکت String.prototype قرار دارد که wrapper object به آن لینک شده است. به این ترتیب بعضی از نوع داده‌های primitive هم می‌توانند پراپرتی و متد داشته باشند!

برای اثبات این موضوع یک متد دلخواه به آبجکت String.prototype اضافه می‌کنیم و می‌بینیم که همه‌ی string‌ها به متد مورد نظر دسترسی دارند! (به کد داخل تصویر دقت کنید)

#quicktip #js

@ProGraphs

البته کدی که داخل تصویر می‌بینید، در حالت strict-mode یه مقدار متفاوت عمل می‌کنه 😅
و حتما اون رو هم به مرور بررسی می‌کنیم.

این هم دو تا منبع عالی برای مطالعه بیشتر راجع به این موضوع:
https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch3.md#boxing-wrappers

https://2ality.com/2011/03/javascript-values-not-everything-is.html

فرض کنید سه عنصر grand-parent و parent و child، به ترتیب داخل هم قرار دارند و این کد CSS بر روی آن‌ها اعمال شده است.

عرض عنصر child چند پیکسل است؟

#interviewquestion #css

@ProGraphs