1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Raksts tika tulkots ar EDISON Software atbalstu, kas un .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Bonuss: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Piezīme: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonuss: Если вам интересно, я недавно написал на криптовалюту с React Native.
Piezīme: šeit ir .
Подборка проектов из предыдущих публикаций.
slānis
Slānis ir kopiena, kurā ikviens var uzzīmēt pikseļus uz koplietotas “tāfeles”. Sākotnējā ideja radās vietnē Reddit. R/Layer kopiena ir kopīgas radošuma metafora, ka ikviens var būt radītājs un dot ieguldījumu kopīgā mērķa labā.
Ko jūs uzzināsiet, veidojot savu Layer projektu:
- Kā darbojas JavaScript audekls Zināt, kā darboties ar audeklu, ir ļoti svarīga prasme daudzās lietojumprogrammās.
- Kā saskaņot lietotāju atļaujas. Katrs lietotājs var uzzīmēt vienu pikseļu ik pēc 15 minūtēm, nepiesakoties.
- Izveidojiet sīkfailu sesijas.
Squoosh
Squoosh ir attēlu saspiešanas programma ar daudzām uzlabotām opcijām.
GIF 20 MB
Izveidojot savu Squoosh versiju, jūs uzzināsit:
- Kā strādāt ar attēlu izmēriem
- Uzziniet Drag'n'Drop API pamatus
- Izprotiet, kā darbojas API un notikumu uztvērēji
- Kā augšupielādēt un eksportēt failus
Piezīme: Attēla kompresors ir lokāls. Nav nepieciešams sūtīt papildu datus serverim. Kompresors var būt mājās, vai arī varat to izmantot serverī, pēc jūsu izvēles.
Kalkulators
Aiziet? Nopietni? Kalkulators? Jā, tieši tā, kalkulators. Izpratne par matemātikas operāciju pamatiem un to, kā tās darbojas kopā, ir būtiska prasme lietojumprogrammu vienkāršošanai. Agrāk vai vēlāk jums būs jātiek galā ar skaitļiem, un jo ātrāk, jo labāk.
Izveidojot savu kalkulatoru, jūs uzzināsiet:
- Darbs ar skaitļiem un matemātikas operācijām
- Trenējies ar notikumu uztvērēju API
- Kā sakārtot elementus, izprast stilus
Rāpuļprogramma (meklētājprogramma)
Ikviens ir izmantojis meklētājprogrammu, tad kāpēc gan neizveidot savu? Informācijas meklēšanai ir nepieciešamas rāpuļprogrammas. Ikviens tos izmanto katru dienu, un pieprasījums pēc šīs tehnoloģijas un speciālistiem ar laiku tikai augs.
Google meklētājs
Ko jūs uzzināsiet, izveidojot savu meklētājprogrammu:
- Kā darbojas rāpuļprogrammas
- Vietņu indeksēšana un to ranžēšana pēc vērtējuma un reputācijas
- Kā datu bāzē saglabāt indeksētas vietnes un kā strādāt ar datu bāzi
Mūzikas atskaņotājs (Spotify, Apple Music)
Ikviens klausās mūziku – tā vienkārši ir mūsu dzīves neatņemama sastāvdaļa. Izveidosim mūzikas atskaņotāju, lai labāk izprastu, kā darbojas mūsdienu mūzikas straumēšanas platformas pamatmehānika.
Spotify
Ko jūs uzzināsiet, izveidojot savu mūzikas straumēšanas platformu:
- Kā strādāt ar API. izmantojiet API no Spotify vai Apple Music
- Kā atskaņot, apturēt vai attīt uz nākamo/iepriekšējo celiņu
- Kā mainīt skaļumu
- Kā pārvaldīt lietotāju maršrutēšanu un pārlūkprogrammas vēsturi
Filmu meklēšanas lietotne, izmantojot React (ar āķiem)
Pirmā lieta, ar ko jūs varētu sākt, ir izveidot filmu meklēšanas lietotni, izmantojot React. Tālāk ir parādīts, kā izskatīsies galīgā lietojumprogramma:
Ko iemācīsies
Veidojot šo lietotni, jūs uzlabosit savas React prasmes, izmantojot salīdzinoši jauno Hooks API. Piemēra projektā tiek izmantoti React komponenti, daudz āķu, ārēja API un, protams, daži CSS stils.
Tehniskā kaudze un funkcijas
- Reaģējiet ar āķiem
- izveidot-reaģēt-lietotne
- Jsx
- CSS
Neizmantojot nekādas nodarbības, šie projekti sniedz jums ideālu ieejas punktu funkcionālajā React un noteikti palīdzēs jums 2020. gadā. tu vari atrast . Izpildiet norādījumus vai izveidojiet to savu.
Tērzēšanas lietotne ar Vue
Vēl viens lielisks projekts, kas jums jādara, ir izveidot tērzēšanas lietotni, izmantojot manu iecienītāko JavaScript bibliotēku: VueJS. Lietojumprogramma izskatīsies apmēram šādi:
Ko iemācīsies
Šajā apmācībā jūs uzzināsit, kā izveidot Vue lietotni no jauna — izveidot komponentus, apstrādāt stāvokli, izveidot maršrutus, izveidot savienojumu ar trešo pušu pakalpojumiem un pat rīkoties ar autentifikāciju.
Tehniskā kaudze un funkcijas
- Vue
- vuex
- Vue maršrutētājs
- CLI versija
- Stūmējs
- CSS
Šis ir patiešām lielisks projekts, lai sāktu darbu ar Vue vai uzlabotu savas esošās prasmes, lai 2020. gadā iesaistītos attīstībā. tu vari atrast .
Skaista laikapstākļu lietotne ar Angular 8
Šis piemērs palīdzēs jums izveidot skaistu laikapstākļu lietotni, izmantojot Angular 8:
Ko iemācīsies
Šis projekts iemācīs jums vērtīgas prasmes lietojumprogrammu izveidē no nulles — no projektēšanas līdz izstrādei, līdz izvietošanai gatavai lietojumprogrammai.
Tehniskā kaudze un funkcijas
- Leņķiskais 8
- Firebase
- Servera puses renderēšana
- CSS ar režģi un Flexbox
- Mobilajām ierīcēm draudzīgums un pielāgojamība
- Tumšais režīms
- Skaists interfeiss
Tas, kas man ļoti patīk šajā visaptverošajā projektā, ir tas, ka jūs nepētāt lietas atsevišķi. Tā vietā jūs apgūstat visu izstrādes procesu, sākot no projektēšanas līdz galīgajai izvietošanai.
To-Do aplikācija, izmantojot Svelte
Svelte ir kā jaunais bērns, izmantojot komponentu pieeju — vismaz līdzīgs React, Vue un Angular. Un šis ir viens no karstākajiem jaunumiem 2020. gadā.
To-Do lietotnes ne vienmēr ir karstākā tēma, taču tās patiešām palīdzēs jums uzlabot Svelte prasmes. Tas izskatīsies šādi:
Ko iemācīsies
Šī apmācība parādīs, kā izveidot lietojumprogrammu, izmantojot Svelte 3, no sākuma līdz beigām. Jūs izmantosit komponentus, stilu un notikumu apstrādātājus
Tehniskā kaudze un funkcijas
- Svelte 3
- Komponenti
- Stils ar CSS
- ES 6 sintakse
Labu Sveltes starteru projektu nav daudz, tāpēc atradu .
E-komercijas lietotne, izmantojot Next.js
Next.js ir vispopulārākā sistēma React lietojumprogrammu izveidei, kas atbalsta servera puses renderēšanu.
Šis projekts parādīs, kā izveidot e-komercijas lietojumprogrammu, kas izskatās šādi:
Ko iemācīsies
Šajā projektā jūs uzzināsit, kā izstrādāt ar Next.js — izveidot jaunas lapas un komponentus, iegūt datus un veidot stilu un izvietot Next lietojumprogrammu.
Tehniskā kaudze un funkcijas
- Next.js
- Komponenti un lapas
- Datu izlase
- Stils
- Projekta izvietošana
- PSR un SPA
Vienmēr ir lieliski, ja jums ir reāls piemērs, piemēram, e-komercijas lietotne, lai uzzinātu ko jaunu. Jūs varat .
Pilnvērtīgs daudzvalodu emuārs ar Nuxt.js
Nuxt.js ir paredzēts Vue, tāpat kā Next.js ir paredzēts React: lielisks ietvars servera puses renderēšanas un vienas lapas lietojumprogrammu jaudas apvienošanai.
Galīgā lietojumprogramma, ko varat izveidot, izskatīsies šādi:
Ko iemācīsies
Šajā projekta paraugā jūs uzzināsit, kā izveidot pilnīgu vietni, izmantojot Nuxt.js, no sākotnējās iestatīšanas līdz galīgajai izvietošanai.
Tas izmanto daudzas lieliskas funkcijas, ko piedāvā Nuxt, piemēram, lapas un komponentus, kā arī stilu ar SCSS.
Tehniskā kaudze un funkcijas
- Nuxt.js
- Komponenti un lapas
- Stāstu bloka modulis
- Hagfish
- Vuex valsts vadībai
- SCSS stila veidošanai
- Nuxt starpprogrammatūra
, kas ietver daudzas lieliskas Nuxt.js funkcijas. Man personīgi patīk strādāt ar Nuxt, tāpēc jums vajadzētu to izmēģināt, jo tas arī padarīs jūs par lielisku Vue izstrādātāju.
Emuārs ar Getsbiju
Gatsby ir lielisks statisko vietņu ģenerators, izmantojot React un GraphQL. Šis ir projekta rezultāts:
Ko iemācīsies
Šajā apmācībā jūs uzzināsit, kā izmantot Gatsby, lai izveidotu emuāru, ko izmantosit, lai rakstītu savus rakstus, izmantojot React un GraphQL.
Tehniskā kaudze un funkcijas
- Gatsbijs
- Reaģēt
- GraphQL
- Spraudņi un motīvi
- MDX/Markdown
- Bootstrap CSS
- veidnes
Ja kādreiz esat vēlējies izveidot emuāru, par to, kā to izveidot, izmantojot React un GraphQL.
Es nesaku, ka WordPress ir slikta izvēle, taču ar Gatsby varat izveidot augstas veiktspējas vietnes, izmantojot React — tā ir pārsteidzoša kombinācija.
Emuārs ar Gridsome
Gridsome for Vue... Labi, mums tas jau bija ar Next/Nuxt.
Bet tas pats attiecas uz Gridsome un Gatsby. Abi izmanto GraphQL kā datu slāni, bet Gridsome izmanto VueJS. Šis ir arī pārsteidzošs statisks vietņu ģenerators, kas palīdzēs jums izveidot lieliskus emuārus:
Ko iemācīsies
Šis projekts iemācīs jums izveidot vienkāršu emuāru, lai sāktu darbu ar Gridsome, GraphQL un Markdown. Tajā ir arī aprakstīts, kā izvietot lietojumprogrammu, izmantojot Netlify.
Tehniskā kaudze un funkcijas
- Režģis
- Vue
- GraphQL
- Markdown
- netlify
Šī noteikti nav visplašākā apmācība, taču tā aptver Gridsome un pamatjēdzienus .
SoundCloud līdzīgs audio atskaņotājs, izmantojot Quasar
Quasar ir vēl viens Vue ietvars, ko var izmantot, lai izveidotu mobilās lietojumprogrammas. Šajā projektā jūs izveidosit audio atskaņotāja lietojumprogrammu, piemēram:
Ko iemācīsies
Lai gan citi projekti galvenokārt koncentrējas uz tīmekļa lietojumprogrammām, šis jums parādīs, kā izveidot mobilo lietojumprogrammu, izmantojot Vue un Quasar sistēmu.
Jums jau vajadzētu darboties Cordova ar konfigurētu Android Studio/Xcode. Ja nē, rokasgrāmatā ir saite uz Quasar vietni, kur parādīts, kā visu iestatīt.
Tehniskā kaudze un funkcijas
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI komponenti
, demonstrējot Quasar iespējas mobilo aplikāciju izveidē.
Форма кредитной карты
Forša kredītkartes forma ar vienmērīgu un patīkamu mikromijiedarbību. Ietver numura formatēšanu, verifikāciju un automātisku kartes veida noteikšanu. Tas ir veidots uz Vue.js un ir arī pilnībā atsaucīgs. (Tu vari redzēt .)
Ko jūs uzzināsiet:
- Apstrādājiet un apstipriniet veidlapas
- Apstrādājiet notikumus (piemēram, kad mainās lauki)
- Izprotiet, kā parādīt un ievietot lapā elementus, jo īpaši kredītkartes informāciju, kas tiek rādīta veidlapas augšpusē
joslu diagramma
Histogramma ir diagramma vai diagramma, kas attēlo kategoriskus datus ar taisnstūrveida joslām, kuru augstums vai garums ir proporcionāls to attēlotajām vērtībām.
Tos var uzklāt vertikāli vai horizontāli. Vertikālo joslu diagrammu dažreiz sauc par līniju diagrammu.
Ko jūs uzzināsiet:
- Parādiet datus strukturētā un saprotamā veidā
- Papildus: uzziniet, kā izmantot elementu
canvasun kā ar to zīmēt elementus
jūs varat atrast datus par pasaules iedzīvotājiem. Tie ir sakārtoti pēc gada.
Анимация сердечка Twitter
2016. gadā Twitter ieviesa šo apbrīnojamo animāciju saviem tvītiem. 2019. gadā tas joprojām izskatās kā daļa, kāpēc gan neizveidot to pats?
Ko jūs uzzināsiet:
- Darbs ar CSS atribūtu
keyframes - Manipulējiet un animējiet HTML elementus
- Apvienojiet JavaScript, HTML un CSS
Репозитории GitHub с функцией поиска
Šeit nav nekā brīnišķīga — GitHub krātuves ir tikai pagodināts saraksts.
Mērķis ir parādīt repozitorijus un ļaut lietotājam tos filtrēt. Izmantot lai iegūtu repozitorijus katram lietotājam.
GitHub profila lapa —
Ko jūs uzzināsiet:
- Saņemt datus no API
- Rādīt datus no API
- Filtrējiet un parādiet atbilstošos datus katrai meklēšanai
- Neobligāti: ja esat gatavs izaicinājumam, izmantojiet , kas izveidots, izmantojot GraphQL. .
Чаты в стиле Reddit
Tērzēšana ir populārs saziņas veids to vienkāršības un lietošanas vienkāršības dēļ. Bet kas patiesībā veicina mūsdienu tērzēšanas telpas? WebSockets!
Ko jūs uzzināsiet:
- Izmantojiet WebSockets, reāllaika saziņu un datu atjauninājumus
- Strādājiet ar lietotāju piekļuves līmeņiem (piemēram, tērzēšanas kanāla īpašniekam ir loma
admin, un citi istabā -user) - Apstrādājiet un apstipriniet veidlapas - atcerieties, ka tērzēšanas logs ziņojuma nosūtīšanai ir
input - Izveidojiet dažādas tērzēšanas sarunas un pievienojieties tām
- Strādājiet ar personīgām ziņām. Lietotāji var tērzēt ar citiem lietotājiem privāti. Būtībā jūs izveidosit WebSocket savienojumu starp diviem lietotājiem.
Навигация в стиле Stripe
Šo navigāciju unikālu padara tas, ka uznirstošais konteiners tiek pārveidots, lai tas atbilstu saturam. Šai pārejai ir elegance, salīdzinot ar tradicionālo darbību, atverot un aizverot jaunu popover.
Ko jūs uzzināsiet:
- Apvienojiet CSS animācijas ar pārejām
- Aptumšot saturu un lietot aktīvo klasi peldētajam elementam
Pacman
Izveidojiet savu Pacman versiju. Tas ir lielisks veids, kā gūt priekšstatu par to, kā tiek izstrādātas spēles, un izprast pamatus. Izmantojiet JavaScript ietvaru, React vai Vue.
Tu iemācīsies:
- Kā elementi pārvietojas
- Kā noteikt, kurus taustiņus nospiest
- Kā noteikt sadursmes brīdi
- Varat doties tālāk un pievienot spoku kustības vadīklas
Jūs atradīsit šī projekta piemēru GitHub
lietotāju pārvaldība
Projekts GitHub
Izveidojot CRUD tipa aplikāciju lietotāju administrēšanai, jūs iemācīsit izstrādes pamatus. Tas ir īpaši noderīgi jaunajiem izstrādātājiem.
Tu iemācīsies:
- Kas ir maršrutēšana
- Kā rīkoties ar datu ievades veidlapām un pārbaudīt, ko lietotājs ir ievadījis
- Kā strādāt ar datu bāzi - izveidot, lasīt, atjaunināt un dzēst darbības
Проверка погоды в вашем местоположении
Projekts GitHub
Ja vēlaties izveidot lietotnes, sāciet ar laikapstākļu lietotni. Šo projektu var pabeigt, izmantojot Swift.
Papildus pieredzes iegūšanai lietojumprogrammas veidošanā jūs uzzināsit:
- Kā strādāt ar API
- Kā izmantot ģeogrāfisko atrašanās vietu
- Padariet savu lietojumprogrammu dinamiskāku, pievienojot teksta ievadi. Tajā lietotāji varēs ievadīt savu atrašanās vietu, lai pārbaudītu laikapstākļus konkrētā vietā.
Jums būs nepieciešama API. Lai iegūtu laikapstākļu datus, izmantojiet OpenWeather API. Plašāka informācija par OpenWeather API.
Окно чата
Mans tērzēšanas logs darbojas, atvērts divās pārlūkprogrammas cilnēs
Tērzēšanas loga izveide ir ideāls veids, kā sākt darbu ar ligzdām. Tehnoloģiju komplekta izvēle ir milzīga. Piemēram, Node.js ir ideāls.
Jūs uzzināsiet, kā darbojas rozetes un kā tās ieviest. Tā ir šī projekta galvenā priekšrocība.
Ja esat Laravel izstrādātājs un vēlaties strādāt ar ligzdām, izlasiet manu
GitLab CI
Ja esat iesācējs nepārtrauktajā integrācijā (CI), izmēģiniet GitLab CI. Iestatiet dažas vides un mēģiniet palaist pāris testus. Tas nav ļoti grūts projekts, taču esmu pārliecināts, ka jūs no tā daudz mācīsities. Daudzas izstrādes komandas tagad izmanto CI. Ir noderīgi zināt, kā to izmantot.
Tu iemācīsies:
- Kas ir GitLab CI
- Kā konfigurēt
.gitlab-ci.ymlkas norāda GitLab lietotājam, kas jādara - Kā izvietot citās vidēs
Анализатор сайтов
Izveidojiet skrāpi, kas analizē vietņu semantiku un izveido to vērtējumu. Piemēram, varat pārbaudīt, vai attēlos trūkst alt tagu. Vai arī pārbaudiet, vai lapā ir SEO metatagi. Skrāpi var izveidot bez lietotāja interfeisa.
Tu iemācīsies:
- Kā darbojas skrāpis?
- Kā izveidot DOM atlasītājus
- Kā uzrakstīt algoritmu
- Ja nevēlaties apstāties pie tā, izveidojiet lietotāja interfeisu. Varat arī izveidot pārskatu par katru pārbaudīto vietni.
Определение настроений в социальных сетях
Sentimenta noteikšana sociālajos medijos ir lielisks veids, kā iepazīties ar mašīnmācīšanos.
Varat sākt, analizējot tikai vienu sociālo tīklu. Ikviens parasti sākas ar Twitter.
Ja jums jau ir pieredze ar mašīnmācīšanos, mēģiniet apkopot datus no dažādiem sociālajiem tīkliem un tos apvienot.
Tu iemācīsies:
- Kas ir mašīnmācīšanās
Клон Trello
Ko jūs uzzināsiet:
- Pieprasījumu apstrādes maršrutu organizēšana (maršrutēšana).
- Vilkt un nomest.
- Kā izveidot jaunus objektus (tāfeles, sarakstus, kartītes).
- Ievades datu apstrāde un pārbaude.
- No klienta puses: kā izmantot vietējo krātuvi, kā saglabāt datus lokālajā krātuvē, kā nolasīt datus no vietējās krātuves.
- No servera puses: kā izmantot datu bāzes, kā saglabāt datus datu bāzē, kā nolasīt datus no datu bāzes.
, izgatavots ar React+Redux.
Панель админа
Vienkārša CRUD lietojumprogramma, kas ir ideāli piemērota pamatu apguvei. Mācīsimies:
- Izveidojiet lietotājus, pārvaldiet lietotājus.
- Mijiedarbojieties ar datu bāzi - izveidojiet, lasiet, rediģējiet, dzēsiet lietotājus.
- Ievades apstiprināšana un darbs ar veidlapām.
Трекер криптовалют (нативное мобильное приложение)
Jebkas: Swift, Objective-C, React Native, Java, Kotlin.
Studējam:
- Kā darbojas vietējās lietojumprogrammas.
- Kā izgūt datus no API.
- Kā darbojas vietējie lapu izkārtojumi.
- Kā strādāt ar mobilajiem simulatoriem.
. Ja atrodi ko labāku, raksti komentāros.
Ja jūs interesē, šeit tas ir .
Настроить собственный конфиг webpack с нуля
Tehniski šī nav lietojumprogramma, taču tas ir ļoti noderīgs uzdevums, lai saprastu, kā tīmekļa pakotne darbojas no iekšpuses. Tagad tā nebūs “melnā kaste”, bet gan saprotams rīks.
Prasības:
- Apkopojiet es7 uz es5 (pamata).
- Kompilējiet jsx uz js vai - .vue uz .js (jums būs jāapgūst ielādes)
- Iestatiet tīmekļa pakotnes izstrādātāja serveri un karstā moduļa atkārtotu ielādi. (Vue-cli un Create-react-app izmanto abus)
- Izmantojiet Heroku, now.sh vai Github, uzziniet, kā izvietot tīmekļa pakotnes projektus.
- Iestatiet savu iecienītāko priekšapstrādātāju, lai kompilētu css — scss, mazāk, irbulis.
- Uzziniet, kā izmantot attēlus un SVG ar tīmekļa pakotni.
Клон Hackernews
Katram džedajam ir jāizveido savs Hackernews.
Ko jūs uzzināsiet pa ceļam:
- Kā mijiedarboties ar hackernews API.
- Kā izveidot vienas lapas lietojumprogrammu.
- Kā ieviest tādas funkcijas kā komentāru skatīšana, atsevišķi komentāri, profili.
- Pieprasījumu apstrādes maršrutu organizēšana (maršrutēšana).
Тудушечка
Nopietni? Tuduška? Viņu ir tūkstošiem. Bet ticiet man, šai popularitātei ir iemesls.
Tudu lietotne ir lielisks veids, kā pārliecināties, ka saprotat pamatus. Mēģiniet uzrakstīt vienu lietojumprogrammu vaniļas Javascript valodā un vienu savā iecienītākajā sistēmā.
Uzziniet:
- Izveidojiet jaunus uzdevumus.
- Pārbaudiet, vai lauki ir aizpildīti.
- Filtrējiet uzdevumus (pabeigti, aktīvi, visi). Izmantot
filterиreduce. - Izprotiet Javascript pamatus.
Сортируемый drag and drop список
Ļoti palīdz saprast .
Mācīsimies:
- Velciet un nometiet API
- Izveidojiet bagātīgas lietotāja saskarnes
Клон мессенджера (нативное приложение)
Jūs sapratīsiet, kā darbojas gan tīmekļa lietojumprogrammas, gan vietējās aplikācijas, kas jūs atšķirs no pelēkās masas.
Ko mēs pētīsim:
- Tīmekļa ligzdas (tūlītējās ziņas)
- Kā darbojas vietējās lietojumprogrammas.
- Veidņu darbība vietējās lietojumprogrammās.
- Pieprasījumu apstrādes maršrutu organizēšana vietējās lietojumprogrammās.
Teksta redaktors
Teksta redaktora mērķis ir samazināt lietotāju pūles, kas mēģina pārveidot formatējumu derīgā HTML marķējumā. Labs teksta redaktors ļauj lietotājiem formatēt tekstu dažādos veidos.
Kādā brīdī visi ir izmantojuši teksta redaktoru. Tad kāpēc gan ne ?
Клон Reddit
ir sociālo ziņu apkopošanas, tīmekļa satura vērtēšanas un diskusiju vietne.
Reddit aizņem lielāko daļu mana laika, taču es turpinu ar to nodarboties. Reddit klona izveide ir efektīvs veids, kā apgūt programmēšanu (vienlaikus pārlūkojot Reddit).
Reddit sniedz jums ļoti bagātu. Neatstājiet nekādas funkcijas un nedariet lietas nejauši. Reālajā pasaulē ar klientiem un klientiem jūs nevarat strādāt nejauši, pretējā gadījumā jūs ātri zaudēsit darbu.
Gudri klienti uzreiz sapratīs, ka darbs tiek veikts slikti, un atradīs kādu citu.
Публикация пакета NPM с открытым исходным кодом
Ja rakstāt Javascript kodu, iespējams, izmantojat pakotņu pārvaldnieku. Pakešu pārvaldnieks ļauj atkārtoti izmantot esošo kodu, ko citi cilvēki ir uzrakstījuši un publicējuši.
Izpratne par pilnu pakotnes izstrādes ciklu nodrošinās ļoti labu pieredzi. Ir daudzas lietas, kas jums jāzina, publicējot kodu. Jums ir jādomā par drošību, semantisko versiju veidošanu, mērogojamību, nosaukumu piešķiršanas metodēm un uzturēšanu.
Iepakojums var būt jebkas. Ja jums nav idejas, izveidojiet savu Lodash un publicējiet to.
Lodash:
Ja kaut ko esat paveicis tiešsaistē, jūs esat par 10% augstāks par citiem. par atvērtajiem avotiem un pakotnēm.
Учебный план freeCodeCamp
freeCodecamp ir savācis daudz .
freeCodeCamp ir bezpeļņas organizācija. Tas sastāv no interaktīvas tīmekļa mācību platformas, tiešsaistes kopienas foruma, tērzētavām, Medium publikācijām un vietējām organizācijām, kuru mērķis ir padarīt mācību tīmekļa izstrādi pieejamu ikvienam.
Ja izdosies pabeigt visu kursu, jūs būsiet vairāk nekā kvalificēts savam pirmajam darbam.
Создайте HTTP-сервер с нуля
HTTP protokols ir viens no galvenajiem protokoliem, caur kuru saturs pārvietojas internetā. HTTP serveri tiek izmantoti, lai apkalpotu statisku saturu, piemēram, HTML, CSS un JS.
Spēja ieviest HTTP protokolu no nulles paplašinās jūsu zināšanas par to, kā lietas mijiedarbojas.
Piemēram, ja izmantojat NodeJ, jūs zināt, ka Express nodrošina HTTP serveri.
Uzziņai pārbaudiet, vai varat:
- Iestatiet serveri, neizmantojot nekādas bibliotēkas
- Serverim ir jāapkalpo HTML, CSS un JS saturs.
- Maršrutētāja ieviešana no nulles
- Pārraugiet izmaiņas un atjauniniet serveri
Ja nezināt, kāpēc, izmantojiet un mēģiniet izveidot HTTP serveri no nekā.
Десктопное приложение для заметок
Mēs visi veicam piezīmes, vai ne?
Izveidosim piezīmju lietotni. Lietojumprogrammai ir jāsaglabā piezīmes un jāsinhronizē tās ar datu bāzi. Izveidojiet vietējo lietotni, izmantojot Electron, Swift vai jebkuru citu, kas jums patīk un kas darbojas jūsu sistēmā.
Jūtieties brīvi apvienot to ar pirmo izaicinājumu (teksta redaktors).
Kā bonusu mēģiniet sinhronizēt darbvirsmas versiju ar tīmekļa versiju.
Подкасты (клон Overcast)
Kurš gan neklausās aplādes?
Izveidojiet tīmekļa lietojumprogrammu ar šādu funkcionalitāti:
- Izveidot kontu
- Meklēt Podcasts
- Novērtējiet un abonējiet aplādes
- Apturēt un atskaņot, mainīt ātrumu, uz priekšu un atpakaļ funkcijas 30 sekundes.
Mēģiniet izmantot iTunes API kā sākumpunktu. Ja zināt citus resursus, lūdzu, ierakstiet komentāros.
Ekrāna uztveršana
Sveiki! Es šobrīd filmēju savu ekrānu!
Izveidojiet darbvirsmas vai tīmekļa lietotni, kas ļauj tvert ekrānu un saglabāt klipu kā .gif
šeit ir kā to panākt.
avoti
Avots: www.habr.com