در این کد چرا به جای چک کردن مقدار متغیر با undefined به صورت معمولی، از عملگر typeof استفاده شده است؟
#interviewquestion #js
@ProGraphs
#interviewquestion #js
@ProGraphs
🔺یه پک از آیکون‌ها برای action و item های متداول‌تر:
https://akveo.github.io/eva-icons
#link #icon
@ProGraphs
https://akveo.github.io/eva-icons
#link #icon
@ProGraphs
ProGraphs
در این کد چرا به جای چک کردن مقدار متغیر با undefined به صورت معمولی، از عملگر typeof استفاده شده است؟ #interviewquestion #js @ProGraphs
جواب:
وقتی به صورت معمولی متغیر را با undefined چک می‌کنیم، اگر متغیر تعریف نشده باشد Error دریافت می‌کنیم.
ولی عملگر typeof هم در حالتی که متغیر واقعا undefined باشد و هم در حالتی که تعریف نشده باشد، مقدار 'undefined' را برمی‌گرداند.
به این ترتیب با استفاده از عملگر typeof مطمئن می‌شویم که در هرصورت Error نخواهیم داشت.
اما دقت کنید که در بیشتر مواقع بهتر است در صورتی که با متغیر تعریف نشده کار می‌کنیم، خطا دریافت کنیم که زودتر مشکل کد را رفع کنیم.
استفاده از typeof برای چک کردن undefined بیشتر برای ایجاد polyfill, library, ... به کار می‌آید (چون می‌خواهیم مطمئن باشیم که کد خطا نداشته باشد)
نتیجه اخلاقی: Error نداشتن همیشه هم خوب نیست 😁
وقتی به صورت معمولی متغیر را با undefined چک می‌کنیم، اگر متغیر تعریف نشده باشد Error دریافت می‌کنیم.
ولی عملگر typeof هم در حالتی که متغیر واقعا undefined باشد و هم در حالتی که تعریف نشده باشد، مقدار 'undefined' را برمی‌گرداند.
به این ترتیب با استفاده از عملگر typeof مطمئن می‌شویم که در هرصورت Error نخواهیم داشت.
اما دقت کنید که در بیشتر مواقع بهتر است در صورتی که با متغیر تعریف نشده کار می‌کنیم، خطا دریافت کنیم که زودتر مشکل کد را رفع کنیم.
استفاده از typeof برای چک کردن undefined بیشتر برای ایجاد polyfill, library, ... به کار می‌آید (چون می‌خواهیم مطمئن باشیم که کد خطا نداشته باشد)
نتیجه اخلاقی: Error نداشتن همیشه هم خوب نیست 😁
یه سایت خوب برای ساخت Repeatable SVG background patterns:
https://www.heropatterns.com/
#link #svg #background
@ProGraphs
https://www.heropatterns.com/
#link #svg #background
@ProGraphs
Heropatterns
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your digital projects.
در مطالب قبلی مفهوم BFC، نحو‌ه‌ی ایجاد آن و بعضی از کاربرد‌های آن را بررسی کردیم.
اما روش‌هایی که برای ایجاد BFC معرفی کردیم همگی دارای side-effect هستند. مثلا position: absolute علاوه بر اینکه عنصر را BFC می‌کند، عنصر را از جریان صفحه خارج می‌کند.
مقدار جدید ویژگی display به نام flow-root فقط یک BFC ایجاد می‌کند و هیچ اثر دیگری ندارد!
در واقع روش درست برای ایجاد BFC همین ویژگی است. ولی فعلا پشتیبانی مرورگر‌ها از آن مناسب نیست و باید کمی صبر کنیم!
https://caniuse.com/#feat=flow-root
#quicktip #css
@ProGraphs
اما روش‌هایی که برای ایجاد BFC معرفی کردیم همگی دارای side-effect هستند. مثلا position: absolute علاوه بر اینکه عنصر را BFC می‌کند، عنصر را از جریان صفحه خارج می‌کند.
مقدار جدید ویژگی display به نام flow-root فقط یک BFC ایجاد می‌کند و هیچ اثر دیگری ندارد!
در واقع روش درست برای ایجاد BFC همین ویژگی است. ولی فعلا پشتیبانی مرورگر‌ها از آن مناسب نیست و باید کمی صبر کنیم!
https://caniuse.com/#feat=flow-root
#quicktip #css
@ProGraphs
ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟ #interviewquestion #js #scope @ProGraphs
جواب: Hello World!
هر آرگومان یک تابع در واقع یک متغیر در scope همان تابع است.
به این ترتیب متغیری به نام message در تابع printMessage داریم و در خط اول تابع در واقع متغیری که قبلا تعریف شده است را دوباره تعریف می‌کنیم.
طبق مطلبی که قبل‌تر بررسی کردیم تعریف چند باره‌ی یک متغیر کاملا نادیده گرفته می‌شود. بنابراین خط اول تابع هیچ کاری انجام نمی‌دهد!
به این ترتیب یک متغیر message با مقدار Hello World در تابع و یک متغیر دیگر با همین نام ولی گلوبال داریم.
واضح است که وقتی reference متغیر (که درون console.log است) داخل خود تابع است، متغیر message که داخل خود تابع است (Hello World!) در کنسول چاپ می‌شود.
(عبارت variable shadowing را جستجو کنید)
هر آرگومان یک تابع در واقع یک متغیر در scope همان تابع است.
به این ترتیب متغیری به نام message در تابع printMessage داریم و در خط اول تابع در واقع متغیری که قبلا تعریف شده است را دوباره تعریف می‌کنیم.
طبق مطلبی که قبل‌تر بررسی کردیم تعریف چند باره‌ی یک متغیر کاملا نادیده گرفته می‌شود. بنابراین خط اول تابع هیچ کاری انجام نمی‌دهد!
به این ترتیب یک متغیر message با مقدار Hello World در تابع و یک متغیر دیگر با همین نام ولی گلوبال داریم.
واضح است که وقتی reference متغیر (که درون console.log است) داخل خود تابع است، متغیر message که داخل خود تابع است (Hello World!) در کنسول چاپ می‌شود.
(عبارت variable shadowing را جستجو کنید)
مکانیزم this در جاوااسکریپت: (قانون اول)
برای تعیین this در هر تابع فقط و فقط به جایی که تابع صدا شده است توجه می‌کنیم(call-site). در واقع اصلا اهمیتی ندارد که تابع کجا و چطور تعریف شده است.
اولین قانونی که باید برای تعیین this بدانیم این است که وقتی تابع به صورت معمولی و ساده صدا شود (یعنی بدون new, call, ...)، مقدار this در آن برابر آبجکت window/global خواهد بود.
همچنین اگر در strict-mode باشیم، مقدار this از window به undefined تغییر خواهد کرد. (به تصویر دقت کنید)
#quicktip #js
@ProGraphs
برای تعیین this در هر تابع فقط و فقط به جایی که تابع صدا شده است توجه می‌کنیم(call-site). در واقع اصلا اهمیتی ندارد که تابع کجا و چطور تعریف شده است.
اولین قانونی که باید برای تعیین this بدانیم این است که وقتی تابع به صورت معمولی و ساده صدا شود (یعنی بدون new, call, ...)، مقدار this در آن برابر آبجکت window/global خواهد بود.
همچنین اگر در strict-mode باشیم، مقدار this از window به undefined تغییر خواهد کرد. (به تصویر دقت کنید)
#quicktip #js
@ProGraphs
ProGraphs
مکانیزم this در جاوااسکریپت: (قانون اول) برای تعیین this در هر تابع فقط و فقط به جایی که تابع صدا شده است توجه می‌کنیم(call-site). در واقع اصلا اهمیتی ندارد که تابع کجا و چطور تعریف شده است. اولین قانونی که باید برای تعیین this بدانیم این است که وقتی…
مکانیزم this چیزی جز 4 قانون و چند نکته‌ی ساده نیست!
تا سه هفته‌ی آینده، هر هفته یکی از این قوانین رو بررسی می‌کنیم 😉
تا سه هفته‌ی آینده، هر هفته یکی از این قوانین رو بررسی می‌کنیم 😉
یه مجموعه‌ی جالب از کتاب‌هایی که مطالبشون از stack overflow جمع آوری شده.
https://goalkicker.com/
#link #book
@ProGraphs
https://goalkicker.com/
#link #book
@ProGraphs
Goalkicker
Free Programming Books; HTML5, CSS3, JavaScript, PHP, Python...
Free Programming Books on Android development, C, C#, CSS, HTML5, iOS development, Java, JavaScript, PowerShell, PHP, Python, SQL Sever and more
این layout ساده را با flexbox ساخته‌ایم.
چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)
#interviewquestion #css
@ProGraphs
چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟
(در راستای main-axis)
#interviewquestion #css
@ProGraphs
یه پروسه‌ی جالب برای خوندن کد رنگ‌های هگزادسیمال 👌
https://youtu.be/Sd14d1t5vbQ
#link #color
@ProGraphs
https://youtu.be/Sd14d1t5vbQ
#link #color
@ProGraphs
ProGraphs
این layout ساده را با flexbox ساخته‌ایم. چطور مانند تصویر، فقط یکی از flex-item ها را به گوشه‌ی flex-container ببریم؟ (در راستای main-axis) #interviewquestion #css @ProGraphs
جواب:
همانطور که میدانید برای تعیین موقعیت flex-item ها در راستای cross axis به صورت تکی از پراپرتی align-self استفاده می‌کنیم.
ولی تا الان پراپرتی برای تعیین موقعیت تکی در راستای main axis تعریف نشده است.
برای شبیه‌سازی این قابلیت می‌توانیم از margin: auto استفاده کنیم. به این‌صورت که به هر flex-item در هر جهت margin: auto اعمال کنیم، عنصر مورد نظر تا جایی که می‌تواند از آن جهت فاصله می‌گیرد.
یعنی در این تصویر فقط کافیست به عنصر 4 ویژگی margin-left: auto را اعمال کنیم.
(شاید نام پراپرتی justify-self را هم شنیده باشید. ولی این پراپرتی ربطی به تعیین موقعیت در flexbox ندارد و کاربرد دیگری دارد!)
همانطور که میدانید برای تعیین موقعیت flex-item ها در راستای cross axis به صورت تکی از پراپرتی align-self استفاده می‌کنیم.
ولی تا الان پراپرتی برای تعیین موقعیت تکی در راستای main axis تعریف نشده است.
برای شبیه‌سازی این قابلیت می‌توانیم از margin: auto استفاده کنیم. به این‌صورت که به هر flex-item در هر جهت margin: auto اعمال کنیم، عنصر مورد نظر تا جایی که می‌تواند از آن جهت فاصله می‌گیرد.
یعنی در این تصویر فقط کافیست به عنصر 4 ویژگی margin-left: auto را اعمال کنیم.
(شاید نام پراپرتی justify-self را هم شنیده باشید. ولی این پراپرتی ربطی به تعیین موقعیت در flexbox ندارد و کاربرد دیگری دارد!)
نسخه 71 گوگل کروم هم به تازگی منتشر شد!
یکی از ویژگی‌های جالبی که به این نسخه اضافه شده، امکان ذخیره کردن سریع عناصر html در یک متغیر گلوبال است.
کافی است در تب elements روی یک عنصر راست کلیک کنید و گزینه‌ی Store as global variable را انتخاب کنید.
#quicktip #devtools
@ProGraphs
یکی از ویژگی‌های جالبی که به این نسخه اضافه شده، امکان ذخیره کردن سریع عناصر html در یک متغیر گلوبال است.
کافی است در تب elements روی یک عنصر راست کلیک کنید و گزینه‌ی Store as global variable را انتخاب کنید.
#quicktip #devtools
@ProGraphs
با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟
(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)
#interviewquestion #js
@ProGraphs
(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)
#interviewquestion #js
@ProGraphs
یه مطلب جالب راجع به کم‌رنگ شدن وابستگی به ابزار‌های توسعه فرانت‌اند، با پیشرفت تکنولوژی‌های پایه‌ای
https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/
#link #frontend
@ProGraphs
https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/
#link #frontend
@ProGraphs
CSS-Tricks
Front-end development is not a problem to be solved | CSS-Tricks
HTML and CSS are often seen as a burden.