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

#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

جواب:

همانطور که میدانید برای تعیین موقعیت 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

یه cheatsheet کامل و خوب برای css grid 👌

https://grid.malven.co/

#link #cheatsheet

@ProGraphs

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

(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)

#interviewquestion #js

@ProGraphs

یه مطلب جالب راجع به کم‌رنگ شدن وابستگی به ابزار‌های توسعه فرانت‌اند، با پیشرفت تکنولوژی‌های پایه‌ای

https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/

#link #frontend

@ProGraphs

یه پیش‌بینی جالب از ترند‌های وب در سال 2019

https://youtu.be/VLm3Y7Odb74

#link #trends

@ProGraphs

جواب: 16

در خط اول کد دو آیتم در آرایه داریم، پس تا اینجا length آرایه عدد 2 است. اما مسئله اصلی نحوه‌ی عملکرد خط دوم است.

می‌دانیم که آرایه‌ها در جاوااسکریپت در واقع نوع خاصی از آبجکت‌ها هستند. بنابراین علاوه بر index های عددی، می‌توانند key هایی از نوع string داشته باشند. در حالت معمول این key ها مقدار length آرایه را تغییر نمی‌دهند ولی اگر مقدار این string بتواند به عدد دسیمال convert شود، جاوااسکریپت تصور می‌کند که قصد داریم index عددی اضافه کنیم و نه یک string key!

اگر دوباره به خط دوم کد دقت کنید می‌بینید که داریم یک string key به آرایه اضافه می‌کنیم. ولی مقدار این key در واقع عدد 15 است. پس یک آیتم جدید در موقعیت 15ام آرایه اضافه می‌شود.
حال یک آرایه sparse داریم که آیتم‌های آن پشت سر هم نیستند. در این حالت، مقدار پراپرتی length یکی بیشتر از بزرگترین index آرایه (یعنی 15+1) است.

همینطور که می‌بینید اضافه کردن string key به آرایه یا sparse کردن یک آرایه پیچیدگی‌های زیادی ایجاد می‌کند. بنابراین بهتر است از آرایه‌ها فقط به عنوان لیست‌هایی با index عددی و آیتم‌های پشت سر هم استفاده کنیم.

به زودی تغییرات خوبی خواهیم داشت و قصد داریم مطالب بیشتر و بهتری رو پوشش بدیم.
اما قبلش با جواب دادن به این چند سوال به ما کمک کنید که این تغییرات هر چه بیشتر همسو با نظر شما باشه 🙏

اگر هر نظر دیگه‌ای هم دارید از این طریق با ما در میون بگذارید:

@HiProGraphsBot

کدام دسته از مطالب کانال برای شما مفید‌تر است؟

نظر شما راجع به تعداد مطالب کانال چیست؟

فکر می‌کنید توانسته‌ایم در این مدت کمتر از سه ماه برای شما مفید واقع شویم؟