🔻 با اتریبیوت download که Html 5 معرفی کرد ، میتونیم نام فایل های دانلود رو کاستومایز کنیم 🔥
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍26❤2🔥2
⚡️ یه چیز جالب وجود داره و اینه که میشه از ایموجی ها به عنوان سلکتور CSS استفاده کرد :)
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
😍19🤣13👍7🔥5❤3
⚡️ هر وقت ما یک async کنار یک فانکشن بگذاریم، شاید اون فانکشن کلی پرامیس را در درون خودش هندل کند، ولی در انتها خودش هم یک پرامیس است و ترتیب متفاوتی نسبت به فانکشن های عادی در callstack و callback queue خواهد داشت.
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍20🔥2❤1
🚀 عکسایی که با جاواسکریپت(مثلا به شکل کامپوننت های React) لود میشن، کمی دیرتر تشخیص داده میشن واسه همین زمان لودشون میره بالا. میتونید با لینک preload، عکس‌ها رو preload کنید تا عملا سریعتر لود بشن
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍15🔥6
🔺 میدونستید تو اینپوت با تایپ number میتونید حرف "e" رو تایپ کنید؟ مخفف exponent و نشون دهنده توان عدد هستش!
✍️ پ.ن: ماشین حسابا هم اعداد بزرگ رو این مدلی نشون میدن
🆔 @frontcode01 | 👩💻🧑💻
✍️ پ.ن: ماشین حسابا هم اعداد بزرگ رو این مدلی نشون میدن
🆔 @frontcode01 | 👩💻🧑💻
👍21🤣5❤2🔥2
⚡️ این کدی که تو تصویر می‌بینید جاواسکریپته! میتونید با این سینتکس برای لوپ‌هاتون label(تیتر) مشخص کنید و کاربردشم موقع break کردن هستش که میتونید تعیین کنید که از کدوم لوپ(ها) خارج بشه.
پ.ن: اگر کسی این کدو بهم نشون میداد و میگفت جاواسکریپته، میگفتم مشکل سینتکس داره. واقعا ۱ درصد هم فکر نمیکردم همچین سینتکسی داشته باشیم... واقعا چیزی نمیدونیم 🤷🏻♂️
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: اگر کسی این کدو بهم نشون میداد و میگفت جاواسکریپته، میگفتم مشکل سینتکس داره. واقعا ۱ درصد هم فکر نمیکردم همچین سینتکسی داشته باشیم... واقعا چیزی نمیدونیم 🤷🏻♂️
🆔 @frontcode01 | 👩💻🧑💻
👍28🔥6❤2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
🔺 میدونستید برای کامیت کردن میتونید از فلگ m چندبار استفاده کنید تا به کامیتتون پاراگراف اضافه کنید؟ :)
🆔 @frontcode01 | 👩💻🧑💻
🆔 @frontcode01 | 👩💻🧑💻
👍21❤3🔥2😍1
⚡️ ۴ نکته مفید 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