Front-end dojo: projektek a fejlesztői készségek képzésére (5 új + 43 régi)
1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Как запускать и выполнять код (server-side) в браузере (client-side).
Считывать входные данные (исходный код) и выводить на экран результат выполнения.
Как создавать файлы и папки в вебе и сохранять результаты.
Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
bónusz: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
gifski конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
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.
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.
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 mintaprojekt itt. 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 bemutató itt.
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
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 az oktatóanyagot itt találja.
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
Ez egy nagyon klassz projekt., 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, ez egy nagyszerű példa hogyan kell elkészíteni a React és a GraphQL használatával.
Nem azt mondom, hogy a WordPress rossz választás, de a Gatsby segítségével nagy teljesítményű webhelyeket készíthet a React segítségével – 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.
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 futnia kell a Cordova-nak, és konfigurált Android Studio/Xcode-dal. Ha nem, a kézikönyvben található egy hivatkozás a Quasar webhelyére, ahol megmutatják, hogyan kell mindent beállítani.
Tech stack és funkciók
Quasar
Vue
Cordova
WaveSurfer
UI összetevők
kis projekt, amely bemutatja a Quasar képességeit mobil alkalmazások létrehozására.
Форма кредитной карты
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 itt.)
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
Itt megtalálhatja a világ népességének adatait. Évek szerint vannak rendezve.
Анимация сердечка Twitter
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
Репозитории GitHub с функцией поиска
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 hivatalos GitHub API hogy minden felhasználó számára tárolókat kapjon.
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.
Навигация в стиле Stripe
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
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
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 itt.
Окно чата
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 статью
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
Анализатор сайтов
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.
Ú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.
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.
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.
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 hozd létre magad?
Клон Reddit
Reddit 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 API. 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.
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é.
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.
Создайте HTTP-сервер с нуля
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 Go lang és próbáljon létrehozni egy HTTP szervert Labdaszedő a semmiből.
Десктопное приложение для заметок
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.
Подкасты (клон Overcast)
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.