با استفاده از media query inspector در گوگل کروم، می‌توانیم تمام media queryهای تعریف شده داخل یک صفحه را ببینیم و اعمال کنیم!

#quicktip #devtools

@ProGraphs

🔺CSS Grid Generator ✨

https://cssgrid-generator.netlify.com/

#link #css #grid #generator

@ProGraphs

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

اما احتمالا برخلاف روال همیشگی، این مطالب رو در قالب یک سری مقاله منتشر می‌کنیم که هم بیشتر با هم در تعامل باشیم، هم بتونیم عمیق‌تر مفاهیم رو بررسی کنیم.

بقیه مطالب و سوالات مصاحبه رو هم همچنان مثل قبل فقط داخل کانال ادامه می‌دیم!

🔺بالاخره ورژن ۳ ترمینال Hyper هم اومد. 🖥

Hyper is a terminal powered by web technologies, that is fully-extensible with JavaScript and customizable with CSS.
Featuring:
- Blazing fast rendering performance
- Emoji support
- Faster startup time
- WebGL-based rendering
- Upgraded Electron

https://hyper.is/

#link #terminal #crossplatformterminal

@ProGraphs

🔺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