یه 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

🔺 آموزش و دوره‌های طراحی گرافیک با سایت Tutpad ✨

https://www.tutpad.com/

#link #graphic #design #course #tutorial

@ProGraphs

🔺انتشار نسخه 2.6 vue

https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e

#link #vue

@ProGraphs

جواب:

در جاوااسکریپت آبجکت‌هایی وجود دارند که مثل آرایه‌ها رفتار می‌کنند ولی آرایه نیستند! به این آبجکت‌ها Array-Like می‌گویند.

این آبجکت‌ها:
- مانند آرایه‌ها پراپرتی length دارند.
- مانند آرایه‌ها، مقادیر آن‌ها index عددی دارند.
- اما به متدهای آرایه‌ها مثل concat, map, push و ... دسترسی ندارند.

خروجی بعضی از متدهای دستکاری DOM مثل متد querySelectorAll، یک آبجکت Array-Like است.
به همین دلیل با استفاده از متدهای آرایه‌ها نمی‌توانیم عملیاتی روی آن‌ها انجام دهیم (با اینکه یک لیست هستند و می‌توانیم با حلقه for آن‌ها را پیمایش کنیم).

اما چطور می‌توانیم این آبجکت‌ها را به آرایه معمولی تبدیل کنیم تا به متدهای آرایه‌ها دسترسی داشته باشیم؟

روش اول:
استفاده از متد slice (بدون پارامتر)
var arr = Array.prototype.slice.call(arrayLike)

روش دوم:
استفاده از متد Array.from
var arr = Array.from(arrayLike)

روش سوم:
استفاده از spread operator
var arr = [...arrayLike]

اگر می‌خواهید دقیقا بدانید که چرا Array-Likeها به متدهای آرایه‌ها دسترسی ندارند، این مطلب را هم مطالعه کنید: 👇

در یکی از مطالب قدیمی‌تر [[prototype]] را بررسی کردیم و دیدیم که یک مکانیزم برای لینک شدن آبجکت‌ها به یکدیگر است.

حال یک آبجکت به نام Array.prototype وجود دارد که همه‌ی آرایه‌ها به آن لینک شده‌اند و متدهای آرایه‌ها مثل map, forEach و ... در آن وجود دارد.

اما Array-like ها به این آبجکت لینک نشده‌اند. بنابراین به متدهای آرایه‌ها دسترسی ندارند. (البته مرورگرهای مدرن تعداد کمی از این متدها مثل forEach را برای array-likeها هم تعریف کرده‌اند)

🔺CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code ✨

https://webkul.github.io/csspin/

#link #spinner #loader

@ProGraphs