یه ترفند خفن و فوقالعاده کاربردی در Tailwind CSS که شاید ندونی 🫵
ممکنه شما هم نیاز پیدا کنید که وقتی موس روی والد یک المان میره استایل های اون المان تغییر پیدا بکنه، توی تیلویند با استفاده از group و group-hover این کار امکان پذیره ✅
حالا چجوری ⁉️
➖➖➖➖➖➖➖➖➖
ممکنه شما هم نیاز پیدا کنید که وقتی موس روی والد یک المان میره استایل های اون المان تغییر پیدا بکنه، توی تیلویند با استفاده از group و group-hover این کار امکان پذیره ✅
حالا چجوری ⁉️
<div class="group">
هاور کن ببین چی میشه!
<div class="opacity-0 group-hover:opacity-100 transition">
🎉 سورپرایز!
</div>
</div>
توی کد بالا وقتی موس روی div والد با کلاس group میره، div فرزند که به طور پیشفرض با opacity-0 مخفی شده، به آرامی توسط کلاس group-hover:opacity-100 نمایان میشه و محتویاتش رو نشون میده.
و برای برای ایجاد افکت نرم از transition استفاده کردیم که میتونید خودتون بیشتر راجبش بخونید. ( more )
#tips | #tricks | #tailwind
𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
➖➖➖➖➖➖➖➖➖
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
سلام رفقا، امیدوارم حالتون خوب باشه ✌️ همایش پارسال فرانتچپتر واقعا تجارب فوقالعاده ای رو برامون به جا گذاشت به همراه کلی دوستای خفن، که به شخصه خیلی خوشحالم از اشنایی باهاشون 🔥 ولاگش روهم ضبط کردیم که میتونید ببینید🔻 https://t.iss.one/coolycode/16 #event…
دوسداشتم این تجارب رو باهاتون به اشتراک بزارم تا دید بهتری بگیرن دوستانی که خیلی اطلاعی راجب ایونت های حضوری ندارن 👌
.
.
.
.
.
.
#tips
🚀 @coolycode
واقعا keep it simple توی معماری و سیاست های shadcn به خوبی رعایت شده ...
یه جورایی میشه گفت shadcn تصمیم گرفت از محدودیت ها خارج بشه ؛)
شاید شما هم از خیلیا شنیده باشید که shadcn خیلی خوب و خفنه، ولی من ندیدم کسی بیاد به طور دقیق این مورد رو توضیح بده.
به زودی یه پست میزارم راجبش که ببینید چه ویژگی هایی وجود داره که انقدر shadcn رو نسبت به بقیه ui kit ها متمایز میکنه
#shadcn #tailwind #tips
یه جورایی میشه گفت shadcn تصمیم گرفت از محدودیت ها خارج بشه ؛)
𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
سادگی رو با کد ضعیف اشتباه نگیرید 🚀
خیلی برنامهنویسا بین دو تا رویکرد گیر میکنن 🔻
حالا راه حل درست چیه ⁉️
این یعنی کدی که ...
وقتی که کد میزنی، این ۳ تا سوالو از خودت بپرس
سادگی خوب، یعنی طراحی درست و تمیز، نه طراحی ضعیف ✅
خیلی برنامهنویسا بین دو تا رویکرد گیر میکنن 🔻
➊ یه راهحل پیچیده و اُوِرمهندسیشده که شاید خیلی پیشرفته و خفن به نظر برسه، ولی نگهداری و توسعهش سخت بشه.
➋ یه راهحل خیلی دمدستی و بیدقت که فقط برای "جواب دادن" ساخته شده، ولی تو طولانیمدت مشکلسازه.
حالا راه حل درست چیه ⁉️
شما همیشه باید دنبال سادگی هوشمندانه بسته به موقعیت باشید!
این یعنی کدی که ...
➊ خوانا و قابل فهمه
نه فقط برای خودت، برای کل تیم
➋ مینیماله ولی ناقص نیست
یعنی کارو درست انجام میده، نه اینکه یه چیزی رو فدای سادگی کنیم
➌ قابل گسترشه بدون دردسر
اگه بعداً نیاز شد توسعهش بدیم، مجبور نشیم کل سیستمو از نو بسازیم
وقتی که کد میزنی، این ۳ تا سوالو از خودت بپرس
➊ آیا این راهحل، بیش از حد پیچیدست بدون دلیل موجه؟
➋ آیا این سادگی باعث شده کیفیت یا پایداری سیستم کم بشه؟
➌ آیا کسی که بعد از من این کد رو میخونه، راحت متوجه میشه چی کار کردم؟
سادگی خوب، یعنی طراحی درست و تمیز، نه طراحی ضعیف ✅
#programming #tips
وقتی یه کد رو از Stack Overflow یا GPT کپی میکنی بدون اینکه بفهمی چیه، مثل این میمونه که داری ساختمون رو روی شن میسازی!
به جاش --> دیباگ کن، لاگ بگیر، خطبهخط بفهم چی داره میگذره.
یه روز که پروژهت نابود شد، تازه میفهمی Git مثل ماشین زمانه.⌛️
به جاش --> در حداقلی ترین حالت ممکن git init، commit و checkout رو یاد بگیر.
کل پروژه تو main.js؟ خب معلومه وقتی باگ میخوره، یا میخوای یه فیچر توسعه بدی کابوس میشه!
به جاش --> کدت رو ماژولار کن و تفکیک وظایف داشته باش.
دیدن ویدیو مساوی یاد گرفتن نیست. باید بنویسی، بسازی، خراب کنی، درست کنی تا واقعا یاد بگیری.
به جاش --> بعد هر آموزش یه تمرین واقعی برای خودت در نظر بگیر و دست به کد شو.
"نکنه سوالم مسخره باشه؟"، نه عزیزم، مسخره اونیه که اشتباه میکنه و نمیپرسه!
به جاش --> از انجمنها، گیتهاب، چتجیپیتی و دوستات، بپرس و سریع جوابتو بگیر و وقت طلف نکن.
#️⃣ #programming #tips
🧑💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM
مهم ترین تفاوت بین برنامهنویس حرفهای و مبتدی، "طرز فکرشه" 🥶
وقتی باگ میخوری دو واکنش وجود داره
یه برنامه نویس خوب ...👨💻
چطوری این ذهنیت رو باید بسازیم❓
🗣️ یه برنامهنویس حرفهای، مثل یه معمار فکر میکنه، نه مثل یه بنّا. بهترین برنامهنویسها، کمتر کد میزنن و بهتر فکر میکنن.
برنامه نویسای حرفه ای "قبل از کدنویسی" فکر میکنن.✅
وقتی باگ میخوری دو واکنش وجود داره
مبتدی: سریع میپره توی کد --> کجاشُ اشتباه نوشتم؟
حرفهای: یک قدم عقب میره --> فرضیاتم چی بودن؟ کدومش ممکنه غلط باشه؟
یه برنامه نویس خوب ...
➊ اول مسئله رو دقیق تحلیل میکنه
➋ ابزار مناسب رو انتخاب میکنه
➌ با کمترین و بهینهترین کد، بهترین راهحل رو میسازه
چطوری این ذهنیت رو باید بسازیم
➊ قبل از کدنویسی، بنویس دقیقاً چی میخوای بسازی
➋ سادهترین حالت مسئله رو اول حل کن
➌ همیشه از خودت بپرس: راه بهتری نیست؟
#️⃣ #programming #tips
🧑💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM
هروقت فایل کدت از ۴۰۰ - ۵۰۰ خط بیشتر شد اسمشو بذار problem.js 😰
وقتی فایل های پروژه بیش از حد معمول بزرگ میشن نگهداری کد به شدت سخت میشه و مقیاس پذیری کاهش پیدا میکنه و همین مسئله باعث میشه که پروژه از نظر نرم افزاری در آینده نزدیک یا دور دچار بهران بشه.
دقیقا چه مشکلاتی ایجاد میکنه ؟❌
حالا باید چیکار کنیم ؟✅
⏲️ هر فایل فقط یک کار انجام بده
🤏 توابع و متد های کوچک تر
📄 اجتناب کردن از کد تکراری
🧹 نامگذاری شفاف
🔵 جداکردن استایل/رابط کاربری از منطق
🔁 ساختار ماژولار و قابل توسعه
🗣️ فایل کوچک و مرتب = ذهن آرومتر = باگ کمتر
وقتی فایل های پروژه بیش از حد معمول بزرگ میشن نگهداری کد به شدت سخت میشه و مقیاس پذیری کاهش پیدا میکنه و همین مسئله باعث میشه که پروژه از نظر نرم افزاری در آینده نزدیک یا دور دچار بهران بشه.
دقیقا چه مشکلاتی ایجاد میکنه ؟
1⃣ با یک تغییر، همه چیز خراب میشه
2⃣ پیدا کردن یه تیکه کد خاص سخت میشه
3⃣ اسمها گیجکننده میشن
4⃣ نوشتن تست سخت تر میشه
5⃣ خوندن کدا خسته کننده میشه
حالا باید چیکار کنیم ؟
تا حدی که ممکنه فایلها فقط یه مسئولیت داشته باشن (مثلاً فقط کار با دیتا یا فقط نمایش)، بسته به استراکچر پروژتون.
کدارو به بخش های کوچک تر تقسیم کن تا هر بخش کوتاه و قابل فهم باشه و البته که فقط یک کار انجام بده، اصل single responsibility.❕
کدهای تکراری یا همون ( duplicate code ) به شدت مضره و جدایی از افزایش حجم پروژه میتونه مشکلات بزرگی درست کنه، پس کد های تکراریرو توی فایل های جدا بذار و همه جای پروژه ازشون استفاده کن.
اسم فایل ها و توابع باید دقیق و گویا باشن که بدون بازکردن کد بفهمی قراره چی کار بکنن پس حتما جدی بگیر و اسم های خوب انتخاب کن براشون چون توی مقیاس بالا خیلی کمک میکنه به سرعت و کیفیت توسعه.
رابط کاربری و استایلها رو سعی کنید جدا نگه دارید از منطق بیزنس، چیزی که تو انگولار به خوبی شاهدش هستیم.
کدتون رو طوری بنویسید که به راحتی بشه بخش جدیدی رو اضافه یا کم کرد بدون اینکه همه چیز بهم بریزه و هر جای پروژه یه مشکل به وجود بیاد.
#️⃣ #programming #tips
🧑💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM
هیچوقت به AI نگو بهت ماهی رو بده تا ماهی گیری رو بلد نیستی ... ‼️
🔵 اول ازش درخواست کن که ماهی گیری رو کامل و با جزئیات بهت یاد بده
🔵 بعد که ماهی گیری رو یاد گرفتی اشکال نداره ماهی ام برات بگیره
🔵 ولی تو شروع مهمه که عمیق ماهی گیری رو یاد بگیری!
#tips
🧑💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
این یه حقیقت شیرینه : درواقع کدی که مینویسی آینهی طرز فکرته!
احتمالا شماهم تجربه کردید وقتایی که ذهنتون شلوغه راه حلایی که پیدا میکنید برای حل مسئله خوب و بهینه نیست و طراحی تون به شدت افت میکنه توی کد
ولی در مقابلش وقتایی که ذهنتون آروم و شفاف بوده، کدتون ساده، تمیز و بسیار قابل فهم تر بوده
البته که تجربه و مهارت خود شخص خیلی مهمه و تاثیر مستقیم داره، ولی حتی کسایی که تجربه خیلی بالایی هم دارند زمانایی که ... ادامه پست
احتمالا شماهم تجربه کردید وقتایی که ذهنتون شلوغه راه حلایی که پیدا میکنید برای حل مسئله خوب و بهینه نیست و طراحی تون به شدت افت میکنه توی کد
ولی در مقابلش وقتایی که ذهنتون آروم و شفاف بوده، کدتون ساده، تمیز و بسیار قابل فهم تر بوده
البته که تجربه و مهارت خود شخص خیلی مهمه و تاثیر مستقیم داره، ولی حتی کسایی که تجربه خیلی بالایی هم دارند زمانایی که ... ادامه پست
#️⃣ #tips #programming
🧑💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM