Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

1. Клон Notion

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

ввв.нотион.со

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Чланак је преведен уз подршку ЕДИСОН софтвера, који разрабатывает приложения и сайтыИ улаже у стартапове.

2. Клон Repl.it

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

repl.it

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

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

3. Клон Google Photos

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

www.google.com/photos/about

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

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

4. Клон Gifsky

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

gif.ski

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

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

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

React Native cryptocurrency tracker

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

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

Напомена: ovde је GitHub example repository.

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

слој

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

ввв.реддит.цом/р/лаиер

Лаиер је заједница у којој свако може да нацрта пиксел на заједничкој „плочи“. Оригинална идеја је рођена на Реддиту. Заједница р/Лаиер је метафора за заједничку креативност, да свако може да буде креатор и да допринесе заједничком циљу.

Шта ћете научити када креирате сопствени Лаиер пројекат:

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

Скуоосх

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
скуоосх.апп

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

ГИФ 20 МБФронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Креирањем сопствене верзије Скуоосх-а научићете:

  • Како радити са величинама слика
  • Научите основе Драг'н'Дроп АПИ-ја
  • Схватите како функционишу АПИ и слушаоци догађаја
  • Како да отпремите и извезете датотеке

Напомена: Компресор слике је локални. Није потребно слати додатне податке на сервер. Компресор можете имати код куће, или га можете користити на серверу, по вашем избору.

Рачунар

Хајде? Озбиљно? Калкулатор? Да, тачно, калкулатор. Разумевање основа математичких операција и начина на који оне функционишу је кључна вештина за поједностављење ваших апликација. Пре или касније ћете морати да се носите са бројевима и што пре то боље.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
јародбурцхилл.гитхуб.ио/ЦалцулаторРеацтАпп

Креирањем сопственог калкулатора научићете:

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

Пописивач (претраживач)

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Гоогле претраживач

Шта ћете научити креирањем сопственог претраживача:

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

Музички плејер (Спотифи, Аппле Мусиц)

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Спотифи

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

  • Како радити са АПИ-јем. користите АПИ из Спотифи-а или Аппле Мусиц-а
  • Како пустити, паузирати или премотати на следећу/претходну нумеру
  • Како променити јачину звука
  • Како да управљате усмеравањем корисника и историјом прегледача

Апликација за претрагу филмова користећи Реацт (са кукицама)

Прва ствар са којом бисте могли да почнете је да направите апликацију за претрагу филмова користећи Реацт. Испод је слика како ће изгледати коначна апликација:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити
Изградњом ове апликације, побољшаћете своје Реацт вештине коришћењем релативно новог Хоокс АПИ-ја. Пример пројекта користи Реацт компоненте, много кукица, екстерни АПИ и наравно неки ЦСС стил.

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

  • Реагујте кукама
  • цреате-реацт-апп
  • ЈСКС
  • ЦСС

Без коришћења икаквих класа, ови пројекти вам дају савршену улазну тачку у функционални Реацт и дефинитивно ће вам помоћи у 2020. можете наћи пример пројекта овде. Пратите упутства или га направите сами.

Апликација за ћаскање са Вуе-ом

Још један одличан пројекат који треба да урадите је да направите апликацију за ћаскање користећи моју омиљену ЈаваСцрипт библиотеку: ВуеЈС. Апликација ће изгледати отприлике овако:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити
У овом водичу ћете научити како да направите Вуе апликацију од нуле – креирање компоненти, руковање стањем, креирање рута, повезивање са услугама трећих страна, па чак и руковање аутентификацијом.

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

  • Вуе
  • вуек
  • Вуе Роутер
  • Вуе ЦЛИ
  • Лактарош
  • ЦСС

Ово је заиста сјајан пројекат за почетак рада са Вуе-ом или побољшање постојећих вештина да бисте ушли у развој 2020. можете наћи туториал овде.

Апликација за лепе временске прилике са Ангулар 8

Овај пример ће вам помоћи да направите прелепу временску апликацију користећи Ангулар 8:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

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

  • Угаона 8
  • Фиребасе
  • Рендеровање на страни сервера
  • ЦСС са Грид и Флекбок-ом
  • Погодан за мобилне уређаје и прилагодљивост
  • Темниј режим
  • Прелеп интерфејс

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

Апликација То-До користећи Свелте

Свелте је као ново дете у приступу заснованом на компонентама - барем сличан Реацт, Вуе и Ангулар. А ово је један од најтоплијих нових производа за 2020.

Апликације које треба обавити нису нужно најтоплија тема, али ће вам заиста помоћи да усавршите своје Свелте вештине. То ће изгледати овако:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити
Овај водич ће вам показати како да креирате апликацију користећи Свелте 3, од почетка до краја. Користићете компоненте, стилове и руковаоце догађајима

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

  • Свелте 3
  • Компоненте
  • Стилизирање са ЦСС-ом
  • ЕС 6 синтакса

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

Апликација за е-трговину која користи Нект.јс

Нект.јс је најпопуларнији оквир за прављење Реацт апликација које подржавају рендеровање на страни сервера из кутије.

Овај пројекат ће вам показати како да креирате апликацију за е-трговину која изгледа овако:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити
У овом пројекту ћете научити како да развијате са Нект.јс — креирате нове странице и компоненте, издвајате податке и стилизујете и примењујете Нект апликацију.

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

  • Нект.јс
  • Компоненте и странице
  • Узорковање података
  • Стилизација
  • Пројецт Деплоимент
  • ССР и СПА

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

Пуноправни вишејезични блог са Нукт.јс

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити

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

Користи предности многих сјајних функција које Нукт може да понуди, као што су странице и компоненте, и стилизовање помоћу СЦСС-а.

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

  • Нукт.јс
  • Компоненте и странице
  • Сториблоцк модул
  • Хагфисх
  • Вуек за управљање државом
  • СЦСС за стилизовање
  • Нукт миддлеварес

Ово је заиста кул пројекат, који укључује многе сјајне функције Нукт.јс. Ја лично волим да радим са Нуктом, тако да би требало да га испробате јер ће вас то такође учинити одличним Вуе програмером.

Блог са Гатсбијем

Гатсби је одличан генератор статичких локација који користи Реацт и ГрапхКЛ. Ово је резултат пројекта:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити

У овом водичу ћете научити како да користите Гатсби за креирање блога који ћете користити за писање сопствених чланака користећи Реацт и ГрапхКЛ.

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

  • Гатсби
  • Реаговати
  • ГрапхКЛ
  • Додаци и теме
  • МДКС/Маркдовн
  • Боотстрап ЦСС
  • шаблони

Ако сте икада желели да покренете блог, ово је сјајан пример о томе како то направити користећи Реацт и ГрапхКЛ.

Не кажем да је ВордПресс лош избор, али са Гатсбијем можете да правите веб локације високих перформанси користећи Реацт – што је невероватна комбинација.

Блог са Гридсомеом

Гридсоме за Вуе... У реду, већ смо имали ово са Нект/Нукт-ом.
Али исто важи и за Гридсомеа и Гатсбија. Оба користе ГрапхКЛ као свој слој података, али Гридсоме користи ВуеЈС. Ово је такође невероватан генератор статичког сајта који ће вам помоћи да креирате сјајне блогове:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити

Овај пројекат ће вас научити како да направите једноставан блог да бисте започели са Гридсоме, ГрапхКЛ и Маркдовн. Такође покрива како да примените апликацију преко Нетлифи-а.

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

  • Гридсоме
  • Вуе
  • ГрапхКЛ
  • Маркдовн
  • Нетлифи

Ово свакако није најсвеобухватнији водич, али покрива основне концепте Гридсоме и Маркдовн може бити добра полазна тачка.

Аудио плејер сличан СоундЦлоуд-у који користи Куасар

Куасар је још један Вуе оквир који се може користити за креирање мобилних апликација. У овом пројекту ћете креирати апликацију за аудио плејер, на пример:

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити

Док се други пројекти фокусирају углавном на веб апликације, овај ће вам показати како да направите мобилну апликацију користећи Вуе и Куасар фрамеворк.
Већ би требало да имате Цордова која ради са конфигурисаним Андроид Студио/Ксцоде. Ако не, приручник има везу до веб локације Куасар где вам показују како да све подесите.

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

  • Куасар
  • Вуе
  • цордова
  • ВавеСурфер
  • УИ Цомпонентс

Мали пројекат, демонстрирајући Куасарове могућности за креирање мобилних апликација.

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

Цоол облик кредитне картице са глатким и пријатним микро интеракцијама. Укључује форматирање бројева, верификацију и аутоматско откривање типа картице. Изграђен је на Вуе.јс и такође је потпуно прилагодљив. (Можете видети овде.)

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Шта ћете научити:

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

графикон

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити:

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

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

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Шта ћете научити:

  • Радите са ЦСС атрибутом keyframes
  • Манипулишите и анимирајте ХТМЛ елементе
  • Комбинујте ЈаваСцрипт, ХТМЛ и ЦСС

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

Овде нема ничег фенси – ГитХуб спремишта су само прослављена листа.
Циљ је приказати спремишта и омогућити кориснику да их филтрира. Користите званични ГитХуб АПИ да добијете спремишта за сваког корисника.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

ГитХуб профилна страница - гитхуб.цом/индрекласн

Шта ћете научити:

Чаты в стиле Reddit

Ћаскања су популаран начин комуникације због своје једноставности и лакоће коришћења. Али шта заиста подстиче модерне собе за ћаскање? ВебСоцкетс!

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити:

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

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

Оно што ову навигацију чини јединственом је то што се искачући контејнер трансформише тако да одговара садржају. Постоји елеганција у овој транзицији у поређењу са традиционалним понашањем отварања и затварања новог поповер-а.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Шта ћете научити:

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

Пацман

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Направите сопствену верзију Пацмана. Ово је одличан начин да добијете идеју о томе како се игре развијају и разумете основе. Користите ЈаваСцрипт оквир, Реацт или Вуе.

Научићеш:

  • Како се елементи крећу
  • Како одредити које тастере треба притиснути
  • Како одредити тренутак судара
  • Можете ићи даље и додати контролу покрета духова

Наћи ћете пример овог пројекта у спремишту ГитХуб

Управљање корисницима

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Пројекат у спремишту ГитХуб

Креирање апликације типа ЦРУД за администрацију корисника ће вас научити основама развоја. Ово је посебно корисно за нове програмере.

Научићеш:

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Пројекат у спремишту ГитХуб

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

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

  • Како радити са АПИ-јем
  • Како користити геолокацију
  • Учините своју апликацију динамичнијом додавањем уноса текста. У њему ће корисници моћи да унесу своју локацију како би проверили временске прилике на одређеној локацији.

Биће вам потребан АПИ. Да бисте добили податке о времену, користите ОпенВеатхер АПИ. Више информација о ОпенВеатхер АПИ-ју овде.

Окно чата

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Мој прозор за ћаскање у акцији, отворен у две картице прегледача

Прављење прозора за ћаскање је савршен начин да почнете са утичницама. Избор технологије је огроман. Ноде.јс је, на пример, савршен.

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

Ако сте Ларавел програмер који жели да ради са утичницама, прочитајте мој статью

ГитЛаб ЦИ

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Извор

Ако сте нови у континуираној интеграцији (ЦИ), поиграјте се са ГитЛаб ЦИ. Подесите неколико окружења и покушајте да покренете неколико тестова. То није баш тежак пројекат, али сам сигуран да ћете из њега много научити. Многи развојни тимови сада користе ЦИ. Корисно је знати како га користити.

Научићеш:

  • Шта је ГитЛаб ЦИ
  • Како конфигурисати .gitlab-ci.ymlкоји говори кориснику ГитЛаб-а шта да ради
  • Како да се примени у другим окружењима

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Научићеш:

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Извор

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

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

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

Научићеш:

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

Клон Trello

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Шта ћете научити:

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

Ево примера спремишта, направљен у Реацт+Редук-у.

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Гитхуб репозиторијум.

Једноставна ЦРУД апликација, идеална за учење основа. Хајде да учимо:

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Гитхуб спремиште.

Било шта: Свифт, Објецтиве-Ц, Реацт Нативе, Јава, Котлин.

Хајде да проучимо:

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

Испробајте овај АПИ. Ако нађете нешто боље, напишите у коментарима.

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

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Технички, ово није апликација, али је веома користан задатак да се разуме како вебпак функционише изнутра. Сада то неће бити „црна кутија“, већ разумљив алат.

zahtevi:

  • Преведите ес7 у ес5 (основе).
  • Преведите јск у јс - или - .вуе у .јс (мораћете да научите учитаваче)
  • Подесите вебпацк дев сервер и поновно учитавање врућих модула. (вуе-цли и цреате-реацт-апп користе оба)
  • Користите Хероку, нов.сх или Гитхуб, научите како да примените пројекте веб пакета.
  • Подесите свој омиљени предпроцесор да компајлира цсс - сцсс, мање, оловку.
  • Научите како да користите слике и свгс са веб пакетом.

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

Клон Hackernews

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Од сваког џедаја се тражи да направи сопствени Хацкерневс.

Шта ћете научити успут:

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

Тудушечка

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
ТодоМВЦ.

Озбиљно? Тудушка? Има их на хиљаде. Али верујте ми, постоји разлог за ову популарност.
Апликација Туду је одличан начин да се уверите да разумете основе. Покушајте да напишете једну апликацију у ванилла Јавасцрипт-у и једну у свом омиљеном оквиру.

Научите:

  • Креирајте нове задатке.
  • Проверите да ли су поља попуњена.
  • Филтрирајте задатке (довршени, активни, сви). Користите filter и reduce.
  • Разуме основе Јавасцрипт-а.

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Гитхуб спремиште.

Веома корисно за разумевање превуците и испустите апи.

Хајде да учимо:

  • Превуците и испустите АПИ
  • Креирајте богати кориснички интерфејс

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)
Разумећете како функционишу и веб апликације и изворне апликације, што ће вас издвојити из сиве масе.

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

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

Текст едитор

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Сврха уређивача текста је да смањи напор корисника који покушавају да конвертују своје форматирање у важеће ХТМЛ ознаке. Добар уређивач текста омогућава корисницима да форматирају текст на различите начине.

У неком тренутку, сви су користили уређивач текста. Па зашто не креирајте га сами?

Клон Reddit

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Реддит ми одузима већину времена, али настављам да се дружим на њему. Креирање Реддит клона је ефикасан начин да научите програмирање (док истовремено претражујете Реддит).

Реддит вам пружа веома богат АПИ за. Не изостављајте ниједну функцију и не радите ствари насумично. У стварном свету са клијентима и купцима, не можете да радите насумично или ћете брзо изгубити посао.

Паметни клијенти ће одмах схватити да се посао обавља лоше и наћи ће неког другог.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Реддит АПИ

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Ако пишете Јавасцрипт код, велике су шансе да користите менаџер пакета. Менаџер пакета вам омогућава да поново користите постојећи код који су други људи написали и објавили.

Разумевање целог развојног циклуса пакета ће обезбедити веома добро искуство. Постоји много ствари које треба да знате када објављујете код. Морате размишљати о безбедности, семантичком верзионисању, скалабилности, конвенцијама именовања и одржавању.

Пакет може бити било шта. Ако немате идеју, направите свој Лодасх и објавите га.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Лодасх: лодасх.цом

Ако имате нешто што сте радили на мрежи, стављате вас 10% изнад других. Ево неких корисних ресурса о отвореним изворима и пакетима.

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

ФЦЦ наставни план и програм

фрееЦодецамп је прикупио много свеобухватни курс програмирања.

фрееЦодеЦамп је непрофитна организација. Састоји се од интерактивне платформе за учење засноване на вебу, форума заједнице на мрежи, соба за ћаскање, Медиум публикација и локалних организација које намеравају да учење веб развоја учине доступним свима.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Бићете више него квалификовани за свој први посао ако успете да завршите цео курс.

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

ХТТП протокол је један од главних протокола преко којих садржај путује на Интернет. ХТТП сервери се користе за опслуживање статичког садржаја као што су ХТМЛ, ЦСС и ЈС.

Могућност имплементације ХТТП протокола од нуле прошириће ваше знање о томе како ствари међусобно делују.

На пример, ако користите НодеЈс, онда знате да Екпресс обезбеђује ХТТП сервер.

За референцу, погледајте да ли можете:

  • Подесите сервер без коришћења библиотека
  • Сервер мора да служи ХТМЛ, ЦСС и ЈС садржај.
  • Имплементација рутера од нуле
  • Пратите промене и ажурирајте сервер

Ако не знате зашто, користите Го ланг и покушајте да креирате ХТТП сервер Слуга голфског играча од нуле.

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Сви ми правимо белешке, зар не?

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

Слободно комбинујте ово са првим изазовом (уређивач текста).

Као бонус, покушајте да синхронизујете своју десктоп верзију са веб верзијом.

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

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

Направите веб апликацију са следећим функцијама:

  • Направи налог
  • Сеарцх Подцастс
  • Оцените и претплатите се на подкасте
  • Зауставите се и играјте, промените брзину, функције унапред и уназад 30 секунди.

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

аффилиате.итунес.аппле.цом/ресоурцес/доцументатион/итунес-сторе-веб-сервице-сеарцх-апи

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

Фронт-енд дојо: пројекти за обуку развојних вештина (5 нових + 43 старих)

Здраво! Управо снимам свој екран!

Направите десктоп или веб апликацију која вам омогућава да снимите екран и сачувате снимак као .gif

ovde је неки саветикако то постићи.

izvori

Извор: ввв.хабр.цом

Додај коментар