Front-end dojo: mga proyekto para sanayin ang mga kasanayan sa developer (5 bago + 43 gulang)

1. Клон Notion

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

www.notion.so

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

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

Ang artikulo ay isinalin sa suporta ng EDISON Software, na разрабатывает приложения и сайтыAt namumuhunan sa mga startup.

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

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Tandaan: Dito GitHub example repository.

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

patong

www.reddit.com/r/layer

Ang Layer ay isang komunidad kung saan lahat ay maaaring gumuhit ng pixel sa isang nakabahaging "board". Ang orihinal na ideya ay ipinanganak sa Reddit. Ang komunidad ng r/Layer ay isang metapora para sa ibinahaging pagkamalikhain, na ang lahat ay maaaring maging isang tagalikha at mag-ambag sa isang karaniwang layunin.

Ano ang matututunan mo kapag gumagawa ng iyong sariling Layer na proyekto:

• Paano gumagana ang JavaScript canvas Ang pag-alam kung paano magpatakbo ng canvas ay isang kritikal na kasanayan sa maraming application.
• Paano i-coordinate ang mga pahintulot ng user. Ang bawat user ay maaaring gumuhit ng isang pixel bawat 15 minuto nang hindi kinakailangang mag-log in.
• Gumawa ng mga session ng cookie.

Squoosh

squoosh.app

Ang Squoosh ay isang image compression application na may maraming advanced na opsyon.

GIF 20 MB

Sa paggawa ng sarili mong bersyon ng Squoosh matututunan mo ang:

• Paano magtrabaho sa mga laki ng larawan
• Matutunan ang mga pangunahing kaalaman ng Drag'n'Drop API
• Unawain kung paano gumagana ang API at mga tagapakinig ng kaganapan
• Paano mag-upload at mag-export ng mga file

Tandaan: Ang image compressor ay lokal. Hindi kinakailangang magpadala ng karagdagang data sa server. Maaari kang magkaroon ng compressor sa bahay, o maaari mo itong gamitin sa isang server, na iyong pinili.

Kalkulator

Halika na? Seryoso? Calculator? Oo, eksakto, isang calculator. Ang pag-unawa sa mga pangunahing kaalaman ng mga pagpapatakbo sa matematika at kung paano gumagana ang mga ito nang magkasama ay isang kritikal na kasanayan para sa pagpapasimple ng iyong mga aplikasyon. Maaga o huli kailangan mong harapin ang mga numero at mas maaga mas mabuti.

jarodburchill.github.io/CalculatorReactApp

Sa pamamagitan ng paglikha ng iyong sariling calculator matututunan mo ang:

• Makipagtulungan sa mga numero at pagpapatakbo sa matematika
• Magsanay sa mga tagapakinig ng kaganapan API
• Paano ayusin ang mga elemento, maunawaan ang mga estilo

Crawler (Search engine)

Gumamit ang lahat ng isang search engine, kaya bakit hindi lumikha ng iyong sarili? Ang mga crawler ay kailangan upang maghanap ng impormasyon. Ginagamit ng lahat ang mga ito araw-araw at ang pangangailangan para sa teknolohiyang ito at mga espesyalista ay lalago lamang sa paglipas ng panahon.

Google search engine

Ano ang matututunan mo sa pamamagitan ng paglikha ng iyong sariling search engine:

• Paano gumagana ang mga crawler
• Paano i-index ang mga site at kung paano i-ranggo ang mga ito ayon sa rating at reputasyon
• Paano mag-imbak ng mga na-index na site sa isang database at kung paano magtrabaho kasama ang database

Music player (Spotify, Apple Music)

Lahat ay nakikinig sa musika - ito ay isang mahalagang bahagi lamang ng ating buhay. Gumawa tayo ng music player para mas maunawaan kung paano gumagana ang mga pangunahing mekanika ng isang modernong music streaming platform.

Spotify

Ano ang matututuhan mo sa pamamagitan ng paglikha ng iyong sariling music streaming platform:

• Paano magtrabaho kasama ang API. gumamit ng API mula sa Spotify o Apple Music
• Paano laruin, i-pause o i-rewind sa susunod/nakaraang track
• Paano baguhin ang volume
• Paano pamahalaan ang pagruruta ng user at kasaysayan ng browser

App sa paghahanap ng pelikula gamit ang React (na may mga kawit)

Ang unang bagay na maaari mong simulan ay ang gumawa ng movie search app gamit ang React. Nasa ibaba ang isang imahe ng kung ano ang magiging hitsura ng huling aplikasyon:

Ano ang matutunan mo
Sa pamamagitan ng pagbuo ng app na ito, mapapabuti mo ang iyong mga kasanayan sa React sa pamamagitan ng paggamit ng medyo bagong Hooks API. Ang halimbawang proyekto ay gumagamit ng mga bahagi ng React, maraming kawit, isang panlabas na API, at siyempre ilang CSS styling.

Tech stack at mga tampok

• Gumamit ng mga kawit
• lumikha-reaksyon-app
• JSX
• CSS

Nang hindi gumagamit ng anumang klase, binibigyan ka ng mga proyektong ito ng perpektong entry point sa functional React at tiyak na makakatulong sa iyo sa 2020. mahahanap mo halimbawa ng proyekto dito. Sundin ang mga tagubilin o gawin itong sarili mo.

Chat App gamit ang Vue

Ang isa pang magandang proyekto na gagawin mo ay ang gumawa ng chat app gamit ang paborito kong JavaScript library: VueJS. Magiging ganito ang hitsura ng application:

Ano ang matutunan mo
Sa tutorial na ito, matututunan mo kung paano gumawa ng Vue app mula sa simula - paggawa ng mga bahagi, paghawak ng estado, paggawa ng mga ruta, pagkonekta sa mga serbisyo ng third-party, at kahit na paghawak sa pagpapatunay.

Tech stack at mga tampok

• Vue
• vuex
• Vue Router
• CLI view
• Pusher
• CSS

Isa itong napakagandang proyekto upang makapagsimula sa Vue o pagbutihin ang iyong mga umiiral nang kakayahan upang makapasok sa pag-unlad sa 2020. mahahanap mo tutorial dito.

Magandang weather app na may Angular 8

Tutulungan ka ng halimbawang ito na lumikha ng magandang weather app gamit ang Angular 8:

Ano ang matutunan mo
Ang proyektong ito ay magtuturo sa iyo ng mahahalagang kasanayan sa pagbuo ng mga application mula sa simula - mula sa disenyo hanggang sa pag-unlad, hanggang sa isang deployment-ready na application.

Tech stack at mga tampok

• anggulo 8
• Firebase
• Pag-render sa gilid ng server
• CSS na may Grid at Flexbox
• Mobile friendly at kakayahang umangkop
• Madilim na mode
• Magandang interface

Ang talagang gusto ko sa lahat-lahat na proyektong ito ay hindi mo pinag-aaralan ang mga bagay nang nag-iisa. Sa halip, matutunan mo ang buong proseso ng pag-develop, mula sa disenyo hanggang sa huling pag-deploy.

To-Do application gamit ang Svelte

Si Svelte ay tulad ng bagong bata sa component-based na diskarte - hindi bababa sa katulad ng React, Vue at Angular. At ito ang isa sa pinakamainit na bagong produkto para sa 2020.

Ang mga To-Do app ay hindi naman ang pinakamainit na paksa, ngunit ito ay talagang makakatulong sa iyo na mahasa ang iyong mga kasanayan sa Svelte. Magiging ganito ang hitsura:

Ano ang matutunan mo
Ipapakita sa iyo ng tutorial na ito kung paano lumikha ng isang application gamit ang Svelte 3, mula simula hanggang matapos. Gagamitin mo ang mga bahagi, pag-istilo, at mga tagapangasiwa ng kaganapan

Tech stack at mga tampok

• Makinis 3
• Piraso
• Pag-istilo gamit ang CSS
• ES 6 syntax

Walang maraming magagandang Svelte starter projects, kaya nakahanap ako ito ay isang magandang opsyon upang magsimula sa.

E-commerce app gamit ang Next.js

Ang Next.js ay ang pinakasikat na framework para sa pagbuo ng mga React application na sumusuporta sa server-side rendering sa labas ng kahon.

Ipapakita sa iyo ng proyektong ito kung paano lumikha ng isang e-commerce na application na ganito ang hitsura:

Ano ang matutunan mo
Sa proyektong ito, matututunan mo kung paano bumuo gamit ang Next.js—gumawa ng mga bagong page at bahagi, kumuha ng data, at istilo at mag-deploy ng Susunod na application.

Tech stack at mga tampok

• Susunod.js
• Mga Bahagi at Mga Pahina
• Pagsa-sample ng data
• Stylization
• Project Deployment
• SSR at SPA

Laging magandang magkaroon ng isang tunay na halimbawa sa mundo tulad ng isang e-commerce app upang matuto ng bago. Kaya mo hanapin ang tutorial dito.

Ganap na maraming wikang blog na may Nuxt.js

Ang Nuxt.js ay para sa Vue, kung ano ang Next.js para sa React: isang mahusay na framework para sa pagsasama-sama ng kapangyarihan ng pag-render sa gilid ng server at mga single-page na application
Ang huling application na maaari mong gawin ay magiging ganito:

Ano ang matutunan mo

Sa sample na proyektong ito, matututunan mo kung paano gumawa ng kumpletong website gamit ang Nuxt.js, mula sa paunang pag-setup hanggang sa huling deployment.

Sinasamantala nito ang marami sa mga cool na feature na iniaalok ng Nuxt, gaya ng mga page at component, at pag-istilo gamit ang SCSS.

Tech stack at mga tampok

• Nuxt.js
• Mga Bahagi at Mga Pahina
• Storyblock module
• Hagfish
• Vuex para sa pamamahala ng estado
• SCSS para sa pag-istilo
• Nuxt middlewares

Ito ay isang talagang cool na proyekto, na kinabibilangan ng maraming magagandang feature ng Nuxt.js. Personal kong gustong makipagtulungan sa Nuxt kaya dapat mo itong subukan dahil gagawin ka rin nitong isang mahusay na developer ng Vue.

Blog kasama si Gatsby

Ang Gatsby ay isang mahusay na static na site generator gamit ang React at GraphQL. Ito ang resulta ng proyekto:

Ano ang matutunan mo

Sa tutorial na ito, matututunan mo kung paano gamitin ang Gatsby para gumawa ng blog na gagamitin mo sa pagsulat ng sarili mong mga artikulo gamit ang React at GraphQL.

Tech stack at mga tampok

• gatsby
• Gantihin
• GraphQL
• Mga plugin at tema
• MDX/Markdown
• Bootstrap CSS
• Template

Kung gusto mo nang magsimula ng isang blog, ito ay isang magandang halimbawa kung paano ito gagawin gamit ang React at GraphQL.

Hindi ko sinasabing ang WordPress ay isang masamang pagpipilian, ngunit sa Gatsby maaari kang bumuo ng mga website na may mataas na pagganap gamit ang React - na isang kamangha-manghang kumbinasyon.

Blog na may Gridsome

Gridsome para sa Vue... Okay, mayroon na kami nito sa Next/Nuxt.
Ngunit totoo rin ito para sa Gridsome at Gatsby. Parehong gumagamit ng GraphQL bilang kanilang data layer, ngunit ang Gridsome ay gumagamit ng VueJS. Isa rin itong kamangha-manghang static na generator ng site na tutulong sa iyong lumikha ng magagandang blog:

Ano ang matutunan mo

Ang proyektong ito ay magtuturo sa iyo kung paano lumikha ng isang simpleng blog upang makapagsimula sa Gridsome, GraphQL at Markdown. Sinasaklaw din nito kung paano mag-deploy ng application sa pamamagitan ng Netlify.

Tech stack at mga tampok

• nakakadiri
• Vue
• GraphQL
• Markdown
• netlify

Ito ay tiyak na hindi ang pinaka-komprehensibong tutorial, ngunit ito ay sumasaklaw sa mga pangunahing konsepto ng Gridsome at Maaaring isang magandang panimulang punto ang markdown.

SoundCloud-like na audio player gamit ang Quasar

Ang Quasar ay isa pang balangkas ng Vue na maaaring magamit upang lumikha ng mga mobile application. Sa proyektong ito gagawa ka ng isang application ng audio player, halimbawa:

Ano ang matutunan mo

Habang ang ibang mga proyekto ay pangunahing nakatuon sa mga web application, ang isang ito ay magpapakita sa iyo kung paano lumikha ng isang mobile application gamit ang Vue at ang Quasar framework.
Dapat ay mayroon ka nang Cordova na tumatakbo nang naka-configure ang Android Studio/Xcode. Kung hindi, may link ang manual sa website ng Quasar kung saan ipinapakita nila sa iyo kung paano i-set up ang lahat.

Tech stack at mga tampok

• quasar
• Vue
• Cordova
• WaveSurfer
• Mga Bahagi ng UI

Maliit na proyekto, na nagpapakita ng mga kakayahan ni Quasar para sa paglikha ng mga mobile application.

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

Isang cool na hugis ng credit card na may makinis at kasiya-siyang mga micro-interaksyon. Kasama ang pag-format ng numero, pag-verify at awtomatikong pagtukoy ng uri ng card. Ito ay binuo sa Vue.js at ganap ding tumutugon. (Nakikita mo dito.)

credit-card-form

Ano ang matututunan mo:

• Iproseso at i-validate ang mga form
• Pangasiwaan ang mga kaganapan (halimbawa, kapag nagbago ang mga field)
• Unawain kung paano ipakita at ilagay ang mga elemento sa page, lalo na ang impormasyon ng credit card na lumalabas sa itaas ng form

bar graph

Ang histogram ay isang tsart o graph na kumakatawan sa kategoryang data na may mga parihabang bar na may taas o haba na proporsyonal sa mga halagang kinakatawan nila.

Maaari silang ilapat nang patayo o pahalang. Ang isang vertical bar chart ay tinatawag minsan na isang line chart.

Ano ang matututunan mo:

• Ipakita ang data sa isang structured at naiintindihan na paraan
• Dagdag pa: Alamin kung paano gamitin ang elemento canvas at kung paano gumuhit ng mga elemento kasama nito

Dito mahahanap mo ang data ng populasyon ng mundo. Ang mga ito ay pinagsunod-sunod ayon sa taon.

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

Noong 2016, ipinakilala ng Twitter ang kamangha-manghang animation na ito para sa mga tweet nito. Bilang ng 2019, ito pa rin ang hitsura ng bahagi, kaya bakit hindi lumikha ng isa sa iyong sarili?

Ano ang matututunan mo:

• Makipagtulungan sa katangian ng CSS keyframes
• Manipulate at i-animate ang mga elemento ng HTML
• Pagsamahin ang JavaScript, HTML at CSS

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

Walang kahanga-hanga dito—Ang mga repositoryo ng GitHub ay isa lamang niluluwalhati na listahan.
Ang layunin ay ipakita ang mga repositoryo at payagan ang user na i-filter ang mga ito. Gamitin opisyal na GitHub API upang makakuha ng mga repositoryo para sa bawat user.

Pahina ng profile sa GitHub - github.com/indreklasn

Ano ang matututunan mo:

• Tumanggap ng data mula sa API
• Ipakita ang data mula sa API
• I-filter at ipakita ang may-katuturang data para sa bawat paghahanap
• Opsyonal: Kung handa ka para sa isang hamon, gamitin API v4, na binuo gamit ang GraphQL. Kung gusto mong matutunan ang GraphQL, pumunta sa isa sa aking mga nakaraang artikulo.

Чаты в стиле Reddit

Ang mga chat ay isang sikat na paraan ng komunikasyon dahil sa kanilang pagiging simple at kadalian ng paggamit. Ngunit ano ba talaga ang nagbibigay lakas sa mga modernong chat room? Mga WebSocket!

Ano ang matututunan mo:

• Gumamit ng WebSockets, real-time na komunikasyon at mga update sa data
• Makipagtulungan sa mga antas ng pag-access ng user (halimbawa, ang may-ari ng isang channel ng chat ang may tungkulin admin, at iba pa sa silid - user)
• Iproseso at patunayan ang mga form - tandaan, ang chat window para sa pagpapadala ng mensahe ay input
• Lumikha at sumali sa iba't ibang mga chat
• Makipagtulungan sa mga personal na mensahe. Maaaring makipag-chat ang mga user sa ibang mga user nang pribado. Mahalaga, magtatatag ka ng koneksyon sa WebSocket sa pagitan ng dalawang user.

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

Ang natatangi sa nabigasyong ito ay ang pagbabago ng lalagyan ng popover upang magkasya sa nilalaman. May kagandahan ang paglipat na ito kumpara sa tradisyonal na gawi ng pagbubukas at pagsasara ng bagong popover.

Ano ang matututunan mo:

• Pagsamahin ang mga animation ng CSS sa mga transition
• I-dim ang content at ilapat ang aktibong klase sa floated element

Pacman

Gumawa ng sarili mong bersyon ng Pacman. Ito ay isang mahusay na paraan upang makakuha ng ideya kung paano binuo ang mga laro at maunawaan ang mga pangunahing kaalaman. Gumamit ng JavaScript framework, React o Vue.

Matututo ka:

• Paano gumagalaw ang mga elemento
• Paano matukoy kung aling mga key ang pipindutin
• Paano matukoy ang sandali ng banggaan
• Maaari kang pumunta pa at magdagdag ng mga kontrol sa paggalaw ng multo

Makakakita ka ng isang halimbawa ng proyektong ito sa imbakan GitHub

pamamahala ng gumagamit

Proyekto sa imbakan GitHub

Ang paglikha ng isang uri ng CRUD na application para sa pangangasiwa ng gumagamit ay magtuturo sa iyo ng mga pangunahing kaalaman sa pag-unlad. Ito ay lalong kapaki-pakinabang para sa mga bagong developer.

Matututo ka:

• Ano ang pagruruta
• Paano pangasiwaan ang mga form sa pagpasok ng data at tingnan kung ano ang ipinasok ng user
• Paano magtrabaho kasama ang database - lumikha, magbasa, mag-update at magtanggal ng mga aksyon

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

Proyekto sa imbakan GitHub

Kung gusto mong lumikha ng mga app, magsimula sa isang weather app. Maaaring makumpleto ang proyektong ito gamit ang Swift.

Bilang karagdagan sa pagkakaroon ng karanasan sa pagbuo ng isang application, matututunan mo ang:

• Paano magtrabaho kasama ang API
• Paano gamitin ang geolocation
• Gawing mas dynamic ang iyong application sa pamamagitan ng pagdaragdag ng text input. Sa loob nito, ang mga user ay makakapagpasok ng kanilang lokasyon upang suriin ang lagay ng panahon sa isang partikular na lokasyon.

Kakailanganin mo ng API. Upang makakuha ng data ng panahon, gamitin ang OpenWeather API. Higit pang impormasyon tungkol sa OpenWeather API dito.

Окно чата

Gumaganap ang aking chat window, bukas sa dalawang tab ng browser

Ang paggawa ng chat window ay ang perpektong paraan upang makapagsimula sa mga socket. Napakalaki ng pagpili ng tech stack. Ang Node.js, halimbawa, ay perpekto.

Malalaman mo kung paano gumagana ang mga socket at kung paano ipatupad ang mga ito. Ito ang pangunahing bentahe ng proyektong ito.

Kung ikaw ay isang developer ng Laravel na gustong magtrabaho sa mga socket, basahin ang aking isang artikulo

GitLab CI

Pinagmulan

Kung bago ka sa patuloy na pagsasama (CI), maglaro sa GitLab CI. Mag-set up ng ilang kapaligiran at subukang magpatakbo ng ilang pagsubok. Hindi ito isang napakahirap na proyekto, ngunit sigurado akong marami kang matututunan mula dito. Maraming development team ang gumagamit na ngayon ng CI. Ang pag-alam kung paano gamitin ito ay kapaki-pakinabang.

Matututo ka:

• Ano ang GitLab CI
• Paano i-configure .gitlab-ci.ymlna nagsasabi sa gumagamit ng GitLab kung ano ang gagawin
• Paano mag-deploy sa ibang mga kapaligiran

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

Gumawa ng scraper na nagsusuri sa mga semantika ng mga website at lumilikha ng kanilang rating. Halimbawa, maaari mong tingnan kung may nawawalang mga alt tag sa mga larawan. O tingnan kung ang page ay may mga SEO meta tag. Maaaring gumawa ng scraper nang walang user interface.

Matututo ka:

• Paano gumagana ang scraper?
• Paano gumawa ng mga tagapili ng DOM
• Paano magsulat ng isang algorithm
• Kung ayaw mong tumigil doon, gumawa ng user interface. Maaari ka ring gumawa ng ulat sa bawat website na iyong susuriin.

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

Pinagmulan

Ang pag-detect ng sentimento sa social media ay isang mahusay na paraan upang makilala ang machine learning.

Maaari kang magsimula sa pamamagitan ng pagsusuri sa isang social network lamang. Ang lahat ay karaniwang nagsisimula sa Twitter.

Kung mayroon ka nang karanasan sa machine learning, subukang mangolekta ng data mula sa iba't ibang social network at pagsamahin ang mga ito.

Matututo ka:

• Ano ang machine learning

Клон Trello

Trello clone mula sa Indrek Lasn.

Ano ang matututuhan mo:

• Organisasyon ng mga ruta sa pagpoproseso ng kahilingan (Routing).
• I-drag at i-drop.
• Paano lumikha ng mga bagong bagay (mga board, listahan, card).
• Pagproseso at pagsuri ng data ng input.
• Mula sa panig ng kliyente: kung paano gamitin ang lokal na imbakan, kung paano i-save ang data sa lokal na imbakan, kung paano magbasa ng data mula sa lokal na imbakan.
• Mula sa gilid ng server: kung paano gamitin ang mga database, kung paano i-save ang data sa database, kung paano basahin ang data mula sa database.

Narito ang isang halimbawa ng isang repositoryo, ginawa sa React+Redux.

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

Github Repository.

Isang simpleng CRUD application, perpekto para sa pag-aaral ng mga pangunahing kaalaman. Matuto tayo:

• Lumikha ng mga gumagamit, pamahalaan ang mga gumagamit.
• Makipag-ugnayan sa database - lumikha, magbasa, mag-edit, magtanggal ng mga user.
• Pagpapatunay ng input at pagtatrabaho sa mga form.

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

Github repository.

Kahit ano: Swift, Objective-C, React Native, Java, Kotlin.

Pag-aralan natin:

• Paano gumagana ang mga native na application.
• Paano kunin ang data mula sa API.
• Paano gumagana ang mga layout ng native page.
• Paano magtrabaho sa mga mobile simulator.

Subukan ang API na ito. Kung nakakita ka ng mas mahusay, sumulat sa mga komento.

Kung interesado ka, eto na narito ang isang tutorial.

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

Sa teknikal, hindi ito isang application, ngunit ito ay isang napaka-kapaki-pakinabang na gawain upang maunawaan kung paano gumagana ang webpack mula sa loob. Ngayon hindi ito magiging isang "itim na kahon", ngunit isang naiintindihan na tool.

Mga Kinakailangan:

• I-compile ang es7 hanggang es5 (mga pangunahing kaalaman).
• I-compile ang jsx sa js - o - .vue sa .js (kailangan mong matutunan ang mga loader)
• I-set up ang webpack dev server at mainit na pag-reload ng module. (parehong ginagamit ng vue-cli at create-react-app)
• Gamitin ang Heroku, now.sh o Github, alamin kung paano mag-deploy ng mga proyekto sa webpack.
• I-set up ang iyong paboritong preprocessor para mag-compile ng css - scss, less, stylus.
• Matutunan kung paano gumamit ng mga larawan at svg gamit ang webpack.

Ito ay isang kamangha-manghang mapagkukunan para sa kumpletong mga nagsisimula.

Клон Hackernews

Ang bawat Jedi ay kinakailangang gumawa ng kanyang sariling Hackernews.

Ano ang matututunan mo sa daan:

• Paano makipag-ugnayan sa hackernews API.
• Paano lumikha ng isang solong pahina ng application.
• Paano ipatupad ang mga tampok tulad ng pagtingin sa mga komento, mga indibidwal na komento, mga profile.
• Organisasyon ng mga ruta sa pagpoproseso ng kahilingan (Routing).

Тудушечка

TodoMVC.

Seryoso? Tudushka? Mayroong libu-libo sa kanila. Ngunit maniwala ka sa akin, may dahilan para sa kasikatan na ito.
Ang Tudu app ay isang mahusay na paraan upang matiyak na nauunawaan mo ang mga pangunahing kaalaman. Subukang magsulat ng isang application sa vanilla Javascript at isa sa iyong paboritong framework.

Matuto:

• Lumikha ng mga bagong gawain.
• Suriin na ang mga patlang ay napunan.
• I-filter ang mga gawain (nakumpleto, aktibo, lahat). Gamitin filter и reduce.
• Unawain ang mga pangunahing kaalaman ng Javascript.

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

Github repository.

Malaking tulong para maintindihan i-drag at i-drop ang api.

Matuto tayo:

• I-drag at i-drop ang API
• Gumawa ng mga rich UI

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

Mauunawaan mo kung paano gumagana ang parehong mga web application at native na application, na maghihiwalay sa iyo mula sa gray na masa.

Ang pag-aaralan natin:

• Mga web socket (mga instant na mensahe)
• Paano gumagana ang mga native na application.
• Paano gumagana ang mga template sa mga native na application.
• Pag-aayos ng mga ruta sa pagpoproseso ng kahilingan sa mga native na application.

Text editor

Ang layunin ng isang text editor ay upang bawasan ang pagsisikap ng mga user na sinusubukang i-convert ang kanilang pag-format sa wastong HTML markup. Ang isang mahusay na editor ng teksto ay nagbibigay-daan sa mga gumagamit na mag-format ng teksto sa iba't ibang paraan.

Sa ilang mga punto, lahat ay gumamit ng isang text editor. Kaya bakit hindi lumikha ito sa iyong sarili?

Клон Reddit

reddit ay isang social news aggregation, web content rating at discussion site.

Ang Reddit ay tumatagal ng halos lahat ng oras ko, ngunit patuloy akong nakikipag-hang out dito. Ang paggawa ng Reddit clone ay isang epektibong paraan para matuto ng programming (habang sabay na nagba-browse sa Reddit).

Ang Reddit ay nagbibigay sa iyo ng isang napakayaman API. Huwag mag-iwan ng anumang mga tampok o gawin ang mga bagay nang basta-basta. Sa totoong mundo na may mga kliyente at customer, hindi ka maaaring magtrabaho nang basta-basta, o mabilis kang mawalan ng trabaho.

Ang mga matalinong kliyente ay agad na matanto na ang trabaho ay ginagawa nang hindi maganda at maghahanap ng iba.

Reddit API

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

Kung sumulat ka ng Javascript code, malamang na gumagamit ka ng package manager. Binibigyang-daan ka ng manager ng package na muling gamitin ang umiiral nang code na isinulat at nai-publish ng ibang tao.

Ang pag-unawa sa buong yugto ng pag-unlad ng isang pakete ay magbibigay ng napakagandang karanasan. Maraming bagay ang kailangan mong malaman kapag nag-publish ng code. Kailangan mong isipin ang tungkol sa seguridad, semantic versioning, scalability, mga convention sa pagbibigay ng pangalan at pagpapanatili.

Ang pakete ay maaaring maging kahit ano. Kung wala kang ideya, lumikha ng sarili mong Lodash at i-publish ito.

Lodash: lodash.com

Ang pagkakaroon ng isang bagay na nagawa mo online ay naglalagay sa iyo ng 10% kaysa sa iba. Narito ang ilang kapaki-pakinabang na mapagkukunan tungkol sa mga bukas na mapagkukunan at mga pakete.

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

Kurikulum ng FCC

Ang freeCodecamp ay maraming nakolekta komprehensibong kurso sa programming.

Ang freeCodeCamp ay isang non-profit na organisasyon. Binubuo ito ng isang interactive na web-based na platform ng pag-aaral, isang online na forum ng komunidad, mga chat room, Medium publication, at mga lokal na organisasyon na naglalayong gawing accessible sa lahat ang pag-aaral ng web development.

Magiging mas kwalipikado ka para sa iyong unang trabaho kung matatapos mo ang buong kurso.

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

Ang HTTP protocol ay isa sa mga pangunahing protocol kung saan naglalakbay ang nilalaman sa Internet. Ang mga HTTP server ay ginagamit upang maghatid ng static na nilalaman tulad ng HTML, CSS, at JS.

Ang kakayahang ipatupad ang HTTP protocol mula sa simula ay magpapalawak ng iyong kaalaman sa kung paano nakikipag-ugnayan ang mga bagay.

Halimbawa, kung gumagamit ka ng NodeJs, alam mo na ang Express ay nagbibigay ng HTTP server.

Para sa sanggunian, tingnan kung maaari mong:

• Mag-set up ng isang server nang hindi gumagamit ng anumang mga aklatan
• Ang server ay dapat maghatid ng HTML, CSS at JS na nilalaman.
• Pagpapatupad ng router mula sa simula
• Subaybayan ang mga pagbabago at i-update ang server

Kung hindi mo alam kung bakit, gamitin Go lang at subukang lumikha ng isang HTTP server Kadi mula sa wala.

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

Lahat tayo ay nagtatala, hindi ba?

Gumawa tayo ng notes app. Kailangang i-save ng application ang mga tala at i-synchronize ang mga ito sa database. Bumuo ng katutubong app gamit ang Electron, Swift, o anumang gusto mo at kung ano ang gumagana para sa iyong system.

Huwag mag-atubiling pagsamahin ito sa unang hamon (text editor).

Bilang isang bonus, subukang i-sync ang iyong desktop na bersyon sa web na bersyon.

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

Sino ang hindi nakikinig sa mga podcast?

Lumikha ng isang web application na may sumusunod na pag-andar:

• Gumawa ng account
• Maghanap ng Mga Podcast
• Mag-rate at mag-subscribe sa mga podcast
• Huminto at maglaro, baguhin ang bilis, pasulong at paatras na mga function sa loob ng 30 segundo.

Subukang gamitin ang iTunes API bilang panimulang punto. Kung alam mo ang anumang iba pang mapagkukunan, mangyaring mag-post sa mga komento.

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

Screen capture

Kamusta! Kinukuha ko ang aking screen ngayon!

Gumawa ng desktop o web app na nagbibigay-daan sa iyong makuha ang iyong screen at i-save ang clip bilang .gif

Dito ilang payokung paano makamit ito.

pinagmumulan

• 5 pang matapang na proyekto sa pagsasanay para sa developer (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 na proyekto upang mahasa ang iyong mga kasanayan sa Front-End
• Anim na gawain para sa isang Front-End developer
• Nakakatuwang pagsasanay para sa isang developer
• 8 mga proyektong pang-edukasyon
• Isa pang listahan ng mga proyektong pag-eensayo

Pinagmulan: www.habr.com