​​در ادامه‌ی مطالب 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

🔺تایپ ده انگشتی رو با سایت زیر یاد بگیرین✌🏻

https://www.typingclub.com/

#link #typing #touchtyping

@ProGraphs

🔺Your perfect design in perfect mockup frame 👌🏻

https://frrames.com/

#link #mockup

@ProGraphs

جواب:

1- متغیر‌های preprocessorها به مقادیر معمولی CSS کامپایل می‌شوند. بنابراین برخلاف متغیرهای خود CSS در مرورگرهای قدیمی هم کار می‌کنند.

2- در مقابل، CSS Custom Properties که به عنوان متغیر‌های CSS هم شناخته می‌شوند، نسبت به ساختار html آگاه هستند و cascade می‌شوند. یعنی وقتی یک متغیر را داخل یک انتخابگر تعریف می‌کنیم، این متغیر برای تمام عناصر فرزند آن عنصر هم قابل استفاده است (و نه عناصر والد)

3- متغیر‌های CSS را می‌توانیم با جاوااسکریپت تغییر دهیم.

4- متغیر‌های CSS را می‌توانیم در زمان اجرا تغییر دهیم و مرورگر با توجه به تغییرات انجام شده عملیات repaint را انجام می‌دهد. با استفاده از این ویژگی می‌توانیم کار‌های جالبی از جمله تغییر تم سایت در زمان اجرا انجام دهیم.
در حالی که متغیرهای preprocessorها فقط یک بار تعریف می‌شوند و نمی‌توانیم در زمان اجرا آن‌ها را تغییر دهیم.

در مطالب آینده چند نمونه از کاربرد‌های جالب متغیرهای CSS را بررسی خواهیم کرد.

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

https://www.kodeshot.net/

#link #sourcecode

@ProGraphs

​​فرض کنید می‌خواهیم بررسی کنیم که یک صفحه، بدون یک resource خاص چطور نمایش داده می‌شود.
برای این کار در گوگل کروم (به نحوی که در ویدیو مشاهده می‌کنید)، می‌توانیم یک url خاص را بلاک کنیم تا load نشود.

#quicktip #devtools

@ProGraphs

​​در این کد، یک لیست از عناصر html را با جاوااسکریپت انتخاب کرده‌ایم.
اما وقتی می‌خواهیم عملیاتی روی این لیست انجام دهیم، متوجه می‌شویم که بیشتر متدهای آرایه‌ها برای این لیست وجود ندارند!

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

#interviewquestion #js

@ProGraphs