اگر این سوال رو کامل درک نکردید اصلا نگران نباشید!
حتما در مطالب بعدی خیلی کامل‌تر مکانیزم 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 را جستجو کنید)

The super fast color schemes generator! 👇🏻

https://coolors.co/

#link #color #generator

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون اول)

برای تعیین this در هر تابع فقط و فقط به جایی که تابع صدا شده است توجه می‌کنیم‌(call-site). در واقع اصلا اهمیتی ندارد که تابع کجا و چطور تعریف شده است.

اولین قانونی که باید برای تعیین this بدانیم این است که وقتی تابع به صورت معمولی و ساده صدا شود (یعنی بدون new, call, ...)، مقدار ‌this در آن برابر آبجکت window/global خواهد بود.

همچنین اگر در strict-mode باشیم، مقدار this از window به undefined تغییر خواهد کرد.‌ (به تصویر دقت کنید)

#quicktip #js

@ProGraphs

مکانیزم this چیزی جز 4 قانون و چند نکته‌ی ساده نیست!
تا سه هفته‌ی آینده، هر هفته یکی از این قوانین رو بررسی می‌کنیم 😉

یه مجموعه‌ی جالب از کتاب‌هایی که مطالبشون از stack overflow جمع آوری شده.
https://goalkicker.com/

#link #book

@ProGraphs

این layout ساده را با flexbox ساخته‌ایم.

چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)

#interviewquestion #css

@ProGraphs

یه پروسه‌ی جالب برای خوندن کد رنگ‌های هگزادسیمال 👌

https://youtu.be/Sd14d1t5vbQ

#link #color

@ProGraphs