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

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

با استفاده از 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