بزن رو لینک زیر، بِشین و بازی کن 😅
ته بازی خیالت راحته که فلکس باکس رو
یه بار برای همیشه یاد گرفتی 👌🏻

https://flexboxfroggy.com/#fa

#link #css #flexbox

@ProGraphs

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

#interviewquestion #js

@ProGraphs

Freepik: Graphic resources for everyone

- یه سایت جامع برای منابع گرافیکی
- شامل عکس‌، آیکون، PSD ،Vector های رایگان و ...

https://freepik.com

#link #vector #psd #icon #photo

@ProGraphs

جواب:
مقدار متغیر y برابر 1 و متغیر x تعریف نشده است و استفاده (RHS) از آن باعث خطا می شود.

مرحله 1) در نگاه اول بیرونی ترین عبارت را می بینیم که یک destructuring آرایه ای است. آرایه سمت چپ یک عضو دارد ولی آرایه سمت راست عضوی ندارد و معادلی برای عضو آرایه سمت چپ در آن وجود ندارد. در نتیجه از مقدار پیشفرض استفاده می شود.

مرحله 2) مقدار پیشفرض تعیین شده هم یک آبجکت هست ({ x: 1 }) در نتیجه یک destructuring دیگر شکل می گیرد اما این بار از نوع آبجکتی. به طور خلاصه الان عبارت ما به این شکل در می آید:
{ x: y = 2 } = { x: 1 }

مرحله 3) حالا حاصل این destructuring ساده را پیدا می کنیم: دنبال پراپرتی x در آبجکت سمت چپ می گردیم که مقدار آن یک هست. نام متغیر را هم به y تغییر می دهیم.

در آخر یک متغیر به نام y خواهیم داشت که مقدار آن عدد 1 هست. اما متغیری به نام x وجود نخواهد داشت.

اگر این مراحل را متوجه نشدید به نکاتی که در طول هفته راجع به destructuring در کانال قرار دادیم مراجعه کنید.

🔺نقشه‌ راه برای Web developer شدن در سال 2018 👇🏻

https://github.com/kamranahmedse/developer-roadmap

#link #web #roadmap

@ProGraphs

​​چند کاربرد از Destructuring
1)‌ جا به جا کردن مقدار دو متغیر

2)‌ کپی کردن آرایه ها

3) قسمت قسمت کردن آرایه

4) بازگشت چند مقدار همزمان از تابع

5) در اکثر زبان ها مثل پایتون میتوانید پارامترهای یک تابع را بر اساس نام آنها به تابع ارسال کنید (به جای ترتیب پارامترها). جاوااسکریپت به صورت پیشفرض از این قابلیت پشتیبانی نمیکند. اما با استفاده از destructuring میتوان این قابلیت را شبیه سازی کرد

6)‌ استفاده از destructuring در حلقه for...of

#quicktip #js #destructuring

@ProGraphs

یه سایت که کلی SVG Background باحال با قابلیت Customize داره 😍

https://www.svgbackgrounds.com/

#link #svg #background

@ProGraphs

تفاوت این سه روش برای load کردن اسکریپت خارجی چیست‌ ؟

#interviewquestion #html

@ProGraphs

اینم یه بازی برای یاد گرفتن گرید توی CSS 😅

https://cssgridgarden.com/#fa

#link #css #grid

@ProGraphs

جواب:
<script></script>:
زمانی که مرورگر به تگ اسکریپت معمولی می‌رسد پروسه parse شدن داکیومنت را متوقف می‌کند تا هم فایل اسکریپت دانلود شود و هم execute شود. سپس پروسه parsing را ادامه می‌دهد. (البته مرورگرهای مدرن برای سرعت بیشتر و برای بعضی از فایل ها کمی متفاوت عمل می‌کنند. عبارت speculative parsing را جستجو کنید)


<script async></script>:
در این روش مرورگر زمانی که به تگ اسکریپت می‌رسد به parse کردن داکیومنت ادامه می‌دهد و به صورت هم‌زمان اسکریپت را دانلود می‌کند. ولی وقتی که فایل دانلود شد پروسه parsing را متوقف می‌کند تا اسکریپت execute شود. دقت کنید که در این روش ممکن است اسکریپت‌ها به ترتیبی که در داکیومنت آمده اند اجرا نشوند (دلیلش هم واضح است 😁). در نتیجه استفاده از این روش برای اسکریپتی مانند jQuery مناسب نیست چرا که ممکن است اسکریپت‌های بعدی از آن استفاده کنند و اگر ترتیب اجرای اسکریپت‌ها رعایت نشود اسکریپت‌ها با مشکل مواجه می شوند.


<script defer></script>:
در این روش مانند async فایل اسکریپت هم‌زمان با parse شدن داکیومنت دانلود می شود ولی تا زمان parse شدن کامل داکیومنت صبر می‌کند بعد اجرا می‌شود. در این روش برعکس async ترتیب اسکریپت‌ها حفظ می شود.

اگر حوصله ندارید متن رو بخونید، عکس‌ها رو ببینید.
البته برای اینکه عکس رو متوجه بشید باید متن رو بخونید. 😄

​​معرفی CSS Specificity:
فرض کنید در ساختار HTML زیر با CSS عنصر داخلی را انتخاب کنیم:

<div id="parent">
    <div class="child"></div>
</div>

معمولا بیشتر از یک راه برای انتخاب عنصر وجود دارد. برای مثال همه‌ی این انتخابگر‌ها عنصر مورد نظر را برای ما انتخاب می‌کنند:
#parent .child
.child
div.child
...
در عمل بار‌ها پیش می‌آید که چندین دستور با انتخابگر‌های متفاوت، استایل‌های متفاوتی را بر روی یک عنصر اعمال می‌کنند. در این شرایط کدام یک از استایل‌ها برای عنصر اعمال می‌شود ؟ برای حل این مشکل مفهوم CSS Specificity استفاده می‌شود.
به اینصورت که به هر انتخابگر بر اساس نوع آن امتیازی تعلق می‌گیرد و انتخابگر با بیشترین امتیاز اعمال می‌شود.
دسته بندی انتخابگر‌ها و امتیاز آن‌ها به این شکل است:
1) inline style ==> 1, 0, 0, 0
2) ID ==> 0, 1, 0, 0
3) Class - attributes selector - pseudo-classe ==> 0, 0, 1, 0
4) Type selector - pseudo-element ==> 0, 0, 0, 1

--) اما چرا امتیاز‌ها را به جای 1و 10 و 100 و 1000 به این شکل نمایش می‌دهیم ؟
در واقع این امتیاز ها در سیستم دهدهی محاسبه نمی‌شوند. به عنوان مثال انتخابگر‌های class و id را در نظر بگیرید. اگر انتخابگر class را با 10 و انتخابگر id را با 100 نشان می‌دادیم به این معنی بود که 10 انتخابگر کلاس برابر با یک انتخابگر ‌id است. اما این‌طور نیست و اهمیت id selector بیشتر از class selector است.
در واقع اگر تعداد id selector ها برابر بود، بعد به سراغ شمارش class selector ها می‌رویم.
#test > .a.b.c.d.e.f.g.h.i.j.k

این موضوع را در طول هفته بیشتر بررسی خواهیم کرد.

#quicktip #css

@ProGraphs

یه سایت خوب دیگه برای دانلود آیکون های متنوع 👌🏻

https://icons8.com

#link #icon

@ProGraphs

اولین عنصر داخل لیست چه رنگی خواهد بود ؟

#interviewquestion #css

@ProGraphs

سایتی پر از تصاویر SVG زیبا که می‌توانید کاملاً رایگان آن‌ها را دانلود کنید.

https://undraw.co/illustrations

#link #svg #illustration

@ProGraphs

جواب: indigo
این سوال خیلی ساده با نکاتی که درباره Specificity مطرح کردیم قابل حل هست. تنها نکته ای که باید دقت کنید این است که اگر یک attribute selector به ویژگی Id اشاره کند ماهیت آن به Id Selector تبدیل نمی‌شود و هم‌چنان امتیاز یک attribute selector را دارد. (که البته منطقی هم هست).
امتیاز انتخابگر اول:‌ 0,0,2,0
امتیاز انتخابگر دوم: 0,0,3,0
بنابراین ruleset دوم اعمال می‌شود و رنگ اولین آیتم لیست ‌indigo خواهد بود

🔺نقشه‌ راه برای توسعه‌دهنده حرفه‌ای React شدن در سال 2018 👇🏻

https://github.com/adam-golab/react-developer-roadmap

#link #react #roadmap

@ProGraphs

​​نکات تکمیلی CSS Specificity

1) انتخابگر universal تأثيری بر Specificity ندارد. (قسمت ۱ تصویر)

2) شبه کلاس not جزو pseudo class ها محسوب می‌شود با این حال تأثيری بر Specificity نمی‌گذارد. اما انتخابگر‌هایی که داخل not می‌آیند Specificity را تغییر می‌دهند. (قسمت ۲ تصویر)

3)‌ اگر در یک دستور CSS از important استفاده کنیم، بدون توجه به قوانین Specificity آن دستور اعمال می‌شود. هرچند این کار در اکثر مواقع bad practice و دور زدن Specificity محسوب می‌شود. (قسمت ۳ تصویر)

#quicktip #css

@ProGraphs

​​یه دوره آموزشی کوتاه Figma مناسب برای مبتدیان

https://www.figmaforbeginners.com/

#link #tool #design #ui #figma

@ProGraphs