1. Fogalom klón
A Notion alkalmazást sokan szeretik, lehetővé teszi a munkafolyamatok optimalizálását, a dokumentumokkal való munkát, a feladatok ütemezését és az adatok szinkronizálását az eszközök között.
Amit megtudhat egy Notion klón létrehozásával:
- . A felhasználó „megragadhatja az egérrel” vonszolható elemet, és helyezze be leejthető zóna.
- Az adatok valós idejű szinkronizálása a számítógép és az okostelefon között.
- Lehetővé tesszük a felhasználóknak rekordok létrehozását, olvasását, frissítését és törlését, ezáltal képezve a CRUD-készségeket.
A cikk az EDISON Software támogatásával készült, amely És .
2. Repl.it klón
A Repl.it egy eszköz a valós idejű kollaboratív kódszerkesztéshez. Több nyelv közül választhat: JavaScript, Python, Go, és futtassa a kódot közvetlenül a böngészőben. Nagyon hasznos gyors bemutatókhoz és kódinterjúkhoz.
Amit megtudhat egy Repl.it klón létrehozásával:
- A kód futtatása és végrehajtása (szerveroldali) a böngészőben (kliens oldalon).
- Olvassa be a bemeneti adatokat (forráskódot), és jelenítse meg a végrehajtás eredményét.
- Hogyan hozhat létre fájlokat és mappákat az interneten, és mentheti el az eredményeket.
- Hogyan lehet kiemelni a kód szintaxisát.
3. Google Photos Clone
A Google Fotók egy fotók tárolására és megosztására szolgáló szolgáltatás.
Bármely modern fotóalkalmazás képes elvégezni az alapvető funkciókat: feltölteni, körbevágni stb. Az emberek saját avatarokat szeretnének létrehozni, és megosztani a macskákról készült fotókat, ezért tudnia kell dolgozni a képekkel.
Amit megtudhat, ha létrehoz egy Google Fotók-klónt:
- Hogyan készítsünk reszponzív képeket telefonokon, táblagépeken, laptopokon és akár hatalmas tévéképernyőkön.
- A képfeltöltések kezelése, különösen a nagy képek (>1 MB) és a tömeges feltöltések.
- Képfájlok feldolgozása, fényképek kivágása és átméretezése miniatűrökhöz vagy galéria megnyitásakor.
- bónusz: hogyan lehet képeket tárolni a felhőben vagy a helyi adatbázisban.
4. Gifsky klón
funkciók segítségével konvertálja a videót GIF formátumba a hatékony cross-frame palettákhoz és az időbeli élsimításhoz. Az eredmény egy GIF képkockánként több ezer virággal.
Amit megtudhat egy Gifski-klón létrehozásával:
- Videofájlok konvertálása (.mp4 .gif formátumba).
- A Drag and Drop HTML API használata.
- Hogyan működik a képoptimalizálás és -feldolgozás.
Megjegyzés: és a GitHubon van!
5. A kriptovaluta árfolyamának figyelése
React Natív kriptovaluta-követő
Mit fog megtudni egy valutaárfolyam-követő létrehozásával:
- Hogyan kell dolgozni az API-val és távolról fogadni az adatokat az API-ból.
- Hogyan jelenítsünk meg adatokat listaként.
- bónusz: Ha érdekel, nemrég írtam kriptovalutához a React Native segítségével.
Megjegyzés: Itt .
Válogatás a korábbi publikációkból származó projektekből.
réteg
A Layer egy közösség, ahol mindenki rajzolhat egy pixelt egy közös „táblára”. Az eredeti ötlet a Redditen született. Az r/Layer közösség a megosztott kreativitás metaforája, amely szerint mindenki lehet alkotó, és hozzájárulhat egy közös ügyhöz.
Amit meg fog tanulni saját rétegprojektjének létrehozásakor:
- Hogyan működik a JavaScript vászon A vászon kezelésének ismerete számos alkalmazásban kritikus készség.
- A felhasználói engedélyek összehangolása. Minden felhasználó bejelentkezés nélkül rajzolhat egy pixelt 15 percenként.
- Hozzon létre cookie-munkameneteket.
Squoosh
A Squoosh egy képtömörítő alkalmazás számos speciális beállítással.
GIF 20 MB
A Squoosh saját verziójának elkészítésével megtanulhatja:
- Hogyan kell dolgozni a képméretekkel
- Ismerje meg a Drag'n'Drop API alapjait
- Ismerje meg az API és az eseményfigyelők működését
- Fájlok feltöltése és exportálása
Megjegyzés: A képtömörítő helyi. Nem szükséges további adatokat küldeni a szervernek. A kompresszort otthon is birtokolhatja, vagy tetszés szerint szerveren is használhatja.
számológép
Gyerünk? Komolyan? Számológép? Igen, pontosan egy számológép. A matematikai műveletek alapjainak és azok együttműködésének megértése kritikus készség az alkalmazások egyszerűsítéséhez. Előbb-utóbb meg kell küzdenie a számokkal, és minél előbb, annál jobb.
A saját számológép elkészítésével megtanulhatja:
- Számokkal és matematikai műveletekkel dolgozzon
- Gyakoroljon eseményfigyelő API-val
- Elemek elrendezése, stílusok megértése
Robot (keresőmotor)
Mindenki használt már keresőmotort, miért ne hozná létre a sajátját? Az információk kereséséhez bejárókra van szükség. Mindenki nap mint nap használja őket, és a technológia és a szakemberek iránti kereslet idővel csak nőni fog.
Google kereső
Amit saját kereső létrehozásával tanulhat meg:
- Hogyan működnek a bejárók
- Webhelyek indexelése és rangsorolása értékelés és hírnév alapján
- Hogyan lehet indexelt webhelyeket tárolni egy adatbázisban, és hogyan kell dolgozni az adatbázissal
Zenelejátszó (Spotify, Apple Music)
Mindenki hallgat zenét – az életünk szerves része. Hozzunk létre egy zenelejátszót, hogy jobban megértsük, hogyan működik egy modern zenei streaming platform alapvető mechanikája.
Spotify
Amit megtanulhatsz saját zenei streaming platformod létrehozásával:
- Hogyan kell dolgozni az API-val. használja a Spotify vagy az Apple Music API-ját
- Lejátszás, szüneteltetés vagy visszatekerés a következő/előző számra
- A hangerő megváltoztatása
- A felhasználói útválasztás és a böngészési előzmények kezelése
Filmkereső alkalmazás a React segítségével (akasztókkal)
Az első dolog, amit kezdhet, az az, hogy hozzon létre egy filmkereső alkalmazást a React segítségével. Az alábbiakban egy kép látható arról, hogyan fog kinézni a végső alkalmazás:
Mit fog tanulni
Az alkalmazás elkészítésével a viszonylag új Hooks API használatával fejlesztheti React képességeit. A példaprojekt React komponenseket, sok hook-ot, külső API-t és természetesen némi CSS stílust használ.
Tech stack és funkciók
- Reagáljon horgokkal
- create-reagál-app
- JSX
- CSS
Osztályok használata nélkül ezek a projektek tökéletes belépési pontot biztosítanak a funkcionális React-ba, és 2020-ban mindenképpen segítségedre lesznek. megtalálhatod . Kövesse az utasításokat, vagy készítse el saját magának.
Csevegőalkalmazás a Vue-val
Egy másik nagyszerű projekt az Ön számára, hogy létrehozzon egy csevegőalkalmazást a kedvenc JavaScript-könyvtáram, a VueJS használatával. Az alkalmazás valahogy így fog kinézni:
Mit fog tanulni
Ebből az oktatóanyagból megtudhatja, hogyan készítsen Vue alkalmazást a semmiből – hozzon létre összetevőket, kezelje az állapotokat, hozzon létre útvonalakat, csatlakozzon harmadik féltől származó szolgáltatásokhoz, és még a hitelesítést is kezelje.
Tech stack és funkciók
- Vue
- vuex
- vue router
- CLI nézet
- Toló
- CSS
Ez egy igazán nagyszerű projekt a Vue használatának megkezdéséhez, vagy meglévő készségeinek fejlesztéséhez, hogy 2020-ban elindulhasson a fejlesztés. megtalálhatod .
Gyönyörű időjárási alkalmazás az Angular 8-mal
Ez a példa segít egy gyönyörű időjárási alkalmazás létrehozásában az Angular 8 használatával:
Mit fog tanulni
Ez a projekt értékes készségeket tanít meg az alkalmazások létrehozásában a semmiből – a tervezéstől a fejlesztésig, egészen a telepítésre kész alkalmazásig.
Tech stack és funkciók
- 8. szög
- Firebase
- Szerver oldali renderelés
- CSS Griddel és Flexbox-szal
- Mobilbarát és alkalmazkodóképesség
- Sötét mód
- Gyönyörű felület
Amit nagyon szeretek ebben az átfogó projektben, az az, hogy nem elszigetelten tanulmányozod a dolgokat. Ehelyett megtanulja a teljes fejlesztési folyamatot a tervezéstől a végső üzembe helyezésig.
To-Do alkalmazás a Svelte segítségével
A Svelte olyan, mint az új gyerek a komponens-alapú megközelítésben – legalábbis hasonló a React, a Vue és az Angular-hoz. És ez az egyik legmenőbb új termék 2020-ban.
A teendő alkalmazások nem feltétlenül a legfelkapottabb téma, de valóban segítenek fejleszteni Svelte képességeit. Így fog kinézni:
Mit fog tanulni
Ez az oktatóanyag bemutatja, hogyan hozhat létre alkalmazást a Svelte 3 használatával, az elejétől a végéig. Összetevőket, stílust és eseménykezelőket fog használni
Tech stack és funkciók
- Karcsú 3
- Alkatrészek
- Stílusozás CSS-sel
- Szintaxis ES6
Nem sok jó Svelte induló projekt van, ezért találtam .
E-kereskedelmi alkalmazás a Next.js használatával
A Next.js a legnépszerűbb keretrendszer olyan React-alkalmazások készítéséhez, amelyek támogatják a kiszolgálóoldali renderelést.
Ez a projekt bemutatja, hogyan hozhat létre egy e-kereskedelmi alkalmazást, amely így néz ki:
Mit fog tanulni
Ebben a projektben megtudhatja, hogyan fejleszthet a Next.js-szel – új oldalakat és összetevőket hozhat létre, adatokat kérhet le, stílust és egy Next alkalmazást telepíthet.
Tech stack és funkciók
- Next.js
- Összetevők és oldalak
- Adatmintavétel
- stilizáció
- Projekt bevezetése
- SSR és SPA
Mindig nagyszerű, ha van egy valós példa, például egy e-kereskedelmi alkalmazás, amellyel valami újat tanulhat. tudsz .
Teljes értékű többnyelvű blog Nuxt.js-szal
A Nuxt.js a Vue-hoz, a Next.js pedig a Reacthoz: nagyszerű keretrendszer a szerveroldali megjelenítés és az egyoldalas alkalmazások erejének kombinálásához
A létrehozható végső alkalmazás így fog kinézni:
Mit fog tanulni
Ebben a mintaprojektben megtudhatja, hogyan hozhat létre teljes webhelyet a Nuxt.js használatával, a kezdeti beállítástól a végső üzembe helyezésig.
Kihasználja a Nuxt által kínált számos nagyszerű funkciót, például az oldalakat és összetevőket, valamint az SCSS-s stílust.
Tech stack és funkciók
- Nuxt.js
- Összetevők és oldalak
- történetblokk modul
- Nyálkahal
- Vuex állami irányításra
- SCSS a stílushoz
- Nuxt köztes szoftverek
, amely számos nagyszerű Nuxt.js funkciót tartalmaz. Én személy szerint szeretek a Nuxttal dolgozni, ezért érdemes kipróbálnod, mert attól is nagyszerű Vue fejlesztő leszel.
Blogolj Gatsbyvel
A Gatsby egy kiváló statikus helygenerátor a React és a GraphQL használatával. Ez a projekt eredménye:
Mit fog tanulni
Ebből az oktatóanyagból megtudhatja, hogyan használhatja a Gatsbyt egy blog létrehozásához, amelyet saját cikkeinek megírásához használhat a React és a GraphQL használatával.
Tech stack és funkciók
- Gatsby
- Reagál
- GraphQL
- Pluginok és témák
- MDX/Markdown
- Bootstrap CSS
- sablonok
Ha valaha is blogot akartál indítani, hogyan kell elkészíteni a React és a GraphQL használatával.
Nem azt mondom, hogy WordPress rossz választás, de a Gatsby-val nagy teljesítményű webhelyeket lehet építeni React használatával – ami egy csodálatos kombináció.
Blog Gridsome-mal
Gridsome a Vue számára... Oké, ez már megvolt a Next/Nuxt-tal.
De ugyanez igaz Gridsome-ra és Gatsbyre is. Mindkettő a GraphQL-t használja adatrétegként, de a Gridsome a VueJS-t használja. Ez egy nagyszerű statikus webhelygenerátor is, amely segít nagyszerű blogok létrehozásában:
Mit fog tanulni
Ez a projekt megtanítja Önnek, hogyan hozhat létre egyszerű blogot a Gridsome, GraphQL és Markdown használatához. Azt is leírja, hogyan telepíthet egy alkalmazást a Netlify-on keresztül.
Tech stack és funkciók
- Zavaros
- Vue
- GraphQL
- Árleszállítás
- netlify
Ez természetesen nem a legteljesebb oktatóanyag, de lefedi a Gridsome és a .
SoundCloud-szerű audiolejátszó Quasar használatával
A Quasar egy másik Vue-keretrendszer, amely mobilalkalmazások létrehozására használható. Ebben a projektben audiolejátszó alkalmazást fog létrehozni, például:
Mit fog tanulni
Míg más projektek főként a webes alkalmazásokra összpontosítanak, ez bemutatja, hogyan hozhat létre mobilalkalmazást a Vue és a Quasar keretrendszer segítségével.
Már rendelkeznie kell egy működő, konfigurált Cordova-val. Android Studio/Xcode. Ha nem, az útmutatóban van egy link a Quasar weboldalára, ahol bemutatják, hogyan kell mindent beállítani.
Tech stack és funkciók
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI összetevők
, amely bemutatja a Quasar képességeit mobil alkalmazások létrehozására.
Hitelkártya űrlap
Menő hitelkártya-forma sima és élvezetes mikro-interakciókkal. Tartalmazza a számformázást, az ellenőrzést és az automatikus kártyatípus felismerést. A Vue.js-re épül, és teljesen reszponzív. (Láthatod .)
Amit meg fogsz tanulni:
- Űrlapok feldolgozása és érvényesítése
- Események kezelése (például amikor a mezők megváltoznak)
- Ismerje meg, hogyan jeleníthet meg és helyezhet el elemeket az oldalon, különösen az űrlap tetején megjelenő hitelkártyaadatokat
oszlopdiagram
A hisztogram egy diagram vagy grafikon, amely kategorikus adatokat ábrázol téglalap alakú oszlopokkal, amelyek magassága vagy hossza arányos az általuk képviselt értékekkel.
Alkalmazhatók függőlegesen vagy vízszintesen. A függőleges oszlopdiagramot néha vonaldiagramnak is nevezik.
Amit meg fogsz tanulni:
- Az adatokat strukturáltan és érthetően jelenítse meg
- Ezenkívül: Ismerje meg az elem használatát
canvasés hogyan rajzoljunk vele elemeket
megtalálhatja a világ népességének adatait. Évek szerint vannak rendezve.
Twitter szív animáció
Még 2016-ban a Twitter bemutatta ezt a csodálatos animációt a tweetjeihez. 2019-ben még mindig úgy néz ki, mint az alkatrész, miért ne készíthetne egyet saját maga?
Amit meg fogsz tanulni:
- CSS attribútum használata
keyframes - HTML-elemek manipulálása és animálása
- Kombinálja a JavaScriptet, a HTML-t és a CSS-t
Kereshető GitHub adattárak
Nincs itt semmi különös – a GitHub adattárak csak egy megdicsőült lista.
A cél az, hogy megjelenítse a tárolókat, és lehetővé tegye a felhasználó számára a szűrést. Használat hogy minden felhasználó számára tárolókat kapjon.
GitHub profiloldal -
Amit meg fogsz tanulni:
- Adatok fogadása az API-tól
- Adatok megjelenítése az API-ból
- Szűrje és jelenítse meg a releváns adatokat minden kereséshez
- Választható: Ha készen áll egy kihívásra, használja , GraphQL használatával készült. .
Reddit stílusú csevegés
A csevegés egyszerűségük és könnyű használatuk miatt népszerű kommunikációs mód. De valójában mi táplálja a modern chatszobákat? WebSockets!
Amit meg fogsz tanulni:
- Használja a WebSocketeket, a valós idejű kommunikációt és az adatfrissítéseket
- Dolgozzon felhasználói hozzáférési szintekkel (például egy csevegési csatorna tulajdonosának van szerepe
adminés mások a szobában -user) - Űrlapok feldolgozása és érvényesítése – ne feledje, hogy az üzenet küldésére szolgáló chat ablak az
input - Hozzon létre és csatlakozzon különböző csevegésekhez
- Dolgozzon személyes üzenetekkel. A felhasználók privát csevegést folytathatnak más felhasználókkal. Lényegében WebSocket kapcsolatot hoz létre két felhasználó között.
Csíkos stílusú navigáció
Ami ezt a navigációt egyedivé teszi, az az, hogy a felugró tároló átalakul a tartalomhoz. Van egy eleganciája ennek az átmenetnek az új popover megnyitásának és bezárásának hagyományos viselkedéséhez képest.
Amit meg fogsz tanulni:
- Kombinálja a CSS-animációkat átmenetekkel
- A tartalom halványítása és az aktív osztály alkalmazása a lebegtetett elemre
Pacman
Készítse el saját Pacman verzióját. Ez egy nagyszerű módja annak, hogy képet kapjon a játékok fejlesztéséről, és megértse az alapokat. Használjon JavaScript-keretrendszert, Reactot vagy Vue-t.
Tanulni fogsz:
- Hogyan mozognak az elemek
- Hogyan határozzuk meg, hogy mely gombokat kell megnyomni
- Hogyan határozzuk meg az ütközés pillanatát
- Továbbléphetsz, és hozzáadhatsz szellemmozgás-vezérlőket
Példát talál erre a projektre GitHub
felhasználókezelés
Terv GitHub
A felhasználói adminisztrációhoz szükséges CRUD típusú alkalmazás elkészítése megtanítja a fejlesztés alapjait. Ez különösen hasznos az új fejlesztők számára.
Tanulni fogsz:
- Mi az útválasztás
- Az adatbeviteli űrlapok kezelése és a felhasználó által megadott adatok ellenőrzése
- Hogyan kell dolgozni az adatbázissal - műveletek létrehozása, olvasása, frissítése és törlése
Az időjárás ellenőrzése a helyszínen
Terv GitHub
Ha alkalmazásokat szeretne létrehozni, kezdje egy időjárás-alkalmazással. Ez a projekt a Swift segítségével fejezhető be.
Amellett, hogy tapasztalatot szerez egy alkalmazás elkészítésében, megtanulja:
- Hogyan kell dolgozni az API-val
- A földrajzi helymeghatározás használata
- Tegye dinamikusabbá alkalmazását szövegbevitel hozzáadásával. Ebben a felhasználók megadhatják tartózkodási helyüket, hogy ellenőrizzék az időjárást egy adott helyen.
Szükséged lesz egy API-ra. Az időjárási adatok lekéréséhez használja az OpenWeather API-t. További információ az OpenWeather API-ról.
Chat ablak
A csevegőablak működésben, két böngészőlapon nyílik meg
A csevegőablak létrehozása a tökéletes módja a socketek használatának. A technológiai készlet választéka óriási. A Node.js például tökéletes.
Megtanulja az aljzatok működését és megvalósítását. Ez a projekt fő előnye.
Ha Ön Laravel fejlesztő, aki socketekkel szeretne dolgozni, olvassa el az én
GitLab CI
Ha még nem ismeri a folyamatos integrációt (CI), játsszon a GitLab CI-vel. Állítson be néhány környezetet, és próbáljon meg néhány tesztet futtatni. Nem túl nehéz projekt, de biztos vagyok benne, hogy sokat tanulsz belőle. Sok fejlesztőcsapat jelenleg CI-t használ. Hasznos tudni, hogyan kell használni.
Tanulni fogsz:
- Mi az a GitLab CI
- Hogyan kell konfigurálni
.gitlab-ci.ymlamely megmondja a GitLab felhasználónak, hogy mit kell tennie - Hogyan telepíthető más környezetekben
Weboldal elemző
Készítsen egy kaparót, amely elemzi a webhelyek szemantikáját, és létrehozza azok értékelését. Például ellenőrizheti a hiányzó alt címkéket a képekről. Vagy ellenőrizze, hogy az oldal tartalmaz-e SEO metacímkéket. A lehúzó felhasználói felület nélkül is létrehozható.
Tanulni fogsz:
- Hogyan működik a kaparó?
- Hogyan készítsünk DOM-választókat
- Hogyan írjunk algoritmust
- Ha nem akar itt megállni, hozzon létre egy felhasználói felületet. Minden ellenőrzött webhelyről jelentést is készíthet.
Érzelemérzékelés a közösségi hálózatokon
A közösségi médiában a hangulatérzékelés nagyszerű módja annak, hogy megismerkedjünk a gépi tanulással.
Kezdheti egyetlen közösségi hálózat elemzésével. Általában mindenki a Twitterrel kezdi.
Ha már van tapasztalata a gépi tanulással kapcsolatban, próbáljon meg adatokat gyűjteni különböző közösségi hálózatokról, és kombinálni azokat.
Tanulni fogsz:
- Mi a gépi tanulás
Trello klón
Amit meg fogsz tanulni:
- Kérelemfeldolgozási útvonalak szervezése (Routing).
- Fogd és vidd.
- Új objektumok (táblák, listák, kártyák) létrehozása.
- A bemeneti adatok feldolgozása és ellenőrzése.
- Kliens oldalról: hogyan kell használni a helyi tárhelyet, hogyan lehet adatokat menteni a helyi tárhelyre, hogyan lehet adatokat kiolvasni a helyi tárhelyről.
- Szerver oldalról: adatbázisok használata, adatok mentése az adatbázisban, adatok kiolvasása az adatbázisból.
, React+Redux-ban készült.
Adminisztrációs Panel
Egy egyszerű CRUD alkalmazás, ideális az alapok elsajátításához. Tanuljunk:
- Felhasználók létrehozása, felhasználók kezelése.
- Interakció az adatbázissal – felhasználók létrehozása, olvasása, szerkesztése, törlése.
- A bevitel érvényesítése és az űrlapokkal való munka.
Kriptovaluta-követő (natív mobilalkalmazás)
Bármi: Swift, Objective-C, React Native, Java, Kotlin.
Tanuljunk:
- A natív alkalmazások működése.
- Adatok lekérése az API-ból.
- A natív oldalelrendezések működése.
- Hogyan kell dolgozni mobil szimulátorokkal.
. Ha találsz jobbat, írd meg kommentben.
Ha érdekel, itt van .
Állítsa be saját webpack konfigurációját a semmiből
Technikailag ez nem egy alkalmazás, de nagyon hasznos feladat, hogy megértsük a webpack működését belülről. Most nem „fekete doboz” lesz, hanem érthető eszköz.
követelmények:
- Fordítsa le az es7-et es5-re (alapok).
- Fordítsa le a jsx-et js-be - vagy - a .vue-t .js-be (meg kell tanulnia a betöltőket)
- Állítsa be a webpack fejlesztői kiszolgálót és a hot modul újratöltését. (a vue-cli és a create-react-app mindkettőt használja)
- Használja a Heroku-t, a now.sh-t vagy a Githubot, és tanulja meg a webpack-projektek üzembe helyezését.
- Állítsa be kedvenc előfeldolgozóját a css fordításához – scss, less, stylus.
- Ismerje meg, hogyan használhat képeket és SVG-ket a webcsomaggal.
Hackernews klón
Minden Jedi köteles elkészíteni a saját Hackernews-ját.
Amit az út során megtanulhatsz:
- Hogyan lépjünk kapcsolatba a hackernews API-val.
- Hogyan készítsünk egyoldalas alkalmazást.
- Az olyan funkciók megvalósítása, mint a megjegyzések, egyéni megjegyzések, profilok megtekintése.
- Kérelemfeldolgozási útvonalak szervezése (Routing).
Tudushechka
Komolyan? Tudushka? Több ezer van belőlük. De hidd el, ennek a népszerűségnek oka van.
A Tudu alkalmazás nagyszerű módja annak, hogy biztosan megértse az alapokat. Írjon egy alkalmazást vanília Javascript nyelven, és egyet a kedvenc keretrendszerében.
Tanul:
- Hozzon létre új feladatokat.
- Ellenőrizze, hogy a mezők ki vannak-e töltve.
- Feladatok szűrése (befejezett, aktív, összes). Használat
filterиreduce. - Ismerje meg a Javascript alapjait.
Rendezhető drag and drop lista
Nagyon hasznos megérteni .
Tanuljunk:
- Drag and drop API
- Hozzon létre gazdag felhasználói felületeket
Messenger klón (natív alkalmazás)
Meg fogja érteni, hogyan működnek mind a webalkalmazások, mind a natív alkalmazások, ami megkülönbözteti Önt a szürke tömegtől.
Amit tanulmányozni fogunk:
- Web socketek (azonnali üzenetek)
- A natív alkalmazások működése.
- A sablonok működése a natív alkalmazásokban.
- Kérelemfeldolgozási útvonalak szervezése natív alkalmazásokban.
Szövegszerkesztő
A szövegszerkesztő célja, hogy csökkentse a formázásukat érvényes HTML-jelölésekké alakítani próbáló felhasználók erőfeszítéseit. Egy jó szövegszerkesztő lehetővé teszi a felhasználók számára a szöveg különböző módokon történő formázását.
Valamikor mindenki használt szövegszerkesztőt. Szóval miért ne ?
Reddit klón
egy közösségi hírösszesítő, webtartalom-besoroló és vitalap.
A Reddit lefoglalja az időm nagy részét, de továbbra is kitartok rajta. A Reddit klón létrehozása hatékony módja a programozás elsajátításának (a Reddit böngészése közben).
A Reddit nagyon gazdag. Ne hagyjon ki egyetlen funkciót sem, és ne végezzen dolgokat véletlenül. Az ügyfelekkel és ügyfelekkel való valós világban nem dolgozhat véletlenül, különben gyorsan elveszíti a munkáját.
Az okos ügyfelek azonnal észreveszik, hogy a munkát rosszul végzik, és mást keresnek.
Nyílt forráskódú NPM-csomag közzététele
Ha Javascript kódot ír, akkor valószínűleg csomagkezelőt használ. A csomagkezelő lehetővé teszi a meglévő kódok újrafelhasználását, amelyeket mások írtak és tettek közzé.
Egy csomag teljes fejlesztési ciklusának megértése nagyon jó élményt nyújt. A kód közzétételekor sok mindent tudnia kell. Gondolnia kell a biztonságra, a szemantikai verziókezelésre, a méretezhetőségre, az elnevezési konvenciókra és a karbantartásra.
A csomag bármi lehet. Ha nincs ötlete, hozzon létre saját Lodash-t, és tegye közzé.
Lodash:
Ha online csináltál valamit, az 10%-kal a többiek fölé helyez. a nyílt forrásokról és a csomagokról.
freeCodeCamp tananyag
A freeCodecamp sokat gyűjtött .
A freeCodeCamp egy non-profit szervezet. Ez egy interaktív web-alapú tanulási platformból, egy online közösségi fórumból, chatszobákból, Medium kiadványokból és olyan helyi szervezetekből áll, amelyek a tanulási webfejlesztést mindenki számára elérhetővé kívánják tenni.
Több mint képzett lesz az első munkahelyére, ha sikerül a teljes tanfolyamot elvégeznie.
Hozzon létre egy HTTP-kiszolgálót a semmiből
A HTTP protokoll az egyik fő protokoll, amelyen keresztül a tartalom az interneten terjed. A HTTP-kiszolgálók statikus tartalmak, például HTML, CSS és JS kiszolgálására szolgálnak.
A HTTP-protokoll a semmiből való megvalósítása bővíti ismereteit a dolgok interakciójáról.
Ha például NodeJ-ket használ, akkor tudja, hogy az Express HTTP-kiszolgálót biztosít.
Referenciaként nézze meg, hogy tudja-e:
- Szerver beállítása könyvtárak használata nélkül
- A szervernek HTML, CSS és JS tartalmat kell kiszolgálnia.
- Router megvalósítása a semmiből
- Figyelje a változásokat és frissítse a szervert
Ha nem tudod miért, használd és próbáljon létrehozni egy HTTP szervert a semmiből.
Asztali alkalmazás jegyzetekhez
Mindannyian jegyzetelünk, nem?
Hozzon létre egy jegyzet alkalmazást. Az alkalmazásnak el kell mentenie a jegyzeteket, és szinkronizálnia kell őket az adatbázissal. Készítsen natív alkalmazást Electron, Swift vagy bármi más segítségével, ami működik a rendszerén.
Ezt nyugodtan kombinálhatod az első kihívással (szövegszerkesztő).
Bónuszként próbálja meg szinkronizálni az asztali verzióját a webes verzióval.
Podcastok (Oborcast klón)
Ki nem hallgat podcastokat?
Hozzon létre egy webalkalmazást a következő funkciókkal:
- Hozzon létre egy fiókot
- Podcastok keresése
- Értékelje a podcastokat és iratkozzon fel rájuk
- Leállítás és lejátszás, sebességváltás, előre és hátra funkciók 30 másodpercig.
Próbálja kiindulásként az iTunes API-t használni. Ha tud más forrást, kérjük, tegye közzé a megjegyzésekben.
Képernyőfelvétel
Helló! Most forgatom a képernyőmet!
Hozzon létre egy asztali vagy webes alkalmazást, amely lehetővé teszi a képernyő rögzítését, és a klip másként történő mentését .gif
Itt hogyan lehet ezt elérni.
forrás
Forrás: will.com
