Dojo ea pele: merero ea ho koetlisa litsebo tsa nts'etsopele (5 tse ncha + 43 tsa khale)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Sengoloa se fetoletsoe ka tšehetso ea EDISON Software, e разрабатывает приложения и сайты, hammoho le e tsetela ho tse qalang.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonase: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

gifski конвертирует видео в GIF используя функцииpngquant/ для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Ela hloko: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Bonase: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Ela hloko: mona GitHub example repository.

Подборка проектов из предыдущих публикаций.

lera

www.reddit.com/r/layer

Layer ke sechaba seo motho e mong le e mong a ka toroang pixel ho "board" e arolelanoang. Mohopolo oa pele o hlahile ho Reddit. Sechaba sa r/Layer ke papiso ea boiqapelo bo arolelanoang, hore bohle e ka ba moetsi le ho kenya letsoho molemong o tšoanang.

Seo u tla ithuta sona ha u iketsetsa morero oa Layer:

• Kamoo JavaScript canvas e sebetsang kateng Ho tseba ho sebelisa canvas ke bokhoni ba bohlokoa lits'ebetsong tse ngata.
• Mokhoa oa ho hokahanya litumello tsa basebelisi. Mosebelisi e mong le e mong a ka taka pixel e le 'ngoe metsotso e meng le e meng e 15 ntle le hore a kene.
• Etsa linako tsa li-cookie.

Squoosh

squooosh.app

Squoosh ke sesebelisoa sa compression sa setšoantšo se nang le likhetho tse ngata tse tsoetseng pele.

GIF 20 MB

Ka ho iketsetsa mofuta oa Squoosh u tla ithuta:

• Mokhoa oa ho sebetsa ka boholo ba litšoantšo
• Ithute lintho tsa motheo tsa Drag'n'Drop API
• Utloisisa hore na API le bamameli ba ketsahalo ba sebetsa joang
• Mokhoa oa ho kenya le ho romela lifaele

Ela hloko: Compressor ea setšoantšo e sebakeng sa heno. Ha ho hlokahale ho romela data e eketsehileng ho seva. U ka ba le compressor lapeng, kapa u ka e sebelisa ho seva, khetho ea hau.

Mohlahisi

Tloho? Ka botebo? Calculator? E, hantle, k'halkhuleita. Ho utloisisa metheo ea ts'ebetso ea lipalo le hore na e sebetsa 'moho joang ke bokhoni ba bohlokoa ba ho nolofatsa lits'ebetso tsa hau. Haufinyane o tla tlameha ho sebetsana le lipalo mme kapele ho betere.

jarodburchhill.github.io/CalculatorReactApp

Ka ho iketsetsa calculator ea hau u tla ithuta:

• Sebetsa ka lipalo le ts'ebetso ea lipalo
• Itloaetse ho sebelisa API ea bamameli ba liketsahalo
• Mokhoa oa ho hlophisa likarolo, utloisisa mekhoa

Crawler (Batla Enjine)

Motho e mong le e mong o sebelisitse enjine ea ho batla, joale hobaneng o sa iketsetse ea hau? Li-crawlers lia hlokahala ho batla lintlha. Motho e mong le e mong oa li sebelisa letsatsi le leng le le leng mme tlhoko ea theknoloji ena le litsebi li tla hola ha nako e ntse e ea.

Enjine ea ho batla ea Google

Seo u tla ithuta sona ka ho iketsetsa mochine oa ho batla:

• Kamoo batho ba khasang ba sebetsang kateng
• Mokhoa oa ho supa libaka tsa marang-rang le mokhoa oa ho li beha maemong ka lintlha le botumo
• Mokhoa oa ho boloka libaka tse ngolisitsoeng ka har'a database le mokhoa oa ho sebetsa le database

Sebapali sa mmino (Spotify, Apple Music)

E mong le e mong o mamela 'mino - ke karolo ea bohlokoa ea bophelo ba rona. Ha re theheng sebapala-'mino ho utloisisa hamolemo hore na mechanics ea sethala sa sejoale-joale sa 'mino se sebetsa joang.

Spotify

Seo u tla ithuta sona ka ho iketsetsa sethala sa hau sa ho phallela 'mino:

• Mokhoa oa ho sebetsa le API. sebelisa API ho tsoa ho Spotify kapa Apple Music
• Mokhoa oa ho bapala, ho emisa kapa ho khutlela morao pina e latelang/e fetileng
• Mokhoa oa ho fetola molumo
• Mokhoa oa ho laola litsamaiso tsa basebelisi le nalane ea sebatli

Sesebelisoa sa ho batla lifilimi se sebelisang React (ka lihakisi)

Ntho ea pele eo u ka e qalang ke ho theha sesebelisoa sa ho batla lifilimi u sebelisa React. Ka tlase ke setšoantšo sa hore na sesebelisoa sa ho qetela se tla shebahala joang:

O tla ithuta eng
Ka ho aha sesebelisoa sena, o tla ntlafatsa tsebo ea hau ea React ka ho sebelisa Hooks API e ncha. Morero oa mohlala o sebelisa likarolo tsa React, lihoko tse ngata, API ea kantle, 'me ehlile setaele sa CSS.

Tech stack le likarolo

• Itšoare ka lihakisi
• qapa-etsa-app
• JSX
• CSS

Ntle le ho sebelisa litlelase leha e le life, merero ena e u fa sebaka se nepahetseng sa ho kena ho React e sebetsang mme e tla u thusa ka 2020. u ka fumana mohlala oa morero mona. Latela litaelo kapa u iketsetse ea hau.

Chat App le Vue

Morero o mong o motle oo u ka o etsang ke ho theha sesebelisoa sa meqoqo u sebelisa laeborari eo ke e ratang ea JavaScript: VueJS. Sesebelisoa se tla shebahala tjena:

O tla ithuta eng
Thutong ena, u tla ithuta ho etsa sesebelisoa sa Vue ho tloha qalong - ho theha likarolo, ho sebetsana le boemo, ho theha litsela, ho hokela lits'ebeletso tsa mokha oa boraro, esita le ho sebetsana le netefatso.

Tech stack le likarolo

• Vue
• vux
• Tsela ea ho shebella
• Sheba CLI
• Pusher
• CSS

Ona ke projeke e ntle haholo ea ho qala ka Vue kapa ho ntlafatsa tsebo ea hau e teng ho kena nts'etsopele ka 2020. u ka fumana thuto mona.

Sesebelisoa se setle sa boemo ba leholimo se nang le Angular 8

Mohlala ona o tla u thusa ho theha app e ntle ea boemo ba leholimo u sebelisa Angular 8:

O tla ithuta eng
Morero ona o tla u ruta litsebo tsa bohlokoa tsa ho aha lits'ebetso ho tloha qalong - ho tloha ho moralo ho isa ho nts'etsopele, ho isa ho ts'ebeliso e lokiselitsoeng ho romelloa.

Tech stack le likarolo

• Angular 8
• Setsi sa mollo
• Phetolelo ea lehlakore la seva
• CSS e nang le Grid le Flexbox
• Mobile botsoalle le ho ikamahanya le maemo
• Mokhoa o lefifi
• Sehokelo se setle

Seo ke hlileng ke se ratang ka morero ona o akaretsang ke hore ha u ithute lintho u le mong. Ho e-na le hoo, u ithuta ts'ebetso eohle ea nts'etsopele, ho tloha ho moralo ho isa ho ts'ebetsong ea ho qetela.

Sesebelisoa sa ho Etsa se sebelisa Svelte

Svelte o tšoana le ngoana e mocha ka mokhoa o thehiloeng ho likarolo - bonyane o tšoana le React, Vue le Angular. Mme ena ke e 'ngoe ea lihlahisoa tse ncha tse chesang ka ho fetesisa tsa 2020.

Lisebelisoa tsa To-Do ha se taba e chesang haholo, empa li tla u thusa ho ntlafatsa tsebo ea hau ea Svelte. E tla shebahala tjena:

O tla ithuta eng
Thupelo ena e tla u bontša mokhoa oa ho etsa kopo u sebelisa Svelte 3, ho tloha qalong ho isa qetellong. U tla sebelisa likarolo, setaele, le batšoasi ba liketsahalo

Tech stack le likarolo

• Setšoantšo sa 3
• Lihlopha
• Setaele le CSS
• ES6 syntax

Ha ho na merero e mengata e ntle ea ho qala Svelte, kahoo ke e fumane ena ke khetho e ntle ho qala ka eona.

Sesebelisoa sa E-commerce se sebelisang Next.js

Next.js ke moralo o tsebahalang haholo oa ho aha lits'ebetso tsa React tse ts'ehetsang phepelo ea lehlakore la seva ka ntle ho lebokose.

Morero ona o tla u bontša mokhoa oa ho etsa kopo ea e-commerce e shebahalang tjena:

O tla ithuta eng
Morerong ona, o tla ithuta ho ntlafatsa ka Next.js- theha maqephe a macha le likaroloana, ho ntša lintlha, le setaele ebe u sebelisa sesebelisoa se Latelang.

Tech stack le likarolo

• E latelang .js
• Likaroloana le Maqephe
• Data sampole
• Setaele
• Phaliso ea Morero
• SSR le SPA

Kamehla ho monate ho ba le mohlala oa lefatše oa 'nete joalo ka sesebelisoa sa e-commerce ho ithuta ntho e ncha. U ka khona fumana thuto mona.

Blog e felletseng ea lipuo tse ngata e nang le Nuxt.js

Nuxt.js ke ea Vue, seo Next.js e leng sona bakeng sa React: moralo o motle oa ho kopanya matla a ho fana ka lehlakoreng la seva le lits'ebetso tsa leqephe le le leng.
Sesebelisoa sa ho qetela seo u ka se etsang se tla shebahala tjena:

O tla ithuta eng

Morerong ona oa mohlala, u tla ithuta ho theha sebaka sa Marang-rang se felletseng u sebelisa Nuxt.js, ho tloha ha u seta qalong ho isa phetisong ea ho qetela.

E nka monyetla oa likarolo tse ngata tse ntle tseo Nuxt e fanang ka tsona, joalo ka maqephe le likarolo, le setaele ka SCSS.

Tech stack le likarolo

• Jj
• Likaroloana le Maqephe
• Storyblock module
• Hagfish
• Vuex bakeng sa tsamaiso ea naha
• SCSS bakeng sa setaele
• Nuxt middlewares

Ena ke morero o motle haholo, e kenyelletsang likarolo tse ngata tse ntle tsa Nuxt.js. Ke rata ho sebetsa le Nuxt kahoo o lokela ho e leka kaha e tla u etsa moqapi e moholo oa Vue.

Blog le Gatsby

Gatsby ke jenereithara e ntle haholo ea sebaka sa marang-rang e sebelisang React le GraphQL. Sena ke sephetho sa morero:

O tla ithuta eng

Thutong ena, u tla ithuta ho sebelisa Gatsby ho theha blog eo u tla e sebelisa ho ngola lingoliloeng tsa hau u sebelisa React le GraphQL.

Tech stack le likarolo

• gatsby
• Etsa joalo
• KerafoQL
• Li-plugins le lihlooho
• MDX/Markdown
• Bootstrap CSS
• Litempele

Haeba u kile ua batla ho qala blog, ona ke mohlala o motle mabapi le mokhoa oa ho e etsa ka React le GraphQL.

Ha ke re WordPress ke khetho e mpe, empa ka Gatsby u ka haha ​​​​liwebsaete tse sebetsang hantle ka ho sebelisa React - e leng motsoako o makatsang.

Blog e nang le Gridsome

Gridsome for Vue... Ho lokile, re se re na le sena ka Next/Nuxt.
Empa ho joalo le ka Gridsome le Gatsby. Ka bobeli ba sebelisa GraphQL joalo ka data ea bona, empa Gridsome e sebelisa VueJS. Hape ke jenereithara e makatsang ea sebaka sa marang-rang e tla u thusa ho theha li-blog tse ntle haholo:

O tla ithuta eng

Morero ona o tla u ruta mokhoa oa ho theha blog e bonolo ho qala ka Gridsome, GraphQL le Markdown. E boetse e akaretsa mokhoa oa ho kenya kopo ka Netlify.

Tech stack le likarolo

• Gridsome
• Vue
• KerafoQL
• Markdown
• Netify

Ka sebele ena ha se thuto e felletseng ka ho fetesisa, empa e akaretsa lintlha tsa mantlha tsa Gridsome le Markdown e ka ba sebaka se setle sa ho qala.

Sebapali sa molumo se kang SoundCloud se sebelisa Quasar

Quasar ke moralo o mong oa Vue o ka sebelisoang ho theha lits'ebetso tsa mehala. Morerong ona o tla theha sesebelisoa sa sebapali sa molumo, mohlala:

O tla ithuta eng

Leha merero e meng e tsepamisitse maikutlo haholo lits'ebetsong tsa marang-rang, ena e tla u bontša mokhoa oa ho theha sesebelisoa sa mohala u sebelisa Vue le moralo oa Quasar.
U tlameha ho ba le Cordova e sebetsang ka Android Studio/Xcode e hlophisitsoeng. Haeba ho se joalo, bukana e na le sehokelo ho webosaete ea Quasar moo ba u bonts'ang mokhoa oa ho hlophisa tsohle.

Tech stack le likarolo

• quasar
• Vue
• Cordova
• WaveSurfer
• Likarolo tsa UI

Morero o monyane, e bonts'ang bokhoni ba Quasar ba ho theha lits'ebetso tsa mehala.

Форма кредитной карты

Sebopeho se setle sa karete ea mokoloto se nang le litšebelisano tse nyane tse boreleli le tse monate. E kenyelletsa ho fometa ha linomoro, netefatso le ho fumana mofuta oa karete ea othomathike. E hahiloe ho Vue.js hape e arabela ka botlalo. (O ka bona mona.)

foromo ea karete ea mokoloto

Seo u tla ithuta sona:

• Ts'ebetso le ho netefatsa liforomo
• Tšoara liketsahalo (mohlala, ha masimo a fetoha)
• Utloisisa mokhoa oa ho hlahisa le ho beha likarolo leqepheng, haholo tlhahisoleseling ea karete ea mokoloto e hlahang kaholimo ho foromo

graph ea bareng

Histogram ke chate kapa kerafo e emelang lintlha tsa likarolo tse nang le litšepe tse khutlonnetsepa tse nang le bophahamo kapa bolelele bo lekanang le boleng boo li bo emelang.

Li ka sebelisoa ka mokhoa o otlolohileng kapa o otlolohileng. Ka linako tse ling chate e otlolohileng e bitsoa chate ea mola.

Seo u tla ithuta sona:

• Hlahisa data ka mokhoa o hlophisitsoeng le o utloisisehang
• Ho ekelletsa moo: Ithute ho sebelisa element canvas le mokhoa oa ho taka likarolo ka eona

ke u ka fumana lintlha tsa baahi ba lefatše. Li hlophisoa ka selemo.

Анимация сердечка Twitter

Morao koana ka 2016, Twitter e ile ea hlahisa papali ena e makatsang bakeng sa li-tweets tsa eona. Ho tloha ka 2019, e ntse e shebahala e le karolo, ke hobane'ng ha u sa iketsetse eona?

Seo u tla ithuta sona:

• Sebetsa ka tšobotsi ea CSS keyframes
• Laola le ho phelisa likarolo tsa HTML
• Kopanya JavaScript, HTML le CSS

Репозитории GitHub с функцией поиска

Ha ho na letho le majabajaba mona - li-repositori tsa GitHub ke lenane le tlotlisitsoeng feela.
Sepheo ke ho hlahisa lipolokelo le ho lumella mosebedisi ho li sefa. Sebelisa semmuso GitHub API ho fumana polokelo bakeng sa mosebelisi e mong le e mong.

Leqephe la boemo ba GitHub - github.com/indreklasn

Seo u tla ithuta sona:

• Fumana lintlha ho tsoa ho API
• Bontša data ho tsoa ho API
• Sefa 'me u bontše lintlha tse nepahetseng bakeng sa patlisiso ka 'ngoe
• Ka boikhethelo: Haeba u batla phephetso, sebelisa API v4, e hahiloeng ho sebelisoa GraphQL. Haeba u batla ho ithuta GraphQL, e-ea ho e 'ngoe ea lingoloa tsa ka tse fetileng.

Чаты в стиле Reddit

Meqoqo ke mokhoa o tsebahalang oa puisano ka lebaka la ho ba bonolo le tšebeliso ea ona habonolo. Empa ha e le hantle ke eng e hlohlelletsang mecha ea puisano ea morao-rao ea puisano? WebSockets!

Seo u tla ithuta sona:

• Sebelisa li-WebSockets, puisano ea nako ea sebele le lisebelisoa tsa data
• Sebetsa ka maemo a phihlello ea basebelisi (mohlala, mong'a mocha oa meqoqo o na le karolo admin, le ba bang ka kamoreng - user)
• Ts'ebetso le ho netefatsa liforomo - hopola, fensetere ea puisano ea ho romella molaetsa ke input
• Theha 'me u kene lipuisanong tse fapaneng
• Sebetsa ka melaetsa ea hau. Basebelisi ba ka qoqa le basebelisi ba bang ka lekunutu. Ha e le hantle, u tla be u theha khokahano ea WebSocket lipakeng tsa basebelisi ba babeli.

Навигация в стиле Stripe

Se etsang hore navigation ena e be e ikhethang ke hore setshelo sa popover se fetoha hore se lekane litaba. Ho na le bokhabane ba phetoho ena ha bo bapisoa le boits'oaro ba setso ba ho bula le ho koala popover e ncha.

Seo u tla ithuta sona:

• Kopanya litšoantšo tsa CSS le liphetoho
• Fokotsa litaba 'me u sebelise sehlopha se sebetsang ho ntho e phaphametseng

Pacman

Iketsetse mofuta oa hau oa Pacman. Ona ke mokhoa o motle oa ho fumana mohopolo oa hore na lipapali li ntlafatsoa joang le ho utloisisa metheo. Sebelisa sebopeho sa JavaScript, React kapa Vue.

U tla ithuta:

• Kamoo likarolo li tsamaeang kateng
• Mokhoa oa ho tseba hore na ke linotlolo life tseo u lokelang ho li tobetsa
• Mokhoa oa ho tseba nako ea ho thulana
• U ka ea hole le ho eketsa taolo ea motsamao oa moea

U tla fumana mohlala oa morero ona polokelong GitHub

taolo ya mosebedisi

Morero polokelong GitHub

Ho theha sesebelisoa sa mofuta oa CRUD bakeng sa tsamaiso ea basebelisi ho tla u ruta metheo ea nts'etsopele. Sena se bohlokoa haholo ho baetsi ba bacha.

U tla ithuta:

• routing ke eng
• Mokhoa oa ho sebetsana le liforomo tsa ho kenya data le ho hlahloba hore na mosebelisi o kentse eng
• Mokhoa oa ho sebetsa le database - theha, bala, ntlafatsa le ho hlakola liketso

Проверка погоды в вашем местоположении

Morero polokelong GitHub

Haeba u batla ho etsa lits'ebetso, qala ka sesebelisoa sa boemo ba leholimo. Morero ona o ka phethoa ka Swift.

Ntle le ho fumana boiphihlelo ba ho aha kopo, o tla ithuta:

• Mokhoa oa ho sebetsa le API
• Mokhoa oa ho sebelisa geolocation
• Etsa hore sesebelisoa sa hau se sebetse haholoanyane ka ho kenya mongolo. Ho eona, basebelisi ba tla khona ho kenya sebaka sa bona ho hlahloba boemo ba leholimo sebakeng se itseng.

U tla hloka API. Ho fumana lintlha tsa boemo ba leholimo, sebelisa OpenWeather API. Lintlha tse ling mabapi le OpenWeather API mona.

Окно чата

Fensetere ea ka ea moqoqo e sebetsa, e bulehile ka har'a li-tab tse peli tsa sebatli

Ho theha fensetere ea puisano ke mokhoa o phethahetseng oa ho qala ka li-sockets. Khetho ea tekheniki stack e kholo. Ka mohlala, Node.js e nepahetse.

U tla ithuta hore na li-sockets li sebetsa joang le ho li kenya ts'ebetsong. Ena ke molemo o moholo oa morero ona.

Haeba u moqapi oa Laravel ea batlang ho sebetsa ka li-sockets, bala ea ka sengoloa

GitLab CI

Mohloli

Haeba u sa tsoa qala ho kopanya (CI), bapala le GitLab CI. Beha libaka tse 'maloa' me u leke ho etsa liteko tse 'maloa. Ha se morero o boima haholo, empa kea kholoa u tla ithuta ho hongata ho eona. Lihlopha tse ngata tsa nts'etsopele li se li sebelisa CI. Ho tseba ho e sebelisa ho molemo.

U tla ithuta:

• GitLab CI ke eng
• Mokhoa oa ho lokisa .gitlab-ci.ymle bolellang mosebelisi oa GitLab hore na a etse eng
• Mokhoa oa ho tsamaisa libakeng tse ling

Анализатор сайтов

Etsa scraper e hlahlobang semantics ea liwebsaete le ho theha litekanyetso tsa tsona. Ka mohlala, u ka sheba li-tag tsa alt tse sieo litšoantšong. Kapa sheba hore na leqephe le na le li-tag tsa SEO. Scraper e ka etsoa ntle le sebopeho sa mosebedisi.

U tla ithuta:

• scraper e sebetsa joang?
• Mokhoa oa ho theha likhetho tsa DOM
• Mokhoa oa ho ngola algorithm
• Haeba u sa batle ho emisa moo, theha sebopeho sa mosebelisi. U ka boela ua etsa tlaleho sebakeng se seng le se seng sa marang-rang seo u se hlahlobang.

Определение настроений в социальных сетях

Mohloli

Ho lemoha maikutlo mecheng ea litaba tsa sechaba ke mokhoa o motle oa ho tsebahatsa ho ithuta ka mochini.

U ka qala ka ho hlahloba marang-rang a le mong feela a etsang metsoalle. Motho e mong le e mong hangata o qala ka Twitter.

Haeba u se u ntse u e-na le boiphihlelo ka ho ithuta ka mochini, leka ho bokella lintlha ho tsoa marang-rang a fapaneng a sechaba le ho a kopanya.

U tla ithuta:

• Ho ithuta ka mochini ke eng

Клон Trello

Trello clone e tsoang ho Indrek Lasn.

Seo u tla ithuta sona:

• Tlhophiso ea litsela tsa ho sebetsana le likopo (Routing).
• Hula o dihele.
• Mokhoa oa ho theha lintho tse ncha (liboto, manane, likarete).
• Ho sebetsa le ho hlahloba lintlha tse kentsoeng.
• Ho tloha lehlakoreng la bareki: mokhoa oa ho sebelisa polokelo ea lehae, mokhoa oa ho boloka data ho polokelo ea lehae, mokhoa oa ho bala data ho tsoa polokelong ea lehae.
• Ho tloha lehlakoreng la seva: mokhoa oa ho sebelisa li-database, mokhoa oa ho boloka data ho database, mokhoa oa ho bala data ho tswa ho database.

Mona ke mohlala oa polokelo, e entsoeng ka React+Redux.

Панель админа

Sebaka sa polokelo ea Github.

Sesebelisoa se bonolo sa CRUD, se loketseng ho ithuta metheo. Ha re ithuteng:

• Theha basebelisi, laola basebelisi.
• Kopana le database - theha, bala, hlophisa, hlakola basebelisi.
• Ho netefatsa tlhahiso le ho sebetsa ka liforomo.

Трекер криптовалют (нативное мобильное приложение)

Sebaka sa polokelo ea Github.

Eng kapa eng: Swift, Objective-C, React Native, Java, Kotlin.

Ha re ithuteng:

• Kamoo likopo tsa tlhaho li sebetsang kateng.
• Mokhoa oa ho khutlisa data ho tsoa ho API.
• Kamoo meralo ea maqephe a tlhaho e sebetsang kateng.
• Mokhoa oa ho sebetsa le li-simulators tsa mehala.

Leka API ena. Haeba u fumana ho hong ho molemo, ngola litlhalosong.

Haeba u thahasella, ke ena thuto ke ena.

Настроить собственный конфиг webpack с нуля

Ha e le hantle, sena ha se ts'ebeliso, empa ke mosebetsi o molemo haholo ho utloisisa hore na webpack e sebetsa joang ho tsoa kahare. Hona joale e ke ke ea e-ba "lebokose le letšo", empa e le sesebelisoa se utloisisoang.

Litlhokahalo:

• Kopanya es7 ho ea ho es5 (lintho tsa motheo).
• Kopanya jsx ho isa ho js - kapa - .vue ho .js (o tla tlameha ho ithuta lisebelisoa)
• Beha li-server tsa webpack dev le ho kenya mochine o chesang bocha. (vue-cli le create-react-app ka bobeli)
• Sebelisa Heroku, now.sh kapa Github, ithute ho tsamaisa merero ea webpack.
• Iketsetse preprocessor eo u e ratang haholo ho bokella css - scss, less, stylus.
• Ithute ho sebelisa litšoantšo le li-svgs ka webpack.

Ena ke mohloli o tsotehang bakeng sa ba qalang ka ho feletseng.

Клон Hackernews

Jedi e 'ngoe le e' ngoe e hlokeha ho iketsetsa Hackernews.

Seo u tla ithuta sona tseleng:

• Mokhoa oa ho sebelisana le hackernews API.
• Mokhoa oa ho theha sesebelisoa sa leqephe le le leng.
• Mokhoa oa ho kenya tšebetsong likarolo tse joalo ka ho shebella maikutlo, maikutlo a motho ka mong, liprofaele.
• Tlhophiso ea litsela tsa ho sebetsana le likopo (Routing).

Тудушечка

TodoMVC.

Ka botebo? Tudushka? Ho na le likete tsa tsona. Empa nkholoe, ho na le lebaka la botumo bona.
Sesebelisoa sa Tudu ke mokhoa o motle oa ho etsa bonnete ba hore o utloisisa lintlha tsa motheo. Leka ho ngola kopo e le 'ngoe ho vanilla Javascript le e' ngoe ka har'a moralo oo u o ratang haholo.

Ithute:

• Etsa mesebetsi e mecha.
• Hlahloba hore na masimo a tlatsitsoe.
• Sefa mesebetsi (e phethiloe, e sebetsa, kaofela). Sebelisa filter и reduce.
• Utloisisa metheo ea Javascript.

Сортируемый drag and drop список

Sebaka sa polokelo ea Github.

E thusa haholo ho utloisisa hula o dihele api.

Ha re ithuteng:

• Hula o tlohele API
• Theha li-UI tse ngata

Клон мессенджера (нативное приложение)

U tla utloisisa hore na lits'ebetso tsa webo le lits'ebetso tsa matsoalloa li sebetsa joang, e leng se tla u khetholla ho boima bo bohlooho.

Seo re tla ithuta sona:

• Li-sockets tsa Marang-rang (melaetsa ea hang-hang)
• Kamoo likopo tsa tlhaho li sebetsang kateng.
• Li-templates li sebetsa joang lits'ebetsong tsa tlhaho.
• Ho hlophisa litsela tsa ho sebetsana le likopo lits'ebetsong tsa matsoalloa.

Sengoloa sa mongolo

Sepheo sa mohlophisi oa mongolo ke ho fokotsa boikitlaetso ba basebelisi ba lekang ho fetolela sebopeho sa bona hore e be letšoao le nepahetseng la HTML. Mohlophisi o motle oa mongolo o lumella basebelisi ho fomata mongolo ka mekhoa e fapaneng.

Ka nako e 'ngoe, e mong le e mong o sebelisitse mohlophisi oa mongolo. Joale hobaneng ho se joalo ipope ka bowena?

Клон Reddit

Reddit ke pokello ea litaba tsa sechaba, lintlha tsa marang-rang le sebaka sa lipuisano.

Reddit e nka boholo ba nako ea ka, empa ke ntse ke tsoela pele ho e qeta. Ho theha Reddit clone ke mokhoa o sebetsang oa ho ithuta mananeo (ha u ntse u bala Reddit ka nako e le 'ngoe).

Reddit e u fa chelete e ngata haholo API. Se ke oa tlohela likarolo leha e le life kapa ua etsa lintho ka tšohanyetso. Lefatšeng la 'nete le bareki le bareki, u ke ke ua sebetsa ka mokhoa o sa reroang, kapa u tla lahleheloa ke mosebetsi kapele.

Bareki ba bohlale ba tla hlokomela hang-hang hore mosebetsi o etsoa hampe mme o tla fumana motho e mong.

Reddit API

Публикация пакета NPM с открытым исходным кодом

Haeba u ngola Javascript khoutu, ho ka etsahala hore ebe u sebelisa molaoli oa sephutheloana. Motsamaisi oa liphutheloana o u lumella ho sebelisa khoutu e teng hape eo batho ba bang ba e ngotseng le ho e phatlalatsa.

Ho utloisisa potoloho e felletseng ea sephutheloana ho tla fana ka boiphihlelo bo botle haholo. Ho na le lintho tse ngata tseo u hlokang ho li tseba ha u hatisa khoutu. U hloka ho nahana ka ts'ireletso, phetolelo ea semantic, scalability, likopano tsa mabitso le tlhokomelo.

Pakete e ka ba eng kapa eng. Haeba ha u na mohopolo, iketsetse Lodash ea hau 'me u e phatlalatse.

Lodash: lodash.com

Ho ba le seo u se entseng inthaneteng ho u beha 10% ho feta ba bang. Lisebelisoa tse ling tsa bohlokoa ke tsena mabapi le mehloli e bulehileng le liphutheloana.

Учебный план freeCodeCamp

Lenane la thuto la FCC

FreeCodecamp e bokelletse tse ngata lenaneo le akaretsang thupelo.

freeCodeCamp ke mokhatlo o sa etseng phaello. E na le sethala sa ho ithuta se thehiloeng marang-rang, sebaka sa marang-rang sa sechaba sa marang-rang, likamore tsa moqoqo, lingoliloeng tse mahareng, le mekhatlo ea lehae e ikemiselitseng ho etsa hore ntlafatso ea webo ea ho ithuta e fihle ho bohle.

U tla be u tšoaneleha ho feta mosebetsi oa hau oa pele haeba u khona ho qeta thupelo eohle.

Создайте HTTP-сервер с нуля

Protocol ea HTTP ke e 'ngoe ea li-protocol tsa mantlha tseo litaba li tsamaeang ka tsona Marang-rang. Li-server tsa HTTP li sebelisetsoa ho fana ka litaba tse tsitsitseng tse kang HTML, CSS, le JS.

Ho khona ho kenya tšebetsong protocol ea HTTP ho tloha qalong ho tla eketsa tsebo ea hau ea hore na lintho li sebelisana joang.

Ka mohlala, haeba u sebelisa NodeJs, joale ua tseba hore Express e fana ka seva sa HTTP.

Bakeng sa litšupiso, bona hore na u ka khona:

• Beha seva ntle le ho sebelisa lilaebrari leha e le life
• Seva e tlameha ho fana ka litaba tsa HTML, CSS le JS.
• Ho kenya ts'ebetsong router ho tloha qalong
• Lekola liphetoho 'me u ntlafatse seva

Haeba u sa tsebe lebaka, sebelisa Tsamaea 'me u leke ho theha seva sa HTTP Caddy ho tloha qalong.

Десктопное приложение для заметок

Kaofela re ngola lintlha, na ha ho joalo?

Ha re theheng app ea lintlha. Sesebelisoa se hloka ho boloka lintlha le ho li hokahanya le database. Theha sesebelisoa sa lehae u sebelisa Electron, Swift, kapa eng kapa eng eo u e ratang le e sebetsang bakeng sa sistimi ea hau.

Ikutloe u lokolohile ho kopanya sena le phephetso ea pele (text editor).

Joalo ka bonase, leka ho hokahanya mofuta oa komporo ea hau le mofuta oa webo.

Подкасты (клон Overcast)

Ke mang ea sa mameleng li-podcasts?

Theha sesebelisoa sa Marang-rang se nang le ts'ebetso e latelang:

• Theha ak'haonte
• Batla li-Podcasts
• Reita 'me u ingolise ho li-podcasts
• Ema 'me u bapale, fetola lebelo, mesebetsi ea pele le morao bakeng sa metsotsoana e 30.

Leka ho sebelisa iTunes API e le ntlha ea ho qala. Haeba u tseba lisebelisoa tse ling, ka kopo, beha maikutlo.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Ho nka skrine

Lumela! Ke etsa filimi skrineng ea ka hona joale!

Theha komporo ea hau kapa sesebelisoa sa webo se u lumellang ho hapa skrineng sa hau le ho boloka sekotwana joalo ka .gif

mona malebela a mangmokhoa oa ho fihlela sena.

Mohloli

• Liprojeke tse ling tse 5 tse sebete tsa koetliso bakeng sa moqapi (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• Merero e 9 ea ho ntlafatsa tsebo ea hau ea Front-End
• Mesebetsi e tšeletseng bakeng sa moqapi oa Front-End
• Boikoetliso bo monate bakeng sa moqapi
• 8 merero ea thuto
• Lenane le leng la merero eo u ka itloaetsang ho eona

Source: www.habr.com