هفته دوم هکتوبرفست – انجمن DEV

Summarize this content to 400 words in Persian Lang

مقدمه …

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

موضوع …

موضوعی که من روی آن کار کردم شامل تغییر کل رابط کاربری یک پروژه بود. با انجام برخی از کلاس‌های طراحی UI به تازگی، و کار با Tailwind CSS برای برخی از پروژه‌های جانبی خودم، از نزدیک شدن به این موضوع احساس راحتی کردم.

موضوعی که من در آن مشارکت داشتم را می توانید در اینجا پیدا کنید: https://github.com/narasimha-1511/travel-planner-app/issues/1

رفع …

برای آماده کردن اصلاح، مجبور شدم محیط پروژه را تنظیم کنم. این یک پروژه React و Vite بدون چارچوب CSS، فقط یک طراحی اولیه HTML و CSS بود.

مراحلی که انجام دادم به شرح زیر بود:

موضوع را بررسی کرد
طرحی را روی Figma پیش نویس کرد
در مورد این موضوع نظر داد و پرسید که آیا طراحی من خوب است یا خیر
پس از تایید، چنگال و یک شاخه از مخزن ساخته شده است
وابستگی های Tailwind را که لازم داشتم تنظیم کنید
سرور / برنامه را اجرا کنید
فایل هایی را که روی آنها کار می کنم پیدا کنید

به منظور آماده سازی و در واقع رفع مشکل، مجبور شدم فایلی را که قرار است تغییر دهم درست مثل هفته گذشته پیدا کنم. ابتدا فکر می کردم همه یک فایل است، فایل App.jsx در فهرست اجزای پروژه، اما در نهایت فایل های TripDetails.jsx TripForm.jsx TripList.jsx index.css app.css app.jsx و فایل tailwindconfig ایجاد کردم.

کد …

کد برای رفع مشکل من زیاد بود، زیرا من عملاً کل رابط کاربری پروژه را از ابتدا مجدداً تغییر دادم تا با طرح پیشنهادی طراحی Figma مطابقت داشته باشد. من مجبور شدم نحوه نمایش هر مؤلفه در وب و بازدیدهای تلفن همراه را دوباره کار کنم و حتی نمایش آن در اینجا بسیار زیاد است. مثال‌هایی که می‌توانم نشان دهم قبل و بعد هستند، با تفاوت‌هایی که قبلاً کلاس‌ها از id برای فایل‌های index.css و app.css وجود داشت که می‌توان از آن‌ها استفاده کرد، و پس از آن شامل استایل‌های درون خطی است که من با tailwind CSS استفاده می‌کردم. .

کد App.jsx قبل از رفع مشکل:

کد App.jsx پس از رفع مشکل:

طراحی قبلی:

پیشنهاد طراحی فیگما:

اجرای طرح نهایی:

نمای موبایل طراحی نهایی:

در طراحی جدید می توانید ببینید که من تا جایی که می توانستم با Figma مطابقت داشتم، در حالی که تغییرات لازم را برای نمایش پذیری و مقیاس پذیری ایجاد کردم.

این پروژه هیچ تحقیق قبلی و/یا مشکل عمده ای برای من ایجاد نکرد زیرا با Figma، React، HTML، CSS و Tailwind CSS آشنا هستم. من قبلاً روی یک پروژه Vite کار نکرده بودم، اما این مانعی برای من نبود و من توانستم بدون مشکل تغییرات لازم را اعمال کنم. بزرگترین چیزی که من با آن روبرو شدم، احتمالاً صرفاً اجتناب از عملکرد کد و حفظ احساس اصلی برنامه و در عین حال ارائه یک رابط کاربری جدید بود.

به طور کلی، تعامل بسیار کمی با نگهدارنده (ها) داشتم. این یک مخزن کوچک بود، بنابراین من مطمئن هستم که احتمالاً در حال حاضر فقط خود نگهدارنده روی پروژه کار می کند. در آینده دوست دارم روی چیزی بزرگتر کار کنم، احتمالاً هفته آینده، اما این بار با یک تغییر جزئی. نگهدار از تعاملات کوچک من با او دوستانه به نظر می رسید، و من برای او درخواستی ارائه کرده ام که هنوز منتظر تایید آن هستم زیرا در مناطق زمانی بسیار متفاوت هستیم.

درخواست کشش من برای پست این هفته را می توانید در اینجا پیدا کنید:https://github.com/narasimha-1511/travel-planner-app/pull/2