یکی از جذاب‌ترین سایت‌هایی که دیدم. 😃
می‌ری توش یه نامه برای خودت می‌نویسی، اون نامه یه سال بعد برات ایمیل می‌شه و می‌تونی ببینی چیا می‌خواستی و به چیا رسیدی.
واقعا هیجان‌انگیز و جذابه 😌✨

https://futureme.org

#link #letter #email #amazing

@ProGraphs

لیارا یک بستر ابری بسیار کارآمد برای پروژه‌های شما خواهد بود، دسترسی راحت به کنسول، مانیتورینگ، subdomain و https رایگان، همین الان امتحان کنید لینک: https://liara.ir

🔺یه ابزار جالب برای تهیه‌ی عکس از performance reportهای گوگل کروم 👌🏻

https://github.com/ilicmarko/devtools-timeline-images

#link #devtools #performance #performancereport

@ProGraphs

برنامه‌نویسی async در جاوااسکریپت (قسمت دوم) - Event Loop

تو این قسمت با یکی از مهم‌ترین مفاهیم مرتبط با async یعنی Event Loop آشنا می‌شیم.

- همکاری مرورگر/node و انجین جاوااسکریپت رو بررسی می‌کنیم.
- با مفاهیم و بخش‌های داخلی مرورگر مثل Task Queue و Microtask Queue آشنا می‌شیم و کاربرد هرکدوم رو می‌بینیم.
- با مفهوم task source آشنا می‌شیم و می‌بینیم که چرا نباید تسک‌های async همیشه به ترتیب اجرا نمی‌شوند!

اگر سوالی در رابطه با این مطلب دارید، یا ایرادی دیدید، یا پیشنهادی برای قسمت‌های بعدی دارید حتما توی قسمت نظرات بنویسید

https://vrgl.ir/Y1qyY

🔺کشیدن نقشه‌های ذهنی و ایده‌های خود را از امروز با Plectica آغاز کنید. ✨

https://www.plectica.com/

#link #conceptmapping #collaboration #metacognition #mentalmodels #systemsthinking #perspective #diagram #mindmapping

@ProGraphs

فرض کنید همچین تابعی را در جاوااسکریپت نوشته‌ایم که با استفاده از transitionهای css، یک عنصر را از یک موقعیت به یک موقعیت دیگر جابه‌جا کند.

اما با اجرا شدن این تابع متوجه می‌شویم که موقعیت اولیه‌ای که برای عنصر تعریف می‌کنیم (خط ۲) کاملا نادیده گرفته می‌شود و عنصر بدون توجه به موقعیت اولیه، فقط به سمت موقعیت نهایی جابه‌جا می‌شود!

علت این موضوع چیست؟ شما چطور این مشکل را حل می‌کنید؟

#interviewquestion #js #css

@ProGraphs

🔺در چند ثانیه به وب‌سایت‌تان dark-mode / night-mode اضافه کنید.

https://darkmodejs.learn.uno/

#link #library #widget #plugin

@ProGraphs

جواب:

در مطالب قبلی دیدیم که مرورگر برای نمایش صفحه، چهار مرحله‌ی style calculation و layout و paint و compositing را انجام می‌دهد.
و زمانی که با استفاده از جاوااسکریپت، ویژگی‌های ظاهری یک عنصر را تغییر می‌دهیم، مرورگر مجبور می‌شود تعدادی از این مراحل را دوباره انجام دهد.

پس ابتدا کد داخل این سوال به صورت کامل اجرا می‌شود و بعد مرورگر این مراحل را انجام می‌دهد.
یعنی زمانی که مروگر مراحل مربوط به render شدن صفحه را انجام می‌دهد، تابع moveVertically به صورت کامل اجرا شده است!
بنابراین مرورگر تنها مقدار آخری که برای transform تعیین کرده‌ایم در نظر می‌گیرد و مقدار اولیه نادیده گرفته می‌شود.

برای حل این مشکل می‌توانیم مرورگر را مجبور کنیم که بعد از اجرا شدن خط دوم، یک بار layout صفحه را محاسبه کند تا مقدار اولیه‌ای که برای transform تعیین می‌کنیم (خط ۲) نادیده گرفته نشود.
برای این کار، بعد از خط دوم، از یکی از متدهای جاوااسکریپت که مرورگر را مجبور به محاسبه‌ی layout می‌کند (مثل getBoundingClientRect) استفاده می‌کنیم. لیست کامل این پراپرتی‌ها و متدهای جاوااسکریپت را می‌توانید اینجا ببینید:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a

البته روشی که در مطلب بالا دیدیم، مرورگر را مجبور می‌کند که یک بار بیش‌تر از حالت معمول مرحله‌ی layout را انجام دهد و ممکن است باعث ایجاد شدن مشکلات performanceی مثل FSL شود.

یک روش بهتر برای حل این مشکل، استفاده از دو requestAnimationFrame تودرتو است (کد داخل تصویر)!

اما چرا دوتا؟‍!
مرورگر requestAnimationFrame را هم دقیقا قبل از مراحل layout, compositing و ... اجرا می‌کند. بنابراین باید از دو RAF تو در تو استفاده کنیم تا مرورگر بین خط ۲ که مقدار اولیه را تعیین می‌کنیم و خط ۷ که مقدار ثانویه را تعیین می‌کنیم، یک بار مراحل compositing و ... را انجام دهد

🔺Kyle Simpson - Keep Betting On JavaScript ✌🏻

https://youtu.be/ft5bYnt0W48

#link #js #javascript #kylesimpson

@ProGraphs

​احتمالا دقت کرده‌اید که وقتی مقادیر CSSی یک عنصر را در جاوااسکریپت می‌خوانیم، مقدار مورد نظر را به همراه واحد آن در یک string دریافت می‌کنیم:
100px

یعنی برای انجام محاسبات مجبوریم این string را parse کنیم و دوباره واحد مورد نظر را concat کنیم.

اما حالا با استفاده از api جدید CSS Typed OM می‌توانیم مقدار و واحد رو به صورت جداگانه در یک آبجکت دریافت کنیم و خیلی راحت‌تر استایل‌های عناصر را تغییر دهیم.

برای مقایسه‌ی بهتر، در این ویدیو هم با CSSOM و هم با CSS Typed OM عرض یک عنصر را دو برابر می‌کنیم.

#quicktip #css #houdini

@ProGraphs

🔺an online tool to learn, build, & test Regular Expressions 🚩

https://regexr.com/

#link #tool #learning #builder #testing #regularexpression

@ProGraphs

در این کد برای 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):
https://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 هوک‌های ری‌اکت رو حتما ببینید 👌

https://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