🔺 با وبسایت caniuse.com حتما آشنا هستید که برای چک کردن پشتیبانی مرورگر ها از تکنولوژی های وب استفاده میشه. یه وبسایت مشابه هم هست caniemail.com که میتونید باهاش پشتیبانی ایمیل-کلاینت ها از تکنولوژی های وب رو چک کنید 😊

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️چیزی که راه حل اصلیش جاواسکریپت نیست، با جاواسکریپت انجام ندید!‌ نشون دادن متن انگلیسی با حروف بزرگ یکی از اون کاراست که دقیقا باید با CSS هندل بشه نه جاواسکریپت. با پراپرتی text-transform میتونید هر تکستی رو که میخواید capitalize کنید.

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ یه مقاله فوق العاده در مورد ساخت و مدیریت اپلیکیشن های "غول" جاواسکریپت 🔥

لینک مقاله مدیوم 📝

لینک ویدیو YouTube 📹

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️نکته CSS:

❌ یه مشکلی که تو خیلی از کدهای CSS میبینم اینه که برای فاصله انداختن بین آیتم های یک لیست، به همه آیتم ها یه مارجینی میدن، بعد چون آیتم آخر نیازی به فاصله نداره، مارجین اونو صفر میدن. این پترن جالبی نیست

✅ بجاش میتونید از سلکتور not داخل CSS استفاده کنید که نیازی هم به override کردن استایل ها نباشه. اینجوری میتونید مستقیم به همه آیتم ها "به جز" آیتم آخر یه مارجین بدید که نیازی هم به override کردن نباشه

پ.ن: سلکتور not خیلی کاربردهای دیگه هم داره. اینجا فقط یه موردشو بررسی کردم

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ خیلی وقتا میشه که یه چیزو ایمپورت میکنیم ولی استفاده نمیکنیم. در #VSCode میتونیم با Shift + Alt + O (در ویندوز و لینوکس) یا Shift + Option + O (در مک)، این ایمپورت های اضافی رو به طور خودکار حذف کنیم.

پ.ن: این دستور ترتیب ایمپورت‌ها رو هم مرتب میکنه

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با Web Share API میتونید مشابه اپ های نیتیو، منوی share رو باز کنید تا از اون طریق، کاربر قادر باشه لینک، تکست و فایل رو ارسال کنه

پ.ن: مرز بین وب اپ ها و اپ های نیتیو روز به روز داره باریک تر میشه 😍

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚛️ با هوک useWorker میتونید تسک های به شدت سنگین (مثل sort کردن یه آرایه با ۵ میلیون عضو رندوم!) که تو اپ #React انجام میدید رو بجای thread اصلی مرورگر، بفرستید به Web Worker تا جلوی رندر شدن UI رو نگیره

لینک گیتهاب این پکیج 🎉

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 با pseudo سلکتور placeholder-shown میتونید استایل #CSS رو فقط زمانی که placeholder اینپوت نمایش داده میشه اعمال کنید

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ از تب compatibility فایرفاکس ، میتونین ساپورت مرورگرها از کدهای #CSS که میزنید رو ببینید
✅ این دیتا رو هم بر اساس جدول ساپورت MDN نشون میده

🆔 @frontcode01 | 👩‍💻🧑‍💻

📌اگه تو پروژه وبتون عکسی دارید که پس زمینش transparent هستش و می‌خواید بهش سایه بدید به جای box-shodow از drop-shadow استفاده کنید تا اینطوری زیبا شه

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔺 یه مشکلی که با height:100vh داریم اینه که توی موبایل اسکرول میخوره و تمام ارتفاع صفحه مرورگر همراه آدرس بار (نه فاصله از آدرس بار تا انتهای صفحه) ولی با این تکنیک میشه حلش کرد 😇

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ یه مورد از مزیت هایی که CSS grid نسبت به فلکس باکس داشت این بود که یه پراپرتی grid-gap داشتیم که خیلی راحت باهاش فاصله بین آیتما رو تنظیم میکردیم منتها تو فلکس باکس باید مارجین داده میشد. الان با این پراپرتی جدید flex-gap میشه مشابه CSS grid فاصله انداخت بین آیتما 😍

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰اگر نیاز دارید از css variable درون جاوااسکریپت استفاده کنید
خیلی راحت میتونید از getComputedStyle() استفاده کنید

🆔 @frontcode01 | 👩‍💻🧑‍💻

✅ برای دسترسی و راحتی کاربران موبایل ، از type مخصوص برای input ها استفاده کنیم 👌

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰 کاربرد use در React 19

🆔 @frontcode01 | 👩‍💻🧑‍💻

دیس و دیس بک فرانت و بک 🚨

🆔 @frontcode01 | 👩‍💻🧑‍💻

⚡️ چندتا راه باحال برای اینکه falsy value ها رو از یک آرایه حذف کرد.

🆔 @frontcode01 | 👩‍💻🧑‍💻

📚 هروقت با خودتون گفتید که دیره برم چیز جدید یاد بگیرم
یه سر به چنل این خانومه بزنید.
اینجا داره ffmpeg رو معرفی میکنه با gui های مختلفش تو لینوکس 🔥

🆔 @frontcode01 | 👩‍💻🧑‍💻

🔰 نگاهی به نظرسنجی Stackoverflow 2024

◽️ تاپ ترین کشورها

USA , Germany , India

◽️ محبوب ترین زبان ها

JS , HTML/CSS , PY

◽️ محبوب ترین دیتابیس ها

PostgreSQL , MySQL , SQLite

◽️ محبوب ترین فریمورک و تکنولوژی

Node.js , React , Jquery , Next.js , Express

◽️ محبوب ترین ابزارها

Docker , Npm , Pip

◽️ محبوب ترین محیط های توسعه

Visual Studio Code , Visual Studio , IntelliJ IDEA

◽️ محبوب ترین ابزارهای AI

ChatGPT , GitHub Copilot , Google Gemini

◽️ بیشترین درآمد سالانه ( در حیطه وب )

Back-end : $67,227
Full-stack : $63,332
Front-end : $48,787

◽️ درصد خوشحالی و رضایت از شغل

Not Happy at Work : 32.1%
Complacent at Work : 47.7%
Happy at Work : 20.2%

📌 جزئیات بیشتر + نظرسنجی کامل

🆔 @frontcode01 | 👩‍💻🧑‍💻