در قسمت‌های مختلف chrome devtools می‌توانیم یک مقدار را در یک متغیر گلوبال ذخیره کنیم تا به راحتی در کنسول به آن دسترسی داشته باشیم.

در ویدیو، کاربرد این ویژگی برای دسترسی به اطلاعات یک انیمیشن، dom element و response object را می‌بینید.

#quicktip #devtools

@ProGraphs

احتمالا دقت کرده‌اید که در CSS با استفاده از پراپرتی display می‌توانیم هم نحوه‌ی قرار گرفتن خود عنصر و هم نحوه‌ی چیده شدن فرزندان عنصر در صفحه را تعیین کنیم.
به عنوان مثال:
- با استفاده از display: flex خود عنصر Block می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با استفاده از display: inline-flex خود عنصر به صورت inline نمایش داده می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با display: block خود عنصر به صورت Block در می‌آید و فرزندان آن از قوانین normal flow تبعیت می‌کنند و ...

همچنین می‌دانیم که display: none هم خود عنصر و هم فرزندان آن را از صفحه حذف می‌کند.
اما حالا با ویژگی جدید display: contents می‌توانیم کاری کنیم که خود عنصر از صفحه حذف شود،‌ ولی فرزندان آن در صفحه باقی بمانند!

در این مقاله می‌توانید کاربرد عملی این ویژگی را ببینید:
https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/

#quicktip #css

یک کاربرد جالب spread operator برای اضافه کردن یک آیتم به آرایه/آبجکت به صورت شرطی.

#quicktip #js #trick

@ProGraphs

با استفاده از media query inspector در گوگل کروم، می‌توانیم تمام media queryهای تعریف شده داخل یک صفحه را ببینیم و اعمال کنیم!

#quicktip #devtools

@ProGraphs

فرض کنید بر روی یک عنصر هم translate، هم scale و هم rotate اعمال کرده‌ایم.

حالا می‌خواهیم در حالت hover، فقط مقدار rotate را تغییر دهیم.
متاسفانه برای این کار مجبوریم تمام مقادیر قبلی را هم تکرار کنیم!

با استفاده از متغیرهای CSS می‌توانیم این مشکل را حل کنیم (ویدیو را ببینید).

#quicktip #css #trick

@ProGraphs

​احتمالا دقت کرده‌اید که وقتی مقادیر CSSی یک عنصر را در جاوااسکریپت می‌خوانیم، مقدار مورد نظر را به همراه واحد آن در یک string دریافت می‌کنیم:
100px

یعنی برای انجام محاسبات مجبوریم این string را parse کنیم و دوباره واحد مورد نظر را concat کنیم.

اما حالا با استفاده از api جدید CSS Typed OM می‌توانیم مقدار و واحد رو به صورت جداگانه در یک آبجکت دریافت کنیم و خیلی راحت‌تر استایل‌های عناصر را تغییر دهیم.

برای مقایسه‌ی بهتر، در این ویدیو هم با CSSOM و هم با CSS Typed OM عرض یک عنصر را دو برابر می‌کنیم.

#quicktip #css #houdini

@ProGraphs

​همه‌ی ما strict-mode را به عنوان یک ویژگی برای محدود کردن بعضی رفتارهای نامتعارف جاوااسکریپت می‌شناسیم.
اما فواید strict-mode فقط به اینجا ختم نمی‌شود.
❗️در واقع محدودیت‌های بیشتری که تو این حالت اعمال می‌شود، به انجین جاوااسکریپت اجازه می‌دهد که بهینه‌سازی‌های بیشتری هم روی کد انجام دهد.

به عنوان مثال در یکی از مطالب قدیمی‌تر، با wrapper objectها آشنا شدیم.
❗️و دیدیم که به لطف wrapper objectها، داده‌های primitive هم می‌توانند مثل آبجکت‌ها متد داشته باشند.
یعنی در کد زیر، جاوااسکریپت به صورت خودکار string را تبدیل به یک wrapper object می‌کند تا متد trim را روی آن صدا کند:
"some string".trim()

❗️اما جالبه بدونید که تو حالت strict-mode، وقتی از یکی از متدهای اعداد یا stringها استفاده می‌کنیم، انجین جاوااسکریپت یک wrapper object اضافه نمی‌سازد و مستقیما از متدی که داخل prototype تعریف شده استفاده می‌کند!

برای اثبات این موضوع به کد داخل تصویر دقت کنید.
می‌بینید که متد دوم که در حالت strict-mode اجرا میشود، هیچ آبجکت اضافه‌ای برای box کردن string نمی‌سازد.

#quicktip #js #optimization

@ProGraphs

​پراپرتی transform-style در CSS مشخص می‌کند که فرزندان یک عنصر در یک سطح صاف هستند، یا باید در یک فضای سه بعدی نمایش داده شوند.

به این ترتیب با استفاده از transform: rotate و transform-style می‌توانیم یک عنصر را دور یک عنصر دیگر قرار دهیم!

codepen.io/prographs/pen/Rwwgwmo

#quicktip #css #trick

@ProGraphs

​احتمالا دقت کرده‌اید که وقتی می‌خوایم یه پراپرتی CSS رو تو حالت hover یا ... تغییر بدیم، مجبوریم اون پراپرتی رو دوباره با مقادیر جدید تکرار کنیم.

اما حالا با متغیرهای CSS و تابع calc میتونیم بدون تکرار کردن دوباره‌ی پراپرتی‌ها، بین دو مقدار switch کنیم. به عنوان مثال:

transform: rotate(calc(var(--i) * 45deg));
top: calc(var(--i) * 10px);

توی این کد اگر متغیر i = 0 باشه، عنصرمون rotate و top نداره.
حالا برای اینکه عنصر رو 45deg بچرخونیم و top 10px بهش بدیم، فقط کافیه مقدار متغیر i رو 1 کنیم!

دقت کنید که تو این ترفند داریم از ویژگی live بودن متغیرهای CSS استفاده می‌کنیم. پس با متغیرهای SASS نمیتونیم این کار رو انجام بدیم.

برای مقایسه‌ی بهتر، توی ویدیو پراپرتی‌های transform و background رو با استفاده از این ترفند (بدون تکرار کردن کردن پراپرتی‌ها) تغییر میدیم.

#quicktip #css #trick #dry

@ProGraphs

​میدونیم که تغییر پراپرتی box-shadow با CSS جزو انیمیشن‌های نسبتا سنگین محسوب میشه و میتونه باعث کند شدن انیمیشن بشه.

اما با یه ترفند جالب میتونیم box-shadow یه عنصر رو خیلی روان‌تر animate کنیم.
به این صورت که یه pseudo element به اندازه‌ی خود عنصر تعریف میکنیم و box-shadow رو به این pseudo element میدیم. حالا کافیه opacity این pseudo element رو تغییر بدیم (به کد داخل عکس دقت کنید).

در واقع با این ترفند به جای پراپرتی box-shadow، پراپرتی opacity رو تغییر دادیم (animate کردن پراپرتی opacity برای مرورگر ساده‌تره)

کد کامل این ترفند رو میتونید اینجا ببینید.

ترفندهای مشابه برای تغییر بهینه‌تر طول و عرض عنصر هم وجود داره که در مطالب بعدی بررسی میکنیم :)

#quicktip #css #performance #trick

@ProGraphs