1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» vedettävä элемент и поместить его в droppable vyöhyke.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Artikkeli on käännetty EDISON Softwaren tuella, joka Ja .
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.
- Как работают оптимизация и обработка изображений.
Huom: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Huom: Täällä .
Подборка проектов из предыдущих публикаций.
kerros
Layer on yhteisö, jossa jokainen voi piirtää pikselin jaetulle "taululle". Alkuperäinen idea syntyi Redditissä. R/Layer-yhteisö on metafora jaetulle luovuudelle, että jokainen voi olla luoja ja edistää yhteistä asiaa.
Mitä opit luodessasi omaa Layer-projektiasi:
- Miten JavaScript-kanvas toimii Kankaan käytön tunteminen on kriittinen taito monissa sovelluksissa.
- Kuinka koordinoida käyttäjien käyttöoikeuksia. Jokainen käyttäjä voi piirtää yhden pikselin 15 minuutin välein ilman kirjautumista.
- Luo evästeistuntoja.
Squoosh
Squoosh on kuvanpakkaussovellus, jossa on monia lisäasetuksia.
GIF 20 MB
Luomalla oman version Squooshista opit:
- Kuinka työskennellä kuvakokojen kanssa
- Opi Drag'n'Drop API:n perusteet
- Ymmärrä, miten API ja tapahtumaseuraajat toimivat
- Kuinka ladata ja viedä tiedostoja
Huom: Kuvan pakkaaja on paikallinen. Palvelimelle ei tarvitse lähettää lisätietoja. Voit pitää kompressorin kotona tai voit käyttää sitä palvelimella valintasi mukaan.
Laskin
Älä viitsi? Vakavasti? Laskin? Kyllä, aivan, laskin. Matemaattisten toimintojen perusteiden ja niiden yhteistoiminnan ymmärtäminen on kriittinen taito sovellusten yksinkertaistamisessa. Ennemmin tai myöhemmin joudut käsittelemään numeroita ja mitä aikaisemmin, sen parempi.
Luomalla oman laskimen opit:
- Työskentele numeroiden ja matemaattisten operaatioiden kanssa
- Harjoittele tapahtumakuuntelijoiden API:lla
- Kuinka järjestää elementtejä, ymmärtää tyylejä
Indeksointirobotti (hakukone)
Kaikki ovat käyttäneet hakukonetta, joten miksi et luo omaa? Tietojen etsimiseen tarvitaan indeksointirobotteja. Kaikki käyttävät niitä päivittäin, ja tämän tekniikan ja asiantuntijoiden kysyntä vain kasvaa ajan myötä.
Googlen hakukone
Mitä opit luomalla oman hakukoneen:
- Miten indeksointirobotit toimivat
- Sivustojen indeksointi ja niiden sijoittaminen luokituksen ja maineen mukaan
- Indeksoitujen sivustojen tallentaminen tietokantaan ja tietokannan käyttäminen
Musiikkisoitin (Spotify, Apple Music)
Kaikki kuuntelevat musiikkia – se on vain olennainen osa elämäämme. Luodaan musiikkisoitin ymmärtääksemme paremmin, kuinka nykyaikaisen musiikin suoratoistoalustan perusmekaniikka toimii.
Spotify
Mitä opit luomalla oman musiikin suoratoistoalustan:
- Kuinka työskennellä API:n kanssa. käytä Spotifyn tai Apple Musicin APIa
- Kuinka soittaa, keskeyttää tai kelata taaksepäin seuraavaan/edelliseen kappaleeseen
- Kuinka muuttaa äänenvoimakkuutta
- Kuinka hallita käyttäjien reititystä ja selainhistoriaa
Elokuvahakusovellus Reactilla (koukuilla)
Ensimmäinen asia, josta voit aloittaa, on elokuvahakusovelluksen rakentaminen Reactin avulla. Alla on kuva siitä, miltä lopullinen sovellus näyttää:
Mitä opit
Rakentamalla tämän sovelluksen parannat React-taitojasi suhteellisen uuden Hooks API:n avulla. Esimerkkiprojektissa käytetään React-komponentteja, paljon koukkuja, ulkoista API:ta ja tietysti jonkin verran CSS-tyyliä.
Tekninen pino ja ominaisuudet
- Reagoi koukuilla
- luoda reagoivat-sovellus
- JSX
- CSS
Ilman luokkia nämä projektit antavat sinulle täydellisen sisääntulokohdan toimivaan Reactiin ja auttavat sinua varmasti vuonna 2020. voit löytää . Noudata ohjeita tai tee siitä omasi.
Chat-sovellus Vuen kanssa
Toinen hieno projekti sinulle on luoda chat-sovellus käyttämällä suosikki JavaScript-kirjastoani: VueJS. Sovellus näyttää suunnilleen tältä:
Mitä opit
Tässä opetusohjelmassa opit tekemään Vue-sovelluksen tyhjästä – luomaan komponentteja, käsittelemään tiloja, luomaan reittejä, muodostamaan yhteyden kolmannen osapuolen palveluihin ja jopa käsittelemään todennusta.
Tekninen pino ja ominaisuudet
- Näkymä
- vuex
- Vue-reititin
- Vue CLI
- Pusher
- CSS
Tämä on todella hieno projekti aloittaaksesi Vuen kanssa tai parantaaksesi olemassa olevia taitojasi päästäksesi kehitykseen vuonna 2020. voit löytää .
Kaunis sääsovellus Angular 8:lla
Tämä esimerkki auttaa sinua rakentamaan kauniin sääsovelluksen Angular 8:lla:
Mitä opit
Tämä projekti opettaa sinulle arvokkaita taitoja sovellusten rakentamisessa alusta alkaen - suunnittelusta kehitystyön, aina käyttöönottovalmiin sovelluksiin.
Tekninen pino ja ominaisuudet
- Kulma 8
- Firebase
- Palvelinpuolen renderöinti
- CSS gridillä ja Flexboxilla
- Mobiiliystävällinen ja mukautuva
- Tumma tila
- Kaunis käyttöliittymä
Tästä kokonaisvaltaisesta projektista pidän todella paljon, että asioita ei tutkita eristyksissä. Sen sijaan opit koko kehitysprosessin suunnittelusta lopulliseen käyttöönottoon.
To-Do-sovellus Svelten kanssa
Svelte on kuin uusi lapsi komponenttilähestymistapassa - ainakin samanlainen kuin React, Vue ja Angular. Ja tämä on yksi vuoden 2020 kuumimmista uusista tuotteista.
To-Do-sovellukset eivät välttämättä ole kuumin aihe, mutta ne todella auttavat sinua hiomaan Svelte-taitojasi. Se näyttää tältä:
Mitä opit
Tämä opetusohjelma näyttää, kuinka voit luoda sovelluksen Svelte 3:lla alusta loppuun. Käytät komponentteja, tyyliä ja tapahtumakäsittelijöitä
Tekninen pino ja ominaisuudet
- Siro 3
- Компоненты
- Muotoilu CSS:llä
- Syntaksi ES6
Hyviä Svelte-aloitusprojekteja ei ole montaa, joten löysin .
Verkkokauppasovellus Next.js:n kanssa
Next.js on suosituin kehys React-sovellusten rakentamiseen, jotka tukevat palvelinpuolen renderöintiä heti valmiina.
Tämä projekti näyttää, kuinka voit luoda verkkokauppasovelluksen, joka näyttää tältä:
Mitä opit
Tässä projektissa opit kehittämään Next.js:n avulla – luomaan uusia sivuja ja komponentteja, noutamaan tietoja sekä muotoilemaan ja ottamaan käyttöön Next-sovelluksen.
Tekninen pino ja ominaisuudet
- Next.js
- Komponentit ja sivut
- Datan otanta
- stilisointi
- Projektin käyttöönotto
- SSR ja SPA
On aina hienoa, että sinulla on tosielämän esimerkki, kuten verkkokauppasovellus, jossa voit oppia jotain uutta. Sinä pystyt .
Täysi monikielinen blogi Nuxt.js:llä
Nuxt.js on Vuelle, kuten Next.js on Reactille: loistava kehys palvelinpuolen renderöinnin ja yksisivuisten sovellusten yhdistämiseen
Viimeinen luotava sovellus näyttää tältä:
Mitä opit
Tässä esimerkkiprojektissa opit rakentamaan täydellisen verkkosivuston Nuxt.js:n avulla alkuasennuksesta lopulliseen käyttöönottoon.
Se hyödyntää monia Nuxtin hienoja ominaisuuksia, kuten sivuja ja komponentteja sekä muotoilua SCSS:n avulla.
Tekninen pino ja ominaisuudet
- Nuxt.js
- Komponentit ja sivut
- tarinalohkomoduuli
- Seokset
- Vuex valtionhallinnolle
- SCSS muotoiluun
- Nuxt väliohjelmistot
, joka sisältää monia Nuxt.js:n hienoja ominaisuuksia. Itse pidän Nuxtin kanssa työskentelystä, joten sinun pitäisi kokeilla sitä, koska se tekee sinusta myös loistavan Vue-kehittäjän.
Blogi Gatsbyn kanssa
Gatsby on loistava staattinen sivustogeneraattori, joka käyttää Reactia ja GraphQL:ää. Tämä on projektin tulos:
Mitä opit
Tässä opetusohjelmassa opit luomaan Gatsbyn avulla blogin, jonka avulla voit kirjoittaa omia artikkeleitasi Reactin ja GraphQL:n avulla.
Tekninen pino ja ominaisuudet
- gatsby
- suhtautua
- GraphQL
- Lisäosat ja teemat
- MDX/markdown
- Bootstrap CSS
- Mallit
Jos olet joskus halunnut perustaa blogin, miten se tehdään Reactin ja GraphQL:n avulla.
En sano, että WordPress on huono valinta, mutta Gatsbyn avulla voit rakentaa tehokkaita verkkosivustoja Reactin avulla - mikä on hämmästyttävä yhdistelmä.
Blogi Gridsomen kanssa
Gridsome for Vue… Okei, meillä oli se jo Next/Nuxtin kanssa.
Mutta sama pätee Gridsomeen ja Gatsbyyn. Molemmat käyttävät GraphQL:ää tietokerroksenaan, mutta Gridsome käyttää VueJS:ää. Se on myös mahtava staattinen sivustogeneraattori, jonka avulla voit luoda upeita blogeja:
Mitä opit
Tämä projekti opettaa sinulle, kuinka voit luoda yksinkertaisen blogin, jolla pääset alkuun Gridsomen, GraphQL:n ja Markdownin kanssa. Se selittää myös, kuinka sovellus otetaan käyttöön Netlifyn kautta.
Tekninen pino ja ominaisuudet
- Kauhea
- Näkymä
- GraphQL
- Hinnanalennus
- netlify
Tämä ei todellakaan ole täydellisin opetusohjelma, mutta se kattaa Gridsomen peruskäsitteet ja .
SoundCloudin kaltainen äänisoitin Quasarilla
Quasar on toinen Vue-kehys, jota voidaan käyttää mobiilisovellusten rakentamiseen. Tässä projektissa luot äänisoitinsovelluksen, esimerkiksi:
Mitä opit
Vaikka muut projektit keskittyvät enimmäkseen verkkosovelluksiin, tämä näyttää sinulle, kuinka voit rakentaa mobiilisovelluksen Vuen ja Quasar-kehyksen avulla.
Sinulla pitäisi olla jo toimiva Cordova, jossa on Android Studio/Xcode. Jos ei, ohjekirjassa on linkki Quasar-verkkosivustolle, jossa he osoittavat, kuinka kaikki asetetaan.
Tekninen pino ja ominaisuudet
- Kvasaari
- Näkymä
- Cordova
- aaltosurffaaja
- Käyttöliittymän komponentit
, joka osoittaa Quasarin kyvyt mobiilisovellusten rakentamiseen.
Форма кредитной карты
Viileä luottokorttimuoto sulavilla ja nautinnollisilla mikrovuorovaikutuksilla. Sisältää numeron muotoilun, vahvistuksen ja automaattisen korttityypin tunnistuksen. Se on rakennettu Vue.js:lle ja on myös täysin reagoiva. (Sinä pystyt näkemään .)
Mitä opit:
- Käsittele ja vahvista lomakkeita
- Käsittele tapahtumia (esimerkiksi kun kentät muuttuvat)
- Ymmärrä elementtien näyttäminen ja sijoittaminen sivulla, erityisesti lomakkeen päällä näkyvät luottokorttitiedot
pylväsdiagrammi
Histogrammi on kaavio tai kaavio, joka edustaa kategorista dataa suorakulmaisilla palkkeilla, joiden korkeus tai pituus on verrannollinen niiden edustamiin arvoihin.
Niitä voidaan levittää pysty- tai vaakasuoraan. Pystypylväskaaviota kutsutaan joskus viivakaavioksi.
Mitä opit:
- Näytä tiedot jäsennellyllä ja ymmärrettävällä tavalla
- Lisäksi: Opi käyttämään elementtiä
canvasja kuinka piirtää elementtejä sen avulla
löydät maailman väestötiedot. Ne on lajiteltu vuoden mukaan.
Анимация сердечка Twitter
Vuonna 2016 Twitter esitteli tämän hämmästyttävän animaation twiitteihinsä. Vuodesta 2019 lähtien se näyttää edelleen osalta, joten miksi et luo sellaisen itse?
Mitä opit:
- Työskentele CSS-attribuutin kanssa
keyframes - Manipuloi ja animoi HTML-elementtejä
- Yhdistä JavaScript, HTML ja CSS
Репозитории GitHub с функцией поиска
Tässä ei ole mitään hienoa – GitHub-tietovarastot ovat vain ylistetty luettelo.
Tavoitteena on näyttää arkistot ja antaa käyttäjän suodattaa niitä. Käyttää saadaksesi arkistot jokaiselle käyttäjälle.
GitHub-profiilisivu -
Mitä opit:
- Vastaanota tietoja API:lta
- Näytä tiedot API:sta
- Suodata ja näytä kunkin haun osuvat tiedot
- Valinnainen: Jos olet valmis haasteeseen, käytä , rakennettu GraphQL:llä. .
Чаты в стиле Reddit
Chatit ovat suosittu tapa kommunikoida yksinkertaisuutensa ja helppokäyttöisyytensä vuoksi. Mutta mikä todella ruokkii nykyaikaisia chat-huoneita? WebSockets!
Mitä opit:
- Käytä WebSocketsia, reaaliaikaista viestintää ja tietojen päivityksiä
- Työskentele käyttäjien käyttöoikeustasojen kanssa (esimerkiksi chat-kanavan omistajalla on rooli
adminja muut huoneessa -user) - Käsittele ja vahvista lomakkeita - muista, että viestin lähettämisen chat-ikkuna on
input - Luo erilaisia keskusteluja ja liity niihin
- Työskentele henkilökohtaisten viestien kanssa. Käyttäjät voivat keskustella muiden käyttäjien kanssa yksityisesti. Pohjimmiltaan luot WebSocket-yhteyden kahden käyttäjän välille.
Навигация в стиле Stripe
Tästä navigoinnista ainutlaatuisen tekee se, että ponnahdusikkuna muuttuu sisällön mukaan. Tässä siirtymässä on eleganssia verrattuna perinteiseen uuden ponnahdusikkunan avaamiseen ja sulkemiseen.
Mitä opit:
- Yhdistä CSS-animaatiot siirtymiin
- Himmennä sisältö ja käytä aktiivista luokkaa kelluvaan elementtiin
Pacman
Luo oma versio Pacmanista. Tämä on loistava tapa saada käsitys pelien kehittämisestä ja ymmärtää perusasiat. Käytä JavaScript-kehystä, Reactia tai Vuea.
Sinä tulet oppimaan:
- Kuinka elementit liikkuvat
- Kuinka määrittää, mitä näppäimiä painetaan
- Kuinka määrittää törmäyshetki
- Voit mennä pidemmälle ja lisätä haamuliikkeen ohjauksen
Löydät esimerkin tästä projektista GitHub
Käyttäjien hallinta
Hanke GitHub
CRUD-tyyppisen sovelluksen luominen käyttäjien hallintaan opettaa sinulle kehityksen perusteet. Tämä on erityisen hyödyllistä uusille kehittäjille.
Sinä tulet oppimaan:
- Mikä on reititys
- Kuinka käsitellä tietolomakkeita ja tarkistaa, mitä käyttäjä on syöttänyt
- Tietokannan käyttäminen - luo, lue, päivitä ja poista toimintoja
Проверка погоды в вашем местоположении
Hanke GitHub
Jos haluat luoda sovelluksia, aloita sääsovelluksella. Tämä projekti voidaan suorittaa Swiftillä.
Sovelluksen rakentamisen kokemuksen lisäksi opit:
- Kuinka työskennellä API:n kanssa
- Kuinka käyttää maantieteellistä sijaintia
- Tee sovelluksestasi dynaamisempi lisäämällä tekstinsyöttö. Siinä käyttäjät voivat syöttää sijaintinsa tarkistaakseen sään tietyssä paikassa.
Tarvitset API:n. Saat säätiedot OpenWeather API:n avulla. Lisätietoja OpenWeather API:sta.
Chat-ikkuna
Chat-ikkunani toiminnassa, avoinna kahdessa selaimen välilehdessä
Chat-ikkunan luominen on täydellinen tapa aloittaa sockettien käyttö. Tekniikan valikoima on valtava. Esimerkiksi Node.js on täydellinen.
Opit kuinka pistorasiat toimivat ja kuinka ne toteutetaan. Tämä on tämän projektin tärkein etu.
Jos olet Laravel-kehittäjä, joka haluaa työskennellä pistorasioiden kanssa, lue minun
GitLab CI
Jos olet uusi jatkuvassa integraatiossa (CI), kokeile GitLab CI:tä. Määritä muutama ympäristö ja yritä suorittaa pari testiä. Se ei ole kovin vaikea projekti, mutta olen varma, että opit siitä paljon. Monet kehitystiimit käyttävät nyt CI:tä. Sen käyttö on hyödyllistä.
Sinä tulet oppimaan:
- Mikä on GitLab CI
- Kuinka konfiguroida
.gitlab-ci.ymljoka kertoo GitLab-käyttäjälle mitä tehdä - Kuinka ottaa käyttöön muihin ympäristöihin
Анализатор сайтов
Tee kaavin, joka analysoi verkkosivustojen semantiikan ja luo niille luokituksen. Voit esimerkiksi tarkistaa, ettei kuvista puuttuu alt-tageja. Tai tarkista, onko sivulla SEO-sisällönkuvauskenttiä. Kaavin voidaan luoda ilman käyttöliittymää.
Sinä tulet oppimaan:
- Miten kaavin toimii?
- Kuinka luoda DOM-valitsimia
- Kuinka kirjoittaa algoritmi
- Jos et halua lopettaa tähän, luo käyttöliittymä. Voit myös luoda raportin jokaisesta tarkistamastasi verkkosivustosta.
Определение настроений в социальных сетях
Sentimentin havaitseminen sosiaalisessa mediassa on loistava tapa tutustua koneoppimiseen.
Voit aloittaa analysoimalla vain yhtä sosiaalista verkostoa. Yleensä kaikki aloittavat Twitteristä.
Jos sinulla on jo kokemusta koneoppimisesta, kokeile kerätä dataa eri sosiaalisista verkostoista ja yhdistää niitä.
Sinä tulet oppimaan:
- Mitä on koneoppiminen
Клон Trello
Mitä opit:
- Pyynnön käsittelyreittien organisointi (reititys).
- Raahaa ja pudota.
- Kuinka luoda uusia objekteja (tauluja, listoja, kortteja).
- Syöttötietojen käsittely ja tarkistus.
- Asiakaspuolelta: kuinka käyttää paikallista tallennustilaa, kuinka tallentaa tietoja paikalliseen tallennustilaan, kuinka lukea tietoja paikallisesta tallennustilasta.
- Palvelimen puolelta: kuinka tietokantoja käytetään, kuinka tietoja tallennetaan tietokantaan, kuinka tietoja luetaan tietokannasta.
, valmistettu React+Reduxilla.
Панель админа
Yksinkertainen CRUD-sovellus, ihanteellinen perusasioiden oppimiseen. Opitaan:
- Luo käyttäjiä, hallitse käyttäjiä.
- Ole vuorovaikutuksessa tietokannan kanssa - luo, lue, muokkaa, poista käyttäjiä.
- Syötteen vahvistaminen ja lomakkeiden käsittely.
Трекер криптовалют (нативное мобильное приложение)
Mikä tahansa: Swift, Objective-C, React Native, Java, Kotlin.
Opiskellaan:
- Kuinka alkuperäiset sovellukset toimivat.
- Kuinka noutaa tietoja API:sta.
- Kuinka alkuperäiset sivuasettelut toimivat.
- Kuinka työskennellä mobiilisimulaattorien kanssa.
. Jos löydät jotain parempaa, kirjoita kommentteihin.
Jos olet kiinnostunut, tässä se on .
Настроить собственный конфиг webpack с нуля
Teknisesti tämä ei ole sovellus, mutta se on erittäin hyödyllinen tehtävä ymmärtää, miten webpack toimii sisältä käsin. Nyt se ei ole "musta laatikko", vaan ymmärrettävä työkalu.
vaatimukset:
- Kääntää es7:stä es5:een (perustiedot).
- Kääntää jsx js:ksi - tai - .vue .js:ksi (sinun täytyy opetella lataajat)
- Määritä webpack-kehittäjäpalvelin ja hot-moduulin uudelleenlataus. (vue-cli ja create-react-app käyttävät molempia)
- Käytä Herokua, now.sh- tai Githubia ja opi ottamaan käyttöön verkkopakettiprojekteja.
- Aseta suosikkiesiprosessorisi kääntämään css - scss, less, stylus.
- Opi käyttämään kuvia ja SVG-tiedostoja verkkopaketin kanssa.
Клон Hackernews
Jokaisen jedin on tehtävä oma Hackernews.
Mitä opit matkan varrella:
- Kuinka olla vuorovaikutuksessa hackernews API:n kanssa.
- Kuinka luoda yksisivuinen sovellus.
- Kuinka ottaa käyttöön ominaisuuksia, kuten kommenttien, yksittäisten kommenttien ja profiilien katselu.
- Pyynnön käsittelyreittien organisointi (reititys).
Тудушечка
Vakavasti? Tudushka? Niitä on tuhansia. Mutta usko minua, tälle suosiolle on syynsä.
Tudu-sovellus on loistava tapa varmistaa, että ymmärrät perusasiat. Kokeile kirjoittaa yksi sovellus vanilja Javascriptillä ja yksi suosikkikehyksessäsi.
Oppia:
- Luo uusia tehtäviä.
- Tarkista, että kentät on täytetty.
- Suodata tehtävät (valmiit, aktiiviset, kaikki). Käyttää
filterиreduce. - Ymmärrä Javascriptin perusteet.
Сортируемый drag and drop список
Erittäin hyödyllistä ymmärtää .
Opitaan:
- Vedä ja pudota API
- Luo monipuoliset käyttöliittymät
Клон мессенджера (нативное приложение)
Ymmärrät kuinka sekä verkkosovellukset että natiivisovellukset toimivat, mikä erottaa sinut harmaan massasta.
Mitä opiskelemme:
- Verkkopistokkeet (pikaviestit)
- Kuinka alkuperäiset sovellukset toimivat.
- Kuinka mallit toimivat alkuperäisissä sovelluksissa.
- Pyynnön käsittelyreittien järjestäminen alkuperäisissä sovelluksissa.
Tekstieditori
Tekstieditorin tarkoitus on vähentää käyttäjien vaivaa, jotka yrittävät muuntaa muotoilunsa kelvollisiksi HTML-merkinnöiksi. Hyvä tekstieditori antaa käyttäjille mahdollisuuden muotoilla tekstiä eri tavoin.
Jossain vaiheessa jokainen on käyttänyt tekstieditoria. Joten miksi ei ?
Клон Reddit
on sosiaalisten uutisten kokoamis-, verkkosisällön luokitus- ja keskustelusivusto.
Reddit vie suurimman osan ajastani, mutta vietän sitä edelleen. Reddit-kloonin luominen on tehokas tapa oppia ohjelmointia (selatessasi Redditiä samaan aikaan).
Reddit tarjoaa sinulle erittäin rikkaan. Älä jätä pois mitään ominaisuuksia tai tee asioita sattumanvaraisesti. Reaalimaailmassa asiakkaiden ja asiakkaiden kanssa et voi työskennellä sattumanvaraisesti tai menetät nopeasti työpaikkasi.
Älykkäät asiakkaat huomaavat heti, että työtä tehdään huonosti ja löytävät jonkun muun.
Публикация пакета NPM с открытым исходным кодом
Jos kirjoitat Javascript-koodia, käytät todennäköisesti paketinhallintaa. Paketinhallinnan avulla voit käyttää uudelleen olemassa olevaa koodia, jonka muut ihmiset ovat kirjoittaneet ja julkaisseet.
Paketin koko kehityssyklin ymmärtäminen tarjoaa erittäin hyvän kokemuksen. Sinun on tiedettävä monia asioita, kun julkaiset koodia. Sinun on pohdittava turvallisuutta, semanttista versiointia, skaalautuvuutta, nimeämiskäytäntöjä ja ylläpitoa.
Paketti voi olla mikä tahansa. Jos sinulla ei ole ideaa, luo oma Lodash ja julkaise se.
Lodash:
Kun olet tehnyt jotain verkossa, olet 10 % muiden yläpuolella. avoimista lähteistä ja paketeista.
Учебный план freeCodeCamp
freeCodecamp on kerännyt paljon .
freeCodeCamp on voittoa tavoittelematon organisaatio. Se koostuu interaktiivisesta verkkopohjaisesta oppimisalustasta, verkkoyhteisöfoorumista, chat-huoneista, Medium-julkaisuista ja paikallisista organisaatioista, jotka aikovat tehdä oppimisen verkkokehityksen kaikkien ulottuville.
Olet enemmän kuin pätevä ensimmäiseen työpaikkaasi, jos onnistut suorittamaan koko kurssin.
Создайте HTTP-сервер с нуля
HTTP-protokolla on yksi tärkeimmistä protokollista, joiden kautta sisältö kulkee Internetissä. HTTP-palvelimia käytetään palvelemaan staattista sisältöä, kuten HTML, CSS ja JS.
HTTP-protokollan käyttöönotto alusta alkaen laajentaa tietämystäsi asioiden vuorovaikutuksesta.
Jos esimerkiksi käytät NodeJ:itä, tiedät, että Express tarjoaa HTTP-palvelimen.
Katso viitteeksi, voitko:
- Määritä palvelin ilman kirjastoja
- Palvelimen tulee palvella HTML-, CSS- ja JS-sisältöä.
- Reitittimen käyttöönotto tyhjästä
- Seuraa muutoksia ja päivitä palvelin
Jos et tiedä miksi, käytä ja yritä luoda HTTP-palvelin tyhjästä.
Десктопное приложение для заметок
Me kaikki teemme muistiinpanoja, eikö niin?
Luodaan muistiinpanosovellus. Sovelluksen on tallennettava muistiinpanot ja synkronoitava ne tietokannan kanssa. Rakenna natiivisovellus käyttämällä Electronia, Swiftiä tai mitä tahansa haluat ja mikä toimii järjestelmässäsi.
Voit vapaasti yhdistää tämän ensimmäiseen haasteeseen (tekstieditori).
Bonuksena voit yrittää synkronoida työpöytäversiosi verkkoversion kanssa.
Подкасты (клон Overcast)
Kukapa ei kuuntele podcasteja?
Luo verkkosovellus, jossa on seuraavat toiminnot:
- Luo tili
- Etsi podcasteja
- Arvioi ja tilaa podcasteja
- Pysäytä ja toista, muuta nopeutta, eteenpäin ja taaksepäin -toimintoja 30 sekunnin ajan.
Kokeile iTunes-sovellusliittymää aloituskohtana. Jos tiedät muita resursseja, kirjoita kommentteihin.
Kuvakaappaus
Hei! Kuvaan ruutuani juuri nyt!
Luo työpöytä- tai verkkosovellus, jonka avulla voit kaapata näytön ja tallentaa leikkeen nimellä .gif
Täällä miten tämä saavutetaan.
lähteet
Lähde: will.com