اگه با فلکس باکس آشنا نیستید با این مقاله میتونید سریع با مقدمات فلکس باکس آشنا بشید
https://medium.com/@jillplatts/6-minute-beginners-guide-to-css-flexbox-527b3ff3480b
#link #css #flexbox
@ProGraphs
https://medium.com/@jillplatts/6-minute-beginners-guide-to-css-flexbox-527b3ff3480b
#link #css #flexbox
@ProGraphs
Medium
5 Minute Beginner’s Guide to CSS Flexbox
Introduced in CSS3, flexbox is a method for defining how components of a page behave across different devices and screen sizes. Named for…
نکات تکمیلی Destructuring قسمت ۲
1) میتوان array destructuring را برروی همه ی مقادیر iterable مانند رشته ها اعمال کرد. (قسمت ۱ کد در تصویر)
2) مقادیر پیشفرض میتوانند از متغیرهای دیگر destructuring استفاده کنند. البته دقت کنید که ترتیب اهمیت دارد و متغیری که اول آمده نمیتواند از مقدار متغیردوم استفاده کند. (قسمت ۲ کد در تصویر)
3) اگر مقدار پیشفرض یک آرایه یا آبجکت باشد. دوباره قوانین destructuring بر روی آن اعمال میشود. به طور مثال در قسمت ۳ کد در تصویر میبینید که آرایه سمت راست عضوی ندارد پس از مقدار پیشفرض استفاده میشود. اما مقدار پیشفرض هم یک آبجکت هست ({a: 1}) بنابراین یک destructuring جدید ایجاد میشود
4) نام پراپرتی میتواند در زمان اجرا محاسبه شود و static نباشد. (قسمت ۴ کد در تصویر)
#quicktip #js #destructuring
@ProGraphs
1) میتوان array destructuring را برروی همه ی مقادیر iterable مانند رشته ها اعمال کرد. (قسمت ۱ کد در تصویر)
2) مقادیر پیشفرض میتوانند از متغیرهای دیگر destructuring استفاده کنند. البته دقت کنید که ترتیب اهمیت دارد و متغیری که اول آمده نمیتواند از مقدار متغیردوم استفاده کند. (قسمت ۲ کد در تصویر)
3) اگر مقدار پیشفرض یک آرایه یا آبجکت باشد. دوباره قوانین destructuring بر روی آن اعمال میشود. به طور مثال در قسمت ۳ کد در تصویر میبینید که آرایه سمت راست عضوی ندارد پس از مقدار پیشفرض استفاده میشود. اما مقدار پیشفرض هم یک آبجکت هست ({a: 1}) بنابراین یک destructuring جدید ایجاد میشود
4) نام پراپرتی میتواند در زمان اجرا محاسبه شود و static نباشد. (قسمت ۴ کد در تصویر)
#quicktip #js #destructuring
@ProGraphs
ProGraphs
آیا درمورد quirks mode و standard mode در مرورگرها شنیده اید ؟ تفاوت این دو حالت چیست ؟ مرورگرها چطور تشخیص می دهند که صفحه وب را در کدام حالت نمایش دهند ؟ #interviewquestion #html #browser @ProGraphs
جواب:
این سوال بیشتر از اینکه فنی باشه اطلاعات عمومی هست برای کسانی که با وب سروکار دارند.
قضیه از این قرار هست که در دوران مزوزوئیک که هنوز وب و ابزارهای توسعه آن استانداردسازی نشده بودند دولوپرها صفحات وب را بدون استاندارد خاصی و برای دو مرورگر قدیمی Netscape و Internet Explorer توسعه می دادند. این وضعیت ادامه داشت تا زمانی که W3C شروع به استانداردسازی وب کرد.
اما هنوز یک مشکل وجود داشت. اگر مرورگرها بلافاصله شروع به اعمال استانداردها می کردند دیگر صفحات غیر استاندارد قدیمی از کار می افتادند.
برای حل این مشکل مرورگرهای مدرن در دو حالت quirks mode و standard mode کار می کنند. حالت quirks برای صفحات غیر استاندارد و قدیمی و حالت standard همانطور که از اسم آن پیداست برای صفحات استاندارد و مدرن.
اما قسمت دوم سوال: مرورگرها چطور تشخیص می دهند که صفحه را در کدام حالت نمایش دهند ؟
خیلی ساده ! با توجه به Doctype بالای سند html
اگه بالای صفحه خط Doctype وجود داشت حالت standard و بالعکس.
پس دقت کنید که همیشه Doctype را در سند تعریف کنید.
منظور از doctype این عبارت هست:
تا اینجا متوجه شدیم مرورگرها چطور حالت صفحه را تشخیص می دهند. ولی شاید بپرسید پس ما به عنوان توسعه دهنده صفحه چطور این موضوع را تشخیص دهیم ؟
برای تشخیص این موضوع کافی است از این عبارت جاوااسکریپتی که تقریبا در تمام مرورگرهای مدرن کار می کند استفاده کنید: document.compatMode
اگر مقدار این پراپرتی رشته "CSS1Compat" باشد یعنی در حالت standard هستیم. اگر نه در حالت quirks
با اینکه این نکته آخر نکته جالبی هست ولی عملا خیلی به کارتون نمیاد 😄
این سوال بیشتر از اینکه فنی باشه اطلاعات عمومی هست برای کسانی که با وب سروکار دارند.
قضیه از این قرار هست که در دوران مزوزوئیک که هنوز وب و ابزارهای توسعه آن استانداردسازی نشده بودند دولوپرها صفحات وب را بدون استاندارد خاصی و برای دو مرورگر قدیمی Netscape و Internet Explorer توسعه می دادند. این وضعیت ادامه داشت تا زمانی که W3C شروع به استانداردسازی وب کرد.
اما هنوز یک مشکل وجود داشت. اگر مرورگرها بلافاصله شروع به اعمال استانداردها می کردند دیگر صفحات غیر استاندارد قدیمی از کار می افتادند.
برای حل این مشکل مرورگرهای مدرن در دو حالت quirks mode و standard mode کار می کنند. حالت quirks برای صفحات غیر استاندارد و قدیمی و حالت standard همانطور که از اسم آن پیداست برای صفحات استاندارد و مدرن.
اما قسمت دوم سوال: مرورگرها چطور تشخیص می دهند که صفحه را در کدام حالت نمایش دهند ؟
خیلی ساده ! با توجه به Doctype بالای سند html
اگه بالای صفحه خط Doctype وجود داشت حالت standard و بالعکس.
پس دقت کنید که همیشه Doctype را در سند تعریف کنید.
منظور از doctype این عبارت هست:
<!DOCTYPE html><html lang="en">تا اینجا متوجه شدیم مرورگرها چطور حالت صفحه را تشخیص می دهند. ولی شاید بپرسید پس ما به عنوان توسعه دهنده صفحه چطور این موضوع را تشخیص دهیم ؟
برای تشخیص این موضوع کافی است از این عبارت جاوااسکریپتی که تقریبا در تمام مرورگرهای مدرن کار می کند استفاده کنید: document.compatMode
اگر مقدار این پراپرتی رشته "CSS1Compat" باشد یعنی در حالت standard هستیم. اگر نه در حالت quirks
با اینکه این نکته آخر نکته جالبی هست ولی عملا خیلی به کارتون نمیاد 😄
بزن رو لینک زیر، بِشین و بازی کن 😅
ته بازی خیالت راحته که فلکس باکس رو
یه بار برای همیشه یاد گرفتی 👌🏻
https://flexboxfroggy.com/#fa
#link #css #flexbox
@ProGraphs
ته بازی خیالت راحته که فلکس باکس رو
یه بار برای همیشه یاد گرفتی 👌🏻
https://flexboxfroggy.com/#fa
#link #css #flexbox
@ProGraphs
Flexboxfroggy
Flexbox Froggy
A game for learning CSS flexbox
با اجرای کد بالا چه مقداری در کنسول چاپ می شود ؟ مراحل رسیدن به این مقدار را توضیح دهید
#interviewquestion #js
@ProGraphs
#interviewquestion #js
@ProGraphs
Freepik: Graphic resources for everyone
- یه سایت جامع برای منابع گرافیکی
- شامل عکس، آیکون، PSD ،Vector های رایگان و ...
https://freepik.com
#link #vector #psd #icon #photo
@ProGraphs
- یه سایت جامع برای منابع گرافیکی
- شامل عکس، آیکون، PSD ،Vector های رایگان و ...
https://freepik.com
#link #vector #psd #icon #photo
@ProGraphs
Freepik
Freepik | All-in-One AI Creative Suite
The only creative suite you need—AI tools, smart features, and high-quality stock assets to design and create without ever leaving Freepik. #freepik
ProGraphs
با اجرای کد بالا چه مقداری در کنسول چاپ می شود ؟ مراحل رسیدن به این مقدار را توضیح دهید #interviewquestion #js @ProGraphs
جواب:
مقدار متغیر y برابر 1 و متغیر x تعریف نشده است و استفاده (RHS) از آن باعث خطا می شود.
مرحله 1) در نگاه اول بیرونی ترین عبارت را می بینیم که یک destructuring آرایه ای است. آرایه سمت چپ یک عضو دارد ولی آرایه سمت راست عضوی ندارد و معادلی برای عضو آرایه سمت چپ در آن وجود ندارد. در نتیجه از مقدار پیشفرض استفاده می شود.
مرحله 2) مقدار پیشفرض تعیین شده هم یک آبجکت هست ({ x: 1 }) در نتیجه یک destructuring دیگر شکل می گیرد اما این بار از نوع آبجکتی. به طور خلاصه الان عبارت ما به این شکل در می آید:
در آخر یک متغیر به نام y خواهیم داشت که مقدار آن عدد 1 هست. اما متغیری به نام x وجود نخواهد داشت.
اگر این مراحل را متوجه نشدید به نکاتی که در طول هفته راجع به destructuring در کانال قرار دادیم مراجعه کنید.
مقدار متغیر 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
https://github.com/kamranahmedse/developer-roadmap
#link #web #roadmap
@ProGraphs
GitHub
GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in…
Interactive roadmaps, guides and other educational content to help developers grow in their careers. - kamranahmedse/developer-roadmap
چند کاربرد از Destructuring
1) جا به جا کردن مقدار دو متغیر
2) کپی کردن آرایه ها
3) قسمت قسمت کردن آرایه
4) بازگشت چند مقدار همزمان از تابع
5) در اکثر زبان ها مثل پایتون میتوانید پارامترهای یک تابع را بر اساس نام آنها به تابع ارسال کنید (به جای ترتیب پارامترها). جاوااسکریپت به صورت پیشفرض از این قابلیت پشتیبانی نمیکند. اما با استفاده از destructuring میتوان این قابلیت را شبیه سازی کرد
6) استفاده از destructuring در حلقه for...of
#quicktip #js #destructuring
@ProGraphs
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
https://www.svgbackgrounds.com/
#link #svg #background
@ProGraphs
SVG Backgrounds
SVG Backgrounds, icons, and other website graphics
👉 Copy-and-paste backgrounds, patterns, icons, and other website graphics directly into projects. All customizable, tiny in file size, and licensed for multi-use.
ProGraphs
تفاوت این سه روش برای load کردن اسکریپت خارجی چیست ؟ #interviewquestion #html @ProGraphs
جواب:
زمانی که مرورگر به تگ اسکریپت معمولی می‌رسد پروسه parse شدن داکیومنت را متوقف می‌کند تا هم فایل اسکریپت دانلود شود و هم execute شود. سپس پروسه parsing را ادامه می‌دهد. (البته مرورگرهای مدرن برای سرعت بیشتر و برای بعضی از فایل ها کمی متفاوت عمل می‌کنند. عبارت speculative parsing را جستجو کنید)
در این روش مرورگر زمانی که به تگ اسکریپت می‌رسد به parse کردن داکیومنت ادامه می‌دهد و به صورت همزمان اسکریپت را دانلود می‌کند. ولی وقتی که فایل دانلود شد پروسه parsing را متوقف می‌کند تا اسکریپت execute شود. دقت کنید که در این روش ممکن است اسکریپت‌ها به ترتیبی که در داکیومنت آمده اند اجرا نشوند (دلیلش هم واضح است 😁). در نتیجه استفاده از این روش برای اسکریپتی مانند jQuery مناسب نیست چرا که ممکن است اسکریپت‌های بعدی از آن استفاده کنند و اگر ترتیب اجرای اسکریپت‌ها رعایت نشود اسکریپت‌ها با مشکل مواجه می شوند.
در این روش مانند async فایل اسکریپت همزمان با parse شدن داکیومنت دانلود می شود ولی تا زمان parse شدن کامل داکیومنت صبر می‌کند بعد اجرا میشود. در این روش برعکس async ترتیب اسکریپت‌ها حفظ می شود.
<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 عنصر داخلی را انتخاب کنیم:
به اینصورت که به هر انتخابگر بر اساس نوع آن امتیازی تعلق می‌گیرد و انتخابگر با بیشترین امتیاز اعمال میشود.
دسته بندی انتخابگر‌ها و امتیاز آنها به این شکل است:
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 ها می‌رویم.
#quicktip #css
@ProGraphs
فرض کنید در ساختار 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
