🔺از سایت Color Designer در ساخت پالت‌های رنگی برای محصول کمک بگیرید.

https://colordesigner.io/

#link #color #palette #generator

@ProGraphs

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

#interviewquestion #js

@ProGraphs

یه ابزار مناسب دولوپرهایی که به حجم بالای پروژه‌های جاوااسکریپتی حساسند 😄

https://bundlephobia.com/

#tool #performance

@ProGraphs

جواب: 'false-false'

زمانی که دو طرف تساوی از یک نوع داده هستند، عملگرهای == و === دقیقا یکسان عمل می‌کنند.
بنابراین با توجه به اینکه هر دو مقدار از نوع آبجکت هستند. جواب نمی‌تواند true-false یا false-true باشد!

از طرفی وقتی دو آبجکت را مقایسه می‌کنیم، صرفا reference آن‌ها مقایسه می‌شود. و نه تک تک پراپرتی‌های آن‌ها.

به کد سوال دقت کنید:
دو آبجکت متفاوت داریم (referenceهای متفاوت دارند) که پراپرتی‌های آن‌ها دقیقا یکسان است.
اما گفتیم که پراپرتی‌های دو آبجکت اصلا مقایسه نمی‌شوند و برای برابر بودن دو آبجکت باید reference آن‌ها یکسان باشد.

بنابراین دو بار عبارت 'false' در کنسول چاپ می‌شود.

🔺نتایج نظرسنجی برنامه‌نویسان در سایت StackOverflow (سال 2019)

https://kutt.it/dHsOax

#link #survey

@ProGraphs

Real-time visualizer for React lifecycle methods

https://github.com/Oblosys/react-lifecycle-visualizer

#tool #react #visualizer

@ProGraphs

​​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت هشتم):

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

❗️این موضوع در بعضی موارد نتایج کاملا گیج کننده‌ای را رقم می‌زند.
برای مثال:
20 == true; // false

در این کد یک مقدار از نوع boolean است و مقدار دیگر از نوع عدد. طبیعتاً انتظار داریم عدد 20، به مقدار true تبدیل شود و نتیجه‌ی مقایسه true شود.

اما با مراجعه به spec اکمااسکریپت، متوجه می‌شویم که اگر یک مقدار دیگر را با true یا false مقایسه کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود!
پس در این کد ابتدا مقدار true به عدد 1 تبدیل می‌شود و سپس عدد 1 و 20 مقایسه می‌شوند و نتیجه‌ی مقایسه false می‌شود.

❗️اما گاهی این کارکرد عملگر "=="، منطقی و مفید است.
برای مثال:
null == undefined; // true
همانطور که در این کد می‌بینید، وقتی با استفاده از عملگر "==" مقایسه را انجام می‌دهیم، دو مقدار null و undefined می‌توانند به یکدیگر تبدیل شوند.
به این ترتیب لازم نیست برابر بودن یک مقدار را هم با null و هم با undefined چک کنیم (به کد داخل تصویر دقت کنید)

#quicktip #js #coercion

@ProGraphs

در این کد می‌دانیم که پراپرتی width در یک transition تغییر خواهد کرد.
بنابراین از will-change استفاده کرده‌ایم تا مرورگر را از این موضوع با خبر کنیم.

آیا این کار تاثیری در عملکرد transition دارد؟

#interviewquestion #css #performance

@ProGraphs

🔺هر روز خفن‌تر از قبل، خودتون برید و ببینید. 😏

https://undraw.co/illustrations

#link #illustration

@ProGraphs

جواب:

یادآوری: در یکی از مطالب قبلی دیدیم که مرورگر برای نمایش صفحه، چهار مرحله‌ی style calculation و layout و paint و compositing را انجام می‌دهد.

همچنین دیدیم که تغییر پراپرتی‌هایی مثل left, top, width, ... مرورگر را مجبور به تکرار مراحل layout و paint و compositing می‌کند.
در حالی که تغییر پراپرتی transform مرورگر را تنها مجبور به تکرار مرحله‌ی compositing می‌کند.

فرض کنید در یک انیمیشن، پراپرتی transform یک عنصر را تغییر می‌دهیم. با توجه به اینکه این انیمیشن باعث repaint شدن عنصر نمی‌شود، مرورگر می‌تواند این عنصر را در یک لایه‌ی جداگانه نمایش دهد و صرفا لایه‌ی مورد نظر را جابه جا کند (در مطالب بعدی بیشتر راجع به لایه‌ها و تاثیر آن‌ها در performance صحبت می‌کنیم).

همچنین ما به عنوان دولوپر می‌توانیم با استفاده از will-change به مرورگر اطلاع دهیم که پراپرتی transform قرار است تغییر کند. به این ترتیب مرورگر می‌تواند عنصر مورد نظر را از قبل در یک لایه‌ی جداگانه نمایش دهد و مجبور نباشد دقیقا قبل از انیمیشن این کار را انجام دهد:
will-change: transform;

❗️حالا دوباره به کد سوال دقت کنید:
گفتیم که تغییر پراپرتی width مرورگر را مجبور به repaint کردن عنصر می‌کند. بنابراین مرورگر این عنصر را در یک لایه‌ی جداگانه نمایش نمی‌دهد. و "احتمالا" استفاده از پراپرتی will-change تاثیری در performance نخواهد داشت و بی معنی است.

به کلمه‌ی "احتمالا" در جمله‌ی آخر دقت کنید!
در CSS Specification دقیقا مشخص نشده که استفاده کردن از کدوم مقادیر برای will-change بی‌تاثیر هست. و بعید نیست تو نسخه‌های بعدی مرورگرها چیزی که تو این مطلب دیدیم درست نباشه.

اما نکته سوال اینجاست که باید دقیقا بدونیم برای چی از will-change استفاده می‌کنیم. و بدون علت از تکنیک‌های بهبود performance مثل will-change استفاده نکنیم.

🔺با سایت زیر آواتارهای جذاب و بامزه درست کنین. 👩🏼‍🦱

https://friendlyfaces.co/

#link #avatar

@ProGraphs

در قسمت‌های مختلف chrome devtools می‌توانیم یک مقدار را در یک متغیر گلوبال ذخیره کنیم تا به راحتی در کنسول به آن دسترسی داشته باشیم.

در ویدیو، کاربرد این ویژگی برای دسترسی به اطلاعات یک انیمیشن، dom element و response object را می‌بینید.

#quicktip #devtools

@ProGraphs

🔺نقشه‌های راه برای برنامه‌نویسان 📙

https://roadmap.sh/

#link #roadmap #frontend #backend #devops

@ProGraphs

احتمالا دقت کرده‌اید که در CSS با استفاده از پراپرتی display می‌توانیم هم نحوه‌ی قرار گرفتن خود عنصر و هم نحوه‌ی چیده شدن فرزندان عنصر در صفحه را تعیین کنیم.
به عنوان مثال:
- با استفاده از display: flex خود عنصر Block می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با استفاده از display: inline-flex خود عنصر به صورت inline نمایش داده می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با display: block خود عنصر به صورت Block در می‌آید و فرزندان آن از قوانین normal flow تبعیت می‌کنند و ...

همچنین می‌دانیم که display: none هم خود عنصر و هم فرزندان آن را از صفحه حذف می‌کند.
اما حالا با ویژگی جدید display: contents می‌توانیم کاری کنیم که خود عنصر از صفحه حذف شود،‌ ولی فرزندان آن در صفحه باقی بمانند!

در این مقاله می‌توانید کاربرد عملی این ویژگی را ببینید:
https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/

#quicktip #css

🔺طرح و تصویرسازی‌های زیبا برای استفاده به صورت رایگان از سایت mixkit 🥳

https://mixkit.co/art/

#link #art #illustration

@ProGraphs

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

#interviewquestion #js

@ProGraphs

🔺Easy Copy-Paste Beautiful CSS 🧩

https://www.csswand.dev/

#link #css #snippet

@ProGraphs

جواب:‌ false

همه‌ی ما با عملکرد ternary operator آشنا هستیم و با آن کار کرده‌ایم.
اما در این کد از ternary operator، دو بار به صورت تو در تو استفاده شده و سوالی که پیش می‌آید این است که اول شرط سمت راست محاسبه می‌شود یا سمت چپ؟

در یکی از مطالب قبلی مفهوم Associativity را بررسی کردیم و دیدیم که یک عبارت که از چند عملگر با اولویت یکسان تشکیل شده است، همیشه از چپ به راست parse نمی‌شود و مقدار Associativity عملگرها مشخص می‌کند که عبارت باید از چپ به راست یا برعکس parse شود.

عملگر ternary، یکی از عملگرهای right-associative است. بنابراین اول شرط سمت راست محاسبه می‌شود و مقدار false در کنسول چاپ می‌شود:
true ? false : (true ? true : true)

🔺CSSeffectsSnippets. ☁️

https://kutt.it/cgsjlB

#link #css #snippet

@ProGraphs