در این کد برای event کلیک یک عنصر، دو listener تعریف کرده‌ایم.

با کلیک کردن بر روی این عنصر، چه مقادیری در کنسول چاپ می‌شوند؟
(به ترتیب از چپ به راست)

#interviewquestion #js #async

@ProGraphs

جواب: BACD

وقتی روی عنصر مورد نظر کلیک می‌کنیم، هر دو تابعی که تعریف کرده‌ایم وارد Task Queue می‌شوند تا بعدتر توسط Event Loop از این صف خارج شده و اجرا شوند.

1. ابتدا تسک بالایی (خط ‌2) اجرا می‌شود.
داخل همین تسک (در خط 3) با استفاده از پرامیس‌ها یک microtask ایجاد می‌کنیم که دقیقا بعد از این تسک و قبل از تسک‌های بعدی اجرا خواهد شد.

در ادامه در خط 5 عبارت 'B' در کنسول چاپ می‌شود و این تسک تمام می‌شود.
اما قبل از اینکه تسک بعدی پردازش شود، باید مایکروتسکی که در خط 3 تعریف کردیم اجرا شود. پس عبارت 'A' هم در کنسول چاپ می‌شود.


2. حالا تسک پایین (خط 9) اجرا می‌شود.
داخل این تسک هم در خط 10 یک microtask ایجاد می‌کنیم که دقیقا بعد از این تسک اجرا خواهد شد.
همچنین قبل از تمام شدن این تسک، با استفاده از setTimeout یک تسک به انتهای Task Queue اضافه می‌کنیم. (یعنی داخل خود این تسک هیچ عبارتی در کنسول چاپ نشد!)

حالا که تسک دوم به صورت کامل اجرا شد، باید قبل از هر چیز مایکروتسک خط 10 اجرا شود. پس عبارت 'C' هم در کنسول چاپ می‌شود.
و در نهایت تسکی که setTimeout ایجاد کرده بود هم از task queue خارج می‌شود و عبارت 'D' در کنسول چاپ می‌شود.

یه نکته‌ی جالب توی کد این سوال وجود داره:

می‌دونیم که وقتی روی دکمه کلیک می‌کنیم هر دو تابع به Task Queue اضافه می‌شوند و گفتیم که اول تسک بالایی اجرا میشه.

اما آیا همیشه تسک‌های async به ترتیب اجرا می‌شوند؟
نه! در واقع تو این کد چون هر دو تسک از یک نوع بودند (رویداد کلیک) این اتفاق افتاد. اما در غیر اینصورت نمی‌تونیم مطمئن باشیم که اول کدوم تسک اجرا میشه. چون مرورگر میتونه تسک‌های مختلف رو به task queue های مختلف اضافه کنه.

توی قسمت دوم سری مقاله‌های async در جاوااسکریپت، این موضوع رو خیلی دقیق‌تر بررسی کردیم (قسمت Task Source):
http://vrgl.ir/Y1qyY

🔺Visual sitemaps and estimates. 🐙

https://octopus.do/

#link #sitemap #visualsitemap

@ProGraphs

​همه‌ی ما strict-mode را به عنوان یک ویژگی برای محدود کردن بعضی رفتارهای نامتعارف جاوااسکریپت می‌شناسیم.
اما فواید strict-mode فقط به اینجا ختم نمی‌شود.
❗️در واقع محدودیت‌های بیشتری که تو این حالت اعمال می‌شود، به انجین جاوااسکریپت اجازه می‌دهد که بهینه‌سازی‌های بیشتری هم روی کد انجام دهد.

به عنوان مثال در یکی از مطالب قدیمی‌تر، با wrapper objectها آشنا شدیم.
❗️و دیدیم که به لطف wrapper objectها، داده‌های primitive هم می‌توانند مثل آبجکت‌ها متد داشته باشند.
یعنی در کد زیر، جاوااسکریپت به صورت خودکار string را تبدیل به یک wrapper object می‌کند تا متد trim را روی آن صدا کند:
"some string".trim()

❗️اما جالبه بدونید که تو حالت strict-mode، وقتی از یکی از متدهای اعداد یا stringها استفاده می‌کنیم، انجین جاوااسکریپت یک wrapper object اضافه نمی‌سازد و مستقیما از متدی که داخل prototype تعریف شده استفاده می‌کند!

برای اثبات این موضوع به کد داخل تصویر دقت کنید.
می‌بینید که متد دوم که در حالت strict-mode اجرا میشود، هیچ آبجکت اضافه‌ای برای box کردن string نمی‌سازد.

#quicktip #js #optimization

@ProGraphs

مقاله و ویدیوهای eddie راجع به نحوه کارکرد internal هوک‌های ری‌اکت رو حتما ببینید 👌

http://vrgl.ir/PsPUb

#article #react #hooks

@ProGraphs

​پراپرتی transform-style در CSS مشخص می‌کند که فرزندان یک عنصر در یک سطح صاف هستند، یا باید در یک فضای سه بعدی نمایش داده شوند.

به این ترتیب با استفاده از transform: rotate و transform-style می‌توانیم یک عنصر را دور یک عنصر دیگر قرار دهیم!

codepen.io/prographs/pen/Rwwgwmo

#quicktip #css #trick

@ProGraphs

🔺با سایت زیر Git branching رو راحت یاد بگیرید.✌🏻

https://learngitbranching.js.org/

#link #learning #git #branching

@ProGraphs

​به کد زیر دقت کنید:

let obj = {
  whatIsThis: () => {
    console.log("this is:", this);
  }
};

در این کد، متد whatIsThis داخل آبجکت obj تعریف شده است. اما با توجه به اینکه arrow functionها در جاوااسکریپت this ندارند، مقدار this داخل این تابع به آبجکت گلوبال اشاره می‌کند (و نه به خود آبجکت obj).

اما چرا وقتی از arrow functionها در کلاس‌های جاوااسکریپت استفاده می‌کنیم، مقدار this به خود آبجکت‌های کلاس اشاره می‌کند؟
به عنوان مثال به کد داخل تصویر (که یک کلاس کامپوننت ری‌اکت است) دقت کنید.
متد handleClick را به صورت arrow function تعریف کرده‌ایم، اما مقدار this به خود آبجکت react element اشاره می‌کند! (دقیقا برعکس رفتاری که در کد بالا دیدیم)

چرا رفتار arrow functionها در آبجکت‌ها و class field‌های جاوااسکریپت متفاوت است؟

#interviewquestion #js #react #thiskeyword

@ProGraphs

جواب:

قبل جواب دادن به این سوال، بیاید ببینیم فیلدهای کلاس، بعد از transpile شدن چه شکلی می‌شوند:
برای این کار یه کلاس ساده با دو تا فیلد counter و handleClick تعریف می‌کنیم. خروجی ساده شده‌ی babel با presetهای ES2017 و stage-3 رو تو کد زیر می‌بینید:

class Button {
    constructor() {
        this.counter = 0;

        this.handleClick = () => {
            console.log("this is: ", this);
        };
    }
}

همینطور که می‌بینید،‌ فیلد‌های کلاس به داخل constructor منتقل شدند. حتی فیلد handleClick که با arrow function تعریف کردیم.
از این کد واضحه که متدهای کامپوننت که با arrow functionها تعریف می‌کنیم، در واقع به داخل constructor منتقل میشن.

همچنین جالبه بدونید که arrow functionها this ندارند. یعنی مقدار this داخل یه arrow function مثل یه متغیر معمولی تعیین می‌شه. به این صورت که انجین جاوااسکریپت اول داخل خود تابع دنبال identifierی به اسم this می‌گرده و وقتی پیداش نکرد، مقدار this توی تابع بیرونی رو پیدا میکنه (در نتیجه مقدار this داخل arrow functionها برابر مقدار this بیرون از اون‌هاست).

پس مقدار this داخل این arrow functionها برابر مقدار this داخل constructor خواهد بود.

از طرفی شاید بپرسید زمانی که ما متد handleClick رو صدا می‌کنیم، اجرا شدن constructor تموم شده. پس چطور همچنان arrow function به مقدار this داخل constructor دسترسی داره؟
برای فهمیدن این موضوع باید با مفهوم closure آشنا باشیم. در واقع تا زمانی که به تابع handleClick یک reference داشته باشیم، انجین جاوااسکریپت scope تابع constructor رو از memory پاک نمیکنه!
بنابراین تابع handleClick به مقدار this داخل constructor دسترسی داره. حتی با اینکه زمانی که این تابع رو صدا می‌کنیم، اجرا شدن ‌constructor تموم شده!

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

http://vrgl.ir/91qbf

State of JS 2019 🎉

https://2019.stateofjs.com/

#statistics #js

​احتمالا دقت کرده‌اید که وقتی می‌خوایم یه پراپرتی CSS رو تو حالت hover یا ... تغییر بدیم، مجبوریم اون پراپرتی رو دوباره با مقادیر جدید تکرار کنیم.

اما حالا با متغیرهای CSS و تابع calc میتونیم بدون تکرار کردن دوباره‌ی پراپرتی‌ها، بین دو مقدار switch کنیم. به عنوان مثال:

transform: rotate(calc(var(--i) * 45deg));
top: calc(var(--i) * 10px);

توی این کد اگر متغیر i = 0 باشه، عنصرمون rotate و top نداره.
حالا برای اینکه عنصر رو 45deg بچرخونیم و top 10px بهش بدیم، فقط کافیه مقدار متغیر i رو 1 کنیم!

دقت کنید که تو این ترفند داریم از ویژگی live بودن متغیرهای CSS استفاده می‌کنیم. پس با متغیرهای SASS نمیتونیم این کار رو انجام بدیم.

برای مقایسه‌ی بهتر، توی ویدیو پراپرتی‌های transform و background رو با استفاده از این ترفند (بدون تکرار کردن کردن پراپرتی‌ها) تغییر میدیم.

#quicktip #css #trick #dry

@ProGraphs

​میدونیم که تغییر پراپرتی box-shadow با CSS جزو انیمیشن‌های نسبتا سنگین محسوب میشه و میتونه باعث کند شدن انیمیشن بشه.

اما با یه ترفند جالب میتونیم box-shadow یه عنصر رو خیلی روان‌تر animate کنیم.
به این صورت که یه pseudo element به اندازه‌ی خود عنصر تعریف میکنیم و box-shadow رو به این pseudo element میدیم. حالا کافیه opacity این pseudo element رو تغییر بدیم (به کد داخل عکس دقت کنید).

در واقع با این ترفند به جای پراپرتی box-shadow، پراپرتی opacity رو تغییر دادیم (animate کردن پراپرتی opacity برای مرورگر ساده‌تره)

کد کامل این ترفند رو میتونید اینجا ببینید.

ترفندهای مشابه برای تغییر بهینه‌تر طول و عرض عنصر هم وجود داره که در مطالب بعدی بررسی میکنیم :)

#quicktip #css #performance #trick

@ProGraphs

توی این ویدیو هم مشخصه که عنصر قرمز، مرورگر رو در طول انیمیشن مجبور به انجام عملیات paint میکنه اما انیمیشن عنصر سبز بهینه‌تر اجرا میشه.

هومن هاتفی مدیر طراحی اسنپ و اسنپ تریپ و مدرس طراحی محصول در مدرسه‌ی اینورس قراره امشب ساعت ۹ وایرفریم بزنه و استریم کنه! از دست ندین 👇🏻

www.twitch.tv/h8man13

⚠️ وی‌پی‌ان تون رو روشن کنین :)

🔺 بقیه‌ی رفقای طراح‌تون رو هم با خبر کنین و تک خور نباشین. 😂

کانال @ProGraphs رو هم دنبال کنین.

🔺LIVE🔺
همین الان با هومن هاتفی مدیر طراحی اسنپ و اسنپ تریپ و مدرس طراحی محصول در مدرسه‌ی اینورس با موضوع Random Cafe Bazzar app redesign همراه باشین 👇🏻

www.twitch.tv/h8man13

⚠️ یادتون نره وی‌پی‌ان تون رو روشن کنین :)

🔺 باز هم بقیه‌ی رفقای طراح‌تون رو هم با خبر کنین 😉

کانال @ProGraphs رو هم دنبال کنین.

این مقاله‌ی کامل و عالی eddie رو از دست ندید 👌

https://vrgl.ir/d7bFp

#article #react #concurrent

توی این کد سعی میکنیم درخواستی به سرور بفرستیم و اگر درخواست fail شد، بعد از 100ms دوباره این کار رو تکرار میکنیم.

اما بعد از اجرا شدن این پروسه به مدت طولانی، متوجه memory leak میشیم.
آیا میتونید این مشکل رو پیدا و حل کنید؟
(عکس ویرایش شد)

#question #js #promise #memoryleak

@ProGraphs