​همه‌ی ما 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

​Translate CSS selectors into plain English!

https://hugogiraudel.github.io/selectors-explained/

#tool #css

@ProGraphs

جواب:

میدونیم که برای انجام یک تسک async داخل promise chain میتونیم از یکی از تابع‌های then، یک پرامیس return کنیم:

fetch(url)
.then(data => new Promise(resolve => setTimeout(resolve, 1000)))
.then(() => {})

دوباره به خط سوم کد سوال دقت کنید،
بعد از هربار fail شدن درخواست، توی then، دوباره fetchWithRetry رو صدا میکنیم که یه پرامیس برمیگردونه.
در واقع با این کار پشت سر هم پرامیس‌های جدید به انتهای این promise chain اضافه میکنیم و نتیجه میشه یه promise chain بینهایت که تا زمانی که درخواست با موفقیت فرستاده نشه، garbage collected نمیشه!

برای حل این مشکل کافیه توی خط 3 نتیجه‌ی تابع getWithRetry رو از then ریترن نکنیم.
توضیح کامل‌تر این مشکل رو میتونید اینجا بخونید.

پادکست طبقه ۱۶ – پادکستی به میزبانی سهیل علوی، بنیانگذار استارت‌آپ ریحون در تورنتو

اپیزود ۱ - گفتگو با محسن ملایری:
https://youtu.be/DiXfC6R22vE
اپیزود ۲ - بورس ایران | کیاوش کاویانی:
https://youtu.be/WNVmGwS6N8I
اپیزود ۳ - تجربه جذب سرمایه برای استارتاپ | سیاوش محمودیان:
https://youtu.be/kf87HRTP2Lk
اپیزود ۴ - عملگرایی | بهروز حریری:
https://youtu.be/txnw-qFYfsQ

پ.ن: انقدر پادکست جذاب و متفاوتی بود که دلم نیومد باهاتون به اشتراک نذارم. شما هم با دوستاتون به اشتراک بگذارین :)

سایت‌هایی که زمان‌های خالی افراد رو می‌گیرن و تایم برای جلسه پیشنهاد می‌دن:

https://www.when2meet.com/
https://doodle.com/en/
https://calendly.com/

@ProGraphs