یه مسئله‌ای که تو CSS وجود داره بحث اولویت هاست
داخل فایل css ما میایم چند خط CSS مینویسم
بعد ما میایم این کلاس هارو داخل html element هایی که داریم استفاده میکنیم
و الان ما یه دکمه رو صفحه داریم که رنگ پس زمینه‌ش قرمز هستش
حالا اگر من اومدم همزمان هم کلاس bg-blue هم bg-red و دادم به button چی میشه؟
ممکنه بگید خب چون bg-blue بعد از bg-red تو class قرار گرفته پس باید رنگ پس زمینه آبی بشه!
- که اشتباهه
تو قطعه کد CSS بالا چون کلاس red بعد از blue تعریف شده پس اولویت بالاتری داره و اگر همزمان رو یه المان ما این ۲ تا کلاس و بزاریم red برنده میشه
جابه‌جا کردن لیست class ها تو element ها خروجی کامپوننتمون تغییر نمیکنه
پس این ۲ تا قطعه کد خروجی یکسان دارن
حالا اگر ما یه پکیجی مثل tailwind و استفاده کنیم که هزاران هزار class مختلف داره از کجا باید بدونیم که کدوم class اولویتش از اون یکی بیشتره، بعد اصلا اینو بدونیم چه طوری میتونیم کامپوننت هایی بنویسیم که استایل هایی که دارن override بشن؟
اینجاست که tailwind-merge به کمکمون میاد
https://github.com/dcastil/tailwind-merge
این پکیج چه طوری کمکمون میکنه؟ فرض کنید bg-red و bg-blue کلاس های tailwind هستن و با همون اولویت قبلی که بالاتر داشتیم تعریف شدن
ما اگر بیایم این کلاس هارو به تابع tw-merge بدیم،اون class که دیرتر تو رشته class تعریف شده میاد class های قبلی که همون property و تغییر میدن (مثلا background) و پاک میکنه اینطوری دیگه ما مشکل و حل میکنیم!
@react_ir
داخل فایل css ما میایم چند خط CSS مینویسم
. bg-blue {
background: blue;
}
.bg-red {
background: red;
}
بعد ما میایم این کلاس هارو داخل html element هایی که داریم استفاده میکنیم
<button class=“bg-red” />
و الان ما یه دکمه رو صفحه داریم که رنگ پس زمینه‌ش قرمز هستش
حالا اگر من اومدم همزمان هم کلاس bg-blue هم bg-red و دادم به button چی میشه؟
<button class=“bg-red bg-blue” />
ممکنه بگید خب چون bg-blue بعد از bg-red تو class قرار گرفته پس باید رنگ پس زمینه آبی بشه!
- که اشتباهه
تو قطعه کد CSS بالا چون کلاس red بعد از blue تعریف شده پس اولویت بالاتری داره و اگر همزمان رو یه المان ما این ۲ تا کلاس و بزاریم red برنده میشه
جابه‌جا کردن لیست class ها تو element ها خروجی کامپوننتمون تغییر نمیکنه
پس این ۲ تا قطعه کد خروجی یکسان دارن
<button class=“bg-red bg-blue” />
<button class=“bg-blue bg-red” />
حالا اگر ما یه پکیجی مثل tailwind و استفاده کنیم که هزاران هزار class مختلف داره از کجا باید بدونیم که کدوم class اولویتش از اون یکی بیشتره، بعد اصلا اینو بدونیم چه طوری میتونیم کامپوننت هایی بنویسیم که استایل هایی که دارن override بشن؟
اینجاست که tailwind-merge به کمکمون میاد
https://github.com/dcastil/tailwind-merge
این پکیج چه طوری کمکمون میکنه؟ فرض کنید bg-red و bg-blue کلاس های tailwind هستن و با همون اولویت قبلی که بالاتر داشتیم تعریف شدن
ما اگر بیایم این کلاس هارو به تابع tw-merge بدیم،اون class که دیرتر تو رشته class تعریف شده میاد class های قبلی که همون property و تغییر میدن (مثلا background) و پاک میکنه اینطوری دیگه ما مشکل و حل میکنیم!
import { twMerge } from 'tailwind-merge'
twMerge(‘bg-red bg-blue’)
// → ‘bg-blue’
twMerge(‘bg-blue bg-red’)
// → ‘bg-red’
@react_ir
GitHub
GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts
Merge Tailwind CSS classes without style conflicts - dcastil/tailwind-merge
چند روز پیش یکی از بچه ها یه مشکلی با nextjs و SWC تو ویندوز داشت
من بهش پیشنهاد کردم WSL و رو ویندوزش فعال کنه و از طریق اون nextjs و اجرا کنه
علاوه بر اینکه مشکلش حل شده شده بود، سرعت بیلد و اجرای دستورات nodejs خیلی بیشتر شده بود (حدود ۵۰% بیشتر)
حتما یه نگاهی به WSL تو ویندوز ۱۰ و ۱۱ بندازیت و فعالش کنید که کلی سرعتتونو بیشتر میکنه
@react_ir
من بهش پیشنهاد کردم WSL و رو ویندوزش فعال کنه و از طریق اون nextjs و اجرا کنه
علاوه بر اینکه مشکلش حل شده شده بود، سرعت بیلد و اجرای دستورات nodejs خیلی بیشتر شده بود (حدود ۵۰% بیشتر)
حتما یه نگاهی به WSL تو ویندوز ۱۰ و ۱۱ بندازیت و فعالش کنید که کلی سرعتتونو بیشتر میکنه
@react_ir
اگر خواستید به کسی لینک بدید که فقط یه قسمتی از ویدیو رو ببینه یا خودتون میخواستید یه قسمتی رو دوباره ببینید
فقط کافیه عنوان موضوع رو از قسمت Chapters پیدا کنید و روش کلیک کنید و ویدیو از اون قسمت پخش میشه 🔥🔥🔥
@react_ir | react.ir
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
بعد از ظهر کانال یوتیوبو چک کنید یکی از خفنترین و بهترین ویدیوهایی که تاحالا تونستم بسازم و اماده کردم
کلی نکته و اطلاعات به درد بخور داخلش هستش و قراره از ماتریکس خارج بشید
پیشنهاد میکنم تا اون موقع یکم درباره الگوریتم memoization بخونید، چند وقت پیش یه مقاله بلند و بالا درباره memoization و هوک های useCallback/useMemo نوشته بودم که لینکشو اینجا میزارم
https://react.ir/p/memo
@react_ir | react.ir
کلی نکته و اطلاعات به درد بخور داخلش هستش و قراره از ماتریکس خارج بشید
پیشنهاد میکنم تا اون موقع یکم درباره الگوریتم memoization بخونید، چند وقت پیش یه مقاله بلند و بالا درباره memoization و هوک های useCallback/useMemo نوشته بودم که لینکشو اینجا میزارم
https://react.ir/p/memo
@react_ir | react.ir
ریاکت
الگوریتم Memoization | ریاکت
با استفاده از تابع memo و هوک های useMemo و useCallback ما پرفورمنس برنامه های ری‌اکتمون رو بالا میبریم و کمک میکنیم که کاربرار های برنامه های ما بهترین تجربه ممکنه و داشته باشن
نظرتون چیه بعد از ظهر ساعت ۵ لایو بزارم (داخل یوتیوب) ؟
میخوام یه اپ نکست و با گیت هاب اکشن بیلد کنم، پوش کنم تو رجیستری، از اونور رو VPS که coolify داره بگیرمش و دیپلویش کنم
خودمم نمیدونم دقیق چیکار باید کنم، کلی فکر کردن و سوتی دادن قراره داشته باشه
کنارش پرسش و پاسخ میتونیم هم داشته باشیم
میخوام یه اپ نکست و با گیت هاب اکشن بیلد کنم، پوش کنم تو رجیستری، از اونور رو VPS که coolify داره بگیرمش و دیپلویش کنم
خودمم نمیدونم دقیق چیکار باید کنم، کلی فکر کردن و سوتی دادن قراره داشته باشه
کنارش پرسش و پاسخ میتونیم هم داشته باشیم
https://cutejson.dev/
این اپ بالاخره دیپلوی شد، میتونید تست کنید و لذت ببرید
کارش اینکه به شما JSON Server میده که خیلی راحت بتونید ازش استفاده کنید برای پروژه هایی تمرینی که دارید توسعه میدید
سورس پروژه به صورت open source روی گیتهاب قرار داره
یکی از بچه‌های با استعداد community خودمون توسعه دادتش
اگر خوشتون اومد میتونید بهشstar ⭐️ بدید
@react_ir
این اپ بالاخره دیپلوی شد، میتونید تست کنید و لذت ببرید
کارش اینکه به شما JSON Server میده که خیلی راحت بتونید ازش استفاده کنید برای پروژه هایی تمرینی که دارید توسعه میدید
سورس پروژه به صورت open source روی گیتهاب قرار داره
یکی از بچه‌های با استعداد community خودمون توسعه دادتش
اگر خوشتون اومد میتونید بهشstar ⭐️ بدید
@react_ir
cutejson.dev
Cute JSON - Automated API Generation & JSON Editing
Cute JSON offers automated API generation from JSON keys, fake data creation, and an integrated online JSON editor. Create, test, and manage your APIs effortlessly.