5 پروژه جاوااسکریپت که باید به عنوان توسعه دهنده Junior Frontend بسازید

توسعه دهنده فرانت اندوقتی به دنبال کار اول به عنوان توسعه دهنده Junior Front-end هستید، نشان دادن تجربه خود به عنوان یک برنامه نویس بسیار سخت است. پروژه های شما به عنوان زمین بازی برای یادگیری مهارت های جدید به ندرت کیفیت کد خوبی را ارائه می دهند. اگر برای اولین بار چیزی بنویسید نوشتن کد کامل غیرممکن است!به همین دلیل است که من شما را تشویق می کنم تا یکبار دیگر از مهارتهای خود در تمرین استفاده مجدد کنید. این بار نیز با در نظر گرفتن کیفیت کد، در اینجا لیستی از نمونه پروژه هایی وجود دارد که می توانید برای نشان دادن مهارت های خود بسازید.1. ساخت یک قالب وبلاگ با HTML و CSSقالب وبلاگ با html و cssهنگامی که تازه شروع به یادگیری توسعه front-end می کنید، مهم است که دانش خود را در مورد HTML و CSS ادغام کنید. ساخت یک قالب وبلاگ ایده خوبی برای اولین پروژه بزرگ شماست. در مورد طراحی نگران نباشید، منابع زیادی به صورت آنلاین در دسترس هستند.الزامات پروژه:ساخت صفحه اصلی (homepage)، صفحه مختص هر پست (single post page) و تماس با ماسعی کنید از CSS Grid و Flexbox استفاده کنیدحتما باید سایت شما واکنش گرا (responsive) باشدموارد اضافه تر:اضافه کردن اسلایدر (slider)به جای lorem ipsum از متن واقعی استفاده کنید2. یک بازی tic-tac-toe با جاوااسکریپت خالص بسازیدبازی tic-tac-toe با جاوااسکریپتساخت یک بازی در یک مرورگر می تواند یک تمرین عالی برای آزمایش مهارت های جاوااسکریپت شما باشد. شما باید به رویدادهای کاربر واکنش نشان دهید، با DOM تعامل کنید و داده های بازی را ذخیره کنید. این همچنین یک پروژه عالی برای نشان دادن به همکاران و خانواده شما است!الزامات پروژه:صفحه خوش آمدید با نام و نماد ورودی (symbol input) برای هر بازیکنرندر کردن یک نماد (symbol) هنگامی که کاربر بر روی سلول (cell) خالی کلیک می کندنمایش برندهموارد اضافه تر:ساخت یک جدول امتیاز و ذخیره آن در local storageاستفاده از انیمیشن ها (animations)3. اشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Mapsاشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Mapsیک برنامه ساده که در آن می توانید مکان خود را با دوست خود به اشتراک بگذارید می تواند هم یک پروژه طلبکارانه باشد و هم یک ابزار بسیار مفید که می توانید استفاده کنید. در این پروژه، از جاوااسکریپت برای تعامل با سرویس های خارجی نقشه (از قبیل Google Maps یا OpenStreetMap) استفاده خواهید کرد.الزامات پروژه:نمایش مکان فعلی شما روی نقشهساخت دکمه اشتراک (Share) که لینکی با مکان فعلی شما ایجاد می کندموارد اضافه تر:به اشتراک گذاری مکان به صورت realtime، شما باید آن را ذخیره کنید و هر چند ثانیه یک بار آن را از یک پایگاه داده خارجی بخوانید (مثلا Firebase)نمایش موقعیت مکانی به صورت realtime در صفحه دوست شما، زمانی که دسترسی به آن داشته باشد3. ساخت TV Series Tracker با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)tv series trackerاین پروژه به هر طرفدار مجموعه تلویزیونی کمک می کند تا قسمت های جدید را دنبال کند. این یک فرصت عالی برای استفاده از یک فریم ورک جاوااسکریپت است که با آن راحت هستید.الزامات پروژه:جستجوی مجموعه های تلویزیونی با استفاده از API خارجی (به عنوان مثال TVMaze API)اضافه کردن مجموعه های تلویزیونی به لیست پیگیری (tracking list)نمایش لیست دنبال شده سریال های تلویزیونی همراه با جدیدترین تاریخ پخش قسمتنمای تک صفحه با جزئیات بیشتر درباره سریال های تلویزیونیذخیره لیست پیگیری در local storageموارد اضافه تر:ارسال ایمیل یا نمایش اعلان ها (notifications) زمانی که قسمت جدید منتشر می شود3. ساخت برنامه بودجه خانگی با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)برنامه بودجه خانگیایجاد برنامه بودجه خانگی یک بررسی نهایی برای مهارت های شما به عنوان یک توسعه دهنده Junior Frontend خواهد بود. این توانایی شما در ایجاد فرم ها و ذخیره اطلاعات را بررسی می کند، اما همچنین می تواند به شما در صرفه جویی در هزینه کمک کند!الزامات پروژه:افزودن یک دسته (category)اضافه کردن هزینه با نام (name)، مقدار (amount) و دسته (category)جمع بندی هزینه های ماهانه تقسیم شده به دسته هاذخیره اطلاعات در یک پایگاه داده خارجی (به عنوان مثال Firebase)موارد اضافه تر:بخش های ثبت نام، ورود و مدیریت نقش کاربران (role)خلاصهپروژه های جانبی یک روش عالی برای نشان دادن مهارت های شما برای به دست آوردن شغل اول به عنوان Junior Front-end Developer است. به کارفرمای خود بگویید که تاکنون چه چیزی هایی ساخته اید. آنها نه تنها به صفحه وب نگاه می کنند بلکه کد شما را نیز تجزیه و تحلیل می کنند، بنابراین از تمیز بودن آن اطمینان حاصل کنید.قبل از شروع ساخت چیز جدید، لیستی از نیازهای MVP (حداقل کالای با ارزش) را ایجاد کنید. در طول توسعه، ویژگی های جالب تری را که برنامه شما می تواند داشته باشد، کشف خواهید کرد، فقط کافی است آن را به لیست خوبی اضافه کنید. این به شما کمک می کند تا پروژه را طبق برنامه به پایان برسانید.به یاد داشته باشید، لازم نیست که آن مثالها را 1 به 1 تقلید کنید. در صورت تمایل جزئیات مورد علاقه خود را تغییر، اضافه یا حذف کنید. اگر پروژه های قدیمی تری دارید که از آنها برای یادگیری مهارت های جدید استفاده کرده اید، همیشه می توانید آن را بازسازی کرده و در یک نمونه کارها قرار دهید.برگرفته از www.slawkolodziej.com