𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
3 subscribers
223 photos
77 videos
6 files
351 links
Download Telegram
یه ترفند خفن و فوق‌العاده کاربردی در Tailwind CSS که شاید ندونی 🫵

ممکنه شما هم نیاز پیدا کنید که وقتی موس روی والد یک المان میره استایل های اون المان تغییر پیدا بکنه، توی تیلویند با استفاده از 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

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

واقعا keep it simple توی معماری و سیاست های shadcn به خوبی رعایت شده ...

شاید شما هم از خیلیا شنیده باشید که shadcn خیلی خوب و خفنه، ولی من ندیدم کسی بیاد به طور دقیق این مورد رو توضیح بده.
به زودی یه پست میزارم راجبش که ببینید چه ویژگی هایی وجود داره که انقدر shadcn رو نسبت به بقیه ui kit ها متمایز میکنه

#shadcn #tailwind #tips


یه جورایی میشه گفت shadcn تصمیم گرفت از محدودیت ها خارج بشه ؛)

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
سادگی رو با کد ضعیف اشتباه نگیرید 🚀

خیلی برنامه‌نویسا بین دو تا رویکرد گیر می‌کنن 🔻
➊ یه راه‌حل پیچیده و اُوِرمهندسی‌شده که شاید خیلی پیشرفته و خفن به نظر برسه، ولی نگهداری و توسعه‌ش سخت بشه.

➋ یه راه‌حل خیلی دم‌دستی و بی‌دقت که فقط برای "جواب دادن" ساخته شده، ولی تو طولانی‌مدت مشکل‌سازه.


حالا راه حل درست چیه ⁉️
شما همیشه باید دنبال سادگی هوشمندانه بسته به موقعیت باشید!


این یعنی کدی که ...
خوانا و قابل فهمه
نه فقط برای خودت، برای کل تیم

مینیماله ولی ناقص نیست
یعنی کارو درست انجام می‌ده، نه اینکه یه چیزی رو فدای سادگی کنیم

➌ قابل گسترشه بدون دردسر

اگه بعداً نیاز شد توسعه‌ش بدیم، مجبور نشیم کل سیستمو از نو بسازیم

وقتی که کد میزنی، این ۳ تا سوالو از خودت بپرس
➊ آیا این راه‌حل، بیش از حد پیچیدست بدون دلیل موجه؟

➋ آیا این سادگی باعث شده کیفیت یا پایداری سیستم کم بشه؟

➌ آیا کسی که بعد از من این کد رو می‌خونه، راحت متوجه می‌شه چی کار کردم؟


سادگی خوب، یعنی طراحی درست و تمیز، نه طراحی ضعیف

#programming #tips
5️⃣ اشتباه مرگبار برنامه‌نویس‌های تازه‌کار ‼️

1⃣ فقط کپی‌پیست بدون فهم!
وقتی یه کد رو از Stack Overflow یا GPT کپی می‌کنی بدون اینکه بفهمی چیه، مثل این میمونه که داری ساختمون رو روی شن می‌سازی!
به جاش --> دیباگ کن، لاگ بگیر، خط‌به‌خط بفهم چی داره می‌گذره.


2⃣ نمی‌دونی Git چیه و استفاده نمیکنی!
یه روز که پروژه‌ت نابود شد، تازه می‌فهمی Git مثل ماشین زمانه. ⌛️

به جاش --> در حداقلی ترین حالت ممکن git init، commit و checkout رو یاد بگیر.


3⃣ همه‌ چی تو یه فایله!
کل پروژه تو main.js؟ خب معلومه وقتی باگ می‌خوره، یا میخوای یه فیچر توسعه بدی کابوس می‌شه!

به جاش --> کدت رو ماژولار کن و تفکیک وظایف داشته باش.


4⃣ نمی‌نویسی، فقط می‌بینی!
دیدن ویدیو مساوی یاد گرفتن نیست. باید بنویسی، بسازی، خراب کنی، درست کنی تا واقعا یاد بگیری.

به جاش --> بعد هر آموزش یه تمرین واقعی برای خودت در نظر بگیر و دست به کد شو.


5⃣ نمی‌پرسی چون خجالت می‌کشی!
"نکنه سوالم مسخره باشه؟"، نه عزیزم، مسخره اونیه که اشتباه می‌کنه و نمی‌پرسه!

به جاش --> از انجمن‌ها، گیت‌هاب، چت‌جی‌پی‌تی و دوستات، بپرس و سریع جوابتو بگیر و وقت طلف نکن.


🗣️ برنامه‌نویسی مسیریه که با اشتباه رشد می‌کنی، اما اگه از اشتباهات بقیه درس بگیری، سریع‌تر پیشرفت می‌کنی.

#️⃣ #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
This media is not supported in your browser
VIEW IN TELEGRAM
این ویدیو جادی فوق‌العاده بود، حتما ببینید🤩🔥

#️⃣ #tips

🧑‍💻 @CoolyCode ⬅️
Please open Telegram to view this post
VIEW IN TELEGRAM
این یه حقیقت شیرینه : درواقع کدی که می‌نویسی آینه‌ی طرز فکرته!

احتمالا شماهم تجربه کردید وقتایی که ذهنتون شلوغه راه حلایی که پیدا میکنید برای حل مسئله خوب و بهینه نیست و طراحی تون به شدت افت میکنه توی کد

ولی در مقابلش وقتایی که ذهنتون آروم و شفاف بوده، کدتون ساده، تمیز و بسیار قابل فهم تر بوده

البته که تجربه و مهارت خود شخص خیلی مهمه و تاثیر مستقیم داره، ولی حتی کسایی که تجربه خیلی بالایی هم دارند زمانایی که ... ادامه پست

#️⃣ #tips #programming

🧑‍💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM