جواب:

کد زیر را در نظر بگیرید:

proGraphs = 20;
var proGraphs;
console.log(proGraphs); //20

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

و اما چرا این اتفاق می‌افتد و نحوه عملکرد hoisting چیست؟ (خیلی مهم)

در مطالب قبلی اشاره کردیم که کد جاوااسکریپت در مرورگر‌های مدرن قبل از اجرا کامپایل می‌شود.
در واقع تعریف متغیر‌ها و توابع در زمان کامپایل کد انجام می‌شود و مقداردهی و استفاده از آن‌ها در زمان اجرا. به این ترتیب تعریف متغیر و مقداردهی به آن در دو زمان کاملا متفاوت (هر چند خیلی سریع)‌ انجام می‌شود.
در حقیقت hoisting فقط یک مفهوم ذهنی است و این کامپایل شدن کد است که باعث می‌شود به متغیر‌ها و توابع قبل از تعریف دسترسی داشته باشیم.

(همچنین متغیر‌هایی که با let و const تعریف می‌شوند hoist نمی‌شوند)

یه منبع عالی برای درک عمیق hoisting و نحوه کامپایل شدن کد جاوااسکریپت:

https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch4.md

​​مجموعه‌ای از پالت‌های رنگی عالی 🎉👌🏻

https://colordrop.io/

#link #color

@ProGraphs

​​در مطالب قبلی اشاره کردیم که انجین جاوااسکریپت در مرحله‌ی کامپایل کد، متغیر‌های موجود در هر scope را تعریف می‌کند و سپس کد اجرا می‌شود.

به این ترتیب چند بار تعریف کردن یک متغیر کاملا نادیده گرفته می‌شود و هیچ تاثیری بر مقدار متغیر نخواهد داشت. (به کد تصویر دقت کنید).

همچنین اگر متغیری که با let تعریف می‌کنیم قبلا تعریف شده باشد، error دریافت می‌کنیم.

#quicktip #js

@ProGraphs

ببینید با css grid چی کار کرده 😁👌

https://codepen.io/andybarefoot/pen/ypPgod

#link #css

@ProGraphs

این کلاس CSS برای زیاد کردن فاصله‌ی خطوط متن نوشته شده است.
آیا مشکلی در این کد می‌بینید؟ روش بهتری برای این کار می‌شناسید؟

#interviewquestion #css

@ProGraphs

​​یه مجموعه موسیقی مخصوص برنامه نویسی!

https://musicforprogramming.net/

#link #music #concentration

@ProGraphs

​​30 Seconds of CSS: Useful CSS Snippets You Can Understand Quickly 👌🏻✨

https://30-seconds.github.io/30-seconds-of-css/

#link #css

@ProGraphs

جواب:

زمانی که از مقدار درصدی برای تعیین line-height استفاده می‌کنیم این مقدار به صورت درصدی از سایز فونت عنصر محاسبه می‌شود و فرزند عنصر دقیقاً همین مقدار را به ارث می‌برد.

حالا مشکلی که پیش می‌آید این است که اگر سایز فونت فرزند این عنصر خیلی بزرگ‌تر یا کوچک‌تر باشد. دیگر مقدار line-height محاسبه شده برای آن مناسب نخواهد بود.

روش بهتر استفاده از مقدار بدون واحد است. مثلا line-height: 1.5
به این ترتیب مقدار line-height برای هر عنصر، 1.5 برابر سایز فونت همان عنصر خواهد بود و متناسب با سایز فونت هر عنصر به درستی تطبیق میابد.

یه مقاله خوب برای بررسی دقیق‌تر این موضوع

https://css-tricks.ir/reference/line-height/

جالبه که برای تعریف IIFE در جاوااسکریپت می‌توانیم به جای قرار دادن تابع در پرانتز، از یک عملگر تکی مثل + استفاده کنیم😁

#quicktip #js

@ProGraphs

یه آموزش خیلی عالی و خاص برای http👌

https://howhttps.works/

#link #http #tutorial

@ProGraphs

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

#interviewquestion #js #thiskeyword

@ProGraphs

یه cheatsheet کامل برای flexbox

https://flexbox.malven.co/

#link #cheatsheet #css

@ProGraphs

🔺 یه سایت به درد بخور برای ساخت اینجور پس زمینه‌ها ✨

https://trianglify.io/

@ProGraphs

جواب:‌ Window Title

برای بررسی این کد باید درک درستی از مکانیزم this در جاوااسکریپت داشته باشیم. به طور خلاصه برای تعیین کردن مقدار this در یک تابع، فقط و فقط نحوه‌ی صدا شدن آن تابع را بررسی می‌کنیم (call-site).
مثلا اگر تابع توسط یک آبجکت صدا شود (obj.func) مقدار this در آن تابع برابر obj است. یا اگر یک تابع به صورت معمولی صدا شود مقدار this در آن تابع آبجکت window/global است (در حالت non-strict). بنابراین مقدار this اصلا ارتباطی به جایی که تابع تعریف شده‌است ندارد و فقط به نحوه‌ی صدا شدن آن بستگی دارد.
func() -> this = window
obj.func() -> this = obj
...

دوباره به کد دقت کنید:
تابع printTitle برای اولین بار در آبجکت panel تعریف شده. اما این موضوع ارتباطی با مقدار this ندارد و همانطور که گفتیم فقط به نحوه‌ی صدا شدن تابع نگاه می‌کنیم. در این کد تابع در نهایت به صورت یک متغیر گلوبال و به صورت معمولی صدا شده است. و همانطور که گفتیم در این شرایط this به آبجکت window اشاره می‌کند.
printTitle()

حال فقط باید پراپرتی title در آبجکت window را پیدا کنیم. همانطور که می‌دانیم در جاوااسکریپت به‌ازای هر متغیر گلوبال، به صورت خودکار یک پراپرتی با همان نام در آبجکت window/global تعریف می‌شود.
پس در اینجا پراپرتی‌ای به نام title و با مقدار Window Title در آبجکت window داریم که همان نیز در کنسول چاپ می‌شود.

اگر این سوال رو کامل درک نکردید اصلا نگران نباشید!
حتما در مطالب بعدی خیلی کامل‌تر مکانیزم this رو بررسی خواهیم کرد و سعی می‌کنیم منابع خوب برای مطالعه عمیق‌تر این موضوع رو هم معرفی کنیم 😉

دو تا از منابع تخصصی رایگان برای دریافت Free Food Photos:

https://foodiefactor.com/
https://www.foodiesfeed.com/

🔺اگه شما هم منابع خوب دیگه‌ای می‌شناسین، می‌تونین از طریق @HiProGraphsBot بهمون معرفی کنین 😊

#link #stockphoto #food

@ProGraphs

یه سایت خوب دیگه برای گرادینت 🎉

https://webgradients.com/

#link #color #gradient

@ProGraphs

​​با استفاده از تب Sensors در chrome devtools می‌توانیم سنسور‌های Geolocation و Accelerometer دستگاه‌های همراه را شبیه سازی کنیم.

(برای نمایش این تب از منوی devtools, گزینه‌ی more tools و sensors را انتخاب کنید)

این صفحه هم برای تست این قابلیت درست شده:
https://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html

#quicktip #devtools

@ProGraphs