در این کد می‌دانیم که پراپرتی 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

یک کاربرد جالب spread operator برای اضافه کردن یک آیتم به آرایه/آبجکت به صورت شرطی.

#quicktip #js #trick

@ProGraphs

🔺ICONSVG - Quick customizable SVG icons for your project ✌🏻

https://iconsvg.xyz/

#link #icon #svg

@ProGraphs

​فرض کنید سه عنصر div داریم که داخل هر کدام یک span با کلاس‌های red و green و blue قرار دارد:

<div><span class="red">1</span></div>
<div><span class="green">2</span></div>
<div><span class="blue">3</span></div>

هر سه عنصر span دارای position: absolute هستند و عنصر قرمز با استفاده از z-index جلوی دو عنصر دیگر قرار گرفته است (مشابه تصویر).

بدون تغییر دادن موقعیت عناصر در html و بدون تغییر دادن position و z-index عناصر،‌ کاری کنید که عنصر قرمز پشت دو عنصر سبز و آبی قرار بگیرد.

#interviewquestion #css

@ProGraphs

🔺UX Starter Pack 🎒

چگونه اولین کار UX خود را بدست آورید. در سایت زیر بخوانید. 👇🏻

https://uxstarterpack.onfielder.com/

#link #ux #guideline

@ProGraphs

جواب:

❗️زمانی که دو عنصر html روی هم قرار می‌گیرند، مرورگر با توجه به مفهومی به نام Stack Level مشخص می‌کند که کدام عنصر باید جلوی عنصر دیگر نمایش داده شود.
- مثلا در حالت معمولی (normal flow) عنصری که در html، آخرتر آمده است، جلوی عنصر دیگر قرار می‌گیرد.
- یا برای عناصر دارای position می‌توانیم Stack Level را با استفاده از پراپرتی z-index تغییر دهیم تا یک عنصر جلوی یک عنصر دیگر قرار بگیرد.
و ...

اما این تمام ماجرا نیست!
برای درک کامل‌تر چیدمان عناصر در راستای‌ محور z باید با یک مفهوم دیگر به نام Stacking Context آشنا باشیم.

هر stacking context شامل یک عنصر والد است که stack level عناصر فرزند، نسبت به آن تعیین می‌شود. (بعضی از پراپرتی‌های css مثل opacity و transform یک stacking context جدید ایجاد می‌کنند)

❗️یعنی فرزندان یک stacking context به عنوان یک واحد عمل می‌کنند و همگی یا جلوی یک عنصر دیگر قرار می‌گیرند یا پشت آن. و یک عنصر خارج از این stacking context نمی‌تواند بین فرزندان آن قرار بگیرد.

حالا دوباره به سوال دقت کنید:
گفته شده که نمی‌توانیم موقعیت عناصر در html و مقادیر position و z-index را تغییر دهیم. در نتیجه باید بدون تغییر دادن stack level عناصر، موقعیت آن‌ها را تغییر دهیم.

پس یکی از پراپرتی‌هایی که stacking context درست می‌کنند را به والد عنصر قرمز اعمال می‌کنیم تا عنصر قرمز داخل یک stacking context جدا قرار بگیرد و نتواند جلوی دو عنصر سبز و آبی نمایش داده شود:

div:first-child {
    transform: translate(0);
}

این سوال رو از این مقاله برداشتیم:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

اینجا هم می‌تونید لیست کاملی از پراپرتی‌هایی که stacking context درست می‌کنند رو ببینید:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

🔺عکس‌های Trend و مناسب با صفحه 404 را از سایت زیر دانلود کنید. ⚠️

https://www.kapwing.com/404-illustrations

#link #illustration #error404

@ProGraphs