🔺طرح و تصویرسازی‌های زیبا برای استفاده به صورت رایگان از سایت 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

🔺Zen Flowchart

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

https://www.zenflowchart.com/

#link #tool #flowchart

@ProGraphs

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

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

https://vrgl.ir/Nb9IC

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

حتما بخونید 👌

https://vrgl.ir/ia0eW

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

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

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

#quicktip #css #trick

@ProGraphs

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

https://futureme.org

#link #letter #email #amazing

@ProGraphs