جواب:

ویژگی box-sizing برای تعیین نحو‌ه‌ی اندازه‌دهی به عنصر استفاده می‌شود. در این کد مشخص کرده‌ایم که اندازه‌ای که برای عنصر تعیین می‌کنیم برای محتوا، فاصله‌ی داخلی و حاشیه عنصر در نظر گرفته شود و border و padding باعث تغییر اندازه‌ی عنصر نشوند.
خود این موضوع به تنهایی نکته‌ای مثبت است و باعث قابل پیش‌بینی‌تر شدن طراحی ما می‌شود.

اما مشکل در نحوه‌ی اعمال این ویژگی است. وقتی از عملگر * برای اعمال این ویژگی استفاده می‌کنیم، این ویژگی برای همه‌ی عناصر در نظر گرفته می‌شود و در نتیجه‌ امکان ارث‌بری در CSS را از بین می‌بریم. بنابر‌این اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم مجبوریم مقدار جدید را برای تک تک عناصر مورد نظر تعیین کنیم.
روش بهتر به این‌صورت است:

html {
     box-sizing: border-box;
}
* {
    box-sizing: inherit;
}

به این ترتیب اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم، کافی است مقدار مورد نظر را فقط برای بیرونی‌ترین والد اعمال کنیم تا تمام فرزندان عنصر این مقدار را به ارث ببرند.

مورد دیگری که می‌توان اشاره کرد این است که انتخابگر universal شبه عناصر before و after را انتخاب نمی‌کند. پس برای تغییر box-sizing آن‌ها باید انتخابگر را به این شکل تغییر دهیم:
*, *::after, *::before

🔺 کیفیت برنامه‌نویسی خودت رو بسنج ... ✨

https://wakatime.com

#link #plugin #programmingmetrics

@ProGraphs

​​همانطور که می‌دانید با css می‌توانیم گرادینت‌هایی با شکل linear و radial ایجاد کنیم. اما به تازگی نوع جدیدی از گرادینت‌ها به نام conic gradients به css اضافه شده است.

تفاوت conic-gradient و radial-gradient در این است که radial-gradient (به صورت پیشفرض) از مرکز دایره به سمت بیرون ایجاد می‌شود. ولی conic-gradient دور یک دایره شکل می‌گیرد و شکل یک مخروط را درست می‌کند (مانند تصویر).

سینتکس آن هم تقریبا مشابه radial-gradient است با این تفاوت که قبل از color-stop ها می‌توانیم درجه شروع گرادینت و مرکز آن را مشخص کنیم (مانند تصویر).

برای تست کردن این ویژگی فعلا از نسخه‌های جدید گوگل کروم استفاده کنید.

#quicktip #css

@ProGraphs

🔺Simply beautiful open source icons 🎉

https://feathericons.com/

#link #icon

@ProGraphs

🔺مدل‌های محصول خودتون رو به راحتی با این سایت بسازید. 🎉✨

https://artboard.studio

#link #mockup #productmockup

@ProGraphs

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

#interviewquestion #js

@ProGraphs

اینم 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