I-dojo yangaphambili: iiprojekthi zokuqeqesha izakhono zomphuhlisi (i-5 entsha + 43 endala)

1. Клон Notion

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

www.notion.so

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

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

Eli nqaku liguqulelwe ngenkxaso ye-EDISON Software, leyo разрабатывает приложения и сайты, kwakunye utyala imali kuqaliso.

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: Apha GitHub example repository.

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

Ulwaleko

www.reddit.com/r/layer

Umaleko luluntu apho wonke umntu anokuzoba ipixel “kwibhodi” ekwabelwana ngayo. Umbono wokuqala wazalwa kwiReddit. Uluntu lwe-r/Layer sisikweko sokuyila ekwabelwana ngaso, ukuba wonke umntu abe ngumdali kwaye abe negalelo kwisizathu esifanayo.

Yintoni oya kufunda ngayo xa usenza iprojekthi yakho yeLayer:

• Isebenza njani iJavaScript canvas Ukwazi indlela yokusebenzisa iseyile sisakhono esibalulekileyo kwizicelo ezininzi.
• Indlela yokulungelelanisa iimvume zabasebenzisi. Umsebenzisi ngamnye unokuzoba ipixel enye rhoqo ngemizuzu eli-15 ngaphandle kokungena.
• Yenza iiseshini zecookies.

Squoosh

squooosh.app

I-Squoosh sisicelo sokucinezela umfanekiso kunye neenketho ezininzi eziphambili.

GIF 20 MB

Ngokwenza eyakho inguqulelo yeSquoosh uya kufunda:

• Indlela yokusebenza ngeesayizi zemifanekiso
• Funda izinto ezisisiseko Drag'n'Drop API
• Qonda indlela i-API kunye nabaphulaphuli besiganeko basebenza ngayo
• Indlela yokulayisha kunye nokuthumela ngaphandle iifayile

Qaphela: Icompressor yomfanekiso yindawo. Akuyimfuneko ukuthumela idatha eyongezelelweyo kumncedisi. Unokuba necompressor ekhaya, okanye ungayisebenzisa kwiseva, ukhetho lwakho.

Calculator

Ima kancinci? Ngokunyanisekileyo? Isibali-manani? Ewe, ngokuchanekileyo, i-calculator. Ukuqonda iziseko zezibalo kunye nendlela ezisebenzisana ngayo sisakhono esibalulekileyo sokwenza lula usetyenziso lwakho. Kungekudala okanye kamva kuya kufuneka ujongane namanani kwaye ngokukhawuleza kungcono.

jarodburchhill.github.io/CalculatorReactApp

Ngokwenza esakho isixhobo sokubala uya kufunda:

• Sebenza ngamanani kunye nokusebenza kwezibalo
• Ziqhelanise nabaphulaphuli besiganeko API
• Indlela yokucwangcisa izinto, ukuqonda izitayela

I-Crawler (injini yokukhangela)

Wonke umntu usebenzise injini yokukhangela, kutheni ungazenzi eyakho? Abakhasi bayafuneka ukukhangela ulwazi. Wonke umntu uzisebenzisa yonke imihla kwaye imfuno yale teknoloji kunye neengcali ziya kukhula ngokuhamba kwexesha.

Injini yokukhangela kaGoogle

Uya kufunda ntoni ngokwenza eyakho injini yokukhangela:

• Basebenza njani abakhasi
• Ungazibala njani iisayithi kunye nendlela yokuzibeka ngokwereyithingi kunye nodumo
• Indlela yokugcina iisayithi ezinesalathisi kwisiseko sedatha kunye nendlela yokusebenza kunye nesiseko sedatha

Umdlali woMculo (Spotify, Apple Music)

Wonke umntu umamela umculo - yinxalenye nje ebalulekileyo yobomi bethu. Masenze isidlali somculo ukuze siqonde ngcono ukuba oomatshini abasisiseko beqonga lokusasaza umculo basebenza njani.

Spotify

Yintoni oya kuyifunda ngokwenza iqonga lakho lokusasaza umculo:

• Usebenza njani nge-API. sebenzisa i-API esuka kwiSpotify okanye iApple Music
• Idlalwa njani, nqumama okanye ubuye umva ukuya kwingoma elandelayo/yangaphambili
• Indlela yokutshintsha umthamo
• Indlela yokulawula umzila womsebenzisi kunye nembali yesikhangeli

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

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

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

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

• React с hook’ами
• Yakha-yenza-app
• JSX
• CSS

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

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

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

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

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

• Vue
• vux
• Vue Router
• Vue CLI
• Ukuqhubela phambili
• CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Uza kufunda ntoni

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

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

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

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

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

Блог с Gatsby

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

Uza kufunda ntoni

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

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

• Kwimigby
• usabela
• IgrafuQL
• Плагины и темы
• MDX/Markdown
• Bootstrap CSS
• Iipateni

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

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

Блог с Gridsome

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

Uza kufunda ntoni

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

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

• Igridsome
• Vue
• IgrafuQL
• Markdown
• Yenza

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

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

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

Uza kufunda ntoni

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

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

• Ngekota
• Vue
• Cordova
• WaveSurfer
• UI Компоненты

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

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

Ubume bekhadi letyala elipholileyo elinonxibelelwano oluthambileyo nolonwabisayo lwemicro. Ibandakanya ukufomatha inombolo, uqinisekiso kunye nobhaqo oluzenzekelayo uhlobo lwekhadi. Yakhiwe kwi-Vue.js kwaye ikwaphendula ngokupheleleyo. (Ungabona apha.)

Ikhadi letyala-ifomu

Uya kufunda ntoni:

• Inkqubo kwaye uqinisekise iifomu
• Bamba imisitho (umzekelo, xa amabala etshintsha)
• Qonda indlela yokubonisa kunye nokubeka izinto kwiphepha, ngakumbi ulwazi lwekhadi letyala elivela phezulu kwifomu

igrafu yebha

I-histogram yitshathi okanye igrafu emele idata yodidi eneentsimbi ezixande ezinobude okanye ubude obulungelelanisiweyo kumaxabiso eziwameleyo.

Zingasetyenziswa ngokuthe nkqo okanye ngokuthe tye. Itshathi yebha ethe nkqo ngamanye amaxesha ibizwa ngokuba yitshathi yomgca.

Uya kufunda ntoni:

• Bonisa idatha ngendlela eyakhiweyo neqondakalayo
• Ukongeza: Funda indlela yokusebenzisa isiqalelo canvas kunye nendlela yokuzoba izinto ngayo

kuyinto ungafumana idatha yabemi behlabathi. Zihlelwa ngokonyaka.

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

Emuva kwi-2016, i-Twitter yazisa le mifanekiso emangalisayo yeetweets zayo. Ukusukela ngo-2019, isajongeka njengenxalenye, kutheni ungazenzi ngokwakho?

Uya kufunda ntoni:

• Sebenza ngophawu lweCSS keyframes
• Lawula kwaye uphilise izinto ze-HTML
• Hlanganisa iJavaScript, iHTML kunye neCSS

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

Akukho nto intle apha-iGitHub zokugcina luluhlu oluzukisiweyo.
Injongo kukubonisa iindawo zokugcina kwaye uvumele umsebenzisi ukuba azihluze. Sebenzisa esemthethweni GitHub API ukufumana iindawo zokugcina zomsebenzisi ngamnye.

Iphepha leprofayile yeGitHub - github.com/indreklasn

Uya kufunda ntoni:

• Fumana idatha kwi-API
• Bonisa idatha esuka kwi-API
• Hlunga kwaye ubonise idatha efanelekileyo kukhangelo ngalunye
• Ukuzikhethela: Ukuba ulungele umngeni, sebenzisa I-API v4, yakhiwe kusetyenziswa iGraphQL. Ukuba ufuna ukufunda iGraphQL, yiya kwelinye lamanqaku am angaphambili.

Чаты в стиле Reddit

Iincoko ziyindlela edumileyo yonxibelelwano ngenxa yokulula kunye nokusebenziseka ngokulula. Kodwa yintoni ephembelela amagumbi okuncokola anamhlanje? WebSockets!

Uya kufunda ntoni:

• Sebenzisa iWebSockets, unxibelelwano lwexesha langempela kunye nohlaziyo lwedatha
• Sebenza ngamanqanaba okufikelela komsebenzisi (umzekelo, umnini wesiteshi sengxoxo unendima admin, kunye nabanye egumbini - user)
• Inkqubo kwaye uqinisekise iifom - khumbula, ifestile yengxoxo yokuthumela umyalezo input
• Yenza kwaye ujoyine iingxoxo ezahlukeneyo
• Sebenza ngemiyalezo yakho. Abasebenzisi banokuncokola nabanye abasebenzisi ngasese. Ngokusisiseko, uya kuseka unxibelelwano lweWebSocket phakathi kwabasebenzisi ababini.

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

Yintoni eyenza le navigation ibe yodwa kukuba isikhongozeli se-popover siyatshintsha ukuze silingane nomxholo. Kukho ubuhle kolu tshintsho xa kuthelekiswa nokuziphatha kwendabuko yokuvula kunye nokuvala i-popover entsha.

Uya kufunda ntoni:

• Dibanisa oopopayi beCSS kunye neenguqu
• Dim umxholo kwaye usebenzise iklasi esebenzayo kwinto edadayo

Pacman

Yenza inguqulelo yakho yePacman. Le yindlela entle yokufumana umbono wendlela imidlalo ephuhliswa ngayo kunye nokuqonda iziseko. Sebenzisa isakhelo seJavaScript, React okanye Vue.

Uya kufunda:

• Zihamba njani izinto
• Indlela yokumisela ukuba ngawaphi amaqhosha omawucofe
• Indlela yokumisela umzuzu wokungqubana
• Ungaya phambili kwaye wongeze ulawulo lwentshukumo yesiporho

Uya kufumana umzekelo wale projekthi kwindawo yokugcina GitHub

ulawulo lomsebenzisi

Le projekthi kwindawo yokugcina GitHub

Ukudala uhlobo lwe-CRUD yesicelo solawulo lomsebenzisi luya kukufundisa iziseko zophuhliso. Oku kuluncedo ngakumbi kubaphuhlisi abatsha.

Uya kufunda:

• Yintoni indlela
• Indlela yokusingatha iifom zokungeniswa kwedatha kwaye ukhangele oko afakwe ngumsebenzisi
• Indlela yokusebenza kunye nesiseko sedatha - yenza, funda, uhlaziye kwaye ucime izenzo

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

Le projekthi kwindawo yokugcina GitHub

Ukuba ufuna ukwenza ii -apps, qala nge-app yemozulu. Le projekthi inokugqitywa kusetyenziswa i-Swift.

Ukongeza ekufumaneni amava okwakha isicelo, uya kufunda:

• Usebenza njani nge-API
• Indlela yokusebenzisa i-geolocation
• Yenza usetyenziso lwakho luguquke ngakumbi ngokongeza igalelo lombhalo. Kuyo, abasebenzisi baya kuba nakho ukungena kwindawo yabo ukujonga imozulu kwindawo ethile.

Uya kufuna i-API. Ukufumana idatha yemozulu, sebenzisa i-OpenWeather API. Ulwazi oluninzi malunga ne-OpenWeather API apha.

Окно чата

Ifestile yam yencoko iyasebenza, vula kwiithebhu ezimbini zebrawuza

Ukwenza ifestile yengxoxo yindlela efanelekileyo yokuqalisa ngeesokethi. Ukhetho lwe-tech stack lukhulu. I-Node.js, umzekelo, ilungile.

Uya kufunda ukuba iisokethi zisebenza njani kunye nendlela yokuzisebenzisa. Le yeyona nzuzo iphambili yale projekthi.

Ukuba ungumphuhlisi weLaravel ofuna ukusebenza ngeesokethi, funda eyam inqaku

IGitLab CI

Umthombo

Ukuba umtsha kuhlanganiso oluqhubekayo (CI), dlala malunga neGitLab CI. Cwangcisa iindawo ezimbalwa kwaye uzame ukuqhuba iimvavanyo ezimbalwa. Asiyoprojekthi inzima kakhulu, kodwa ndiqinisekile ukuba uya kufunda okuninzi kuyo. Amaqela amaninzi ophuhliso ngoku asebenzisa iCI. Ukwazi indlela yokuyisebenzisa kuluncedo.

Uya kufunda:

• Yintoni iGitLab CI
• Indlela yokuqwalasela .gitlab-ci.ymlexelela umsebenzisi weGitLab ukuba makenze ntoni
• Ukusasazwa njani kwezinye iindawo

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

Yenza i-scraper ehlalutya i-semantics yewebhusayithi kwaye yenza ukulinganisa kwabo. Umzekelo, ungajonga iithegi zealt ezingekhoyo kwimifanekiso. Okanye khangela ukuba iphepha lineethegi ze-SEO meta. I-scraper inokudalwa ngaphandle kojongano lomsebenzisi.

Uya kufunda:

• Isebenza njani i-scraper?
• Ubenza njani abakhethi be-DOM
• Indlela yokubhala i-algorithm
• Ukuba awufuni ukuma apho, yenza ujongano lomsebenzisi. Unokwenza ingxelo kwiwebhusayithi nganye oyijongayo.

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

Umthombo

Ukubonwa kweemvakalelo kumajelo eendaba zentlalo yindlela entle yokwazisa ukufunda koomatshini.

Unokuqala ngokuhlalutya inethiwekhi enye yokuncokola. Wonke umntu uhlala eqala nge-Twitter.

Ukuba sele unamava ngokufunda koomatshini, zama ukuqokelela idatha kwiinethiwekhi ezahlukeneyo zentlalo kwaye uzidibanise.

Uya kufunda:

• Yintoni ukufunda ngomatshini

Клон Trello

Trello clone evela Indrek Lasn.

Yintoni oya kufunda ngayo:

• Ulungelelwaniso lweendlela zokusetyenzwa kwesicelo (Umzila).
• Yitsale uyiwise.
• Indlela yokudala izinto ezintsha (iibhodi, izintlu, amakhadi).
• Ukucubungula kunye nokujonga idatha yegalelo.
• Ukusuka kwicala lomxhasi: indlela yokusebenzisa ukugcinwa kwendawo, indlela yokugcina idatha kwindawo yokugcina indawo, indlela yokufunda idatha kwindawo yokugcina indawo.
• Ukusuka kwicala lomncedisi: indlela yokusebenzisa i-database, indlela yokugcina idatha kwi-database, indlela yokufunda idatha kwi-database.

Nanku umzekelo wendawo yokugcina, yenziwe kwiReact+Redux.

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

Github Repository.

Isicelo esilula se-CRUD, esilungele ukufunda iziseko. Masifunde:

• Yenza abasebenzisi, lawula abasebenzisi.
• Sebenzisana nesiseko sedatha - yenza, funda, uhlele, cima abasebenzisi.
• Ukuqinisekisa igalelo kunye nokusebenza ngeefom.

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

Indawo yokugcina yeGithub.

Nantoni na: Swift, Objective-C, React Native, Java, Kotlin.

Masifunde:

• Zisebenza njani izicelo zemveli.
• Indlela yokubuyisela idatha kwi-API.
• Uyilo lwephepha lemveli lusebenza njani.
• Usebenza njani kunye ne-simulators ephathwayo.

Zama le API. Ukuba ufumana into engcono, bhala kwizimvo.

Ukuba unomdla, nantsi nasi isifundo.

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

Ngokobuchwephesha, esi ayisosicelo, kodwa ngumsebenzi oluncedo kakhulu ukuqonda ukuba i-webpack isebenza njani ngaphakathi. Ngoku akuyi kuba "ibhokisi elimnyama", kodwa isixhobo esiqondakalayo.

Izinto ezifunekayo:

• Hlanganisa i-es7 ukuya kwi-es5 (iziseko).
• Qokelela i-jsx ukuya ku-js - okanye - .vue ukuya kwi-.js (kuya kufuneka ufunde izilayishi)
• Cwangcisa iseva ye-webpack dev kunye nokulayishwa kwakhona kwemodyuli eshushu. (Vue-cli kwaye udale-react-app sebenzisa zombini)
• Sebenzisa i-Heroku, ngoku.sh okanye i-Github, funda indlela yokubeka iiprojekthi ze-webpack.
• Cwangcisa iprosesa yakho oyithandayo ukuze uqokelele i-css - scss, ngaphantsi, istylus.
• Funda indlela yokusebenzisa imifanekiso kunye neesvgs nge-webpack.

Esi sisixhobo esimangalisayo sabaqalayo abagqibeleleyo.

Клон Hackernews

Yonke iJedi iyafuneka ukuba yenze eyakhe iHackernews.

Oko uya kufunda endleleni:

• Indlela yokusebenzisana ne-hackernews API.
• Uyenza njani isicelo sephepha elinye.
• Indlela yokuphumeza iimpawu ezifana nokujonga izimvo, izimvo zomntu ngamnye, iiprofayili.
• Ulungelelwaniso lweendlela zokusetyenzwa kwesicelo (Umzila).

Тудушечка

TodoMVC.

Ngokunyanisekileyo? Tudushka? Kukho amawaka awo. Kodwa ndikholelwe, kukho isizathu solu dumo.
Usetyenziso lweTudu yindlela entle yokuqinisekisa ukuba uyaziqonda iziseko. Zama ukubhala isicelo esinye kwi-vanilla Javascript kunye nesinye kwisakhelo osithandayo.

Funda:

• Yenza imisebenzi emitsha.
• Khangela ukuba iindawo zizaliswe na.
• Imisebenzi yokucoca (igqityiwe, iyasebenza, yonke). Sebenzisa filter и reduce.
• Qonda iziseko zeJavascript.

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

Indawo yokugcina yeGithub.

Kuluncedo kakhulu ukuqonda tsala kwaye ulahle api.

Masifunde:

• Tsala kwaye ulahle i-API
• Yenza ii-UIs ezityebileyo

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

Uya kuqonda ukuba zombini izicelo zewebhu kunye nezicelo zomthonyama zisebenza njani, nto leyo eya kukwahlula kubunzima obungwevu.

Siza kufunda ntoni:

• Iisokethi zewebhu (imiyalezo yangoko)
• Zisebenza njani izicelo zemveli.
• Iitemplates zisebenza njani kwizicelo zomthonyama.
• Ukulungiselela iindlela zokusetyenzwa kwesicelo kwizicelo zomthonyama.

Umhleli wombhalo

Injongo yomhleli wombhalo kukunciphisa umzamo wabasebenzisi abazama ukuguqula ukufomatha kwabo kwimarkup ye-HTML esebenzayo. Umhleli wombhalo olungileyo uvumela abasebenzisi ukuba bafomethe isicatshulwa ngeendlela ezahlukeneyo.

Ngexesha elithile, wonke umntu usebenzise umhleli wombhalo. Ngoko kutheni kungenjalo yidale ngokwakho?

Клон Reddit

Reddit ludibaniso lweendaba zentlalo, ukukala komxholo wewebhu kunye nendawo yengxoxo.

I-Reddit ithatha ixesha lam elininzi, kodwa ndiyaqhubeka nokuxhoma kuyo. Ukudala iReddit clone yindlela esebenzayo yokufunda inkqubo (ngelixa ubrawuza iReddit ngaxeshanye).

I-Reddit ikubonelela ngesityebi kakhulu API. Sukushiya naziphi na iimpawu okanye wenze izinto ngamabona-ndenzile. Ehlabathini lokwenyani kunye nabathengi kunye nabathengi, awukwazi ukusebenza ngokungaqhelekanga, okanye uya kuphulukana nomsebenzi wakho ngokukhawuleza.

Abathengi abahlakaniphile baya kuqonda ngokukhawuleza ukuba umsebenzi wenziwa kakubi kwaye uya kufumana omnye umntu.

Reddit API

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

Ukuba ubhala ikhowudi yeJavascript, amathuba okuba usebenzise umphathi wepakethe. Umphathi wepakethe ikuvumela ukuba usebenzise kwakhona ikhowudi esele ibhaliwe kwaye yapapashwa ngabanye abantu.

Ukuqonda umjikelo opheleleyo wophuhliso lwephakheji kuya kubonelela ngamava amahle kakhulu. Zininzi izinto ekufuneka uzazi xa upapasha ikhowudi. Kuya kufuneka ucinge ngokhuseleko, uguqulelo lwesemantic, ukulinganisa, ukubiza amagama kunye nokugcinwa.

Iphakheji ingaba nantoni na. Ukuba awunambono, yenza i-Lodash yakho kwaye uyipapashe.

Lodash: lodash.com

Ukuba nento oyenzileyo kwi-intanethi kukubeka i-10% ngaphezu kwabanye. Nazi ezinye izixhobo eziluncedo malunga nemithombo evulekileyo kunye neepakethe.

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

Ikharityhulamu yeFCC

I-freeCodecamp iqokelele kakhulu ikhosi yenkqubo ebanzi.

freeCodeCamp ngumbutho ongenzi nzuzo. Iqulathe iqonga lokufunda elisekelwe kwiwebhu elisebenzisanayo, iforam yoluntu ekwi-intanethi, amagumbi okuncokola, ushicilelo oluPhakathi, kunye nemibutho yasekuhlaleni enenjongo yokwenza uphuhliso lwewebhu lokufunda lufikeleleke kuye wonke umntu.

Uya kuba ngaphezu kofanelekela umsebenzi wakho wokuqala ukuba ukwazi ukugqiba ikhosi yonke.

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

Iprotocol yeHTTP yenye yeeprothokholi eziphambili apho umxholo uhamba khona kwi-Intanethi. Iiseva ze-HTTP zisetyenziselwa ukukhonza umxholo ongatshintshiyo njenge-HTML, i-CSS, kunye ne-JS.

Ukukwazi ukuphumeza iprotocol yeHTTP ukusuka ekuqaleni kuya kwandisa ulwazi lwakho malunga nendlela izinto ezisebenzisana ngayo.

Umzekelo, ukuba usebenzisa i-NodeJs, ngoko uyazi ukuba i-Express ibonelela ngeseva ye-HTTP.

Ukufumana ireferensi, jonga ukuba ungakwazi:

• Seta iseva ngaphandle kokusebenzisa nawaphi na amathala eencwadi
• Umncedisi kufuneka anike umxholo we-HTML, CSS kunye ne-JS.
• Ukusebenzisa i-router ukusuka ekuqaleni
• Lawula utshintsho kwaye uhlaziye iseva

Ukuba awuyazi ukuba kutheni, sebenzisa Hamba phantsi kwaye uzame ukwenza iseva yeHTTP Caddy ukususela ekuqalei.

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

Sonke siyawabhala amanqaku, akunjalo?

Masenze usetyenziso lwamanqaku. Isicelo kufuneka sigcine amanqaku kwaye singqamanise nesiseko sedatha. Yakha usetyenziso lwemveli usebenzisa i-Electron, iSwift, okanye nantoni na oyithandayo kwaye yintoni esebenzela inkqubo yakho.

Zive ukhululekile ukudibanisa oku kunye nomngeni wokuqala (umhleli wokubhaliweyo).

Njengebhonasi, zama ukungqamanisa inguqulelo yedesktop yakho kunye noguqulelo lwewebhu.

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

Ngubani ongamameli iipodcasts?

Yenza usetyenziso lwewebhu ngolu setyenziso lulandelayo:

• Dala i-akhawunti
• Phendla iiPodcast
• Thetha kwaye urhume kwiipodcasts
• Yima kwaye udlale, tshintsha isantya, imisebenzi yangaphambili nasemva imizuzwana engama-30.

Zama ukusebenzisa iTunes API njengendawo yokuqala. Ukuba uyazi naziphi na ezinye izixhobo, nceda uthumele kumagqabantshintshi.

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

Ukuthathwa kwesikrini

Mholo! Ndicofa iscreen sam ngoku!

Yenza i-desktop okanye i-app yewebhu ekuvumela ukuba ubambe isikrini sakho kwaye ugcine ikliphu njenge .gif

Apha ezinye iingcebisoindlela yokuphumeza oku.

Imithombo

• Iiprojekthi ezi-5 ezongezelelekileyo zoqeqesho lomphuhlisi (uMaleko, iSquoosh, iKhatyhuleyitha, uMkhandi weWebhusayithi, uMdlali woMculo)
• Iiprojekthi ezili-9 zokulola izakhono zakho ze-Front-End
• Imisebenzi emithandathu yomphuhlisi we-Front-End
• Ukonwabisa umphuhlisi
• Iiprojekthi zemfundo ezisi-8
• Olunye uluhlu lweeprojekthi zokuziqhelanisa

umthombo: www.habr.com