کد این سوال را هم میتوانید اینجا ببینید:

https://codepen.io/prographs/pen/GYRegd?editors=1100

این سایت هر روز پروژه های مربوط به حوزه front-end development که دیروز بیشترین رشد رو در گیت هاب داشتند لیست میکنه.

https://bestofjs.org/

#link

@ProGraphs

تفاوت display های inline و inline-block در CSS چیست ؟

#interviewquestion #css

@ProGraphs

چند نمونه از کاربردهای ریاضیات در front-end development

https://www.chenhuijing.com/blog/math-and-front-end/

#link #math

@ProGraphs

​​نکات تکمیلی Destructuring
1) مقادیر پیشفرض: اگر مقدار مورد نظر در آرایه یا آبجکت پیدا نشود. مقدار پیشفرض به جای undefined استفاده میشود (قسمت ۱ کد در تصویر)

2) نام دلخواه متغیر: اگر در destructuring یک آبجکت بخواهیم اسم متغیر مشابه پراپرتی آبجکت نباشد از این روش استفاده میکنیم (قسمت ۲ کد در تصویر)

3) ترکیب 1 و 2 : اگر هم بخواهیم متغیر مقدار پیشفرض داشته باشد و هم نام متغیر ایجاد شده دلخواه باشد (قسمت ۳ کد در تصویر)

4) پرش از روی مقادیر آرایه: (قسمت ۴ کد در تصویر).

5) عملگر Rest: با استفاده از عملگر Rest میتوانیم بقیه مقادیر آرایه را در یک آرایه جدید استخراج کنیم. دقت کنید که استفاده از این قابلیت در آبجکت ها هنوز استانداردسازی نشده. (قسمت ۵ کد در تصویر)

6) اما چرا زمانی که object destructuring با تعریف متغیر همراه نیست از عملگر پرانتز استفاده میکنیم ؟
به این دلیل که '{}' در جاوااسکریپت نشان دهنده یک بلاک کد هست و برای تمایز بلاک کد و عبارت destructuring از پرانتز استفاده میکنیم

#quicktip #js #destructuring

@ProGraphs

جواب:
۲ تفاوت عمده بین این display ها وجود دارد:
1) برای عناصر inline-block می توان عرض و طول مشخص کرد ولی عناصر inline خیر
2) عناصر inline فقط در راستای افقی margin و padding می گیرند ولی عناصر inline-block در هر 4 جهت

این دو تفاوت را در لینک زیر بیشتر بررسی کنید:

https://codepen.io/prographs/pen/gBpYMM

بهترین منابع رایگان برای دریافت تصاویر با کیفیت:

https://unsplash.com/
https://negativespace.co/
https://stocksnap.io/
https://www.lifeofpix.com/
https://gratisography.com/
https://picography.co/
https://isorepublic.com/
https://pxhere.com/en/
https://www.rawpixel.com/
https://cdn.magdeleine.co/

🔺اگه شما هم منابع خوب دیگه‌ای می‌شناسین، می‌تونین از طریق @HiProGraphsBot بهمون معرفی کنین 😎

#link #stockphoto

@ProGraphs

آیا درمورد quirks mode و standard mode در مرورگرها شنیده اید ؟
تفاوت این دو حالت چیست ؟
مرورگرها چطور تشخیص می دهند که صفحه وب را در کدام حالت نمایش دهند‌ ؟

#interviewquestion #html #browser

@ProGraphs

اگه با فلکس باکس آشنا نیستید با این مقاله میتونید سریع با مقدمات فلکس باکس آشنا بشید

https://medium.com/@jillplatts/6-minute-beginners-guide-to-css-flexbox-527b3ff3480b

#link #css #flexbox

@ProGraphs

​​نکات تکمیلی Destructuring قسمت ۲
1) میتوان array destructuring را برروی همه ی مقادیر iterable مانند رشته ها اعمال کرد. (قسمت ۱ کد در تصویر)

2) مقادیر پیشفرض میتوانند از متغیرهای دیگر destructuring استفاده کنند. البته دقت کنید که ترتیب اهمیت دارد و متغیری که اول آمده نمیتواند از مقدار متغیردوم استفاده کند. (قسمت ۲ کد در تصویر)

3)‌ اگر مقدار پیشفرض یک آرایه یا آبجکت باشد. دوباره قوانین destructuring بر روی آن اعمال میشود. به طور مثال در قسمت ۳ کد در تصویر میبینید که آرایه سمت راست عضوی ندارد پس از مقدار پیشفرض استفاده میشود. اما مقدار پیشفرض هم یک آبجکت هست ({a: 1}) بنابراین یک destructuring جدید ایجاد میشود

4)‌ نام پراپرتی میتواند در زمان اجرا محاسبه شود و static نباشد. (قسمت ۴ کد در تصویر)

#quicktip #js #destructuring

@ProGraphs

جواب:

این سوال بیشتر از اینکه فنی باشه اطلاعات عمومی هست برای کسانی که با وب سروکار دارند.
قضیه از این قرار هست که در دوران مزوزوئیک که هنوز وب و ابزارهای توسعه آن استانداردسازی نشده بودند دولوپرها صفحات وب را بدون استاندارد خاصی و برای دو مرورگر قدیمی 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

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

#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