1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Artikulli është përkthyer me mbështetjen e EDISON Software, i cili Dhe .
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.
- Как работают оптимизация и обработка изображений.
Shenim: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Shenim: Këtu .
Подборка проектов из предыдущих публикаций.
shtresë
Shtresa është një komunitet ku të gjithë mund të vizatojnë një piksel në një "bordë" të përbashkët. Ideja origjinale lindi në Reddit. Komuniteti r/Layer është një metaforë për krijimtarinë e përbashkët, që të gjithë mund të jenë krijues dhe të kontribuojnë në një kauzë të përbashkët.
Çfarë do të mësoni kur krijoni projektin tuaj Layer:
- Si funksionon kanavacja JavaScript Të dini se si të përdorni një kanavac është një aftësi kritike në shumë aplikacione.
- Si të koordinoni lejet e përdoruesve. Çdo përdorues mund të vizatojë një piksel çdo 15 minuta pa pasur nevojë të identifikohet.
- Krijo sesione cookie.
Squoosh
Squoosh është një aplikacion për kompresimin e imazhit me shumë opsione të avancuara.
GIF 20 MB
Duke krijuar versionin tuaj të Squoosh do të mësoni:
- Si të punoni me madhësitë e imazhit
- Mësoni bazat e Drag'n'Drop API
- Kuptoni se si funksionojnë API dhe dëgjuesit e ngjarjeve
- Si të ngarkoni dhe eksportoni skedarë
Shenim: Kompresori i imazhit është lokal. Nuk është e nevojshme të dërgoni të dhëna shtesë në server. Ju mund ta keni kompresorin në shtëpi, ose mund ta përdorni në një server, sipas zgjedhjes suaj.
kalkulatriçe
Eja? Seriozisht? Llogaritësi? Po, saktësisht, një kalkulator. Të kuptuarit e bazave të operacioneve matematikore dhe se si ato funksionojnë së bashku është një aftësi kritike për thjeshtimin e aplikacioneve tuaja. Herët a vonë do t'ju duhet të merreni me numra dhe sa më shpejt aq më mirë.
Duke krijuar kalkulatorin tuaj do të mësoni:
- Puna me numra dhe veprime matematikore
- Praktikoni me API-në e dëgjuesve të ngjarjeve
- Si të rregulloni elementet, të kuptoni stilet
Zvarritës (motori i kërkimit)
Të gjithë kanë përdorur një motor kërkimi, kështu që pse të mos krijoni tuajin? Zvarritësit nevojiten për të kërkuar informacion. Të gjithë i përdorin ato çdo ditë dhe kërkesa për këtë teknologji dhe specialistë vetëm sa do të rritet me kalimin e kohës.
Motori i kërkimit Google
Çfarë do të mësoni duke krijuar motorin tuaj të kërkimit:
- Si funksionojnë zvarritësit
- Si të indeksoni faqet dhe si t'i renditni ato sipas vlerësimit dhe reputacionit
- Si të ruani faqet e indeksuara në një bazë të dhënash dhe si të punoni me bazën e të dhënave
Luajtësi muzikor (Spotify, Apple Music)
Të gjithë dëgjojnë muzikë - është thjesht një pjesë integrale e jetës sonë. Le të krijojmë një luajtës muzikor për të kuptuar më mirë se si funksionon mekanika bazë e një platforme moderne të transmetimit muzikor.
Spotify
Çfarë do të mësoni duke krijuar platformën tuaj të transmetimit të muzikës:
- Si të punoni me API. përdorni API nga Spotify ose Apple Music
- Si të luani, të ndaloni ose të ktheheni te pjesa tjetër/e mëparshme
- Si të ndryshoni volumin
- Si të menaxhoni rrugën e përdoruesit dhe historinë e shfletuesit
Aplikacioni i kërkimit të filmit duke përdorur React (me grepa)
Gjëja e parë me të cilën mund të filloni është të krijoni një aplikacion kërkimi filmash duke përdorur React. Më poshtë është një imazh se si do të duket aplikacioni përfundimtar:
Çfarë do të mësoni
Duke ndërtuar këtë aplikacion, ju do të përmirësoni aftësitë tuaja React duke përdorur API-në relativisht të re Hooks. Projekti shembull përdor komponentë React, shumë grepa, një API të jashtëm dhe sigurisht disa stilime CSS.
Rafte dhe veçori teknike
- Reagoni me grepa
- krijoni-reagoni-aplikacionin
- Jsx
- CSS
Pa përdorur asnjë klasë, këto projekte ju japin pikën perfekte të hyrjes në React funksional dhe patjetër do t'ju ndihmojnë në vitin 2020. mund të gjesh . Ndiqni udhëzimet ose bëjeni tuajin.
Aplikacioni i bisedës me Vue
Një tjetër projekt i mrekullueshëm që duhet të bëni është të krijoni një aplikacion bisede duke përdorur bibliotekën time të preferuar JavaScript: VueJS. Aplikacioni do të duket diçka si kjo:
Çfarë do të mësoni
Në këtë tutorial, do të mësoni se si të krijoni një aplikacion Vue nga e para - krijimin e komponentëve, trajtimin e gjendjes, krijimin e rrugëve, lidhjen me shërbimet e palëve të treta dhe madje edhe trajtimin e vërtetimit.
Rafte dhe veçori teknike
- Vue
- vuex
- Ruteri Vue
- Pamja CLI
- Karierist
- CSS
Ky është një projekt vërtet i mrekullueshëm për të filluar me Vue ose për të përmirësuar aftësitë tuaja ekzistuese për të hyrë në zhvillim në 2020. mund të gjesh .
Aplikacion i bukur i motit me Angular 8
Ky shembull do t'ju ndihmojë të krijoni një aplikacion të bukur të motit duke përdorur Angular 8:
Çfarë do të mësoni
Ky projekt do t'ju mësojë aftësi të vlefshme në ndërtimin e aplikacioneve nga e para - nga dizajni në zhvillim, deri te një aplikacion i gatshëm për vendosje.
Rafte dhe veçori teknike
- Këndor 8
- Firebase
- Paraqitja nga ana e serverit
- CSS me Grid dhe Flexbox
- Miqësi në celular dhe përshtatshmëri
- Mënyra e errët
- Ndërfaqe e bukur
Ajo që më pëlqen vërtet në këtë projekt gjithëpërfshirës është se ju nuk i studioni gjërat në izolim. Në vend të kësaj, ju mësoni të gjithë procesin e zhvillimit, nga dizajni deri në vendosjen përfundimtare.
Aplikacioni për të bërë duke përdorur Svelte
Svelte është si fëmija i ri në qasjen e bazuar në komponentë - të paktën i ngjashëm me React, Vue dhe Angular. Dhe ky është një nga produktet e reja më të nxehta për vitin 2020.
Aplikacionet për të bërë nuk janë domosdoshmërisht tema më e nxehtë, por me të vërtetë do t'ju ndihmojë të përmirësoni aftësitë tuaja Svelte. Do të duket kështu:
Çfarë do të mësoni
Ky tutorial do t'ju tregojë se si të krijoni një aplikacion duke përdorur Svelte 3, nga fillimi në fund. Ju do të përdorni komponentë, stilim dhe mbajtës të ngjarjeve
Rafte dhe veçori teknike
- E shkathët 3
- Komponentet
- Stilimi me CSS
- Sintaksa ES 6
Nuk ka shumë projekte të mira fillestare Svelte, kështu që gjeta .
Aplikacioni i tregtisë elektronike duke përdorur Next.js
Next.js është korniza më e njohur për ndërtimin e aplikacioneve React që mbështesin paraqitjen jashtë kutisë nga ana e serverit.
Ky projekt do t'ju tregojë se si të krijoni një aplikacion e-commerce që duket si ky:
Çfarë do të mësoni
Në këtë projekt, do të mësoni se si të zhvilloni me Next.js—krijoni faqe dhe komponentë të rinj, nxirrni të dhëna dhe stiloni dhe vendosni një aplikacion Next.
Rafte dhe veçori teknike
- Tjetra.js
- Komponentët dhe Faqet
- Mostrimi i të dhënave
- Stilizimi
- Vendosja e projektit
- SSR dhe SPA
Është gjithmonë mirë të kesh një shembull të botës reale si një aplikacion e-commerce për të mësuar diçka të re. Ti mundesh .
Blog shumëgjuhësh i plotë me Nuxt.js
Nuxt.js është për Vue, çfarë është Next.js për React: një kornizë e shkëlqyeshme për kombinimin e fuqisë së paraqitjes nga serveri dhe aplikacioneve me një faqe
Aplikacioni përfundimtar që mund të krijoni do të duket kështu:
Çfarë do të mësoni
Në këtë projekt shembull, do të mësoni se si të krijoni një faqe interneti të plotë duke përdorur Nuxt.js, nga konfigurimi fillestar deri në vendosjen përfundimtare.
Ai përfiton nga shumë nga veçoritë interesante që Nuxt ofron, të tilla si faqet dhe komponentët, dhe stilimi me SCSS.
Rafte dhe veçori teknike
- Nuxt.js
- Komponentët dhe Faqet
- Moduli i bllokut të historisë
- Hagfish
- Vuex për menaxhimin e shtetit
- SCSS për stilim
- Nuxt Middlewares
, i cili përfshin shumë veçori të shkëlqyera të Nuxt.js. Unë personalisht më pëlqen të punoj me Nuxt, kështu që duhet ta provoni pasi do t'ju bëjë gjithashtu një zhvillues të shkëlqyeshëm të Vue.
Blog me Gatsby
Gatsby është një gjenerues i shkëlqyer i faqeve statike duke përdorur React dhe GraphQL. Ky është rezultati i projektit:
Çfarë do të mësoni
Në këtë tutorial, do të mësoni se si të përdorni Gatsby për të krijuar një blog që do ta përdorni për të shkruar artikujt tuaj duke përdorur React dhe GraphQL.
Rafte dhe veçori teknike
- gatsby
- Reagoj
- GrafikQL
- Plugins dhe tema
- MDX/Markdown
- Bootstrap CSS
- Shabllone
Nëse keni dashur ndonjëherë të hapni një blog, se si ta bëni atë duke përdorur React dhe GraphQL.
Nuk po them se WordPress është një zgjedhje e keqe, por me Gatsby mund të ndërtoni faqe interneti me performancë të lartë duke përdorur React - që është një kombinim i mahnitshëm.
Blog me Gridsome
Gridsome për Vue... Mirë, ne e kishim tashmë këtë me Next/Nuxt.
Por e njëjta gjë është e vërtetë për Gridsome dhe Gatsby. Të dy përdorin GraphQL si shtresën e tyre të të dhënave, por Gridsome përdor VueJS. Ky është gjithashtu një gjenerues i mahnitshëm i faqeve statike që do t'ju ndihmojë të krijoni blogje të shkëlqyera:
Çfarë do të mësoni
Ky projekt do t'ju mësojë se si të krijoni një blog të thjeshtë për të filluar me Gridsome, GraphQL dhe Markdown. Ai gjithashtu mbulon mënyrën e vendosjes së një aplikacioni përmes Netlify.
Rafte dhe veçori teknike
- E zymtë
- Vue
- GrafikQL
- Markdown
- Netlify
Ky sigurisht nuk është tutoriali më gjithëpërfshirës, por mbulon konceptet themelore të Gridsome dhe .
Riprodhuesi audio i ngjashëm me SoundCloud duke përdorur Quasar
Quasar është një tjetër kornizë Vue që mund të përdoret për të krijuar aplikacione celulare. Në këtë projekt ju do të krijoni një aplikacion audio player, për shembull:
Çfarë do të mësoni
Ndërsa projektet e tjera fokusohen kryesisht në aplikacionet në ueb, ky do t'ju tregojë se si të krijoni një aplikacion celular duke përdorur Vue dhe kornizën Quasar.
Duhet ta keni tashmë të konfiguruar Cordova që funksionon me Android Studio/Xcode. Nëse jo, manuali ka një lidhje me faqen e internetit të Quasar ku ju tregojnë se si të konfiguroni gjithçka.
Rafte dhe veçori teknike
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponentët UI
, duke demonstruar aftësitë e Quasar për krijimin e aplikacioneve celulare.
Форма кредитной карты
Një formë e lezetshme e kartës së kreditit me mikro-ndërveprime të qetë dhe të këndshme. Përfshin formatimin e numrave, verifikimin dhe zbulimin automatik të llojit të kartës. Është ndërtuar në Vue.js dhe është gjithashtu plotësisht e përgjegjshme. (Ti mund te shohesh .)
Çfarë do të mësoni:
- Përpunoni dhe vërtetoni formularët
- Trajtoni ngjarjet (për shembull, kur ndryshojnë fushat)
- Kuptoni se si të shfaqni dhe vendosni elementë në faqe, veçanërisht informacionin e kartës së kreditit që shfaqet në krye të formularit
grafiku shtyllash
Një histogram është një grafik ose grafik që paraqet të dhëna kategorike me shufra drejtkëndëshe me lartësi ose gjatësi proporcionale me vlerat që ato përfaqësojnë.
Ato mund të aplikohen vertikalisht ose horizontalisht. Një grafik me shtylla vertikale nganjëherë quhet një tabelë vijash.
Çfarë do të mësoni:
- Shfaqni të dhënat në mënyrë të strukturuar dhe të kuptueshme
- Për më tepër: Mësoni se si të përdorni elementin
canvasdhe si të vizatohen elemente me të
mund të gjeni të dhëna për popullsinë botërore. Ato janë të renditura sipas vitit.
Анимация сердечка Twitter
Në vitin 2016, Twitter prezantoi këtë animacion të mahnitshëm për tweet-et e tij. Që nga viti 2019, duket ende pjesa, kështu që pse të mos e krijoni vetë?
Çfarë do të mësoni:
- Punoni me atributin CSS
keyframes - Manipuloni dhe animoni elementet HTML
- Kombinoni JavaScript, HTML dhe CSS
Репозитории GitHub с функцией поиска
Nuk ka asgjë të zbukuruar këtu - depot e GitHub janë thjesht një listë e lavdëruar.
Qëllimi është të shfaqni depot dhe t'i lejoni përdoruesit t'i filtrojë ato. Përdorni për të marrë depo për çdo përdorues.
Faqja e profilit të GitHub -
Çfarë do të mësoni:
- Merr të dhëna nga API
- Shfaq të dhënat nga API
- Filtro dhe shfaq të dhënat përkatëse për çdo kërkim
- Opsionale: Nëse jeni gati për një sfidë, përdorni , i ndërtuar duke përdorur GraphQL. .
Чаты в стиле Reddit
Bisedat janë një mënyrë e njohur komunikimi për shkak të thjeshtësisë dhe lehtësisë së përdorimit. Por çfarë i ushqen vërtet dhomat e bisedave moderne? WebSockets!
Çfarë do të mësoni:
- Përdorni WebSockets, komunikim në kohë reale dhe përditësime të të dhënave
- Punoni me nivelet e aksesit të përdoruesve (për shembull, pronari i një kanali bisede ka rolin
admin, dhe të tjerët në dhomë -user) - Përpunoni dhe vërtetoni formularët - mbani mend, dritarja e bisedës për dërgimin e një mesazhi është
input - Krijoni dhe bashkohuni në biseda të ndryshme
- Punoni me mesazhe personale. Përdoruesit mund të bisedojnë privatisht me përdoruesit e tjerë. Në thelb, ju do të krijoni një lidhje WebSocket midis dy përdoruesve.
Навигация в стиле Stripe
Ajo që e bën këtë navigim unik është se kontejneri popover transformohet për t'iu përshtatur përmbajtjes. Ky tranzicion ka një elegancë krahasuar me sjelljen tradicionale të hapjes dhe mbylljes së një popover të ri.
Çfarë do të mësoni:
- Kombinoni animacionet CSS me tranzicionet
- Zbeh përmbajtjen dhe apliko klasën aktive në elementin e lëvizur
Pacman
Krijoni versionin tuaj të Pacman. Kjo është një mënyrë e shkëlqyer për të marrë një ide se si zhvillohen lojërat dhe për të kuptuar bazat. Përdorni një kornizë JavaScript, React ose Vue.
Ti do të mësosh:
- Si lëvizin elementët
- Si të përcaktoni se cilët taste të shtypni
- Si të përcaktohet momenti i përplasjes
- Mund të shkoni më tej dhe të shtoni kontrollet e lëvizjes së fantazmave
Ju do të gjeni një shembull të këtij projekti GitHub
menaxhimi i përdoruesit
Projekt GitHub
Krijimi i një aplikacioni të tipit CRUD për administrimin e përdoruesit do t'ju mësojë bazat e zhvillimit. Kjo është veçanërisht e dobishme për zhvilluesit e rinj.
Ti do të mësosh:
- Çfarë është rrugëtimi
- Si të trajtoni formularët e futjes së të dhënave dhe të kontrolloni se çfarë ka futur përdoruesi
- Si të punoni me bazën e të dhënave - krijoni, lexoni, përditësoni dhe fshini veprime
Проверка погоды в вашем местоположении
Projekt GitHub
Nëse dëshironi të krijoni aplikacione, filloni me një aplikacion moti. Ky projekt mund të kryhet duke përdorur Swift.
Përveç fitimit të përvojës në ndërtimin e një aplikacioni, do të mësoni:
- Si të punoni me API
- Si të përdorni vendndodhjen gjeografike
- Bëjeni aplikacionin tuaj më dinamik duke shtuar futjen e tekstit. Në të, përdoruesit do të mund të fusin vendndodhjen e tyre për të kontrolluar motin në një vend të caktuar.
Do t'ju duhet një API. Për të marrë të dhënat e motit, përdorni OpenWeather API. Më shumë informacion rreth OpenWeather API.
Окно чата
Dritarja ime e bisedës në veprim, hapet në dy skeda të shfletuesit
Krijimi i një dritareje bisede është mënyra e përsosur për të filluar me bazat. Zgjedhja e grupit të teknologjisë është e madhe. Node.js, për shembull, është perfekt.
Do të mësoni se si funksionojnë prizat dhe si t'i zbatoni ato. Ky është avantazhi kryesor i këtij projekti.
Nëse jeni një zhvillues i Laravel që dëshiron të punojë me bazat, lexoni timin
GitLab CI
Nëse jeni i ri në integrimin e vazhdueshëm (CI), luani me GitLab CI. Vendosni disa mjedise dhe provoni të kryeni disa teste. Nuk është një projekt shumë i vështirë, por jam i sigurt se do të mësoni shumë prej tij. Shumë ekipe zhvillimi po përdorin tani CI. Të dish se si ta përdorësh është e dobishme.
Ti do të mësosh:
- Çfarë është GitLab CI
- Si të konfiguroni
.gitlab-ci.ymli cili i tregon përdoruesit GitLab se çfarë të bëjë - Si të vendoset në mjedise të tjera
Анализатор сайтов
Bëni një kruese që analizon semantikën e faqeve të internetit dhe krijon vlerësimin e tyre. Për shembull, mund të kontrolloni nëse mungojnë etiketat alt në imazhe. Ose kontrolloni nëse faqja ka meta etiketa SEO. Një kruese mund të krijohet pa një ndërfaqe përdoruesi.
Ti do të mësosh:
- Si funksionon kruese?
- Si të krijoni përzgjedhës DOM
- Si të shkruani një algoritëm
- Nëse nuk doni të ndaleni këtu, krijoni një ndërfaqe përdoruesi. Ju gjithashtu mund të krijoni një raport në çdo faqe interneti që kontrolloni.
Определение настроений в социальных сетях
Zbulimi i ndjenjave në mediat sociale është një mënyrë e shkëlqyer për t'u njohur me mësimin e makinerive.
Mund të filloni duke analizuar vetëm një rrjet social. Të gjithë zakonisht fillojnë me Twitter.
Nëse tashmë keni përvojë me mësimin e makinerive, provoni të mbledhni të dhëna nga rrjete të ndryshme sociale dhe t'i kombinoni ato.
Ti do të mësosh:
- Çfarë është mësimi i makinës
Клон Trello
Çfarë do të mësoni:
- Organizimi i rrugëve të përpunimit të kërkesave (Routing).
- Tërhiq dhe lësho.
- Si të krijoni objekte të reja (dërrasa, lista, karta).
- Përpunimi dhe kontrollimi i të dhënave hyrëse.
- Nga ana e klientit: si të përdorni ruajtjen lokale, si të ruani të dhënat në ruajtjen lokale, si të lexoni të dhëna nga ruajtja lokale.
- Nga ana e serverit: si të përdoren bazat e të dhënave, si të ruhen të dhënat në bazën e të dhënave, si të lexohen të dhënat nga baza e të dhënave.
, bërë në React+Redux.
Панель админа
Një aplikacion i thjeshtë CRUD, ideal për të mësuar bazat. Le të mësojmë:
- Krijoni përdorues, menaxhoni përdoruesit.
- Ndërveproni me bazën e të dhënave - krijoni, lexoni, modifikoni, fshini përdoruesit.
- Vërtetimi i të dhënave dhe puna me formularët.
Трекер криптовалют (нативное мобильное приложение)
Çdo gjë: Swift, Objective-C, React Native, Java, Kotlin.
Le të mësojmë:
- Si funksionojnë aplikacionet vendase.
- Si të merrni të dhëna nga API.
- Si funksionojnë paraqitjet e faqeve vendase.
- Si të punoni me simulatorët celularë.
. Nëse gjeni diçka më të mirë, shkruani në komente.
Nëse jeni të interesuar, ja ku është .
Настроить собственный конфиг webpack с нуля
Teknikisht, ky nuk është një aplikacion, por është një detyrë shumë e dobishme për të kuptuar se si funksionon paketa e uebit nga brenda. Tani nuk do të jetë një "kuti e zezë", por një mjet i kuptueshëm.
kërkesat:
- Përpiloni es7 në es5 (bazat).
- Përpiloni jsx në js — or - .vue në .js (ju duhet të mësoni ngarkuesit)
- Konfiguro serverin e zhvilluesit të paketës së uebit dhe rimbushjen e modulit të nxehtë. (vue-cli dhe create-react-app përdorin të dyja)
- Përdorni Heroku, now.sh ose Github, mësoni se si të vendosni projektet e paketës së internetit.
- Vendosni paraprocesorin tuaj të preferuar për të përpiluar css - scss, më pak, majë shkruese.
- Mësoni se si të përdorni imazhe dhe svgs me uebpack.
Клон Hackernews
Çdo Jedi kërkohet të bëjë Hackernews-in e tij.
Çfarë do të mësoni gjatë rrugës:
- Si të ndërveproni me Hackernews API.
- Si të krijoni një aplikacion me një faqe të vetme.
- Si të zbatoni veçori të tilla si shikimi i komenteve, komentet individuale, profilet.
- Organizimi i rrugëve të përpunimit të kërkesave (Routing).
Тудушечка
Seriozisht? Tudushka? Janë me mijëra të tillë. Por më besoni, ka një arsye për këtë popullaritet.
Aplikacioni Tudu është një mënyrë e shkëlqyer për t'u siguruar që i kuptoni bazat. Provoni të shkruani një aplikacion në vanilje Javascript dhe një në kornizën tuaj të preferuar.
Mësoni:
- Krijoni detyra të reja.
- Kontrolloni që fushat të jenë të mbushura.
- Detyrat e filtrit (të përfunduara, aktive, të gjitha). Përdorni
filterиreduce. - Kuptoni bazat e Javascript.
Сортируемый drag and drop список
Shumë e dobishme për të kuptuar .
Le të mësojmë:
- Zvarrit dhe lësho API-në
- Krijoni UI të pasura
Клон мессенджера (нативное приложение)
Do të kuptoni se si funksionojnë aplikacionet në ueb dhe aplikacionet vendase, gjë që do t'ju veçojë nga masa gri.
Çfarë do të studiojmë:
- Prizat në ueb (mesazhe të çastit)
- Si funksionojnë aplikacionet vendase.
- Si funksionojnë shabllonet në aplikacionet vendase.
- Organizimi i rrugëve të përpunimit të kërkesave në aplikacionet vendase.
Redaktuesi i tekstit
Qëllimi i një redaktuesi teksti është të zvogëlojë përpjekjet e përdoruesve që përpiqen të konvertojnë formatimin e tyre në shënjimin e vlefshëm HTML. Një redaktues i mirë teksti i lejon përdoruesit të formatojnë tekstin në mënyra të ndryshme.
Në një moment, të gjithë kanë përdorur një redaktues teksti. Pra pse jo ?
Клон Reddit
është një grumbullim i lajmeve sociale, vlerësim i përmbajtjes në ueb dhe faqe diskutimi.
Reddit më merr pjesën më të madhe të kohës, por unë vazhdoj të qëndroj me të. Krijimi i një kloni Reddit është një mënyrë efektive për të mësuar programimin (ndërsa shfletoni Reddit në të njëjtën kohë).
Reddit ju ofron një shumë të pasur. Mos lini jashtë asnjë veçori ose mos bëni gjëra në mënyrë të rastësishme. Në botën reale me klientët dhe klientët, ju nuk mund të punoni në mënyrë të rastësishme, ose do të humbni shpejt punën tuaj.
Klientët e zgjuar do të kuptojnë menjëherë se puna po bëhet keq dhe do të gjejnë dikë tjetër.
Публикация пакета NPM с открытым исходным кодом
Nëse shkruani kodin Javascript, shanset janë që të përdorni një menaxher paketash. Një menaxher paketash ju lejon të ripërdorni kodin ekzistues që njerëzit e tjerë kanë shkruar dhe publikuar.
Të kuptuarit e ciklit të plotë të zhvillimit të një pakete do të sigurojë një përvojë shumë të mirë. Ka shumë gjëra që duhet të dini kur publikoni kodin. Ju duhet të mendoni për sigurinë, versionimin semantik, shkallëzueshmërinë, konventat e emërtimit dhe mirëmbajtjen.
Paketa mund të jetë çdo gjë. Nëse nuk keni një ide, krijoni Lodash-in tuaj dhe publikojeni.
Lodash:
Të kesh diçka që ke bërë në internet, të vendos 10% mbi të tjerët. rreth burimeve dhe paketave të hapura.
Учебный план freeCodeCamp
freeCodecamp ka mbledhur shumë .
freeCodeCamp është një organizatë jofitimprurëse. Ai përbëhet nga një platformë mësimore interaktive e bazuar në ueb, një forum i komunitetit në internet, dhoma bisede, publikime të mesme dhe organizata lokale që synojnë ta bëjnë zhvillimin e të mësuarit të ueb-it të arritshëm për të gjithë.
Do të jeni më se të kualifikuar për punën tuaj të parë nëse arrini të përfundoni të gjithë kursin.
Создайте HTTP-сервер с нуля
Protokolli HTTP është një nga protokollet kryesore përmes të cilit përmbajtja udhëton në internet. Serverët HTTP përdoren për të shërbyer përmbajtje statike si HTML, CSS dhe JS.
Të qenit në gjendje të zbatoni protokollin HTTP nga e para do të zgjerojë njohuritë tuaja se si gjërat ndërveprojnë.
Për shembull, nëse përdorni NodeJs, atëherë e dini që Express ofron një server HTTP.
Për referencë, shikoni nëse mundeni:
- Vendosni një server pa përdorur asnjë bibliotekë
- Serveri duhet të shërbejë përmbajtje HTML, CSS dhe JS.
- Zbatimi i një ruteri nga e para
- Monitoroni ndryshimet dhe përditësoni serverin
Nëse nuk e dini pse, përdorni dhe përpiquni të krijoni një server HTTP nga e para.
Десктопное приложение для заметок
Të gjithë mbajmë shënime, apo jo?
Le të krijojmë një aplikacion shënimesh. Aplikacioni duhet të ruajë shënime dhe t'i sinkronizojë ato me bazën e të dhënave. Ndërtoni një aplikacion vendas duke përdorur Electron, Swift ose çfarëdo që ju pëlqen dhe çfarë funksionon për sistemin tuaj.
Mos ngurroni ta kombinoni këtë me sfidën e parë (redaktori i tekstit).
Si bonus, provo të sinkronizosh versionin e desktopit me versionin e uebit.
Подкасты (клон Overcast)
Kush nuk i dëgjon podkastet?
Krijoni një aplikacion në internet me funksionalitetin e mëposhtëm:
- Krijo nje llogari
- Kërko Podkastet
- Vlerësoni dhe abonohuni në podkaste
- Ndaloni dhe luani, ndryshoni shpejtësinë, funksionet përpara dhe prapa për 30 sekonda.
Provoni të përdorni iTunes API si pikënisje. Nëse dini për ndonjë burim tjetër, ju lutemi postoni në komente.
Kapja e ekranit
Përshëndetje! Unë jam duke filmuar ekranin tim tani!
Krijoni një aplikacion desktopi ose ueb që ju lejon të kapni ekranin tuaj dhe ta ruani klipin si .gif
Këtu si të arrihet kjo.
burime
Burimi: www.habr.com