I-Dojo yangaphambili: amaphrojekthi okuqeqesha amakhono onjiniyela (ama-5 amasha + ama-43 amadala)

1. Клон Notion

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

www.notion.so

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

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

I-athikili ihunyushwe ngosekelo lwe-EDISON Software, okuyiyona разрабатывает приложения и сайтыFuthi utshala imali ekuqaleni.

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

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Qaphela: Lapha GitHub example repository.

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

Ungqimba

www.reddit.com/r/layer

Isendlalelo umphakathi lapho wonke umuntu engadweba iphikseli “ebhodini” okwabelwana ngalo. Umbono wokuqala wazalwa kuReddit. Umphakathi we-r/Layer uyisingathekiso sokusungula okwabiwe, ukuthi wonke umuntu angaba umdali futhi anikele esihlokweni esifanayo.

Ozokufunda lapho udala iphrojekthi yakho Yesendlalelo:

• Isebenza kanjani i-JavaScript canvas Ukwazi indlela yokusebenzisa ikhanvasi kuyikhono elibalulekile ezinhlelweni eziningi zokusebenza.
• Uzihlanganisa kanjani izimvume zomsebenzisi. Umsebenzisi ngamunye angadweba iphikseli eyodwa njalo ngemizuzu eyi-15 ngaphandle kokungena ngemvume.
• Dala izikhathi zamakhukhi.

Squoosh

squooosh.app

I-Squoosh uhlelo lokusebenza lokucindezela isithombe olunezinketho eziningi ezithuthukile.

I-GIF 20 MB

Ngokwenza inguqulo yakho ye-Squoosh uzofunda:

• Ungasebenza kanjani ngamasayizi wesithombe
• Funda izisekelo ze-Drag'n'Drop API
• Qonda ukuthi i-API nabalaleli bomcimbi basebenza kanjani
• Indlela yokulayisha nokuthekelisa amafayela

Qaphela: I-compressor yesithombe ingeyasendaweni. Akudingekile ukuthumela idatha eyengeziwe kuseva. Ungaba ne-compressor ekhaya, noma ungayisebenzisa kuseva, ukukhetha kwakho.

I-Calculator

Woza? Ngokujulile? Isibali? Yebo, impela, umshini wokubala. Ukuqonda izinto eziyisisekelo zokusebenza kwezibalo nokuthi zisebenza kanjani ndawonye kuyikhono elibalulekile lokwenza izinhlelo zakho zibe lula. Ngokushesha noma kamuva kuzodingeka ubhekane nezinombolo futhi ngokushesha kube ngcono.

jarodburchhill.github.io/CalculatorReactApp

Ngokwenza i-calculator yakho uzofunda:

• Sebenza ngezinombolo nokusebenza kwezibalo
• Zijwayeze nge-API yabalaleli bomcimbi
• Indlela yokuhlela izakhi, ukuqonda izitayela

I-Crawler (Injini yokusesha)

Wonke umuntu usebenzise injini yokusesha, ngakho kungani ungazidali eyakho? Iziseshi ziyadingeka ukuze useshe ulwazi. Wonke umuntu uzisebenzisa nsuku zonke futhi isidingo salobu buchwepheshe nochwepheshe sizokhula ngokuhamba kwesikhathi.

Injini yokusesha ye-Google

Ozokufunda ngokwakha injini yakho yokusesha:

• Asebenza kanjani ama-crawlers
• Indlela yokukhomba amasayithi kanye nendlela yokuwalinganisa ngokulinganisa nedumela
• Ungawagcina kanjani amasayithi anenkomba kusizindalwazi kanye nendlela yokusebenza nesizindalwazi

Isidlali somculo (Spotify, Apple Music)

Wonke umuntu ulalela umculo - uyingxenye ebalulekile yokuphila kwethu. Masidale isidlali somculo ukuze siqonde kangcono ukuthi izinsimbi eziyisisekelo zenkundla yokusakaza umculo yesimanje zisebenza kanjani.

Spotify

Ozokufunda ngokwakha eyakho inkundla yokusakaza umculo:

• Ungasebenza kanjani nge-API. sebenzisa i-API evela ku-Spotify noma i-Apple Music
• Idlalwa kanjani, misa isikhashana noma hlehlisela emuva kuthrekhi elandelayo/yangaphambilini
• Ungashintsha kanjani ivolumu
• Uwuphatha kanjani umzila womsebenzisi kanye nomlando wesiphequluli

Приложение для поиска фильмов с помощью React (с хуками)

Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:

Yini ozoyifunda
Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.

Технический стек и фичи

• React с hook’ами
• Dala-uhlelo lokusebenza
• JSX
• CSS

Без использования каких-либо классов, эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году. Вы можете найти пример проекта здесь. Следуйте инструкциям или сделайте все на собственный вкус.

Приложение чата с помощью Vue

Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:

Yini ozoyifunda
Из этого руководства вы узнаете, как сделать приложение Vue с нуля — создавать компоненты, обрабатывать состояния, создавать маршруты, подключаться к сторонним сервисам и даже обрабатывать аутентификацию.

Технический стек и фичи

• Buka
• vux
• I-Vue Router
• Bheka i-CLI
• Pusher
• CSS

Это действительно отличный проект, чтобы начать работать с Vue или улучшить свои существующие навыки, чтобы заняться разработкой в 2020 году. Вы можете найти туториал здесь.

Красивое приложение для просмотра погоды с Angular 8

Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:

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

Технический стек и фичи

• I-Angular 8
• I-Firebase
• Рендеринг на стороне сервера
• CSS с сеткой и Flexbox
• Mobile friendly и адаптивность
• Imodi emnyama
• Красивый интерфейс

Что мне действительно очень нравится в этом всеобъемлющем проекте, так это то, что вы не изучаете вещи изолированно. Вместо этого вы изучаете весь процесс разработки — от проектирования до окончательного развертывания.

To-Do приложение с помощью Svelte

Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.

To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:

Yini ozoyifunda
Из этого туториала вы узнаете, как создать приложение с помощью Svelte 3, от начала до конца. Вы будете использовать компоненты, стилизацию и обработчики событий

Технический стек и фичи

• Svelte 3
• Izingxenye
• Стилизация с помощью CSS
• Синтаксис ES 6

Существует не так много хороших стартовых проектов по Svelte, поэтому я нашел этот хороший вариант для начала.

Приложение для электронной коммерции с помощью Next.js

Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.

Этот проект покажет вам, как создать приложение для электронной коммерции, которая выглядит следующим образом:

Yini ozoyifunda
В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.

Технический стек и фичи

• Okulandelayo
• Компоненты и страницы
• Ukusampula kwedatha
• Стилизация
• Развертывание проекта
• SSR и SPA

Всегда здорово иметь реальный пример, такой как приложение для электронной коммерции, чтобы узнать что-то новое. Вы можете найти туториал здесь.

Полноценный мультиязычный блог с Nuxt.js

Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
Последнее приложение, которое вы можете создать, будет выглядеть так:

Yini ozoyifunda

В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.

Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.

Технический стек и фичи

• I-Nuxt.js
• Компоненты и страницы
• Storyblock модуль
• Миксины
• Vuex для управления состоянием
• SCSS для стилизации
• Nuxt middlewares

Это действительно крутой проект, который включает в себя множество замечательных возможностей Nuxt.js. Я лично люблю работать с Nuxt, так что вам стоит попробовать его, так как это также сделает вас отличным разработчиком Vue.

Блог с Gatsby

Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:

Yini ozoyifunda

В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.

Технический стек и фичи

• UGatsby
• Yenza
• IgrafuQL
• Плагины и темы
• MDX/Markdown
• Bootstrap CSS
• Amaphethini

Если вы когда-нибудь хотели завести блог, это отличный пример того, как сделать его, используя React и GraphQL.

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

Блог с Gridsome

Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:

Yini ozoyifunda

Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.

Технический стек и фичи

• I-Gridsome
• Buka
• IgrafuQL
• Ukuphawula
• I-Netify

Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и Markdown и может стать хорошей отправной точкой.

Аудио плеер, похожий на SoundCloud, с помощью Quasar

Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:

Yini ozoyifunda

В то время как другие проекты сосредоточены в основном на веб-приложениях, этот покажет вам, как создать мобильное приложение с использованием Vue и фреймворка Quasar.
У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.

Технический стек и фичи

• I-Quasar
• Buka
• I-Cordova
• I-WaveSurfer
• UI Компоненты

Небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений.

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

Umumo omuhle wekhadi lesikweletu elinokusebenzelana okuncane okubushelelezi nokujabulisayo. Kufaka ukufometha izinombolo, ukuqinisekiswa kanye nokutholwa kohlobo lwekhadi okuzenzakalelayo. Yakhelwe ku-Vue.js futhi isabela ngokugcwele. (Uyabona lapha.)

ifomu lekhadi lesikweletu

Ozokufunda:

• Lungiselela futhi uqinisekise amafomu
• Phatha imicimbi (isibonelo, uma izinkambu zishintsha)
• Qonda ukuthi ungabonisa kanjani futhi ubeke izinto ekhasini, ikakhulukazi ulwazi lwekhadi lesikweletu elivela phezu kwefomu

Igrafu yebha

I-histogram iyishadi noma igrafu emelela idatha yesigaba enemishayo engunxande enobude noma ubude ngokulingana namanani abawameleyo.

Angasetshenziswa ngokuqondile noma ngokuvundlile. Ishadi lebha elimile ngezinye izikhathi libizwa ngokuthi ishadi lomugqa.

Ozokufunda:

• Bonisa idatha ngendlela ehlelekile neqondakalayo
• Ukwengeza: Funda indlela yokusebenzisa isici canvas nendlela yokudweba izakhi ngayo

kuyinto ungathola idatha yabantu bomhlaba. Ahlelwa ngonyaka.

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

Emuva ngo-2016, i-Twitter yethula lesi sithombe esimangalisayo sama-tweets ayo. Kusukela ngo-2019, isabukeka njengengxenye, kungani ungazaleli wena?

Ozokufunda:

• Sebenza ngesibaluli se-CSS keyframes
• Qoqa futhi uphilise izici ze-HTML
• Hlanganisa i-JavaScript, i-HTML ne-CSS

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

Akukho lutho oluhle lapha—Amakhosombe e-GitHub awuhlu olukhazinyulisiwe nje.
Umgomo uwukubonisa amaqoqo futhi uvumele umsebenzisi ukuthi awahlunge. Sebenzisa I-GitHub API esemthethweni ukuthola amaqoqo omsebenzisi ngamunye.

Ikhasi lephrofayela ye-GitHub - github.com/indreklasn

Ozokufunda:

• Thola idatha evela ku-API
• Bonisa idatha evela ku-API
• Hlunga futhi ubonise idatha efanele yosesho ngalunye
• Ongakukhetha: Uma ufuna inselele, sebenzisa I-API v4, eyakhiwe kusetshenziswa i-GraphQL. Uma ufuna ukufunda i-GraphQL, hamba kwesinye sezindatshana zami ezedlule.

Чаты в стиле Reddit

Izingxoxo ziyindlela yokuxhumana edumile ngenxa yobulula bazo kanye nokusebenziseka kalula. Kodwa yini ngempela ebhebhezela izingosi zengevu zesimanje? WebSockets!

Ozokufunda:

• Sebenzisa ama-WebSockets, ukuxhumana kwesikhathi sangempela nezibuyekezo zedatha
• Sebenza ngamaleveli wokufinyelela komsebenzisi (isibonelo, umnikazi wesiteshi sengxoxo unendima admin, nabanye ekamelweni - user)
• Cubungula futhi uqinisekise amafomu - khumbula, iwindi lengxoxo lokuthumela umlayezo input
• Dala futhi ujoyine izingxoxo ezahlukene
• Sebenza ngemilayezo yomuntu siqu. Abasebenzisi bangaxoxa nabanye abasebenzisi ngasese. Empeleni, uzobe usungula uxhumano lweWebSocket phakathi kwabasebenzisi ababili.

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

Okwenza lokhu kuzulazula kuhluke ukuthi isiqukathi se-popover siyashintsha ukuze silingane nokuqukethwe. Kunobuhle kulolu shintsho uma kuqhathaniswa nokuziphatha okujwayelekile kokuvula nokuvala i-popover entsha.

Ozokufunda:

• Hlanganisa opopayi be-CSS noshintsho
• Fiphalisa okuqukethwe futhi usebenzise isigaba esisebenzayo kusici esintantayo

I-Pacman

Dala inguqulo yakho ye-Pacman. Lena indlela enhle yokuthola umbono wokuthi imidlalo ithuthukiswa kanjani futhi uqonde izinto eziyisisekelo. Sebenzisa uhlaka lwe-JavaScript, React noma Vue.

Uzofunda:

• Indlela izinto ezihamba ngayo
• Unganquma kanjani ukuthi yiziphi izinkinobho okufanele uzicindezele
• Indlela yokunquma isikhathi sokushayisana
• Ungadlulela phambili futhi wengeze isilawuli sokunyakaza kwezipoki

Uzothola isibonelo sale phrojekthi endaweni yokugcina GitHub

ukuphathwa komsebenzisi

Le phrojekthi endaweni yokugcina GitHub

Ukudala uhlelo lokusebenza lohlobo lwe-CRUD lokuphathwa komsebenzisi kuzokufundisa izisekelo zentuthuko. Lokhu kuwusizo ikakhulukazi konjiniyela abasha.

Uzofunda:

• Yini umzila
• Ungawaphatha kanjani amafomu okufaka idatha futhi uhlole ukuthi umsebenzisi ufake ini
• Usebenza kanjani ngesizindalwazi - dala, funda, buyekeza futhi ususe izenzo

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

Le phrojekthi endaweni yokugcina GitHub

Uma ufuna ukudala izinhlelo zokusebenza, qala ngohlelo lokusebenza lwesimo sezulu. Le phrojekthi ingaqedwa kusetshenziswa i-Swift.

Ngaphezu kokuthola isipiliyoni sokwakha isicelo, uzofunda:

• Ungasebenza kanjani nge-API
• Indlela yokusebenzisa i-geolocation
• Yenza uhlelo lwakho lokusebenza lube namandla ngokungeza umbhalo. Kuyo, abasebenzisi bazokwazi ukufaka indawo yabo ukuze bahlole isimo sezulu endaweni ethile.

Uzodinga i-API. Ukuze uthole idatha yesimo sezulu, sebenzisa i-OpenWeather API. Ulwazi olwengeziwe mayelana ne-OpenWeather API lapha.

Окно чата

Iwindi lami lengxoxo liyasebenza, livuleka kumathebhu amabili esiphequluli

Ukudala iwindi lengxoxo kuyindlela ephelele yokuqala ngamasokhethi. Ukukhethwa kwesitaki sobuchwepheshe kukhulu. I-Node.js, isibonelo, ilungile.

Uzofunda ukuthi amasokhethi asebenza kanjani nokuthi ungawasebenzisa kanjani. Lena inzuzo enkulu yale phrojekthi.

Uma ungumthuthukisi we-Laravel ofuna ukusebenza ngamasokhethi, funda okwami indatshana

IGitLab CI

Umthombo

Uma umusha ku-continuous integration (CI), dlala nge-GitLab CI. Setha izindawo ezimbalwa bese uzama ukwenza izivivinyo ezimbalwa. Akuyona iphrojekthi enzima kakhulu, kodwa ngiyaqiniseka ukuthi uzofunda okuningi kuyo. Amaqembu amaningi okuthuthukisa manje asebenzisa i-CI. Ukwazi ukuthi isetshenziswa kanjani kuyasiza.

Uzofunda:

• Yini i-GitLab CI
• Ungamisa kanjani .gitlab-ci.ymletshela umsebenzisi we-GitLab ukuthi enzeni
• Ungaphakela kanjani kwezinye izindawo

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

Yenza i-scraper ehlaziya i-semantics yamawebhusayithi futhi idale isilinganiso sawo. Isibonelo, ungabheka omaka abangekho ezithombeni. Noma hlola ukuthi ikhasi linamathegi we-SEO meta yini. I-scraper ingadalwa ngaphandle kwe-interface yomsebenzisi.

Uzofunda:

• I-scraper isebenza kanjani?
• Ungazakha kanjani izikhethi ze-DOM
• Ungabhala kanjani i-algorithm
• Uma ungafuni ukuma lapho, dala isixhumi esibonakalayo somsebenzisi. Ungakwazi futhi ukudala umbiko kuwebhusayithi ngayinye oyihlolayo.

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

Umthombo

Ukutholwa kwemizwa ezinkundleni zokuxhumana kuyindlela enhle yokwethulwa ekufundeni komshini.

Ungaqala ngokuhlaziya inkundla yokuxhumana eyodwa nje. Wonke umuntu ngokuvamile uqala nge-Twitter.

Uma usuvele unolwazi lokufunda ngomshini, zama ukuqoqa idatha kumanethiwekhi omphakathi ahlukene futhi uwahlanganise.

Uzofunda:

• Kuyini ukufunda ngomshini

Клон Trello

I-Trello clone evela ku-Indrek Lasn.

Uzokufunda:

• Inhlangano yezindlela zokucubungula izicelo (Umzila).
• Hudula uwise.
• Uzenza kanjani izinto ezintsha (amabhodi, izinhlu, amakhadi).
• Icubungula futhi ibheka idatha yokufaka.
• Kusukela ohlangothini lweklayenti: indlela yokusebenzisa isitoreji sendawo, indlela yokulondoloza idatha kwisitoreji sendawo, indlela yokufunda idatha kwisitoreji sendawo.
• Kusukela ohlangothini lweseva: indlela yokusebenzisa imininingwane yolwazi, indlela yokulondoloza idatha kusizindalwazi, indlela yokufunda idatha kusizindalwazi.

Nasi isibonelo senqolobane, yenziwe nge-React+Redux.

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

I-Github Repository.

Isicelo esilula se-CRUD, esilungele ukufunda izinto eziyisisekelo. Masifunde:

• Dala abasebenzisi, phatha abasebenzisi.
• Sebenzisana nesizindalwazi - dala, funda, hlela, susa abasebenzisi.
• Ukuqinisekisa okokufaka nokusebenza ngamafomu.

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

Indawo yokugcina ye-Github.

Noma yini: Swift, Objective-C, React Native, Java, Kotlin.

Masifunde:

• Indlela izinhlelo zokusebenza zomdabu ezisebenza ngayo.
• Uyithola kanjani idatha ku-API.
• Zisebenza kanjani izakhiwo zekhasi lomdabu.
• Ungasebenza kanjani ngamasimulator eselula.

Zama le API. Uma uthola okuthile okungcono, bhala kumazwana.

Uma unentshisekelo, nansi nasi isifundo.

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

Ngobuchwepheshe, lolu akulona uhlelo lokusebenza, kodwa kuwumsebenzi owusizo kakhulu ukuqonda ukuthi i-webpack isebenza kanjani ngaphakathi. Manje ngeke kube "ibhokisi elimnyama", kodwa ithuluzi eliqondakalayo.

Izidingo:

• Hlanganisa i-es7 kuye ku-es5 (okuyisisekelo).
• Hlanganisa i-jsx iye ku-js - noma - .vue ku-.js (kuzodingeka ufunde izilayishi)
• Setha iseva ye-webpack dev kanye nokulayisha kabusha kwemojuli eshisayo. (Vue-cli kanye ne-create-react-app sebenzisa kokubili)
• Sebenzisa i-Heroku, now.sh noma i-Github, funda ukusebenzisa amaphrojekthi e-webpack.
• Setha i-preprocessor yakho oyithandayo ukuze uhlanganise i-css - scss, less, stylus.
• Funda ukusebenzisa izithombe nama-svg nge-webpack.

Lesi isisetshenziswa esimangalisayo sabaqalayo abaphelele.

Клон Hackernews

Wonke uJedi uyadingeka ukuthi azenzele iHackernews yakhe.

Yini ozoyifunda endleleni:

• Ungaxhumana kanjani ne-hackernews API.
• Ulwakha kanjani uhlelo lokusebenza lwekhasi elilodwa.
• Uzisebenzisa kanjani izici ezinjengokubuka amazwana, ukuphawula komuntu ngamunye, amaphrofayili.
• Inhlangano yezindlela zokucubungula izicelo (Umzila).

Тудушечка

I-TodoMVC.

Ngokujulile? Tudushka? Kunezinkulungwane zazo. Kodwa ngikholwe, kunesizathu salokhu kuthandwa.
Uhlelo lokusebenza lwe-Tudu luyindlela enhle yokuqinisekisa ukuthi uyaziqonda izinto eziyisisekelo. Zama ukubhala uhlelo lokusebenza olulodwa ku-vanilla Javascript kanye nolunye kuhlaka lwakho oluthandayo.

Funda:

• Dala imisebenzi emisha.
• Hlola ukuthi izinkambu zigcwalisiwe yini.
• Hlunga imisebenzi (eqediwe, esebenzayo, yonke). Sebenzisa filter и reduce.
• Qonda izisekelo ze-Javascript.

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

Indawo yokugcina ye-Github.

Kuwusizo kakhulu ukuqonda donsa bese uphonsa api.

Masifunde:

• Hudula bese udedela i-API
• Dala ama-UI anothile

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

Uzoqonda ukuthi zombili izinhlelo zokusebenza zewebhu kanye nezicelo zomdabu zisebenza kanjani, okuzokwehlukanisa nesisindo esimpunga.

Esizokufunda:

• Amasokhethi ewebhu (imiyalezo esheshayo)
• Indlela izinhlelo zokusebenza zomdabu ezisebenza ngayo.
• Indlela izifanekiso ezisebenza ngayo kuzinhlelo zokusebenza zomdabu.
• Ihlela izindlela zokucubungula izicelo kuzinhlelo zokusebenza zomdabu.

Umhleli wombhalo

Inhloso yomhleli wombhalo ukunciphisa umzamo wabasebenzisi abazama ukuguqula ukufometha kwabo kube yimakhaphu evumelekile ye-HTML. Umhleli wombhalo omuhle uvumela abasebenzisi ukuthi bafomethe umbhalo ngezindlela ezahlukene.

Ngesinye isikhathi, wonke umuntu usebenzise umhleli wombhalo. Pho kungani kungenjalo zenzele wena?

Клон Reddit

Reddit iwukuhlanganiswa kwezindaba zomphakathi, isilinganiselwa sokuqukethwe kwewebhu kanye nesayithi lengxoxo.

I-Reddit ithatha isikhathi sami esiningi, kodwa ngiyaqhubeka nokuzipholela kuyo. Ukudala i-Reddit clone kuyindlela ephumelelayo yokufunda ukuhlela (ngenkathi uphequlula i-Reddit ngesikhathi esifanayo).

I-Reddit ikunikeza ngokucebile kakhulu API. Ungashiyi ngaphandle noma yiziphi izici noma wenze izinto ngokungaqondile. Emhlabeni wangempela onamakhasimende namakhasimende, awukwazi ukusebenza ngokunganaki, noma uzolahlekelwa umsebenzi ngokushesha.

Amaklayenti ahlakaniphile azobona ngokushesha ukuthi umsebenzi awenziwa kahle futhi azothola omunye umuntu.

I-Reddit API

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

Uma ubhala ikhodi ye-Javascript, kungenzeka ukuthi usebenzise umphathi wephakheji. Umphathi wephakheji ikuvumela ukuthi usebenzise kabusha ikhodi ekhona ebhalwe futhi yashicilelwa ngabanye abantu.

Ukuqonda umjikelezo wokuthuthukisa ogcwele wephakheji kuzohlinzeka ngomuzwa omuhle kakhulu. Kunezinto eziningi okudingeka uzazi uma ushicilela ikhodi. Udinga ukucabanga ngokuvikeleka, inguqulo ye-semantic, ukukala, izimiso zokuqamba amagama nokugcinwa.

Iphakheji ingaba yinoma yini. Uma ungenawo umbono, dala eyakho i-Lodash futhi uyishicilele.

I-Lodash: lodash.com

Ukuba nokuthile okwenzile ku-inthanethi kukubeka ngo-10% ngaphezu kwabanye. Nazi ezinye izinsiza eziwusizo mayelana nemithombo evulekile namaphakheji.

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

Ikharikhulamu ye-FCC

I-freeCodecamp iqoqe okuningi inkambo yokuhlela ephelele.

I-freeCodeCamp yinhlangano engenzi nzuzo. Iqukethe inkundla yokufunda esekelwe kuwebhu esebenzisanayo, inkundla yomphakathi eku-inthanethi, amagumbi okuxoxa, ukushicilela Okumaphakathi, nezinhlangano zasendaweni ezihlose ukwenza ukuthuthukiswa kwewebhu yokufunda kufinyeleleke kuwo wonke umuntu.

Uzoba ngaphezu kokufanelekela umsebenzi wakho wokuqala uma ukwazi ukuqeda sonke isifundo.

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

Iphrothokholi ye-HTTP ingenye yezivumelwano eziyinhloko lapho okuqukethwe kuhamba khona ku-inthanethi. Amaseva e-HTTP asetshenziselwa ukunikeza okuqukethwe okumile okufana ne-HTML, CSS, ne-JS.

Ukwazi ukusebenzisa iphrothokholi ye-HTTP kusukela ekuqaleni kuzokhulisa ulwazi lwakho lokuthi izinto zisebenzisana kanjani.

Isibonelo, uma usebenzisa ama-NodeJs, uyazi ukuthi i-Express inikeza iseva ye-HTTP.

Ukuze uthole ireferensi, bheka ukuthi ungakwazi yini:

• Setha iseva ngaphandle kokusebenzisa noma imaphi amalabhulali
• Iseva kufanele inikeze okuqukethwe kwe-HTML, CSS kanye ne-JS.
• Isebenzisa i-router kusukela ekuqaleni
• Qaphela izinguquko futhi ubuyekeze iseva

Uma ungazi ukuthi kungani, sebenzisa Hamba la bese uzama ukudala iseva ye-HTTP caddy zoqala phansi.

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

Sonke siyawabhala amaphuzu, akunjalo?

Masidale uhlelo lokusebenza lwamanothi. Uhlelo lokusebenza ludinga ukugcina amanothi futhi luwavumelanise nesizindalwazi. Yakha uhlelo lokusebenza lwendabuko usebenzisa i-Electron, i-Swift, nanoma yini oyithandayo nokuthi yini esebenzela isistimu yakho.

Zizwe ukhululekile ukuhlanganisa lokhu nenselelo yokuqala (umhleli wombhalo).

Njengebhonasi, zama ukuvumelanisa inguqulo yedeskithophu yakho nenguqulo yewebhu.

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

Ubani ongawalaleli ama-podcast?

Dala uhlelo lokusebenza lewebhu ngokusebenza okulandelayo:

• Yenza i-akhawunti
• Sesha ama-Podcast
• Linganisa futhi ubhalisele ama-podcasts
• Yima futhi udlale, shintsha isivinini, imisebenzi eya phambili nangemuva imizuzwana engama-30.

Zama ukusebenzisa i-iTunes API njengendawo yokuqala. Uma wazi ezinye izinsiza, sicela uthumele kumazwana.

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

Ukuthwebula isikrini

Sawubona! Ngiqopha isikrini sami manje!

Dala ideskithophu noma uhlelo lokusebenza lwewebhu olukuvumela ukuthi uthwebule isikrini sakho futhi ulondoloze isiqeshana njenge .gif

Lapha amanye amathiphuukufeza kanjani lokhu.

Imithombo

• Amanye amaphrojekthi angu-5 okuqeqesha anesibindi kanjiniyela (Isendlalelo, i-Squoosh, Isibali, Isiseshi Sewebhusayithi, Isidlali Somculo)
• Amaphrojekthi ayi-9 wokucija amakhono akho e-Front-End
• Imisebenzi eyisithupha yonjiniyela we-Front-End
• Ukuzijwayeza okujabulisayo konjiniyela
• Amaphrojekthi wezemfundo ayi-8
• Olunye uhlu lwamaphrojekthi okumele uzilolonge kuwo

Source: www.habr.com