​​در مطالب قبلی اشاره کردیم که انجین جاوااسکریپت در مرحله‌ی کامپایل کد، متغیر‌های موجود در هر 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

یه ابزار خوب و کامل Screen capture و file sharing برای کسانی که تولید محتوا می‌کنند 👌🏻✨

https://getsharex.com/

#tool

@ProGraphs

در این کد چرا به جای چک کردن مقدار متغیر با undefined به صورت معمولی، از عملگر typeof استفاده شده است؟

#interviewquestion #js

@ProGraphs

🔺یه پک از آیکون‌ها برای action و item های متداول‌تر:

https://akveo.github.io/eva-icons

#link #icon

@ProGraphs