1. Klon pojmu
Aplikaci Notion si oblíbili mnozí, umožňuje vám optimalizovat pracovní postup, pracovat s dokumenty, plánovat úkoly a synchronizovat data mezi zařízeními.
Co se naučíte vytvořením klonu Notion:
- . Uživatel může „chytit myší“ přetahovatelné prvek a vložte jej shazovatelné zóna.
- Jak synchronizovat data v reálném čase mezi počítačem a smartphonem.
- Umožňujeme uživatelům vytvářet, číst, aktualizovat a mazat záznamy, a tím trénovat dovednosti CRUD.
Článek byl přeložen s podporou EDISON Software, která a .
2. Klon Repl.it
Repl.it je nástroj pro kolaborativní úpravy kódu v reálném čase. Můžete si vybrat několik jazyků: JavaScript, Python, Go a spustit kód přímo v prohlížeči. Velmi užitečné pro rychlé ukázky a rozhovory s kódem.
Co se naučíte vytvořením klonu Repl.it:
- Jak spouštět a spouštět kód (na straně serveru) v prohlížeči (na straně klienta).
- Přečtěte si vstupní data (zdrojový kód) a zobrazte výsledek provedení.
- Jak vytvářet soubory a složky na webu a ukládat výsledky.
- Jak zvýraznit syntaxi kódu.
3. Klonování Fotek Google
Google Photos je služba pro ukládání a sdílení fotografií.
Každá moderní fotoaplikace může provádět základní funkce: nahrát, oříznout atd. Lidé chtějí vytvářet vlastní avatary a sdílet fotografie koček, takže musíte umět pracovat s obrázky.
Co se naučíte vytvořením klonu Fotek Google:
- Jak vytvářet responzivní obrázky na telefonech, tabletech, noteboocích a dokonce i na obřích televizních obrazovkách.
- Jak zvládnout nahrávání obrázků, zejména velkých obrázků (>1 MB) a hromadné nahrávání.
- Zpracujte obrazové soubory, ořízněte a změňte velikost fotografií na miniatury nebo při otevírání galerie.
- bonus: jak ukládat obrázky do cloudu nebo místní databáze.
4. Klon Gifsky
převádí video na GIF pomocí funkcí pro efektivní palety napříč snímky a dočasný antialiasing. Výsledkem je GIF s tisíci květin na rámeček.
Co se naučíte vytvořením klonu Gifski:
- Jak převést video soubory (.mp4 na .gif).
- Jak používat Drag and Drop HTML API.
- Jak funguje optimalizace a zpracování obrazu.
Poznámka: a je na GitHubu!
5. Sledování kurzů kryptoměn
React Nativní sledovač kryptoměn
Co se naučíte vytvořením nástroje pro sledování měnových kurzů:
- Jak pracovat s API a přijímat data vzdáleně z API.
- Jak zobrazit data jako seznam.
- bonus: Pokud máte zájem, nedávno jsem psal pro kryptoměnu s React Native.
Poznámka: zde je .
Výběr projektů z předchozích publikací.
vrstva
Layer je komunita, kde každý může nakreslit pixel na sdílenou „nástěnku“. Původní nápad se zrodil na Redditu. Komunita r/Layer je metaforou sdílené kreativity, že každý může být tvůrcem a přispět ke společné věci.
Co se naučíte při vytváření vlastního projektu Layer:
- Jak funguje plátno JavaScriptu Znalost ovládání plátna je v mnoha aplikacích zásadní dovedností.
- Jak koordinovat uživatelská oprávnění. Každý uživatel může každých 15 minut nakreslit jeden pixel, aniž by se musel přihlašovat.
- Vytvořte relace souborů cookie.
Squoosh
Squoosh je aplikace pro kompresi obrázků s mnoha pokročilými možnostmi.
GIF 20 MB
Vytvořením vlastní verze Squoosh se naučíte:
- Jak pracovat s velikostí obrázků
- Naučte se základy Drag'n'Drop API
- Pochopte, jak funguje rozhraní API a posluchače událostí
- Jak nahrávat a exportovat soubory
Poznámka: Kompresor obrazu je lokální. Není nutné odesílat další data na server. Kompresor můžete mít doma, nebo jej můžete použít na serveru, dle vašeho výběru.
Kalkulačka
No tak? Vážně? Kalkulačka? Ano, přesně, kalkulačka. Pochopení základů matematických operací a jejich vzájemné spolupráce je zásadní dovedností pro zjednodušení vašich aplikací. Dříve nebo později se budete muset vypořádat s čísly a čím dříve, tím lépe.
Vytvořením vlastní kalkulačky se naučíte:
- Práce s čísly a matematické operace
- Cvičte s rozhraním API posluchačů událostí
- Jak uspořádat prvky, porozumět stylům
Crawler (vyhledávač)
Každý používá vyhledávač, tak proč si nevytvořit svůj vlastní? Prohledávače jsou potřeba k vyhledávání informací. Každý je používá každý den a poptávka po této technologii a specialistech bude časem jen růst.
vyhledávač Google
Co se naučíte vytvořením vlastního vyhledávače:
- Jak fungují prohledávače
- Jak indexovat stránky a jak je seřadit podle hodnocení a reputace
- Jak ukládat indexované stránky do databáze a jak s databází pracovat
Hudební přehrávač (Spotify, Apple Music)
Hudbu poslouchá každý – je to prostě nedílná součást našeho života. Pojďme vytvořit hudební přehrávač, abychom lépe pochopili, jak fungují základní mechanismy moderní platformy pro streamování hudby.
Spotify
Co se naučíte vytvořením vlastní platformy pro streamování hudby:
- Jak pracovat s API. použijte API ze Spotify nebo Apple Music
- Jak přehrát, pozastavit nebo přetočit na další/předchozí skladbu
- Jak změnit hlasitost
- Jak spravovat směrování uživatelů a historii prohlížeče
Aplikace pro vyhledávání filmů s Reactem (s háčky)
První věcí, kterou byste mohli začít, je vytvoření aplikace pro vyhledávání filmů pomocí React. Níže je obrázek, jak bude finální aplikace vypadat:
Co se naučíš
Vytvořením této aplikace zlepšíte své dovednosti React pomocí relativně nového API Hooks. Ukázkový projekt využívá komponenty React, spoustu háčků, externí API a samozřejmě nějaký styl CSS.
Tech stack a funkce
- Reagujte s háčky
- create-reagovat-app
- JSX
- CSS
Bez použití jakýchkoli tříd vám tyto projekty poskytnou perfektní vstupní bod do funkčního Reactu a určitě vám pomohou v roce 2020. můžeš najít . Postupujte podle pokynů nebo si ji vytvořte vlastní.
Chatovací aplikace s Vue
Dalším skvělým projektem pro vás je vytvoření chatovací aplikace pomocí mé oblíbené JavaScriptové knihovny: VueJS. Aplikace bude vypadat nějak takto:
Co se naučíš
V tomto tutoriálu se naučíte, jak vytvořit aplikaci Vue od začátku – vytvářet komponenty, zpracovávat stavy, vytvářet trasy, připojovat se ke službám třetích stran a dokonce zpracovávat ověřování.
Tech stack a funkce
- Vue
- vuex
- Směrovač Vue
- Pohled CLI
- Pusher
- CSS
Toto je opravdu skvělý projekt, jak začít s Vue nebo zlepšit své stávající dovednosti, abyste se dostali do vývoje v roce 2020. můžeš najít .
Krásná aplikace pro počasí s Angular 8
Tento příklad vám pomůže vytvořit krásnou aplikaci pro počasí pomocí Angular 8:
Co se naučíš
Tento projekt vás naučí cenné dovednosti při vytváření aplikací od nuly – od návrhu po vývoj, až po aplikaci připravenou k nasazení.
Tech stack a funkce
- Úhel 8
- Firebase
- Vykreslování na straně serveru
- CSS s mřížkou a Flexboxem
- Mobilní přátelské a přizpůsobivé
- Tmavý režim
- Krásné rozhraní
Na tomto komplexním projektu se mi opravdu líbí, že nestudujete věci izolovaně. Místo toho se naučíte celý proces vývoje od návrhu až po finální nasazení.
Aplikace To-Do se Svelte
Svelte je jako nové dítě v přístupu ke komponentám – přinejmenším podobný React, Vue a Angular. A toto je jedna z nejžhavějších novinek pro rok 2020.
To-Do aplikace nejsou nutně nejžhavějším tématem, ale opravdu vám pomohou zdokonalit vaše dovednosti Svelte. Bude to vypadat takto:
Co se naučíš
Tento tutoriál vám ukáže, jak vytvořit aplikaci pomocí Svelte 3, od začátku do konce. Budete používat komponenty, styling a handlery událostí
Tech stack a funkce
- Štíhlý 3
- Komponenty
- Stylování pomocí CSS
- Syntaxe ES6
Není mnoho dobrých startovacích projektů Svelte, tak jsem našel .
Aplikace pro elektronický obchod s Next.js
Next.js je nejoblíbenější framework pro vytváření aplikací React, které podporují vykreslování na straně serveru hned po vybalení.
Tento projekt vám ukáže, jak vytvořit aplikaci elektronického obchodu, která vypadá takto:
Co se naučíš
V tomto projektu se naučíte vyvíjet s Next.js – vytvářet nové stránky a komponenty, načítat data a stylovat a nasazovat Next aplikaci.
Tech stack a funkce
- Další.js
- Komponenty a stránky
- Vzorkování dat
- Styling
- Nasazení projektu
- SSR a SPA
Vždy je skvělé mít příklad ze skutečného života, jako je aplikace pro elektronický obchod, abyste se naučili něco nového. Můžeš .
Plný vícejazyčný blog s Nuxt.js
Nuxt.js je pro Vue, stejně jako Next.js pro React: skvělý rámec pro kombinaci vykreslování na straně serveru a jednostránkových aplikací
Poslední aplikace, kterou můžete vytvořit, bude vypadat takto:
Co se naučíš
V tomto ukázkovém projektu se naučíte, jak vytvořit kompletní web pomocí Nuxt.js, od počátečního nastavení až po konečné nasazení.
Využívá mnoho skvělých funkcí, které Nuxt nabízí, jako jsou stránky a komponenty a stylování pomocí SCSS.
Tech stack a funkce
- Nuxt.js
- Komponenty a stránky
- modul storyblock
- Mixins
- Vuex pro řízení státu
- SCSS pro styling
- Middleware Nuxt
, který obsahuje mnoho skvělých funkcí Nuxt.js. Osobně rád pracuji s Nuxtem, takže byste to měli vyzkoušet, protože z vás také bude skvělý vývojář Vue.
Blogujte s Gatsbym
Gatsby je skvělý generátor statických stránek využívající React a GraphQL. Toto je výsledek projektu:
Co se naučíš
V tomto tutoriálu se naučíte, jak pomocí Gatsbyho vytvořit blog, který budete používat k psaní vlastních článků pomocí React a GraphQL.
Tech stack a funkce
- gatsby
- REACT
- GraphQL
- Pluginy a motivy
- MDX/Markdown
- Bootstrap CSS
- šablony
Pokud jste si někdy chtěli založit blog, jak to udělat pomocí React a GraphQL.
Neříkám, že WordPress je špatná volba, ale s Gatsbym můžete vytvářet vysoce výkonné weby pomocí Reactu – což je úžasná kombinace.
Blogujte s Gridsome
Gridsome for Vue... Dobře, to už jsme měli s Next/Nuxt.
Totéž ale platí pro Gridsome a Gatsby. Oba používají GraphQL jako svou datovou vrstvu, ale Gridsome používá VueJS. Je to také úžasný generátor statických stránek, který vám pomůže vytvořit skvělé blogy:
Co se naučíš
Tento projekt vás naučí, jak vytvořit jednoduchý blog, abyste mohli začít s Gridsome, GraphQL a Markdown. Vysvětluje také, jak nasadit aplikaci prostřednictvím Netlify.
Tech stack a funkce
- Příšerný
- Vue
- GraphQL
- Snížení ceny
- netlify
Toto rozhodně není nejúplnější návod, ale pokrývá základní koncepty Gridsome a .
Audio přehrávač podobný SoundCloud pomocí Quasar
Quasar je další rámec Vue, který lze použít k vytváření mobilních aplikací. V tomto projektu vytvoříte aplikaci audio přehrávače, například:
Co se naučíš
Zatímco jiné projekty se zaměřují převážně na webové aplikace, tento vám ukáže, jak vytvořit mobilní aplikaci pomocí Vue a frameworku Quasar.
Měli byste již mít funkční Cordova s nastaveným Android Studio/Xcode. Pokud ne, manuál má odkaz na web Quasar, kde vám ukážou, jak vše nastavit.
Tech stack a funkce
- Quasar
- Vue
- Cordova
- surfař na vlně
- Komponenty uživatelského rozhraní
, demonstrující schopnosti Quasaru pro vytváření mobilních aplikací.
Formulář kreditní karty
Skvělý tvar kreditní karty s hladkými a příjemnými mikrointerakcemi. Zahrnuje formátování čísel, ověřování a automatickou detekci typu karty. Je postaven na Vue.js a je také plně responzivní. (Můžeš vidět .)
Co se naučíte:
- Zpracujte a ověřte formuláře
- Zpracování událostí (například když se změní pole)
- Pochopte, jak zobrazit a umístit prvky na stránku, zejména informace o kreditní kartě, které se zobrazují v horní části formuláře
Sloupcový graf
Histogram je tabulka nebo graf, který představuje kategorická data s obdélníkovými pruhy s výškami nebo délkami úměrnými hodnotám, které představují.
Mohou být aplikovány vertikálně nebo horizontálně. Svislý pruhový graf se někdy nazývá spojnicový graf.
Co se naučíte:
- Zobrazte data strukturovaným a srozumitelným způsobem
- Navíc: Naučte se používat prvek
canvasa jak s ním kreslit prvky
můžete najít údaje o světové populaci. Jsou seřazeny podle roku.
Twitter animace srdce
V roce 2016 představil Twitter tuto úžasnou animaci pro své tweety. Od roku 2019 to stále vypadá jako součást, tak proč si ji nevytvořit sami?
Co se naučíte:
- Práce s atributem CSS
keyframes - Manipulujte a animujte prvky HTML
- Kombinujte JavaScript, HTML a CSS
Prohledávatelná úložiště GitHub
Není zde nic fantastického – repozitáře GitHub jsou jen oslavovaným seznamem.
Cílem je zobrazit úložiště a umožnit uživateli je filtrovat. Použití získat úložiště pro každého uživatele.
Stránka profilu GitHub -
Co se naučíte:
- Přijímat data z API
- Zobrazení dat z API
- Filtrujte a zobrazte relevantní data pro každé vyhledávání
- Volitelné: Pokud se chystáte na výzvu, použijte , vytvořený pomocí GraphQL. .
Chaty ve stylu Reddit
Chaty jsou oblíbeným způsobem komunikace díky své jednoduchosti a snadnému použití. Ale co skutečně pohání moderní chatovací místnosti? WebSockets!
Co se naučíte:
- Používejte WebSockets, komunikaci v reálném čase a aktualizace dat
- Pracujte s úrovněmi přístupu uživatelů (role má například vlastník chatovacího kanálu
admina další v místnosti -user) - Zpracování a ověření formulářů – pamatujte, že okno chatu pro odeslání zprávy je
input - Vytvořte a připojte se k různým chatům
- Práce s osobními zprávami. Uživatelé mohou soukromě chatovat s ostatními uživateli. V podstatě budete vytvářet připojení WebSocket mezi dvěma uživateli.
Navigace ve stylu proužků
Co dělá tuto navigaci jedinečnou, je to, že vyskakovací kontejner se transformuje tak, aby odpovídal obsahu. Tento přechod má eleganci ve srovnání s tradičním chováním otevírání a zavírání nového popoveru.
Co se naučíte:
- Kombinujte animace CSS s přechody
- Ztlumte obsah a aplikujte aktivní třídu na plovoucí prvek
Pacman
Vytvořte si vlastní verzi Pacmana. Je to skvělý způsob, jak získat představu o tom, jak se hry vyvíjejí, a pochopit základy. Použijte framework JavaScript, React nebo Vue.
Naučíte se:
- Jak se prvky pohybují
- Jak určit, které klávesy stisknout
- Jak určit moment kolize
- Můžete jít dále a přidat ovládání pohybu duchů
Najdete příklad tohoto projektu GitHub
správa uživatelů
projekt GitHub
Vytvoření aplikace typu CRUD pro správu uživatelů vás naučí základy vývoje. To je užitečné zejména pro nové vývojáře.
Naučíte se:
- Co je směrování
- Jak zacházet s formuláři pro zadávání dat a kontrolovat, co uživatel zadal
- Jak pracovat s databází - vytvářet, číst, aktualizovat a mazat akce
Kontrola počasí ve vaší lokalitě
projekt GitHub
Pokud chcete vytvářet aplikace, začněte s aplikací počasí. Tento projekt lze dokončit pomocí Swift.
Kromě získání zkušeností s tvorbou aplikace se naučíte:
- Jak pracovat s API
- Jak používat geolokaci
- Udělejte svou aplikaci dynamičtější přidáním textového vstupu. V něm budou moci uživatelé zadat svou polohu a zkontrolovat počasí v konkrétní lokalitě.
Budete potřebovat API. Chcete-li získat data o počasí, použijte OpenWeather API. Další informace o OpenWeather API.
Okno chatu
Moje okno chatu v akci, otevřené na dvou kartách prohlížeče
Vytvoření chatovacího okna je perfektní způsob, jak začít se sockety. Výběr technologického zásobníku je obrovský. Perfektní je například Node.js.
Dozvíte se, jak zásuvky fungují a jak je implementovat. To je hlavní výhoda tohoto projektu.
Pokud jste vývojář Laravel, který chce pracovat se sockety, přečtěte si můj
GitLab CI
Pokud s kontinuální integrací (CI) teprve začínáte, pohrajte si s GitLab CI. Nastavte několik prostředí a zkuste spustit několik testů. Není to příliš obtížný projekt, ale jsem si jistý, že se z něj hodně naučíte. Mnoho vývojových týmů nyní používá CI. Vědět, jak jej používat, je užitečné.
Naučíte se:
- Co je GitLab CI
- Jak konfigurovat
.gitlab-ci.ymlkterý říká uživateli GitLabu, co má dělat - Jak nasadit do jiných prostředí
Analyzátor webových stránek
Vytvořte scraper, který analyzuje sémantiku webových stránek a vytváří jejich hodnocení. Můžete například zkontrolovat, zda v obrázcích nechybí alt tagy. Nebo zkontrolujte, zda stránka obsahuje SEO meta tagy. Škrabku lze vytvořit bez uživatelského rozhraní.
Naučíte se:
- Jak škrabka funguje?
- Jak vytvořit selektory DOM
- Jak napsat algoritmus
- Pokud se tam nechcete zastavit, vytvořte si uživatelské rozhraní. Můžete také vytvořit zprávu o každé webové stránce, kterou kontrolujete.
Detekce sentimentu na sociálních sítích
Detekce sentimentu na sociálních sítích je skvělý způsob, jak se seznámit se strojovým učením.
Můžete začít analýzou pouze jedné sociální sítě. Každý obvykle začíná s Twitterem.
Pokud již máte se strojovým učením zkušenosti, zkuste sbírat data z různých sociálních sítí a kombinovat je.
Naučíte se:
- Co je strojové učení
Klon Trello
Co se naučíte:
- Organizace tras zpracování požadavků (směrování).
- Přetáhněte.
- Jak vytvářet nové objekty (tabule, seznamy, karty).
- Zpracování a kontrola vstupních dat.
- Ze strany klienta: jak používat místní úložiště, jak ukládat data do místního úložiště, jak číst data z místního úložiště.
- Ze strany serveru: jak používat databáze, jak ukládat data do databáze, jak číst data z databáze.
, vyrobený v React+Redux.
Administrátorská lišta
Jednoduchá aplikace CRUD, ideální pro naučení se základů. Pojďmě se učit:
- Vytvářejte uživatele, spravujte uživatele.
- Interakce s databází - vytvářet, číst, upravovat, mazat uživatele.
- Ověřování vstupu a práce s formuláři.
Sledování kryptoměn (nativní mobilní aplikace)
Cokoli: Swift, Objective-C, React Native, Java, Kotlin.
Pojďme se učit:
- Jak fungují nativní aplikace.
- Jak načíst data z API.
- Jak fungují nativní rozvržení stránek.
- Jak pracovat s mobilními simulátory.
. Pokud najdete něco lepšího, napište do komentářů.
Pokud máte zájem, zde je .
Nastavte si vlastní konfiguraci webového balíčku od začátku
Technicky se nejedná o aplikaci, ale je to velmi užitečný úkol, abyste pochopili, jak webpack funguje zevnitř. Nyní to nebude „černá skříňka“, ale srozumitelný nástroj.
Požadavky:
- Kompilace es7 až es5 (základy).
- Zkompilujte jsx do js - nebo - .vue do .js (budete se muset naučit zavaděče)
- Nastavte webpack dev server a znovu načtení horkého modulu. (vue-cli a create-react-app používají oba)
- Použijte Heroku, now.sh nebo Github, zjistěte, jak nasadit projekty webpack.
- Nastavte si svůj oblíbený preprocesor pro kompilaci css – scss, méně, stylus.
- Naučte se používat obrázky a svgs s webpackem.
Klon Hackernews
Každý Jedi musí vytvářet své vlastní Hackernews.
Co se cestou naučíte:
- Jak komunikovat s hackernews API.
- Jak vytvořit jednostránkovou aplikaci.
- Jak implementovat funkce jako prohlížení komentářů, jednotlivé komentáře, profily.
- Organizace tras zpracování požadavků (směrování).
Tuduška
Vážně? Tuduška? Jsou jich tisíce. Ale věřte mi, že tato popularita má svůj důvod.
Aplikace Tudu je skvělý způsob, jak se ujistit, že rozumíte základům. Zkuste napsat jednu aplikaci ve vanilla Javascriptu a jednu ve vašem oblíbeném frameworku.
Učit se:
- Vytvářejte nové úkoly.
- Zkontrolujte, zda jsou pole vyplněna.
- Filtrovat úkoly (dokončené, aktivní, všechny). Použití
filterиreduce. - Pochopte základy Javascriptu.
Tříditelný drag and drop seznam
Velmi užitečné k pochopení .
Pojďmě se učit:
- Drag and drop API
- Vytvářejte bohaté uživatelské rozhraní
Klon Messenger (nativní aplikace)
Pochopíte, jak fungují webové aplikace i nativní aplikace, což vás odliší od šedé hmoty.
Co budeme studovat:
- Webové sokety (okamžité zprávy)
- Jak fungují nativní aplikace.
- Jak fungují šablony v nativních aplikacích.
- Organizace tras zpracování požadavků v nativních aplikacích.
Textový editor
Účelem textového editoru je snížit námahu uživatelů, kteří se snaží převést své formátování na platné značky HTML. Dobrý textový editor umožňuje uživatelům formátovat text různými způsoby.
V určitém okamžiku všichni používali textový editor. Tak proč ne ?
Klon Redditu
je sociální agregace zpráv, hodnocení webového obsahu a diskusní stránka.
Reddit mi zabírá většinu času, ale stále na něm trávím čas. Vytvoření klonu Redditu je efektivní způsob, jak se naučit programovat (při současném procházení Redditu).
Reddit vám poskytuje velmi bohaté. Nevynechávejte žádné funkce ani nedělejte věci nahodile. V reálném světě s klienty a zákazníky nemůžete pracovat nahodile, jinak rychle přijdete o práci.
Chytří klienti si okamžitě uvědomí, že práce se dělá špatně a najdou si někoho jiného.
Publikování open source balíčku NPM
Pokud píšete kód Javascript, je pravděpodobné, že používáte správce balíčků. Správce balíčků vám umožňuje znovu použít existující kód, který napsali a publikovali jiní lidé.
Pochopení celého vývojového cyklu balíčku poskytne velmi dobrou zkušenost. Při publikování kódu potřebujete vědět mnoho věcí. Musíte myslet na zabezpečení, sémantické verzování, škálovatelnost, konvence pojmenování a údržbu.
Balíček může být jakýkoliv. Pokud nemáte nápad, vytvořte si vlastní Lodash a publikujte jej.
Lodash:
Mít něco, co jste udělali online, vás staví o 10 % nad ostatní. o otevřených zdrojích a balíčcích.
kurikulum freeCodeCamp
freeCodecamp toho nasbíral hodně .
freeCodeCamp je nezisková organizace. Skládá se z interaktivní webové výukové platformy, online komunitního fóra, chatovacích místností, středních publikací a místních organizací, které mají v úmyslu zpřístupnit výukový web vývoj všem.
Pro svou první práci budete více než kvalifikovaní, pokud se vám podaří absolvovat celý kurz.
Vytvořte server HTTP od začátku
Protokol HTTP je jedním z hlavních protokolů, přes které putuje obsah na internetu. Servery HTTP se používají k poskytování statického obsahu, jako je HTML, CSS a JS.
Schopnost implementovat protokol HTTP od začátku rozšíří vaše znalosti o tom, jak věci interagují.
Pokud například používáte NodeJs, víte, že Express poskytuje server HTTP.
Pro informaci, zda můžete:
- Nastavte server bez použití knihoven
- Server musí poskytovat obsah HTML, CSS a JS.
- Implementace routeru od začátku
- Sledujte změny a aktualizujte server
Pokud nevíte proč, použijte a zkuste vytvořit HTTP server od nuly.
Desktopová aplikace pro poznámky
Všichni si děláme poznámky, ne?
Pojďme vytvořit aplikaci pro poznámky. Aplikace potřebuje ukládat poznámky a synchronizovat je s databází. Sestavte si nativní aplikaci pomocí Electron, Swift nebo čehokoli, co se vám líbí a co funguje pro váš systém.
Klidně to spojte s první výzvou (textový editor).
Jako bonus zkuste synchronizovat verzi pro počítač s webovou verzí.
Podcasty (klon Overcast)
Kdo neposlouchá podcasty?
Vytvořte webovou aplikaci s následujícími funkcemi:
- Vytvořit účet
- Hledat podcasty
- Ohodnoťte a přihlaste se k odběru podcastů
- Zastavte a hrajte, změňte rychlost, funkce vpřed a vzad po dobu 30 sekund.
Zkuste použít iTunes API jako výchozí bod. Pokud víte o dalších zdrojích, napište je do komentářů.
Snímání obrazovky
Ahoj! Právě teď natáčím svou obrazovku!
Vytvořte desktopovou nebo webovou aplikaci, která vám umožní zachytit vaši obrazovku a uložit klip jako .gif
zde je jak toho dosáhnout.
zdroje
Zdroj: www.habr.com