🔺یه چک لیست خوب برای Front-end ✨

👈 مناسب Front-End developerهای دقیق و وب سایت‌های مدرن

https://frontendchecklist.io/

#link #frontend #checklist

@ProGraphs

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

#interviewquestion #js

@ProGraphs

محبوب‌ترین پروژه‌های جاوااسکریپت github در سال 2018

https://risingstars.js.org/2018/en/

#link #js

@ProGraphs

جواب: true

می‌دانیم که در جاوااسکریپت نمی‌توانیم برای نام متغیرها از reserved wordها مانند class, null, ... استفاده کنیم.

اما متاسفانه undefined یک کلمه‌ی رزرو شده نیست و فقط یک پراپرتی read-only در آبجکت global/window است. بنابراین در هر scope به جز scope گلوبال می‌توانیم یک متغیر به نام undefined با مقدار دلخواه تعریف کنیم!

در این کد داخل تابع دو متغیر به نام‌های undefined و proGraphs با مقدار یکسان تعریف می‌کنیم و به این ترتیب نتیجه‌ی شرط true می‌شود.

دقت کنید که اگر کد را داخل یک تابع نمی‌نوشتیم، با error مواجه می‌شدیم چرا که پراپرتی undefined در scope گلوبال غیر قابل تغییر است.

🔺یه منبع خوب برای الهام گرفتن در طراحی وب به همراه قطعه کد هر اِلِمان

https://codemyui.com/

#link #ui #design #inspiration #codesnippet

@ProGraphs

🔺با این سایت پالت رنگی مورد نظرتون رو راحت‌تر انتخاب کنید.👌🏻

https://culrs.com/

#link #color #palette

@ProGraphs

​​در ادامه‌ی مطالب Property Descriptor، ویژگی enumerable را بررسی می‌کنیم:

همانطور که از نام این ویژگی پیداست، با استفاده از این ویژگی می‌توانیم کنترل کنیم که یک پراپرتی در loopهایی که پراپرتی‌های یک آبجکت را پیمایش می‌کنند (مانند for..in) ظاهر شود یا نه.

همچنین متد JSON.stringify، فقط پراپرتی‌های enumerable را به JSON تبدیل می‌کند و بقیه را نادیده می‌گیرد (به کد داخل تصویر دقت کنید).

#quicktip #js

@ProGraphs

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

#interviewquestion #js

@ProGraphs

وب اسمبلی و تاثیر آن بر آینده‌ی front-end development

https://zendev.com/2018/06/26/webassembly-accelerating-future-web-development.html

#quicktip #wasm

@ProGraphs

🔺 یه سایت خوب دیگه برای درست کردن موکاپ ✨🎉

https://magicmockups.com/

#link #mockup #generator

@ProGraphs

جواب:

متد Object.keys فقط پراپرتی‌هایی از آبجکت را برمی‌گرداند که ویژگی enumerable آن‌ها true باشد (به مطالبی که راجع به Property Descriptor منتشر کردیم مراجعه کنید)

اما متد Object.getOwnPropertyNames تمام پراپرتی‌های یک آبجکت را بدون توجه به enumerable بودن آن‌ها برمی‌گرداند.

در بیشتر موارد از روش اول یعنی Object.keys استفاده می‌شود و روش دوم فقط در شرایط خاص کاربرد دارد. چرا که وقتی یک پراپرتی را به صورت non-enumerable تعریف می‌کنیم. طبیعتا نمی‌خواهیم در حلقه‌ها ظاهر شود!

🔺ابزاری برای ساخت عکس از source code خود در قالبی زیبا ✨

https://carbon.now.sh/

#link #sourcecode

@ProGraphs

یه api فوق‌العاده جالب برای پخش ویدیو خارج از مرورگر!

حتما تا آخر ویدیو را مشاهده کنید.

https://caniuse.com/#feat=picture-in-picture

#quicktip #js #api

@ProGraphs

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

#interviewquestion #js

@ProGraphs

Gravit Designer

- یک ابزار عالی و رایگان برای طراحی وکتور
- جایگزینی مناسب برای Adobe Illustrator
- امکان استفاده آنلاین یا دانلود برنامه
- دارای قابلیت همگام‌سازی کامل

https://www.designer.io/

#link #vector #design #app #alternative #illustrator

@ProGraphs

🔺Material icons 👌🏻

https://material.io/tools/icons/

#link #materialdesign #icon

@ProGraphs

جواب: [4, 3, 2, 1]

این سوال به موضوع خیلی مهم کپی کردن value و reference مربوط است. بنابراین قبل از پاسخ به سوال، این موضوع را بررسی می‌کنیم:

این کد را در نظر بگیرید:

var a = 1;
var b = a;
b = 2;
console.log(a); // 1

همانطور که می‌بینید فقط مقدار متغیر a در b کپی شد و این دو متغیر کاملا جدا از هم عمل می‌کنند. در نتیجه تغییر مقدار b باعث تغییر مقدار a نمی‌شود. به این عملکرد assignment/pass by value گفته می‌شود.
در جاوااسکریپت برخلاف زبانی مثل C، به صورت مستقیم کنترلی بر نحوه‌ی کپی شدن متغیر‌ها نداریم و خود زبان فقط بر اساس نوع داده‌ی داخل متغیر تصمیم می‌گیرد که مقدار کپی شود یا reference.

نوع داده‌های primitive مانند number, string, boolean, symbol, null, undefined فقط مقدارشان کپی می‌شود.

حال این کد را در نظر بگیرید:

var a = {one: 1};
var b = a;
b.one = 2;
console.log(a.one) // 2;
b = {one: 1};
console.log(a.one) // 2;

همانطور که می‌بینید، برای آبجکت‌ها و subtypeهای آن مانند آرایه، این عملیات به صورت متفاوتی اتفاق می‌افتد.
در این کد reference مقداری که متغیر a به آن اشاره می‌کند، در متغیر b کپی می‌شود. در نتیجه فقط یک آبجکت وجود دارد و هردو متغیر به یک آبجکت اشاره می‌کنند. بنابراین وقتی با استفاده از هرکدام از این دو متغیر،‌ یک پراپرتی آبجکت را تغییر می‌دهیم، مقدار آبجکت برای هردو متغیر تغییر می‌کند. چون درواقع فقط یک آبجکت وجود دارد!
اما وقتی در خط بعد متغیر b را برابر با یک آبجکت جدید قرار می‌دهیم، به کلی reference آن را تغییر می‌دهیم و دیگر تغییر مقدار b تاثیری بر متغیر a نخواهد داشت.
به این عملکرد assignment/pass by reference گفته می‌شود.

و اما پاسخ سوال:
مقدار متغیر arr از نوع آرایه است، بنابراین reference آن به تابع ارسال می‌شود. در خط 2 با عملیات push مقدار متغیر arr تغییر می‌کند.
اما در خط 4 به کلی reference متغیر x را از متغیر arr جدا می‌کنیم و به این ترتیب از این خط تا پایان تابع، تغییر متغیر x تاثیری بر متغیر arr نخواهد داشت. در نهایت مقدار متغیر arr آرایه [1, 2, 3, 4] خواهد بود.

🔺منبع الهام برای طراحی صفحات وب ✨

https://www.cssdsgn.com/

#link #ui #web #design #Inspiration

@ProGraphs

🔺 نظرسنجی سالانه برنامه نویسان در سایت Stack Overflow
✌🏻 شما هم از طریق لینک زیر در این نظرسنجی شرکت کنید.

https://kutt.it/yB14zF

#link #stackoverflow #survey

@ProGraphs

​​در ادامه‌ی مطالب Property Descriptor، ویژگی configurable را بررسی می‌کنیم:

اگر مقدار ویژگی configurable برای یک پراپرتی false باشد، 2 اتفاق مهم می‌افتد:

1- عمگر delete از کار می‌افتد و دیگر نمی‌توانیم آن پراپرتی را delete کنیم.

2- دیگر نمی‌توانیم مقادیر ویژگی‌های descriptor از جمله writable, enumerable و خود configurable را تغییر دهیم. البته با یک استثنا:
ویژگی writable بدون توجه به مقدار configurable می‌تواند از true به false تغییر کند (و نه برعکس).

کاربرد این ویژگی‌:
با ترکیب configurable و writable با مقادیر false می‌توانیم یک پراپرتی کاملا constant بسازیم که هم مقدار آن ثابت باشد، هم غیرقابل حذف شدن باشد، هم غیرقابل تعریف مجدد باشد (به کد داخل تصویر دقت کنید).

#quicktip #js

@ProGraphs

متغیر‌های preprocessorهای CSS (مثل SASS) و متغیر‌های خود CSS چه تفاوت‌هایی دارند؟

#interviewquestion #css

@ProGraphs