یادتونه نسخه اول این اپ رو کاملاً ساده زدم تا فقط منطق برنامه و API درست کار کنه؟ حالا وقتش بود که به ظاهرش هم روحی که حقش بود رو بدم و کمال‌گرایی فرانت‌اِندی رو روش پیاده کنم.

توی این آپدیت جدید، کل فوکوسم رو روی UI/UX و ظرافت‌های بصری گذاشتم تا نمایش دیتای آب‌وهوا دیگه خشک و معمولی نباشه.

تغییرات اصلی در این نسخه:

بازطراحی کامل تم، رنگ‌ها و المان‌ها.

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

بهینه‌سازی کدهای پشت صحنه برای اینکه گرافیک جدید باعث افت سرعت لود برنامه نشه.

لینک مستقیم


#Frontend #UIUX #JavaScript #WebDesign #WeatherApp #BuildInPublic

امروز رفتم سراغ یکی از پروژه‌های قدیمی‌ترم که چند وقت پیش زده بودم تا یه ویژگی کوچیک بهش اضافه کنم.

واقعاً راست میگن که اگه از کدهای ۶ ماه پیشت بدت نیاد، یعنی پیشرفت نکردی!
طریقه نام‌گذاری متغیرها و کامپوننت‌بندی‌هاش جوری بود که نیم‌ساعت فقط داشتم خط به خط می‌خوندم تا بفهمم اصلاً خودم چی نوشتم.

قبل از اضافه کردن قابلیت جدید، مجبور شدم اول یه دور کدهای اون بخش رو تمیز و ساده‌تر (Refactor) کنم.
───

Opened a project I built months ago. If you aren't slightly embarrassed by your old code, you aren't growing. Refactored a few messy components before adding any new features.
#CleanCode #JavaScript #Refactoring #DevLife
───
☕️ @hossein_codes

ترفند TypeScript
فرق type و interface

هنوز خیلی‌ها موقع شروع پروژه بین استفاده از type و interface شک دارند.
یک قانون سرانگشتی و ساده:
🔹 از Interface استفاده کن اگه: داری ساختار یک کامپوننت، کامپوننت پروپ‌ها (Props) یا شیء (Object) را تعریف می‌کنی که ممکنه بعداً نیاز باشه گسترش داده بشه .
🔹 از Type استفاده کن اگه: داری از Unionها استفاده می‌کنی (مثل type Status = 'success' | 'error') یا نیاز به تایپ‌های پیچیده و ترکیبی داری.
کد تمیزتر با انتخاب درست ابزار شروع میشه!
───

Quick TS Tip: Use interface for object shapes/props that might extend. Use type for Unions and complex type aliases.
#TypeScript #CleanCode #JavaScript
───
☕️ @hossein_codes