1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в 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 як истиораи эҷодиёти муштарак аст, ки ҳар кас метавонад эҷодкор бошад ва дар як кори умумӣ саҳм гузорад.
Ҳангоми сохтани лоиҳаи қабати худ шумо чиро меомӯзед:
- Чӣ тавр рони JavaScript кор мекунад Донистани тарзи кор кардани рони як маҳорати муҳим дар бисёр барномаҳост.
- Чӣ тавр ҳамоҳанг кардани иҷозатҳои корбар. Ҳар як корбар метавонад бидуни ворид шудан ба система ҳар 15 дақиқа як пиксел кашад.
- Сеансҳои кукиҳо эҷод кунед.
Шабака
Squoosh як барномаи фишурдани тасвир бо бисёр имконоти пешрафта мебошад.
GIF 20 МБ
Бо эҷод кардани версияи шахсии Squoosh шумо меомӯзед:
- Чӣ тавр бо андозаи тасвирҳо кор кардан мумкин аст
- Асосҳои API-и Drag'n'Drop-ро омӯзед
- Фаҳмидани чӣ гуна API ва шунавандагони рӯйдодҳо кор мекунанд
- Чӣ гуна файлҳоро бор кардан ва содир кардан мумкин аст
Эзоҳ: Компрессори тасвирӣ маҳаллӣ аст. Ба сервер фиристодани маълумоти иловагӣ шарт нест. Шумо метавонед компрессорро дар хона дошта бошед, ё шумо метавонед онро дар сервер истифода баред, интихоби шумо.
Калкулятор
Биё? Ҷиддӣ? Ҳисобкунак? Ҳа, айнан ҳисобкунак. Фаҳмидани асосҳои амалҳои математикӣ ва чӣ тавр якҷоя кор кардани онҳо як маҳорати муҳим барои содда кардани барномаҳои шумост. Дер ё зуд шумо бояд бо рақамҳо сарукор кунед ва ҳар қадар зудтар беҳтар аст.
Бо сохтани ҳисобкунаки шахсии худ шумо меомӯзед:
- Бо рақамҳо ва амалҳои математикӣ кор кунед
- Бо API шунавандагони рӯйдодҳо машқ кунед
- Чӣ тавр ба тартиб андохтани элементҳо, фаҳмидани услубҳо
Crawler (муҳаррики ҷустуҷӯ)
Ҳама як системаи ҷустуҷӯиро истифода кардаанд, пас чаро худатонро эҷод накунед? Барои ҷустуҷӯи маълумот краулерҳо лозиманд. Ҳама аз онҳо ҳар рӯз истифода мебаранд ва талабот ба ин технология ва мутахассисон танҳо бо мурури замон афзоиш хоҳад ёфт.
Системаи ҷустуҷӯии Google
Бо эҷод кардани системаи ҷустуҷӯии худ шумо чиро меомӯзед:
- Чӣ тавр кролерҳо кор мекунанд
- Чӣ тавр индексатсия кардани сайтҳо ва чӣ гуна онҳоро аз рӯи рейтинг ва эътибор баҳо додан
- Чӣ тавр нигоҳ доштани сайтҳои индексатсияшуда дар пойгоҳи додаҳо ва чӣ гуна кор кардан бо пойгоҳи додаҳо
Плеери мусиқӣ (Spotify, Apple Music)
Ҳама мусиқӣ гӯш мекунанд - он танҳо як қисми ҷудонашавандаи ҳаёти мост. Биёед як плеери мусиқӣ эҷод кунем, то беҳтар фаҳмем, ки механикаи асосии платформаи ҷараёнҳои мусиқии муосир чӣ гуна кор мекунад.
Spotify
Бо эҷод кардани платформаи ҷараёнҳои мусиқии худ шумо чиро меомӯзед:
- Чӣ тавр бо API кор кардан мумкин аст. API-ро аз Spotify ё Apple Music истифода баред
- Чӣ тавр бозӣ кардан, таваққуф кардан ё бозгашт ба суруди навбатӣ/ гузашта
- Чӣ тавр тағир додани ҳаҷми
- Чӣ тавр идора кардани масири корбар ва таърихи браузер
Барномаи ҷустуҷӯи филмҳо бо истифода аз React (бо қалмоқҳо)
Аввалин чизе, ки шумо метавонед аз он оғоз кунед, ин сохтани барномаи ҷустуҷӯии филм бо истифода аз React мебошад. Дар зер тасвири он аст, ки аризаи ниҳоӣ чӣ гуна хоҳад буд:
Шумо чӣ меомӯзед
Бо сохтани ин барнома, шумо малакаҳои React-и худро бо истифода аз API-и нисбатан нави Hooks такмил медиҳед. Лоиҳаи намунавӣ ҷузъҳои React, миқдори зиёди қалмоқҳо, API-и беруна ва албатта баъзе услубҳои CSS-ро истифода мебарад.
Стек ва хусусиятҳои техникӣ
- Вокуниш ба қалмоқҳо
- эҷод-реакция-барнома
- JSX
- CSS
Бе истифодаи ягон синф, ин лоиҳаҳо ба шумо нуқтаи мукаммали вуруд ба React функсионалӣ медиҳанд ва бешубҳа ба шумо дар соли 2020 кӯмак хоҳанд кард. пайдо карда метавонед . Дастурҳоро иҷро кунед ё онро худатон созед.
Барномаи сӯҳбат бо Vue
Дигар лоиҳаи олӣ барои шумо эҷод кардани як барномаи чат бо истифода аз китобхонаи дӯстдоштаи JavaScript ман: VueJS мебошад. Ариза чунин хоҳад буд:
Шумо чӣ меомӯзед
Дар ин дастур, шумо мефаҳмед, ки чӣ тавр як барномаи Vue -ро аз сифр созед - эҷоди ҷузъҳо, коркарди ҳолат, эҷоди масирҳо, пайвастшавӣ ба хидматҳои тарафи сеюм ва ҳатто коркарди аутентификатсия.
Стек ва хусусиятҳои техникӣ
- Vue
- vuex
- Vue роутер
- Vue CLI
- Перушер
- CSS
Ин як лоиҳаи воқеан олӣ барои оғоз кардан бо Vue ё такмил додани малакаҳои мавҷудаи шумо барои рушд дар соли 2020 аст. пайдо карда метавонед .
Барномаи зебои обу ҳаво бо Angular 8
Ин мисол ба шумо кӯмак мекунад, ки бо истифода аз Angular 8 як барномаи зебои обу ҳаво эҷод кунед:
Шумо чӣ меомӯзед
Ин лоиҳа ба шумо малакаҳои арзишмандро дар сохтани барномаҳо аз сифр таълим медиҳад - аз тарҳрезӣ то таҳия, то як барномаи барои густариш.
Стек ва хусусиятҳои техникӣ
- Кунҷӣ 8
- Сӯхтор
- Намоиши тарафи сервер
- CSS бо Grid ва Flexbox
- Мобилӣ дӯстона ва мутобиқшавӣ
- Ҳолати тира
- Интерфейси зебо
Он чизе ки ман дар ин лоиҳаи фарогир дар ҳақиқат дӯст медорам, ин аст, ки шумо чизҳоро дар алоҳидагӣ намеомӯзед. Ба ҷои ин, шумо тамоми раванди рушдро аз тарҳрезӣ то ҷойгиркунии ниҳоӣ меомӯзед.
Барномаи барои кор бо истифода аз Svelte
Svelte ба кӯдаки нав дар равиши компонентҳо монанд аст - ҳадди аққал ба React, Vue ва Angular монанд аст. Ва ин яке аз гармтарин маҳсулоти нав барои соли 2020 мебошад.
Барномаҳои кор ҳатман мавзӯи гармтарин нестанд, аммо он воқеан ба шумо дар такмил додани малакаҳои Svelte-и худ кӯмак мекунад. Ин чунин хоҳад буд:
Шумо чӣ меомӯзед
Ин дастур ба шумо нишон медиҳад, ки чӣ тавр аз аввал то ба охир барномаро бо истифода аз Svelte 3 эҷод кунед. Шумо ҷузъҳо, ороиш ва коркардкунандагони рӯйдодҳоро истифода мебаред
Стек ва хусусиятҳои техникӣ
- Свелт 3
- Ҷузъҳо
- Тарзи бо CSS
- Синтаксиси ES 6
Бисёр лоиҳаҳои хуби ибтидоии Svelte нест, бинобар ин ман пайдо кардам .
Барномаи тиҷорати электронӣ бо истифода аз Next.js
Next.js маъмултарин чаҳорчӯба барои сохтани замимаҳои React мебошад, ки аз қуттӣ коркарди серверро дастгирӣ мекунад.
Ин лоиҳа ба шумо нишон медиҳад, ки чӣ тавр сохтани як барномаи тиҷорати электронӣ, ки ба ин монанд аст:
Шумо чӣ меомӯзед
Дар ин лоиҳа, шумо мефаҳмед, ки чӣ тавр бо Next.js таҳия кардан — эҷод кардани саҳифаҳо ва ҷузъҳои нав, истихроҷи маълумот ва услуб ва ҷойгиркунии барномаи Next.
Стек ва хусусиятҳои техникӣ
- Next.js
- Компонентҳо ва саҳифаҳо
- Намунаи маълумот
- Стилизатсия
- Ҷойгиркунии лоиҳа
- РСС ва SPA
Доштани намунаи воқеии ҷаҳонӣ ба мисли як барномаи тиҷорати электронӣ барои омӯхтани чизи нав ҳамеша хуб аст. Ту метавонӣ .
Блоги мукаммали бисёрзабона бо Nuxt.js
Nuxt.js барои Vue аст, он чизест, ки Next.js барои React аст: чаҳорчӯбаи олӣ барои муттаҳид кардани қудрати намоиши сервер ва замимаҳои яксаҳифа
Замимаи ниҳоӣ, ки шумо метавонед эҷод кунед, чунин хоҳад буд:
Шумо чӣ меомӯзед
Дар ин лоиҳаи намунавӣ, шумо мефаҳмед, ки чӣ тавр сохтани вебсайти мукаммал бо истифода аз Nuxt.js, аз насби аввал то ҷойгиркунии ниҳоӣ.
Он аз бисёр хусусиятҳои ҷолибе, ки Nuxt пешкаш мекунад, ба монанди саҳифаҳо ва ҷузъҳо ва ороиш бо SCSS истифода мебарад.
Стек ва хусусиятҳои техникӣ
- Nuxt.js
- Компонентҳо ва саҳифаҳо
- Модули Storyblock
- Ҳагфиш
- Vuex барои идоракунии давлатӣ
- SCSS барои ороиши
- Миёнаравҳои Nuxt
, ки дорои бисёр хусусиятҳои бузурги Nuxt.js. Ман шахсан кор карданро бо Nuxt дӯст медорам, бинобар ин шумо бояд онро санҷед, зеро он инчунин шуморо як таҳиягари олии Vue хоҳад кард.
Блог бо Гэтсби
Gatsby як генератори аълои сайти статикӣ бо истифода аз React ва GraphQL мебошад. Ин натиҷаи лоиҳа аст:
Шумо чӣ меомӯзед
Дар ин дарс, шумо мефаҳмед, ки чӣ тавр истифода бурдани Gatsby барои сохтани блоге, ки шумо барои навиштани мақолаҳои худ бо истифода аз React ва GraphQL истифода мебаред.
Стек ва хусусиятҳои техникӣ
- Гэтсби
- Натиҷа
- GraphQL
- Плагинҳо ва мавзӯъҳо
- MDX/Markdown
- Bootstrap CSS
- Шаблонҳо
Агар шумо ягон вақт мехостед блогро оғоз кунед, дар бораи чӣ гуна сохтани он бо истифода аз React ва GraphQL.
Ман намегӯям, ки WordPress интихоби бад аст, аммо бо Гэтсби шумо метавонед бо истифода аз React вебсайтҳои баландсифат созед - ин як комбинатсияи аҷиб аст.
Блог бо Gridsome
Gridsome for Vue ... Хуб, мо инро аллакай бо Next/Nuxt доштем.
Аммо ҳамин чиз барои Gridsome ва Gatsby дахл дорад. Ҳарду GraphQL-ро ҳамчун қабати додаҳои худ истифода мебаранд, аммо Gridsome VueJS-ро истифода мебарад. Ин инчунин як генератори аҷиби сайти статикӣ аст, ки ба шумо дар эҷод кардани блогҳои олӣ кӯмак мекунад:
Шумо чӣ меомӯзед
Ин лоиҳа ба шумо таълим медиҳад, ки чӣ гуна блоги оддиеро эҷод кунед, то бо Gridsome, GraphQL ва Markdown оғоз кунед. Он инчунин чӣ гуна ҷойгиркунии барномаро тавассути Netlify фаро мегирад.
Стек ва хусусиятҳои техникӣ
- Тоза
- Vue
- GraphQL
- Нишондиҳанда
- Netlify
Ин бешубҳа дастури мукаммалтарин нест, аммо он мафҳумҳои асосии Gridsome ва .
Плеери аудио ба монанди SoundCloud бо истифода аз Quasar
Quasar чаҳорчӯбаи дигари Vue аст, ки метавонад барои эҷоди замимаҳои мобилӣ истифода шавад. Дар ин лоиҳа шумо як барномаи плеери аудио эҷод мекунед, масалан:
Шумо чӣ меомӯзед
Дар ҳоле, ки лоиҳаҳои дигар асосан ба барномаҳои веб тамаркуз мекунанд, ин лоиҳа ба шумо нишон медиҳад, ки чӣ гуна барномаи мобилиро бо истифода аз Vue ва чаҳорчӯбаи Quasar эҷод кунед.
Шумо бояд аллакай кордоваро бо Android Studio/Xcode танзим карда бошед. Дар акси ҳол, дастур дорои истинод ба вебсайти Quasar мебошад, ки дар он онҳо ба шумо чӣ гуна танзим кардани ҳама чизро нишон медиҳанд.
Стек ва хусусиятҳои техникӣ
- Квазар
- Vue
- Кордова
- WaveSurfer
- Компонентҳои UI
, нишон додани имкониятҳои Quasar барои эҷоди замимаҳои мобилӣ.
Форма кредитной карты
Шакли хуби корти кредитӣ бо микро-ҳамкории ҳамвор ва лаззатбахш. Форматкунии рақам, санҷиш ва муайянкунии автоматии навъи кортро дар бар мегирад. Он дар Vue.js сохта шудааст ва инчунин комилан ҷавобгӯ аст. (Шумо мебинед .)
Шумо чӣ меомӯзед:
- Шаклҳоро коркард ва тасдиқ кунед
- Ҳодисаҳоро идора кунед (масалан, вақте ки майдонҳо тағир меёбанд)
- Бифаҳмед, ки чӣ гуна нишон додан ва ҷойгир кардани унсурҳо дар саҳифа, махсусан маълумоти корти кредитӣ, ки дар болои форма пайдо мешавад
штрих-граф
Гистограмма як диаграмма ё графикест, ки маълумоти категорияиро бо сутунҳои росткунҷа бо баландӣ ё дарозии мутаносиб ба арзишҳои онҳо ифода мекунад.
Онҳо метавонанд амудӣ ё уфуқӣ татбиқ карда шаванд. Диаграммаи сатри амудиро баъзан диаграммаи хатӣ меноманд.
Шумо чӣ меомӯзед:
- Намоиши маълумот ба таври сохторӣ ва фаҳмо
- Илова бар ин: Чӣ тавр истифода бурдани элементро омӯзед
canvasва бо он чӣ гуна элементҳоро кашидан мумкин аст
шумо метавонед маълумотҳои аҳолии ҷаҳонро пайдо кунед. Онҳо аз рӯи солҳо ҷудо карда мешаванд.
Анимация сердечка Twitter
Дар соли 2016, Twitter ин аниматсияи аҷибро барои твитҳои худ муаррифӣ кард. Аз соли 2019, он то ҳол қисмат ба назар мерасад, пас чаро худатон онро эҷод накунед?
Шумо чӣ меомӯзед:
- Бо атрибути CSS кор кунед
keyframes - Элементҳои HTML-ро идора ва аниматсия кунед
- JavaScript, HTML ва CSS-ро якҷоя кунед
Репозитории GitHub с функцией поиска
Дар ин ҷо ҳеҷ чизи аҷибе нест - анборҳои GitHub танҳо як рӯйхати ҷалол мебошанд.
Мақсад ин намоиш додани анборҳо ва ба корбар имкон медиҳад, ки онҳоро филтр кунад. Истифода баред то барои ҳар як корбар анборҳо гиред.
Саҳифаи профили GitHub -
Шумо чӣ меомӯзед:
- Аз API маълумот гиред
- Намоиши маълумот аз API
- Барои ҳар як ҷустуҷӯ маълумоти мувофиқро филтр кунед ва нишон диҳед
- Ихтиёрӣ: Агар шумо барои душворӣ омода бошед, истифода баред , бо истифода аз GraphQL сохта шудааст. .
Чаты в стиле Reddit
Чатҳо бо сабаби содда ва осонии истифодаашон як роҳи маъмули муошират мебошанд. Аммо чӣ воқеан утоқҳои чатҳои муосирро таъмин мекунад? WebSockets!
Шумо чӣ меомӯзед:
- WebSockets, иртибот дар вақти воқеӣ ва навсозиҳои маълумотро истифода баред
- Бо сатҳҳои дастрасии корбар кор кунед (масалан, соҳиби канали чат нақш дорад
admin, ва дигарон дар ҳуҷра -user) - Шаклҳоро коркард ва тасдиқ кунед - дар хотир доред, ки равзанаи чат барои фиристодани паём аст
input - Чатҳои гуногун эҷод кунед ва ҳамроҳ шавед
- Бо паёмҳои шахсӣ кор кунед. Истифодабарандагон метавонанд бо корбарони дигар ба таври хусусӣ сӯҳбат кунанд. Аслан, шумо байни ду корбар пайвасти WebSocket барқарор мекунед.
Навигация в стиле Stripe
Он чизе ки ин навигатсияро беназир мегардонад, он аст, ки контейнери попов ба мундариҷа мувофиқат мекунад. Дар муқоиса бо рафтори анъанавии кушодан ва пӯшидани поповери нав шевоӣ дар ин гузариш вуҷуд дорад.
Шумо чӣ меомӯзед:
- Аниматсияҳои 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
Шумо чӣ меомӯзед:
- Ташкили хатсайрҳои коркарди дархост (Рутинг).
- Кашола карда партоед.
- Чӣ тавр сохтани объектҳои нав (тахтаҳо, рӯйхатҳо, кортҳо).
- Коркард ва тафтиши маълумоти воридотӣ.
- Аз ҷониби муштарӣ: чӣ гуна истифода бурдани нигаҳдории маҳаллӣ, чӣ гуна захира кардани маълумот дар нигаҳдории маҳаллӣ, чӣ гуна хондани маълумот аз анбори маҳаллӣ.
- Аз ҷониби сервер: чӣ гуна истифода бурдани пойгоҳи додаҳо, чӣ гуна захира кардани маълумот дар пойгоҳи додаҳо, чӣ гуна хондани маълумот аз пойгоҳи додаҳо.
, дар React+Redux сохта шудааст.
Панель админа
Замимаи оддии CRUD, ки барои омӯзиши асосҳо беҳтарин аст. Биёед омӯзем:
- Истифодабарандагон эҷод кунед, корбаронро идора кунед.
- Бо пойгоҳи додаҳо ҳамкорӣ кунед - корбаронро эҷод, хонед, таҳрир кунед, нест кунед.
- Тасдиқи воридот ва кор бо шаклҳо.
Трекер криптовалют (нативное мобильное приложение)
Ҳама чиз: Swift, Objective-C, React Native, Java, Kotlin.
Биёед омӯзем:
- Чӣ тавр барномаҳои маҳаллӣ кор мекунанд.
- Чӣ тавр маълумотро аз API гирифтан мумкин аст.
- Тарҳҳои саҳифаи аслӣ чӣ гуна кор мекунанд.
- Чӣ тавр кор кардан бо симуляторҳои мобилӣ.
. Агар шумо чизи беҳтареро пайдо кунед, дар шарҳҳо нависед.
Агар шумо таваҷҷӯҳ дошта бошед, ин ҷост .
Настроить собственный конфиг webpack с нуля
Аз ҷиҳати техникӣ, ин як барнома нест, аммо ин як вазифаи хеле муфид барои фаҳмидани чӣ гуна кор кардани webpack аз дарун аст. Акнун он на «қуттии сиёҳ», балки воситаи фаҳмо хоҳад буд.
Талабот:
- es7 то es5 тартиб диҳед (асосҳо).
- Тартиб додани jsx ба js - ё - .vue ба .js (шумо бояд боркунакҳоро омӯзед)
- Сервери dev webpack ва дубора боркунии модули гармро насб кунед. (vue-cli ва create-react-app ҳардуро истифода мебаранд)
- Heroku, now.sh ё Github -ро истифода баред, чӣ гуна ҷойгир кардани лоиҳаҳои вебпактро омӯзед.
- Барои тартиб додани css - scss, камтар, стилус, протсессори дӯстдоштаи худро насб кунед.
- Омӯзед, ки чӣ тавр истифода бурдани тасвирҳо ва svgs бо webpack.
Клон Hackernews
Ҳар як Ҷедӣ талаб карда мешавад, ки Hackernews-и худро созад.
Он чизеро, ки шумо дар ин роҳ меомӯзед:
- Чӣ тавр бо API hackernews ҳамкорӣ кардан мумкин аст.
- Чӣ тавр сохтани як барномаи як саҳифа.
- Чӣ тавр амалӣ кардани хусусиятҳо ба монанди дидани шарҳҳо, шарҳҳои инфиродӣ, профилҳо.
- Ташкили хатсайрҳои коркарди дархост (Рутинг).
Тудушечка
Ҷиддӣ? Тудушка? Ҳазорон нафари онҳо ҳастанд. Аммо бовар кунед, ки ин маъруфият сабаб дорад.
Барномаи Tudu як роҳи олиест барои боварӣ ҳосил кардан, ки шумо асосҳоро мефаҳмед. Кӯшиш кунед, ки як барнома дар Javascript ванилӣ ва як барномаро дар чаҳорчӯбаи дӯстдоштаи худ нависед.
Омӯзед:
- Вазифаҳои нав эҷод кунед.
- Санҷед, ки майдонҳо пур карда шудаанд.
- Вазифаҳои филтр (анҷомшуда, фаъол, ҳама). Истифода баред
filterиreduce. - Асосҳои Javascript-ро фаҳмед.
Сортируемый drag and drop список
Барои фаҳмидан хеле муфид аст .
Биёед омӯзем:
- API-ро кашола карда партоед
- UI-ҳои бой эҷод кунед
Клон мессенджера (нативное приложение)
Шумо мефаҳмед, ки чӣ тавр ҳам барномаҳои веб ва ҳам барномаҳои маҳаллӣ кор мекунанд, ки шуморо аз массаи хокистарӣ фарқ мекунанд.
Он чизе ки мо меомӯзем:
- Сокетҳои веб (паёмҳои фаврӣ)
- Чӣ тавр барномаҳои маҳаллӣ кор мекунанд.
- Чӣ тавр қолибҳо дар барномаҳои маҳаллӣ кор мекунанд.
- Ташкили хатсайрҳои коркарди дархост дар замимаҳои маҳаллӣ.
Муҳаррири матн
Мақсади муҳаррири матн ин кам кардани саъю кӯшиши корбарон барои табдил додани формати худ ба аломати дурусти HTML мебошад. Муҳаррири хуби матн ба корбарон имкон медиҳад, ки матнро бо роҳҳои гуногун формат кунанд.
Дар баъзе мавридҳо ҳама аз муҳаррири матн истифода кардаанд. Пас чаро не ?
Клон Reddit
маҷмӯи ахборҳои иҷтимоӣ, рейтинги мундариҷаи веб ва сайти мубоҳисавӣ мебошад.
Reddit бештари вақти маро мегирад, аммо ман дар он сӯҳбат карданро идома медиҳам. Эҷоди клони Reddit як роҳи самараноки омӯзиши барномасозӣ мебошад (ҳангоми дидани Reddit ҳамзамон).
Reddit ба шумо як чизи хеле бой медиҳад. Ҳеҷ гуна хусусиятро тарк накунед ё корҳоро тасодуфан иҷро накунед. Дар ҷаҳони воқеӣ бо мизоҷон ва муштариён, шумо наметавонед ба таври тасодуфӣ кор кунед, вагарна шумо зуд коратонро аз даст медиҳед.
Мизоҷони оқил фавран дарк мекунанд, ки кор бад анҷом дода мешавад ва каси дигарро пайдо мекунад.
Публикация пакета NPM с открытым исходным кодом
Агар шумо рамзи Javascript нависед, эҳтимол шумо мудири бастаро истифода мебаред. Менеҷери бастаҳо ба шумо имкон медиҳад, ки рамзи мавҷударо, ки одамони дигар навишта ва нашр кардаанд, дубора истифода баред.
Фаҳмидани давраи пурраи таҳияи баста таҷрибаи хеле хуб фароҳам меорад. Ҳангоми нашри код шумо бояд чизҳои зиёдеро донед. Шумо бояд дар бораи амният, версияи семантикӣ, миқёспазирӣ, конвенсияҳои номгузорӣ ва нигоҳдорӣ фикр кунед.
Баста метавонад ҳама чиз бошад. Агар шумо идея надошта бошед, Лодаши худро созед ва онро нашр кунед.
Лодаш:
Доштани коре, ки шумо онлайн кардаед, шуморо 10% аз дигарон болотар мегузорад. дар бораи манбаъҳои кушода ва бастаҳо.
Учебный план freeCodeCamp
freeCodecamp бисёр ҷамъоварӣ кардааст .
freeCodeCamp як ташкилоти ғайритиҷоратӣ аст. Он аз платформаи омӯзишии интерактивӣ дар асоси веб, форуми ҷомеаи онлайн, утоқҳои чат, нашрияҳои миёна ва созмонҳои маҳаллӣ иборат аст, ки ният доранд омӯзиши вебро барои ҳама дастрас кунанд.
Агар шумо тамоми курсро ба итмом расонед, шумо барои кори аввалини худ беш аз тахассус хоҳед буд.
Создайте HTTP-сервер с нуля
Протоколи HTTP яке аз протоколҳои асосӣест, ки тавассути он мундариҷа дар Интернет ҳаракат мекунад. Серверҳои HTTP барои хидматрасонии мундариҷаи статикӣ ба монанди HTML, CSS ва JS истифода мешаванд.
Қобилияти татбиқи протоколи HTTP аз сифр дониши шуморо дар бораи он ки чӣ тавр корҳо бо ҳам амал мекунанд, васеъ мекунанд.
Масалан, агар шумо NodeJs -ро истифода баред, пас шумо медонед, ки Express сервери HTTP-ро таъмин мекунад.
Барои маълумот, бубинед, ки оё шумо метавонед:
- Серверро бидуни истифодаи ягон китобхона насб кунед
- Сервер бояд мундариҷаи HTML, CSS ва JS хидмат кунад.
- Татбиқи роутер аз сифр
- Тағиротро назорат кунед ва серверро навсозӣ кунед
Агар шумо намедонед, ки чаро, истифода баред ва кӯшиш кунед, ки сервери HTTP эҷод кунед аз сифр.
Десктопное приложение для заметок
Мо ҳама қайд мекунем, ҳамин тавр не?
Биёед як барномаи қайдҳо эҷод кунем. Барнома бояд қайдҳоро захира кунад ва онҳоро бо базаи маълумот ҳамоҳанг созад. Бо истифода аз Electron, Swift ё ҳар чизе ки ба шумо маъқул аст ва он чизе, ки барои системаи шумо кор мекунад, як барномаи ватанӣ созед.
Озод ҳис кунед, ки инро бо мушкилоти аввал (муҳаррири матн) якҷоя кунед.
Ҳамчун бонус, кӯшиш кунед, ки версияи мизи кории худро бо версияи веб ҳамоҳанг созед.
Подкасты (клон Overcast)
Кӣ подкастҳоро гӯш намекунад?
Барномаи вебро бо функсияҳои зерин эҷод кунед:
- Ҳисоб кушоед
- Ҷустуҷӯи подкастҳо
- Ба подкастҳо баҳо диҳед ва обуна шавед
- Қатъ кунед ва бозӣ кунед, суръат, функсияҳои пеш ва ақибро барои 30 сония тағир диҳед.
Кӯшиш кунед, ки iTunes API-ро ҳамчун нуқтаи ибтидоӣ истифода баред. Агар шумо ягон захираҳои дигарро медонед, лутфан дар шарҳҳо нависед.
Сабти экран
Салом! Ман ҳоло экрани худро наворбардорӣ мекунам!
Як барномаи мизи корӣ ё веб эҷод кунед, ки ба шумо имкон медиҳад экрани худро сабт кунед ва клипро ҳамчун сабт кунед .gif
дар ин ҷо ба ин чй тавр ноил шудан мумкин аст.
Манбаъҳои иттилоот
Манбаъ: will.com