⚡️ ۴ نکته مفید HTML:
- تصویر اول: یک meta تگ داریم که باهاش میتونید تعیین کنید صفحه هر n ثانیه یکبار رفرش بشه
- تصویر دوم: با meta تگ theme-color میتونید به آدرس‌بار بالای مرورگر های موبایل (مخصوصا کروم) رنگ دلخواهتون رو بدید
- تصویر سوم: اینپوت ها میتونن type با مقدار color داشته باشن، که اگه یوزر روشون بزنه، color picker نیتیو دستگاه باز میشه تا رنگ رو انتخاب کنه
- تصویر چهارم: خود HTML یک المنت نیتیو dialog داره که باهاش میتونید مودال ها یا پرامپت ها رو نمایش بدید!
🆔 @frontcode01 | 👩💻🧑💻
- تصویر اول: یک meta تگ داریم که باهاش میتونید تعیین کنید صفحه هر n ثانیه یکبار رفرش بشه
- تصویر دوم: با meta تگ theme-color میتونید به آدرس‌بار بالای مرورگر های موبایل (مخصوصا کروم) رنگ دلخواهتون رو بدید
- تصویر سوم: اینپوت ها میتونن type با مقدار color داشته باشن، که اگه یوزر روشون بزنه، color picker نیتیو دستگاه باز میشه تا رنگ رو انتخاب کنه
- تصویر چهارم: خود HTML یک المنت نیتیو dialog داره که باهاش میتونید مودال ها یا پرامپت ها رو نمایش بدید!
🆔 @frontcode01 | 👩💻🧑💻
🔥15👍6❤4😍3
🔺 با مدیا کوئری hover: none میتونید برای دیوایس هایی که از حالت هاور پشتیبانی نمیکنن (مثلا فقط با تاچ هستن مثل گوشی های موبایل) استایل مخصوص خودشون رو بدید.
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
🔥22👍9❤2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ از تنظیمات DevTools کروم میتونید تیک CSS Overview رو بزنید تا یه تب جدید تو DevTools اضافه بشه که بتونید باهاش اطلاعاتی از نوع استایل‌ها، رنگ‌ها، فونت‌ها و استایل های CSSی که تعریف کردید و استفاده نکردید، بدست بیارید
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
🔥16👍6😍4
🎉 با سینتکس جدید رنگ های CSS، میتونید بدون استفاده از rgba و با خود rgb پراپرتی چهارم که همون مقدار alpha و opacity رنگ هستش رو بدید!😍
🔺 جدول ساپورت Caniuse
🆔 @frontcode01 | 👩💻🧑💻
🔺 جدول ساپورت Caniuse
🆔 @frontcode01 | 👩💻🧑💻
🔥15👍5😍2🤣2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ قبلا اگه میخواستید توی یه صفحه ای به یه قسمت خاصی از صفحه لینک بدید که وقتی لینک باز شد، اسکرول بخوره به اون قسمت، باید تو اون صفحه یه تگ a قرار میداشت تا به id اون لینک بدید:
ولی به وسیله text fragments میتونید بدون احتیاج به تگ a به هر قسمت از متن که میخواید لینک بدید. این تکنیک الان داره موقع سرچ کردن تو گوگل استفاده میشه 😁
🔺 جدول ساپورت Caniuse
🆔 @frontcode01 | 👩💻🧑💻
<a href="#section">Section</a>
ولی به وسیله text fragments میتونید بدون احتیاج به تگ a به هر قسمت از متن که میخواید لینک بدید. این تکنیک الان داره موقع سرچ کردن تو گوگل استفاده میشه 😁
<a href="page.html#:~:text=yourText">Highlight text</a>
🔺 جدول ساپورت Caniuse
🆔 @frontcode01 | 👩💻🧑💻
👍25❤4😍3🔥1
⚡️ معرفی nullish operator:
این اوپراتور تنها در صورتی که مقدار سمت چپش null یا undefined باشه، مقدار سمت راستش رو ریترن میکنه و مشکل or operator یا همون || رو با خود false نداره
🆔 @frontcode01 | 👩💻🧑💻
این اوپراتور تنها در صورتی که مقدار سمت چپش null یا undefined باشه، مقدار سمت راستش رو ریترن میکنه و مشکل or operator یا همون || رو با خود false نداره
null || 2 // 2
null ?? 2 // 2
false || 2 // 2
false ?? 2 // false
🆔 @frontcode01 | 👩💻🧑💻
❤14👍6🔥3😍1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ با این ابزار میتونید حالت های مختلف کیبورد های موبایل برای اینپوت هایی که میسازید رو ببینید و با نکاتی که خود ابزار در مورد autocomplete بهتون میگه، تجربه کاربری بهتری خلق کنید 🔥
◽️ https://better-mobile-inputs.netlify.app
🆔 @frontcode01 | 👩💻🧑💻
◽️ https://better-mobile-inputs.netlify.app
🆔 @frontcode01 | 👩💻🧑💻
🔥11❤4👍2😍2
✅ با کمک Array destructuring میتونیم بدون استفاده از متغیر سوم ، مقادیر دو متغیر رو جا به جا کنیم 🫰🏼
پ.ن: قبل ES6 باید یه وریبل سومی هم تعریف میکردیم 🙃
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: قبل ES6 باید یه وریبل سومی هم تعریف میکردیم 🙃
🆔 @frontcode01 | 👩💻🧑💻
👍26😍3🔥2❤1
⚡️ یکی از راه هایی که میتونید در #TypeScript برای فانکشن هاتون overload تعریف کنید با interface هستش. در این مثال، فانکشن navigate ما دو حالت کلی داره:
۱- فقط یه عدد میگیره مثل منفی ۱ و یه برمیگرده به صفحه قبل
۲- آدرس صفحه جدید رو همراه با یه سری آپشن میگیره
اینجا میتونیم بجای استفاده از | برای تعریف تایپ ها(که یک سری مشکلات هم ایجاد میکنه)، با یک interface دو حالت کلی برای فانکشنمون در نظر بگیریم و به خوبی این قضیه رو هندل کنیم
🆔 @frontcode01 | 👩💻🧑💻
۱- فقط یه عدد میگیره مثل منفی ۱ و یه برمیگرده به صفحه قبل
۲- آدرس صفحه جدید رو همراه با یه سری آپشن میگیره
اینجا میتونیم بجای استفاده از | برای تعریف تایپ ها(که یک سری مشکلات هم ایجاد میکنه)، با یک interface دو حالت کلی برای فانکشنمون در نظر بگیریم و به خوبی این قضیه رو هندل کنیم
🆔 @frontcode01 | 👩💻🧑💻
❤10👍3😍3🔥2
🎉 جدید ترین یونیت های CSS:
- ✨ یونیت lh (مخفف line height) که دقیقا اندازه ارتفاع خط تکست میشه(به عکس توجه کنید: ارتفاع دایره صورتی که مقدارش 1lh داده شده دقیقا با ارتفاع متن کناریش برابره)
- ✨ یونیت rlh (مخفف root line height) که مشابه lh هستش منتها بجای line-height خود المنت، بر حسب line-height المنت روت <html> کار میکنه
پ.ن: نسبت این دو تا بهم مثل نسبت em و rem هستش 🙃
🆔 @frontcode01 | 👩💻🧑💻
- ✨ یونیت lh (مخفف line height) که دقیقا اندازه ارتفاع خط تکست میشه(به عکس توجه کنید: ارتفاع دایره صورتی که مقدارش 1lh داده شده دقیقا با ارتفاع متن کناریش برابره)
- ✨ یونیت rlh (مخفف root line height) که مشابه lh هستش منتها بجای line-height خود المنت، بر حسب line-height المنت روت <html> کار میکنه
پ.ن: نسبت این دو تا بهم مثل نسبت em و rem هستش 🙃
🆔 @frontcode01 | 👩💻🧑💻
👍25🔥5😍4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
🔺 یه چیزی داریم تو #CSS به اسم scroll snapping که وقتی اسکرول میکنیم به المنتی، به نوعی پوزیشن اسکرول اسنپ(قفل) میشه روی اون المنت
▫️ با پراپرتی های scroll-margin میتونید پوزیشن این اسنپ شدن رو یکمی تغییر بدید
🆔 @frontcode01 | 👩💻🧑💻
▫️ با پراپرتی های scroll-margin میتونید پوزیشن این اسنپ شدن رو یکمی تغییر بدید
🆔 @frontcode01 | 👩💻🧑💻
👍19❤5😍2🔥1
📍 با استفاده از توابع
🆔 @frontcode01 | 👩💻🧑💻
mix , max , clamp میتونید منطق رو به CSS اضافه کنید و استفاده از Media Query رو به حداقل برسونید 🫰🏻🆔 @frontcode01 | 👩💻🧑💻
👍16❤5🔥4😍3
⚡️ وقتی یه لیست داخل کد داریم، اولین ساختاری که براش به ذهنمون میرسه آرایه هستش. منتها شاید بعضی جاها بهتر باشه این آرایه رو تبدیل کنیم به array-like object. مثلا تو این مثال اگه قرار بود یوزر cory رو از آرایه بگیریم، باید از متد find استفاده میکردیم و یه لوپ میخورد آرایمون. ولی چون از آبجکت استفاده شده، دیگه صرفا داره پراپرتیشو میگیره
پ.ن: نیاید الان همه آرایه هاتون رو آبجکت کنید! کاربردای خاص خودشو داره این روش 😁
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: نیاید الان همه آرایه هاتون رو آبجکت کنید! کاربردای خاص خودشو داره این روش 😁
🆔 @frontcode01 | 👩💻🧑💻
👍26👎4😍2🔥1
⚡️ یه معیار مهم برای سنجش سایت ها Cumulative Layout Shift یا همون CLS هستش. حتما تا به حال خیلی اتفاق افتاده که یک وبسایت رو باز کردید و بعد چند ثانیه یهو یه عکس یا تبلیغات لود شده و کل layout "شیفت" شده به سمت پایین یا بالا. این قطعا تاثیر منفی روی تجربه کاربری داره ❌
✅ یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
لینک مقاله در web.dev 📝
🆔 @frontcode01 | 👩💻🧑💻
✅ یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
لینک مقاله در web.dev 📝
🆔 @frontcode01 | 👩💻🧑💻
👍8😍2❤1🔥1
🔺 یه پترن جالب برای اینکه تعداد if و else ها خیلی زیاد نشه. #JavaScript
پ.ن: در مورد پرفورمنس این پترن با افزایش تعداد آیتم های strategies خیلی صحبت میشه کرد...
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: در مورد پرفورمنس این پترن با افزایش تعداد آیتم های strategies خیلی صحبت میشه کرد...
🆔 @frontcode01 | 👩💻🧑💻
🔥7👍5😍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺 با پاس دادن یه فلگ از ترمینال برای باز کردن اپلیکیشن کروم، هر تب جدیدی که تو کروم باز میکنید اتوماتیک DevToolsش هم باز میشه
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍10🔥3😍2
⚡️ از تب Compatibility فایرفاکس ، میتونید ساپورت مرورگرها از کد #CSS ای که میزنید رو ببینید
◽️ پ.ن : این دیتا رو هم بر اساس جدول ساپورت MDN نشون میده
🆔 @frontcode01 | 👩💻🧑💻
◽️ پ.ن : این دیتا رو هم بر اساس جدول ساپورت MDN نشون میده
🆔 @frontcode01 | 👩💻🧑💻
🔥11👍5❤3😍1