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

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

جواب:

وقتی به صورت معمولی متغیر را با undefined چک می‌کنیم، اگر متغیر تعریف نشده باشد Error دریافت می‌کنیم.
ولی عملگر typeof هم در حالتی که متغیر واقعا undefined باشد و هم در حالتی که تعریف نشده باشد، مقدار 'undefined' را برمی‌گرداند.

به این ترتیب با استفاده از عملگر typeof مطمئن می‌شویم که در هرصورت Error نخواهیم داشت.


اما دقت کنید که در بیشتر مواقع بهتر است در صورتی که با متغیر تعریف نشده کار می‌کنیم، خطا دریافت کنیم که زودتر مشکل کد را رفع کنیم.
استفاده از typeof برای چک کردن undefined بیشتر برای ایجاد polyfill, library, ... به کار می‌آید (چون می‌خواهیم مطمئن باشیم که کد خطا نداشته باشد)

نتیجه اخلاقی: Error نداشتن همیشه هم خوب نیست 😁

یه سایت خوب برای ساخت Repeatable SVG background patterns:

https://www.heropatterns.com/

#link #svg #background

@ProGraphs

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

اما روش‌هایی که برای ایجاد BFC معرفی کردیم همگی دارای side-effect هستند. مثلا position: absolute علاوه بر اینکه عنصر را BFC می‌کند، عنصر را از جریان صفحه خارج می‌کند.

مقدار جدید ویژگی display به نام flow-root فقط یک BFC ایجاد می‌کند و هیچ اثر دیگری ندارد!

در واقع روش درست برای ایجاد BFC همین ویژگی است. ولی فعلا پشتیبانی مرورگر‌ها از آن مناسب نیست و باید کمی صبر کنیم!

https://caniuse.com/#feat=flow-root

#quicktip #css

@ProGraphs

780+ Free Vector Emoji ✨👇🏻

https://emoji.streamlineicons.com/

#link #emoji

@ProGraphs

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

#interviewquestion #js #scope

@ProGraphs

✨ سایتی برای الهام گرفتن در زمینه Web Design:

https://sitesee.co/

#link #inspiration

@ProGraphs

جواب: Hello World!

هر آرگومان یک تابع در واقع یک متغیر در scope همان تابع است.

به این ترتیب متغیری به نام message در تابع printMessage داریم و در خط اول تابع در واقع متغیری که قبلا تعریف شده است را دوباره تعریف می‌کنیم.

طبق مطلبی که قبل‌تر بررسی کردیم تعریف چند باره‌ی یک متغیر کاملا نادیده گرفته می‌شود. بنابراین خط اول تابع هیچ کاری انجام نمی‌دهد!

به این ترتیب یک متغیر message با مقدار Hello World در تابع و یک متغیر دیگر با همین نام ولی گلوبال داریم.

واضح است که وقتی reference متغیر (که درون console.log است) داخل خود تابع است،‌ متغیر message که داخل خود تابع است (Hello World!) در کنسول چاپ می‌شود.
(عبارت variable shadowing را جستجو کنید)