چطوری حالت تاریک (Dark Mode) را در Tailwind CSS فعال کنیم؟

امروزه Dark Mode به یکی از ویژگی‌های پرطرفدار و پرکاربرد در طراحی وبسایت‌ها و اپلیکیشن‌ها تبدیل شده است. این حالت نه تنها تجربه کاربر را برای استفاده از برنامه بهبود میبخشد، بلکه باعث میشه که چشم‌های کاربر موقع مطالعه مقالات یا استفاده از وبسایت اذیت نشود. اما چطوری می‌توانیم این ویژگی را در برنامه یا وبسایت خود پیاده سازی کنیم؟

در این مقاله، به صورت کامل به شما نحوه فعال‌سازی Dark Mode در Tailwind CSS را آموزش دادم. از نحوه فعال‌سازی آن با استفاده از کلاس‌های Tailwind تا نکات کلیدی در سفارشی‌سازی رنگ‌ها و تطابق آن با طراحی پروژه‌های شما.

چرا باید از Dark Mode در پروژه‌های خود استفاده کنیم؟
+ بهبود تجربه کاربری
+ کاهش مصرف انرژی در دستگاه‌های OLED
+ جذب کاربرهای جدید با ارائه گزینه‌هایی برای شخصی‌سازی

برای مطالعه مقاله و روش فعالسازی Dark Mode در Tailwind CSS، وارد لینک زیر شوید و سپس مقاله را مطالعه کنید.

لینک مقاله

@DevTwitter | <Alireza Tahriri Masule/>

نسخه ۱۹ کتابخانه React به صورت پایدار منتشر شده. به نظرم یکی از ویژگی‌های مهم نسخه ۱۹ این هست که کدهایی که با نسخه‌های قبل توسعه دادیم بدون مشکل کار می‌کنن و یک سری امکانات جدید می‌تونیم برای پروژه‌هامون داشته باشیم.

بررسی امکانات نسخه ۱۹:
https://www.youtube.com/watch?v=-pwzlPmeJYM

دوره فشرده آموزش React 19:
https://www.youtube.com/watch?v=Sl6zoQ4WHpA

@DevTwitter | <Masood Sadri/>

کدام ابزار مسیر‌یابی بهتری دارد؟: React Router یا Next.js
من اخیرا به این راز پی بردم توام با من همراه شو
این پست رو حتما ببین و نظرتو بهم بگو.
لینک پست

@DevTwitter | <Samane Zarini/>

مقایسه‌ی حالت های تعریف متغیر در جاوااسکریپت
@DevTwitter

ری‌اکت نسخه ۱۹ در تاریخ ۵ دسامبر ۲۰۲۴ منتشر شد و ویژگی‌های جدیدی را معرفی کرد که تجربه توسعه‌دهندگان را بهبود می‌بخشد. در ادامه، به مرور این ویژگی‌ها می‌پردازیم:
۱. اکشن‌ها (Actions): اکشن‌ها امکان استفاده از توابع ناهمگام در انتقال‌ها را فراهم می‌کنند و به‌صورت خودکار مدیریت حالت‌های در حال انتظار، خطاها، فرم‌ها و به‌روزرسانی‌های خوش‌بینانه را انجام می‌دهند. این ویژگی فرآیندهایی مانند ارسال فرم‌ها و به‌روزرسانی داده‌ها را ساده‌تر می‌کند.
۲. کامپوننت‌های سرور (Server Components): این کامپوننت‌ها امکان رندر کردن بخش‌هایی از رابط کاربری در سمت سرور را فراهم می‌کنند و تنها کدهای ضروری را به کلاینت ارسال می‌کنند. این رویکرد باعث بهبود عملکرد و کاهش حجم داده‌های ارسالی به کاربر می‌شود.
۳. بهبودهای Suspense: ویژگی Suspense در این نسخه بهبود یافته و امکان مدیریت بهتر واکشی داده‌های ناهمگام را فراهم می‌کند. این بهبودها تجربه کاربری روان‌تری را ارائه می‌دهند.
۴. بخش API جدید: useOptimistic: هوک جدید useOptimistic به توسعه‌دهندگان امکان می‌دهد تا به‌روزرسانی‌های خوش‌بینانه را مدیریت کنند و بازخورد فوری به کاربران ارائه دهند.
۵. بخش API جدید: use: هوک use به شما اجازه می‌دهد منابع را در حین رندر بخوانید، مانند خواندن یک Promise با استفاده از این هوک.
۶. بهبودهای فرم: در این نسخه، المنت‌های <form> از ارسال توابع به props‌های action و formAction پشتیبانی می‌کنند. این ویژگی‌ها به‌صورت پیش‌فرض از اکشن‌ها استفاده کرده و پس از ارسال، فرم را به‌صورت خودکار بازنشانی می‌کنند.
این ویژگی‌ها و بهبودها در ری‌اکت ۱۹ به توسعه‌دهندگان کمک می‌کنند تا برنامه‌های کارآمدتر و با تجربه کاربری بهتری ایجاد کنند.

@DevTwitter | <Mohsen Salehi/>

توضیح Cache::flexible در لاراول به زبان ساده

لینک مقاله

@DevTwitter | <Reza Annabestani/>

هیچ وقت فکر کردید این دوتا علامت گومبولی کنار ورژن دیپندنسی‌ها چین؟؟

علامت Caret (^)
به اپ اجازه‌ی دریافت خودکار آپدیت ها برای نسخه‌های minor و patch رو میده
برای مثال react میتونه به نسخه‌ی 18.3.2 یا 18.4.0 آپدیت بشه، اما به نسخه‌ی 19.0.0 نمیتونه

علامت Tilde (~):
این یکی‌‌ یکم سختگیرانه‌تره
فقط اجازه‌ی آپدیت نسخه‌های patch رو داره
برای مثال react-dom میتونه به نسخه‌ی 18.3.2 آپدیت بشه ولی به نسخه‌ی 18.4.0 نمیتونه

@DevTwitter

گوگل یه نسخه‌ آزمایشی از Gemini رو منتشر کرده که نتایج عجیبی گرفته، اسمش gemini-exp-1206 هست، احتمالا بعدا تو سایتش داشته باشیم ولی نسخه آزمایشی رو پایین میگم چجوری تست کنید.

@DevTwitter | <Soroush Ahmadi/>

چرا Composite Index می‌تونه کارمون رو راحت‌تر کنه؟
فرض کنید یه جدول users داریم که دو تا ستون مهم داره:
(تاریخ ثبت‌نام کاربر) signup_date
(شهر محل سکونت کاربر) city
حالا می‌خوایم این کوئری رو اجرا کنیم:
"همه کاربرهایی که بعد از یه تاریخ خاص ثبت‌نام کردن و تو شهر تهران هستن رو پیدا کن."

اگر فقط روی signup_date ایندکس داشته باشیم:
خب MySQL اول میره تو ستون مرتب‌شده تاریخ، مثلاً 1000 تا کاربر که شرط تاریخ رو دارن پیدا می‌کنه.
بعدش مجبور میشه تو این 1000 تا رکورد، دونه‌دونه بررسی کنه با پیچیدگی زمانی (o n) که کدوم کاربر تو تهران زندگی می‌کنه. این مرحله می‌تونه کند باشه، مخصوصاً اگه تعداد رکوردها زیاد باشه.

اگر از Composite Index استفاده کنیم:
به‌جای اینکه یه ایندکس جدا روی هر ستون داشته باشیم، می‌تونیم یه ایندکس ترکیبی روی signup_date و city تعریف کنیم. اینجوری:
و MySQL هم‌زمان شرط تاریخ و شهر رو بررسی می‌کنه و فقط اون رکوردهایی که هر دو شرط رو دارن پیدا می‌کنه. سرعت کوئری کلی بهتر میشه.

وقتی این ایندکس رو تعریف می‌کنیم، مای اس کیو ال MySQL برای این ستون‌ها یه جدول مرتب‌شده ایجاد می‌کنه و موقع کوئری زدن خیلی سریع نتیجه رو برمی‌گردونه. ولی باید حواسمون باشه که تعریف بیش از حد ایندکس‌ها می‌تونه هزینه آپدیت جدول رو بالا ببره.
و تو کمپوزیت ایندکس ها همیشه از چپ به راست خونده میشه ایندکس هامون تو شرطهامون هم باید این ترتیب رو رعایت کنیم.

@DevTwitter | <Saber Qadimi/>

توی مک اگر‌دوست‌ دارید مصرف منابع رو ببینید این ابزار رایگان خوبه:
https://github.com/exelban/stats

@DevTwitter | <マシュー/>

وقتش رسیده بود یک پروژه جدید push کنم روی گیت‌هابم
یک Notebook نوشتم با پایتون / PyQt5 / CSS که خودم خیلی خوشم اومده
قراره قابلیت های جدید تر هم اضافه کنم بهش، سورس کد و توضیحات کد کامل در اختیارتونه توی ریپازیتوری، اگرم قابل بود Star کنید

@DevTwitter | <Misagh Momeni Bashusqeh/>

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

@DevTwitter | <imun/>

دوستانی که از bolt.new خوشتون اومده پیشنهاد می‌کنم این ریپو هم تست کنید. بصورت رایگان روی لوکال خودتون اجرا می‌شه و می‌تونید هم از Ollama استفاده کنید و هم به api مدل‌های دیگه وصلش کنید.
https://github.com/coleam00/bolt.new-any-llm

@DevTwitter | <Ehsan Maleki/>

#کوته_نیوز

رفع فیلترینگ فعلا سرش گرده

@DevTwitter

شرکت اوراکل روی Cloud خودش بهتون VPS رایگان میده (با منابع محدود البته) به صورت مادام العمر
سرعت 500 مگابیت
هارد 40 گیگابایت
1 گیگ رم
و 2 هسته سی پی یو
برای تست و پابلیش وب اپلیکیشن سبک خوبه
به واسطه KYC هم جای Abuse نداره و کارت های الکترون رو ریجکت میکنه

@DevTwitter </dev/nvram/>

اگه بچه کوچک از ۷-۸ سال به بالا دارید حتما این ۲تا مهارت را بهشون یاد بدید البته اگه علاقه دارند.
۱- کار کردن با میکروکنترولر مثل Arduino و Raspberry Pi و درست کردن پروژه های جالب و خلاقانه! اینقدر هم وب سایت و ویدیو هست که نهایت نداره. این یک مثال:
https://www.amazon.co.uk/dp/B0CFY1F1KH?linkId=c9f723e255cf4cf859efb6219d98b2ec
۲- بازی درست کردن (game development). اگه سنشون کمتره از Scratch که حالت lego طور داره و بیشتر no code هست میتونن استفاده کنن. و بعد از ابزارهای پیشرفته تر مثل Godot و unity و چیزهای دیگه.
الان دیگه با AI خیلی هم راحت تر میتونن یادبگیرن. توی عصر الان این خلاقیت و مهارت حل مسأله از قبل هم مهمتر شده.
https://godotengine.org

@DevTwitter <Mehdi Allahyari/>

#کوته_نیوز

ایتا قطع شده و خراب کرده همه چیزو خودش

@DevTwitter

یه رپو گیت هاب، دوتا عکس بش میدی، فریم اول و فریم آخر و اون برات فریم های وسط رو میسازه

https://github.com/Doubiiu/ToonCrafter

@DevTwitter | <Behnam Ebrahimi/>

هر کامندی که برای کانفیگ و کار با شبکه در لینوکس نیاز دارید توی این چیت شیت اومده.

@DevTwitter | <Reza/>