Front-end dojo: projekti za obuku razvojnih vještina (5 novih + 43 starih)

1. Клон Notion

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

www.notion.so

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

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

Članak je preveden uz podršku EDISON softvera, koji разрабатывает приложения и сайтыI ulaže u startapove.

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МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonus: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Napomena: ovdje GitHub example repository.

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

sloj

www.reddit.com/r/layer

Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.

Чему вы научитесь создавай свой проект Layer:

• Как работают JavaScript canvas, умение оперировать canvas — критически важный навык во многих приложениях.
• Как координировать user permissions (пользовательские разрешения). Каждый пользователь может рисовать один пиксель раз в 15 минут и при этом не надо логиниться.
• Создавать cookie sessions.

Squoosh

squoosh.app

Squoosh — это приложение по сжатию изображений с множеством продвинутых опций.

Гифка на 20 мб

Создавая свою версию Squoosh вы научитесь:

• Как работать с размерами изображений
• Освоите основы Drag‘n’Drop API
• Разберетесь как работают API и еvent listeners
• Как загружать и экспортировать файлы

Napomena: компрессор изображений локален. Не обязательно отсылать дополнительные данные на сервер. Можно иметь компрессор у себя, а можно на сервер, на ваш выбор.

Kalkulator

Да ладно? Серьезно? Калькулятор? Да, именно, калькулятор. Понимать основы математических операций и как они работают совместно — критически важный навык для упрощения ваших приложений. Рано или поздно вам придется разбираться с числами и чем раньше, тем лучше.

jarodburchill.github.io/CalculatorReactApp

Создавая свой калькулятор вы научитесь:

• Работать с числами и мат операциями
• Попрактикуетесь с event listeners API
• Как располагать элементы, разберетесь со стилями

Crawler (Поисковый движок)

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

Поисковик Гугла

Чему научитесь, создавая свой поисковик:

• Как работают краулеры
• Как индексировать сайты и как их ранжировать по рейтингу и репутации
• Как хранить индексированные сайты в базе данных и как работать с базой данных

Музыкальный плеер (Spotify, Apple Music)

Все слушают музыку — это просто неотьемлимая часть нашей жизни. Давайте создадим музыкальный плеер, чтобы лучше понять, как работает базовая механика современной платформы потоковой передачи музыки.

Spotify

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

• Как работать с API. использовать API от Spotify или Apple Music
• Как проигрывать, останавливать или перематывать на следующию/предыдущую композицию
• Как менять громкость
• Как управлять маршрутизацией пользователей и историей браузера

Aplikacija za pretraživanje filmova s ​​Reactom (sa kukicama)

Prva stvar s kojom biste mogli početi je pravljenje aplikacije za pretraživanje filmova s ​​Reactom. Ispod je slika kako će izgledati konačna aplikacija:

Šta ćete naučiti
Izgradnjom ove aplikacije poboljšat ćete svoje React vještine koristeći relativno novi Hooks API. Uzorak projekta koristi React komponente, puno kukica, eksterni API i naravno neki CSS stil.

Tehnologija i karakteristike

• Reagirajte kukama
• kreiraj-reagiraj-aplikacija
• JSX
• CSS

Bez upotrebe ikakvih klasa, ovi projekti vam daju savršenu ulaznu tačku u funkcionalni React i sigurno će vam pomoći u 2020. Mozeš naci uzorak projekta ovdje. Slijedite upute ili ga napravite sami.

Chat aplikacija sa Vue

Još jedan odličan projekat za vas je da napravite aplikaciju za ćaskanje koristeći moju omiljenu JavaScript biblioteku: VueJS. Aplikacija će izgledati otprilike ovako:

Šta ćete naučiti
U ovom vodiču naučit ćete kako napraviti Vue aplikaciju od nule - kreirati komponente, upravljati stanjima, kreirati rute, povezati se s uslugama trećih strana, pa čak i upravljati autentifikacijom.

Tehnologija i karakteristike

• Vue
• vuex
• vue router
• CLI prikaz
• Pusher
• CSS

Ovo je zaista sjajan projekat za početak rada s Vueom ili poboljšanje postojećih vještina kako biste krenuli u razvoj 2020. Mozeš naci tutorial ovdje.

Prekrasna vremenska aplikacija sa Angular 8

Ovaj primjer će vam pomoći da napravite prekrasnu aplikaciju za vremensku prognozu koristeći Angular 8:

Šta ćete naučiti
Ovaj projekat će vas naučiti vrijednim vještinama u izgradnji aplikacija od nule - od dizajna do razvoja, sve do aplikacije spremne za implementaciju.

Tehnologija i karakteristike

• Ugaoni 8
• Firebase
• Renderiranje na strani servera
• CSS sa Grid i Flexboxom
• Pogodan za mobilne uređaje i prilagodljivost
• Temnyj režim
• Predivan interfejs

Ono što mi se zaista sviđa kod ovog sveobuhvatnog projekta je da stvari ne proučavate izolovano. Umjesto toga, naučite cijeli proces razvoja od dizajna do konačnog postavljanja.

To-Do aplikacija sa Svelteom

Svelte je kao novi klinac u pristupu komponentama - barem sličan Reactu, Vueu i Angularu. A ovo je jedan od najtoplijih novih proizvoda za 2020.

To-Do aplikacije nisu nužno najtoplija tema, ali će vam zaista pomoći da usavršite svoje Svelte vještine. To će izgledati ovako:

Šta ćete naučiti
Ovaj vodič će vam pokazati kako da kreirate aplikaciju koristeći Svelte 3, od početka do kraja. Koristit ćete komponente, stiling i obrađivače događaja

Tehnologija i karakteristike

• Svelte 3
• Komponente
• Stiliziranje sa CSS-om
• Sintaksa ES6

Nema mnogo dobrih Svelte starter projekata, pa sam otkrio ovo je dobro mjesto za početak.

Aplikacija za e-trgovinu sa Next.js

Next.js je najpopularniji okvir za pravljenje React aplikacija koje podržavaju renderiranje na strani servera iz kutije.

Ovaj projekat će vam pokazati kako da kreirate aplikaciju za e-trgovinu koja izgleda ovako:

Šta ćete naučiti
U ovom projektu naučit ćete kako se razvijati pomoću Next.js—kreirati nove stranice i komponente, preuzimati podatke i stilizirati i implementirati Next aplikaciju.

Tehnologija i karakteristike

• Next.js
• Komponente i stranice
• Uzorkovanje podataka
• Styling
• Postavljanje projekta
• SSR i SPA

Uvijek je sjajno imati primjer iz stvarnog života poput aplikacije za e-trgovinu da naučite nešto novo. Možeš tutorial pronađite ovdje.

Puni višejezični blog sa Nuxt.js

Nuxt.js je za Vue, kao što je Next.js za React: odličan okvir za kombinovanje renderovanja na strani servera i aplikacija na jednoj stranici
Posljednja aplikacija koju možete kreirati će izgledati ovako:

Šta ćete naučiti

U ovom oglednom projektu naučit ćete kako napraviti kompletnu web stranicu koristeći Nuxt.js, od početnog postavljanja do konačnog postavljanja.

Koristi prednosti mnogih odličnih karakteristika koje Nuxt može ponuditi, kao što su stranice i komponente, i stiliziranje pomoću SCSS-a.

Tehnologija i karakteristike

• Nuxt.js
• Komponente i stranice
• storyblock modul
• Mixins
• Vuex za upravljanje državom
• SCSS za stilizovanje
• Nuxt middlewares

Ovo je zaista kul projekat., koji uključuje mnoge sjajne karakteristike Nuxt.js. Ja lično volim da radim sa Nuxtom, pa bi trebalo da ga isprobate jer će vas takođe učiniti odličnim Vue programerom.

Blog sa Gatsbijem

Gatsby je sjajan generator statičkih stranica koji koristi React i GraphQL. Ovo je rezultat projekta:

Šta ćete naučiti

U ovom vodiču ćete naučiti kako koristiti Gatsby za kreiranje bloga koji ćete koristiti za pisanje vlastitih članaka koristeći React i GraphQL.

Tehnologija i karakteristike

• Gatsby
• reagovati
• GraphQL
• Dodaci i teme
• MDX/Markdown
• Bootstrap CSS
• Obrasci

Ako ste ikada želeli da pokrenete blog, ovo je odličan primjer kako to napraviti koristeći React i GraphQL.

Ne kažem da je WordPress loš izbor, ali uz Gatsby možete napraviti web stranice visokih performansi koristeći React – što je nevjerovatna kombinacija.

Blog sa Gridsomeom

Gridsome za Vue… Ok, već smo to imali sa Next/Nuxt-om.
Ali isto važi i za Gridsomea i Gatsbyja. Oba koriste GraphQL kao svoj sloj podataka, ali Gridsome koristi VueJS. To je također odličan generator statičkih stranica koji će vam pomoći da kreirate sjajne blogove:

Šta ćete naučiti

Ovaj projekat će vas naučiti kako da napravite jednostavan blog da biste započeli sa Gridsome, GraphQL i Markdown. Također objašnjava kako implementirati aplikaciju putem Netlifyja.

Tehnologija i karakteristike

• Gridsome
• Vue
• GraphQL
• Markdown
• netlify

Ovo svakako nije najkompletniji vodič, ali pokriva osnovne koncepte Gridsome i Markdown i može biti dobra polazna tačka.

Audio plejer sličan SoundCloud-u koristeći Quasar

Quasar je još jedan Vue okvir koji se može koristiti za izradu mobilnih aplikacija. U ovom projektu ćete kreirati aplikaciju za audio plejer kao što su:

Šta ćete naučiti

Dok se drugi projekti uglavnom fokusiraju na web aplikacije, ovaj će vam pokazati kako da napravite mobilnu aplikaciju koristeći Vue i Quasar framework.
Trebali biste već imati radnu Cordovu sa Android Studio/Xcode postavljenom. Ako ne, priručnik ima vezu do Quasar web stranice gdje vam pokazuju kako sve postaviti.

Tehnologija i karakteristike

• Kvazar
• Vue
• Cordova
• wavesurfer
• UI Components

mali projekat, demonstrirajući Quasarove mogućnosti za izgradnju mobilnih aplikacija.

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

Cool oblik kreditne kartice s glatkim i ugodnim mikro interakcijama. Uključuje formatiranje brojeva, verifikaciju i automatsko otkrivanje tipa kartice. Izgrađen je na Vue.js i također je potpuno prilagodljiv. (Mozes da vidis ovdje.)

obrazac kreditne kartice

Šta ćete naučiti:

• Obradite i potvrdite obrasce
• Rukovati događajima (na primjer, kada se polja mijenjaju)
• Shvatite kako prikazati i postaviti elemente na stranicu, posebno informacije o kreditnoj kartici koje se pojavljuju na vrhu obrasca

bar grafikona

Histogram je dijagram ili grafikon koji predstavlja kategoričke podatke s pravokutnim trakama s visinama ili dužinama proporcionalnim vrijednostima koje predstavljaju.

Mogu se primijeniti vertikalno ili horizontalno. Vertikalni trakasti grafikon se ponekad naziva linijskim grafikonom.

Šta ćete naučiti:

• Prikažite podatke na strukturiran i razumljiv način
• Dodatno: Naučite kako koristiti element canvas i kako crtati elemente sa njim

to je možete pronaći podatke o svjetskoj populaciji. Razvrstani su po godinama.

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

Još 2016. godine, Twitter je predstavio ovu neverovatnu animaciju za svoje tvitove. Od 2019. i dalje izgleda kao dio, pa zašto ga sami ne kreirati?

Šta ćete naučiti:

• Rad sa CSS atributom keyframes
• Manipulirajte i animirajte HTML elemente
• Kombinujte JavaScript, HTML i CSS

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

Ovdje nema ničeg fensi – GitHub spremišta su samo proslavljena lista.
Cilj je prikazati spremišta i omogućiti korisniku da ih filtrira. Koristi zvanični GitHub API da dobijete spremišta za svakog korisnika.

GitHub profilna stranica - github.com/indreklasn

Šta ćete naučiti:

• Primanje podataka od API-ja
• Prikaz podataka iz API-ja
• Filtrirajte i prikažite relevantne podatke za svaku pretragu
• Opciono: ako ste spremni za izazov, koristite API v4, izgrađen koristeći GraphQL. Ako želite naučiti GraphQL, idite na jedan od mojih prethodnih članaka.

Чаты в стиле Reddit

Chatovi su popularan način komunikacije zbog svoje jednostavnosti i lakoće korištenja. Ali šta zapravo pokreće moderne chat sobe? WebSockets!

Šta ćete naučiti:

• Koristite WebSockets, komunikaciju u realnom vremenu i ažuriranje podataka
• Radite sa nivoima pristupa korisnika (na primjer, vlasnik kanala za ćaskanje ima ulogu admin, i ostali u prostoriji - user)
• Obradite i potvrdite obrasce - zapamtite, prozor za ćaskanje za slanje poruke je input
• Kreirajte i pridružite se različitim chatovima
• Radite sa ličnim porukama. Korisnici mogu privatno razgovarati s drugim korisnicima. U suštini, uspostavit ćete WebSocket vezu između dva korisnika.

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

Ono što ovu navigaciju čini jedinstvenom je to što se iskačući kontejner transformiše kako bi odgovarao sadržaju. Postoji elegancija u ovoj tranziciji u poređenju sa tradicionalnim ponašanjem otvaranja i zatvaranja novog skočnog prozora.

Šta ćete naučiti:

• Kombinirajte CSS animacije s prijelazima
• Zatamnite sadržaj i primijenite aktivnu klasu na lebdeći element

Pacman

Kreirajte vlastitu verziju Pacmana. Ovo je sjajan način da dobijete predstavu o tome kako su igre razvijene i shvatite osnove. Koristite JavaScript okvir, React ili Vue.

Naučićeš:

• Kako se elementi kreću
• Kako odrediti koje tipke pritisnuti
• Kako odrediti trenutak sudara
• Možete ići dalje i dodati kontrole pokreta duhova

Naći ćete primjer ovog projekta u spremištu GitHub

upravljanje korisnicima

Projekat u spremištu GitHub

Kreiranje aplikacije tipa CRUD za administraciju korisnika će vas naučiti osnovama razvoja. Ovo je posebno korisno za nove programere.

Naučićeš:

• Šta je rutiranje
• Kako rukovati obrascima za unos podataka i provjeriti šta je korisnik unio
• Kako raditi sa bazom podataka - kreiranje, čitanje, ažuriranje i brisanje akcija

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

Projekat u spremištu GitHub

Ako želite kreirati aplikacije, počnite s aplikacijom za vremensku prognozu. Ovaj projekat se može završiti koristeći Swift.

Osim sticanja iskustva u izradi aplikacije, naučit ćete:

• Kako raditi sa API-jem
• Kako koristiti geolokaciju
• Učinite svoju aplikaciju dinamičnijom dodavanjem unosa teksta. U njemu će korisnici moći unijeti svoju lokaciju kako bi provjerili vrijeme na određenoj lokaciji.

Trebat će vam API. Da biste dobili podatke o vremenu, koristite OpenWeather API. Više informacija o OpenWeather API-ju ovdje.

Окно чата

Moj prozor za ćaskanje u akciji, otvoren u dve kartice pretraživača

Kreiranje prozora za ćaskanje je savršen način da počnete sa utičnicama. Izbor tehnologije je ogroman. Node.js je, na primjer, savršen.

Naučit ćete kako funkcionišu soketi i kako ih implementirati. To je glavna prednost ovog projekta.

Ako ste Laravel programer koji želi raditi sa utičnicama, pročitajte moj članak

GitLab CI

Izvor

Ako ste novi u kontinuiranoj integraciji (CI), poigrajte se sa GitLab CI. Postavite nekoliko okruženja i pokušajte pokrenuti nekoliko testova. Nije to baš težak projekat, ali siguran sam da ćete iz njega mnogo naučiti. Mnogi razvojni timovi sada koriste CI. Znati kako ga koristiti je korisno.

Naučićeš:

• Šta je GitLab CI
• Kako konfigurisati .gitlab-ci.ymlkoji govori GitLab korisniku šta da radi
• Kako se implementirati u druga okruženja

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

Napravite scraper koji analizira semantiku web stranica i kreira njihovu ocjenu. Na primjer, možete provjeriti nedostaju li alt oznake na slikama. Ili provjerite da li stranica ima SEO meta tagove. Scraper se može kreirati bez korisničkog interfejsa.

Naučićeš:

• Kako radi strugač?
• Kako kreirati DOM selektore
• Kako napisati algoritam
• Ako ne želite stati na tome, kreirajte korisnički interfejs. Također možete kreirati izvještaj o svakoj web stranici koju provjerite.

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

Izvor

Detekcija osjećaja na društvenim mrežama odličan je način da se upoznate s mašinskim učenjem.

Možete početi analizom samo jedne društvene mreže. Svi obično počinju sa Twitter-om.

Ako već imate iskustva s strojnim učenjem, pokušajte prikupiti podatke s različitih društvenih mreža i kombinirati ih.

Naučićeš:

• Šta je mašinsko učenje

Клон Trello

Trello klon od Indreka Lasna.

Šta ćete naučiti:

• Organizacija ruta obrade zahtjeva (Routing).
• Prevucite i ispustite.
• Kako kreirati nove objekte (ploče, liste, kartice).
• Obrada i provjera ulaznih podataka.
• Sa strane klijenta: kako koristiti lokalnu pohranu, kako spremiti podatke u lokalnu pohranu, kako čitati podatke iz lokalne memorije.
• Sa strane servera: kako koristiti baze podataka, kako sačuvati podatke u bazi podataka, kako čitati podatke iz baze podataka.

Evo primjera spremišta, napravljen u React+Redux.

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

Github Repository.

Jednostavna CRUD aplikacija, idealna za učenje osnova. naučimo:

• Kreirajte korisnike, upravljajte korisnicima.
• Interakcija sa bazom podataka - kreiranje, čitanje, uređivanje, brisanje korisnika.
• Validacija unosa i rad sa obrascima.

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

Github spremište.

Bilo šta: Swift, Objective-C, React Native, Java, Kotlin.

Hajde da proučimo:

• Kako funkcionišu izvorne aplikacije.
• Kako dohvatiti podatke iz API-ja.
• Kako funkcioniraju izvorni izgledi stranica.
• Kako raditi sa mobilnim simulatorima.

Isprobajte ovaj API. Ako nađete nešto bolje, pišite u komentarima.

Ako ste zainteresovani, evo ga evo tutorijala.

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

Tehnički, ovo nije aplikacija, ali je vrlo koristan zadatak za razumijevanje kako webpack radi iznutra. Sada to neće biti „crna kutija“, već razumljiv alat.

Uslovi:

• Prevedite es7 u es5 (osnove).
• Prevedite jsx u js - ili - .vue u .js (morat ćete naučiti loadere)
• Postavite webpack dev server i ponovno učitavanje vrućih modula. (vue-cli i create-react-app koriste oboje)
• Koristite Heroku, now.sh ili Github, naučite kako implementirati webpack projekte.
• Postavite svoj omiljeni predprocesor za kompajliranje css-a - scss, less, stylus.
• Naučite kako koristiti slike i svgs s webpackom.

Ovo je nevjerovatan resurs za potpune početnike.

Клон Hackernews

Svaki Džedaj je dužan da napravi sopstveni Hackernews.

Šta ćete naučiti usput:

• Kako komunicirati sa hackernews API-jem.
• Kako kreirati aplikaciju na jednoj stranici.
• Kako implementirati funkcije kao što su pregled komentara, pojedinačnih komentara, profila.
• Organizacija ruta obrade zahtjeva (Routing).

Тудушечка

TodoMVC.

Ozbiljno? Tudushka? Ima ih na hiljade. Ali vjerujte mi, postoji razlog za ovu popularnost.
Aplikacija Tudu je odličan način da se uvjerite da razumijete osnove. Pokušajte napisati jednu aplikaciju u vanilla Javascript-u i jednu u svom omiljenom frameworku.

Naučite:

• Kreirajte nove zadatke.
• Provjerite da li su polja popunjena.
• Filtrirajte zadatke (dovršeni, aktivni, svi). Koristi filter и reduce.
• Razumjeti osnove Javascripta.

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

Github spremište.

Vrlo korisno za razumijevanje drag and drop api.

naučimo:

• Prevucite i ispustite API
• Kreirajte bogata korisničko sučelje

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

Razumjet ćete kako funkcioniraju i web aplikacije i izvorne aplikacije, što će vas izdvojiti iz sive mase.

Šta ćemo proučavati:

• Web utičnice (instant poruke)
• Kako funkcionišu izvorne aplikacije.
• Kako predlošci rade u izvornim aplikacijama.
• Organiziranje ruta za obradu zahtjeva u izvornim aplikacijama.

Uređivač teksta

Svrha uređivača teksta je da smanji napor korisnika koji pokušavaju da konvertuju svoje formatiranje u važeće HTML oznake. Dobar uređivač teksta omogućava korisnicima da formatiraju tekst na različite načine.

U nekom trenutku, svi su koristili uređivač teksta. Pa zašto ne kreirajte ga sami?

Клон Reddit

Reddit je agregacija društvenih vijesti, ocjena web sadržaja i stranica za diskusiju.

Reddit mi oduzima većinu vremena, ali i dalje se družim s njim. Kreiranje Reddit klona je efikasan način za učenje programiranja (dok istovremeno pretražujete Reddit).

Reddit vam pruža vrlo bogat API. Ne izostavljajte nijednu funkciju i ne radite stvari nasumično. U stvarnom svijetu s klijentima i kupcima, ne možete raditi nasumično ili ćete brzo izgubiti posao.

Pametni klijenti će odmah shvatiti da se posao obavlja loše i naći će nekog drugog.

Reddit API

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

Ako pišete kod u Javascript-u, velike su šanse da koristite menadžer paketa. Upravitelj paketa vam omogućava da ponovo koristite postojeći kod koji su drugi ljudi napisali i objavili.

Razumijevanje punog razvojnog ciklusa paketa će pružiti vrlo dobro iskustvo. Postoji mnogo stvari koje trebate znati kada objavljujete kod. Morate razmišljati o sigurnosti, semantičkom verzioniranju, skalabilnosti, konvencijama imenovanja i održavanju.

Paket može biti bilo šta. Ako nemate ideju, kreirajte svoj Lodash i objavite ga.

Lodash: lodash.com

Imati nešto što ste radili na mreži stavlja vas 10% iznad drugih. Evo nekoliko korisnih resursa o otvorenim izvorima i paketima.

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

FCC nastavni plan i program

freeCodecamp je prikupio mnogo sveobuhvatni kurs programiranja.

freeCodeCamp je neprofitna organizacija. Sastoji se od interaktivne platforme za učenje zasnovane na webu, foruma online zajednice, soba za ćaskanje, medija medija i lokalnih organizacija koje namjeravaju učiniti učenje web razvoja pristupačnim svima.

Bićete više nego kvalifikovani za svoj prvi posao ako uspete da završite ceo kurs.

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

HTTP protokol je jedan od glavnih protokola preko kojih sadržaj putuje na Internet. HTTP serveri se koriste za opsluživanje statičkog sadržaja kao što su HTML, CSS i JS.

Mogućnost implementacije HTTP protokola od nule proširit će vaše znanje o tome kako stvari djeluju.

Na primjer, ako koristite NodeJs, onda znate da Express pruža HTTP server.

Za referencu pogledajte da li možete:

• Postavite server bez korištenja biblioteka
• Server mora posluživati ​​HTML, CSS i JS sadržaj.
• Implementacija rutera od nule
• Pratite promjene i ažurirajte server

Ako ne znate zašto, koristite Go lang i pokušajte kreirati HTTP server sluga golfskog igrača od nule.

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

Svi vodimo beleške, zar ne?

Kreirajmo aplikaciju za bilješke. Aplikacija treba spremiti bilješke i sinkronizirati ih s bazom podataka. Napravite nativnu aplikaciju koristeći Electron, Swift ili šta god želite i što radi za vaš sistem.

Slobodno kombinirajte ovo s prvim izazovom (uređivač teksta).

Kao bonus, pokušajte sinkronizirati svoju desktop verziju s web verzijom.

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

Ko ne sluša podcaste?

Kreirajte web aplikaciju sa sljedećim funkcijama:

• Kreirajte nalog
• Pretraži podcaste
• Ocijenite i pretplatite se na podcaste
• Zaustavite se i igrajte, promijenite brzinu, funkcije naprijed i nazad 30 sekundi.

Pokušajte koristiti iTunes API kao početnu tačku. Ako znate neke druge resurse, objavite ih u komentarima.

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

Snimanje ekrana

Zdravo! Upravo snimam svoj ekran!

Napravite desktop ili web aplikaciju koja vam omogućava da snimite ekran i sačuvate isječak kao .gif

ovdje nekoliko savjetakako to postići.

Izvori

• Još 5 odvažnih projekata obuke za programere (Layer, Squoosh, Kalkulator, Website Crawler, Music Player)
• 9 проектов для оттачивания Front-End мастерства
• Šest zadataka za Front-End programera
• Zabavna praksa za programera
• 8 edukativnih projekata
• Još jedna lista projekata na kojima treba vježbati

izvor: www.habr.com