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 | 👩💻🧑💻
👍24🔥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 | 👩💻🧑💻
👍25👎4😍2🔥1
⚡️ یه معیار مهم برای سنجش سایت ها Cumulative Layout Shift یا همون CLS هستش. حتما تا به حال خیلی اتفاق افتاده که یک وبسایت رو باز کردید و بعد چند ثانیه یهو یه عکس یا تبلیغات لود شده و کل layout "شیفت" شده به سمت پایین یا بالا. این قطعا تاثیر منفی روی تجربه کاربری داره ❌
✅ یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
لینک مقاله در web.dev 📝
🆔 @frontcode01 | 👩💻🧑💻
✅ یه سری ابزار ها هستن که میان کل مقادیری که صفحه به خاطرشون شیفت میشه رو جمع میکنن و یه عدد به شما میدن. هرچقدر این عدد کوچک تر باشه بهتره و این یعنی وبسایت شما stable تره.
در مقاله ای که پایین تر لینک داده شده میتونید یه سری دلایل که CLS سایت میره بالا رو همراه با راه حل ها مطالعه کنید 😊
لینک مقاله در web.dev 📝
🆔 @frontcode01 | 👩💻🧑💻
👍7😍2❤1🔥1
🔺 یه پترن جالب برای اینکه تعداد if و else ها خیلی زیاد نشه. #JavaScript
پ.ن: در مورد پرفورمنس این پترن با افزایش تعداد آیتم های strategies خیلی صحبت میشه کرد...
🆔 @frontcode01 | 👩💻🧑💻
پ.ن: در مورد پرفورمنس این پترن با افزایش تعداد آیتم های strategies خیلی صحبت میشه کرد...
🆔 @frontcode01 | 👩💻🧑💻
🔥6👍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👍4❤2😍1
✅ تا حالا به این فکر کردی که چطور میشه فقط با ۶ رقم اول شماره کارت، بانک صادرکننده رو پیدا کرد؟
بهش می‌گن Bank Identification Number (BIN) و اینجا با یه آبجکت ساده و یه slice خوشگل، بانک رو تشخیص دادیم
🚨 با همین قطعه کد میتونید 21 بانک صادر کننده کارت بانکی رو تشخصی بدید
🆔 @frontcode01 | 👩💻🧑💻
بهش می‌گن Bank Identification Number (BIN) و اینجا با یه آبجکت ساده و یه slice خوشگل، بانک رو تشخیص دادیم
🚨 با همین قطعه کد میتونید 21 بانک صادر کننده کارت بانکی رو تشخصی بدید
🆔 @frontcode01 | 👩💻🧑💻
👍26😍5❤3🔥2
🎁 با آی‌پی آمریکا وارد لینک زیر بشید و با زدن Get student offer سیزده ماه اشتراک Gemini Pro و همچنین ۲ ترابایت فضای گوگل وان بگیرید.
https://one.google.com/join/ai-student
پ‌ن: اگه رو اکانت اصلیتون کار نکرد با اکانت جدید امتحان کنید.
🆔 @frontcode01 | 👩💻🧑💻
https://one.google.com/join/ai-student
پ‌ن: اگه رو اکانت اصلیتون کار نکرد با اکانت جدید امتحان کنید.
🆔 @frontcode01 | 👩💻🧑💻
👍3🔥3❤1🤣1
✅ چند دستور کاربردی ولی کمتر استفاده شده گیت
1- git reflog
2- git cherry-pick
3- git bisect
4- git reset —soft
5- git clean -f
6- git log --oneline --graph
7- git rebase -i
🆔 @frontcode01 | 👩💻🧑💻
1- git reflog
ریکاوری برنچ‌ها و کامیت‌های حذف شده
2- git cherry-pick
اعمال یک کامیت خاص از برنچ دیگر روی برنچ فعلی
3- git bisect
یافتن کامیت خراب با کمک جستجوی باینری
4- git reset —soft
برای undo کردن کامیت با حفظ تغغیرات Stage
5- git clean -f
پاک کردن فایل‌های ناخواسته یا غیرردیابی شده (untracked files)
6- git log --oneline --graph
نمایش تمیز و مرتب هیستوری
7- git rebase -i
بازنویسی تاریخچه کامیت‌ها به صورت تعاملی
🆔 @frontcode01 | 👩💻🧑💻
🔥14❤5👍2😍1
💊 یکی از اشیاء کمتر شناخته‌شده در جاوااسکریپت، شیء Intl هستش این شیء برای بین‌المللی‌سازی داده‌ها مانند تاریخ، زمان، اعداد و ارز استفاده میشه
🔺 با Intl، میتونیم داده‌ها را براساس تنظیمات محلی خاص (مانند زبان، واحد پول، تقویم و...) فرمت کنیم.
🔻 داکیومنت MDN
🆔 @frontcode01 | 👩💻🧑💻
🔺 با Intl، میتونیم داده‌ها را براساس تنظیمات محلی خاص (مانند زبان، واحد پول، تقویم و...) فرمت کنیم.
🔻 داکیومنت MDN
🆔 @frontcode01 | 👩💻🧑💻
👍18❤6🔥4😍2