1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Članek je bil preveden s podporo EDISON Software, ki in .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- bonus: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Opomba: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Opomba: Tu .
Подборка проектов из предыдущих публикаций.
Layer
Layer je skupnost, kjer lahko vsakdo nariše slikovno piko na skupno »tablo«. Prvotna ideja se je rodila na Redditu. Skupnost r/Layer je metafora za skupno ustvarjalnost, da je lahko vsakdo ustvarjalec in prispeva k skupnemu cilju.
Kaj se boste naučili pri ustvarjanju lastnega projekta Layer:
- Kako deluje platno JavaScript Poznavanje upravljanja s platnom je kritična veščina v mnogih aplikacijah.
- Kako uskladiti uporabniška dovoljenja. Vsak uporabnik lahko nariše en piksel vsakih 15 minut, ne da bi se moral prijaviti.
- Ustvarite seje piškotkov.
Squoosh
Squoosh je aplikacija za stiskanje slik s številnimi naprednimi možnostmi.
GIF 20 MB
Z ustvarjanjem lastne različice Squoosh se boste naučili:
- Kako delati z velikostmi slik
- Naučite se osnov API-ja Drag'n'Drop
- Razumeti, kako delujejo API in poslušalci dogodkov
- Kako naložiti in izvoziti datoteke
Opomba: Kompresor slike je lokalni. Strežniku ni potrebno pošiljati dodatnih podatkov. Kompresor imate lahko doma ali pa ga uporabljate na strežniku po vaši izbiri.
Kalkulator
daj no Resno? Kalkulator? Da, točno, kalkulator. Razumevanje osnov matematičnih operacij in njihovega delovanja je kritična veščina za poenostavitev vaših aplikacij. Prej ali slej se boste morali soočiti s številkami in čim prej, tem bolje.
Z ustvarjanjem lastnega kalkulatorja se boste naučili:
- Delo s številkami in matematičnimi operacijami
- Vadite z API-jem poslušalcev dogodkov
- Kako urediti elemente, razumeti sloge
Pajek (Iskalnik)
Vsi so že uporabljali iskalnik, zakaj torej ne bi ustvarili svojega? Pajki so potrebni za iskanje informacij. Vsi jih uporabljajo vsak dan in povpraševanje po tej tehnologiji in strokovnjakih bo sčasoma samo naraščalo.
Iskalnik Google
Kaj se boste naučili, če ustvarite svoj iskalnik:
- Kako pajki delujejo
- Kako indeksirati spletna mesta in kako jih razvrstiti po ocenah in ugledu
- Kako shraniti indeksirana spletna mesta v bazo podatkov in kako delati z bazo podatkov
Predvajalnik glasbe (Spotify, Apple Music)
Vsi poslušamo glasbo – je le sestavni del našega življenja. Ustvarimo predvajalnik glasbe, da bomo bolje razumeli, kako deluje osnovna mehanika sodobne platforme za pretakanje glasbe.
Spotify
Kaj se boste naučili z ustvarjanjem lastne platforme za pretakanje glasbe:
- Kako delati z API-jem. uporabite API iz Spotify ali Apple Music
- Kako predvajati, začasno ustaviti ali previti nazaj na naslednjo/prejšnjo skladbo
- Kako spremeniti glasnost
- Kako upravljati usmerjanje uporabnikov in zgodovino brskalnika
Aplikacija za iskanje filmov z uporabo React (s kavlji)
Prva stvar, s katero bi lahko začeli, je ustvariti aplikacijo za iskanje filmov z uporabo React. Spodaj je slika, kako bo izgledala končna aplikacija:
Kaj se boste naučili
Z izgradnjo te aplikacije boste izboljšali svoje sposobnosti React z uporabo relativno novega API-ja Hooks. Primer projekta uporablja komponente React, veliko kavljev, zunanji API in seveda nekaj stilov CSS.
Tehnični sklop in funkcije
- Reagirajte s kavlji
- ustvari-reagiraj-app
- Jsx
- CSS
Brez uporabe kakršnih koli razredov vam ti projekti nudijo popolno vstopno točko v funkcionalni React in vam bodo zagotovo pomagali leta 2020. lahko najdeš . Sledite navodilom ali ga naredite po svoje.
Aplikacija za klepet z Vue
Še en odličen projekt, ki ga lahko naredite, je ustvariti aplikacijo za klepet z mojo najljubšo knjižnico JavaScript: VueJS. Aplikacija bo videti nekako takole:
Kaj se boste naučili
V tej vadnici se boste naučili, kako narediti aplikacijo Vue iz nič – ustvarjanje komponent, obravnavanje stanja, ustvarjanje poti, povezovanje s storitvami tretjih oseb in celo upravljanje avtentikacije.
Tehnični sklop in funkcije
- Vue
- vuex
- Vue usmerjevalnik
- Pogled CLI
- Pusher
- CSS
To je res odličen projekt, da začnete uporabljati Vue ali izboljšate svoje obstoječe spretnosti in začnete z razvojem leta 2020. lahko najdeš .
Aplikacija za čudovito vreme z Angular 8
Ta primer vam bo pomagal ustvariti čudovito vremensko aplikacijo z uporabo Angular 8:
Kaj se boste naučili
Ta projekt vas bo naučil dragocenih veščin gradnje aplikacij iz nič – od načrtovanja preko razvoja, vse do aplikacije, pripravljene za uvajanje.
Tehnični sklop in funkcije
- Kotna 8
- Firebase
- Upodabljanje na strani strežnika
- CSS z Grid in Flexbox
- Prijazen do mobilnih naprav in prilagodljivost
- Temni režim
- Lep vmesnik
Pri tem vseobsegajočem projektu mi je resnično všeč to, da stvari ne preučuješ ločeno. Namesto tega se naučite celotnega razvojnega procesa, od načrtovanja do končne uvedbe.
Aplikacija To-Do z uporabo Svelte
Svelte je kot nov otrok na komponentnem pristopu - vsaj podoben Reactu, Vueju in Angularju. In to je eden najbolj vročih novih izdelkov v letu 2020.
Aplikacije za opravila niso nujno najbolj vroča tema, vendar vam bodo resnično pomagale izpopolniti svoje veščine Svelte. Videti bo takole:
Kaj se boste naučili
Ta vadnica vam bo pokazala, kako ustvariti aplikacijo s Svelte 3, od začetka do konca. Uporabili boste komponente, sloge in obdelovalce dogodkov
Tehnični sklop in funkcije
- Svetel 3
- Komponente
- Oblikovanje s CSS
- Sintaksa ES 6
Dobrih začetnih projektov Svelte ni veliko, zato sem našel .
Aplikacija za e-trgovino, ki uporablja Next.js
Next.js je najbolj priljubljeno ogrodje za gradnjo aplikacij React, ki podpirajo upodabljanje na strežniški strani.
Ta projekt vam bo pokazal, kako ustvariti aplikacijo za e-trgovino, ki je videti takole:
Kaj se boste naučili
V tem projektu se boste naučili razvijati z Next.js – ustvariti nove strani in komponente, ekstrahirati podatke ter oblikovati in uvesti aplikacijo Next.
Tehnični sklop in funkcije
- Naprej.js
- Komponente in strani
- Vzorčenje podatkov
- Stilizacija
- Uvedba projekta
- SSR in SPA
Vedno je super imeti primer iz resničnega sveta, kot je aplikacija za e-trgovino, da se naučimo nekaj novega. Ti lahko .
Popoln večjezični blog z Nuxt.js
Nuxt.js je za Vue, kar je Next.js za React: odlično ogrodje za združevanje moči strežniškega upodabljanja in enostranskih aplikacij
Končna aplikacija, ki jo lahko ustvarite, bo videti takole:
Kaj se boste naučili
V tem vzorčnem projektu se boste naučili, kako ustvariti celotno spletno mesto z uporabo Nuxt.js, od začetne nastavitve do končne uvedbe.
Izkorišča številne odlične funkcije, ki jih ponuja Nuxt, kot so strani in komponente ter oblikovanje s SCSS.
Tehnični sklop in funkcije
- Nuxt.js
- Komponente in strani
- Modul Storyblock
- Hagfish
- Vuex za upravljanje stanja
- SCSS za oblikovanje
- Vmesna programska oprema Nuxt
, ki vključuje številne odlične funkcije Nuxt.js. Osebno rad delam z Nuxtom, zato ga morate preizkusiti, saj boste prav tako odličen razvijalec Vue.
Blog z Gatsbyjem
Gatsby je odličen generator statičnih spletnih mest, ki uporablja React in GraphQL. To je rezultat projekta:
Kaj se boste naučili
V tej vadnici se boste naučili, kako uporabiti Gatsby za ustvarjanje spletnega dnevnika, ki ga boste uporabili za pisanje lastnih člankov z uporabo React in GraphQL.
Tehnični sklop in funkcije
- gatsby
- Reagirajo
- GraphQL
- Vtičniki in teme
- MDX/Markdown
- Bootstrap CSS
- Predloge
Če ste kdaj želeli začeti blog, o tem, kako ga narediti z uporabo React in GraphQL.
Ne rečem, da je WordPress slaba izbira, toda z Gatsbyjem lahko ustvarite visoko zmogljiva spletna mesta z uporabo Reacta – kar je neverjetna kombinacija.
Blog z Gridsome
Grozno za Vue ... V redu, to smo že imeli z Next/Nuxt.
A enako velja za Gridsoma in Gatsbyja. Oba uporabljata GraphQL kot svojo podatkovno plast, vendar Gridsome uporablja VueJS. To je tudi neverjeten generator statičnih spletnih mest, ki vam bo pomagal ustvariti odlične bloge:
Kaj se boste naučili
Ta projekt vas bo naučil, kako ustvariti preprost spletni dnevnik, da začnete uporabljati Gridsome, GraphQL in Markdown. Pokriva tudi, kako razmestiti aplikacijo prek Netlifyja.
Tehnični sklop in funkcije
- Nadrejen
- Vue
- GraphQL
- Markdown
- Izčrpajte
To zagotovo ni najobsežnejša vadnica, vendar pokriva osnovne koncepte Gridsome in .
Zvočni predvajalnik, podoben SoundCloudu, ki uporablja Quasar
Quasar je drugo ogrodje Vue, ki se lahko uporablja za ustvarjanje mobilnih aplikacij. V tem projektu boste ustvarili aplikacijo za predvajalnik zvoka, na primer:
Kaj se boste naučili
Medtem ko se drugi projekti osredotočajo predvsem na spletne aplikacije, vam bo ta pokazal, kako ustvariti mobilno aplikacijo z uporabo Vue in ogrodja Quasar.
Cordova bi že morala delovati s konfiguriranim Android Studio/Xcode. Če ne, ima priročnik povezavo do spletnega mesta Quasar, kjer vam pokažejo, kako vse nastaviti.
Tehnični sklop in funkcije
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponente uporabniškega vmesnika
, ki prikazuje Quasarjeve zmogljivosti za ustvarjanje mobilnih aplikacij.
Форма кредитной карты
Kul oblika kreditne kartice z gladkimi in prijetnimi mikrointerakcijami. Vključuje oblikovanje številk, preverjanje in samodejno zaznavanje vrste kartice. Zgrajen je na Vue.js in je tudi popolnoma odziven. (Lahko vidiš .)
Kaj se boste naučili:
- Obdelajte in potrdite obrazce
- Obravnava dogodkov (na primer, ko se spremenijo polja)
- Razumeti, kako prikazati in postaviti elemente na stran, zlasti podatke o kreditni kartici, ki se prikažejo na vrhu obrazca
Stolpični diagram
Histogram je grafikon ali graf, ki predstavlja kategorične podatke s pravokotnimi palicami z višinami ali dolžinami, sorazmernimi z vrednostmi, ki jih predstavljajo.
Nanašajo se lahko navpično ali vodoravno. Navpični palični grafikon se včasih imenuje črtni grafikon.
Kaj se boste naučili:
- Prikažite podatke na strukturiran in razumljiv način
- Dodatno: Naučite se uporabljati element
canvasin kako z njim narisati elemente
najdete podatke o svetovnem prebivalstvu. Razvrščeni so po letih.
Анимация сердечка Twitter
Leta 2016 je Twitter predstavil to neverjetno animacijo za svoje tvite. Od leta 2019 je še vedno videti del, zakaj ga torej ne bi ustvarili sami?
Kaj se boste naučili:
- Delo z atributom CSS
keyframes - Manipulirajte in animirajte elemente HTML
- Združite JavaScript, HTML in CSS
Репозитории GitHub с функцией поиска
Tukaj ni nič posebnega – repozitoriji GitHub so le poveličan seznam.
Cilj je prikazati repozitorije in omogočiti uporabniku, da jih filtrira. Uporaba pridobiti repozitorije za vsakega uporabnika.
Stran profila GitHub -
Kaj se boste naučili:
- Prejemanje podatkov iz API-ja
- Prikaz podatkov iz API-ja
- Filtrirajte in prikažite ustrezne podatke za vsako iskanje
- Izbirno: Če ste pripravljeni na izziv, uporabite , izdelan z uporabo GraphQL. .
Чаты в стиле Reddit
Klepeti so priljubljen način komunikacije zaradi svoje preprostosti in enostavne uporabe. Toda kaj v resnici spodbuja sodobne klepetalnice? WebSockets!
Kaj se boste naučili:
- Uporabite WebSockets, komunikacijo v realnem času in posodobitve podatkov
- Delo z uporabniškimi stopnjami dostopa (na primer, lastnik klepetalnega kanala ima vlogo
admin, in drugi v sobi -user) - Obdelajte in potrdite obrazce – ne pozabite, okno za klepet za pošiljanje sporočil je
input - Ustvarite različne klepete in se jim pridružite
- Delo z osebnimi sporočili. Uporabniki lahko zasebno klepetajo z drugimi uporabniki. V bistvu boste vzpostavili povezavo WebSocket med dvema uporabnikoma.
Навигация в стиле Stripe
To navigacijo naredi edinstveno to, da se popover vsebnik preoblikuje, da ustreza vsebini. Ta prehod je eleganco v primerjavi s tradicionalnim vedenjem odpiranja in zapiranja novega popoverja.
Kaj se boste naučili:
- Kombinirajte animacije CSS s prehodi
- Zatemnite vsebino in uporabite aktivni razred za lebdeči element
Pacman
Ustvarite svojo različico Pacmana. To je odličen način, da dobite predstavo o tem, kako se igre razvijajo, in razumete osnove. Uporabite ogrodje JavaScript, React ali Vue.
Naučil se boš:
- Kako se elementi premikajo
- Kako ugotoviti, katere tipke pritisniti
- Kako določiti trenutek trka
- Lahko greste dlje in dodate kontrole gibanja duhov
Našli boste primer tega projekta GitHub
upravljanje uporabnikov
Projekt GitHub
Ustvarjanje aplikacije tipa CRUD za upravljanje uporabnikov vas bo naučilo osnov razvoja. To je še posebej uporabno za nove razvijalce.
Naučil se boš:
- Kaj je usmerjanje
- Kako ravnati z obrazci za vnos podatkov in preveriti, kaj je uporabnik vnesel
- Kako delati z bazo podatkov - ustvarjanje, branje, posodabljanje in brisanje dejanj
Проверка погоды в вашем местоположении
Projekt GitHub
Če želite ustvarjati aplikacije, začnite z vremensko aplikacijo. Ta projekt je mogoče dokončati s Swiftom.
Poleg pridobivanja izkušenj pri izdelavi aplikacije se boste naučili:
- Kako delati z API-jem
- Kako uporabljati geolokacijo
- Naredite svojo aplikacijo bolj dinamično z dodajanjem vnosa besedila. Vanj bodo uporabniki lahko vpisali svojo lokacijo, da bodo preverili vreme na določeni lokaciji.
Potrebovali boste API. Za pridobivanje vremenskih podatkov uporabite OpenWeather API. Več informacij o API-ju OpenWeather.
Окно чата
Moje okno za klepet v akciji, odprto v dveh zavihkih brskalnika
Ustvarjanje okna za klepet je popoln način za začetek uporabe vtičnic. Izbira tehnološke opreme je ogromna. Node.js je na primer popoln.
Naučili se boste, kako socketi delujejo in kako jih implementirati. To je glavna prednost tega projekta.
Če ste razvijalec Laravel in želite delati z vtičnicami, preberite moje
GitLab CI
Če ste novi v kontinuirani integraciji (CI), se poigrajte z GitLab CI. Nastavite nekaj okolij in poskusite izvesti nekaj testov. To ni zelo težak projekt, vendar sem prepričan, da se boste iz njega veliko naučili. Veliko razvojnih skupin zdaj uporablja CI. Koristno je vedeti, kako ga uporabljati.
Naučil se boš:
- Kaj je GitLab CI
- Kako konfigurirati
.gitlab-ci.ymlki uporabniku GitLaba pove, kaj naj naredi - Kako razmestiti v druga okolja
Анализатор сайтов
Naredite strgalo, ki analizira semantiko spletnih strani in ustvarja njihovo oceno. Preverite lahko na primer, ali na slikah manjkajo oznake alt. Ali pa preverite, ali ima stran meta oznake SEO. Strgalo je mogoče ustvariti brez uporabniškega vmesnika.
Naučil se boš:
- Kako deluje strgalo?
- Kako ustvariti izbirnike DOM
- Kako napisati algoritem
- Če se ne želite ustaviti pri tem, ustvarite uporabniški vmesnik. Ustvarite lahko tudi poročilo za vsako spletno stran, ki jo preverite.
Определение настроений в социальных сетях
Zaznavanje razpoloženja na družbenih medijih je odličen način, da se uvedete v strojno učenje.
Začnete lahko z analizo samo enega socialnega omrežja. Vsi običajno začnejo s Twitterjem.
Če že imate izkušnje s strojnim učenjem, poskusite zbrati podatke iz različnih družbenih omrežij in jih združiti.
Naučil se boš:
- Kaj je strojno učenje
Клон Trello
Kaj se boste naučili:
- Organizacija poti obdelave zahtev (Routing).
- Povleci in spusti.
- Kako ustvariti nove predmete (tabele, sezname, kartice).
- Obdelava in preverjanje vhodnih podatkov.
- S strani odjemalca: kako uporabljati lokalni pomnilnik, kako shraniti podatke v lokalni pomnilnik, kako brati podatke iz lokalnega pomnilnika.
- S strani strežnika: kako uporabljati baze podatkov, kako shraniti podatke v bazo, kako brati podatke iz baze.
, narejen v React+Redux.
Панель админа
Preprosta aplikacija CRUD, idealna za učenje osnov. Naučimo se:
- Ustvarite uporabnike, upravljajte uporabnike.
- Interakcija z bazo podatkov - ustvarjanje, branje, urejanje, brisanje uporabnikov.
- Preverjanje vnosa in delo z obrazci.
Трекер криптовалют (нативное мобильное приложение)
Karkoli: Swift, Objective-C, React Native, Java, Kotlin.
Študijmo:
- Kako delujejo izvorne aplikacije.
- Kako pridobiti podatke iz API-ja.
- Kako delujejo izvorne postavitve strani.
- Kako delati z mobilnimi simulatorji.
. Če najdete kaj boljšega, napišite v komentarje.
Če te zanima, tukaj je .
Настроить собственный конфиг webpack с нуля
Tehnično to ni aplikacija, je pa zelo uporabna naloga za razumevanje delovanja spletnega paketa od znotraj. Zdaj ne bo "črna skrinjica", ampak razumljivo orodje.
Zahteve:
- Prevedite es7 v es5 (osnove).
- Prevedite jsx v js - ali - .vue v .js (naučiti se boste morali nalagalnike)
- Nastavite strežnik za razvijalce webpack in ponovno nalaganje vročega modula. (vue-cli in create-react-app uporabljata oboje)
- Uporabite Heroku, now.sh ali Github, naučite se uvajati projekte webpack.
- Nastavite svoj najljubši predprocesor za prevajanje css - scss, less, stylus.
- Naučite se uporabljati slike in SVG s spletnim paketom.
Клон Hackernews
Vsak Jedi mora narediti svoj Hackernews.
Kaj se boste naučili na poti:
- Kako komunicirati z API-jem hackernews.
- Kako ustvariti enostransko aplikacijo.
- Kako implementirati funkcije, kot so ogled komentarjev, posameznih komentarjev, profilov.
- Organizacija poti obdelave zahtev (Routing).
Тудушечка
Resno? Tuduška? Na tisoče jih je. A verjemite mi, obstaja razlog za to priljubljenost.
Aplikacija Tudu je odličen način, da se prepričate, da razumete osnove. Poskusite napisati eno aplikacijo v različici Javascript in eno v svojem najljubšem ogrodju.
Naučite se:
- Ustvarite nove naloge.
- Preverite, ali so polja izpolnjena.
- Filtriraj naloge (dokončane, aktivne, vse). Uporaba
filterиreduce. - Razumeti osnove Javascripta.
Сортируемый drag and drop список
Zelo koristno za razumevanje .
Naučimo se:
- API povleci in spusti
- Ustvarite bogate uporabniške vmesnike
Клон мессенджера (нативное приложение)
Razumeli boste, kako delujejo tako spletne aplikacije kot izvorne aplikacije, kar vas bo ločilo od sive mase.
Kaj bomo študirali:
- Spletne vtičnice (takojšnja sporočila)
- Kako delujejo izvorne aplikacije.
- Kako predloge delujejo v izvornih aplikacijah.
- Organiziranje poti obdelave zahtevkov v izvornih aplikacijah.
Urejevalnik besedil
Namen urejevalnika besedil je zmanjšati trud uporabnikov, ki poskušajo svoje oblikovanje pretvoriti v veljavno oznako HTML. Dober urejevalnik besedil uporabnikom omogoča oblikovanje besedila na različne načine.
Na neki točki so vsi uporabljali urejevalnik besedil. Zakaj pa ne ?
Клон Reddit
je družabno zbiranje novic, ocenjevanje spletne vsebine in spletno mesto za razprave.
Reddit mi vzame večino časa, vendar še naprej visim na njem. Ustvarjanje klona Reddit je učinkovit način za učenje programiranja (medtem ko istočasno brskate po Redditu).
Reddit vam ponuja zelo bogato. Ne izpustite nobene funkcije in ne počnite stvari naključno. V resničnem svetu s strankami in kupci ne morete delati naključno, sicer boste hitro izgubili službo.
Pametne stranke bodo takoj ugotovile, da je delo opravljeno slabo in bodo poiskale nekoga drugega.
Публикация пакета NPM с открытым исходным кодом
Če pišete kodo Javascript, obstaja velika verjetnost, da uporabljate upravitelja paketov. Upravitelj paketov vam omogoča ponovno uporabo obstoječe kode, ki so jo napisali in objavili drugi.
Razumevanje celotnega razvojnega cikla paketa bo zagotovilo zelo dobro izkušnjo. Ko objavljate kodo, morate vedeti veliko stvari. Pomisliti morate na varnost, semantične različice, razširljivost, pravila poimenovanja in vzdrževanje.
Paket je lahko karkoli. Če nimate ideje, ustvarite svojega Lodasha in ga objavite.
Lodash:
Če imate nekaj, kar ste naredili na spletu, ste za 10 % nad drugimi. o odprtih kodah in paketih.
Учебный план freeCodeCamp
freeCodecamp je zbral veliko .
freeCodeCamp je neprofitna organizacija. Sestavljen je iz interaktivne spletne učne platforme, foruma spletne skupnosti, klepetalnic, publikacij Medium in lokalnih organizacij, ki nameravajo omogočiti dostop do spletnega razvoja učenja vsem.
Če vam bo uspelo opraviti celoten tečaj, boste več kot usposobljeni za svojo prvo zaposlitev.
Создайте HTTP-сервер с нуля
Protokol HTTP je eden glavnih protokolov, prek katerega vsebina potuje po internetu. Strežniki HTTP se uporabljajo za streženje statične vsebine, kot so HTML, CSS in JS.
Če boste lahko implementirali protokol HTTP iz nič, boste razširili svoje znanje o medsebojnem delovanju stvari.
Na primer, če uporabljate NodeJs, potem veste, da Express zagotavlja strežnik HTTP.
Za referenco preverite, ali lahko:
- Nastavite strežnik brez uporabe knjižnic
- Strežnik mora služiti vsebini HTML, CSS in JS.
- Implementacija usmerjevalnika iz nič
- Spremljajte spremembe in posodabljajte strežnik
Če ne veste zakaj, uporabite in poskusite ustvariti strežnik HTTP iz nič.
Десктопное приложение для заметок
Vsi si delamo zapiske, kajne?
Ustvarimo aplikacijo za beležke. Aplikacija mora shraniti zapiske in jih sinhronizirati z bazo podatkov. Zgradite izvorno aplikacijo z uporabo Electron, Swift ali kar koli drugega, kar vam je všeč in kar deluje za vaš sistem.
To lahko združite s prvim izzivom (urejevalnik besedil).
Kot bonus poskusite sinhronizirati namizno različico s spletno različico.
Подкасты (клон Overcast)
Kdo ne posluša podcastov?
Ustvarite spletno aplikacijo z naslednjimi funkcijami:
- Ustvari račun
- Iskanje podcastov
- Ocenite in se naročite na poddaje
- Ustavi in predvajaj, spremeni hitrost, funkcije naprej in nazaj za 30 sekund.
Poskusite uporabiti iTunes API kot izhodišče. Če poznate še kakšne vire, jih objavite v komentarjih.
Zajem zaslona
Zdravo! Trenutno snemam svoj zaslon!
Ustvarite namizno ali spletno aplikacijo, ki vam omogoča, da zajamete zaslon in shranite posnetek kot .gif
Tu kako to doseči.
viri
Vir: www.habr.com