آیا دلیلی دارد برای انیمیشن‌های 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 باشید 😄

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

#interviewquestion #js

@ProGraphs

🔺 حذف پس‌زمینه تصویر 👌🏻
- در پنج ثانیه
- کاملا خودکار
- بدون یک کلیک

https://www.remove.bg/

#link #background

@ProGraphs

🔺To Do List & Task Manager ⏳

https://todoist.com/

#link #todolist

@ProGraphs

جواب: 19

اگر نوع مقداری که به عنوان key در یک آبجکت تعیین می‌کنیم، غیر از string باشد، مقدار تعیین شده به string تبدیل می‌شود.

در این کد، ابتدا یک پراپرتی با key از نوع آبجکت ایجاد می‌کنیم. اما می‌دانیم که key نمی‌تواند از نوع آبجکت باشد پس به صورت خودکار به string تبدیل می‌شود. یعنی تا اینجا یک پراپرتی به نام "[object object]" و مقدار 20 داریم.

حالا هر پراپرتی جدیدی که اضافه کنیم، اگر key‌ آن از نوع آبجکت باشد، نام آن به "[object object]" تبدیل می‌شود و به جای اینکه پراپرتی جدید ایجاد شود، مقدار پراپرتی قبلی تغییر می‌کند.
بنابراین در خط هفتم، در واقع مقدار پراپرتی قبلی را تغییر می‌دهیم و پراپرتی جدیدی ایجاد نمی‌کنیم.

در نهایت فقط یک پراپرتی با نام "[object object]" و مقدار 19 در آبجکت وجود دارد!

🔺فشرده‌سازی تصاویر با TinyPNG

https://tinypng.com/

#link #image #compressor

@ProGraphs

یکی از قابلیت‌های خیلی کاربردی chrome devtools امکان ثبت screenshot تمام صفحه از یک وب‌سایت است.

برای این کار command menu را باز می‌کنیم (Ctrl+Shift+P در ویندوز و Cmd+Shift+P در مک) و دستور capture full size screenshot را تایپ می‌کنیم.

#quicktip #devtools

@ProGraphs

🔺جامعه‌ای که زنان در خط مقدم آن قرار دارند. 👩🏻‍💻👩🏼‍🎓🧕🏻

با دیگر زنان سازنده در دنیا چت و به یکدیگر کمک کنید. 🤝

https://womenmake.com/

#link #women #community

@ProGraphs