ПроХостер > блог > интернет вести > Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Как запускать и выполнять код (server-side) в браузере (client-side).
Считывать входные данные (исходный код) и выводить на экран результат выполнения.
Как создавать файлы и папки в вебе и сохранять результаты.
Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
Бонус: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
Гифски конвертирует видео в GIF используя функциипнгкуант для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Лаиер је заједница у којој свако може да нацрта пиксел на заједничкој „плочи“. Оригинална идеја је рођена на Реддиту. Заједница р/Лаиер је метафора за заједничку креативност, да свако може да буде креатор и да допринесе заједничком циљу.
Шта ћете научити када креирате сопствени Лаиер пројекат:
Како функционише ЈаваСцрипт цанвас Познавање управљања платном је критична вештина у многим апликацијама.
Како ускладити корисничке дозволе. Сваки корисник може да нацрта један пиксел сваких 15 минута без потребе да се пријављује.
Скуоосх је апликација за компресију слика са много напредних опција.
ГИФ 20 МБ
Креирањем сопствене верзије Скуоосх-а научићете:
Како радити са величинама слика
Научите основе Драг'н'Дроп АПИ-ја
Схватите како функционишу АПИ и слушаоци догађаја
Како да отпремите и извезете датотеке
Напомена: Компресор слике је локални. Није потребно слати додатне податке на сервер. Компресор можете имати код куће, или га можете користити на серверу, по вашем избору.
Рачунар
Хајде? Озбиљно? Калкулатор? Да, тачно, калкулатор. Разумевање основа математичких операција и начина на који оне функционишу је кључна вештина за поједностављење ваших апликација. Пре или касније ћете морати да се носите са бројевима и што пре то боље.
Сви су користили претраживач, па зашто не бисте направили свој? Покретачи су потребни за тражење информација. Сви их користе сваки дан и потражња за овом технологијом и стручњацима ће временом само расти.
Гоогле претраживач
Шта ћете научити креирањем сопственог претраживача:
Како раде пузачи
Како индексирати сајтове и како их рангирати по рејтингу и репутацији
Како складиштити индексиране сајтове у бази података и како радити са базом података
Музички плејер (Спотифи, Аппле Мусиц)
Сви слушају музику - то је само саставни део наших живота. Хајде да направимо музички плејер да бисмо боље разумели како функционише основна механика модерне платформе за стримовање музике.
Спотифи
Шта ћете научити креирањем сопствене платформе за стриминг музике:
Како радити са АПИ-јем. користите АПИ из Спотифи-а или Аппле Мусиц-а
Како пустити, паузирати или премотати на следећу/претходну нумеру
Како променити јачину звука
Како да управљате усмеравањем корисника и историјом прегледача
Апликација за претрагу филмова користећи Реацт (са кукицама)
Прва ствар са којом бисте могли да почнете је да направите апликацију за претрагу филмова користећи Реацт. Испод је слика како ће изгледати коначна апликација:
Шта ћете научити
Изградњом ове апликације, побољшаћете своје Реацт вештине коришћењем релативно новог Хоокс АПИ-ја. Пример пројекта користи Реацт компоненте, много кукица, екстерни АПИ и наравно неки ЦСС стил.
Технолошки скуп и карактеристике
Реагујте кукама
цреате-реацт-апп
ЈСКС
ЦСС
Без коришћења икаквих класа, ови пројекти вам дају савршену улазну тачку у функционални Реацт и дефинитивно ће вам помоћи у 2020. можете наћи пример пројекта овде. Пратите упутства или га направите сами.
Апликација за ћаскање са Вуе-ом
Још један одличан пројекат који треба да урадите је да направите апликацију за ћаскање користећи моју омиљену ЈаваСцрипт библиотеку: ВуеЈС. Апликација ће изгледати отприлике овако:
Шта ћете научити
У овом водичу ћете научити како да направите Вуе апликацију од нуле – креирање компоненти, руковање стањем, креирање рута, повезивање са услугама трећих страна, па чак и руковање аутентификацијом.
Технолошки скуп и карактеристике
Вуе
вуек
Вуе Роутер
Вуе ЦЛИ
Лактарош
ЦСС
Ово је заиста сјајан пројекат за почетак рада са Вуе-ом или побољшање постојећих вештина да бисте ушли у развој 2020. можете наћи туториал овде.
Апликација за лепе временске прилике са Ангулар 8
Овај пример ће вам помоћи да направите прелепу временску апликацију користећи Ангулар 8:
Шта ћете научити
Овај пројекат ће вас научити вредним вештинама у изградњи апликација од нуле - од дизајна преко развоја, па све до апликације спремне за примену.
Технолошки скуп и карактеристике
Угаона 8
Фиребасе
Рендеровање на страни сервера
ЦСС са Грид и Флекбок-ом
Погодан за мобилне уређаје и прилагодљивост
Темниј режим
Прелеп интерфејс
Оно што заиста волим код овог свеобухватног пројекта је то што ствари не проучавате изоловано. Уместо тога, научите цео процес развоја, од дизајна до коначног постављања.
Апликација То-До користећи Свелте
Свелте је као ново дете у приступу заснованом на компонентама - барем сличан Реацт, Вуе и Ангулар. А ово је један од најтоплијих нових производа за 2020.
Апликације које треба обавити нису нужно најтоплија тема, али ће вам заиста помоћи да усавршите своје Свелте вештине. То ће изгледати овако:
Шта ћете научити
Овај водич ће вам показати како да креирате апликацију користећи Свелте 3, од почетка до краја. Користићете компоненте, стилове и руковаоце догађајима
Нект.јс је најпопуларнији оквир за прављење Реацт апликација које подржавају рендеровање на страни сервера из кутије.
Овај пројекат ће вам показати како да креирате апликацију за е-трговину која изгледа овако:
Шта ћете научити
У овом пројекту ћете научити како да развијате са Нект.јс — креирате нове странице и компоненте, издвајате податке и стилизујете и примењујете Нект апликацију.
Технолошки скуп и карактеристике
Нект.јс
Компоненте и странице
Узорковање података
Стилизација
Пројецт Деплоимент
ССР и СПА
Увек је сјајно имати пример из стварног света као што је апликација за е-трговину да бисте научили нешто ново. Можете пронађите туторијал овде.
Пуноправни вишејезични блог са Нукт.јс
Нукт.јс је за Вуе, оно што је Нект.јс за Реацт: одличан оквир за комбиновање снаге рендеровања на страни сервера и апликација на једној страници
Коначна апликација коју можете креирати ће изгледати овако:
Шта ћете научити
У овом огледном пројекту научићете како да направите комплетну веб локацију користећи Нукт.јс, од почетног подешавања до коначног постављања.
Користи предности многих сјајних функција које Нукт може да понуди, као што су странице и компоненте, и стилизовање помоћу СЦСС-а.
Технолошки скуп и карактеристике
Нукт.јс
Компоненте и странице
Сториблоцк модул
Хагфисх
Вуек за управљање државом
СЦСС за стилизовање
Нукт миддлеварес
Ово је заиста кул пројекат, који укључује многе сјајне функције Нукт.јс. Ја лично волим да радим са Нуктом, тако да би требало да га испробате јер ће вас то такође учинити одличним Вуе програмером.
Блог са Гатсбијем
Гатсби је одличан генератор статичких локација који користи Реацт и ГрапхКЛ. Ово је резултат пројекта:
Шта ћете научити
У овом водичу ћете научити како да користите Гатсби за креирање блога који ћете користити за писање сопствених чланака користећи Реацт и ГрапхКЛ.
Технолошки скуп и карактеристике
Гатсби
Реаговати
ГрапхКЛ
Додаци и теме
МДКС/Маркдовн
Боотстрап ЦСС
шаблони
Ако сте икада желели да покренете блог, ово је сјајан пример о томе како то направити користећи Реацт и ГрапхКЛ.
Не кажем да је ВордПресс лош избор, али са Гатсбијем можете да правите веб локације високих перформанси користећи Реацт – што је невероватна комбинација.
Блог са Гридсомеом
Гридсоме за Вуе... У реду, већ смо имали ово са Нект/Нукт-ом.
Али исто важи и за Гридсомеа и Гатсбија. Оба користе ГрапхКЛ као свој слој података, али Гридсоме користи ВуеЈС. Ово је такође невероватан генератор статичког сајта који ће вам помоћи да креирате сјајне блогове:
Шта ћете научити
Овај пројекат ће вас научити како да направите једноставан блог да бисте започели са Гридсоме, ГрапхКЛ и Маркдовн. Такође покрива како да примените апликацију преко Нетлифи-а.
Аудио плејер сличан СоундЦлоуд-у који користи Куасар
Куасар је још један Вуе оквир који се може користити за креирање мобилних апликација. У овом пројекту ћете креирати апликацију за аудио плејер, на пример:
Шта ћете научити
Док се други пројекти фокусирају углавном на веб апликације, овај ће вам показати како да направите мобилну апликацију користећи Вуе и Куасар фрамеворк.
Већ би требало да имате Цордова која ради са конфигурисаним Андроид Студио/Ксцоде. Ако не, приручник има везу до веб локације Куасар где вам показују како да све подесите.
Технолошки скуп и карактеристике
Куасар
Вуе
цордова
ВавеСурфер
УИ Цомпонентс
Мали пројекат, демонстрирајући Куасарове могућности за креирање мобилних апликација.
Форма кредитной карты
Цоол облик кредитне картице са глатким и пријатним микро интеракцијама. Укључује форматирање бројева, верификацију и аутоматско откривање типа картице. Изграђен је на Вуе.јс и такође је потпуно прилагодљив. (Можете видети овде.)
Руковање догађајима (на пример, када се поља промене)
Схватите како да прикажете и поставите елементе на страницу, посебно информације о кредитној картици које се појављују на врху обрасца
графикон
Хистограм је графикон или графикон који представља категоричке податке са правоугаоним тракама са висинама или дужинама пропорционалним вредностима које представљају.
Могу се применити вертикално или хоризонтално. Вертикални тракасти графикон се понекад назива линијским графиконом.
Шта ћете научити:
Прикажите податке на структуриран и разумљив начин
Додатно: Научите како да користите елемент canvas и како се њиме цртају елементи
Овде можете пронаћи податке о светској популацији. Разврстани су по годинама.
Анимация сердечка Twitter
Још 2016. године, Твитер је представио ову невероватну анимацију за своје твитове. Од 2019. и даље изгледа као део, па зашто га не бисте сами направили?
Шта ћете научити:
Радите са ЦСС атрибутом keyframes
Манипулишите и анимирајте ХТМЛ елементе
Комбинујте ЈаваСцрипт, ХТМЛ и ЦСС
Репозитории GitHub с функцией поиска
Овде нема ничег фенси – ГитХуб спремишта су само прослављена листа.
Циљ је приказати спремишта и омогућити кориснику да их филтрира. Користите званични ГитХуб АПИ да добијете спремишта за сваког корисника.
Ћаскања су популаран начин комуникације због своје једноставности и лакоће коришћења. Али шта заиста подстиче модерне собе за ћаскање? ВебСоцкетс!
Шта ћете научити:
Користите ВебСоцкетс, комуникацију у реалном времену и ажурирање података
Радите са нивоима приступа корисника (на пример, власник канала за ћаскање има улогу admin, и остали у просторији - user)
Обрадите и потврдите обрасце - запамтите, прозор за ћаскање за слање поруке је input
Креирајте и придружите се различитим четовима
Радите са личним порукама. Корисници могу приватно да ћаскају са другим корисницима. У суштини, успоставићете ВебСоцкет везу између два корисника.
Навигация в стиле Stripe
Оно што ову навигацију чини јединственом је то што се искачући контејнер трансформише тако да одговара садржају. Постоји елеганција у овој транзицији у поређењу са традиционалним понашањем отварања и затварања новог поповер-а.
Шта ћете научити:
Комбинујте ЦСС анимацију са прелазима
Затамните садржај и примените активну класу на лебдећи елемент
Пацман
Направите сопствену верзију Пацмана. Ово је одличан начин да добијете идеју о томе како се игре развијају и разумете основе. Користите ЈаваСцрипт оквир, Реацт или Вуе.
Ако желите да правите апликације, почните са апликацијом за временску прогнозу. Овај пројекат се може завршити коришћењем Свифт-а.
Поред стицања искуства у изради апликације, научићете:
Како радити са АПИ-јем
Како користити геолокацију
Учините своју апликацију динамичнијом додавањем уноса текста. У њему ће корисници моћи да унесу своју локацију како би проверили временске прилике на одређеној локацији.
Биће вам потребан АПИ. Да бисте добили податке о времену, користите ОпенВеатхер АПИ. Више информација о ОпенВеатхер АПИ-ју овде.
Окно чата
Мој прозор за ћаскање у акцији, отворен у две картице прегледача
Прављење прозора за ћаскање је савршен начин да почнете са утичницама. Избор технологије је огроман. Ноде.јс је, на пример, савршен.
Научићете како функционишу сокети и како их применити. Ово је главна предност овог пројекта.
Ако сте Ларавел програмер који жели да ради са утичницама, прочитајте мој статью
Ако сте нови у континуираној интеграцији (ЦИ), поиграјте се са ГитЛаб ЦИ. Подесите неколико окружења и покушајте да покренете неколико тестова. То није баш тежак пројекат, али сам сигуран да ћете из њега много научити. Многи развојни тимови сада користе ЦИ. Корисно је знати како га користити.
Научићеш:
Шта је ГитЛаб ЦИ
Како конфигурисати .gitlab-ci.ymlкоји говори кориснику ГитЛаб-а шта да ради
Како да се примени у другим окружењима
Анализатор сайтов
Направите стругач који анализира семантику веб локација и креира њихов рејтинг. На пример, можете да проверите да ли недостају алт ознаке на сликама. Или проверите да ли страница има СЕО мета ознаке. Сцрапер се може креирати без корисничког интерфејса.
Научићеш:
Како ради стругач?
Како направити ДОМ селекторе
Како написати алгоритам
Ако не желите да се зауставите на томе, направите кориснички интерфејс. Такође можете да направите извештај о свакој веб локацији коју проверите.
Технички, ово није апликација, али је веома користан задатак да се разуме како вебпак функционише изнутра. Сада то неће бити „црна кутија“, већ разумљив алат.
zahtevi:
Преведите ес7 у ес5 (основе).
Преведите јск у јс - или - .вуе у .јс (мораћете да научите учитаваче)
Подесите вебпацк дев сервер и поновно учитавање врућих модула. (вуе-цли и цреате-реацт-апп користе оба)
Користите Хероку, нов.сх или Гитхуб, научите како да примените пројекте веб пакета.
Подесите свој омиљени предпроцесор да компајлира цсс - сцсс, мање, оловку.
Научите како да користите слике и свгс са веб пакетом.
Озбиљно? Тудушка? Има их на хиљаде. Али верујте ми, постоји разлог за ову популарност.
Апликација Туду је одличан начин да се уверите да разумете основе. Покушајте да напишете једну апликацију у ванилла Јавасцрипт-у и једну у свом омиљеном оквиру.
Научите:
Креирајте нове задатке.
Проверите да ли су поља попуњена.
Филтрирајте задатке (довршени, активни, сви). Користите filter и reduce.
Разумећете како функционишу и веб апликације и изворне апликације, што ће вас издвојити из сиве масе.
Шта ћемо проучавати:
Веб утичнице (инстант поруке)
Како функционишу матичне апликације.
Како шаблони функционишу у изворним апликацијама.
Организовање рута за обраду захтева у матичним апликацијама.
Текст едитор
Сврха уређивача текста је да смањи напор корисника који покушавају да конвертују своје форматирање у важеће ХТМЛ ознаке. Добар уређивач текста омогућава корисницима да форматирају текст на различите начине.
У неком тренутку, сви су користили уређивач текста. Па зашто не креирајте га сами?
Клон Reddit
реддит — это агрегация социальных новостей, рейтинг веб-контента и сайт для обсуждений.
Реддит ми одузима већину времена, али настављам да се дружим на њему. Креирање Реддит клона је ефикасан начин да научите програмирање (док истовремено претражујете Реддит).
Реддит вам пружа веома богат АПИ за. Не изостављајте ниједну функцију и не радите ствари насумично. У стварном свету са клијентима и купцима, не можете да радите насумично или ћете брзо изгубити посао.
Паметни клијенти ће одмах схватити да се посао обавља лоше и наћи ће неког другог.
Ако пишете Јавасцрипт код, велике су шансе да користите менаџер пакета. Менаџер пакета вам омогућава да поново користите постојећи код који су други људи написали и објавили.
Разумевање целог развојног циклуса пакета ће обезбедити веома добро искуство. Постоји много ствари које треба да знате када објављујете код. Морате размишљати о безбедности, семантичком верзионисању, скалабилности, конвенцијама именовања и одржавању.
Пакет може бити било шта. Ако немате идеју, направите свој Лодасх и објавите га.
фрееЦодеЦамп је непрофитна организација. Састоји се од интерактивне платформе за учење засноване на вебу, форума заједнице на мрежи, соба за ћаскање, Медиум публикација и локалних организација које намеравају да учење веб развоја учине доступним свима.
Бићете више него квалификовани за свој први посао ако успете да завршите цео курс.
Создайте HTTP-сервер с нуля
ХТТП протокол је један од главних протокола преко којих садржај путује на Интернет. ХТТП сервери се користе за опслуживање статичког садржаја као што су ХТМЛ, ЦСС и ЈС.
Могућност имплементације ХТТП протокола од нуле прошириће ваше знање о томе како ствари међусобно делују.
На пример, ако користите НодеЈс, онда знате да Екпресс обезбеђује ХТТП сервер.
Хајде да направимо апликацију за белешке. Апликација треба да сачува белешке и да их синхронизује са базом података. Направите матичну апликацију користећи Елецтрон, Свифт или шта год желите и шта ради за ваш систем.
Слободно комбинујте ово са првим изазовом (уређивач текста).
Као бонус, покушајте да синхронизујете своју десктоп верзију са веб верзијом.
Подкасты (клон Overcast)
Ко не слуша подцасте?
Направите веб апликацију са следећим функцијама:
Направи налог
Сеарцх Подцастс
Оцените и претплатите се на подкасте
Зауставите се и играјте, промените брзину, функције унапред и уназад 30 секунди.
В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.