یک کاربرد جالب 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

لیارا یک بستر ابری بسیار کارآمد برای پروژه‌های شما خواهد بود، دسترسی راحت به کنسول، مانیتورینگ، 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 همیشه به ترتیب اجرا نمی‌شوند!

اگر سوالی در رابطه با این مطلب دارید، یا ایرادی دیدید، یا پیشنهادی برای قسمت‌های بعدی دارید حتما توی قسمت نظرات بنویسید

https://vrgl.ir/Y1qyY

🔺کشیدن نقشه‌های ذهنی و ایده‌های خود را از امروز با Plectica آغاز کنید. ✨

https://www.plectica.com/

#link #conceptmapping #collaboration #metacognition #mentalmodels #systemsthinking #perspective #diagram #mindmapping

@ProGraphs

فرض کنید همچین تابعی را در جاوااسکریپت نوشته‌ایم که با استفاده از transitionهای css، یک عنصر را از یک موقعیت به یک موقعیت دیگر جابه‌جا کند.

اما با اجرا شدن این تابع متوجه می‌شویم که موقعیت اولیه‌ای که برای عنصر تعریف می‌کنیم (خط ۲) کاملا نادیده گرفته می‌شود و عنصر بدون توجه به موقعیت اولیه، فقط به سمت موقعیت نهایی جابه‌جا می‌شود!

علت این موضوع چیست؟ شما چطور این مشکل را حل می‌کنید؟

#interviewquestion #js #css

@ProGraphs