1. Клон Notion
Прыкладанне Notion пакахалася шматлікім, яно дазваляе аптымізаваць працоўны працэс, працаваць з дакументамі, планаваць задачы, сінхранізаваць дадзеныя паміж прыладамі.
Чаму вы навучыцеся, ствараючы клон Notion:
- . Карыстальнік можа "схапіць мышкай" перацягваць элемент і змясціць яго ў droppable зону.
- Як сінхранізаваць у рэжыме рэальнага часу дадзеныя паміж кампутарам і смартфонам.
- Мы дазваляем карыстальнікам ствараць, чытаць, абнаўляць і выдаляць запісы, тым самым мы трэніруем CRUD-навыкі.
Артыкул перакладзены пры падтрымцы кампаніі EDISON Software, якая , а таксама .
2. Клон Repl.it
Repl.it -гэта інструмент для сумеснага рэдагавання кода ў рэальным часе. Можна вылучыць некалькі моў: JavaScript, Python, Go і выконваць код прама ў браўзэры. Вельмі карысна для хуткіх дэманстрацый і код-інтэрв'ю.
Чаму вы навучыцеся, ствараючы клон Repl.it:
- Як запускаць і выконваць код (server-side) у браўзэры (client-side).
- Счытваць уваходныя дадзеныя (зыходны код) і выводзіць на экран вынік выканання.
- Як ствараць файлы і тэчкі ў інтэрнэце і захоўваць вынікі.
- Як падсвятляць сінтаксіс кода.
3. Клон Google Photos
Google Photos гэта сэрвіс для захоўвання і абмену фотак.
Любое сучаснае прыкладанне па працы з фатаграфіямі ўмее выконваць базавыя функцыі: загружаць, абрэзаць і інш. Людзі жадаюць ствараць свае аватаркі і дзяліцца фоткамі коцікаў, таму трэба ўмець працаваць з выявамі.
Чаму вы навучыцеся, ствараючы клон Google Photos:
- Як ствараць адаптыўныя выявы на тэлефонах, планшэтах, наўтбуках і нават на гіганцкіх экранах тэлевізараў.
- Як апрацоўваць загрузку малюнкаў, асабліва вялікіх малюнкаў (>1МБ) і масавых загрузак.
- Апрацоўка файлаў малюнкаў, абразанне і змяненне памеру фатаграфій для мініяцюр або пры адкрыцці галерэі.
- бонус: як захоўваць выявы ў воблаку або лакальнай базе дадзеных.
4. Клон Gifsky
канвертуе відэа ў GIF выкарыстоўваючы функцыі для эфектыўных палітраў крос-кадраў і часовага згладжвання. У выніку атрымліваецца гіфка з тысячамі кветак на кадр.
Чаму вы навучыцеся, ствараючы клон Gifski:
- Як канвертаваць відэа файлы (.mp4 у .gif).
- Як выкарыстоўваць API Drag and Drop HTML.
- Як працуюць аптымізацыя і апрацоўка выяваў.
Заўвага: і ёсць на GitHub!
5. Маніторынг курсаў криптовалют
React Native cryptocurrency tracker
Чаму вы навучыцеся, ствараючы трэкер курса валют:
- Як працаваць з API і атрымліваць дадзеныя выдалена з API.
- Як адлюстраваць дадзеныя ў выглядзе спісу.
- бонус: Калі вам цікава, я нядаўна напісаў на криптовалюту з React Native.
Заўвага: Вось .
Падборка праектаў з папярэдніх публікацый.
пласт
Layer - гэта супольнасць, дзе кожны можа намаляваць піксель на агульнай «дошцы». Арыгінальная ідэя нарадзілася на Reddit. Супольнасць r/Layer — гэта метафара сумеснай творчасці, што кожны можа быць творцам і рабіць унёсак у агульную справу.
Чаму вы навучыцеся стварай свой праект Layer:
- Як працуюць JavaScript canvas, уменне апераваць canvas – крытычна важны навык у шматлікіх прыкладаннях.
- Як каардынаваць user permissions (карыстальніцкія дазволы). Кожны карыстач можа маляваць адзін піксель раз у 15 хвілін і пры гэтым не трэба лагініцца.
- Ствараць cookies.
Squoosh
Squoosh - гэта дадатак па сціску малюнкаў з мноствам прасунутых опцый.
Гіфка на 20 мб
Ствараючы сваю версію Squoosh вы навучыцеся:
- Як працаваць з памерамі малюнкаў
- Асвоіце асновы Drag'n'Drop API
- Разбярэцеся як працуюць API і еvent listeners
- Як загружаць і экспартаваць файлы
Заўвага: кампрэсар малюнкаў лакальны. Не абавязкова дасылаць дадатковыя дадзеныя на сервер. Можна мець кампрэсар у сябе, а можна на сэрвер, на ваш выбар.
калькулятар
Ды добра? Сур'ёзна? Калькулятар? Так, менавіта калькулятар. Разумець асновы матэматычных аперацый і як яны працуюць сумесна - крытычна важны навык для спрашчэння вашых прыкладанняў. Рана ці позна вам давядзецца разбірацца з лікамі і чым раней, тым лепш.
Ствараючы свой калькулятар вы навучыцеся:
- Працаваць з лікамі і мат аперацыямі
- Папрактыкуецца з event listeners API
- Як размяшчаць элементы, разбярэцеся са стылямі
Crawler (Пошукавы рухавічок)
Кожны карыстаўся пошукавікам, дык чаму б не стварыць уласны? Краўлеры патрэбныя каб шукаць інфармацыю. Імі карыстаюцца ўсе кожны дзень і попыт з часам на гэтую тэхналогію і спецыялістаў будзе толькі расці.
Пошукавік Гугла
Чаму навучыцеся, ствараючы свой пошукавік:
- Як працуюць краўлеры
- Як індэксаваць сайты і як іх ранжыраваць па рэйтынгу і рэпутацыі
- Як захоўваць індэксаваныя сайты ў базе даных і як працаваць з базай даных
Музычны плэер (Spotify, Apple Music)
Усе слухаюць музыку – гэта проста неад'емная частка нашага жыцця. Давайце створым музычны плэер, каб лепш зразумець, як працуе базавая механіка сучаснай платформы струменевай перадачы музыкі.
Spotify
Чаму навучыцеся, ствараючы сваю музычную стрымінгавую платформу:
- Як працаваць з API. выкарыстоўваць API ад Spotify або Apple Music
- Як прайграваць, спыняць ці перамотваць на наступную/папярэднюю кампазіцыю
- Як мяняць гучнасць
- Як кіраваць маршрутызацыяй карыстальнікаў і гісторыяй браўзэра
Прыкладанне для пошуку фільмаў з дапамогай React (з хукамі)
Першае, з чаго вы маглі б пачаць, - гэта стварыць прыкладанне для пошуку фільмаў з дапамогай React. Ніжэй прыведзена выява таго, як будзе выглядаць фінальнае прыкладанне:
Што вы даведаецеся
Ствараючы гэта дадатак, вы палепшыце свае навыкі React, выкарыстоўваючы параўнальна новы API Hooks. У прыкладзе праекту выкарыстоўваюцца кампаненты React, мноства хукаў, вонкавы API і, вядома, некаторыя стылі CSS.
Тэхнічны стэк і фічы
- React з hook'амі
- стварыць-рэагаваць-дадатак
- JSX
- CSS
Без выкарыстання якіх-небудзь класаў, гэтыя праекты даюць вам ідэальную кропку ўваходу ў функцыянальны React і вызначана дапамогуць вам у 2020 годзе. Вы можаце знайсці . Выконвайце інструкцыі або зрабіце ўсё на ўласны густ.
Прыкладанне чата з дапамогай Vue
Яшчэ адзін выдатны праект для вас - стварыць прыкладанне чата, выкарыстоўваючы маю любімую бібліятэку JavaScript: VueJS. Прыкладанне будзе выглядаць прыкладна так:
Што вы даведаецеся
З гэтага кіраўніцтва вы даведаецеся, як зрабіць прыкладанне Vue з нуля - ствараць кампаненты, апрацоўваць станы, ствараць маршруты, падлучацца да іншых сэрвісаў і нават апрацоўваць аўтэнтыфікацыю.
Тэхнічны стэк і фічы
- Ую
- vuex
- Маршрутызатар Vue
- Vue CLI
- Штурхач
- CSS
Гэта сапраўды выдатны праект, каб пачаць працаваць з Vue ці палепшыць свае існуючыя навыкі, каб заняцца распрацоўкай у 2020 годзе. Вы можаце знайсці .
Прыгожае дадатак для прагляду надвор'я з Angular 8
Гэты прыклад дапаможа вам стварыць прыгожае прыкладанне для прагляду надвор'я з дапамогай Angular 8:
Што вы даведаецеся
Гэты праект навучыць вас каштоўным навыкам пры стварэнні прыкладанняў з нуля - пачынаючы з праектавання і заканчваючы распрацоўкай, аж да гатовага да разгортвання прыкладання.
Тэхнічны стэк і фічы
- Кутняя 8
- Firebase
- Рэндэрынг на баку сервера
- CSS з сеткай і Flexbox
- Mobile friendly і адаптыўнасць
- Тэмны рэжым
- Прыгожы інтэрфейс
Што мне сапраўды вельмі падабаецца ў гэтым ўсёабдымным праекце, дык гэта тое, што вы не вывучаеце рэчы ізалявана. Замест гэтага вы вывучаеце ўвесь працэс распрацоўкі - ад праектавання да канчатковага разгортвання.
To-Do дадатак з дапамогай Svelte
Svelte гэта як новае дзіця ў кампанентным падыходзе – прынамсі, падобны на React, Vue і Angular. І гэта адна з самых гарачых навінак на 2020 год.
To-Do прыкладання не абавязкова з'яўляюцца самай гарачай тэмай, але гэта сапраўды дапаможа вам адточваць свае навыкі Svelte. Гэта будзе выглядаць так:
Што вы даведаецеся
З гэтага тутарыялу вы даведаецеся, як стварыць прыкладанне з дапамогай Svelte 3, ад пачатку да канца. Вы будзеце выкарыстоўваць кампаненты, стылізацыю і апрацоўшчыкі падзей
Тэхнічны стэк і фічы
- Svelte 3
- Кампаненты
- Стылізацыя з дапамогай CSS
- Сінтаксіс ES 6
Існуе не так шмат добрых стартавых праектаў па Svelte, таму я знайшоў .
Прыкладанне для электроннай камерцыі з дапамогай Next.js
Next.js з'яўляецца самым папулярным фрэймворкам для стварэння прыкладанняў React, якія падтрымліваюць рэндэрынгу на баку сервера са скрынкі.
Гэты праект пакажа вам, як стварыць прыкладанне для электроннай камерцыі, якая выглядае наступным чынам:
Што вы даведаецеся
У гэтым праекце вы даведаецеся, як распрацоўваць з дапамогай Next.js - ствараць новыя старонкі і кампаненты, здабываць дадзеныя, а таксама стылізаваць і разгортваць прыкладанне Next.
Тэхнічны стэк і фічы
- Next.js
- Кампаненты і старонкі
- Выбарка дадзеных
- Стылізацыя
- Разгортванне праекта
- SSR і SPA
Заўсёды выдатна мець рэальны прыклад, такі як дадатак для электроннай камерцыі, каб даведацца нешта новае. Вы можаце .
Паўнавартасны мультымоўны блог з Nuxt.js
Nuxt.js для Vue, таксама што і Next.js для React: выдатны фрэймворк для аб'яднання магчымасцяў рэндэрынгу на боку сервера і аднастаронкавых прыкладанняў
Апошняе дадатак, якое вы можаце стварыць, будзе выглядаць так:
Што вы даведаецеся
У гэтым прыкладзе праекта вы даведаецеся, як стварыць паўнавартасны вэб-сайт з выкарыстаннем Nuxt.js – ад пачатковай наладкі да канчатковага разгортвання.
Ён выкарыстоўвае мноства цікавых функцый, якія Nuxt можа прапанаваць, напрыклад, старонкі і кампаненты, а таксама стылізацыю з дапамогай SCSS.
Тэхнічны стэк і фічы
- Nuxt.js
- Кампаненты і старонкі
- Storyblock модуль
- Міксіны
- Vuex для кіравання станам
- SCSS для стылізацыі
- Nuxt middlewares
, Які ўключае ў сябе мноства выдатных магчымасцяў Nuxt.js. Я асабіста люблю працаваць з Nuxt, так што вам варта паспрабаваць яго, так як гэта таксама зробіць вас выдатным распрацоўшчыкам Vue.
Блог з Gatsby
Gatsby - выдатны генератар статычных сайтаў, які выкарыстоўвае React і GraphQL. Гэта вынік праекта:
Што вы даведаецеся
У гэтым кіраўніцтве вы даведаецеся, як выкарыстоўваць Gatsby для стварэння блога, які вы будзеце выкарыстоўваць для напісання сваіх уласных артыкулаў, выкарыстоўваючы React і GraphQL.
Тэхнічны стэк і фічы
- Гэтсбі
- Рэагаваць
- GraphQL
- Убудовы і тэмы
- MDX/Markdown
- Bootstrap CSS
- шаблоны
Калі вы калі-небудзь хацелі завесці блог, таго, як зрабіць яго, выкарыстоўваючы React і GraphQL.
Я не кажу, што WordPress з'яўляецца дрэнным выбарам, але з Gatsby вы можаце ствараць высокапрадукцыйныя сайты, выкарыстоўваючы React - што з'яўляецца дзіўнай камбінацыяй.
Блог з Gridsome
Gridsome для Vue… Добра, у нас ужо было гэта з Next/Nuxt.
Але тое ж самае дакладна для Gridsome і Gatsby. Абодва выкарыстоўваюць GraphQL у якасці пласта дадзеных, але Gridsome выкарыстоўвае VueJS. Гэта таксама надзвычайны генератар статычных сайтаў, які дапаможа вам ствараць выдатныя блогі:
Што вы даведаецеся
Гэты праект навучыць вас, як стварыць просты блог, каб пачаць працу з Gridsome, GraphQL і Markdown. У ім таксама расказваецца, як разгарнуць прыкладанне праз Netlify.
Тэхнічны стэк і фічы
- Змрочны
- Ую
- GraphQL
- ўцэнка
- Netlify
Гэта, вядома, не самы поўны тутарыял, але ён ахоплівае асноўныя паняцці Gridsome і .
Аўдыё плэер, падобны на SoundCloud, з дапамогай Quasar
Quasar - гэта яшчэ адзін фрэймворк Vue, які можна выкарыстоўваць для стварэння мабільных прыкладанняў. У гэтым праекце вы створыце дадатак аўдыё-плэера, напрыклад:
Што вы даведаецеся
У той час як іншыя праекты сканцэнтраваны ў асноўным на вэб-прыкладаннях, гэты пакажа вам, як стварыць мабільнае прыкладанне з выкарыстаннем Vue і фрэймворка Quasar.
У вас ужо павінна быць якая працуе Cordova з наладжанай Android Studio/Xcode. Калі не, то ў кіраўніцтве ёсць спасылка на вэб-сайт Quasar, дзе яны паказваюць, як усё наладзіць.
Тэхнічны стэк і фічы
- Quasar
- Ую
- Кордова
- WaveSurfer
- UI Кампаненты
, які дэманструе магчымасці Quasar для стварэння мабільных прыкладанняў.
Форма крэдытнай карты
Клёвая форма крэдытнай карты з гладкімі і прыемнымі мікраўзаемадзеяннямі. Уключае фарматаванне лікаў, праверку і аўтаматычнае вызначэнне тыпу карты. Яна пабудавана на Vue.js, а таксама поўнасцю адаптыўная. (Паглядзець можна .)
Чаму навучыцеся:
- Апрацоўваць і валідаваць формы
- Апрацоўваць падзеі (напрыклад, пры змене палёў)
- Разбярэцеся як адлюстроўваць і размяшчаць элементы на старонцы, асабліва дадзеныя крэдытнай карты, якая-над формы
гістаграма
Гістаграма - гэта дыяграма або графік, які ўяўляе катэгарыйныя дадзеныя з прастакутнымі слупкамі з вышынямі або даўжынямі, прапарцыйнымі значэнняў, якія яны ўяўляюць.
Яны могуць быць нанесены вертыкальна ці гарызантальна. Вертыкальная гістаграма часам называецца лінейнай дыяграмай.
Чаму навучыцеся:
- Адлюстроўваць дадзеныя ў структураваным і зразумелым выглядзе
- Дадаткова: Даведаецеся, як выкарыстоўваць элемент
canvasі як маляваць элементы з ім
вы можаце знайсці дадзеныя аб насельніцтве свету. Яны адсартаваны па гадах.
Анімацыя сэрцайка Twitter
Яшчэ ў 2016 годзе Twitter прадставіў гэтую дзіўную анімацыю для сваіх твітаў. Па стане на 2019 год яно ўсё яшчэ выглядае годна, дык чаму б не стварыць яго самастойна?
Чаму навучыцеся:
- Працаваць з CSS-атрыбутам
keyframes - Маніпуляваць і анімаваць элементы HTML
- Аб'ядноўваць JavaScript, HTML і CSS
Рэпазітары GitHub з функцыяй пошуку
Тут няма нічога незвычайнага - рэпазітары GitHub - гэта проста ўслаўлены спіс.
Задача складаецца ў тым, каб адлюстраваць рэпазітары і дазволіць карыстачу фільтраваць іх. Выкарыстоўвайце для атрымання рэпазітараў для кожнага карыстальніка.
GitHub profile page
Чаму навучыцеся:
- Атрымліваць дадзеныя з API
- Адлюстроўваць дадзеныя з API
- Фільтраваць і паказваць рэлевантныя дадзеныя для кожнага пошуку
- Дадаткова: Калі вы гатовы прыняць выклік, выкарыстоўвайце , Створаны з выкарыстаннем GraphQL. .
Чаты ў стылі Reddit
Чаты з'яўляюцца папулярным спосабам зносін дзякуючы прастаце і зручнасці выкарыстання. Але што на самой справе сілкуе сучасныя чаты? WebSockets!
Чаму навучыцеся:
- Выкарыстоўваць WebSockets, прымяняць камунікацыю ў рэжыме рэальнага часу і абнаўлення дадзеных
- Працаваць з узроўнямі доступу карыстальнікаў (напрыклад, уладальнік канала чата мае ролю
admin, а іншыя ў пакоі -user) - Апрацоўваць і валідаваць формы - памятаеце, акно чата для адпраўкі паведамлення з'яўляецца
input - Ствараць і ўступаць у розныя чаты
- Працаваць з асабістымі паведамленнямі. Карыстальнікі могуць мець зносіны з іншымі карыстальнікамі ў прыватным парадку. Па сутнасці, вы будзеце ўсталёўваць злучэнне WebSocket'а паміж двума карыстальнікамі.
Навігацыя ў стылі Stripe
Унікальнасць гэтай навігацыі заключаецца ў тым, што кантэйнер popover трансфармуецца пад змесціва. У гэтым пераходзе ёсць элегантнасць у параўнанні з традыцыйнымі паводзінамі адкрыцця і зачыненні новага паповера.
Чаму навучыцеся:
- Сумяшчаць CSS-анімацыю з пераходамі
- Зацяняць кантэнт і ўжываць актыўны клас для які перамяшчаецца элемента
Pacman
Стварыце сваю версію Pacman. Гэта выдатны спосаб атрымаць уяўленне аб тым, як распрацоўваюцца гульні, зразумець асновы. Выкарыстоўвайце JavaScript-фрэймворк, React або Vue.
Вы ведаеце:
- Як перасоўваюцца элементы
- Як вызначыць якія клавішы націскаць
- Як вызначыць момант сутыкнення
- Вы можаце не спыняцца на дасягнутым і дадаць кіраванне рухам зданяў
Прыклад гэтага праекта вы знойдзеце GitHub
Упраўленне карыстальнікамі
праект GitHub
Стварэнне дадатку тыпу CRUD для адміністравання карыстальнікаў навучыць вас асновам распрацоўкі. Гэта асабліва карысна пачаткоўцам распрацоўнікам.
Вы ведаеце:
- Што такое маршрутызацыя
- Як звяртацца з формамі для ўводу дадзеных і правяраць, што ўвёў карыстальнік
- Як працаваць з базай дадзеных - ствараць, чытаць, абнаўляць і выдаляць дзеянні
Праверка надвор'я ў вашым месцазнаходжанні
праект GitHub
Калі вы хочаце ствараць прыкладанні, пачніце з прыкладання вызначэння надвор'я. Гэты праект можна выканаць з выкарыстаннем Swift.
Акрамя атрымання досведу па стварэнні прыкладання, вы даведаецеся:
- Як працаваць з API
- Як выкарыстоўваць геолокацию
- Зрабіце дадатак больш дынамічным, дадаўшы тэкставы ўвод. У ім карыстачы змогуць увесці сваё месцазнаходжанне, каб праверыць надвор'е ў вызначаным месцы.
Вам спатрэбіцца API. Для атрымання дадзеных аб надвор'і выкарыстоўвайце API OpenWeather. Больш інфармацыі пра API OpenWeather.
Акно чата
Маё акно чата ў дзеянні, адчыненае ў двух укладках браўзэра
Стварэнне акна чата гэта ідэальны спосаб пачаць працу з сокетамі. Выбар тэхнічнага стэка велізарны. Выдатна падыдзе Node.js, напрыклад.
Вы даведаецеся, як працуюць сокеты і як іх рэалізаваць. Гэта галоўная перавага гэтага праекту.
Калі вы распрацоўшчык Laravel, які хоча працаваць з сокетамі, прачытайце маю
GitLab CI
Калі вы пачатковец у бесперапыннай інтэграцыі (CI), пагуляйце з GitLab CI. Наладзьце некалькі асяроддзяў і паспрабуйце запусціць пару тэстаў. Гэта не вельмі складаны праект, але я ўпэўнены, што вы шмат чаму навучыцеся дзякуючы яму. Многія каманды распрацоўшчыкаў у цяперашні час выкарыстоўваюць CI. Умець ім карыстацца карысна.
Вы ведаеце:
- Што такое GitLab CI
- Як сканфігураваць
.gitlab-ci.yml, які кажа карыстачу GitLab, што рабіць - Як дэплоіць у іншых асяроддзях
Аналізатар сайтаў
Зрабіце скрапер, які аналізуе семантыку вэб-сайтаў і стварае іх рэйтынг. Напрыклад, вы можаце праверыць наяўнасць адсутнічаюць alt-тэгаў на выявах. Або праверыць ці ёсць на старонцы мета тэгі SEO. Скрапер можна стварыць і без карыстацкага інтэрфейсу.
Вы ведаеце:
- Як працуе скрапер
- Як ствараць DOM селектары
- Як пісаць алгарытм
- Калі не жадаеце спыняцца на дасягнутым, стварыце карыстацкі інтэрфейс. Можна таксама скласці справаздачу аб кожным правераным вамі вэб-сайце.
Вызначэнне настрояў у сацыяльных сетках
Вызначэнне настрояў у сацыяльных сетках гэта выдатны спосаб пазнаёміцца з машынным навучаннем.
Вы можаце пачаць з аналізу толькі адной сацыяльнай сеткі. Звычайна ўсё пачынаюць з Twitter.
Калі ў вас ужо ёсць досвед працы з машынным навучаннем, паспрабуйце сабраць дадзеныя розных сацыяльных сетак і аб'яднаць іх.
Вы ведаеце:
- Што ўяўляе сабой машыннае навучанне
Клон Trello
Што вы асвоіце:
- Арганізацыя маршрутаў апрацоўкі запытаў (Routing).
- Перацягнуць.
- Як ствараць новыя аб'екты (дошкі, спісы, карткі).
- Апрацоўка і праверка ўваходных даных.
- З боку кліента: як выкарыстоўваць лакальнае сховішча, як захоўваць дадзеныя ў лакальным сховішчы, як чытаць дадзеныя з лакальнага сховішча.
- З боку сервера: як выкарыстоўваць базы дадзеных, як захоўваць дадзеныя ў базе, як чытаць дадзеныя з базы.
, зробленага на React+Redux.
Панэль адміна
Прасценькае CRUD дадатак, ідэальна падыходзіць для вывучэння асноў. Навучымся:
- Стварыць карыстальнікаў, кіраваць карыстальнікамі.
- Узаемадзейнічаць з базай дадзеных - ствараць, чытаць, рэдагаваць, выдаляць карыстальнікаў.
- Праверка ўводу і праца з формамі.
Трэкер криптовалют (натыўнае мабільнае прыкладанне)
На чым заўгодна: Swift, Objective-C, React Native, Java, Kotlin.
Вывучым:
- Як працуюць натыўныя прыкладанні.
- Як здабываць дадзеныя з API.
- Як працуюць натыўныя макеты старонак.
- Як працаваць з мабільнымі сімулятарамі.
. Знойдзеце лепш - напішыце ў каментах.
Калі цікава, вось .
Наладзіць уласны канфіг webpack з нуля
Тэхнічна, гэта не дадатак, але вельмі карысная задача, каб зразумець як працуе webpack знутры. Зараз гэта будзе не «чорная скрыня», а зразумелая прылада.
патрабаванні:
- Кампіляваць es7 у es5 (асновы).
- Кампіляваць jsx у js - ці - .vue у .js (давядзецца вывучыць загрузнікі)
- Наладзіць webpack dev server і hot module reloading. (vue-cli and create-react-app з дапамогай both)
- Выкарыстоўваць Heroku, now.sh або Github, навучыцца разгортваць webpack праекты.
- Наладзіць свой любімы прэпрацэсар, каб кампіляваць css - scss, less, stylus.
- Вывучыць як выкарыстоўваць выявы і svgs з webpack.
Клон Hackernews
Кожны джэдай абавязаны зрабіць свой уласны Hackernews.
Што вы асвоіце па дарозе:
- Як узаемадзейнічаць з hackernews API.
- Як стварыць аднастаронкавая дадатак.
- Як рэалізаваць такія фічы, як прагляд каментароў, асобных каментароў, профіляў.
- Арганізацыя маршрутаў апрацоўкі запытаў (Routing).
Тудушачка
Сур'ёзна? Тудушка? Іх жа тысячы. Але паверце, ёсць прычына такой папулярнасці.
Туды-дадатак - гэта выдатны спосаб пераканацца, што разумееш асновы. Паспрабуйце напісаць адно прыкладанне на ванільным Javascript і адно на сваім любімым фрэймворку.
Навучыцеся:
- Ствараць новыя задачы.
- Правяраць запаўненне палёў.
- Фільтраваць задачы (завершаная, актыўная, усё). Выкарыстоўвайце
filterиreduce. - Разумець асновы Javascript.
Сартаваны drag and drop спіс
Вельмі карысна, каб зразумець .
Навучымся:
- Drag and drop API
- Ствараць rich UIs
Клон месэнджэра (натыўнае дадатак)
Вы будзеце разумець як працуюць і вэб прыкладанні і натыўныя прыкладанні, што вылучыць вас з шэрай масы.
Што вывучым:
- Web sockets (імгненныя паведамленні)
- Як працуюць натыўныя прыкладанні.
- Як працуюць шаблоны ў натыўных дадатках.
- Арганізацыя маршрутаў апрацоўкі запытаў у натыўных дадатках.
Тэкставы рэдактар
Мэта тэкставага рэдактара - паменшыць намаганні карыстальнікаў, якія спрабуюць пераўтварыць іх фарматаванне як валідную разметку HTML. Добры тэкставы рэдактар дазваляе карыстальнікам фарматаваць тэкст па-рознаму.
У нейкі момант кожны выкарыстоўваў тэкставы рэдактар. Дык чаму б не ?
Клон Reddit
- Гэта агрэгацыя сацыяльных навін, рэйтынг вэб-кантэнту і сайт для абмеркаванняў.
Reddit - займае большую частку майго часу, але я працягваю завісаць на ім. Стварэнне клона Reddit - гэта эфектыўны спосаб вывучэння праграмавання (пры адначасовым праглядзе Reddit).
Reddit дае вам вельмі багаты. Не ўпускайце якія-небудзь функцыі і не рабіце як патрапіла. У рэальным свеце з кліентамі і пакупнікамі, вы не зможаце працаваць як патрапіла, ці вы хутка страціце працу.
Разумныя кліенты адразу ж здагадаюцца, што праца выконваецца дрэнна, і знойдуць некага іншага.
Публікацыя пакета NPM з адкрытым зыходным кодам
Калі вы пішыце код на Javascript, хутчэй за ўсё, вы карыстаецеся мэнэджар пакетаў. Мэнэджар пакетаў дазваляе паўторна выкарыстоўваць існуючы код, які напісалі і апублікавалі іншыя людзі.
Разуменне поўнага цыклу распрацоўкі пакета дасць вельмі добры досвед. Ёсць шмат рэчаў, якія вам трэба ведаць пры публікацыі кода. Вам трэба падумаць аб бяспецы, семантычным кіраванні версіямі, маштабаванасці, дамовах аб імёнах і абслугоўванні.
Пакет можа быць любым. Калі ў вас няма ідэі, стварыце свой уласны Lodash і апублікуйце яго.
Lodash:
Наяўнасць чагосьці, што вы зрабілі ў Інтэрнэце, ставіць вас на 10% вышэй за іншых. аб адкрытых крыніцах і пакетах.
Навучальны план freeCodeCamp
freeCodecamp сабраў вельмі .
freeCodeCamp - гэта некамерцыйная арганізацыя. Яна складаецца з інтэрактыўнай навучальнай вэб-платформы, анлайн-форуму супольнасці, чатаў, публікацый Medium і мясцовых арганізацый, якія маюць намер зрабіць даступным для ўсіх вывучэнне вэб-распрацоўкі.
Вы будзеце больш за кваліфікаваныя для сваёй першай працы, калі вам атрымаецца завяршыць увесь курс.
Стварыце HTTP-сервер з нуля
Пратакол HTTP з'яўляецца адным з асноўных пратаколаў, па якіх кантэнт пападае ў Інтэрнэце. HTTP-серверы выкарыстоўваюцца для абслугоўвання статычнага кантэнту, такога як HTML, CSS і JS.
Магчымасць рэалізаваць пратакол HTTP з нуля пашырыць вашыя веды аб тым, як усё ўзаемадзейнічае.
Напрыклад, калі вы выкарыстоўваеце NodeJs, тыя вы ведаеце што Express падае HTTP-сервер.
Для даведкі, паглядзіце, ці зможаце вы:
- Наладзіць сервер без выкарыстання якіх-небудзь бібліятэк
- Сервер павінен абслугоўваць змесціва HTML, CSS і JS.
- Укараненне маршрутызатара з нуля
- Сачыць за зменамі і абнаўляць сервер
Калі вы не ведаеце з чаго, скарыстайцеся і паспрабуйце стварыць HTTP-сервер з нуля.
Дэсктопнае прыкладанне для нататак
Мы ўсё робім нататкі, ці не так?
Давайце створым прыкладанне для нататак. З дадаткам неабходна захоўваць нататкі і сінхранізаваць іх з базай дадзеных. Стварыце натыўнае дадатак з дапамогай Electron, Swift ці чагосьці яшчэ, што вам падабаецца, і што падыходзіць для вашай сістэмы.
Не саромейцеся спалучаць гэта з першым челленджом(тэкставы рэдактар).
У якасці бонуса паспрабуйце сінхранізаваць дэсктопную версію з вэб-версіяй.
Падкасты (клон Overcast)
Хто не слухае падкасты?
Стварыце вэб-дадатак з наступнымі функцыямі:
- Завесці рахунак
- Пошук падкастаў
- Ацэньваць і падпісвацца на падкасты
- Прыпынак і прайграванне, змена хуткасці, функцыі наперад і назад на 30 секунд.
У якасці адпраўной кропкі паспрабуйце выкарыстоўваць iTunes API. Калі вы ведаеце якія-небудзь іншыя рэсурсы, напішыце ў каментарах.
Захоп экрана
Прывітанне! Я здымаю свой экран прама зараз!
Стварыце дэсктопнае ці вэб-дадатак, якое дазволіць вам захапіць ваш экран і захаваць кліп як .gif
Вось , як дабіцца гэтага.
крыніцы
Крыніца: habr.com