​در یکی از مطالب قدیمی‌تر تفاوت پراپرتی‌های transform و left/right را برای ایجاد انیمیشن در CSS بررسی کردیم. و دیدیم که مرورگر برای render کردن تغییرات در صفحه، چند مرحله (style - layout - paint - composite) را طی می‌کند.

اما در بعضی شرایط، تغییر ظاهر یک عنصر، بر روی سایر عناصر هم تاثیر می‌گذارد و مرورگر را مجبور به انجام محاسبات اضافه برای سایر عناصر می‌کند.

با استفاده از پراپرتی جدید contain در CSS می‌توانیم عملیات style و layout و paint را فقط به یک بخش از صفحه محدود کنیم.

https://developers.google.com/web/updates/2016/06/css-containment

#quicktip #css #performance

@ProGraphs

​در گوگل کروم می‌توانیم برای زمانی که attribute یک عنصر تغییر می‌کند، breakpoint تعریف کنیم.

به این ترتیب مثلا می‌توانیم بررسی کنیم که یک افکت، دقیقاً در چه قسمتی از کد و چطور پیاده‌سازی شده است!

#quicktip #devtools

@ProGraphs

تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت اول):

چطور نوع داده‌های مختلف در جاوااسکریپت به string تبدیل می‌شوند؟
❗️1-تقریبا همه‌ی مقادیر primitive بدون تغییر خاصی به string تبدیل می‌شوند و حالت stringای آنها از پیش تعیین شده است:

true -> "true"
12 -> "12"
NaN -> "NaN"
null -> "null"
undefined -> "undefined"

اما اعداد خیلی بزرگ و خیلی کوچک به صورت نمایی نمایش داده می‌شوند:
10000000000000000000000 -> "1e+22"


❗️2- برای تبدیل آبجکت‌ها به string، متد toString داخل آن‌ها صدا می‌شود:

var obj = {
    toString() {
        return "proGraphs";
    }
}
obj -> "proGraphs"

همچنین داخل Object.prototype، متدی به نام toString تعریف شده است. بنابراین اگر خودمان متد toString را داخل یک آبجکت تعریف نکنیم، متد Object.toString برای تبدیل به string صدا می‌شود (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

همین! حالا مهم نیست که کجا، چطور و با کدام روش یک مقدار به string تبدیل می‌شود. در هر صورت از قوانینی که بررسی کردیم تبعیت می‌شود و خروجی coercion یکسان خواهد بود:
String(true); // "true"
true + ""; // "true
...

#quicktip #js #coercion

@ProGraphs

تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت دوم):

در مطلب قبلی، تبدیل نوع داده‌ها به string را بررسی کردیم و نحوه‌ی تبدیل آبجکت‌ها به string را هم دیدیم.

حالا می‌خواهیم نحوه‌ی تبدیل آبجکت‌ها به primitive را دقیق‌تر بررسی کنیم (نه فقط string):

❗️وقتی سعی می‌کنیم یک آبجکت را به یک نوع داده مثل number, string تبدیل کنیم (که نوع داده‌های primitive هستند)، باید ابتدا آبجکت به primitive تبدیل شود. اما چطور؟

1- اگر متدی به نام valueOf در آبجکت وجود داشته باشد و خروجی این متد از نوع primitive باشد، همین متد صدا می‌شود:

var obj = {
    valueOf() {
        return 2;
    }
};
obj -> 2

2- اگر از مرحله‌ی قبلی مقدار primitive تعیین نشود، متد toString صدا می‌شود:

var obj = {
    toString() {
        return "hi";
    }
};
obj -> "hi"

دقت کنید که این مراحل، توسط خود جاوااسکریپت و زمانی که می‌خواهیم یک آبجکت را به یک نوع داده‌ی primitive مثل string تبدیل کنیم انجام می‌شود.

❗️نکات تکمیلی:
- همانطور که در مطلب قبلی هم دیدیم، متدهای valueOf و toString در Object.prototype تعریف شده‌اند. بنابراین اگر خودمان این متدها را داخل یک آبجکت تعریف نکنیم، متدهای داخل Object.prototype برای تبدیل به primitive صدا می‌شوند (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

- گاهی ترتیب صدا شدن دو متد valueOf و toString برعکس چیزی است که در این مطلب دیدیم. دلیل این موضوع را در مطالب بعدی بررسی می‌کنیم. اما فعلا اهمیتی ندارد 😅

#quicktip #js

@ProGraphs

​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت سوم):

در مطلب قبلی نحوه‌ی تبدیل آبجکت‌ها به primitive را بررسی کردیم و دیدیم که هرگاه می‌خواهیم یک آبجکت را به یک نوع داده‌ی primitive مثل number و string تبدیل کنیم، باید ابتدا آبجکت به primitive تبدیل شود.

حالا می‌خواهیم بر پایه‌ی همین موضوع، نحوه‌ی تبدیل نوع داده‌های مختلف به Number را بررسی کنیم:
❗️تقریبا برای همه‌ی مقادیر primitive، حالت عددی از پیش تعیین شده است:
true -> 1
false -> 0
null -> 0
undefined -> NaN

❗️اگر مقدار داخل یک string غیر قابل تبدیل به عدد باشد، نتیجه NaN است:
"123" -> 123
"123AB" -> NaN

❗️برای تبدیل آبجکت‌ها (و subtypeهای آن مثل آرایه‌ها) ابتدا آبجکت به primitive تبدیل می‌شود.
سپس مقدار primitive با توجه به نکاتی که در بالا بررسی کردیم به عدد تبدیل می‌شود (کد داخل تصویر)

حالا در هر شرایط، و به هر روشی که یک مقدار را به عدد تبدیل کنیم، از این قوانین تبعیت می‌شود:
Number(false) -> 0
+false -> 0
false * 1 -> 0

#quicktip #js #coercion

@ProGraphs

تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت چهارم):

در مطالب قبلی تبدیل نوع داده‌های مختلف به Number و String را بررسی کردیم.

حالا می‌خواهیم ساده‌ترین تبدیل، یعنی تبدیل به Boolean را بررسی کنیم:
در spec اکمااسکریپت، لیست کوتاهی از مقادیر، تحت عنوان falsy values تعریف شده است. اگر هر کدام از مقادیری که در این لیست هستند را به Boolean تبدیل کنیم، نتیجه مقدار false خواهد بود.
این لیست شامل مقادیر زیر می‌شود:
- false
- NaN
- 0
- ""
- undefined
- null
طبیعتا هر مقداری که داخل این لیست نباشد، به مقدار true تبدیل می‌شود.
در نتیجه آبجکت‌ها و آرایه‌های خالی هم به true تبدیل می‌شوند:
Boolean({}) // true
!![] // true

#quicktip #js #coercion

@ProGraphs

سوال سختیه و ترکیبی از دو مفهوم پایه‌ای prototype و descriptor هست. اما بیش‌تر جواب‌ها درست بود 😁💪

مطالب مربوط به prototype و descriptorها رو میتونید اینجا مطالعه کنید:

-https://t.iss.one/ProGraphs/131
-https://t.iss.one/ProGraphs/277
-https://t.iss.one/ProGraphs/290

​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت پنجم):

در مطالب قبلی تبدیل انواع داده‌ها به string, number, boolean و همچنین تبدیل آبجکت به primitive را بررسی کردیم. و دیدیم که هر کدام از این تبدیل‌ها از قوانین مشخصی تبعیت می‌کنند.

اما چطور می‌توانیم این تبدیل‌ها را در عمل انجام دهیم؟
تبدیل بین نوع داده‌ها به دو صورت کلی اتفاق می‌افتد:

1- explicit coercion:
در این حالت به صورت مستقیم نوع داده را تغییر می‌دهیم و با دیدن کد، واضح است که می‌خواهیم نوع داده را تغییر دهیم:
Number("40"); // explicitly coerce to number

2- implicit coercion
به دلیل ذات داینامیک جاوااسکریپت، بعضی مواقع در نتیجه‌ی انجام یک عملیات خاص، به صورت خودکار coercion اتفاق می‌افتد.
مثلا در این کد برای انجام عملیات تفریق،‌ به صورت خودکار string به عدد تبدیل می‌شود:
"20" - 5; // 15

دقت کنید که در هر دو حالت، تبدیل‌ها از قوانینی که در مطالب قبلی بررسی کردیم تبعیت می‌کنند.
در مطالب بعدی، به صورت کامل قوانین implicit coercion و explicit coercion را بررسی می‌کنیم.

#quicktip #js #coercion

@ProGraphs

​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت ششم):

در مطالب قبلی نحوه‌ی تبدیل نوع داده‌های مختلف به یکدیگر را بررسی کردیم. حالا می‌خواهیم ببینیم چه زمانی این تبدیل‌ها انجام می‌شوند.
یکی از مهم‌ترین عملیات در جاوااسکریپت که باعث implicit coercion می‌شود، عملیات جمع است!

عملگر + در جاوااسکریپت، دو کار متفاوت انجام می‌دهد: جمع کردن اعداد و concat کردن stringها.

❗️اما عملگر + چطور تشخیص می‌دهد که باید عملیات جمع را انجام دهد یا concat؟
a + b
1- اگر هردو متغیر a و b از نوع string باشند، عملیات concat اتفاق می‌افتد:
"hello" + "world"; // "helloworld

2- اگر یکی از این دو متغیر از نوع string باشد، متغیر دیگر هم به string تبدیل می‌شود و دو string با هم concat می‌شوند:
1 + "20"; // "120"

3- اگر هر دو متغیر از نوع string نباشند (و آبجکت هم نباشند)، ابتدا هر دو متغیر به عدد تبدیل می‌شوند و سپس عملیات جمع اتفاق می‌افتد:
1 + true; // 2

4- اگر یک یا هردو مقدار از نوع آبجکت باشند، باید ابتدا به primitive تبدیل شوند. حالا با توجه به اینکه آبجکت‌ها به string تبدیل شده‌اند یا نه، طبق 3 قانون بالا تعیین می‌کنیم که جمع اتفاق می‌افتد یا concat.

این 4 قانون را می‌توانیم در این جمله خلاصه کنیم:
❗️اگر یکی از دو مقدار از نوع string باشد، یا حتی آبجکتی باشد که بتواند به string تبدیل شود، عملیات concat اتفاق می‌افتد. در غیر این صورت عملیات جمع اتفاق می‌افتد.

❗️اما بیاید یک بار دیگر این چهار قانون را مرور کنیم و این بار تبدیل‌هایی که به صورت خودکار بین نوع داده‌ها اتفاق می‌افتد را بررسی کنیم:
‌1- در قانون یک، coercion اتفاق نمی‌افتد!
2- در قانون دو، یکی از دو مقدار از نوع string هست. و مقدار دیگر هم به صورت خودکار به string تبدیل می‌شود.
3- در قانون سه، اگر هر کدام از دو مقدار از نوع عدد نباشند، به صورت خودکار به عدد تبدیل می‌شوند.
4- در قانون چهار آبجکت‌ها به صورت خودکار به primitive تبدیل می‌شوند.

(اگر می‌پرسید "چطور" این تبدیل‌ها اتفاق می‌افتد؟، 5 مطلب قبلی راجع به coercion رو مطالعه کنید 😁)

#quicktip #js #coercion

@ProGraphs

با استفاده از قابلیت workspaces در گوگل کروم می‌توانیم کاری کنیم که تغییراتی که در devtools انجام می‌دهیم،‌ در فایل‌های پروژه اعمال شوند.

#quicktip #devtools

@ProGraphs