1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable منطقه
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
این مقاله با پشتیبانی نرم افزار EDISON ترجمه شده است که و .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- پاداش: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
توجه: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- پاداش: Если вам интересно, я недавно написал на криптовалюту с React Native.
توجه: در اینجا این است .
Подборка проектов из предыдущих публикаций.
لایه
لایه جامعه‌ای است که در آن همه می‌توانند یک پیکسل را روی یک «تابلو» مشترک بکشند. ایده اصلی در Reddit متولد شد. جامعه r/Layer استعاره ای از خلاقیت مشترک است، که همه می توانند خالق باشند و در یک هدف مشترک سهیم باشند.
آنچه هنگام ایجاد پروژه لایه خود یاد خواهید گرفت:
- بوم جاوا اسکریپت چگونه کار می کند دانستن نحوه کار با بوم یک مهارت حیاتی در بسیاری از برنامه ها است.
- نحوه هماهنگ کردن مجوزهای کاربر هر کاربر می تواند هر 15 دقیقه یک پیکسل بدون نیاز به ورود به سیستم بکشد.
- ایجاد جلسات کوکی
اسکواش
Squoosh یک برنامه فشرده سازی تصویر با بسیاری از گزینه های پیشرفته است.
GIF 20 مگابایت
با ایجاد نسخه Squoosh خود، یاد خواهید گرفت:
- نحوه کار با اندازه های تصویر
- با اصول Drag'n'Drop API آشنا شوید
- نحوه عملکرد API و شنوندگان رویداد را بدانید
- نحوه آپلود و صادرات فایل ها
توجه: کمپرسور تصویر محلی است. نیازی به ارسال اطلاعات اضافی به سرور نیست. شما می توانید کمپرسور را در خانه داشته باشید، یا می توانید آن را بر روی سرور به انتخاب خود استفاده کنید.
ماشین حساب
بیا دیگه؟ به طور جدی؟ ماشین حساب؟ بله دقیقا یک ماشین حساب. درک اصول اولیه عملیات ریاضی و نحوه کار آنها با هم یک مهارت حیاتی برای ساده کردن برنامه های شما است. دیر یا زود باید با اعداد دست و پنجه نرم کنید و هر چه زودتر بهتر.
با ایجاد ماشین حساب خود یاد خواهید گرفت:
- با اعداد و عملیات ریاضی کار کنید
- با API شنوندگان رویداد تمرین کنید
- نحوه چیدمان عناصر، درک سبک ها
خزنده (موتور جستجو)
همه از یک موتور جستجو استفاده کرده اند، پس چرا موتور جستجوی خود را ایجاد نکنید؟ برای جستجوی اطلاعات به خزنده ها نیاز است. همه هر روز از آنها استفاده می کنند و تقاضا برای این فناوری و متخصصان تنها در طول زمان افزایش می یابد.
موتور جستجوی گوگل
آنچه با ایجاد موتور جستجوی خود خواهید آموخت:
- خزنده ها چگونه کار می کنند
- نحوه فهرست بندی سایت ها و نحوه رتبه بندی آنها بر اساس رتبه بندی و شهرت
- نحوه ذخیره سایت های نمایه شده در پایگاه داده و نحوه کار با پایگاه داده
پخش کننده موسیقی (Spotify، Apple Music)
همه به موسیقی گوش می دهند - این فقط بخشی جدایی ناپذیر از زندگی ماست. بیایید یک پخش کننده موسیقی ایجاد کنیم تا بهتر درک کنیم که چگونه مکانیک های اساسی یک پلت فرم پخش موسیقی مدرن کار می کند.
Spotify
آنچه با ایجاد پلتفرم پخش موسیقی خود خواهید آموخت:
- نحوه کار با API از API Spotify یا Apple Music استفاده کنید
- نحوه پخش، مکث یا بازگشت به آهنگ بعدی/قبلی
- نحوه تغییر حجم
- نحوه مدیریت مسیریابی کاربر و تاریخچه مرورگر
برنامه جستجوی فیلم با React (با قلاب)
اولین چیزی که می توانید با آن شروع کنید ساختن یک اپلیکیشن جستجوی فیلم با React است. در زیر تصویری از ظاهر برنامه نهایی وجود دارد:
چه چیزی یاد خواهید گرفت
با ساخت این اپلیکیشن، مهارت های React خود را با استفاده از Hooks API نسبتاً جدید بهبود خواهید داد. پروژه نمونه از کامپوننت‌های React، تعداد زیادی هوک، یک API خارجی و البته سبک CSS استفاده می‌کند.
پشته فنی و ویژگی ها
- با قلاب واکنش نشان دهید
- ایجاد-واکنش-برنامه
- Jsx
- CSS
بدون استفاده از هیچ کلاسی، این پروژه ها نقطه ورود عالی به React عملکردی را به شما می دهند و قطعا در سال 2020 به شما کمک خواهند کرد. میتونی پیدا کنی . دستورالعمل ها را دنبال کنید یا آن را خودتان بسازید.
برنامه چت با Vue
یکی دیگر از پروژه های عالی برای شما این است که یک برنامه چت با استفاده از کتابخانه جاوا اسکریپت مورد علاقه من بسازید: VueJS. برنامه چیزی شبیه به این خواهد بود:
چه چیزی یاد خواهید گرفت
در این آموزش، نحوه ایجاد یک برنامه Vue را از ابتدا یاد خواهید گرفت - ایجاد مؤلفه ها، مدیریت وضعیت ها، ایجاد مسیرها، اتصال به خدمات شخص ثالث، و حتی تأیید اعتبار.
پشته فنی و ویژگی ها
- VUE
- ووکس
- روتر Vue
- نمای CLI
- فروشنده
- CSS
این یک پروژه واقعاً عالی برای شروع با Vue یا بهبود مهارت‌های موجود برای ورود به توسعه در سال 2020 است. میتونی پیدا کنی .
اپلیکیشن آب و هوای زیبا با Angular 8
این مثال به شما کمک می کند تا با استفاده از Angular 8 یک برنامه آب و هوای زیبا بسازید:
چه چیزی یاد خواهید گرفت
این پروژه مهارت‌های ارزشمندی را در ساخت برنامه‌های کاربردی از ابتدا به شما می‌آموزد - از طراحی تا توسعه، تا یک برنامه آماده برای استقرار.
پشته فنی و ویژگی ها
- زاویه ای 8
- آتش نشانی
- رندر سمت سرور
- CSS با Grid و Flexbox
- سازگار با موبایل و سازگاری
- حالت تاریک
- رابط کاربری زیبا
چیزی که من واقعاً در مورد این پروژه جامع دوست دارم این است که شما چیزها را به تنهایی مطالعه نکنید. در عوض، کل فرآیند توسعه را از طراحی تا استقرار نهایی یاد می گیرید.
برنامه To-Do با Svelte
Svelte مانند بچه جدید در رویکرد کامپوننت است - حداقل شبیه به React، Vue و Angular. و این یکی از داغ ترین محصولات جدید برای سال 2020 است.
برنامه های To-Do لزوماً داغ ترین موضوع نیستند، اما واقعاً به شما کمک می کنند تا مهارت های Svelte خود را تقویت کنید. شبیه این خواهد شد:
چه چیزی یاد خواهید گرفت
این آموزش به شما نشان می دهد که چگونه با استفاده از Svelte 3 یک برنامه را از ابتدا تا انتها ایجاد کنید. شما از کامپوننت ها، استایل و کنترل کننده رویداد استفاده خواهید کرد
پشته فنی و ویژگی ها
- Svelte 3
- اجزاء
- استایل دهی با CSS
- نحو ES6
پروژه های شروع کننده خوب Svelte زیاد وجود ندارد، بنابراین من پیدا کردم .
برنامه تجارت الکترونیک با Next.js
Next.js محبوب ترین فریم ورک برای ساخت برنامه های React است که از رندر خارج از جعبه در سمت سرور پشتیبانی می کند.
این پروژه به شما نشان می دهد که چگونه یک برنامه تجارت الکترونیکی به شکل زیر ایجاد کنید:
چه چیزی یاد خواهید گرفت
در این پروژه، شما یاد خواهید گرفت که چگونه با Next.js توسعه دهید—ایجاد صفحات و اجزای جدید، بازیابی داده ها، و استایل و استقرار یک برنامه Next.
پشته فنی و ویژگی ها
- Next.js
- اجزا و صفحات
- نمونه گیری داده ها
- یک ظاهر طراحی شده
- استقرار پروژه
- SSR و SPA
داشتن یک مثال واقعی مانند یک برنامه تجارت الکترونیک برای یادگیری چیزهای جدید همیشه عالی است. تو می توانی .
وبلاگ کامل چند زبانه با Nuxt.js
Nuxt.js برای Vue است، مانند Next.js برای React: یک چارچوب عالی برای ترکیب رندر سمت سرور و برنامه های تک صفحه ای
آخرین برنامه ای که می توانید ایجاد کنید به شکل زیر است:
چه چیزی یاد خواهید گرفت
در این پروژه نمونه، یاد خواهید گرفت که چگونه با استفاده از Nuxt.js یک وب سایت کامل بسازید، از راه اندازی اولیه تا استقرار نهایی.
از بسیاری از ویژگی‌های جالبی که Nuxt ارائه می‌کند، مانند صفحات و کامپوننت‌ها، و استایل‌سازی با SCSS بهره می‌برد.
پشته فنی و ویژگی ها
- Nuxt.js
- اجزا و صفحات
- ماژول بلوک داستانی
- مخلوط ها
- Vuex برای مدیریت دولتی
- SCSS برای یک ظاهر طراحی شده
- میان افزارهای Nuxt
، که شامل بسیاری از ویژگی های عالی Nuxt.js است. من شخصاً عاشق کار با Nuxt هستم، بنابراین باید آن را امتحان کنید زیرا شما را به یک توسعه دهنده عالی Vue تبدیل می کند.
وبلاگ با گتسبی
گتسبی یک مولد سایت استاتیک عالی با استفاده از React و GraphQL است. این هم نتیجه پروژه:
چه چیزی یاد خواهید گرفت
در این آموزش یاد خواهید گرفت که چگونه از گتسبی برای ایجاد وبلاگی استفاده کنید که از آن برای نوشتن مقالات خود با استفاده از React و GraphQL استفاده کنید.
پشته فنی و ویژگی ها
- گتسبی
- واکنش نشان می دهند
- GraphQL
- پلاگین ها و تم ها
- MDX/Markdown
- CSS بوت استرپ
- قالب
اگر تا به حال خواستید یک وبلاگ راه اندازی کنید، چگونه با استفاده از React و GraphQL آن را بسازیم.
من نمی گویم وردپرس انتخاب بدی است، اما با گتسبی می توانید وب سایت هایی با کارایی بالا با استفاده از React بسازید - که ترکیبی شگفت انگیز است.
وبلاگ با Gridsome
Gridsome برای Vue... خوب، ما قبلاً آن را با Next/Nuxt داشتیم.
اما همین امر در مورد گریدسوم و گتسبی نیز صادق است. هر دو از GraphQL به عنوان لایه داده خود استفاده می کنند، اما Gridsome از VueJS استفاده می کند. همچنین یک تولید کننده سایت ایستا عالی است که به شما در ایجاد وبلاگ های عالی کمک می کند:
چه چیزی یاد خواهید گرفت
این پروژه به شما یاد می دهد که چگونه یک وبلاگ ساده برای شروع با Gridsome، GraphQL و Markdown ایجاد کنید. همچنین نحوه استقرار یک برنامه از طریق Netlify را توضیح می دهد.
پشته فنی و ویژگی ها
- ترسناک
- VUE
- GraphQL
- مدل های نشانه گذاری
- خالص کردن
این مطمئنا کامل ترین آموزش نیست، اما مفاهیم اولیه Gridsome و را پوشش می دهد .
پخش کننده صوتی مشابه SoundCloud با استفاده از Quasar
Quasar یکی دیگر از فریمورک های Vue است که می توان از آن برای ساخت اپلیکیشن های موبایل استفاده کرد. در این پروژه شما یک اپلیکیشن پخش کننده صوتی مانند:
چه چیزی یاد خواهید گرفت
در حالی که پروژه‌های دیگر بیشتر بر روی برنامه‌های وب تمرکز دارند، این پروژه به شما نشان می‌دهد که چگونه با استفاده از Vue و چارچوب Quasar یک اپلیکیشن موبایل بسازید.
از قبل باید یک Cordova در حال کار با Android Studio/Xcode راه اندازی شده باشد. اگر نه، راهنما پیوندی به وب سایت Quasar دارد که در آن به شما نشان می دهد چگونه همه چیز را تنظیم کنید.
پشته فنی و ویژگی ها
- کوازار
- VUE
- کوردوا
- موج سرفر
- اجزای رابط کاربری
، نشان دادن قابلیت های Quasar برای ساخت اپلیکیشن های موبایل.
Форма кредитной карты
یک شکل کارت اعتباری جالب با تعاملات ریز و لذت بخش. شامل قالب بندی شماره، تأیید و تشخیص خودکار نوع کارت است. این بر روی Vue.js ساخته شده است و همچنین به طور کامل پاسخگو است. (میتوانی ببینی .)
آنچه یاد خواهید گرفت:
- فرم ها را پردازش و تأیید کنید
- مدیریت رویدادها (به عنوان مثال، زمانی که فیلدها تغییر می کنند)
- نحوه نمایش و قرار دادن عناصر در صفحه، به ویژه اطلاعات کارت اعتباری که در بالای فرم ظاهر می شود را بدانید
نمودار میله ای
هیستوگرام نمودار یا نموداری است که داده های طبقه بندی شده را با میله های مستطیلی با ارتفاع یا طول متناسب با مقادیری که آنها نشان می دهند نشان می دهد.
آنها را می توان به صورت عمودی یا افقی اعمال کرد. نمودار میله ای عمودی گاهی اوقات نمودار خطی نامیده می شود.
آنچه یاد خواهید گرفت:
- نمایش داده ها به روشی ساختاریافته و قابل فهم
- علاوه بر این: نحوه استفاده از عنصر را بیاموزید
canvasو نحوه ترسیم عناصر با آن
می توانید داده های جمعیت جهان را پیدا کنید. آنها بر اساس سال مرتب شده اند.
Анимация сердечка Twitter
توییتر در سال 2016 این انیمیشن شگفت انگیز را برای توییت های خود معرفی کرد. از سال 2019، هنوز قسمت به نظر می رسد، پس چرا خودتان یکی را ایجاد نکنید؟
آنچه یاد خواهید گرفت:
- با ویژگی CSS کار کنید
keyframes - عناصر HTML را دستکاری و متحرک کنید
- جاوا اسکریپت، HTML و CSS را با هم ترکیب کنید
Репозитории GitHub с функцией поиска
هیچ چیز جالبی در اینجا وجود ندارد - مخازن GitHub فقط یک لیست تجلیل شده است.
هدف نمایش مخازن و اجازه دادن به کاربر برای فیلتر کردن آنهاست. استفاده کنید برای دریافت مخازن برای هر کاربر.
صفحه نمایه GitHub -
آنچه یاد خواهید گرفت:
- دریافت داده از API
- نمایش داده ها از API
- فیلتر کردن و نمایش داده های مرتبط برای هر جستجو
- اختیاری: اگر برای چالش آماده هستید، استفاده کنید ، با استفاده از GraphQL ساخته شده است. .
Чаты в стиле Reddit
چت ها به دلیل سادگی و سهولت استفاده از راه های ارتباطی محبوب هستند. اما واقعا چه چیزی به اتاق های گفتگوی مدرن دامن می زند؟ وب سوکت ها!
آنچه یاد خواهید گرفت:
- از WebSockets، ارتباطات بلادرنگ و به روز رسانی داده ها استفاده کنید
- با سطوح دسترسی کاربر کار کنید (به عنوان مثال، مالک یک کانال چت این نقش را بر عهده دارد
adminو دیگران در اتاق -user) - پردازش و تأیید فرم ها - به یاد داشته باشید، پنجره چت برای ارسال پیام است
input - ایجاد و پیوستن به چت های مختلف
- با پیام های شخصی کار کنید. کاربران می توانند به صورت خصوصی با سایر کاربران چت کنند. در اصل، شما یک اتصال WebSocket بین دو کاربر ایجاد خواهید کرد.
Навигация в стиле Stripe
چیزی که این پیمایش را منحصربفرد می کند این است که ظرف پاپاور به تناسب محتوا تغییر شکل می دهد. این گذار در مقایسه با رفتار سنتی باز و بسته کردن یک پاپاور جدید، ظرافت دارد.
آنچه یاد خواهید گرفت:
- انیمیشن های CSS را با ترانزیشن ها ترکیب کنید
- محتوا را کم نور کنید و کلاس فعال را روی عنصر شناور اعمال کنید
نصب Pacman
نسخه Pacman خود را بسازید. این یک راه عالی برای دریافت ایده از نحوه توسعه بازی ها و درک اصول اولیه است. از یک چارچوب جاوا اسکریپت، React یا Vue استفاده کنید.
یاد خواهید گرفت:
- نحوه حرکت عناصر
- چگونه تعیین کنیم کدام کلیدها را فشار دهیم
- نحوه تعیین لحظه برخورد
- می‌توانید جلوتر بروید و کنترل‌های حرکت ارواح را اضافه کنید
نمونه ای از این پروژه را خواهید دید GitHub
مدیریت کاربر
پروژه GitHub
ایجاد یک برنامه از نوع CRUD برای مدیریت کاربر، اصول اولیه توسعه را به شما آموزش می دهد. این به ویژه برای توسعه دهندگان جدید مفید است.
یاد خواهید گرفت:
- مسیریابی چیست
- نحوه رسیدگی به فرم های ورود اطلاعات و بررسی آنچه کاربر وارد کرده است
- نحوه کار با پایگاه داده - ایجاد، خواندن، به روز رسانی و حذف اقدامات
Проверка погоды в вашем местоположении
پروژه GitHub
اگر می خواهید برنامه ایجاد کنید، با یک برنامه آب و هوا شروع کنید. این پروژه را می توان با استفاده از سوئیفت تکمیل کرد.
علاوه بر کسب تجربه در ساخت اپلیکیشن، یاد خواهید گرفت:
- نحوه کار با API
- نحوه استفاده از موقعیت جغرافیایی
- با افزودن ورودی متن، برنامه خود را پویاتر کنید. در آن، کاربران می توانند موقعیت مکانی خود را برای بررسی وضعیت آب و هوا در یک مکان خاص وارد کنند.
شما به یک API نیاز خواهید داشت. برای دریافت اطلاعات آب و هوا، از OpenWeather API استفاده کنید. اطلاعات بیشتر در مورد OpenWeather API.
Окно чата
پنجره چت من در عمل، در دو برگه مرورگر باز شود
ایجاد یک پنجره چت بهترین راه برای شروع کار با سوکت است. انتخاب پشته فناوری بسیار زیاد است. برای مثال Node.js عالی است.
شما یاد خواهید گرفت که سوکت ها چگونه کار می کنند و چگونه آنها را پیاده سازی کنید. این مزیت اصلی این پروژه است.
اگر توسعه دهنده لاراول هستید و می خواهید با سوکت کار کنید، من را بخوانید
GitLab CI
اگر در یکپارچگی مداوم (CI) تازه کار هستید، با GitLab CI بازی کنید. چند محیط را تنظیم کنید و چند تست را امتحان کنید. این پروژه خیلی سختی نیست، اما مطمئن هستم که چیزهای زیادی از آن یاد خواهید گرفت. بسیاری از تیم های توسعه اکنون از CI استفاده می کنند. دانستن نحوه استفاده از آن مفید است.
یاد خواهید گرفت:
- GitLab CI چیست؟
- نحوه پیکربندی
.gitlab-ci.ymlکه به کاربر GitLab می گوید که چه کاری انجام دهد - نحوه استقرار در محیط های دیگر
Анализатор сайтов
یک اسکراپر بسازید که معنای وب سایت ها را تجزیه و تحلیل کرده و رتبه آنها را ایجاد کند. برای مثال، می‌توانید تگ‌های alt را در تصاویر بررسی کنید. یا بررسی کنید که آیا صفحه دارای متا تگ SEO است یا خیر. یک اسکراپر را می توان بدون رابط کاربری ایجاد کرد.
یاد خواهید گرفت:
- اسکراپر چگونه کار می کند؟
- نحوه ایجاد انتخابگرهای DOM
- نحوه نوشتن الگوریتم
- اگر نمی خواهید در آنجا متوقف شوید، یک رابط کاربری ایجاد کنید. همچنین می توانید در مورد هر وب سایتی که بررسی می کنید یک گزارش ایجاد کنید.
Определение настроений в социальных сетях
تشخیص احساسات در رسانه های اجتماعی یک راه عالی برای آشنایی با یادگیری ماشینی است.
شما می توانید با تجزیه و تحلیل فقط یک شبکه اجتماعی شروع کنید. همه معمولا با توییتر شروع می کنند.
اگر قبلاً در زمینه یادگیری ماشینی تجربه دارید، سعی کنید داده ها را از شبکه های اجتماعی مختلف جمع آوری کرده و آنها را ترکیب کنید.
یاد خواهید گرفت:
- یادگیری ماشین چیست
Клон Trello
آنچه خواهید آموخت:
- سازماندهی مسیرهای پردازش درخواست (Routing).
- کشیدن و انداختن.
- نحوه ایجاد اشیاء جدید (تخته، لیست، کارت).
- پردازش و بررسی داده های ورودی
- از سمت مشتری: نحوه استفاده از حافظه محلی، نحوه ذخیره داده ها در حافظه محلی، نحوه خواندن داده ها از حافظه محلی.
- از سمت سرور: نحوه استفاده از پایگاه داده، نحوه ذخیره داده ها در پایگاه داده، نحوه خواندن داده ها از پایگاه داده.
، ساخته شده در React+Redux.
Панель админа
یک برنامه ساده CRUD، ایده آل برای یادگیری اصول اولیه. بیا یاد بگیریم:
- ایجاد کاربر، مدیریت کاربران.
- تعامل با پایگاه داده - ایجاد، خواندن، ویرایش، حذف کاربران.
- اعتبار سنجی ورودی و کار با فرم ها.
Трекер криптовалют (нативное мобильное приложение)
هر چیزی: Swift، Objective-C، React Native، Java، Kotlin.
بیایید مطالعه کنیم:
- برنامه های بومی چگونه کار می کنند
- نحوه بازیابی اطلاعات از API
- نحوه کار طرح‌بندی صفحه بومی
- نحوه کار با شبیه ساز موبایل
. اگر چیز بهتری پیدا کردید در نظرات بنویسید.
اگر علاقه مند هستید، اینجاست .
Настроить собственный конфиг webpack с нуля
از نظر فنی، این یک برنامه کاربردی نیست، اما یک کار بسیار مفید برای درک نحوه عملکرد وب پک از داخل است. اکنون این یک "جعبه سیاه" نخواهد بود، بلکه یک ابزار قابل درک خواهد بود.
مورد نیاز:
- es7 را به es5 (مبانی) کامپایل کنید.
- jsx را به js - یا - .vue به .js کامپایل کنید (شما باید لودرها را یاد بگیرید)
- سرور توسعه دهنده وب پک و بارگیری مجدد ماژول داغ را راه اندازی کنید. (vue-cli و create-react-app از هر دو استفاده می کنند)
- از Heroku، now.sh یا Github استفاده کنید، نحوه استقرار پروژه های بسته وب را بیاموزید.
- پیش پردازنده مورد علاقه خود را برای کامپایل css - scss، less، قلم تنظیم کنید.
- نحوه استفاده از تصاویر و svgs با وب پک را بیاموزید.
Клон Hackernews
هر جدی موظف است هکرنیوز خود را بسازد.
آنچه در طول مسیر یاد خواهید گرفت:
- نحوه تعامل با Hackernews API.
- نحوه ایجاد یک اپلیکیشن تک صفحه ای
- نحوه پیاده سازی ویژگی هایی مانند مشاهده نظرات، نظرات فردی، پروفایل ها.
- سازماندهی مسیرهای پردازش درخواست (Routing).
Тудушечка
به طور جدی؟ تودوشکا؟ هزاران نفر از آنها وجود دارد. اما باور کنید این محبوبیت دلیلی دارد.
برنامه Tudu یک راه عالی برای اطمینان از درک اصول اولیه است. سعی کنید یک برنامه در جاوا اسکریپت وانیلی و یکی در فریم ورک مورد علاقه خود بنویسید.
فرا گرفتن:
- وظایف جدید ایجاد کنید.
- بررسی کنید که فیلدها پر شده باشند.
- وظایف را فیلتر کنید (تکمیل شده، فعال، همه). استفاده کنید
filterиreduce. - اصول جاوا اسکریپت را درک کنید.
Сортируемый drag and drop список
برای درک بسیار مفید است .
بیا یاد بگیریم:
- API را بکشید و رها کنید
- ایجاد رابط کاربری غنی
Клон мессенджера (нативное приложение)
شما متوجه خواهید شد که برنامه های کاربردی وب و برنامه های بومی چگونه کار می کنند، که شما را از توده خاکستری متمایز می کند.
آنچه ما مطالعه خواهیم کرد:
- سوکت های وب (پیام های فوری)
- برنامه های بومی چگونه کار می کنند
- نحوه کار قالب ها در برنامه های بومی
- سازماندهی مسیرهای پردازش درخواست در برنامه های داخلی.
ویرایشگر متن
هدف یک ویرایشگر متن کاهش تلاش کاربران برای تبدیل قالب بندی خود به نشانه گذاری معتبر HTML است. یک ویرایشگر متن خوب به کاربران امکان می دهد متن را به روش های مختلف قالب بندی کنند.
در برخی موارد، همه از یک ویرایشگر متن استفاده کرده اند. چرا که نه ?
Клон Reddit
یک سایت جمع آوری اخبار اجتماعی، رتبه بندی محتوای وب و بحث است.
Reddit بیشتر وقت من را می گیرد، اما من همچنان به آن مشغول هستم. ایجاد یک کلون Reddit یک راه موثر برای یادگیری برنامه نویسی است (در حالی که در همان زمان در Reddit مرور می کنید).
Reddit به شما یک منبع بسیار غنی را ارائه می دهد. هیچ ویژگی را کنار نگذارید یا کارها را به طور تصادفی انجام ندهید. در دنیای واقعی با مشتریان و مشتریان، نمی توانید به طور تصادفی کار کنید، یا به سرعت شغل خود را از دست خواهید داد.
مشتریان باهوش بلافاصله متوجه می شوند که کار ضعیف انجام می شود و شخص دیگری را پیدا می کنند.
Публикация пакета NPM с открытым исходным кодом
اگر کد جاوا اسکریپت می نویسید، به احتمال زیاد از یک مدیریت بسته استفاده می کنید. یک مدیر بسته به شما امکان می دهد از کدهای موجود که افراد دیگر نوشته و منتشر کرده اند، دوباره استفاده کنید.
درک چرخه توسعه کامل یک بسته، تجربه بسیار خوبی را فراهم می کند. موارد زیادی وجود دارد که باید هنگام انتشار کد بدانید. شما باید به امنیت، نسخه سازی معنایی، مقیاس پذیری، قراردادهای نامگذاری و نگهداری فکر کنید.
بسته می تواند هر چیزی باشد. اگر ایده ای ندارید، Lodash خود را بسازید و آن را منتشر کنید.
لوداش:
داشتن کاری که به صورت آنلاین انجام داده اید، شما را 10 درصد بالاتر از دیگران قرار می دهد. در مورد منابع باز و بسته ها
Учебный план freeCodeCamp
freeCodecamp چیزهای زیادی جمع آوری کرده است .
freeCodeCamp یک سازمان غیر انتفاعی است. این شامل یک پلت فرم یادگیری مبتنی بر وب تعاملی، یک انجمن انجمن آنلاین، اتاق های گفتگو، نشریات متوسط و سازمان های محلی است که قصد دارند توسعه وب یادگیری را برای همه در دسترس قرار دهند.
اگر بتوانید کل دوره را به پایان برسانید، برای اولین کار خود واجد شرایط خواهید بود.
Создайте HTTP-сервер с нуля
پروتکل HTTP یکی از پروتکل های اصلی است که محتوا از طریق آن در اینترنت حرکت می کند. سرورهای HTTP برای ارائه محتوای ثابت مانند HTML، CSS و JS استفاده می‌شوند.
توانایی پیاده سازی پروتکل HTTP از ابتدا، دانش شما را در مورد نحوه تعامل اشیا گسترش می دهد.
به عنوان مثال، اگر از NodeJs استفاده می کنید، می دانید که Express یک سرور HTTP ارائه می دهد.
برای مرجع، ببینید آیا می توانید:
- بدون استفاده از هیچ کتابخانه ای یک سرور راه اندازی کنید
- سرور باید محتوای HTML، CSS و JS را ارائه دهد.
- پیاده سازی روتر از ابتدا
- نظارت بر تغییرات و به روز رسانی سرور
اگر دلیل آن را نمی دانید، استفاده کنید و سعی کنید یک سرور HTTP ایجاد کنید از ابتدا
Десктопное приложение для заметок
همه ما یادداشت برداری می کنیم، اینطور نیست؟
بیایید یک برنامه یادداشت بسازیم. برنامه نیاز به ذخیره یادداشت ها و همگام سازی آنها با پایگاه داده دارد. با استفاده از Electron، Swift یا هر چیزی که دوست دارید و برای سیستم شما کار می کند، یک برنامه بومی بسازید.
این را با اولین چالش (ویرایشگر متن) ترکیب کنید.
به عنوان یک امتیاز، سعی کنید نسخه دسکتاپ خود را با نسخه وب همگام سازی کنید.
Подкасты (клон Overcast)
چه کسی به پادکست گوش نمی دهد؟
یک برنامه وب با عملکرد زیر ایجاد کنید:
- ایجاد حساب کاربری
- جستجو در پادکست ها
- امتیاز دهید و در پادکست ها مشترک شوید
- توقف و بازی، تغییر سرعت، عملکردهای جلو و عقب به مدت 30 ثانیه.
سعی کنید از iTunes API به عنوان نقطه شروع استفاده کنید. اگر منبع دیگری می شناسید، لطفا در نظرات ارسال کنید.
عکسی که از صفحه ی اسکرین گرفته میشود
سلام! من الان دارم از صفحه نمایشم فیلم میگیرم!
یک برنامه دسکتاپ یا وب ایجاد کنید که به شما امکان می دهد از صفحه خود عکس بگیرید و کلیپ را به عنوان ذخیره کنید .gif
در اینجا این است چگونه می توان به این امر دست یافت.
منابع
منبع: www.habr.com