1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Den Artikel gouf mat der Ënnerstëtzung vun der EDISON Software iwwersat, déi , wéi och .
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.
- Как работают оптимизация и обработка изображений.
Opgepasst: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Opgepasst: hei .
Подборка проектов из предыдущих публикаций.
Layer
Layer ass eng Gemeinschaft wou jidderee e Pixel op engem gemeinsame "Brett" zéie kann. Déi originell Iddi gouf op Reddit gebuer. D'r/Layer Gemeinschaft ass eng Metapher fir gemeinsam Kreativitéit, datt jidderee e Schëpfer kann sinn an zu enger gemeinsamer Saach bäidroen.
Wat Dir léiert wann Dir Ären eegene Layer Projet erstellt:
- Wéi JavaScript Canvas funktionnéiert Wësse wéi ee Canvas operéiert ass eng kritesch Fäegkeet a villen Uwendungen.
- Wéi koordinéieren Benotzer Permissiounen. All Benotzer kann all 15 Minutten ee Pixel molen ouni sech aloggen ze mussen.
- Erstellt Cookie Sessiounen.
Squoosh
Squoosh ass eng Bildkompressiounsapplikatioun mat vill fortgeschratt Optiounen.
GIF 20 MB
Andeems Dir Är eege Versioun vu Squoosh erstellt léiert Dir:
- Wéi mat Bildgréissten ze schaffen
- Léiert d'Basis vun der Drag'n'Drop API
- Verstinn wéi d'API an Eventnolauschterer funktionnéieren
- Wéi eropluede an exportéieren Dateien
Opgepasst: De Bildkompressor ass lokal. Et ass net néideg zousätzlech Donnéeën un de Server ze schécken. Dir kënnt de Kompressor doheem hunn, oder Dir kënnt et op engem Server benotzen, Äre Choix.
Rechner
Komm? Eescht? Rechner? Jo, genee, e Rechner. D'Grondlage vu Mathematikoperatiounen ze verstoen a wéi se zesumme schaffen ass eng kritesch Fäegkeet fir Är Uwendungen ze vereinfachen. Desto oder spéider musst Dir mat Zuelen ëmgoen an wat desto besser ass.
Andeems Dir Ären eegene Rechner erstellt léiert Dir:
- Schafft mat Zuelen a mathematesch Operatiounen
- Praxis mat Event Listener API
- Wéi Elementer ze arrangéieren, Stiler verstoen
Crawler (Sichmaschinn)
Jiddereen huet eng Sichmotor benotzt, also firwat net Är eege erstellen? Crawler si gebraucht fir no Informatioun ze sichen. Jiddereen benotzt se all Dag an d'Demande fir dës Technologie a Spezialisten wäert nëmme mat der Zäit wuessen.
Google Sich-Moteur
Wat Dir léiert andeems Dir Är eege Sichmotor erstellt:
- Wéi Crawler funktionnéieren
- Wéi indexéiert Siten a wéi een se rangéiert no Bewäertung a Ruff
- Wéi indexéiert Siten an enger Datebank ze späicheren a wéi mat der Datebank ze schaffen
Museksspiller (Spotify, Apple Music)
Jiddereen lauschtert Musek - et ass just en integralen Deel vun eisem Liewen. Loosst eis e Museksspiller erstellen fir besser ze verstoen wéi d'Basismechanik vun enger moderner Musek Streaming Plattform funktionnéiert.
Spotify
Wat Dir léiert andeems Dir Är eege Musek Streaming Plattform erstellt:
- Wéi mat der API ze schaffen. benotzt API vu Spotify oder Apple Music
- Wéi spillt, pauséiert oder zréck op déi nächst / viregt Streck
- Wéi Volumen änneren
- Wéi Dir Benotzer Routing a Browsergeschicht verwalten
Film Sich App benotzt React (mat Haken)
Dat éischt wat Dir kéint ufänken ass eng Film Sich App mat React ze kreéieren. Drënner ass e Bild vun wéi déi lescht Applikatioun ausgesäit:
Wat wäert Dir léieren
Andeems Dir dës App baut, verbessert Dir Är React Fäegkeeten andeems Dir déi relativ nei Hooks API benotzt. De Beispillprojet benotzt React Komponenten, vill Haken, eng extern API, an natierlech e puer CSS Styling.
Tech Stack a Fonctiounen
- Reagéiert mat Haken
- erstellen-reagéieren-App
- JSX
- CSS
Ouni Klassen ze benotzen, ginn dës Projeten Iech de perfekte Entrée an de funktionnelle React a wäerten Iech definitiv am Joer 2020 hëllefen. Dir fannt . Follegt d'Instruktioune oder maacht et Är eegen.
Chat App mat Vue
En anere grousse Projet fir Iech ze maachen ass eng Chat App ze kreéieren mat menger Liiblings JavaScript Bibliothéik: VueJS. D'Applikatioun wäert esou ausgesinn:
Wat wäert Dir léieren
An dësem Tutorial léiert Dir wéi Dir eng Vue App vun Null mécht - Komponenten erstellen, Staat behandelen, Strecken erstellen, mat Drëtt-Partei Servicer verbannen, a souguer Authentifikatioun behandelen.
Tech Stack a Fonctiounen
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Dëst ass e wierklech super Projet fir mat Vue unzefänken oder Är existent Fäegkeeten ze verbesseren fir an d'Entwécklung am Joer 2020 ze kommen. Dir fannt .
Schéin Wieder App mat Angular 8
Dëst Beispill hëlleft Iech eng schéin Wieder App mat Angular 8 ze kreéieren:
Wat wäert Dir léieren
Dëse Projet léiert Iech wäertvoll Fäegkeeten beim Bauen vun Uwendungen vun Null - vum Design duerch d'Entwécklung, de ganze Wee bis op eng deployment-ready Applikatioun.
Tech Stack a Fonctiounen
- Wénkel 8
- Firebase
- Server Säit Render-
- CSS mat Grid a Flexbox
- Mobil frëndlech an Adaptabilitéit
- Däischter Modus
- Schéinen Interface
Wat ech wierklech gär un dësem alles ëmfaassende Projet ass datt Dir Saachen net isoléiert studéiert. Amplaz léiert Dir de ganzen Entwécklungsprozess, vum Design bis zum finalen Ofbau.
To-Do Applikatioun mat Svelte
Svelte ass wéi dat neit Kand op der Komponent-baséiert Approche - op d'mannst ähnlech wéi React, Vue a Angular. An dëst ass ee vun den wäermsten neie Produkter fir 2020.
To-Do Apps sinn net onbedéngt dat wäermst Thema, awer et wäert Iech wierklech hëllefen Är Svelte Fäegkeeten ze verschäerfen. Et wäert esou ausgesinn:
Wat wäert Dir léieren
Dësen Tutorial weist Iech wéi Dir eng Applikatioun mat Svelte 3 erstellt, vun Ufank bis Enn. Dir benotzt Komponenten, Styling an Event Handler
Tech Stack a Fonctiounen
- Schwell 3
- Komponenten
- Styling mat CSS
- ES 6 Syntax
Et ginn net vill gutt Svelte Starterprojeten, also hunn ech fonnt .
E-Commerce App benotzt Next.js
Next.js ass de populärste Kader fir React Uwendungen ze bauen déi Server-Säit Rendering aus der Këscht ënnerstëtzen.
Dëse Projet weist Iech wéi Dir eng E-Commerce Applikatioun erstellt déi esou ausgesäit:
Wat wäert Dir léieren
An dësem Projet léiert Dir wéi Dir mat Next.js entwéckelt - nei Säiten a Komponenten erstellen, Daten extrahéieren a stiléieren an eng Next Applikatioun ofsetzen.
Tech Stack a Fonctiounen
- Next.js
- Komponenten a Säiten
- Daten Echantillon
- Styling
- Project Deployment
- SSR an SPA
Et ass ëmmer super e richtegt Beispill ze hunn wéi eng E-Commerce App fir eppes Neies ze léieren. Du kanns .
Voll-vollwäerteg méisproocheg Blog mat Nuxt.js
Nuxt.js ass fir Vue, wat Next.js fir React ass: e super Kader fir d'Kombinatioun vun der Kraaft vum Server-Säit Rendering an eenzeg Säit Uwendungen
Déi lescht Applikatioun déi Dir erstellt kënnt esou ausgesinn:
Wat wäert Dir léieren
An dësem Beispillprojet léiert Dir wéi Dir eng komplett Websäit mat Nuxt.js erstellt, vun der initialer Konfiguratioun bis zur leschter Deployment.
Et profitéiert vu ville vun de coolen Features déi Nuxt ze bidden huet, wéi Säiten a Komponenten, a Styling mat SCSS.
Tech Stack a Fonctiounen
- Nuxt.js
- Komponenten a Säiten
- Storyblock Modul
- Hagfish
- Vuex fir Staat Gestioun
- SCSS fir Styling
- Nuxt Mëttelstuf
, déi vill grouss Nuxt.js Fonctiounen enthält. Ech perséinlech gär mat Nuxt ze schaffen, also sollt Dir et probéieren well et Iech och e super Vue Entwéckler mécht.
Blog mat Gatsby
Gatsby ass en exzellente statesche Site Generator mat React a GraphQL. Dëst ass d'Resultat vum Projet:
Wat wäert Dir léieren
An dësem Tutorial léiert Dir wéi Dir Gatsby benotzt fir e Blog ze kreéieren deen Dir benotzt fir Är eegen Artikele mat React a GraphQL ze schreiwen.
Tech Stack a Fonctiounen
- Gatsby
- reagéieren
- GrafQL
- Plugins an Themen
- MDX/Markdown
- Bootstrap CSS
- Schablounen
Wann Dir jeemools e Blog wollt starten, wéi Dir et maacht mat React a GraphQL.
Ech soen net datt WordPress eng schlecht Wiel ass, awer mat Gatsby kënnt Dir héich performant Websäite mat React bauen - wat eng erstaunlech Kombinatioun ass.
Blog mat Gridsome
Gridsome fir Vue ... Okay, mir haten dat schonn mat Next/Nuxt.
Awer datselwecht ass wouer fir Gridsome a Gatsby. Béid benotzen GraphQL als hir Dateschicht, awer Gridsome benotzt VueJS. Dëst ass och en erstaunleche statesche Site Generator deen Iech hëlleft super Blogs ze kreéieren:
Wat wäert Dir léieren
Dëse Projet léiert Iech wéi Dir en einfache Blog erstellt fir mat Gridsome, GraphQL a Markdown unzefänken. Et deckt och wéi een eng Applikatioun duerch Netlify ofsetzt.
Tech Stack a Fonctiounen
- Gridsom
- Vue
- GrafQL
- Markdown
- Netify
Dëst ass sécher net deen ëmfaassendsten Tutorial, awer et deckt d'Basiskonzepter vu Gridsome an .
SoundCloud-ähnlechen Audio Player benotzt Quasar
Quasar ass en anere Vue Kader dee ka benotzt ginn fir mobil Uwendungen ze kreéieren. An dësem Projet erstellt Dir eng Audio Player Applikatioun, zum Beispill:
Wat wäert Dir léieren
Wärend aner Projete sech haaptsächlech op Webapplikatiounen konzentréieren, wäert dësen Iech weisen wéi Dir eng mobil Applikatioun erstellt mat Vue an dem Quasar Kader.
Dir sollt scho Cordova lafen mat Android Studio / Xcode konfiguréiert. Wann net, huet d'Handbuch e Link op d'Quasar Websäit wou se Iech weisen wéi Dir alles opstellt.
Tech Stack a Fonctiounen
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponenten
, Demonstréiert Quasar seng Fäegkeeten fir mobil Applikatiounen ze kreéieren.
Форма кредитной карты
Eng cool Kreditkaart Form mat glat an agreabel Mikro-Interaktiounen. Ëmfaasst Nummerformatéierung, Verifizéierung an automatesch Kaartentypdetektioun. Et ass op Vue.js gebaut an ass och voll reaktiounsfäeger. (Du kanns gesinn .)
Wat Dir léiert:
- Veraarbecht a validéieren Formen
- Ëmgank Evenementer (zum Beispill, wann Felder änneren)
- Verstinn wéi Elementer op der Säit ze weisen an ze placéieren, besonnesch d'Kreditkaartinformatioun déi uewen op der Form erschéngt
Staangrafik
En Histogramm ass eng Grafik oder Grafik déi kategoresch Daten duerstellt mat rechteckege Baren mat Héichten oder Längt proportional zu de Wäerter déi se representéieren.
Si kënne vertikal oder horizontal applizéiert ginn. E vertikale Staangdiagramm gëtt heiansdo e Linnendiagramm genannt.
Wat Dir léiert:
- Weist Daten op eng strukturéiert a verständlech Manéier
- Zousätzlech: Léiert wéi een dat Element benotzt
canvasa wéi Elementer domat ze zéien
Dir kënnt Weltbevëlkerungsdaten fannen. Si sinn no Joer zortéiert.
Анимация сердечка Twitter
Zréck am Joer 2016 huet Twitter dës erstaunlech Animatioun fir seng Tweets agefouert. Zënter 2019 gesäit et nach ëmmer deen Deel aus, also firwat net een selwer erstellen?
Wat Dir léiert:
- Schafft mat CSS Attributer
keyframes - Manipuléieren an animéieren HTML Elementer
- Kombinéiert JavaScript, HTML an CSS
Репозитории GitHub с функцией поиска
Et gëtt näischt Fancy hei - GitHub Repositories si just eng verherrlecht Lëscht.
D'Zil ass d'Repositories ze weisen an de Benotzer ze erlaben se ze filteren. Benotzt fir Repositories fir all Benotzer ze kréien.
GitHub Profil Säit -
Wat Dir léiert:
- Kréien Daten aus API
- Weist Daten aus API
- Filter a weisen relevant Donnéeën fir all Sich
- Optional: Wann Dir op eng Erausfuerderung sidd, benotzt , gebaut mat GraphQL. .
Чаты в стиле Reddit
Chats sinn eng populär Manéier fir Kommunikatioun wéinst hirer Einfachheet an einfacher Benotzung. Awer wat bréngt wierklech modern Chatraim? WebSockets!
Wat Dir léiert:
- Benotzt WebSockets, Echtzäit Kommunikatioun an Datenupdates
- Schafft mat Benotzer Zougang Niveauen (zum Beispill, de Besëtzer vun engem Chat Kanal huet d'Roll
admin, an anerer am Raum -user) - Prozess an validéieren Formen - erënneren, d'Chat Fënster fir e Message schécken ass
input - Erstellt a maacht mat bei verschiddene Chats
- Schafft mat perséinleche Messagen. D'Benotzer kënne mat anere Benotzer privat chatten. Wesentlech wäert Dir eng WebSocket Verbindung tëscht zwee Benotzer opbauen.
Навигация в стиле Stripe
Wat dës Navigatioun eenzegaarteg mécht ass datt de Popover Container transforméiert fir den Inhalt ze passen. Et gëtt eng Eleganz zu dësem Iwwergang am Verglach zum traditionelle Verhalen vun engem neie Popover opzemaachen an zou ze maachen.
Wat Dir léiert:
- Kombinéiert CSS Animatiounen mat Iwwergäng
- Dim Inhalt an gëllen aktiv Klass op gefloss Element
Pacman
Erstellt Är eege Versioun vu Pacman. Dëst ass e super Wee fir eng Iddi ze kréien wéi Spiller entwéckelt ginn an d'Grondlage verstoen. Benotzt e JavaScript Kader, React oder Vue.
Dir léiert:
- Wéi Elementer bewegen
- Wéi bestëmmen déi Schlësselen ze drécken
- Wéi de Moment vun Kollisioun ze bestëmmen
- Dir kënnt weider goen a Geeschterbewegungskontrolle derbäisetzen
Dir fannt e Beispill vun dësem Projet GitHub
Benotzer Gestioun
De Projet GitHub
Eng CRUD-Typ Applikatioun fir Benotzerverwaltung erstellen léiert Iech d'Grondlage vun der Entwécklung. Dëst ass besonnesch nëtzlech fir nei Entwéckler.
Dir léiert:
- Wat ass Routing
- Wéi Dir d'Datenentrée Formulairen behandelt a kontrolléiert wat de Benotzer aginn huet
- Wéi mat der Datebank ze schaffen - Aktiounen erstellen, liesen, aktualiséieren a läschen
Проверка погоды в вашем местоположении
De Projet GitHub
Wann Dir Apps wëllt erstellen, fänkt mat enger Wiederapp un. Dëse Projet kann mat Swift ofgeschloss ginn.
Zousätzlech fir Erfarung ze sammelen fir eng Applikatioun ze bauen, léiert Dir:
- Wéi mat der API ze schaffen
- Wéi benotzen ech Geolocatioun
- Maacht Är Applikatioun méi dynamesch andeems Dir Textinput bäidréit. An et kënnen d'Benotzer hir Plaz aginn fir d'Wieder op enger spezifescher Plaz ze kontrolléieren.
Dir wäert eng API brauchen. Fir Wiederdaten ze kréien, benotzt d'OpenWeather API. Méi Informatioun iwwer d'OpenWeather API.
Окно чата
Meng Chatfenster an Aktioun, oppen an zwee Browser Tabs
Eng Chatfenster erstellen ass de perfekte Wee fir mat Sockets unzefänken. D'Wiel vum Tech Stack ass enorm. Node.js, zum Beispill, ass perfekt.
Dir léiert wéi Sockets funktionnéieren a wéi se se ëmsetzen. Dëst ass den Haaptvirdeel vun dësem Projet.
Wann Dir e Laravel Entwéckler sidd dee mat Sockets wëllt schaffen, liest meng
GitLab CI
Wann Dir nei sidd mat der kontinuéierlecher Integratioun (CI), spillt mat GitLab CI. Setzt e puer Ëmfeld op a probéiert e puer Tester auszeféieren. Et ass net e ganz schwéiere Projet, awer ech si sécher datt Dir vill dovunner léiert. Vill Entwécklungsteams benotzen elo CI. Wësse wéi et ze benotzen ass nëtzlech.
Dir léiert:
- Wat ass GitLab CI
- Wéi konfiguréieren
.gitlab-ci.ymlwat dem GitLab Benotzer seet wat ze maachen - Wéi een an aner Ëmfeld ofsetzen
Анализатор сайтов
Maacht e Scraper deen d'Semantik vu Websäiten analyséiert an hir Bewäertung erstellt. Zum Beispill kënnt Dir kucken op fehlend Alt-Tags a Biller. Oder kuckt ob d'Säit SEO Meta Tags huet. E Scraper kann ouni User-Interface erstallt ginn.
Dir léiert:
- Wéi funktionéiert de Schrack?
- Wéi erstellen DOM selectors
- Wéi schreiwen ech en Algorithmus? - Algorithmus Schreiwen Tdk Beispill
- Wann Dir wëllt net do ophalen, schafen eng User Interface. Dir kënnt och e Bericht op all Websäit erstellen, déi Dir iwwerpréift.
Определение настроений в социальных сетях
Sentimenterkennung op sozialen Medien ass e super Wee fir Maschinnléieren agefouert ze ginn.
Dir kënnt ufänken nëmmen ee sozialen Netzwierk ze analyséieren. Jiddereen fänkt normalerweis mat Twitter un.
Wann Dir schonn Erfahrung mat Maschinn Léieren hutt, probéiert Daten aus verschiddene sozialen Netzwierker ze sammelen a se ze kombinéieren.
Dir léiert:
- Wat ass Maschinn Léieren
Клон Trello
Wat Dir léiere wäert:
- Organisatioun vun Ufro Veraarbechtung routes (Routing).
- Drag and drop.
- Wéi nei Objeten erstellen (Brieder, Lëschten, Kaarten).
- Veraarbechtung an Iwwerpréiwung vun Inputdaten.
- Vun der Client Säit: wéi Dir lokal Späichere benotzt, wéi Dir Daten op lokaler Späichere späichert, wéi Dir Daten aus der lokaler Späichere liest.
- Vun der Server Säit: wéi Dir Datenbanken benotzt, wéi Dir Daten an der Datebank späichert, wéi Dir Daten aus der Datebank liest.
, gemaach an React + Redux.
Панель админа
Eng einfach CRUD Applikatioun, ideal fir d'Basis ze léieren. Loosst eis léieren:
- Benotzer erstellen, Benotzer verwalten.
- Interagéiert mat der Datebank - erstellt, liest, ännert, läscht Benotzer.
- Validéiert Input a schafft mat Formulairen.
Трекер криптовалют (нативное мобильное приложение)
Alles: Swift, Objective-C, React Native, Java, Kotlin.
Loosst eis studéieren:
- Wéi gebierteg Uwendungen funktionnéieren.
- Wéi recuperéieren ech Daten aus der API.
- Wéi gebierteg Säit Layouten funktionnéieren.
- Wéi mat mobilen Simulatoren ze schaffen.
. Wann Dir eppes Besseres fannt, schreift an de Kommentarer.
Wann Dir interesséiert sidd, hei ass et .
Настроить собственный конфиг webpack с нуля
Technesch ass dëst keng Applikatioun, awer et ass eng ganz nëtzlech Aufgab fir ze verstoen wéi Webpack vu bannen funktionnéiert. Elo wäert et net eng "schwaarz Këscht", awer e verständlechen Tool sinn.
Ufuerderunge:
- Kompiléiert es7 op es5 (Basis).
- Kompiléiert jsx op js - oder - .vue op .js (Dir musst Loader léieren)
- Ariichten Webpack Dev Server an Hot Modul Reloading. (vue-cli an create-react-app benotze béid)
- Benotzt Heroku, now.sh oder Github, léiert wéi Dir Webpack Projeten ofsetzt.
- Setzt Äre Liiblingspreprocessor fir css ze kompiléieren - scss, less, stylus.
- Léiert wéi Dir Biller a Svgs mat Webpack benotzt.
Клон Hackernews
All Jedi ass verlaangt seng eegen Hackernews ze maachen.
Wat Dir ënnerwee léiert:
- Wéi interagéiere mat Hackernews API.
- Wéi eng eenzeg Säit Applikatioun erstellen.
- Wéi Dir Fonctiounen implementéiere wéi Kommentarer kucken, individuell Kommentaren, Profiler.
- Organisatioun vun Ufro Veraarbechtung routes (Routing).
Тудушечка
Eescht? Tudushka? Et ginn dausende vun hinnen. Awer gleeft mir, et gëtt e Grond fir dës Popularitéit.
D'Tudu App ass e super Wee fir sécher ze stellen datt Dir d'Grondlage versteet. Probéiert eng Applikatioun am Vanille Javascript ze schreiwen an eng an Ärem Liiblings Kader.
Léieren:
- Erstellt nei Aufgaben.
- Kontrolléiert datt d'Felder ausgefëllt sinn.
- Filter Aufgaben (ofgeschloss, aktiv, alles). Benotzt
filterиreduce. - Verstinn d'Grondlage vu Javascript.
Сортируемый drag and drop список
Ganz hëllefräich ze verstoen .
Loosst eis léieren:
- Drag and drop API
- Erstellt räich UIs
Клон мессенджера (нативное приложение)
Dir wäert verstoen wéi souwuel Webapplikatiounen wéi och gebierteg Uwendungen funktionnéieren, wat Iech vun der groer Mass ënnerscheet.
Wat mir studéieren:
- Web Sockets (Instant Messagen)
- Wéi gebierteg Uwendungen funktionnéieren.
- Wéi Schablounen an native Applikatiounen funktionnéieren.
- Organiséieren Ufroveraarbechtungsrouten an gebierteg Uwendungen.
Texteditor
Den Zweck vun engem Texteditor ass d'Ustrengung vun de Benotzer ze reduzéieren déi probéieren hir Formatéierung a gültege HTML Markup ze konvertéieren. E gudden Texteditor erlaabt d'Benotzer Text op verschidde Manéieren ze formatéieren.
Irgendwann huet jiddereen en Texteditor benotzt. Also firwat net ?
Клон Reddit
ass eng sozial Neiegkeet Aggregatioun, Web Inhalt Bewäertung an Diskussioun Site.
Reddit hëlt déi meescht vu menger Zäit op, awer ech hänken weider drun. E Reddit Klon erstellen ass en effektive Wee fir Programméierung ze léieren (während Reddit zur selwechter Zäit surft).
Reddit bitt Iech e ganz räich. Loosst keng Features eraus oder maacht Saachen zoufälleg. An der realer Welt mat Clienten a Clienten, Dir kënnt net zoufälleg schaffen, oder Dir wäert séier Är Aarbecht verléieren.
Smart Clienten wäerten direkt mierken datt d'Aarbecht schlecht gemaach gëtt a wäert een aneren fannen.
Публикация пакета NPM с открытым исходным кодом
Wann Dir Javascript Code schreift, sinn d'Chancen datt Dir e Package Manager benotzt. E Package Manager erlaabt Iech existente Code ze benotzen déi aner Leit geschriwwen a publizéiert hunn.
De ganzen Entwécklungszyklus vun engem Package ze verstoen gëtt eng ganz gutt Erfahrung. Et gi vill Saachen déi Dir wësse musst wann Dir Code publizéiert. Dir musst iwwer Sécherheet denken, semantesch Versioun, Skalierbarkeet, Benennungskonventiounen an Ënnerhalt.
De Package kann alles sinn. Wann Dir keng Iddi hutt, erstellt Ären eegene Lodash a publizéiert se.
Lodash:
Wann Dir eppes hutt wat Dir online gemaach hutt, stellt Iech 10% iwwer anerer. iwwer oppe Quellen a Packagen.
Учебный план freeCodeCamp
freeCodecamp huet vill gesammelt .
freeCodeCamp ass eng Asbl. Et besteet aus enger interaktiver webbaséierter Léierplattform, engem Online Gemeinschaftsforum, Chatraim, Medium Publikatiounen, a lokal Organisatiounen déi wëlles hunn d'Léierwebentwécklung fir jiddereen zougänglech ze maachen.
Dir sidd méi wéi qualifizéiert fir Är éischt Aarbecht wann Dir et fäerdeg bréngt de ganze Cours ofzeschléissen.
Создайте HTTP-сервер с нуля
Den HTTP Protokoll ass ee vun den Haaptprotokollen duerch déi Inhalt um Internet reest. HTTP-Server gi benotzt fir statesch Inhalter wéi HTML, CSS a JS ze déngen.
Wann Dir den HTTP-Protokoll vun Null implementéiere kënnt, wäert Äert Wëssen iwwer d'Saachen interagéieren.
Zum Beispill, wann Dir NodeJs benotzt, da wësst Dir datt Express en HTTP-Server ubitt.
Fir Referenz, kuckt ob Dir kënnt:
- Setzt e Server op ouni Bibliothéiken ze benotzen
- De Server muss HTML, CSS an JS Inhalt déngen.
- Ëmsetzung vun engem Router vun Null
- Monitor Ännerungen an update de Server
Wann Dir wësst net firwat, benotzen a probéiert en HTTP-Server ze kreéieren vun Null.
Десктопное приложение для заметок
Mir huelen all Notizen, oder?
Loosst eis eng Notiz App erstellen. D'Applikatioun muss Notizen späicheren an se mat der Datebank synchroniséieren. Baut eng gebierteg App mat Electron, Swift, oder wat och ëmmer Dir wëllt a wat fir Äre System funktionnéiert.
Kombinéiert dëst mat der éischter Erausfuerderung (Texteditor).
Als Bonus, probéiert Är Desktopversioun mat der Webversioun ze synchroniséieren.
Подкасты (клон Overcast)
Wien lauschtert net op Podcasts?
Erstellt eng Webapplikatioun mat der folgender Funktionalitéit:
- En Account maachen
- Sich Podcasts
- Bewäert an abonnéiert op Podcasts
- Stop a spillt, ännert d'Geschwindegkeet, d'Fort- an d'Réckfunktioun fir 30 Sekonnen.
Probéiert d'iTunes API als Ausgangspunkt ze benotzen. Wann Dir iwwer aner Ressourcen kennt, post w.e.g. an de Kommentarer.
Écran Capture
Hallo! Ech filmen elo mäin Ecran!
Erstellt eng Desktop- oder Webapp déi Iech erlaabt Ären Écran z'erfaassen an de Clip als ze späicheren .gif
hei wéi dëst z'erreechen.
Quellen vun Informatiounen
Source: will.com