🔺Zen Flowchart

🔸ساده‌ترین ابزار برای ساخت فلوچارت‌ها

https://www.zenflowchart.com/

#link #tool #flowchart

@ProGraphs

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

در این مقاله با مفاهیم اولیه‌ی مرتبط با async programming آشنا می‌شیم.
روش‌های مختلف مدیریت concurrency رو بررسی می‌کنیم.
و می‌بینیم کارکرد جاوااسکریپت به کدوم یکی از این روش‌ها نزدیک‌تر است.

http://vrgl.ir/Nb9IC

یکی از دوستان این مقاله‌ی کامل و عالی رو راجع به optional chaining در جاوااسکریپت نوشتند.

حتما بخونید 👌

http://vrgl.ir/ia0eW

فرض کنید بر روی یک عنصر هم translate، هم scale و هم rotate اعمال کرده‌ایم.

حالا می‌خواهیم در حالت hover، فقط مقدار rotate را تغییر دهیم.
متاسفانه برای این کار مجبوریم تمام مقادیر قبلی را هم تکرار کنیم!

با استفاده از متغیرهای CSS می‌توانیم این مشکل را حل کنیم (ویدیو را ببینید).

#quicktip #css #trick

@ProGraphs

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

http://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 همیشه به ترتیب اجرا نمی‌شوند!

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

http://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):
http://vrgl.ir/Y1qyY

🔺Visual sitemaps and estimates. 🐙

https://octopus.do/

#link #sitemap #visualsitemap

@ProGraphs