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.
Эскертүү: бул жерде .
Подборка проектов из предыдущих публикаций.
катмар
Катмар - бул жалпы "тактага" пиксел тартуучу жамаат. Баштапкы идея Redditте пайда болгон. r/Layer коомчулугу – бул ар бир адам жаратуучу болуп, жалпы ишке салым кошо ала турган жалпы чыгармачылыктын метафорасы.
Өзүңүздүн Layer долбоорун түзүүдө эмнени үйрөнөсүз:
- JavaScript canvas кантип иштейт Кенепти кантип иштетүүнү билүү көптөгөн тиркемелерде маанилүү жөндөм болуп саналат.
- Колдонуучунун уруксаттарын кантип координациялоо керек. Ар бир колдонуучу кирбей туруп, ар бир 15 мүнөт сайын бир пиксел тарта алат.
- Cookie сеанстарын түзүңүз.
Squoosh
Squoosh - көптөгөн өркүндөтүлгөн параметрлери бар сүрөттү кысуу колдонмосу.
GIF 20 МБ
Өзүңүздүн Squoosh версияңызды түзүү менен сиз төмөнкүлөрдү үйрөнөсүз:
- Сүрөт өлчөмү менен кантип иштөө керек
- Drag'n'Drop API негиздерин үйрөнүңүз
- API жана окуя угуучулар кантип иштээрин түшүнүңүз
- Файлдарды кантип жүктөө жана экспорттоо керек
Эскертүү: Сүрөт компрессору жергиликтүү. Серверге кошумча маалыматтарды жөнөтүүнүн кереги жок. Сиз компрессорду үйдө болсоңуз болот же серверде колдоно аласыз, өзүңүз каалагандай.
эсептегич
Койсоңчу? Олуттуубу? Calculator? Ооба, так, калькулятор. Математикалык операциялардын негиздерин жана алардын чогуу иштешин түшүнүү сиздин тиркемелериңизди жөнөкөйлөтүү үчүн маанилүү жөндөм болуп саналат. Эртеби, кечпи, сиз сандар менен күрөшүүгө туура келет жана канчалык эрте болсо, ошончолук жакшы.
Өзүңүздүн калькуляторуңузду түзүү менен сиз төмөнкүлөрдү үйрөнөсүз:
- Сандар жана математикалык амалдар менен иштөө
- Окуя угуучулар API менен машыгыңыз
- Элементтерди кантип жайгаштыруу, стилдерди түшүнүү
Crawler (Издөө каражаты)
Ар бир адам издөө механизмин колдонду, анда эмне үчүн өзүңүздүнүңүздүкүңүздү түзбөйсүз? Crawlers маалымат издөө үчүн керек. Ар бир адам аларды күн сайын колдонот жана бул технологияга жана адистерге суроо-талап убакыттын өтүшү менен гана өсөт.
Google издөө системасы
Өзүңүздүн издөө системаңызды түзүү менен эмнени үйрөнөсүз:
- Crawlers кантип иштешет
- Сайттарды кантип индекстөө керек жана аларды рейтинги жана репутациясы боюнча кантип баалаш керек
- Индекстелген сайттарды маалымат базасында кантип сактоо керек жана маалымат базасы менен кантип иштөө керек
Музыка ойноткуч (Spotify, Apple Music)
Ар бир адам музыка угат - бул биздин жашообуздун ажырагыс бөлүгү гана. Заманбап музыка агымдык платформасынын негизги механикасы кандай иштээрин жакшыраак түшүнүү үчүн музыка ойноткучту түзөлү.
Spotify
Өзүңүздүн музыкалык агымдык платформаңызды түзүү менен эмнени үйрөнөсүз:
- API менен кантип иштөө керек. Spotify же Apple Music'тен API колдонуңуз
- Кийинки/мурунку трекке кантип ойнотуу, тындыруу же артка түрүү
- Үндү кантип өзгөртүү керек
- Колдонуучунун маршрутун жана серепчи тарыхын кантип башкаруу керек
React аркылуу кино издөө колдонмосу (илгичтери менен)
Баштай турган биринчи нерсе - бул React аркылуу кино издөө колдонмосун түзүү. Төмөндө акыркы өтүнмө кандай боло тургандыгы сүрөттөлөт:
Эмнени үйрөнөсүң
Бул колдонмону түзүү менен, салыштырмалуу жаңы Hooks API колдонуу менен React жөндөмүңүздү өркүндөтөсүз. Мисал долбоордо React компоненттери, көптөгөн илгичтер, тышкы API жана, албетте, кээ бир CSS стилдери колдонулат.
Техникалык стек жана өзгөчөлүктөрү
- Илгичтер менен реакция кылуу
- реакция-колдонмо түзүү
- JSX
- CSS
Эч кандай класстарды колдонбостон, бул долбоорлор сизге функционалдык Reactке эң сонун кирүү пунктун берет жана 2020-жылы сизге сөзсүз жардам берет. сен таба аласың . Көрсөтмөлөрдү аткарыңыз же аны өзүңүз кылыңыз.
Vue менен баарлашуу колдонмосу
Сиз үчүн дагы бир сонун долбоор - бул менин сүйүктүү JavaScript китепканам менен баарлашуу колдонмосун түзүү: VueJS. Колдонмо төмөнкүдөй көрүнөт:
Эмнени үйрөнөсүң
Бул окуу куралында Vue колдонмосун нөлдөн баштап кантип жасоону үйрөнөсүз - компоненттерди түзүү, абалды башкаруу, маршруттарды түзүү, үчүнчү тараптын кызматтарына туташуу жана атүгүл аутентификацияны иштетүү.
Техникалык стек жана өзгөчөлүктөрү
- көрүнүшү
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Бул Vue менен баштоо же 2020-жылы өнүгүүгө кирүү үчүн болгон жөндөмүңүздү өркүндөтүү үчүн эң сонун долбоор. сен таба аласың .
Angular 8 менен кооз аба ырайы колдонмосу
Бул мисал Angular 8 аркылуу кооз аба ырайы колдонмосун түзүүгө жардам берет:
Эмнени үйрөнөсүң
Бул долбоор сизге нөлдөн баштап тиркемелерди курууда баалуу көндүмдөрдү үйрөтөт - дизайндан иштеп чыгууга чейин, жайылтууга даяр колдонмого чейин.
Техникалык стек жана өзгөчөлүктөрү
- Бурч 8
- Firebase
- Сервер тарапты көрсөтүү
- Grid жана Flexbox менен CSS
- Мобилдик ыңгайлуу жана ылайыкташуу
- Караңгы режим
- Керемет интерфейс
Баарын камтыган бул долбоордун мага абдан жаккан жери - сиз нерселерди өзүнчө изилдебейсиз. Анын ордуна, сиз дизайндан баштап акыркы жайылтууга чейин иштеп чыгуу процессин үйрөнөсүз.
Svelte аркылуу эмне кылуу керек
Svelte компонентке негизделген жаңы балага окшош - жок дегенде React, Vue жана Angular менен окшош. Жана бул 2020-жылдагы эң ысык жаңы өнүмдөрдүн бири.
Эмне кылуучу колдонмолор сөзсүз эле эң ысык тема эмес, бирок ал чындап эле Svelte жөндөмүңүздү өркүндөтүүгө жардам берет. Бул төмөнкүдөй болот:
Эмнени үйрөнөсүң
Бул окуу куралы сизге башынан аягына чейин Svelte 3 аркылуу тиркемени кантип түзүүнү көрсөтөт. Сиз компоненттерди, стилди жана окуяларды иштеткичтерди колдоносуз
Техникалык стек жана өзгөчөлүктөрү
- Svelte 3
- компоненттери
- CSS менен стилдөө
- ES 6 синтаксиси
Svelte башталгыч долбоорлору көп эмес, ошондуктан мен таптым .
Next.js аркылуу электрондук соода колдонмосу
Next.js сервердик рендерингди колдогон React тиркемелерин куруу үчүн эң популярдуу алкак.
Бул долбоор сизге электрондук коммерция тиркемесин кантип түзүүнү көрсөтөт:
Эмнени үйрөнөсүң
Бул долбоордо сиз Next.js менен кантип иштеп чыгууну үйрөнөсүз — жаңы барактарды жана компоненттерди түзүү, маалыматтарды чыгарып, стилди чыгаруу жана Next тиркемесин жайылтуу.
Техникалык стек жана өзгөчөлүктөрү
- Next.js
- Компоненттер жана баракчалар
- Маалыматтарды тандоо
- stylization
- Долбоорду жайылтуу
- ССР жана СПА
Жаңы нерсени үйрөнүү үчүн электрондук коммерция колдонмосу сыяктуу реалдуу мисалга ээ болуу дайыма сонун. Сенин колуңдан келет .
Nuxt.js менен толук кандуу көп тилдүү блог
Nuxt.js Vue үчүн, Next.js болсо React үчүн: сервердик рендеринг жана бир беттик тиркемелердин күчүн айкалыштыруу үчүн сонун негиз
Сиз түзө турган акыркы колдонмо төмөнкүдөй болот:
Эмнени үйрөнөсүң
Бул үлгүдөгү долбоордо сиз Nuxt.js аркылуу толук веб-сайтты кантип түзүүнү, баштапкы орнотуудан акыркы орнотууга чейин үйрөнөсүз.
Бул Nuxt сунуш кылган көптөгөн сонун функциялардын, мисалы, баракчалар жана компоненттер, жана SCSS менен стилдештирүү сыяктуу артыкчылыктарды колдонот.
Техникалык стек жана өзгөчөлүктөрү
- Nuxt.js
- Компоненттер жана баракчалар
- Storyblock модулу
- Hagfish
- Vuex мамлекеттик башкаруу үчүн
- Стилдөө үчүн SCSS
- Nuxt ортолук программалары
, көптөгөн улуу Nuxt.js өзгөчөлүктөрүн камтыйт. Мен Nuxt менен иштөөнү жакшы көрөм, андыктан аны сынап көрүшүңүз керек, анткени бул сизди мыкты Vue иштеп чыгуучусуна айлантат.
Гэтсби менен блог
Гэтсби - бул React жана GraphQLди колдонгон эң сонун статикалык сайт генератору. Бул долбоордун натыйжасы болуп саналат:
Эмнени үйрөнөсүң
Бул окуу куралында сиз React жана GraphQL аркылуу өз макалаларыңызды жазуу үчүн колдоно турган блогду түзүү үчүн Гэтсбиди кантип колдонууну үйрөнөсүз.
Техникалык стек жана өзгөчөлүктөрү
- Gatsby
- иш-аракет кылгыла
- GraphQL
- Плагиндер жана темалар
- MDX/Markdown
- Bootstrap CSS
- Калып:
Эгер сиз качандыр бир блог ачкыңыз келсе, React жана GraphQL аркылуу аны кантип жасоо керек.
Мен WordPressти жаман тандоо деп айтуудан алысмын, бирок Гэтсби менен сиз React аркылуу жогорку натыйжалуу веб-сайттарды кура аласыз – бул укмуштуудай айкалышы.
Gridsome менен блог
Vue үчүн Gridsome... Макул, биз буга чейин Next/Nuxt менен болгон.
Бирок Гридзом менен Гэтсбиге да ушундай. Экөө тең маалымат катмары катары GraphQL колдонушат, бирок Gridsome VueJS колдонот. Бул ошондой эле сонун блогдорду түзүүгө жардам бере турган укмуштуудай статикалык сайт генератору:
Эмнени үйрөнөсүң
Бул долбоор Gridsome, GraphQL жана Markdown менен баштоо үчүн жөнөкөй блогду түзүүнү үйрөтөт. Ал ошондой эле Netlify аркылуу тиркемени кантип жайгаштырууну камтыйт.
Техникалык стек жана өзгөчөлүктөрү
- Gridsome
- көрүнүшү
- GraphQL
- Markdown
- Netlify
Бул, албетте, эң кеңири окуу куралы эмес, бирок ал Gridsome жана негизги түшүнүктөрдү камтыйт. .
Quasar аркылуу SoundCloud сыяктуу аудио ойноткуч
Quasar мобилдик тиркемелерди түзүү үчүн колдонулушу мүмкүн дагы бир Vue алкак болуп саналат. Бул долбоордо сиз аудио ойноткуч тиркемесин түзөсүз, мисалы:
Эмнени үйрөнөсүң
Башка долбоорлор негизинен веб-тиркемелерге багытталган, бирок бул Vue жана Quasar алкактарын колдонуу менен мобилдик тиркемени кантип түзүүнү көрсөтөт.
Сизде мурунтан эле Android Studio/Xcode конфигурацияланган Cordova иштеши керек. Болбосо, колдонмодо Quasar веб-сайтына шилтеме бар, анда алар баарын кантип орнотууну көрсөтөт.
Техникалык стек жана өзгөчөлүктөрү
- Куасар
- көрүнүшү
- Кордоба
- 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 керек болот. Аба ырайы дайындарын алуу үчүн OpenWeather API колдонуңуз. OpenWeather API жөнүндө көбүрөөк маалымат.
Окно чата
Менин чат терезем иштеп жатат, эки серепчи өтмөктө ачыңыз
Чат терезесин түзүү розеткаларды баштоонун эң сонун жолу. Технологиялык стек тандоо абдан чоң. Мисалы, 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 с нуля
Техникалык жактан алганда, бул тиркеме эмес, бирок веб-пакеттин ичинен кантип иштээрин түшүнүү үчүн абдан пайдалуу иш. Эми ал "кара куту" эмес, түшүнүктүү курал болот.
талаптар:
- es7ден es5ке чейин түзүңүз (негиздер).
- jsx компиляциясын js - же - .vue менен .js (сиз жүктөгүчтөрдү үйрөнүшүңүз керек)
- Webpack dev серверин жана ысык модулду кайра жүктөө. (vue-cli жана create-react-app экөөнү тең колдонот)
- Heroku, now.sh же Github колдонуңуз, веб-пакет долбоорлорун кантип колдонууну үйрөнүңүз.
- CSS - scss, азыраак, стилус компиляциялоо үчүн сүйүктүү препроцессоруңузду орнотуңуз.
- Веб пакети менен сүрөттөрдү жана svg'лерди кантип колдонууну үйрөнүңүз.
Клон Hackernews
Ар бир Джеди өзүнүн Hackernews түзүшү керек.
Жолдо сиз эмнени үйрөнөсүз:
- Hackernews API менен кантип иштешсе болот.
- Жалгыз барактагы тиркемени кантип түзүү керек.
- Комментарийлерди, жеке комментарийлерди, профилдерди көрүү сыяктуу функцияларды кантип ишке ашыруу керек.
- Сурамдарды иштетүү маршруттарын уюштуруу (Рутинг).
Тудушечка
Олуттуубу? Тудушка? Алардын миңдегени бар. Бирок мага ишен, бул популярдуулуктун себеби бар.
Туду колдонмосу - бул негизги түшүнүктөрдү түшүнүүнүн сонун жолу. Vanilla 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
бул жерде буга кантип жетүүгө болот.
булактар
Source: www.habr.com