Преден доџо: проекти за обука на вештини за развивачи (5 нови + 43 стари)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Статијата е преведена со поддршка на софтверот EDISON, кој разрабатывает приложения и сайтыИ инвестира во стартапи.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Бонус: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

Гифски конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Забелешка: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Бонус: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Забелешка: тука е GitHub example repository.

Подборка проектов из предыдущих публикаций.

слој

www.reddit.com/r/layer

Слој е заедница каде што секој може да нацрта пиксел на заедничка „табла“. Оригиналната идеја се роди на Reddit. Заедницата r/Layer е метафора за заедничката креативност, дека секој може да биде креатор и да придонесе за заедничка кауза.

Што ќе научите кога креирате сопствен Layer проект:

• Како функционира JavaScript платното Знаењето како да се ракува со платно е критична вештина во многу апликации.
• Како да ги координирате корисничките дозволи. Секој корисник може да нацрта по еден пиксел на секои 15 минути без да мора да се најави.
• Креирајте сесии за колачиња.

Squoosh

squoosh.app

Squoosh е апликација за компресија на слики со многу напредни опции.

GIF 20 MB

Со создавање на своја сопствена верзија на Squoosh ќе научите:

• Како да работите со големини на слики
• Научете ги основите на Drag'n'Drop API
• Разберете како функционираат API и слушателите на настани
• Како да испраќате и извезувате датотеки

Забелешка: Компресорот за слика е локален. Не е неопходно да се испраќаат дополнителни податоци на серверот. Можете да го имате компресорот дома или да го користите на сервер по ваш избор.

Калкулатор

Ајде? Сериозно? Калкулатор? Да, точно, калкулатор. Разбирањето на основите на математичките операции и како тие работат заедно е критична вештина за поедноставување на вашите апликации. Порано или подоцна ќе треба да се справите со бројки и колку порано, толку подобро.

jarodburchill.github.io/CalculatorReactApp

Со креирање на свој калкулатор ќе научите:

• Работете со бројки и математички операции
• Вежбајте со API на слушатели на настани
• Како да распоредите елементи, да ги разберете стиловите

Роботека (пребарувач)

Секој користел пребарувач, па зошто да не креирате свој? Потребни се роботи за пребарување на информации. Сите ги користат секој ден и побарувачката за оваа технологија и специјалисти само ќе расте со текот на времето.

Google пребарувач

Што ќе научите со создавање сопствен пребарувач:

• Како функционираат роботите
• Како да индексирате страници и како да ги рангирате по рејтинг и репутација
• Како да складирате индексирани страници во база на податоци и како да работите со базата на податоци

Музички плеер (Spotify, Apple Music)

Секој слуша музика - тоа е само составен дел од нашите животи. Ајде да создадеме музички плеер за подобро да разбереме како функционира основната механика на модерната платформа за стриминг музика.

Spotify

Што ќе научите со создавање на своја сопствена платформа за стриминг музика:

• Како да работите со API. користете API од Spotify или Apple Music
• Како да репродуцирате, паузирате или премотувате назад на следната/претходната песна
• Како да ја смените јачината на звукот
• Како да управувате со рутирањето на корисникот и историјата на прелистувачот

Апликација за пребарување филмови користејќи React (со куки)

Првото нешто со кое можете да започнете е да креирате апликација за пребарување филмови користејќи React. Подолу е слика за тоа како ќе изгледа конечната апликација:

Што ќе научиш
Со градење на оваа апликација, ќе ги подобрите вашите вештини за React со користење на релативно новиот Hooks API. Примерниот проект користи компоненти на React, многу куки, надворешен API и секако одреден стил на CSS.

Технолошки оџак и карактеристики

• Реагирајте со куки
• креирај-реагира-апликација
• Jsx
• CSS

Без користење на класи, овие проекти ви даваат совршена влезна точка во функционалниот React и дефинитивно ќе ви помогнат во 2020 година. Можеш да најдеш пример проект овде. Следете ги упатствата или направете го ваш.

Апликација за разговор со Vue

Друг одличен проект што треба да го направите е да креирате апликација за разговор користејќи ја мојата омилена библиотека JavaScript: VueJS. Апликацијата ќе изгледа вака:

Што ќе научиш
Во ова упатство, ќе научите како да направите апликација Vue од нула - создавање компоненти, ракување со состојба, креирање маршрути, поврзување со услуги од трети страни, па дури и ракување со автентикација.

Технолошки оџак и карактеристики

• Vue
• vuex
• Vue рутер
• Vue CLI
• Тласкач
• CSS

Ова е навистина одличен проект за да започнете со Vue или да ги подобрите вашите постоечки вештини за да започнете со развој во 2020 година. Можеш да најдеш туторијал овде.

Прекрасна апликација за временски услови со Angular 8

Овој пример ќе ви помогне да креирате убава апликација за временски услови користејќи Angular 8:

Што ќе научиш
Овој проект ќе ве научи на вредни вештини за градење апликации од нула - од дизајн до развој, па сè до апликација подготвена за распоредување.

Технолошки оџак и карактеристики

• Аголна 8
• Firebase
• Рендерирање од страна на серверот
• CSS со Grid и Flexbox
• Пријателски на мобилен и приспособливост
• Темен режим
• Прекрасен интерфејс

Она што навистина го сакам во овој сеопфатен проект е тоа што не ги проучувате работите изолирано. Наместо тоа, го учите целиот процес на развој, од дизајн до конечно распоредување.

Апликација To-Do користејќи Svelte

Svelte е како новото дете на пристапот базиран на компоненти - барем сличен на React, Vue и Angular. И ова е еден од најжешките нови производи за 2020 година.

Апликациите за задачи не се нужно најжешката тема, но навистина ќе ви помогнат да ги усовршите вашите вештини Svelte. Ќе изгледа вака:

Што ќе научиш
Овој туторијал ќе ви покаже како да креирате апликација користејќи Svelte 3, од почеток до крај. Ќе користите компоненти, стајлинг и ракувачи со настани

Технолошки оџак и карактеристики

• Светло 3
• Компоненти
• Стајлирање со CSS
• ES 6 синтакса

Нема многу добри стартни проекти Svelte, па најдов ова е добра опција за почеток.

Апликација за е-трговија користејќи Next.js

Next.js е најпопуларната рамка за градење на React апликации кои поддржуваат прикажување надвор од кутијата од страна на серверот.

Овој проект ќе ви покаже како да креирате апликација за е-трговија која изгледа вака:

Што ќе научиш
Во овој проект, ќе научите како да се развивате со Next.js - да создавате нови страници и компоненти, да извлекувате податоци и да стилизирате и распоредите Next апликација.

Технолошки оџак и карактеристики

• Следно.js
• Компоненти и страници
• Земање примероци на податоци
• Стајлинг
• Распоредување на проектот
• РБС и СПА

Секогаш е одлично да се има пример од реалниот свет како апликација за е-трговија за да научите нешто ново. Ти можеш најдете го упатството овде.

Целосно повеќејазичен блог со Nuxt.js

Nuxt.js е за Vue, што е Next.js за React: одлична рамка за комбинирање на моќта на рендерирање од страна на серверот и апликации на една страница
Конечната апликација што можете да ја креирате ќе изгледа вака:

Што ќе научиш

Во овој примерок проект, ќе научите како да креирате целосна веб-локација користејќи Nuxt.js, од првичното поставување до конечното распоредување.

Искористува многу од одличните карактеристики што ги нуди Nuxt, како што се страници и компоненти и стилизирање со SCSS.

Технолошки оџак и карактеристики

• Nuxt.js
• Компоненти и страници
• Модул за блок на приказни
• Хаг риба
• Vuex за управување со државата
• SCSS за стилизирање
• Nuxt Middlewares

Ова е навистина кул проект, кој вклучува многу одлични функции на Nuxt.js. Јас лично сакам да работам со Nuxt, па затоа треба да го пробате бидејќи исто така ќе ве направи одличен развивач на Vue.

Блог со Гетсби

Гетсби е одличен генератор на статички страници користејќи React и GraphQL. Ова е резултат на проектот:

Што ќе научиш

Во ова упатство, ќе научите како да го користите Гетсби за да креирате блог што ќе го користите за да пишувате свои написи користејќи React и GraphQL.

Технолошки оџак и карактеристики

• Гетсби
• Реагираат
• GraphQL
• Приклучоци и теми
• MDX/Markdown
• CSS за подигање
• шаблони

Ако некогаш сте сакале да започнете блог, ова е одличен пример за тоа како да го направите користејќи React и GraphQL.

Не велам дека WordPress е лош избор, но со Гетсби можете да изградите веб-страници со високи перформанси користејќи React - што е неверојатна комбинација.

Блог со Gridsome

Gridsome за Vue... Добро, веќе го имавме ова со Next/Nuxt.
Но, истото важи и за Гридсом и Гетсби. И двете користат GraphQL како нивен слој на податоци, но Gridsome користи VueJS. Ова е исто така неверојатен генератор на статички страници што ќе ви помогне да креирате одлични блогови:

Што ќе научиш

Овој проект ќе ве научи како да креирате едноставен блог за да започнете со Gridsome, GraphQL и Markdown. Исто така, опфаќа како да се распореди апликација преку Netlify.

Технолошки оџак и карактеристики

• Грозен
• Vue
• GraphQL
• Markdown
• нетолизираат

Ова секако не е најсеопфатното упатство, но ги опфаќа основните концепти на Gridsome и Markdown може да биде добра почетна точка.

Аудио плеер сличен на SoundCloud со помош на Quasar

Quasar е уште една Vue рамка која може да се користи за креирање мобилни апликации. Во овој проект ќе креирате апликација за аудио плеер, на пример:

Што ќе научиш

Додека другите проекти се фокусираат главно на веб-апликации, овој ќе ви покаже како да креирате мобилна апликација користејќи Vue и рамката Quasar.
Веќе треба да имате Cordova што работи со конфигуриран Android Studio/Xcode. Ако не, прирачникот има врска до веб-страницата на Quasar каде што ви покажуваат како да поставите сè.

Технолошки оџак и карактеристики

• Quasar
• Vue
• Cordova
• WaveSurfer
• Компоненти на UI

Мал проект, покажувајќи ги способностите на Quasar за креирање мобилни апликации.

Форма кредитной карты

Прекрасна форма на кредитна картичка со мазни и пријатни микро-интеракции. Вклучува форматирање на броеви, верификација и автоматско откривање на типот на картичката. Изграден е на Vue.js и исто така целосно реагира. (Можете да видите тука.)

образец за кредитна картичка

Што ќе научите:

• Обработете и потврдете ги формуларите
• Ракувајте со настани (на пример, кога полињата се менуваат)
• Разберете како да ги прикажете и поставите елементите на страницата, особено информациите за кредитната картичка што се појавуваат на врвот на формуларот

графика

Хистограм е графикон или графикон кој претставува категорични податоци со правоаголни шипки со висини или должини пропорционални на вредностите што тие ги претставуваат.

Тие можат да се применат вертикално или хоризонтално. Вертикалната лента со дијаграм понекогаш се нарекува линиска шема.

Што ќе научите:

• Приказ на податоци на структуриран и разбирлив начин
• Дополнително: Научете како да го користите елементот canvas и како се цртаат елементи со него

Тука можете да најдете податоци за светската популација. Тие се подредени по година.

Анимация сердечка Twitter

Твитер во 2016 година ја претстави оваа неверојатна анимација за своите твитови. Од 2019 година, сè уште изгледа како дел, па зошто да не креирате сами?

Што ќе научите:

• Работете со атрибут CSS keyframes
• Манипулирајте и анимирајте HTML елементи
• Комбинирајте JavaScript, HTML и CSS

Репозитории GitHub с функцией поиска

Нема ништо фенси тука - складиштата на GitHub се само прославена листа.
Целта е да се прикажат складиштата и да се овозможи корисникот да ги филтрира. Користете официјално GitHub API за да добиете складишта за секој корисник.

Профил на GitHub - github.com/indreklasn

Што ќе научите:

• Примајте податоци од API
• Прикажи податоци од API
• Филтрирајте и прикажете релевантни податоци за секое пребарување
• Изборно: ако сте подготвени за предизвик, користете API v4, изграден со помош на GraphQL. Ако сакате да научите GraphQL, одете на една од моите претходни статии.

Чаты в стиле Reddit

Разговорите се популарен начин на комуникација поради нивната едноставност и леснотија на користење. Но, што навистина ги поттикнува модерните виртуелни простории за разговор? WebSockets!

Што ќе научите:

• Користете WebSockets, комуникација во реално време и ажурирања на податоци
• Работете со нивоа на пристап на корисници (на пример, сопственикот на канал за разговор ја има улогата adminи други во собата - user)
• Обработете и проверувајте ги формуларите - запомнете, прозорецот за разговор за испраќање порака е input
• Креирајте и придружете се на различни разговори
• Работете со лични пораки. Корисниците можат приватно да разговараат со други корисници. Во суштина, ќе воспоставите врска WebSocket помеѓу двајца корисници.

Навигация в стиле Stripe

Она што ја прави оваа навигација уникатна е тоа што контејнерот за поповер се трансформира за да одговара на содржината. Има елеганција во оваа транзиција во споредба со традиционалното однесување на отворање и затворање на нов поповер.

Што ќе научите:

• Комбинирајте CSS анимации со транзиции
• Затемнете ја содржината и применете ја активна класа на подвижниот елемент

Pacman

Создадете своја сопствена верзија на Pacman. Ова е одличен начин да се добие идеја за тоа како се развиваат игрите и да се разберат основите. Користете JavaScript рамка, React или Vue.

Ти ќе научиш:

• Како се движат елементите
• Како да одредите кои копчиња да ги притиснете
• Како да се одреди моментот на судир
• Можете да одите понатаму и да додадете контрола на движењето на духовите

Ќе најдете пример за овој проект во складиштето GitHub

управување со корисници

Проект во складиштето GitHub

Создавањето апликација од типот CRUD за корисничка администрација ќе ве научи на основите на развојот. Ова е особено корисно за новите програмери.

Ти ќе научиш:

• Што е рутирање
• Како да ракувате со формулари за внесување податоци и да проверите што внесол корисникот
• Како да работите со базата на податоци - креирајте, читајте, ажурирајте и бришете дејства

Проверка погоды в вашем местоположении

Проект во складиштето GitHub

Ако сакате да креирате апликации, започнете со апликација за временска прогноза. Овој проект може да се заврши со користење на Swift.

Покрај стекнувањето искуство за градење апликација, ќе научите:

• Како да работите со API
• Како да користите геолокација
• Направете ја вашата апликација подинамична со додавање на внесување текст. Во него корисниците ќе можат да ја внесат својата локација за да го проверат времето на одредена локација.

Ќе ви треба API. За да добиете податоци за времето, користете го OpenWeather API. Повеќе информации за OpenWeather API тука.

Окно чата

Мојот прозорец за разговор е во акција, отворен во две јазичиња на прелистувачот

Создавањето прозорец за разговор е совршен начин да започнете со приклучоци. Изборот на технолошки оџак е огромен. Node.js, на пример, е совршен.

Ќе научите како работат сокетите и како да ги имплементирате. Ова е главната предност на овој проект.

Ако сте развивач на Laravel кој сака да работи со сокети, прочитајте го мојот статью

GitLab CI

Извор

Ако сте нови за континуирана интеграција (CI), играјте си со GitLab CI. Поставете неколку околини и обидете се да извршите неколку тестови. Тоа не е многу тежок проект, но сигурен сум дека ќе научите многу од него. Многу развојни тимови сега користат CI. Корисно е да знаете како да го користите.

Ти ќе научиш:

• Што е GitLab CI
• Како да конфигурирате .gitlab-ci.ymlшто му кажува на корисникот на GitLab што да прави
• Како да се распоредите во други средини

Анализатор сайтов

Направете стругалка што ја анализира семантиката на веб-страниците и ја создава нивната оцена. На пример, можете да проверите дали недостасуваат алт-ознаки на сликите. Или проверете дали страницата има мета-ознаки за оптимизација. Скрепер може да се создаде без кориснички интерфејс.

Ти ќе научиш:

• Како работи стругалката?
• Како да креирате DOM селектори
• Како да напишете алгоритам
• Ако не сакате да застанете тука, креирајте кориснички интерфејс. Можете исто така да креирате извештај за секоја веб-локација што ја проверувате.

Определение настроений в социальных сетях

Извор

Откривањето чувства на социјалните медиуми е одличен начин да се запознаете со машинското учење.

Можете да започнете со анализа на само една социјална мрежа. Секој обично започнува со Твитер.

Ако веќе имате искуство со машинско учење, обидете се да собирате податоци од различни социјални мрежи и да ги комбинирате.

Ти ќе научиш:

• Што е машинско учење

Клон Trello

Трело клон од Индрек Ласн.

Што ќе научите:

• Организација на рути за обработка на барања (Рутирање).
• Повлечи и пушти.
• Како да креирате нови објекти (табли, списоци, картички).
• Обработка и проверка на влезните податоци.
• Од страната на клиентот: како да користите локално складирање, како да зачувате податоци во локално складирање, како да читате податоци од локално складирање.
• Од страната на серверот: како да користите бази на податоци, како да зачувате податоци во базата на податоци, како да читате податоци од базата на податоци.

Еве пример за складиште, направен во React+Redux.

Панель админа

Репозиториум Github.

Едноставна апликација CRUD, идеална за учење на основите. Да научиме:

• Креирајте корисници, управувајте со корисници.
• Интеракција со базата на податоци - креирајте, читајте, уредувајте, бришете корисници.
• Потврдување на влез и работа со формулари.

Трекер криптовалют (нативное мобильное приложение)

Складиште на Github.

Нешто: Swift, Objective-C, React Native, Java, Kotlin.

Ајде да учиме:

• Како работат мајчин апликации.
• Како да преземете податоци од API.
• Како функционираат распоредите на матичните страници.
• Како да работите со мобилни симулатори.

Пробајте го ова API. Ако најдете нешто подобро, пишете во коментар.

Ако те интересира, еве го еве туторијал.

Настроить собственный конфиг webpack с нуля

Технички, ова не е апликација, но е многу корисна задача да се разбере како работи веб-пакетот одвнатре. Сега тоа нема да биде „црна кутија“, туку разбирлива алатка.

Барања:

• Компајлирајте es7 до es5 (основни).
• Компајлирајте го jsx во js - или - .vue во .js (ќе мора да научите натоварувачи)
• Поставете сервер за развој на веб-пакет и повторно вчитување на топол модул. (vue-cli и create-react-app ги користат и двете)
• Користете Heroku, now.sh или Github, научете како да распоредите проекти на веб-пакети.
• Поставете го вашиот омилен препроцесор да компајлира css - scss, помалку, игла.
• Научете како да користите слики и svgs со веб-пакет.

Ова е неверојатен ресурс за комплетни почетници.

Клон Hackernews

Од секој џедај се бара да направи свој Hackernews.

Што ќе научите на патот:

• Како да комуницирате со hackernews API.
• Како да креирате апликација со една страница.
• Како да се имплементираат функции како што се гледање коментари, индивидуални коментари, профили.
• Организација на рути за обработка на барања (Рутирање).

Тудушечка

TodoMVC.

Сериозно? Тудушка? Ги има илјадници. Но, верувајте ми, има причина за оваа популарност.
Апликацијата Tudu е одличен начин да се уверите дека ги разбирате основите. Обидете се да напишете една апликација во ванила Javascript и една во вашата омилена рамка.

Научете:

• Создадете нови задачи.
• Проверете дали се пополнети полињата.
• Филтрирајте задачи (завршени, активни, сите). Користете filter и reduce.
• Разберете ги основите на Javascript.

Сортируемый drag and drop список

Складиште на Github.

Многу е корисно да се разбере повлечете и испуштете го api.

Да научиме:

• Повлечете и испуштете го API
• Креирајте богати интерфејси

Клон мессенджера (нативное приложение)

Ќе разберете како функционираат и веб-апликациите и мајчин апликации, што ќе ве издвои од сивата маса.

Што ќе проучуваме:

• Веб приклучоци (инстант пораки)
• Како работат мајчин апликации.
• Како работат шаблоните во домашните апликации.
• Организирање правци за обработка на барања во домашни апликации.

Уредувач на текст

Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.

В какой-то момент каждый использовал текстовый редактор. Так почему бы не создать его самостоятельно?

Клон Reddit

reddit — это агрегация социальных новостей, рейтинг веб-контента и сайт для обсуждений.

Reddit — занимает большую часть моего времени, но я продолжаю зависать на нем. Создание клона Reddit — это эффективный способ изучения программирования (при одновременном просмотре Reddit).

Reddit предоставляет вам очень богатый API. Не упускайте какие-либо функции и не делайте как попало. В реальном мире с клиентами и покупателями, вы не сможете работать как попало, или вы быстро потеряете работу.

Умные клиенты сразу же догадаются, что работа выполняется плохо, и найдут кого-то другого.

Reddit API

Публикация пакета NPM с открытым исходным кодом

Если вы пишите код на Javascript, скорее всего, вы используете менеджер пакетов. Менеджер пакетов позволяет повторно использовать существующий код, который написали и опубликовали другие люди.

Понимание полного цикла разработки пакета даст очень хороший опыт. Есть много вещей, которые вам нужно знать при публикации кода. Вам нужно подумать о безопасности, семантическом управлении версиями, масштабируемости, соглашениях об именах и обслуживании.

Пакет может быть любым. Если у вас нет идеи, создайте свой собственный Lodash и опубликуйте его.

Lodash: lodash.com

Наличие чего-то, что вы сделали в Интернете, ставит вас на 10% выше других. Вот некоторые полезные ресурсы об открытых источниках и пакетах.

Учебный план freeCodeCamp

FCC curriculum

freeCodecamp собрал очень всеобъемлющий курс по программированию.

freeCodeCamp — это некоммерческая организация. Она состоит из интерактивной обучающей веб-платформы, онлайн-форума сообщества, чатов, публикаций Medium и местных организаций, которые намереваются сделать доступным для всех изучение веб-разработки.

Вы будете более чем квалифицированы для своей первой работы, если вам удастся завершить весь курс.

Создайте HTTP-сервер с нуля

Протокол HTTP является одним из основных протоколов, по которым контент попадает в Интернете. HTTP-серверы используются для обслуживания статического контента, такого как HTML, CSS и JS.

Возможность реализовать протокол HTTP с нуля расширит ваши знания о том, как все взаимодействует.

Например, если вы используете NodeJs, то вы знаете что Express предоставляет HTTP-сервер.

Для справки, посмотрите, сможете ли вы:

• Настроить сервер без использования каких-либо библиотек
• Сервер должен обслуживать содержимое HTML, CSS и JS.
• Внедрение маршрутизатора с нуля
• Следить за изменениями и обновлять сервер

Если вы не знаете с чего, воспользуйтесь Go lang и попытайтесь создать HTTP-сервер Caddy од нула.

Десктопное приложение для заметок

Мы все делаем заметки, не так ли?

Давайте создадим приложение для заметок. Приложению необходимо сохранять заметки и синхронизировать их с базой данных. Создайте нативное приложение с помощью Electron, Swift или чего-то еще, что вам нравится, и что подходит для вашей системы.

Не стесняйтесь сочетать это с первым челленджом(текстовый редактор).

В качестве бонуса попробуйте синхронизировать десктопную версию с веб-версией.

Подкасты (клон Overcast)

Кто не слушает подкасты?

Создайте веб-приложение со следующими функциями:

• Направете сметка
• Поиск подкастов
• Оценивать и подписываться на подкасты
• Остановка и воспроизведение, изменение скорости, функции вперед и назад на 30 секунд.

В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Снимање на екранот

Привет! Я снимаю свой экран прямо сейчас!

Создайте десктопное или веб-приложение, которое позволит вам захватить ваш экран и сохранить клип как .gif

тука е некои совети, как добиться этого.

Извори

• Уште 5 смели проекти за обука за развивачот (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 проекти за усовршување на вашите Front-End вештини
• Шест задачи за развивач на Front-End
• Забавна практика за развивач
• 8 едукативни проекти
• Друга листа на проекти за вежбање

Извор: www.habr.com