Pem hauv ntej-kawg dojo: tej yaam num los cob qhia kev txawj ntse (5 tshiab + 43 qub)

1. Клон Notion

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

www.notion.so

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

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

Tsab ntawv tau muab txhais nrog kev txhawb nqa ntawm EDISON Software, uas разрабатывает приложения и сайтыThiab invests nyob rau hauv startups.

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МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Lawm: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Nco ntsoov: no GitHub example repository.

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

Txheej

www.reddit.com/r/layer

Txheej yog ib lub zej zog uas txhua leej txhua tus tuaj yeem kos ib pixel ntawm qhov sib koom "board". Thawj lub tswv yim tau yug los ntawm Reddit. Lub zej zog r/Layer yog ib qho piv txwv rau kev sib koom ua tswv yim, uas txhua tus tuaj yeem yog tus tsim thiab pab txhawb rau ib qho laj thawj.

Koj yuav kawm dab tsi thaum tsim koj tus kheej Layer project:

• Yuav ua li cas JavaScript canvas ua haujlwm Paub txog kev ua haujlwm ntawm canvas yog ib qho txuj ci tseem ceeb hauv ntau daim ntawv thov.
• Yuav ua li cas tswj cov neeg siv kev tso cai. Txhua tus neeg siv tuaj yeem kos ib pixel txhua 15 feeb yam tsis tas yuav nkag mus.
• Tsim cov ncuav qab zib ntu.

Squoosh

squoosh.app

Squoosh yog daim ntawv thov compression duab nrog ntau yam kev xaiv.

GIF duab 20 MB

Los ntawm kev tsim koj tus kheej version ntawm Squoosh koj yuav kawm:

• Yuav ua li cas nrog cov duab loj
• Kawm cov hauv paus ntawm Drag'n'Drop API
• Nkag siab li cas API thiab cov neeg mloog kev tshwm sim ua haujlwm
• Yuav ua li cas upload thiab export cov ntaub ntawv

Nco ntsoov: Cov duab compressor yog hauv zos. Nws tsis tas yuav xa cov ntaub ntawv ntxiv rau lub server. Koj tuaj yeem muaj lub compressor hauv tsev, lossis koj tuaj yeem siv nws ntawm lub server, koj xaiv.

Tshuab xam zauv

Los ntawm? Tiag tiag? Tshuab xam zauv? Yog, raws nraim, lub laij lej. Nkag siab txog cov hauv paus ntawm kev ua lej thiab lawv ua haujlwm ua ke li cas yog qhov kev txawj ntse tseem ceeb rau kev ua kom yooj yim rau koj daim ntawv thov. Tsis ntev los sis tom qab koj yuav tau nrog cov lej thiab sai dua qhov zoo dua.

jarodburchill.github.io/CalculatorReactApp

Los ntawm kev tsim koj tus kheej lub laij lej koj yuav kawm:

• Ua haujlwm nrog cov lej thiab lej
• Xyaum nrog cov xwm txheej mloog API
• Yuav ua li cas npaj cov ntsiab lus, nkag siab cov qauv

Crawler (Tshawb nrhiav cav)

Txhua tus tau siv lub tshuab tshawb nrhiav, yog li vim li cas ho tsis tsim koj tus kheej? Crawlers yuav tsum tau tshawb nrhiav cov ntaub ntawv. Txhua tus neeg siv lawv txhua hnub thiab qhov kev thov rau cov cuab yeej no thiab cov kws tshaj lij tsuas yog yuav loj hlob raws sijhawm.

Google search engine

Dab tsi koj yuav kawm los ntawm kev tsim koj tus kheej tshawb nrhiav cav:

• Yuav ua li cas crawlers ua haujlwm
• Yuav ua li cas txhawm rau txheeb xyuas qhov chaw thiab yuav ua li cas rau lawv los ntawm kev ntaus nqi thiab lub koob npe nrov
• Yuav ua li cas khaws cov chaw indexed hauv cov ntaub ntawv thiab yuav ua li cas ua haujlwm nrog cov ntaub ntawv

Music player (Spotify, Apple Music)

Txhua tus mloog nkauj - nws tsuas yog ib feem tseem ceeb ntawm peb lub neej. Cia peb tsim cov suab paj nruag kom nkag siab zoo dua li cas cov cuab yeej yooj yim ntawm lub suab paj nruag niaj hnub streaming platform ua haujlwm.

Spotify

Koj yuav kawm dab tsi los ntawm kev tsim koj tus kheej suab paj nruag streaming platform:

• Yuav ua li cas ua haujlwm nrog API. siv API los ntawm Spotify lossis Apple Music
• Yuav ua li cas ua si, ncua lossis rov qab mus rau qhov txuas ntxiv / yav dhau los
• Yuav hloov ntim li cas
• Yuav ua li cas tswj cov neeg siv routing thiab browser keeb kwm

Movie nrhiav app siv React (nrog hooks)

Thawj qhov koj tuaj yeem pib nrog yog tsim cov yeeb yaj kiab tshawb nrhiav app siv React. Hauv qab no yog ib daim duab ntawm daim ntawv thov zaum kawg yuav zoo li cas:

Koj yuav kawm dab tsi
Los ntawm kev tsim cov app no, koj yuav txhim kho koj cov kev txawj React los ntawm kev siv Hooks API tshiab. Qhov kev ua piv txwv siv React Cheebtsam, ntau hooks, ib qho API sab nraud, thiab tau kawg qee qhov CSS styling.

Tech pawg thiab nta

• Teb nrog hooks
• tsim-nti-app
• Jsx
• CSS

Tsis siv cov chav kawm, cov haujlwm no muab koj lub ntsiab lus nkag mus rau hauv React ua haujlwm tau zoo thiab yuav pab tau koj hauv 2020. koj nrhiav tau piv txwv qhov project ntawm no. Ua raws li cov lus qhia lossis ua rau koj tus kheej.

Tham App nrog Vue

Lwm qhov haujlwm zoo rau koj ua yog tsim kom muaj kev sib tham app siv kuv lub tsev qiv ntawv JavaScript nyiam: VueJS. Daim ntawv thov yuav zoo li no:

Koj yuav kawm dab tsi
Hauv qhov kev qhia no, koj yuav kawm paub yuav ua li cas thiaj li ua tau Vue app los ntawm kos - tsim cov khoom, tuav lub xeev, tsim txoj hauv kev, txuas rau cov kev pabcuam thib peb, thiab txawm tias tuav kev lees paub.

Tech pawg thiab nta

• Vue
• vuex ua
• Vue Router
• Vue CLI
• Poom
• CSS

Nov yog ib txoj haujlwm zoo heev los pib nrog Vue lossis txhim kho koj cov txuj ci uas twb muaj lawm kom nkag mus rau hauv kev txhim kho xyoo 2020. koj nrhiav tau kev qhia ntawm no.

Huab cua zoo nkauj nrog Angular 8

Qhov piv txwv no yuav pab koj tsim cov huab cua zoo nkauj siv Angular 8:

Koj yuav kawm dab tsi
Qhov project no yuav qhia koj cov txuj ci tseem ceeb hauv kev tsim cov ntawv thov los ntawm kos - los ntawm kev tsim los ntawm kev txhim kho, txhua txoj hauv kev mus rau kev xa tawm-npaj daim ntawv thov.

Tech pawg thiab nta

• Lub kaum ntse ntse 8
• Firebase
• Server sab rendering
• CSS nrog Grid thiab Flexbox
• Mobile tus phooj ywg thiab adaptability
• Tsaus hom
• Zoo nkauj interface

Qhov kuv nyiam tshaj plaws txog qhov project tag nrho yog qhov uas koj tsis kawm txog kev nyob ib leeg. Hloov chaw, koj kawm tag nrho cov txheej txheem kev txhim kho, los ntawm kev tsim qauv mus rau kev xa mus zaum kawg.

To-Do daim ntawv thov siv Svelte

Svelte zoo li tus menyuam yaus tshiab ntawm kev tiv thaiv raws li txoj hauv kev - tsawg kawg zoo ib yam li React, Vue thiab Angular. Thiab qhov no yog ib qho ntawm cov khoom kub kub tshaj plaws rau xyoo 2020.

To-Do apps tsis tas yuav yog lub ntsiab lus kub tshaj plaws, tab sis nws yuav pab koj ua kom koj cov txuj ci Svelte tiag tiag. Nws yuav zoo li no:

Koj yuav kawm dab tsi
Qhov kev qhia no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov siv Svelte 3, txij thaum pib mus rau tag. Koj yuav siv cov khoom sib txuas, styling, thiab cov neeg tuav kev tshwm sim

Tech pawg thiab nta

• Svelte 3
• Cheebtsam
• Styling nrog CSS
• ES 6 syntax

Tsis muaj ntau qhov haujlwm zoo Svelte pib, yog li kuv pom qhov no yog ib qho kev xaiv zoo pib nrog.

E-commerce app siv Next.js

Next.js yog lub moj khaum nrov tshaj plaws rau kev tsim cov ntawv thov React uas txhawb nqa server-sab rendering tawm ntawm lub thawv.

Qhov project no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov kev lag luam e-lag luam uas zoo li no:

Koj yuav kawm dab tsi
Hauv qhov project no, koj yuav kawm paub yuav ua li cas los txhim kho nrog Next.js—tsim cov nplooj ntawv tshiab thiab cov khoom xyaw, rho tawm cov ntaub ntawv, thiab cov qauv thiab siv daim ntawv thov Tom ntej.

Tech pawg thiab nta

• Tom ntej no.js
• Cheebtsam thiab nplooj ntawv
• Cov ntaub ntawv sampling
• Stylization
• Kev xa tawm qhov project
• SSR thiab SPA

Nws yog ib txwm zoo kom muaj qhov piv txwv tiag tiag xws li e-lag luam app kom kawm tau yam tshiab. Koj ua tau nrhiav qhov kev qhia ntawm no.

Tag nrho-fledged multilingual blog nrog Nuxt.js

Nuxt.js yog rau Vue, dab tsi Next.js yog rau React: lub ntsiab lus zoo rau kev sib txuas lub zog ntawm server-sab rendering thiab ib nplooj ntawv thov
Daim ntawv thov zaum kawg koj tuaj yeem tsim yuav zoo li no:

Koj yuav kawm dab tsi

Hauv qhov qauv piv txwv no, koj yuav kawm paub yuav ua li cas los tsim lub vev xaib ua tiav siv Nuxt.js, los ntawm kev teeb tsa thawj zaug mus rau qhov kawg xa tawm.

Nws siv sijhawm ntau ntawm cov yam ntxwv txias uas Nuxt yuav tsum muaj, xws li nplooj ntawv thiab cov khoom siv, thiab styling nrog SCSS.

Tech pawg thiab nta

• Nuxt.js
• Cheebtsam thiab nplooj ntawv
• Storyblock module
• Hagfish
• Vuex rau lub xeev tswj
• SCSS rau styling
• Nuxt middlewares

Qhov no yog ib qhov project txias heev, uas suav nrog ntau yam zoo Nuxt.js nta. Kuv tus kheej nyiam ua haujlwm nrog Nuxt yog li koj yuav tsum muab nws sim ua nws tseem yuav ua rau koj ua tus tsim Vue zoo.

Blog nrog Gatsby

Gatsby yog lub tshuab hluav taws xob zoo li qub uas siv React thiab GraphQL. Nov yog qhov tshwm sim ntawm qhov project:

Koj yuav kawm dab tsi

Hauv qhov kev qhia no, koj yuav kawm paub siv Gatsby los tsim blog uas koj yuav siv los sau koj tus kheej cov ntawv siv React thiab GraphQL.

Tech pawg thiab nta

• gatsby
• React
• GraphQL
• Plugins thiab cov ntsiab lus
• MDX/Markdown
• Bootstrap CSS
• Qauv

Yog tias koj tau xav pib blog, qhov no yog ib qho piv txwv zoo ntawm yuav ua li cas kom nws siv React thiab GraphQL.

Kuv tsis tau hais tias WordPress yog qhov kev xaiv tsis zoo, tab sis nrog Gatsby koj tuaj yeem tsim cov vev xaib ua haujlwm siab siv React - uas yog kev sib xyaw ua ke zoo heev.

Blog nrog Gridsome

Gridsome rau Vue... Okay, peb twb muaj qhov no nrog Next/Nuxt.
Tab sis tib yam muaj tseeb rau Gridsome thiab Gatsby. Ob leeg siv GraphQL ua lawv cov ntaub ntawv txheej, tab sis Gridsome siv VueJS. Qhov no kuj yog ib qho amazing site generator uas yuav pab tau koj tsim cov blogs zoo:

Koj yuav kawm dab tsi

Qhov project no yuav qhia koj yuav ua li cas los tsim ib qho blog yooj yim los pib nrog Gridsome, GraphQL thiab Markdown. Nws tseem hais txog yuav ua li cas xa daim ntawv thov los ntawm Netlify.

Tech pawg thiab nta

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Qhov no yeej tsis yog qhov kev qhia dav dav tshaj plaws, tab sis nws npog cov ntsiab lus tseem ceeb ntawm Gridsome thiab Markdown tej zaum yuav yog qhov pib zoo.

SoundCloud zoo li lub suab player siv Quasar

Quasar yog lwm Vue lub moj khaum uas tuaj yeem siv los tsim cov ntawv thov mobile. Hauv qhov project no koj yuav tsim ib daim ntawv thov audio player, piv txwv li:

Koj yuav kawm dab tsi

Thaum lwm cov haujlwm tsom mus rau cov ntawv thov hauv web, qhov no yuav qhia koj yuav ua li cas los tsim ib daim ntawv thov mobile siv Vue thiab Quasar moj khaum.
Koj yuav tsum tau muaj Cordova khiav nrog Android Studio / Xcode teeb tsa. Yog tias tsis yog, phau ntawv qhia muaj qhov txuas mus rau Quasar lub vev xaib uas lawv qhia koj yuav teeb tsa txhua yam.

Tech pawg thiab nta

• quasar
• Vue
• Cordova
• WaveSurfer
• UI Cheebtsam

Qhov project me, ua qauv qhia Quasar lub peev xwm los tsim cov ntawv thov mobile.

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

Daim npav rho nyiaj txias zoo nrog kev sib tw thiab kev lom zem micro-kev cuam tshuam. Xws li tus lej formatting, txheeb xyuas thiab tsis siv neeg daim npav hom nrhiav pom. Nws yog tsim rau ntawm Vue.js thiab kuj yog tag nrho cov teb. (Koj tuaj yeem pom no.)

daim credit-card-form

Koj yuav kawm dab tsi:

• Txheej txheem thiab validate cov ntawv
• Kov cov xwm txheej (piv txwv li, thaum hloov pauv)
• Nkag siab yuav ua li cas tso saib thiab tso cov ntsiab lus ntawm nplooj ntawv, tshwj xeeb tshaj yog cov ntaub ntawv credit card uas tshwm rau saum daim ntawv

Bar teeb

Ib tug histogram yog ib daim duab los yog daim duab uas sawv cev rau cov ntaub ntawv categorical nrog cov kab plaub hau nrog qhov siab lossis qhov ntev proportional rau qhov tseem ceeb uas lawv sawv cev.

Lawv tuaj yeem siv vertically lossis horizontally. Ib daim ntawv qhia kab ntsug yog qee zaum hu ua kab ntawv.

Koj yuav kawm dab tsi:

• Tso cov ntaub ntawv raws li kev tsim qauv thiab nkag siab
• Tsis tas li ntawd: Kawm paub siv lub ntsiab canvas thiab yuav ua li cas kos cov ntsiab lus nrog nws

nws yog koj tuaj yeem nrhiav cov ntaub ntawv pej xeem hauv ntiaj teb. Lawv raug txheeb raws xyoo.

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

Rov qab rau xyoo 2016, Twitter tau tshaj tawm cov yeeb yaj kiab zoo kawg nkaus rau nws cov tweets. Raws li ntawm 2019, nws tseem zoo li ib feem, yog li vim li cas ho tsis tsim koj tus kheej?

Koj yuav kawm dab tsi:

• Ua haujlwm nrog CSS tus cwj pwm keyframes
• Manipulate thiab animate HTML ntsiab
• Ua ke JavaScript, HTML thiab CSS

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

Tsis muaj ib yam dab tsi zoo nkauj ntawm no - GitHub cov chaw khaws cia tsuas yog cov npe muaj koob meej.
Lub hom phiaj yog los tso saib cov chaw khaws cia thiab tso cai rau tus neeg siv lim lawv. Siv official GitHub API kom tau txais repositories rau txhua tus neeg siv.

GitHub profile nplooj ntawv - github.com/indreklasn

Koj yuav kawm dab tsi:

• Tau txais cov ntaub ntawv los ntawm API
• Tso cov ntaub ntawv los ntawm API
• Lim thiab qhia cov ntaub ntawv cuam tshuam rau txhua qhov kev tshawb nrhiav
• Yeem: Yog tias koj muaj kev sib tw, siv API v4, tsim siv GraphQL. Yog tias koj xav kawm GraphQL, mus rau ib qho ntawm kuv cov tshooj dhau los.

Чаты в стиле Reddit

Kev sib tham yog txoj kev sib txuas lus nrov vim lawv qhov yooj yim thiab yooj yim ntawm kev siv. Tab sis dab tsi tiag tiag fuels niaj hnub sib tham chav? WebSockets!

Koj yuav kawm dab tsi:

• Siv WebSockets, kev sib txuas lus ntawm lub sijhawm thiab cov ntaub ntawv hloov tshiab
• Ua haujlwm nrog cov neeg siv qib nkag (piv txwv li, tus tswv ntawm kev sib tham channel muaj lub luag haujlwm admin, thiab lwm yam hauv chav - user)
• Txheej txheem thiab siv tau cov ntaub ntawv - nco ntsoov, lub qhov rais sib tham rau xa lus yog input
• Tsim thiab koom nrog sib tham sib txawv
• Ua hauj lwm nrog tus kheej cov lus. Cov neeg siv tuaj yeem tham nrog lwm tus neeg siv ntiag tug. Qhov tseem ceeb, koj yuav tsim kom muaj WebSocket kev sib txuas ntawm ob tus neeg siv.

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

Dab tsi ua rau qhov kev taw qhia no tshwj xeeb yog tias lub thawv popover hloov pauv kom haum rau cov ntsiab lus. Muaj ib qho elegance rau qhov kev hloov pauv no piv rau kev coj cwj pwm ntawm kev qhib thiab kaw lub popover tshiab.

Koj yuav kawm dab tsi:

• Ua ke CSS animations nrog kev hloov pauv
• Dim cov ntsiab lus thiab siv cov chav kawm nquag mus rau cov khoom ntab

Pacman

Tsim koj tus kheej version ntawm Pacman. Qhov no yog ib txoj hauv kev zoo kom tau txais lub tswv yim ntawm yuav ua li cas kev ua si tsim thiab nkag siab txog cov hauv paus. Siv lub moj khaum JavaScript, React lossis Vue.

Koj yuav kawm:

• Cov khoom txav li cas
• Yuav ua li cas txiav txim siab uas yuav tsum nias
• Yuav ua li cas los txiav txim lub caij sib tsoo
• Koj tuaj yeem mus ntxiv thiab ntxiv kev tswj hwm dab

Koj yuav pom ib qho piv txwv ntawm qhov project no nyob rau hauv lub repository GitHub

kev tswj tus neeg siv

Qhov project nyob rau hauv lub repository GitHub

Tsim ib daim ntawv thov CRUD rau cov neeg siv kev tswj hwm yuav qhia koj cov hauv paus ntawm kev txhim kho. Qhov no yog qhov tshwj xeeb tshaj yog rau cov neeg tsim khoom tshiab.

Koj yuav kawm:

• Dab tsi yog routing
• Yuav ua li cas tswj cov ntaub ntawv nkag thiab xyuas seb tus neeg siv tau nkag li cas
• Yuav ua li cas ua haujlwm nrog cov ntaub ntawv - tsim, nyeem, hloov kho thiab tshem tawm cov haujlwm

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

Qhov project nyob rau hauv lub repository GitHub

Yog tias koj xav tsim cov apps, pib nrog huab cua app. Qhov project no tuaj yeem ua tiav siv Swift.

Ntxiv nrog rau kev tau txais kev paub tsim daim ntawv thov, koj yuav kawm:

• Yuav ua li cas ua haujlwm nrog API
• Yuav siv geolocation li cas
• Ua kom koj daim ntawv thov muaj zog dua los ntawm kev ntxiv cov ntawv sau. Hauv nws, cov neeg siv yuav tuaj yeem nkag mus rau lawv qhov chaw los xyuas huab cua hauv ib qho chaw tshwj xeeb.

Koj yuav xav tau API. Kom tau txais cov ntaub ntawv huab cua, siv OpenWeather API. Xav paub ntau ntxiv txog OpenWeather API no.

Окно чата

Kuv lub qhov rais sib tham hauv kev nqis tes ua, qhib hauv ob lub browser tabs

Tsim lub qhov rais sib tham yog txoj hauv kev zoo tshaj plaws los pib nrog cov sockets. Qhov kev xaiv ntawm tech stack yog loj. Node.js, piv txwv li, zoo tag nrho.

Koj yuav kawm seb cov qhov (socket) ua haujlwm li cas thiab yuav siv lawv li cas. Qhov no yog lub ntsiab kom zoo dua ntawm qhov project no.

Yog tias koj yog tus tsim tawm Laravel uas xav ua haujlwm nrog cov khoom siv, nyeem kuv tsab xov xwm

GitLab CI

Tau qhov twg los

Yog tias koj tshiab rau kev koom ua ke txuas ntxiv (CI), ua si nrog GitLab CI. Teeb tsa ob peb qhov chaw thiab sim ua ob peb qhov kev xeem. Nws tsis yog qhov project nyuaj heev, tab sis kuv paub tseeb tias koj yuav kawm ntau yam los ntawm nws. Ntau pab pawg txhim kho tam sim no siv CI. Paub txog kev siv nws yog qhov muaj txiaj ntsig.

Koj yuav kawm:

• GitLab CI yog dab tsi
• Yuav ua li cas rau configure .gitlab-ci.ymluas qhia tus neeg siv GitLab yuav ua li cas
• Yuav ua li cas xa mus rau lwm qhov chaw

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

Ua tus scraper uas txheeb xyuas cov ntsiab lus ntawm cov vev xaib thiab tsim lawv cov qhab nia. Piv txwv li, koj tuaj yeem tshawb xyuas cov cim npe uas ploj lawm hauv cov duab. Los yog xyuas seb nplooj ntawv puas muaj SEO meta tags. Lub scraper tuaj yeem tsim tsis muaj tus neeg siv interface.

Koj yuav kawm:

• scraper ua haujlwm li cas?
• Yuav ua li cas los tsim DOM selectors
• Yuav sau ib qho algorithm li cas
• Yog tias koj tsis xav nres qhov ntawd, tsim ib tus neeg siv interface. Koj tuaj yeem tsim ib daim ntawv tshaj tawm ntawm txhua lub vev xaib koj tshawb xyuas.

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

Tau qhov twg los

Kev paub txog kev xav ntawm kev sib raug zoo yog ib txoj hauv kev zoo los qhia txog kev kawm tshuab.

Koj tuaj yeem pib los ntawm kev txheeb xyuas ib qho kev sib tham xwb. Txhua tus feem ntau pib nrog Twitter.

Yog tias koj twb muaj kev paub txog kev kawm tshuab, sim sau cov ntaub ntawv los ntawm kev sib tham sib txawv thiab sib txuas ua ke.

Koj yuav kawm:

• Machine Learning yog dab tsi

Клон Trello

Trello clone los ntawm Indrek Lasn.

Koj yuav kawm dab tsi:

• Lub koom haum ntawm kev thov ua cov txheej txheem (Routing).
• Luag thiab poob.
• Yuav ua li cas los tsim cov khoom tshiab (boards, lists, cards).
• Ua thiab xyuas cov ntaub ntawv nkag.
• Los ntawm cov neeg siv khoom: yuav ua li cas siv cov chaw khaws cia hauv zos, yuav ua li cas khaws cov ntaub ntawv mus rau hauv zos cia, yuav ua li cas nyeem cov ntaub ntawv los ntawm cov chaw khaws cia hauv zos.
• Los ntawm lub server sab: yuav ua li cas siv databases, yuav ua li cas txuag cov ntaub ntawv hauv database, yuav ua li cas nyeem cov ntaub ntawv los ntawm cov ntaub ntawv.

Ntawm no yog ib qho piv txwv ntawm lub chaw cia khoom, ua hauv React + Redux.

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

Github Repository.

Daim ntawv thov CRUD yooj yim, zoo tagnrho rau kev kawm cov hauv paus. Cia peb kawm:

• Tsim cov neeg siv, tswj cov neeg siv.
• Sib tham nrog cov database - tsim, nyeem, kho, tshem tawm cov neeg siv.
• Kev lees paub cov tswv yim thiab ua haujlwm nrog cov ntawv.

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

Github repository.

Txhua yam: Swift, Objective-C, React Native, Java, Kotlin.

Cia peb kawm:

• Yuav ua li cas haiv neeg siv ua haujlwm.
• Yuav ua li cas muab cov ntaub ntawv los ntawm API.
• Yuav ua li cas cov paj layouts ua haujlwm.
• Yuav ua li cas ua haujlwm nrog mobile simulators.

Sim qhov API no. Yog tias koj pom ib yam dab tsi zoo dua, sau rau hauv cov lus.

Yog tias koj txaus siab, ntawm no yog ntawm no yog ib qho kev qhia.

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

Technically, qhov no tsis yog daim ntawv thov, tab sis nws yog ib txoj haujlwm tseem ceeb kom nkag siab tias lub webpack ua haujlwm li cas los ntawm sab hauv. Tam sim no nws yuav tsis yog "lub thawv dub", tab sis yog cov cuab yeej nkag siab.

Yuav tsum muaj:

• Compile es7 rau es5 (basics).
• Sau jsx rau js - lossis - .vue rau .js (koj yuav tsum kawm loaders)
• Teem webpack dev server thiab kub module reloading. (vue-cli thiab tsim-react-app siv ob qho tib si)
• Siv Heroku, now.sh lossis Github, kawm paub siv cov phiaj xwm webpack.
• Teeb tsa koj nyiam preprocessor los sau css - scss, tsawg, stylus.
• Kawm paub siv cov duab thiab svgs nrog webpack.

Qhov no yog ib qho amazing kev pab rau tag nrho beginners.

Клон Hackernews

Txhua Jedi yuav tsum ua nws tus kheej Hackernews.

Koj yuav kawm dab tsi ntawm txoj kev:

• Yuav ua li cas cuam tshuam nrog hackernews API.
• Yuav ua li cas los tsim ib daim ntawv thov nplooj ntawv.
• Yuav ua li cas siv cov yam ntxwv xws li saib cov lus pom, tus kheej cov lus pom, profiles.
• Lub koom haum ntawm kev thov ua cov txheej txheem (Routing).

Тудушечка

TodoMVC.

Tiag tiag? Tudushka? Muaj ntau txhiab leej. Tab sis ntseeg kuv, muaj ib qho laj thawj rau qhov kev nyiam no.
Lub Tudu app yog ib txoj hauv kev zoo kom paub tseeb tias koj nkag siab cov hauv paus. Sim sau ib daim ntawv thov hauv vanilla Javascript thiab ib qho hauv koj lub moj khaum uas koj nyiam.

Kawm:

• Tsim cov haujlwm tshiab.
• Xyuas tias cov teb tau sau rau hauv.
• Lim cov haujlwm (ua tiav, ua haujlwm, tag nrho). Siv filter и reduce.
• Nkag siab lub hauv paus ntawm Javascript.

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

Github repository.

Pab tau zoo heev kom nkag siab luag thiab poob api.

Cia peb kawm:

• Luag thiab poob API
• Tsim cov UI nplua nuj

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

Koj yuav nkag siab tias ob daim ntawv thov web thiab cov ntawv thov ib txwm ua haujlwm li cas, uas yuav ua rau koj sib nrug ntawm qhov grey loj.

Peb yuav kawm dab tsi:

• Web sockets (instant messages)
• Yuav ua li cas haiv neeg siv ua haujlwm.
• Yuav ua li cas templates ua hauj lwm nyob rau hauv haiv neeg daim ntaub ntawv.
• Kev teeb tsa kev thov ua cov txheej txheem hauv cov ntawv thov ib txwm muaj.

Cov ntawv nyeem

Lub hom phiaj ntawm cov ntawv nyeem yog los txo cov kev siv zog ntawm cov neeg siv sim hloov lawv cov formatting rau hauv HTML markup siv tau. Cov ntawv nyeem zoo tso cai rau cov neeg siv los tsim cov ntawv hauv ntau txoj kev.

Qee lub sij hawm, txhua tus tau siv cov ntawv nyeem. Yog li vim li cas ho tsis tsim koj tus kheej?

Клон Reddit

Reddit yog kev sib tham xov xwm sib sau ua ke, cov ntsiab lus hauv lub vev xaib thiab qhov chaw sib tham.

Reddit siv sijhawm ntau ntawm kuv lub sijhawm, tab sis kuv txuas ntxiv mus rau nws. Tsim Reddit clone yog ib txoj hauv kev zoo los kawm txog kev ua haujlwm (thaum saib Reddit tib lub sijhawm).

Reddit muab koj nrog kev nplua nuj heev API. Tsis txhob tso tseg tej yam ntxwv los yog ua tej yam haphazardly. Hauv lub ntiaj teb tiag tiag nrog cov neeg siv khoom thiab cov neeg siv khoom, koj tuaj yeem ua haujlwm tsis zoo, lossis koj yuav poob haujlwm sai.

Cov neeg siv khoom ntse yuav paub tam sim ntawd tias txoj haujlwm tau ua tsis zoo thiab yuav nrhiav lwm tus.

Reddit API

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

Yog tias koj sau Javascript code, muaj feem yuav yog koj siv tus thawj tswj pob. Tus neeg saib xyuas pob tso cai rau koj rov siv cov lej uas twb muaj lawm uas lwm tus neeg tau sau thiab luam tawm.

Nkag siab txog tag nrho txoj kev loj hlob ntawm ib pob yuav muab kev paub zoo heev. Muaj ntau yam uas koj yuav tsum paub thaum tshaj tawm cov cai. Koj yuav tsum xav txog kev ruaj ntseg, semantic versioning, scalability, naming conventions thiab txij nkawm.

Lub pob tuaj yeem yog dab tsi. Yog tias koj tsis muaj lub tswv yim, tsim koj tus kheej Lodash thiab tshaj tawm nws.

Lodash: lodash.com

Muaj qee yam koj tau ua hauv online ua rau koj 10% siab dua lwm tus. Nov yog qee qhov kev pabcuam muaj txiaj ntsig hais txog qhib qhov chaw thiab pob khoom.

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

FCC cov ntaub ntawv kawm

freeCodecamp tau sau ntau heev kawm tiav programming.

freeCodeCamp yog ib lub koom haum tsis muaj txiaj ntsig. Nws muaj kev sib tham sib tham hauv web-based kev kawm platform, lub rooj sib tham hauv zej zog hauv online, chav sib tham, Cov ntawv tshaj tawm, thiab cov koom haum hauv zos uas npaj siab yuav ua kom txoj kev kawm hauv lub vev xaib nkag mus tau rau txhua tus.

Koj yuav muaj ntau tshaj qhov tsim nyog rau koj thawj txoj haujlwm yog tias koj tswj kom ua tiav tag nrho cov chav kawm.

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

HTTP raws tu qauv yog ib qho ntawm cov txheej txheem tseem ceeb uas cov ntsiab lus mus hauv Is Taws Nem. HTTP servers yog siv los ua haujlwm zoo li qub xws li HTML, CSS, thiab JS.

Muaj peev xwm siv HTTP raws tu qauv los ntawm kos yuav nthuav koj txoj kev paub txog kev sib cuam tshuam li cas.

Piv txwv li, yog tias koj siv NodeJs, ces koj paub tias Express muab HTTP server.

Rau kev siv, saib seb koj puas tuaj yeem:

• Teem lub server yam tsis siv cov tsev qiv ntawv
• Lub server yuav tsum ua haujlwm rau HTML, CSS thiab JS cov ntsiab lus.
• Siv lub router los ntawm kos
• Saib xyuas kev hloov pauv thiab hloov kho lub server

Yog tias koj tsis paub yog vim li cas, siv Ua lang thiab sim tsim HTTP server Caddy los ntawm kos.

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

Peb txhua tus sau ntawv, puas yog?

Wb tsim ib daim ntawv app. Daim ntawv thov yuav tsum khaws cov ntawv thiab synchronize lawv nrog cov ntaub ntawv. Tsim ib haiv neeg app siv Electron, Swift, lossis txhua yam koj nyiam thiab ua haujlwm li cas rau koj lub cev.

Xav tias dawb los ua ke qhov no nrog thawj qhov kev sib tw (cov ntawv nyeem).

Raws li ib qho ntxiv, sim syncing koj lub desktop version nrog lub vev xaib version.

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

Leej twg tsis mloog podcasts?

Tsim ib daim ntawv thov web nrog cov haujlwm hauv qab no:

• Tsim ib tus account
• Nrhiav Podcasts
• Rate thiab sau npe rau podcasts
• Nres thiab ua si, hloov ceev, ua haujlwm rau pem hauv ntej thiab rov qab rau 30 vib nas this.

Sim siv iTunes API ua qhov pib. Yog tias koj paub txog lwm yam kev pabcuam, thov tso rau hauv cov lus pom.

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

Screen capture

Nyob zoo! Kuv tab tom thaij kuv qhov screen tam sim no!

Tsim ib lub desktop lossis web app uas tso cai rau koj los ntes koj lub vijtsam thiab txuag cov clip li .gif

no qee cov lus qhiayuav ua li cas thiaj ua tau qhov no.

Cov chaw

• 5 ntau qhov kev cob qhia txaus ntshai rau tus tsim tawm ( Txheej, Squoosh, Tshuab xam zauv, Lub Vev Xaib Crawler, Music Player)
• 9 txoj haujlwm los txhawb koj cov kev txawj Front-End
• Rau txoj haujlwm rau Front-End tus tsim tawm
• Kev lom zem ua si rau tus tsim tawm
• 8 txoj haujlwm kev kawm
• Lwm daim ntawv teev cov phiaj xwm los xyaum ua

Tau qhov twg los: www.hab.com