​همه‌ی ما این جمله را شنیده‌ایم که "همه چیز در جاوااسکریپت آبجکت است"!

اما جالب است بدانید که این جمله کاملا غلط است. در واقع نوع داده‌ها در جاوااسکریپت به دو دسته کلی آبجکت‌ و primitiveها دسته بندی می‌شوند.
و مقادیری مثل اعداد، stringها, booleanها و ... هیچ کدام آبجکت نیستند!

شاید بپرسید اگر stringها و ... آبجکت نیستند، پس چطور می‌توانند (مثل آبجکت‌ها) پراپرتی و متد داشته باشند؟
"some string".includes('some');

هفته آینده این موضوع را به طور کامل بررسی می‌کنیم 😉

#quicktip #js

@ProGraphs

🔺 Landing page Collection 👌

https://www.h69.design/

#link #inspiration #design

@ProGraphs

آیا با مفهوم TDZ یا Temporal Dead Zone در جاوااسکریپت آشنا هستید؟

#interviewquestion #js

@ProGraphs

​یه روش باحال برای دیباگ کردن 😅

https://rubberduckdebugging.com

#link #debugging #fun

@ProGraphs

جواب:

یادآوری hoisting: در یکی از مطالب قدیمی‌تر مفهوم hoisting را بررسی کردیم و دیدیم که در جاوااسکریپت، (به دلیل کامپایل شدن کد قبل از اجرای آن) می‌توانیم متغیرها را حتی قبل از تعریفشان مقدار دهی کنیم:

a = 2;
var a;

اما متغیرهایی که با let و const تعریف می‌شوند، hoist نمی‌شوند:

a = 2; // Error!
let a;

❗️همانطور که می‌بینید، از جایی که وارد scope می‌شویم تا جایی که متغیر تعریف شده است، به متغیر دسترسی نداریم. به این قسمت از کد، TDZ یا Temporal Dead Zone می‌گوییم. و دسترسی به متغیر در این قسمت باعث خطا در برنامه می‌شود.

❗️گفتیم که دلیل hoist شدن متغیرهایی که با var تعریف می‌شوند، تعریف شدن متغیرها در زمان کامپایل شدن کد (قبل از اجرا) است. اما آیا این به این معناست که متغیرهایی که با let تعریف می‌شوند، در زمان کامپایل تعریف نمی‌شوند؟

خیر! در واقع متغیرهایی که با var تعریف می‌شوند، علاوه بر bind شدن به scope تابع، هم‌زمان initialize هم می‌شوند و مقدار اولیه undefined را می‌گیرند.
ولی متغیرهایی که با let تعریف می‌شوند فقط به scope بلاک bind می‌شوند و بلافاصله مقدار اولیه نمی‌گیرند.
به همین دلیل متغیرهایی که let تعریف می‌شوند hoist نمی‌شوند و تا زمانی که به نقطه‌ای از کد که متغیر در آن تعریف شده نرسیده‌ایم، به متغیر دسترسی نداریم.

پس در هر دو صورت متغیرها در زمان کامپایل تعریف می‌شوند!

مفهوم TDZ رو تا حد لازم (و حتی بیشتر 😅)‌ بررسی کردیم. ولی اگه دوست دارید بیشتر راجع به این موضوع بدونید این مطالب خوبه:

http://exploringjs.com/es6/ch_variables.html#sec_temporal-dead-zone

https://wesbos.com/temporal-dead-zone/

http://2ality.com/2015/10/why-tdz.html

🔺نتایج نظرسنجی ابزار‌های طراحی سال 2018 🎉

https://uxtools.co/survey-2018

#link #design #tool #survey

@ProGraphs

​چطور در جاوااسکریپت اعداد و ... که از نوع primitive هستند، می‌توانند (مثل آبجکت‌ها) متد داشته باشند؟

قبل از جواب دادن به این سوال، بیایید مفهوم Wrapper Object را بررسی کنیم:
var num = new Number(2);
در این کد برخلاف چیزی که به نظر می‌رسد، مقدار متغیر num یک عدد نیست! بلکه آبجکتی است که عدد 2 در آن وجود دارد. به این آبجکت، wrapper object گفته می‌شود.

❗️اما چه فایده‌ای دارد که خروجی new Number یک آبجکت باشد و نه یک عدد؟
در یکی از مطالب قدیمی‌تر مفهوم [[prototype]] را بررسی کردیم و دیدیم که یک مکانیزم برای لینک کردن آبجکت‌ها به یکدیگر است.
حالا آبجکتی در جاوااسکریپت وجود دارد به نام ‌Number.prototype که همه‌ی متدهای اعداد در آن تعریف شده است و آبجکتی که از صدا کردن new Number دریافت می‌کنیم، به آن لینک شده است.

مشابه این آبجکت‌، String.prototype و Boolean.prototype هم وجود دارد.

❗️و حالا جواب سوال:
وقتی این کد را می‌نویسیم:
"some string".toUpperCase()
جاوااسکریپت به صورت خودکار مقدار primitive را تبدیل به یک wrapper object می‌کند و متد مورد نظر را روی آن صدا می‌کند. و البته توجه کنید که متد مورد نظر در آبجکت String.prototype قرار دارد که wrapper object به آن لینک شده است. به این ترتیب بعضی از نوع داده‌های primitive هم می‌توانند پراپرتی و متد داشته باشند!

برای اثبات این موضوع یک متد دلخواه به آبجکت String.prototype اضافه می‌کنیم و می‌بینیم که همه‌ی string‌ها به متد مورد نظر دسترسی دارند! (به کد داخل تصویر دقت کنید)

#quicktip #js

@ProGraphs

البته کدی که داخل تصویر می‌بینید، در حالت strict-mode یه مقدار متفاوت عمل می‌کنه 😅
و حتما اون رو هم به مرور بررسی می‌کنیم.

این هم دو تا منبع عالی برای مطالعه بیشتر راجع به این موضوع:
https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch3.md#boxing-wrappers

http://2ality.com/2011/03/javascript-values-not-everything-is.html

فرض کنید سه عنصر grand-parent و parent و child، به ترتیب داخل هم قرار دارند و این کد CSS بر روی آن‌ها اعمال شده است.

عرض عنصر child چند پیکسل است؟

#interviewquestion #css

@ProGraphs

🔺ZType: A typing game 👩🏻‍💻👨🏻‍💻

https://zty.pe/

#typing #game

@ProGraphs

جواب: 250px

وقتی کد این سوال را بررسی می‌کنیم به یک سوال پایه‌ای‌تر و مهم می‌رسیم:

❗️آیا مقادیر درصدی برای پراپرتی‌های width و left و ... همیشه نسبت به عنصر والد محاسبه می‌شوند؟
نه!‌ اگر بخواهیم دقیق‌تر بررسی کنیم، مقدار درصدی برای پراپرتی‌هایی که اندازه و موقعیت عنصر را مشخص می‌کنند، نسبت به عنصری به نام containing block مشخص می‌شود.

❗️حالا فقط باید عنصر containing block را مشخص کنیم:
در اکثر مواقع، عنصر والد containing block است و width و ... نسبت به آن محاسبه می‌شود. اما همیشه اینطور نیست!

به کد سوال دقت کنید:
عرض عنصر child به صورت درصدی تعیین شده است، پس باید containing block را پیدا کنیم تا مقدار درصدی را نسبت به آن محاسبه کنیم.

برای تعیین کردن containing block برای عناصر دارای position absolute، دنبال نزدیک‌ترین والد عنصر میگردیم که position آن هر مقداری غیر از static (مقدار پیشفرض) باشد.
در نتیجه عرض عنصر child نسبت به عنصر grand-parent محاسبه می‌شود و نه عنصر parent!

🔺SurveyMonkey 🐵

محبوب‌ترین ابزار رایگان نظرسنجی آنلاین در جهان

https://www.surveymonkey.com/

#link #tool #survey

@ProGraphs

از جواب‌ها مشخصه که بیشترمون این موضوع رو بلدیم 🙂💪

ولی اگه لازم شد، اینجا میتونید بیشتر راجع به containing blockها بخونید:

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

🔺تصاویر سوررئال رایگان برای Landing pages ✨

https://absurd.design/

#link #illustration #landingpage

@ProGraphs

​وقتی در یک صفحه اشتباها وارد حلقه بی‌نهایت می‌شویم، تب مرورگر کاملا freeze می‌شود و گاهی حتی بسته هم نمی‌شود!

در این شرایط، در chrome devtools، با ترفندی که در تصویر می‌بینید می‌توانیم صفحه را از حالت freeze خارج کنیم.

#quicktip #devtools

@ProGraphs

🔺یه سایت خوب برای تست و مشاهده‌ی Responsive بودن وب‌سایت شما ✌🏻

http://responsiv.eu/

#link #responsive

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺 Origami Studio

- اپلیکیشنی برای ساخت Prototype
- محصول شرکت Facebook
- کاملا رایگان
- برای کسانی که از Mac OS استفاده می‌کنند.

https://origami.design/

#tool #design #prototyping

@ProGraphs

جواب: 4

در مطالب قبلی pass by reference/value را بررسی کردیم و دیدیم که در جاوااسکریپت، آبجکت‌ها با reference به تابع پاس داده می‌شوند و مقادیر primitive، با value.

اما wrapper objectها چطور؟ آیا با استفاده از wrapper objectها می‌توانیم کاری کنیم که مقادیر primitive هم با reference به تابع ارسال شوند؟

به کد سوال دقت کنید:
در خط 5 یک wrapper object می‌سازیم که مقدار عددی 4 داخل آن قرار دارد. و با توجه به اینکه wrapper objectها از نوع آبجکت هستند، پس با reference به تابع پاس داده می‌شوند.
اما مشکل اینجاست که وقتی داخل تابع (خط 2) object wrapper را با یک عدد جمع می‌کنیم، جاوااسکریپت به صورت خودکار wrapper object را به یک عدد معمولی تبدیل می‌کند تا بتواند عملیات را روی آن انجام دهد (اصطلاحا مقدار primitive را unbox/unwrap می‌کند).
به این ترتیب دوباره یک مقدار primitive داریم که تغییرات آن در بیرون تابع تاثیر نمی‌گذارد!

پس حتی با این ترفند هم نمی‌توانیم مقادیر primitive را با reference به تابع ارسال کنیم.

در کل تنها راه برای اینکه تغییرات روی مقادیر primitive، در بیرون تابع هم قابل مشاهده باشد این است که مقدار primitive را به صورت یک پراپرتی معمولی داخل یک آبجکت تعریف کنیم:

function proGraphs(x) {
    x.num = x.num + 1;
}
var obj = { num: 4 };
proGraphs(obj);
obj.num; // 5