1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Článok bol preložený s podporou EDISON Software, ktorá a .
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.
- Как работают оптимизация и обработка изображений.
Poznámka: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Poznámka: Tu .
Подборка проектов из предыдущих публикаций.
vrstva
Layer je komunita, kde každý môže nakresliť pixel na zdieľanú „dosku“. Pôvodný nápad sa zrodil na Reddite. Komunita r/Layer je metaforou zdieľanej kreativity, že každý môže byť tvorcom a prispieť k spoločnej veci.
Čo sa naučíte pri vytváraní vlastného projektu vrstvy:
- Ako funguje plátno JavaScript Znalosť ovládania plátna je kritickou zručnosťou v mnohých aplikáciách.
- Ako koordinovať povolenia používateľov. Každý používateľ môže nakresliť jeden pixel každých 15 minút bez toho, aby sa musel prihlasovať.
- Vytvorte relácie súborov cookie.
Squoosh
Squoosh je aplikácia na kompresiu obrázkov s mnohými pokročilými možnosťami.
GIF 20 MB
Vytvorením vlastnej verzie Squoosh sa naučíte:
- Ako pracovať s veľkosťou obrázkov
- Naučte sa základy rozhrania Drag'n'Drop API
- Pochopte, ako fungujú API a poslucháči udalostí
- Ako nahrať a exportovať súbory
Poznámka: Kompresor obrazu je lokálny. Nie je potrebné posielať ďalšie údaje na server. Kompresor môžete mať doma alebo ho môžete použiť na serveri podľa vlastného výberu.
Kalkulačka
Poď? vážne? Kalkulačka? Áno, presne, kalkulačka. Pochopenie základov matematických operácií a ich vzájomnej spolupráce je kritickou zručnosťou pre zjednodušenie vašich aplikácií. Skôr či neskôr sa budete musieť vyrovnať s číslami a čím skôr, tým lepšie.
Vytvorením vlastnej kalkulačky sa naučíte:
- Práca s číslami a matematické operácie
- Cvičte s API poslucháčov udalostí
- Ako usporiadať prvky, pochopiť štýly
Crawler (vyhľadávač)
Každý použil vyhľadávač, tak prečo si nevytvoriť svoj vlastný? Na vyhľadávanie informácií sú potrebné crawlery. Každý ich používa každý deň a dopyt po tejto technológii a špecialistoch bude časom len rásť.
Vyhľadávač Google
Čo sa naučíte vytvorením vlastného vyhľadávača:
- Ako fungujú prehľadávače
- Ako indexovať stránky a ako ich zoradiť podľa hodnotenia a reputácie
- Ako ukladať indexované stránky do databázy a ako s databázou pracovať
Hudobný prehrávač (Spotify, Apple Music)
Hudbu počúva každý – je jednoducho neoddeliteľnou súčasťou nášho života. Poďme vytvoriť hudobný prehrávač, aby sme lepšie pochopili, ako fungujú základné mechanizmy modernej platformy na streamovanie hudby.
Spotify
Čo sa naučíte vytvorením vlastnej platformy na streamovanie hudby:
- Ako pracovať s API. použite API zo Spotify alebo Apple Music
- Ako prehrať, pozastaviť alebo pretočiť na nasledujúcu/predchádzajúcu skladbu
- Ako zmeniť hlasitosť
- Ako spravovať smerovanie používateľov a históriu prehliadača
Aplikácia na vyhľadávanie filmov pomocou React (s háčikmi)
Prvá vec, s ktorou by ste mohli začať, je vytvoriť aplikáciu na vyhľadávanie filmov pomocou React. Nižšie je obrázok, ako bude vyzerať konečná aplikácia:
Čo sa naučíš
Vytvorením tejto aplikácie zlepšíte svoje schopnosti React pomocou relatívne nového rozhrania Hooks API. Ukážkový projekt používa komponenty React, veľa háčikov, externé API a samozrejme nejaký štýl CSS.
Tech stack a funkcie
- Reagujte s háčikmi
- vytvoriť reagujú-app
- JSX
- CSS
Bez použitia akýchkoľvek tried vám tieto projekty poskytujú dokonalý vstupný bod do funkčného Reactu a určite vám pomôžu v roku 2020. môžeš nájsť . Postupujte podľa pokynov alebo si ho vytvorte podľa seba.
Chatová aplikácia s Vue
Ďalším skvelým projektom, ktorý musíte urobiť, je vytvoriť chatovaciu aplikáciu pomocou mojej obľúbenej knižnice JavaScript: VueJS. Aplikácia bude vyzerať asi takto:
Čo sa naučíš
V tomto návode sa naučíte, ako vytvoriť aplikáciu Vue od začiatku – vytvárať komponenty, spracovávať stav, vytvárať trasy, pripájať sa k službám tretích strán a dokonca aj spracovávať autentifikáciu.
Tech stack a funkcie
- Vue
- vuex
- Smerovač Vue
- CLI pohľad
- Pusher
- CSS
Toto je skutočne skvelý projekt, ktorý vám umožní začať s Vue alebo zlepšiť svoje existujúce zručnosti, aby ste sa dostali do vývoja v roku 2020. môžeš nájsť .
Krásna aplikácia na počasie s Angular 8
Tento príklad vám pomôže vytvoriť krásnu aplikáciu počasia pomocou Angular 8:
Čo sa naučíš
Tento projekt vás naučí cenné zručnosti pri vytváraní aplikácií od začiatku – od návrhu cez vývoj až po aplikáciu pripravenú na nasadenie.
Tech stack a funkcie
- Uhlové 8
- Firebase
- Vykresľovanie na strane servera
- CSS s Grid a Flexbox
- Priateľské k mobilom a prispôsobivosť
- Tmavý režim
- Krásne rozhranie
Čo sa mi na tomto všeobsiahlom projekte naozaj páči, je to, že neštudujete veci izolovane. Namiesto toho sa naučíte celý proces vývoja, od návrhu až po konečné nasadenie.
Aplikácia To-Do pomocou Svelte
Svelte je ako nový chlapec v prístupe založenom na komponentoch – prinajmenšom podobný React, Vue a Angular. A toto je jedna z najhorúcejších noviniek pre rok 2020.
Aplikácie s úlohami nie sú nevyhnutne najhorúcejšou témou, ale skutočne vám pomôžu zdokonaliť vaše zručnosti Svelte. Bude to vyzerať takto:
Čo sa naučíš
Tento tutoriál vám ukáže, ako vytvoriť aplikáciu pomocou Svelte 3, od začiatku do konca. Budete používať komponenty, štýly a obslužné programy udalostí
Tech stack a funkcie
- Štíhly 3
- Komponenty
- Styling pomocou CSS
- Syntax ES 6
Nie je veľa dobrých štartovacích projektov Svelte, tak som zistil .
Aplikácia elektronického obchodu pomocou Next.js
Next.js je najpopulárnejší framework na vytváranie aplikácií React, ktoré podporujú vykresľovanie na strane servera hneď po vybalení.
Tento projekt vám ukáže, ako vytvoriť aplikáciu elektronického obchodu, ktorá vyzerá takto:
Čo sa naučíš
V tomto projekte sa naučíte, ako vyvíjať pomocou Next.js – vytvárať nové stránky a komponenty, extrahovať údaje a upravovať a nasadzovať aplikáciu Next.
Tech stack a funkcie
- Next.js
- Komponenty a stránky
- Vzorkovanie údajov
- štylizácia
- Nasadenie projektu
- SSR a SPA
Vždy je skvelé mať príklad zo skutočného sveta, ako je aplikácia elektronického obchodu, aby ste sa naučili niečo nové. Môžeš .
Plnohodnotný viacjazyčný blog s Nuxt.js
Nuxt.js je pre Vue, to, čo Next.js je pre React: skvelý rámec na kombináciu výkonu vykresľovania na strane servera a jednostránkových aplikácií
Konečná aplikácia, ktorú môžete vytvoriť, bude vyzerať takto:
Čo sa naučíš
V tomto vzorovom projekte sa naučíte, ako vytvoriť kompletnú webovú stránku pomocou Nuxt.js, od počiatočného nastavenia až po konečné nasadenie.
Využíva mnoho skvelých funkcií, ktoré Nuxt ponúka, ako sú stránky a komponenty a štýly pomocou SCSS.
Tech stack a funkcie
- Nuxt.js
- Komponenty a stránky
- Modul príbehového bloku
- Hagfish
- Vuex pre riadenie štátu
- SCSS pre styling
- Middleware Nuxt
, ktorý obsahuje mnoho skvelých funkcií Nuxt.js. Osobne milujem prácu s Nuxtom, takže by ste to mali vyskúšať, pretože z vás tiež urobí skvelého vývojára Vue.
Blogujte s Gatsbym
Gatsby je vynikajúci generátor statických stránok využívajúci React a GraphQL. Toto je výsledok projektu:
Čo sa naučíš
V tomto návode sa naučíte, ako použiť Gatsby na vytvorenie blogu, ktorý budete používať na písanie vlastných článkov pomocou React a GraphQL.
Tech stack a funkcie
- Gatsby
- Reagovať
- GraphQL
- Pluginy a témy
- MDX/Markdown
- Bootstrap CSS
- šablóny
Ak ste si niekedy chceli založiť blog, ako to urobiť pomocou React a GraphQL.
Nehovorím, že WordPress je zlá voľba, ale s Gatsbym môžete vytvárať vysokovýkonné weby pomocou Reactu – čo je úžasná kombinácia.
Blogujte s Gridsome
Gridsome for Vue... Dobre, toto sme už mali s Next/Nuxt.
To isté však platí aj pre Gridsome a Gatsbyho. Obaja používajú GraphQL ako svoju dátovú vrstvu, ale Gridsome používa VueJS. Toto je tiež úžasný generátor statických stránok, ktorý vám pomôže vytvoriť skvelé blogy:
Čo sa naučíš
Tento projekt vás naučí, ako vytvoriť jednoduchý blog, aby ste mohli začať s Gridsome, GraphQL a Markdown. Tiež popisuje, ako nasadiť aplikáciu cez Netlify.
Tech stack a funkcie
- Príšerný
- Vue
- GraphQL
- Markdown
- Netlify
Toto určite nie je najkomplexnejší návod, ale pokrýva základné koncepty Gridsome a .
Zvukový prehrávač podobný SoundCloud pomocou Quasar
Quasar je ďalší rámec Vue, ktorý možno použiť na vytváranie mobilných aplikácií. V tomto projekte vytvoríte aplikáciu audio prehrávača, napríklad:
Čo sa naučíš
Zatiaľ čo iné projekty sa zameriavajú najmä na webové aplikácie, tento vám ukáže, ako vytvoriť mobilnú aplikáciu pomocou Vue a Quasar frameworku.
Cordova by ste už mali mať spustenú s nakonfigurovaným Android Studio/Xcode. Ak nie, v príručke je odkaz na webovú stránku Quasar, kde vám ukážu, ako všetko nastaviť.
Tech stack a funkcie
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponenty používateľského rozhrania
, ktorá demonštruje schopnosti Quasaru na vytváranie mobilných aplikácií.
Форма кредитной карты
Skvelý tvar kreditnej karty s hladkými a príjemnými mikrointerakciami. Zahŕňa formátovanie čísel, overovanie a automatickú detekciu typu karty. Je postavený na Vue.js a je tiež plne responzívny. (Môžeš vidieť .)
Čo sa naučíte:
- Spracujte a overte formuláre
- Spracovanie udalostí (napríklad keď sa zmenia polia)
- Pochopte, ako zobraziť a umiestniť prvky na stránku, najmä informácie o kreditnej karte, ktoré sa zobrazujú v hornej časti formulára
stĺpcový graf
Histogram je tabuľka alebo graf, ktorý predstavuje kategorické údaje s obdĺžnikovými pruhmi s výškami alebo dĺžkami úmernými hodnotám, ktoré predstavujú.
Môžu byť aplikované vertikálne alebo horizontálne. Zvislý pruhový graf sa niekedy nazýva čiarový graf.
Čo sa naučíte:
- Zobrazujte údaje štruktúrovaným a zrozumiteľným spôsobom
- Okrem toho: Naučte sa používať prvok
canvasa ako s ním kresliť prvky
môžete nájsť údaje o svetovej populácii. Sú zoradené podľa ročníkov.
Анимация сердечка Twitter
V roku 2016 Twitter predstavil túto úžasnú animáciu pre svoje tweety. Od roku 2019 to stále vyzerá ako súčasť, tak prečo si ju nevytvoriť sami?
Čo sa naučíte:
- Práca s atribútom CSS
keyframes - Manipulujte a animujte prvky HTML
- Kombinujte JavaScript, HTML a CSS
Репозитории GitHub с функцией поиска
Nie je tu nič fantastické – repozitáre GitHub sú len oslavovaným zoznamom.
Cieľom je zobraziť úložiská a umožniť používateľovi ich filtrovanie. Použite získať úložiská pre každého používateľa.
Stránka profilu GitHub -
Čo sa naučíte:
- Prijímať údaje z API
- Zobrazenie údajov z API
- Filtrujte a zobrazte relevantné údaje pre každé vyhľadávanie
- Voliteľné: Ak sa chystáte na výzvu, použite , vytvorený pomocou GraphQL. .
Чаты в стиле Reddit
Chaty sú obľúbeným spôsobom komunikácie vďaka ich jednoduchosti a jednoduchosti používania. Čo však skutočne poháňa moderné chatovacie miestnosti? WebSockets!
Čo sa naučíte:
- Používajte WebSockets, komunikáciu v reálnom čase a aktualizácie údajov
- Pracujte s úrovňami prístupu používateľov (úlohu má napríklad vlastník chatovacieho kanála
admina ďalší v miestnosti -user) - Spracujte a overte formuláre - nezabudnite, že okno chatu na odoslanie správy je
input - Vytvorte a pripojte sa k rôznym chatom
- Pracujte s osobnými správami. Používatelia môžu súkromne chatovať s ostatnými používateľmi. V podstate vytvoríte pripojenie WebSocket medzi dvoma používateľmi.
Навигация в стиле Stripe
Čo robí túto navigáciu jedinečnou, je to, že popover kontajner sa transformuje tak, aby zodpovedal obsahu. Tento prechod má eleganciu v porovnaní s tradičným správaním otvárania a zatvárania nového popoveru.
Čo sa naučíte:
- Kombinujte animácie CSS s prechodmi
- Stlmte obsah a aplikujte aktívnu triedu na plávajúci prvok
Pacman
Vytvorte si vlastnú verziu Pacmana. Je to skvelý spôsob, ako získať predstavu o tom, ako sa hry vyvíjajú, a pochopiť základy. Použite framework JavaScript, React alebo Vue.
Naučíš sa:
- Ako sa prvky pohybujú
- Ako určiť, ktoré klávesy stlačiť
- Ako určiť moment kolízie
- Môžete ísť ďalej a pridať ovládacie prvky pohybu duchov
Nájdete príklad tohto projektu GitHub
správa užívateľov
Projekt GitHub
Vytvorenie aplikácie typu CRUD pre správu používateľov vás naučí základy vývoja. To je užitočné najmä pre nových vývojárov.
Naučíš sa:
- Čo je smerovanie
- Ako zaobchádzať s formulármi na zadávanie údajov a kontrolovať, čo používateľ zadal
- Ako pracovať s databázou - vytvárať, čítať, aktualizovať a mazať akcie
Проверка погоды в вашем местоположении
Projekt GitHub
Ak chcete vytvárať aplikácie, začnite s aplikáciou počasia. Tento projekt je možné dokončiť pomocou Swift.
Okrem toho, že získate skúsenosti s vytváraním aplikácie, naučíte sa:
- Ako pracovať s API
- Ako používať geolokáciu
- Urobte svoju aplikáciu dynamickejšou pridaním textového vstupu. Používatelia v ňom budú môcť zadať svoju polohu, aby si skontrolovali počasie na konkrétnom mieste.
Budete potrebovať API. Ak chcete získať údaje o počasí, použite OpenWeather API. Viac informácií o OpenWeather API.
Окно чата
Moje okno rozhovoru v akcii, otvorené na dvoch kartách prehliadača
Vytvorenie okna chatu je dokonalý spôsob, ako začať so zásuvkami. Výber technologického zásobníka je obrovský. Perfektný je napríklad Node.js.
Dozviete sa, ako fungujú zásuvky a ako ich implementovať. Toto je hlavná výhoda tohto projektu.
Ak ste vývojár Laravel, ktorý chce pracovať so zásuvkami, prečítajte si môj
GitLab CI
Ak ste nováčikom v oblasti kontinuálnej integrácie (CI), pohrajte sa s GitLab CI. Nastavte niekoľko prostredí a skúste spustiť niekoľko testov. Nie je to veľmi náročný projekt, ale som si istý, že sa pri ňom veľa naučíte. Mnoho vývojových tímov teraz používa CI. Vedieť, ako ho používať, je užitočné.
Naučíš sa:
- Čo je GitLab CI
- Ako nakonfigurovať
.gitlab-ci.ymlktorý hovorí používateľovi GitLabu, čo má robiť - Ako nasadiť do iných prostredí
Анализатор сайтов
Vytvorte scraper, ktorý analyzuje sémantiku webových stránok a vytvorí ich hodnotenie. Môžete napríklad skontrolovať, či v obrázkoch chýbajú alt tagy. Alebo skontrolujte, či stránka obsahuje SEO meta tagy. Škrabku je možné vytvoriť bez používateľského rozhrania.
Naučíš sa:
- Ako škrabka funguje?
- Ako vytvoriť selektory DOM
- Ako napísať algoritmus
- Ak sa tam nechcete zastaviť, vytvorte si používateľské rozhranie. Môžete tiež vytvoriť prehľad na každej webovej lokalite, ktorú kontrolujete.
Определение настроений в социальных сетях
Detekcia sentimentu na sociálnych sieťach je skvelý spôsob, ako sa zoznámiť so strojovým učením.
Môžete začať analýzou iba jednej sociálnej siete. Každý zvyčajne začína s Twitterom.
Ak už máte skúsenosti so strojovým učením, skúste zbierať dáta z rôznych sociálnych sietí a kombinovať ich.
Naučíš sa:
- Čo je strojové učenie
Клон Trello
Čo sa naučíte:
- Organizácia trás spracovania požiadaviek (Ruting).
- Drag and drop.
- Ako vytvárať nové objekty (nástenky, zoznamy, karty).
- Spracovanie a kontrola vstupných údajov.
- Zo strany klienta: ako používať lokálne úložisko, ako ukladať dáta do lokálneho úložiska, ako čítať dáta z lokálneho úložiska.
- Zo strany servera: ako používať databázy, ako ukladať údaje do databázy, ako čítať údaje z databázy.
, vyrobené v React+Redux.
Панель админа
Jednoduchá aplikácia CRUD, ideálna na učenie sa základov. Poďme sa učiť:
- Vytvárajte používateľov, spravujte používateľov.
- Interakcia s databázou – vytváranie, čítanie, úprava, mazanie používateľov.
- Overenie vstupu a práca s formulármi.
Трекер криптовалют (нативное мобильное приложение)
Čokoľvek: Swift, Objective-C, React Native, Java, Kotlin.
Poďme študovať:
- Ako fungujú natívne aplikácie.
- Ako získať údaje z API.
- Ako fungujú natívne rozloženia stránky.
- Ako pracovať s mobilnými simulátormi.
. Ak nájdete niečo lepšie, napíšte do komentárov.
Ak máte záujem, tu je .
Настроить собственный конфиг webpack с нуля
Technicky to nie je aplikácia, ale je to veľmi užitočná úloha na pochopenie toho, ako webpack funguje zvnútra. Teraz to nebude „čierna skrinka“, ale zrozumiteľný nástroj.
požiadavky:
- Kompilujte es7 až es5 (základy).
- Kompilujte jsx do js - alebo - .vue do .js (budete sa musieť naučiť nakladače)
- Nastavte webpack dev server a načítanie horúceho modulu. (vue-cli a create-react-app používajú obe)
- Použite Heroku, now.sh alebo Github, naučte sa nasadzovať projekty webpackov.
- Nastavte si svoj obľúbený preprocesor na kompiláciu css – scss, menej, stylus.
- Naučte sa používať obrázky a svgs s webovým balíkom.
Клон Hackernews
Od každého Jediho sa vyžaduje, aby vytvoril svoje vlastné Hackernews.
Čo sa na ceste naučíte:
- Ako interagovať s hackernews API.
- Ako vytvoriť jednostránkovú aplikáciu.
- Ako implementovať funkcie ako prezeranie komentárov, jednotlivých komentárov, profilov.
- Organizácia trás spracovania požiadaviek (Ruting).
Тудушечка
vážne? Tuduška? Sú ich tisíce. Ale verte mi, táto popularita má svoj dôvod.
Aplikácia Tudu je skvelý spôsob, ako sa uistiť, že rozumiete základom. Skúste napísať jednu aplikáciu vo vanilkovom Javascripte a jednu vo svojom obľúbenom frameworku.
Naučte sa:
- Vytvorte nové úlohy.
- Skontrolujte, či sú polia vyplnené.
- Filtrujte úlohy (dokončené, aktívne, všetky). Použite
filterиreduce. - Pochopte základy Javascriptu.
Сортируемый drag and drop список
Veľmi užitočné na pochopenie .
Poďme sa učiť:
- Drag and drop API
- Vytvárajte bohaté používateľské rozhrania
Клон мессенджера (нативное приложение)
Pochopíte, ako fungujú webové aplikácie aj natívne aplikácie, čím sa odlíšite od šedej masy.
Čo budeme študovať:
- Web sokety (okamžité správy)
- Ako fungujú natívne aplikácie.
- Ako fungujú šablóny v natívnych aplikáciách.
- Organizovanie trás spracovania požiadaviek v natívnych aplikáciách.
Textový editor
Účelom textového editora je znížiť námahu používateľov, ktorí sa snažia konvertovať svoje formátovanie na platné značky HTML. Dobrý textový editor umožňuje používateľom formátovať text rôznymi spôsobmi.
V určitom okamihu každý použil textový editor. Tak prečo nie ?
Клон Reddit
je agregácia sociálnych správ, hodnotenie webového obsahu a diskusná stránka.
Reddit mi zaberá väčšinu času, ale stále sa na ňom stretávam. Vytvorenie klonu Reddit je efektívny spôsob, ako sa naučiť programovať (pri súčasnom prehliadaní Redditu).
Reddit vám poskytuje veľmi bohaté. Nevynechávajte žiadne funkcie ani nerobte veci náhodne. V reálnom svete s klientmi a zákazníkmi nemôžete pracovať náhodne, inak rýchlo prídete o prácu.
Chytrí klienti si okamžite uvedomia, že práca sa robí zle a nájdu si niekoho iného.
Публикация пакета NPM с открытым исходным кодом
Ak píšete kód Javascript, je pravdepodobné, že používate správcu balíkov. Správca balíkov vám umožňuje znovu použiť existujúci kód, ktorý napísali a zverejnili iní ľudia.
Pochopenie celého vývojového cyklu balíka poskytne veľmi dobrú skúsenosť. Pri publikovaní kódu potrebujete vedieť veľa vecí. Musíte myslieť na bezpečnosť, sémantické vytváranie verzií, škálovateľnosť, konvencie pomenovania a údržbu.
Balenie môže byť čokoľvek. Ak nemáte nápad, vytvorte si vlastný Lodash a zverejnite ho.
Lodash:
To, čo ste urobili online, vás stavia o 10 % nad ostatných. o otvorených zdrojoch a balíkoch.
Учебный план freeCodeCamp
freeCodecamp nazbieral veľa .
freeCodeCamp je nezisková organizácia. Pozostáva z interaktívnej webovej vzdelávacej platformy, online komunitného fóra, diskusných miestností, publikácií Medium a miestnych organizácií, ktoré majú v úmysle sprístupniť vývoj vzdelávacieho webu pre každého.
Na svoje prvé zamestnanie budete viac než kvalifikovaní, ak sa vám podarí absolvovať celý kurz.
Создайте HTTP-сервер с нуля
Protokol HTTP je jedným z hlavných protokolov, cez ktoré putuje obsah na internete. Servery HTTP sa používajú na poskytovanie statického obsahu, ako sú HTML, CSS a JS.
Schopnosť implementovať protokol HTTP od začiatku rozšíri vaše vedomosti o tom, ako veci interagujú.
Napríklad, ak používate NodeJs, potom viete, že Express poskytuje HTTP server.
Ako referenciu zistite, či môžete:
- Nastavte server bez použitia akýchkoľvek knižníc
- Server musí poskytovať obsah HTML, CSS a JS.
- Implementácia smerovača od začiatku
- Sledujte zmeny a aktualizujte server
Ak neviete prečo, použite a skúste vytvoriť HTTP server od nuly.
Десктопное приложение для заметок
Všetci si robíme poznámky, však?
Poďme vytvoriť aplikáciu na poznámky. Aplikácia potrebuje ukladať poznámky a synchronizovať ich s databázou. Zostavte si natívnu aplikáciu pomocou Electron, Swift alebo čohokoľvek, čo sa vám páči a čo funguje pre váš systém.
Pokojne to spojte s prvou výzvou (textový editor).
Ako bonus skúste synchronizovať svoju počítačovú verziu s webovou verziou.
Подкасты (клон Overcast)
Kto nepočúva podcasty?
Vytvorte webovú aplikáciu s nasledujúcimi funkciami:
- Vytvoriť účet
- Hľadajte podcasty
- Ohodnoťte a prihláste sa na odber podcastov
- Zastavte a prehrajte, zmeňte rýchlosť, funkcie dopredu a dozadu na 30 sekúnd.
Skúste použiť iTunes API ako východiskový bod. Ak viete o iných zdrojoch, napíšte ich do komentárov.
Snímanie obrazovky
Ahoj! Práve teraz natáčam obrazovku!
Vytvorte počítačovú alebo webovú aplikáciu, ktorá vám umožní zachytiť obrazovku a uložiť klip ako .gif
Tu ako to dosiahnuť.
zdroje
Zdroj: hab.com