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

1. Клон Notion

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

www.pojam.so

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

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

Članak je preveden uz potporu EDISON Softwarea, koji разрабатывает приложения и сайтыI ulaže u startupe.

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 используя функцииpngkvant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

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 je GitHub example repository.

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

sloj

www.reddit.com/r/layer

Layer je zajednica u kojoj svatko može nacrtati piksel na zajedničkoj "ploči". Prvotna ideja rođena je na Redditu. Zajednica r/Layer je metafora za zajedničku kreativnost, da svatko može biti kreator i pridonijeti zajedničkom cilju.

Što ćete naučiti prilikom izrade vlastitog Layer projekta:

• Kako funkcionira JavaScript platno Poznavanje rada s platnom ključna je vještina u mnogim aplikacijama.
• Kako koordinirati korisnička dopuštenja. Svaki korisnik može nacrtati jedan piksel svakih 15 minuta bez potrebe da se prijavi.
• Stvorite sesije kolačića.

Squoosh

squoosh.app

Squoosh je aplikacija za kompresiju slika s mnogo naprednih opcija.

GIF 20 MB

Stvaranjem vlastite verzije Squoosha naučit ćete:

• Kako raditi s veličinama slika
• Naučite osnove API-ja Drag'n'Drop
• Shvatite kako rade API i slušatelji događaja
• Kako učitati i izvesti datoteke

Napomena: Kompresor slike je lokalni. Nije potrebno slati dodatne podatke poslužitelju. Kompresor možete imati kod kuće ili ga možete koristiti na poslužitelju, po vašem izboru.

kalkulator

Dođi? Ozbiljno? Kalkulator? Da, točno, kalkulator. Razumijevanje osnova matematičkih operacija i načina na koji one rade zajedno ključna je vještina za pojednostavljivanje vaših aplikacija. Prije ili kasnije morat ćete se pozabaviti brojkama i što prije to bolje.

jarodburchill.github.io/CalculatorReactApp

Stvaranjem vlastitog kalkulatora naučit ćete:

• Rad s brojevima i matematičkim operacijama
• Vježbajte s API-jem slušatelja događaja
• Kako rasporediti elemente, razumjeti stilove

Alat za indeksiranje (tražilica)

Svatko je koristio tražilicu, pa zašto ne izraditi vlastitu? Za traženje informacija potrebni su pretraživači. Svatko ih koristi svaki dan, a potražnja za ovom tehnologijom i stručnjacima s vremenom će samo rasti.

Google tražilica

Što ćete naučiti stvaranjem vlastite tražilice:

• Kako alati za indeksiranje rade
• Kako indeksirati stranice i kako ih rangirati prema ocjeni i reputaciji
• Kako pohraniti indeksirane stranice u bazu podataka i kako raditi s bazom podataka

Glazbeni player (Spotify, Apple Music)

Svi slušaju glazbu – ona je jednostavno sastavni dio naših života. Kreirajmo glazbeni player kako bismo bolje razumjeli kako funkcionira osnovna mehanika moderne platforme za strujanje glazbe.

Spotify

Što ćete naučiti stvaranjem vlastite platforme za streaming glazbe:

• Kako raditi s API-jem. koristite API sa Spotify ili Apple Music
• Kako reproducirati, pauzirati ili premotati na sljedeću/prethodnu pjesmu
• Kako promijeniti glasnoću
• Kako upravljati usmjeravanjem korisnika i poviješću preglednika

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

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

Što ćete naučiti
Izgradnjom ove aplikacije poboljšat ćete svoje React vještine koristeći relativno novi Hooks API. Uzorak projekta koristi komponente Reacta, puno kuka, vanjski API i, naravno, neke CSS stilove.

Tehnički skup i značajke

• Reagirajte kukicama
• stvoriti reagirati putem aplikacije
• jsx
• CSS

Bez korištenja ikakvih klasa, ovi vam projekti daju savršenu ulaznu točku u funkcionalni React i sigurno će vam pomoći u 2020. možeš naći ogledni projekt ovdje. Slijedite upute ili napravite sami.

Aplikacija za chat s Vueom

Još jedan sjajan projekt za vas je izrada aplikacije za chat pomoću moje omiljene JavaScript biblioteke: VueJS. Aplikacija će izgledati otprilike ovako:

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

Tehnički skup i značajke

• Vue
• vuex
• Vue usmjerivač
• CLI prikaz
• laktaroš
• CSS

Ovo je doista sjajan projekt za početak rada s Vueom ili poboljšanje postojećih vještina za ulazak u razvoj 2020. možeš naći tutorial ovdje.

Aplikacija za prekrasno vrijeme uz Angular 8

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

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

Tehnički skup i značajke

• Kutni 8
• Firebase
• Renderiranje na strani poslužitelja
• CSS s Gridom i Flexboxom
• Prilagođenost mobilnim uređajima i prilagodljivost
• Tamni način rada
• Lijepo sučelje

Ono što mi se jako sviđa kod ovog sveobuhvatnog projekta je to što ne proučavate stvari izolirano. Umjesto toga, učite cijeli proces razvoja, od dizajna do konačne implementacije.

Aplikacija To-Do uz Svelte

Svelte je poput novog klinca u komponentnom pristupu - barem sličan Reactu, Vueu i Angularu. A ovo je jedan od najpopularnijih novih proizvoda za 2020.

To-Do aplikacije nisu nužno najvrućija tema, ali će vam stvarno pomoći da usavršite svoje vještine u Svelteu. Izgledat će ovako:

Što ćete naučiti
Ovaj vodič će vam pokazati kako izraditi aplikaciju koristeći Svelte 3, od početka do kraja. Koristit ćete komponente, stilove i rukovatelje događajima

Tehnički skup i značajke

• Lijep 3
• Komponente
• Stiliziranje s CSS-om
• Sintaksa ES6

Nema mnogo dobrih početnih projekata za Svelte, pa sam pronašao ovo je dobro mjesto za početak.

Aplikacija za e-trgovinu s Next.js

Next.js je najpopularniji okvir za izradu React aplikacija koje podržavaju iscrtavanje na strani poslužitelja odmah po izlasku.

Ovaj projekt će vam pokazati kako izraditi aplikaciju za e-trgovinu koja izgleda ovako:

Što ćete naučiti
U ovom projektu naučit ćete kako razvijati s Next.js—stvoriti nove stranice i komponente, dohvatiti podatke te stilizirati i implementirati aplikaciju Next.

Tehnički skup i značajke

• Dalje.js
• Komponente i stranice
• Uzorkovanje podataka
• stilizovanje
• Implementacija 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š pronađite tutorial ovdje.

Cijeli višejezični blog s Nuxt.js

Nuxt.js je za Vue, kao što je Next.js za React: izvrstan okvir za kombiniranje iscrtavanja na strani poslužitelja i aplikacija na jednoj stranici
Posljednja aplikacija koju možete izraditi izgledat će ovako:

Što ćete naučiti

U ovom oglednom projektu naučit ćete kako izgraditi kompletnu web stranicu pomoću Nuxt.js, od početnog postavljanja do konačne implementacije.

Iskorištava prednosti mnogih cool značajki koje nudi Nuxt, kao što su stranice i komponente te stiliziranje pomoću SCSS-a.

Tehnički skup i značajke

• Nuxt.js
• Komponente i stranice
• modul storyblock
• Mixins
• Vuex za upravljanje stanjem
• SCSS za stiliziranje
• Nuxt međuprogrami

Ovo je stvarno super projekt., koji uključuje mnoge izvrsne značajke Nuxt.js. Ja osobno volim raditi s Nuxtom pa biste ga trebali isprobati jer ćete također postati izvrstan Vue programer.

Blog s Gatsbyjem

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

Što ćete naučiti

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

Tehnički skup i značajke

• Gatsby
• Reagovati
• Graphql
• Dodaci i teme
• MDX/Markdown
• Bootstrap CSS
• Predlošci

Ako ste ikada željeli pokrenuti blog, ovo je izvrstan primjer kako ga napraviti koristeći React i GraphQL.

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

Blogirajte s Gridsomeom

Grozno za Vue… U redu, to smo već imali s Next/Nuxt.
Ali isto vrijedi i za Gridsomea i Gatsbyja. Oba koriste GraphQL kao svoj podatkovni sloj, ali Gridsome koristi VueJS. To je također sjajan generator statičnih web stranica koji vam pomaže u stvaranju sjajnih blogova:

Što ćete naučiti

Ovaj projekt će vas naučiti kako stvoriti jednostavan blog da biste započeli s Gridsomeom, GraphQL i Markdownom. Također objašnjava kako implementirati aplikaciju putem Netlifyja.

Tehnički skup i značajke

• Grozno
• Vue
• Graphql
• Smanjenje
• Netlify

Ovo sigurno nije najpotpuniji vodič, ali pokriva osnovne koncepte Gridsomea i Markdown i može biti dobra polazna točka.

Audio player sličan SoundCloudu koji koristi Quasar

Quasar je još jedan Vue okvir koji se može koristiti za izradu mobilnih aplikacija. U ovom projektu izradit ćete aplikaciju audio playera, na primjer:

Što ćete naučiti

Dok se drugi projekti uglavnom fokusiraju na web aplikacije, ovaj će vam pokazati kako izraditi mobilnu aplikaciju koristeći Vue i okvir Quasar.
Već biste trebali imati radnu Cordovu s postavljenim Android Studio/Xcode. Ako ne, priručnik ima poveznicu na web stranicu Quasar gdje vam pokazuju kako sve postaviti.

Tehnički skup i značajke

• Kvazar
• Vue
• Cordova
• surfer na valovima
• Komponente korisničkog sučelja

mali projekt, demonstrirajući Quasarove sposobnosti za izradu mobilnih aplikacija.

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

Cool oblik kreditne kartice s glatkim i ugodnim mikrointerakcijama. Uključuje formatiranje broja, provjeru i automatsko otkrivanje vrste kartice. Izgrađen je na Vue.js i također je potpuno responzivan. (Možeš vidjeti здесь.)

obrazac za kreditnu karticu

Što ćete naučiti:

• Obrada i provjera valjanosti obrazaca
• Rukovanje događajima (na primjer, kada se mijenjaju polja)
• Shvatite kako prikazati i postaviti elemente na stranicu, posebno podatke o kreditnoj kartici koji se pojavljuju na vrhu obrasca

trakasti grafikon

Histogram je grafikon ili grafikon koji predstavlja kategoričke podatke s pravokutnim stupcima s visinama ili duljinama proporcionalnim vrijednostima koje predstavljaju.

Mogu se nanositi okomito ili vodoravno. Okomiti stupčasti grafikon ponekad se naziva i linijski grafikon.

Što ćete naučiti:

• Prikažite podatke na strukturiran i razumljiv način
• Dodatno: naučite kako koristiti element canvas i kako njime crtati elemente

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

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

Još 2016. godine Twitter je predstavio ovu nevjerojatnu animaciju za svoje tweetove. Od 2019. još uvijek izgleda kao dio, pa zašto ga sami ne biste izradili?

Što ćete naučiti:

• Rad s CSS atributom keyframes
• Manipulirajte i animirajte HTML elemente
• Kombinirajte JavaScript, HTML i CSS

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

Ovdje nema ničeg otmjenog—GitHub repozitoriji samo su glorificirani popis.
Cilj je prikazati repozitorije i omogućiti korisniku da ih filtrira. Koristiti službeni GitHub API da biste dobili repozitorije za svakog korisnika.

Stranica profila GitHub - github.com/indreklasn

Što ćete naučiti:

• Primanje podataka iz API-ja
• Prikaz podataka iz API-ja
• Filtrirajte i prikažite relevantne podatke za svako pretraživanje
• Izborno: ako ste spremni za izazov, upotrijebite API v4, izgrađen pomoću GraphQL-a. 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 što zapravo pokreće moderne chat sobe? WebSockets!

Što ćete naučiti:

• Koristite WebSockets, komunikaciju u stvarnom vremenu i ažuriranje podataka
• Rad s korisničkim razinama pristupa (na primjer, vlasnik chat kanala ima ulogu admin, i drugi u sobi - user)
• Obrada i provjera valjanosti obrazaca - zapamtite, prozor za chat za slanje poruka je input
• Stvorite različite chatove i pridružite im se
• Rad s osobnim porukama. Korisnici mogu privatno razgovarati s drugim korisnicima. U biti, uspostavit ćete WebSocket vezu između dva korisnika.

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

Ono što ovu navigaciju čini jedinstvenom je to što se popover spremnik transformira kako bi odgovarao sadržaju. Ovaj prijelaz ima eleganciju u usporedbi s tradicionalnim ponašanjem otvaranja i zatvaranja novog popover-a.

Što ćete naučiti:

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

Pacman

Napravite vlastitu verziju Pacmana. Ovo je sjajan način da dobijete ideju o tome kako se igre razvijaju i da razumijete osnove. Koristite JavaScript framework, React ili Vue.

Naučit ćeš:

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

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

upravljanje korisnicima

Projekt u spremištu GitHub

Izrada aplikacije tipa CRUD za korisničku administraciju naučit će vas osnovama razvoja. Ovo je posebno korisno za nove programere.

Naučit ćeš:

• Što je usmjeravanje
• Kako rukovati obrascima za unos podataka i provjeriti što je korisnik upisao
• Kako raditi s bazom podataka - radnje kreiranja, čitanja, ažuriranja i brisanja

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

Projekt u spremištu GitHub

Ako želite stvarati aplikacije, počnite s aplikacijom za vremensku prognozu. Ovaj se projekt može dovršiti pomoću Swifta.

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

• Kako raditi s 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. Za dobivanje vremenskih podataka koristite OpenWeather API. Više informacija o OpenWeather API-ju здесь.

Окно чата

Moj prozor za chat u akciji, otvoren u dvije kartice preglednika

Stvaranje prozora za razgovor savršen je način za početak rada s utičnicama. Izbor tehnološke hrpe je ogroman. Node.js je, na primjer, savršen.

Naučit ćete kako utičnice rade 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

Источник

Ako ste novi u kontinuiranoj integraciji (CI), poigrajte se s GitLab CI. Postavite nekoliko okruženja i pokušajte pokrenuti nekoliko testova. To nije jako težak projekt, ali siguran sam da ćete iz njega puno naučiti. Mnogi razvojni timovi sada koriste CI. Korisno je znati kako ga koristiti.

Naučit ćeš:

• Što je GitLab CI
• Kako konfigurirati .gitlab-ci.ymlkoji korisniku GitLaba govori što treba učiniti
• Kako 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 ima li stranica SEO meta oznake. Strugač se može izraditi bez korisničkog sučelja.

Naučit ćeš:

• Kako radi strugač?
• Kako napraviti DOM selektore
• Kako napisati algoritam
• Ako ne želite stati na tome, izradite korisničko sučelje. Također možete izraditi izvješće o svakoj web stranici koju provjerite.

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

Источник

Otkrivanje osjećaja na društvenim mrežama izvrstan je način da se upoznate sa strojnim učenjem.

Možete početi analizom samo jedne društvene mreže. Svatko obično počinje s Twitterom.

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

Naučit ćeš:

• Što je strojno učenje

Клон Trello

Trello klon od Indreka Lasna.

Što ćete naučiti:

• Organizacija ruta obrade zahtjeva (Routing).
• Povucite i ispustite.
• Kako izraditi 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 pohrane.
• Sa strane poslužitelja: kako koristiti baze podataka, kako spremati podatke u bazu podataka, kako čitati podatke iz baze podataka.

Evo primjera spremišta, izrađen u React+Reduxu.

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

Github spremište.

Jednostavna CRUD aplikacija, idealna za učenje osnova. Idemo učiti:

• Stvaranje korisnika, upravljanje korisnicima.
• Interakcija s bazom podataka - stvaranje, čitanje, uređivanje, brisanje korisnika.
• Validacija unosa i rad s obrascima.

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

Github spremište.

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

Idemo učiti:

• Kako funkcioniraju izvorne aplikacije.
• Kako dohvatiti podatke iz API-ja.
• Kako funkcioniraju izvorni izgledi stranica.
• Kako raditi s mobilnim simulatorima.

Isprobajte ovaj API. Ako pronađete nešto bolje, napišite u komentarima.

Ako ste zainteresirani, evo ga evo tutoriala.

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

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

Zahtjevi:

• Prevedi es7 u es5 (osnove).
• Kompajlirajte jsx u js - ili - .vue u .js (morat ćete naučiti učitavače)
• Postavite webpack dev poslužitelj i vruće ponovno učitavanje 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 nevjerojatan resurs za potpune početnike.

Клон Hackernews

Svaki Jedi mora napraviti vlastiti Hackernews.

Što ćete naučiti putem:

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

Тудушечка

TodoMVC.

Ozbiljno? Tuduška? Ima ih na tisuće. Ali vjerujte mi, postoji razlog za ovu popularnost.
Aplikacija Tudu izvrstan je način da se uvjerite da razumijete osnove. Pokušajte napisati jednu aplikaciju u vanilla Javascriptu i jednu u svom omiljenom okviru.

Naučiti:

• Stvorite nove zadatke.
• Provjerite jesu li polja ispunjena.
• Filtrirajte zadatke (dovršeni, aktivni, svi). Koristiti filter и reduce.
• Razumjeti osnove Javascripta.

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

Github spremište.

Vrlo korisno za razumijevanje povuci i ispusti api.

Idemo učiti:

• Povucite i ispustite API
• Stvorite bogata sučelja

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

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

Što ćemo proučavati:

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

Uređivač teksta

Svrha uređivača teksta je smanjiti napor korisnika koji pokušavaju pretvoriti svoje oblikovanje u važeće HTML oznake. Dobar uređivač teksta omogućuje korisnicima oblikovanje teksta na različite načine.

Svatko je u nekom trenutku koristio uređivač teksta. Pa zašto ne stvorite ga sami?

Клон Reddit

Reddit je društveno okupljanje vijesti, mjesto za ocjenjivanje web sadržaja i raspravu.

Reddit mi oduzima većinu vremena, ali nastavljam se družiti s njim. Stvaranje Reddit klona učinkovit je način učenja programiranja (dok istovremeno pregledavate Reddit).

Reddit vam nudi vrlo bogatu ponudu API. Nemojte izostaviti nijednu značajku ili raditi 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 loše radi i naći će nekog drugog.

Reddit API

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

Ako pišete Javascript kod, velike su šanse da koristite upravitelj paketa. Upravitelj paketa omogućuje vam ponovno korištenje postojećeg koda koji su drugi ljudi napisali i objavili.

Razumijevanje cijelog razvojnog ciklusa paketa pružit će vrlo dobro iskustvo. Mnogo je stvari koje trebate znati kada objavljujete kod. Morate razmišljati o sigurnosti, semantičkoj verziji, skalabilnosti, konvencijama imenovanja i održavanju.

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

Lodash: lodash.com

Imati nešto što ste radili online stavlja vas 10% iznad drugih. Evo nekoliko korisnih izvora o otvorenim izvorima i paketima.

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

FCC kurikulum

freeCodecamp je prikupio mnogo opsežan tečaj programiranja.

freeCodeCamp je neprofitna organizacija. Sastoji se od interaktivne platforme za učenje temeljene na webu, foruma online zajednice, soba za razgovor, Medium publikacija i lokalnih organizacija koje namjeravaju učiniti učenje web razvoja dostupnim svima.

Bit ćete više nego kvalificirani za svoj prvi posao ako uspijete završiti cijeli tečaj.

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

HTTP protokol jedan je od glavnih protokola putem kojih sadržaj putuje internetom. HTTP poslužitelji koriste se za posluživanje statičkog sadržaja kao što su HTML, CSS i JS.

Mogućnost implementacije HTTP protokola od nule će proširiti vaše znanje o tome kako stvari međusobno djeluju.

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

Za referencu, pogledajte možete li:

• Postavite poslužitelj bez korištenja knjižnica
• Poslužitelj mora posluživati ​​HTML, CSS i JS sadržaj.
• Implementacija usmjerivača od nule
• Pratite promjene i ažurirajte poslužitelj

Ako ne znate zašto, koristite Idi lang i pokušajte stvoriti HTTP poslužitelj Sluga golfskog igrača od nule.

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

Svi vodimo bilješke, zar ne?

Kreirajmo aplikaciju za bilješke. Aplikacija mora spremati bilješke i sinkronizirati ih s bazom podataka. Izgradite izvornu aplikaciju pomoću Electrona, Swifta ili bilo koje druge aplikacije koja vam odgovara i odgovara vašem sustavu.

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

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

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

Tko ne sluša podcaste?

Napravite web aplikaciju sa sljedećim funkcijama:

• Zavesti akkaunt
• Pretraživanje podcasta
• Ocijenite podcaste i pretplatite se na njih
• Zaustavi i reproduciraj, promijeni brzinu, naprijed i natrag funkcije za 30 sekundi.

Pokušajte koristiti iTunes API kao početnu točku. Ako znate za bilo koji drugi izvor, objavite ga u komentarima.

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

Snimanje zaslona

Zdravo! Upravo sada snimam svoj ekran!

Napravite desktop ili web aplikaciju koja vam omogućuje snimanje zaslona i spremanje isječka kao .gif

ovdje je neki savjetikako to postići.

izvori

• Još 5 odvažnih projekata obuke za razvojnog programera (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 projekata za usavršavanje vaših Front-End vještina
• Šest zadataka za Front-End developera
• Zabavna praksa za programera
• 8 obrazovnih projekata
• Još jedan popis projekata za vježbanje

Izvor: www.habr.com