1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Atụgharịrị akụkọ a site na nkwado nke EDISON Software, nke Na .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Daashi: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Cheta na: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Daashi: Если вам интересно, я недавно написал на криптовалюту с React Native.
Cheta na: ebe a .
Подборка проектов из предыдущих публикаций.
Layer
Layer bụ obodo ebe onye ọ bụla nwere ike ise pikselụ na "osisi" ekekọrịtara. A mụrụ echiche mbụ na Reddit. Obodo r/Layer bụ ihe atụ maka imepụta ihe na-ekekọrịta, na onye ọ bụla nwere ike ịbụ onye okike ma tinye aka n'otu ihe.
Ihe ị ga-amụta mgbe ị na-eke ọrụ Layer nke gị:
- Otu kwaaji Javascript si arụ ọrụ Ịmara ka esi arụ kwaaji bụ nka dị oke egwu n'ọtụtụ ngwa.
- Otu esi ahazi ikike onye ọrụ. Onye ọrụ ọ bụla nwere ike ise otu pikselụ kwa nkeji iri na ise na-enweghị ịbanye.
- Mepụta oge kuki.
Squoosh
Squoosh bụ ngwa mkpakọ onyonyo nwere ọtụtụ nhọrọ dị elu.
GIF 20 MB
Site na imepụta ụdị Squoosh nke gị, ị ga-amụta:
- Otu esi arụ ọrụ na nha onyonyo
- Mụta ihe ndabere nke Drag'n'Drop API
- Ghọta ka API na ndị na-ege ihe omume si arụ ọrụ
- Otu esi ebugo na mbupụ faịlụ
Cheta na: Ihe nchikota onyonyo bụ mpaghara. Ọ dịghị mkpa izipu data agbakwunyere na sava ahụ. Ị nwere ike ịnwe compressor n'ụlọ, ma ọ bụ ị nwere ike iji ya na ihe nkesa, nhọrọ gị.
Calculator
Bịanụ? N'ezie? Ihe mgbako? Ee, kpọmkwem, ihe mgbako. Ịghọta isi ihe gbasara mgbakọ na mwepụ yana otu ha si arụkọ ọrụ ọnụ bụ nka dị oke mkpa maka ime ka ngwa gị dị mfe. N'oge na-adịghị, ị ga-enwe ike imeri ọnụọgụgụ na ngwa ngwa ka mma.
Site na ịmepụta mgbako gị, ị ga-amụta:
- Na-arụ ọrụ na nọmba na mgbakọ na mwepụ
- Jiri API ndị na-ege ihe omume mee omume
- Otu esi ahazi ihe, ghọta ụdị
Crawler (Njin nchọ)
Onye ọ bụla ejirila igwe nchọta ihe, yabụ gịnị kpatara na ị naghị emepụta nke gị? A na-achọ ndị crawler iji chọọ ozi. Onye ọ bụla na-eji ha kwa ụbọchị na ọchịchọ maka nkà na ụzụ a na ndị ọkachamara ga-eto eto ka oge na-aga.
Igwe nchọta Google
Ihe ị ga-amụta site na ịmepụta igwe nchọta nke gị:
- Ka ndị crawlers si arụ ọrụ
- Otu esi edepụta saịtị na otu esi edo ha ọkwa site na ọkwa na aha ọma
- Otu esi echekwa saịtị indexed na nchekwa data yana otu esi arụ ọrụ na nchekwa data
Ihe ọkpụkpọ egwu (Spotify, Apple Music)
Onye ọ bụla na-ege egwu - ọ bụ naanị akụkụ dị mkpa nke ndụ anyị. Ka anyị mepụta ihe ọkpụkpọ egwu ka anyị ghọta nke ọma ka usoro nrụzi nke igwe egwu ọgbara ọhụrụ si arụ ọrụ.
Spotify
Ihe ị ga-amụta site na ịmepụta ikpo okwu nkwanye egwu nke gị:
- Otu esi arụ ọrụ na API. jiri API sitere na Spotify ma ọ bụ Apple Music
- Otu esi egwu egwu, kwụsịtụ ma ọ bụ tụgharịa gaa na egwu ọzọ/buburu
- Otu esi agbanwe olu
- Otu esi ejikwa ụzọ onye ọrụ na akụkọ ihe nchọgharị
Ngwa ọchụchọ ihe nkiri na-eji React (nwere nko)
Ihe mbụ ị nwere ike ịmalite bụ iji React mepụta ngwa nchọ ihe nkiri. N'okpuru bụ onyonyo nke ngwa ikpeazụ ga-adị ka:
Kedu ihe ị ga -amụta
Site n'ịme ngwa a, ị ga-emeziwanye nka React gị site na iji API Hooks ọhụrụ. Ihe atụ a na-eji akụrụngwa React, ọtụtụ nko, API mpụga, yana ụfọdụ ụdị CSS.
Teknụzụ tojupụtara na atụmatụ
- Jiri nko meghachi omume
- kee-eme-ngwa
- JSX
- CSS
Na-ejighị klaasị ọ bụla, ọrụ ndị a na-enye gị ebe ntinye zuru oke na React na-arụ ọrụ na ọ ga-enyere gị aka na 2020. ị nwere ike ịchọta . Soro ntuziaka ma ọ bụ mee ya nke gị.
Kpaa ngwa na Vue
Ihe ọzọ dị mma ị ga-eme bụ ịmepụta ngwa nkata site na iji ọba akwụkwọ Javascript kacha amasị m: VueJS. Ngwa ga-adị ka nke a:
Kedu ihe ị ga -amụta
N'ime nkuzi a, ị ga-amụta otu esi eme ngwa Vue site na ọkọ - imepụta akụrụngwa, njikwa steeti, imepụta ụzọ, ijikọ na ọrụ ndị ọzọ na ọbụna njikwa nyocha.
Teknụzụ tojupụtara na atụmatụ
- Anya
- vuex
- Vue Router
- Ebe CLI
- Pusher
- CSS
Nke a bụ nnukwu ọrụ iji malite Vue ma ọ bụ kwalite nkà gị dị ugbu a iji nweta mmepe na 2020. ị nwere ike ịchọta .
Ngwa ihu igwe mara mma nwere Angular 8
Ihe atụ a ga-enyere gị aka ịmepụta ngwa ihu igwe mara mma site na iji Angular 8:
Kedu ihe ị ga -amụta
Ọrụ a ga-akụziri gị nkà bara uru n'ịrụ ngwa site na ọkọ - site na imewe site na mmepe, ruo na ngwa ntinye-njikere.
Teknụzụ tojupụtara na atụmatụ
- Ihe ngosi 8
- Firebase
- Ntụgharị akụkụ nkesa
- CSS nwere Grid na Flexbox
- Ekwentị enyi na enyi na ime mgbanwe
- Ọnọdụ gbara ọchịchịrị
- Mara mma interface
Ihe na-amasị m n'ezie maka ọrụ a na-agbakọta ọnụ bụ na ị naghị amụ ihe naanị. Kama, ị na-amụta usoro mmepe niile, site na imewe ruo n'ịkwanye ikpeazụ.
Ngwa ime-eji Svelte
Svelte dị ka nwa ọhụrụ ahụ na usoro dabere na akụrụngwa - opekata mpe yiri React, Vue na Angular. Ma nke a bụ otu n'ime ngwaahịa ọhụrụ kacha ewu ewu maka 2020.
Ngwa ime eme abụghị isiokwu kacha ewu ewu, mana ọ ga-enyere gị aka ịkwalite nka Svelte gị. Ọ ga-adị ka nke a:
Kedu ihe ị ga -amụta
Nkuzi a ga-egosi gị otu esi emepụta ngwa site na iji Svelte 3, site na mmalite ruo n'isi. Ị ga-eji akụrụngwa, styling, na ndị njikwa mmemme
Teknụzụ tojupụtara na atụmatụ
- Svelte 3
- Akụkụ
- styling na CSS
- ES6 syntax
Enweghị ọtụtụ ezigbo ọrụ mmalite Svelte, yabụ ahụrụ m .
Ngwa e-azụmahịa na-eji Next.js
Next.js bụ usoro kachasị ewu ewu maka iwulite ngwa React na-akwado ịmegharị akụkụ nkesa na igbe ahụ.
Ọrụ a ga-egosi gị otu esi emepụta ngwa e-commerce dị ka nke a:
Kedu ihe ị ga -amụta
N'ime oru ngo a, ị ga-amụta ka esi emepe na Next.js-mepụta ibe na akụrụngwa ọhụrụ, wepụta data, na ụdị wee tinye ngwa ọzọ.
Teknụzụ tojupụtara na atụmatụ
- Ọzọ.js
- Ngwa na ibe
- Nlele data
- Nhazi
- Nbunye oru ngo
- SSR na SPA
Ọ na-adị mma mgbe niile ịnwe ihe atụ n'ezie dị ka ngwa e-azụmahịa iji mụta ihe ọhụrụ. Ị nwere ike .
Blọọgụ ọtụtụ asụsụ nwere Nuxt.js zuru oke
Nuxt.js bụ maka Vue, ihe Next.js bụ maka React: nnukwu usoro maka ijikọta ike nke nsụgharị-akụkụ ihe nkesa na ngwa otu ibe.
Ngwa ikpeazụ ị nwere ike ịmepụta ga-adị ka nke a:
Kedu ihe ị ga -amụta
N'ime ọrụ nlele a, ị ga-amụta otu esi emepụta webụsaịtị zuru oke site na iji Nuxt.js, site na nhazi mbụ ruo n'ebunye ikpeazụ.
Ọ na-erite uru n'ọtụtụ njiri mara mma nke Nuxt ga-enye, dị ka ibe na akụrụngwa, yana ịke ya na SCSS.
Teknụzụ tojupụtara na atụmatụ
- Nuxt.js
- Ngwa na ibe
- Modul ngọngọ akụkọ
- Azụ azụ
- Vuex maka njikwa steeti
- SCSS maka ịke
- Nuxt middlewares
, nke gụnyere ọtụtụ nnukwu Nuxt.js atụmatụ. Enwere m mmasị n'ịrụ ọrụ na Nuxt n'ihi na ị ga-anwale ya ka ọ ga-emekwa ka ị bụrụ nnukwu onye mmepụta Vue.
Blọọgụ na Gatsby
Gatsby bụ ezigbo onye nrụpụta saịtị static site na iji React na GraphQL. Nke a bụ nsonaazụ nke ọrụ a:
Kedu ihe ị ga -amụta
N'ime nkuzi a, ị ga-amụta ka esi eji Gatsby mepụta blọgụ nke ị ga-eji dee akụkọ nke gị site na iji React na GraphQL.
Teknụzụ tojupụtara na atụmatụ
- gatsby
- Emeghachi
- GraphQL
- Ngwa mgbakwunye na gburugburu
- MDX/Markdown
- Bootstrap CSS
- Ndebiri
Ọ bụrụ na ịchọrọ ịmalite blọgụ, maka otu esi eme ya site na iji React na GraphQL.
Anaghị m ekwu na WordPress bụ nhọrọ na-adịghị mma, mana na Gatsby ị nwere ike wulite weebụsaịtị na-arụ ọrụ dị elu site na iji React - nke bụ ngwakọta dị ịtụnanya.
Blọọgụ na Gridsome
Gridsome maka Vue... Ọ dị mma, anyị enweelarị nke a na Next/Nuxt.
Mana otu ahụ ka ọ dịkwa maka Gridsome na Gatsby. Ha abụọ na-eji GraphQL dị ka oyi akwa data ha, mana Gridsome na-eji VueJS. Nke a bụkwa ihe dị ịtụnanya na-emepụta saịtị static ga-enyere gị aka ịmepụta blọọgụ dị ukwuu:
Kedu ihe ị ga -amụta
Ihe oru ngo a ga-akuziri gi ka esi emepụta blọọgụ dị mfe iji malite Gridsome, GraphQL na Markdown. Ọ na-ekpuchikwa otu esi etinye ngwa site na Netlify.
Teknụzụ tojupụtara na atụmatụ
- Gridsome
- Anya
- GraphQL
- Markdown
- Netify
N'ezie, nke a abụghị nkuzi kachasị oke, mana ọ na-ekpuchi isi echiche nke Gridsome na .
Ihe ọkpụkpọ ụda dị ka SoundCloud na-eji Quasar
Quasar bụ usoro Vue ọzọ enwere ike iji mepụta ngwa mkpanaka. N'ime oru ngo a, ị ga-emepụta ngwa ọkpụkpọ ọdịyo, dịka ọmụmaatụ:
Kedu ihe ị ga -amụta
Ebe ọrụ ndị ọzọ na-elekwasị anya na ngwa weebụ, nke a ga-egosi gị otu esi emepụta ngwa mkpanaaka site na iji Vue na Quasar framework.
Ịkwesịrị inweworị Cordova na-agba ọsọ na gam akporo Studio/Xcode ahazi. Ọ bụrụ na ọ bụghị, akwụkwọ ntuziaka nwere njikọ na webụsaịtị Quasar ebe ha na-egosi gị otu esi edozi ihe niile.
Teknụzụ tojupụtara na atụmatụ
- quasar
- Anya
- Cordova
- WaveSurfer
- Ngwa UI
, na-egosipụta ike Quasar maka ịmepụta ngwa mkpanaaka.
Форма кредитной карты
Ụdị kaadị kredit dị mma nke nwere obere mmekọrịta na-atọ ụtọ. Na-agụnye nhazi nọmba, nkwenye na nchọpụta ụdị kaadị akpaka. Ewuru ya na Vue.js ma na-anabatakwa ya nke ọma. (Ị nwere ike ịhụ .)
Ihe ị ga-amụta:
- Hazie ma kwado ụdịdị
- Jikwaa mmemme (dịka ọmụmaatụ, mgbe mpaghara gbanwere)
- Ghọta ka esi egosipụta na idowe ihe ndị dị na ibe ahụ, ọkachasị ozi kaadị kredit nke pụtara n'elu ụdị ahụ
mmanya eserese
Histogram bụ eserese ma ọ bụ eserese nke na-anọchi anya data categorical nwere ogwe akụkụ anọ nwere ogo ma ọ bụ ogologo ya na ụkpụrụ ha na-anọchi anya ya.
Enwere ike itinye ha na kwụ ọtọ ma ọ bụ kehoraizin. A na-akpọ chaatị mmanya kwụ ọtọ mgbe ụfọdụ eserese ahịrị.
Ihe ị ga-amụta:
- Gosipụta data n'ụzọ ahaziri na nghọta
- Na mgbakwunye: Mụta ka esi eji mmewere
canvasna otu esi adọta ihe na ya
ị nwere ike ịhụ data ọnụọgụgụ ụwa. A na-ahazi ha site n'afọ.
Анимация сердечка Twitter
Laa azụ na 2016, Twitter webatara ihe nkiri a dị ịtụnanya maka tweet ya. Dị ka nke 2019, ọ ka na-ele anya akụkụ ahụ, yabụ gịnị kpatara na ị gaghị ekepụta onwe gị?
Ihe ị ga-amụta:
- Na-arụ ọrụ na àgwà CSS
keyframes - Megharịa ma megharịa ihe HTML
- Jikọta JavaScript, HTML na CSS
Репозитории GitHub с функцией поиска
Ọ nweghị ihe mara mma ebe a — ebe nchekwa GitHub bụ naanị ndepụta ebube.
Ebumnuche bụ igosipụta ebe nchekwa ma kwe ka onye ọrụ nyochaa ha. Jiri iji nweta ebe nchekwa maka onye ọrụ ọ bụla.
GitHub profaịlụ ibe -
Ihe ị ga-amụta:
- Nweta data sitere na API
- Gosipụta data sitere na API
- Wepụta ma gosi data dabara adaba maka nchọ ọ bụla
- Nhọrọ: Ọ bụrụ na ị nwere ihe ịma aka, jiri , wuru site na iji GraphQL. .
Чаты в стиле Reddit
Mkparịta ụka bụ ụzọ nzikọrịta ozi na-ewu ewu n'ihi ịdị mfe na ịdị mfe iji ya. Ma gịnị n'ezie na-eme ka ebe a na-akparịta ụka n'Intanet na-akpali akpali? WebSockets!
Ihe ị ga-amụta:
- Jiri WebSockets, nzikọrịta ozi na mmelite data ozugbo
- Na-arụ ọrụ na ọkwa ịnweta onye ọrụ (dịka ọmụmaatụ, onye nwe ọwa nkata nwere ọrụ ya
admin, na ndị ọzọ nọ n'ime ụlọ -user) - Usoro ma kwado ụdị - cheta, windo nkata maka izipu ozi bụ
input - Mepụta ma sonye nkata dị iche iche
- Jiri ozi nkeonwe rụọ ọrụ. Ndị ọrụ nwere ike soro ndị ọrụ ndị ọzọ kparịta ụka na nzuzo. N'ikpeazụ, ị ga-emebe njikọ WebSocket n'etiti ndị ọrụ abụọ.
Навигация в стиле Stripe
Ihe na-eme njem njem a pụrụ iche bụ na akpa popover na-agbanwe ka ọ dabara na ọdịnaya. Enwere mma na mgbanwe a ma e jiri ya tụnyere omume ọdịnala nke imeghe na imechi popover ọhụrụ.
Ihe ị ga-amụta:
- Jikọta ihe nkiri CSS na mgbanwe
- Mebie ọdịnaya ma tinye klaasị na-arụ ọrụ na mmewere sere n'elu
Pacman
Mepụta ụdị Pacman nke gị. Nke a bụ ụzọ dị mma iji nweta echiche nke otu esi emepụta egwuregwu ma ghọta ihe ndị bụ isi. Jiri Javascript kpuchie, React ma ọ bụ Vue.
Ị ga -amụta:
- Kedu ka ihe na-esi aga
- Otu esi achọpụta igodo ị ga-pịa
- Otu esi achọpụta oge nkukota
- Ị nwere ike ịga n'ihu ma tinye njikwa mmegharị mmụọ
Ị ga-ahụ ihe atụ nke ọrụ a GitHub
njikwa ọrụ
Ọrụ ahụ GitHub
Ịmepụta ngwa ụdị CRUD maka nchịkwa onye ọrụ ga-akụziri gị ihe ndabere nke mmepe. Nke a bara uru karịsịa maka ndị mmepe ọhụrụ.
Ị ga -amụta:
- Gịnị bụ routing
- Otu esi ejikwa ụdị ntinye data wee lelee ihe onye ọrụ abanyela
- Otu esi arụ ọrụ na nchekwa data - mepụta, gụọ, melite ma hichapụ omume
Проверка погоды в вашем местоположении
Ọrụ ahụ GitHub
Ọ bụrụ na ịchọrọ ịmepụta ngwa, malite na ngwa ihu igwe. Enwere ike mezue ọrụ a site na iji Swift.
Na mgbakwunye na inweta ahụmịhe iwulite ngwa, ị ga-amụta:
- Otu esi arụ ọrụ na API
- Otu esi eji geolocation
- Mee ngwa gị ka ọ dị ike site na ịgbakwunye ndenye ederede. N'ime ya, ndị ọrụ ga-enwe ike ịbanye ebe ha na-elele ihu igwe n'otu ebe.
Ị ga-achọ API. Iji nweta data ihu igwe, jiri OpenWeather API. Ozi ndị ọzọ gbasara OpenWeather API.
Окно чата
Window nkata m na-arụ ọrụ, mepee na taabụ nchọgharị abụọ
Ịmepụta windo nkata bụ ụzọ zuru oke iji malite na oghere. Nhọrọ nke nchịkọta teknụzụ buru ibu. Node.js, ọmụmaatụ, zuru oke.
Ị ga-amụta otú sockets si arụ ọrụ na otu esi eme ya. Nke a bụ isi uru nke ọrụ a.
Ọ bụrụ na ị bụ onye nrụpụta Laravel chọrọ ịrụ ọrụ na sọket, gụọ nke m
GitLab CI
Ọ bụrụ na ị dị ọhụrụ na ntinye aka na-aga n'ihu (CI), soro GitLab CI gwuo egwu. Hazie gburugburu ole na ole wee gbalịa mee ule ole na ole. Ọ bụghị ọrụ siri ike, mana ejiri m n'aka na ị ga-amụta ọtụtụ ihe na ya. Ọtụtụ ndị otu mmepe na-eji CI ugbu a. Ịmara ka esi eji ya bara uru.
Ị ga -amụta:
- Kedu ihe bụ GitLab CI
- Otu esi ahazi
.gitlab-ci.ymlnke na-agwa onye ọrụ GitLab ihe ọ ga-eme - Otu esi ebuga na gburugburu ndị ọzọ
Анализатор сайтов
Mee scraper nke na-enyocha semantics nke weebụsaịtị wee mepụta ọkwa ha. Dịka ọmụmaatụ, ịnwere ike ịlele mkpado alt na-efu na onyonyo. Ma ọ bụ lelee ma ibe ahụ nwere mkpado meta SEO. Enwere ike ịmepụta scraper na-enweghị onye ọrụ.
Ị ga -amụta:
- Kedu ka scraper si arụ ọrụ?
- Otu esi emepụta ndị na-ahọrọ DOM
- Otu esi ede algọridim
- Ọ bụrụ na ịchọghị ịkwụsị ebe ahụ, mepụta interface onye ọrụ. Ị nwekwara ike ịmepụta akụkọ na webụsaịtị ọ bụla ị na-elele.
Определение настроений в социальных сетях
Nchọpụta mmetụta na mgbasa ozi ọha bụ ụzọ dị mma isi webata na mmụta igwe.
Ị nwere ike ịmalite site na nyochaa naanị otu netwọk mmekọrịta. Onye ọ bụla na-amalitekarị na Twitter.
Ọ bụrụ na ị nweela ahụmahụ na mmụta igwe, gbalịa ịnakọta data sitere na netwọk mmekọrịta dị iche iche wee jikọta ha.
Ị ga -amụta:
- Gịnị bụ igwe mmụta
Клон Trello
Ihe ị ga-amụta:
- Usoro ụzọ nhazi arịrịọ (Routing).
- Dọrọ na dobe.
- Otu esi emepụta ihe ọhụrụ (boọdụ, ndepụta, kaadị).
- Na-ahazi na ịlele data ntinye.
- Site n'akụkụ ndị ahịa: otu esi eji nchekwa mpaghara, otu esi echekwa data na nchekwa mpaghara, otu esi agụ data sitere na nchekwa mpaghara.
- Site na akụkụ nkesa: otu esi eji ọdụ data, otu esi echekwa data na nchekwa data, otu esi agụ data sitere na nchekwa data.
, emere na React+Redux.
Панель админа
Ngwa CRUD dị mfe, dị mma maka ịmụta ihe ndị bụ isi. Ka anyị mụta:
- Mepụta ndị ọrụ, jikwaa ndị ọrụ.
- Mmekọrịta na nchekwa data - mepụta, gụọ, dezie, hichapụ ndị ọrụ.
- Na-akwado ntinye na ịrụ ọrụ na ụdị.
Трекер криптовалют (нативное мобильное приложение)
Ihe ọ bụla: Swift, Objective-C, React Native, Java, Kotlin.
Ka anyị mụọ:
- Ka ngwa ala si arụ ọrụ.
- Otu esi eweghachi data na API.
- Kedu ka nhazi ibe nke ala si arụ ọrụ.
- Otu esi arụ ọrụ na igwe simulators.
. Ọ bụrụ na ịchọta ihe ka mma, dee na nkọwa.
Ọ bụrụ na ị nwere mmasị, ebe a .
Настроить собственный конфиг webpack с нуля
Teknụzụ, nke a abụghị ngwa, mana ọ bụ ọrụ bara ezigbo uru ịghọta ka webpack si arụ ọrụ n'ime. Ugbu a, ọ gaghị abụ "igbe ojii", kama ngwá ọrụ nwere ike ịghọta.
Ihe choro:
- Chịkọta es7 ruo es5 (isi ihe).
- Chịkọta jsx ka js - ma ọ bụ - .vue ka .js (ị ga-amụta ihe ndị na-ebu ibu)
- Hazie ihe nkesa dev akpa webụ yana nbudata modul dị ọkụ. (vue-cli na mepụta-react-app jiri ha abụọ)
- Jiri Heroku, now.sh ma ọ bụ Github, mụta ka esi ebuga ọrụ akpa weebụ.
- Hazie ihe nhazi ọkacha mmasị gị iji chịkọta css - scss, obere, stylus.
- Mụta ka esi eji ihe onyonyo na svgs na akpa webụ.
Клон Hackernews
Achọrọ Jedi ọ bụla ka ọ mepụta Hackernews nke ya.
Ihe ị ga-amụta n'ụzọ:
- Otu esi emekọrịta ihe na hackernews API.
- Otu esi emepụta ngwa ngwa otu ibe.
- Otu esi emejuputa atụmatụ dị ka nlele nlele, nkọwa onye ọ bụla, profaịlụ.
- Usoro ụzọ nhazi arịrịọ (Routing).
Тудушечка
N'ezie? Tudushka? E nwere ọtụtụ puku n'ime ha. Ma kwere m, e nwere ihe kpatara nke a ewu ewu.
Ngwa Tudu bụ ụzọ dị mma iji jide n'aka na ị ghọtara ihe ndị bụ isi. Gbalịa dee otu ngwa na vanilla Javascript na otu n'ime usoro ọkacha mmasị gị.
Mụta:
- Mepụta ọrụ ọhụrụ.
- Lelee na ejupụtara na mpaghara ahụ.
- Ọrụ nzacha (emechaala, arụ ọrụ, niile). Jiri
filterиreduce. - Ghọta ihe ndabere nke Javascript.
Сортируемый drag and drop список
Ọ na-enyere aka ịghọta .
Ka anyị mụta:
- Dọrọ na dobe API
- Mepụta UI bara ụba
Клон мессенджера (нативное приложение)
Ị ga-aghọta ka ma ngwa weebụ na ngwa ala si arụ ọrụ, nke ga-eme ka ị dị iche na isi awọ.
Ihe anyị ga-amụ:
- Sockets webụ (ozi ozugbo)
- Ka ngwa ala si arụ ọrụ.
- Otu ndebiri si arụ ọrụ na ngwa ala.
- Ịhazi ụzọ nhazi arịrịọ na ngwa ala.
Editọ ederede
Ebumnuche nke onye na-edezi ederede bụ iji belata mbọ ndị ọrụ na-agbalị ịgbanwe nhazi ha ka ọ bụrụ akara HTML dị mma. Ezigbo editọ ederede na-enye ndị ọrụ ohere ịhazi ederede n'ụzọ dị iche iche.
N'oge ụfọdụ, onye ọ bụla ejirila onye ndezi ederede. Ya mere, gịnị kpatara na ọ bụghị ?
Клон Reddit
bụ mkpokọta akụkọ ọha, ọkwa ọdịnaya webụ na saịtị mkparịta ụka.
Reddit na-ewe ọtụtụ oge m, mana m na-aga n'ihu na ya. Ịmepụta clone Reddit bụ ụzọ dị irè isi mụta mmemme (mgbe ị na-achọgharị Reddit n'otu oge).
Reddit na-enye gị nnukwu ọgaranya. Ahapụla atụmatụ ọ bụla ma ọ bụ mee ihe n'atụghị egwu. N'ime ụwa n'ezie na ndị ahịa na ndị ahịa, ị nweghị ike ịrụ ọrụ n'atụghị egwu, ma ọ bụ na ị ga-efunahụ gị ọrụ ngwa ngwa.
Ndị ahịa smart ga-achọpụta ozugbo na a na-arụ ọrụ ahụ nke ọma na ha ga-achọta onye ọzọ.
Публикация пакета NPM с открытым исходным кодом
Ọ bụrụ na ịde koodu Javascript, ọ ga-abụ na ị na-eji njikwa ngwugwu. Onye njikwa ngwugwu na-enye gị ohere iji koodu dị adị nke ndị ọzọ dere ma bipụta.
Ịghọta usoro mmepe zuru oke nke ngwugwu ga-enye ezigbo ahụmahụ. Enwere ọtụtụ ihe ị kwesịrị ịma mgbe ị na-ebipụta koodu. Ịkwesịrị iche echiche maka nchekwa, nsụgharị semantic, scalability, mgbakọ aha na nhazi.
Ihe ngwugwu nwere ike ịbụ ihe ọ bụla. Ọ bụrụ na ị nweghị echiche, mepụta Lodash nke gị wee bipụta ya.
Lodash:
Inwe ihe ị mere n'ịntanetị na-etinye gị 10% karịa ndị ọzọ. gbasara isi mmalite na ngwugwu.
Учебный план freeCodeCamp
freeCodecamp anakọtala ọtụtụ .
freeCodeCamp bụ ọgbakọ anaghị akwụ ụgwọ. Ọ mejupụtara ikpo okwu mmụta dabere na webụ na-emekọrịta ihe, ọgbakọ obodo dị n'ịntanetị, ebe a na-akparịta ụka n'Intanet, mbipụta dị obere, na ndị otu obodo na-ezube ime ka mmụta wee nweta onye ọ bụla.
Ị ga-eru eru karịa maka ọrụ mbụ gị ma ọ bụrụ na ị jisie ike mezue usoro ọmụmụ ahụ dum.
Создайте HTTP-сервер с нуля
Protocol HTTP bụ otu n'ime ụkpụrụ bụ isi nke ọdịnaya na-aga na ịntanetị. A na-eji sava HTTP eje ozi dị ka HTML, CSS, na JS.
Inwe ike mejuputa protocol HTTP site na ọkọ ga-agbasawanye ihe ọmụma gị maka otu ihe si emekọrịta.
Dịka ọmụmaatụ, ọ bụrụ na ị na-eji NodeJs, ị mara na Express na-enye sava HTTP.
Maka ntụnye aka, hụ ma ị nwere ike:
- Hazie ihe nkesa na-ejighị ụlọ akwụkwọ ọ bụla
- Ihe nkesa ahụ ga-enwerịrị HTML, CSS na JS ọdịnaya.
- Na-eme ihe rawụta site na ọkọ
- Nyochaa mgbanwe wee melite nkesa
Ọ bụrụ na ịmaghị ihe kpatara ya, jiri ma gbalịa ịmepụta ihe nkesa HTTP site na ọkọ.
Десктопное приложение для заметок
Anyị niile na-edetu ihe, ọ́ bụghị ya?
Ka anyị mepụta ngwa ndetu. Ngwa kwesịrị ịchekwa ndetu ma mekọrịta ha na nchekwa data. Jiri Electron, Swift, ma ọ bụ ihe ọ bụla masịrị gị yana ihe na-arụ ọrụ maka sistemụ gị wee wuo ngwa ala.
Enwere onwe gị ijikọ nke a na ihe ịma aka mbụ (onye na-edezi ederede).
Dị ka ego, gbalịa mekọrịta ụdị desktọpụ gị na ụdị weebụ.
Подкасты (клон Overcast)
Onye na-adịghị ege pọdkastị?
Mepụta ngwa webụ nwere ọrụ ndị a:
- Mepụta akaụntụ
- Chọọ pọdkastị
- Nweta ma denye aha na pọdkastị
- Kwụsị ma kpọọ, gbanwee ọsọ, ọrụ ihu na azụ maka sekọnd 30.
Gbalịa iji iTunes API ka mmalite. Ọ bụrụ na ị maara akụrụngwa ọ bụla ọzọ, biko biputere na nkwupụta.
Edede ihuenyo
Nnọọ! Ana m ese onyonyo m ugbu a!
Mepụta desktọpụ ma ọ bụ ngwa webụ nke na-enye gị ohere iweghara ihuenyo gị wee chekwaa obere vidiyo dị ka .gif
ebe a ka esi enweta nke a.
Isi mmalite
isi: www.habr.com