اینم Mockup هایی که ما با این سایت ساختیم. 👆🏻✨

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

https://www.reshot.com/
https://freephotos.cc/
https://barnimages.com/
https://pixabay.com/en/
https://visualhunt.com

#link #stockphoto

@ProGraphs

جواب: true

در جاوااسکریپت چندین نوع داده‌ی primitive مانند string, number, boolean, ... داریم و برای بیشتر این نوع داده‌ها یک تابع constructor مانند String, Number, Boolean, ... وجود دارد.

اما نکته خیلی مهم برای درک این کد این است این constructorها مقدار primitive درست نمی‌کنند و یک آبجکت برمی‌گردانند. یعنی:

typeof 20 // number
typeof new Number(20) // object

به این آبجکت‌ها object wrapper می‌گویند.‌ (object wrapperها و کاربرد آن‌ها را در مطالب بعدی بررسی خواهیم کرد)

دوباره به کد دقت کنید. اول یک new Boolean با پارامتر false داریم. ولی می‌دانیم که نتیجه‌ی این عبارت، مقدار false نیست و یک آبجکت دریافت می‌کنیم.
حالا این آبجکت به عنوان ورودی new Boolean بعدی ارسال می‌شود.

می‌دانیم که آبجکت‌ها truthy value محسوب می‌شوند. پس خروجی new Boolean دوم هم یک object wrapper است. ولی با استفاده از valueOf مقدار primitive را که true است دریافت می‌کنیم. (خودمم گیج شدم 😁)

🔺 تبدیل فرمت‌های مختلف رنگ به یکدیگر 🎨

https://rgb.to/

#link #color #convertor

@ProGraphs

📋 UX Project Checklist ✨❤️

https://uxchecklist.github.io/

#ux #checklist

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون سوم)

تقریبا تمامی توابع جاوااسکریپت دو متد به نام‌های call و apply دارند. این متد‌ها مقدار this و پارامتر‌های تابع را دریافت می‌کنند و تابع را با مقدار this تعیین شده صدا می‌کنند. به این ترتیب بدون توجه به دو قانون قبلی می‌توانیم مقدار this را مستقیما تعیین کنیم (به کد تصویر دقت کنید). به این روش explicit binding می‌گویند.

همچنین تفاوت call و apply تنها در نحوه‌ی دریافت پارامتر‌های تابع است. به این‌صورت که call پارامتر‌های تابع را پشت‌سرهم بعد از thisBinding، و apply فقط یک آرایه از پارامتر‌های تابع دریافت می‌کند.

 param1, ...)
func.apply(thisBinding, [param1, ...])

متد جالب دیگری که در توابع وجود دارد متد bind است که به جای صدا کردن تابع مورد نظر،‌یک تابع جدید با مقدار this تعیین شده بر‌می‌گرداند. (این متد را در مطالب بعدی بیشتر بررسی خواهیم کرد)

#quicktip #js

@ProGraphs

🔺 Privacy-friendly alternatives to Google that don't track you ✌🏻

https://nomoregoogle.com/

#link #google #nomoregoogle

@ProGraphs

آیا دلیلی دارد برای انیمیشن‌های css به جای position از translate استفاده کنید؟

#interviewquestion #css

@ProGraphs

🔺 Mix-&-match illustrations of people with a design library

https://www.humaaans.com/ 🚶🏻‍♀️🚶🏻‍♂️🏃🏼‍♀️🏃🏽‍♂️

#link #illustration #people #designlibrary

@ProGraphs

جواب:

زمانی که مرورگر استایل‌های صفحه را دریافت می‌کند، از چند مرحله می‌گذرد تا صفحه را نمایش دهد:

style calculation:
در این مرحله مرورگر تعیین می‌کند که چه استایل‌هایی بر روی هر عنصر اعمال می‌شوند.

layout:
در این مرحله مرورگر شکل و موقعیت هر عنصر را تعیین می‌کند.

paint:
در این مرحله پیکسل‌های هر عنصر پر می‌شود و متن‌ها، تصاویر، ... رسم می‌شوند. (مرورگر این ترسیم‌ها را در لایه‌های مختلف انجام می‌دهد)

compositing:
در این مرحله مرورگر لایه‌های ترسیم شده را در کنار هم در صفحه نمایش می‌دهد.

فرض کنید می‌خواهیم یک پراپرتی را برای یک انیمیشن تغییر دهیم. هر چه این پراپرتی مرورگر را مجبور به تکرار تعداد بیشتری از این مراحل کند، انیمیشن کندتری خواهیم داشت.

تغییر left/top عنصر، مرورگر را مجبور می‌کند تا مرحله‌ی layout و paint و compositing را تکرار کند. ولی تغییر موقعیت عنصر با استفاده از translate مرورگر را تنها مجبور به تکرار مرحله‌ی compositing می‌کند. بنابراین در حالت کلی انیمیشن‌هایی که با transform ایجاد می‌کنیم روان‌تر اجرا می‌شوند.

🔺یه نرم افزار سریع، مفید و فان برای کشیدن وایرفریم 👌🏻

https://balsamiq.com/

#link #wireframe #software

@ProGraphs

​​یکی دیگر از ‌api های جالب chrome devtools تابع monitorEvents است. این تابع یک آبجکت DOM را دریافت می‌کند و هر بار یک event برای آن عنصر رخ می‌دهد، اطلاعات آن را در کنسول نمایش می‌دهد.

این تابع یک پارامتر دوم اختیاری هم دریافت می‌کند که می‌تواند نام یک event خاص و یا آرایه‌ای از eventها باشد که می‌خواهیم track کنیم.

همچنین می‌توانیم به جای نام یک event از عبارت‌هایی مثل mouse یا key استفاده کنیم تا تمامی event های مربوط به موس یا کیبورد را بررسی کنیم.

این api برای دیباگ کردن، پیدا کردن نام یک event و ... می‌تواند مفید باشد.

#quicktip #devtools

@ProGraphs

🔺 یه سایت خوب برای الهام گرفتن در حوزه دیجیتال 🎉✨

https://www.uplabs.com/

#link #inspiration #showcase

@ProGraphs

آیا با مفهوم closure در جاوااسکریپت آشنا هستید؟
یک مثال از کاربرد آن بزنید

#interviewquestion #js

@ProGraphs

🔺EMOJI CHEAT SHEET 🎉✨

https://www.webpagefx.com/tools/emoji-cheat-sheet/

#link #emoji #cheatsheet

@ProGraphs

جواب:

در جاوااسکریپت، توابع به scope‌ اطرافشان (lexical environmet) و متغیر‌هایی که در آن تعریف شده‌اند دسترسی دارند. حتی اگر یک تابع خارج از محیطی که در آن تعریف شده است صدا شود،‌ باز هم به متغیر‌های توابع بیرونی دسترسی دارد. به این کد دقت کنید:

function outer() {
    var data = 'outer scope data';
    function inner() {
        console.log(data);
    }

    return inner;
}
var inner = outer();
inner(); // 'outer scope data'

تابع inner را از تابع بیرونی return می‌کنیم و خارج از آن صدا می‌کنیم. اما چون داخل تابع outer تعریف شده است، همچنان به متغیر‌های تعریف شده در آن دسترسی دارد. به این مفهوم closure می‌گویند و با هر بار ایجاد یک تابع، یک closure هم ایجاد می‌شود.

کاربردهای زیادی برای closure وجود دارد. از جمله پیاده سازی data privacy، module pattern، ...

یکی از این کاربرد‌ها زمانی اتفاق می‌افتد که یک تابع را به تابع setInterval پاس می‌دهیم:

function outer() {
     var count = 0;
     setInterval(function() {
           count++;
     }, 1000);
}

تابع ما داخل تابع setInterval صدا می‌شود. ولی چون داخل تابع outer تعریف شده است، به متغیر count دسترسی دارد.

🔺Wunderlist | To-do list, Reminders, Errands 🎊

https://www.wunderlist.com/

#link #todolist #reminder #errand

@ProGraphs

🔺 یه Ganarator عالی برای گرادینت ✨

https://shapy.app/

#link #color #gradient #generator

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون چهارم و آخر)

زمانی که یک تابع را با کلمه کلیدی new صدا می‌کنیم،‌ این تابع، یک آبجکت جدید می‌سازد و آبحکت جدید را به عنوان مقدار this تعیین می‌کند (constructor call دو کار دیگر هم انجام می‌دهد. برای مطالعه‌ی بیشتر به مطالبی که راجع به prototype منتشر کردیم رجوع کنید).

دقت کنید که در جاوااسکریپت، مانند زبان‌های oop دیگر، تابع constructor نداریم و تقریبا همه‌ی توابع می‌توانند با new صدا شوند.

نحوه‌ی کارکرد this تنها با همین چهار قانون ساده قابل درک است.
همچنین اولویت این چهار قانون برعکس ترتیبی است که ما در کانال بررسی کردیم!
یعنی اگر قوانین دوم و سوم را هم‌زمان در یک call-site ببینیم، قانون سوم اعمال می‌شود.

#quicktip #js

@ProGraphs

این آخرین نکته از سری نکته‌های قوانین مکانیزم this در جاوااسکریپت بود و با مطالعه‌ی این نکته‌ها باید بتونیم this رو کاملا درک کنیم.
فقط چند نکته‌ی ساده راجع به this باقی می‌مونه که به مرور بررسی می‌کنیم.

آخر هفته منتظر یه سوال نسبتاً سخت از this باشید 😄