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 သည် မျှဝေထားသော “board” တွင် လူတိုင်း pixel တစ်ခုဆွဲနိုင်သည့် အသိုင်းအဝိုင်းတစ်ခုဖြစ်သည်။ မူလစိတ်ကူးသည် Reddit တွင်မွေးဖွားခဲ့သည်။ r/Layer ကွန်မြူနတီသည် လူတိုင်းဖန်တီးသူဖြစ်နိုင်ပြီး ဘုံအကြောင်းတရားတစ်ခုအတွက် ပံ့ပိုးပေးသည့် မျှဝေဖန်တီးမှုများအတွက် ဥပမာတစ်ခုဖြစ်သည်။
သင်၏ကိုယ်ပိုင် Layer ပရောဂျက်ကို ဖန်တီးသောအခါ သင်လေ့လာနိုင်သည်-
- JavaScript canvas အလုပ်လုပ်ပုံ ကင်းဗတ်ကို လည်ပတ်ပုံကို သိခြင်းသည် အပလီကေးရှင်းများစွာတွင် အရေးပါသော ကျွမ်းကျင်မှုတစ်ခုဖြစ်သည်။
- အသုံးပြုသူခွင့်ပြုချက်များကို ညှိနှိုင်းနည်း။ အသုံးပြုသူတစ်ဦးစီသည် လော့ဂ်အင်ဝင်ရန်မလိုဘဲ 15 မိနစ်တိုင်း pixel တစ်ခုဆွဲနိုင်သည်။
- ကွတ်ကီးဆက်ရှင်များ ဖန်တီးပါ။
Squoosh
Squoosh သည် အဆင့်မြင့်ရွေးချယ်စရာများစွာပါရှိသော ရုပ်ပုံချုံ့ခြင်းအက်ပ်တစ်ခုဖြစ်သည်။
GIF 20 MB
သင်၏ကိုယ်ပိုင် Squoosh ဗားရှင်းကို ဖန်တီးခြင်းဖြင့် သင်သည် သင်ယူနိုင်သည်-
- ရုပ်ပုံအရွယ်အစားများနှင့် မည်သို့လုပ်ဆောင်ရမည်နည်း။
- Drag'n'Drop API ၏ အခြေခံများကို လေ့လာပါ။
- API နှင့် ပွဲနားထောင်သူများ မည်သို့အလုပ်လုပ်သည်ကို နားလည်ပါ။
- ဖိုင်များကို အပ်လုဒ်လုပ်ပြီး တင်ပို့နည်း
မှတ်ချက်: image compressor သည် local ဖြစ်သည်။ ဆာဗာသို့ အပိုဒေတာပေးပို့ရန် မလိုအပ်ပါ။ ကွန်ပရက်ဆာကို အိမ်မှာ ထားနိုင်သလို ဆာဗာမှာ စိတ်ကြိုက်သုံးနိုင်ပါတယ်။
ရေတွက်ရန်ကိရိယာ
စလာသည်? လေးလေးလား? ဂဏန်းပေါင်းစက်? ဟုတ်တယ်၊ ဂဏန်းတွက်စက်ဆိုတာ အတိအကျပဲ။ သင်္ချာလုပ်ငန်းဆောင်တာများ၏ အခြေခံများကို နားလည်ခြင်းနှင့် ၎င်းတို့ ပေါင်းစပ်လုပ်ဆောင်ပုံတို့ကို နားလည်ခြင်းသည် သင့်အပလီကေးရှင်းများကို ရိုးရှင်းစေရန်အတွက် အရေးကြီးသောကျွမ်းကျင်မှုတစ်ခုဖြစ်သည်။ အနှေးနဲ့အမြန်ဆိုသလို ကိန်းဂဏန်းတွေနဲ့ ဆက်ဆံရမှာဖြစ်ပြီး ပိုမြန်လေလေ ပိုကောင်းလေပါပဲ။
သင်၏ကိုယ်ပိုင်ဂဏန်းတွက်စက်ကိုဖန်တီးခြင်းဖြင့်သင်သင်ယူနိုင်သည်-
- ကိန်းဂဏန်းများနှင့် သင်္ချာဆိုင်ရာ လုပ်ငန်းများကို လုပ်ဆောင်ပါ။
- ပွဲနားထောင်သူများ API ဖြင့် လေ့ကျင့်ပါ။
- ဒြပ်စင်များစီစဉ်ပုံ၊ စတိုင်များကိုနားလည်ပါ။
Crawler (ရှာဖွေရေးအင်ဂျင်)
လူတိုင်းသည် ရှာဖွေရေးအင်ဂျင်ကို အသုံးပြုဖူးကြသောကြောင့် သင့်ကိုယ်ပိုင်ဖန်တီးမှုကို အဘယ်ကြောင့်မပြုလုပ်ရသနည်း။ အချက်အလက်ရှာဖွေရန် စာရေးကိရိယာများ လိုအပ်သည်။ လူတိုင်းသည် ၎င်းတို့ကို နေ့စဉ်အသုံးပြုကြပြီး ဤနည်းပညာနှင့် ကျွမ်းကျင်သူများ၏ လိုအပ်ချက်သည် အချိန်နှင့်အမျှ တိုးလာမည်ဖြစ်သည်။
Google ရှာဖွေရေးအင်ဂျင်
သင့်ကိုယ်ပိုင် ရှာဖွေရေးအင်ဂျင်ကို ဖန်တီးခြင်းဖြင့် သင်လေ့လာနိုင်သည်-
- စာရေးကိရိယာများ အလုပ်လုပ်ပုံ
- ဆိုက်များကို အညွှန်းပြုနည်းနှင့် အဆင့်သတ်မှတ်ခြင်းနှင့် ဂုဏ်သတင်းဖြင့် ၎င်းတို့ကို အဆင့်သတ်မှတ်ပုံ
- ဒေတာဘေ့စ်တစ်ခုတွင် အညွှန်းပြုဆိုက်များကို မည်ကဲ့သို့ သိမ်းဆည်းနည်းနှင့် ဒေတာဘေ့စ်နှင့် မည်သို့လုပ်ဆောင်ရမည်နည်း။
တေးဂီတဖွင့်စက် (Spotify၊ Apple Music)
လူတိုင်း တေးဂီတကို နားထောင်ကြသည် - ၎င်းသည် ကျွန်ုပ်တို့ဘဝ၏ အရေးပါသော အစိတ်အပိုင်းတစ်ခုမျှသာ ဖြစ်သည်။ ခေတ်မီတေးဂီတထုတ်လွှင့်ခြင်းပလပ်ဖောင်း၏ အခြေခံစက်ပိုင်းဆိုင်ရာများကို ပိုမိုကောင်းမွန်စွာနားလည်နိုင်ရန် တေးဂီတဖွင့်စက်ကို ဖန်တီးကြပါစို့။
Spotify
သင့်ကိုယ်ပိုင် တေးဂီတထုတ်လွှင့်မှု ပလတ်ဖောင်းကို ဖန်တီးခြင်းဖြင့် သင်လေ့လာနိုင်သည်-
- API နဲ့ ဘယ်လိုအလုပ်လုပ်လဲ။ Spotify သို့မဟုတ် Apple Music မှ API ကိုသုံးပါ။
- ကစားနည်း၊ ခေတ္တရပ်ရန် သို့မဟုတ် နောက်/ယခင်သီချင်းသို့ ပြန်လှည့်ပါ။
- အသံအတိုးအကျယ်ကိုဘယ်လိုပြောင်းမလဲ။
- သုံးစွဲသူလမ်းကြောင်းနှင့် ဘရောက်ဆာမှတ်တမ်းကို စီမံခန့်ခွဲနည်း
React (ချိတ်ဖြင့်) အသုံးပြု၍ ရုပ်ရှင်ရှာဖွေရေးအက်ပ်
သင်စတင်နိုင်သည့် ပထမဆုံးအရာမှာ React ကို အသုံးပြု၍ ရုပ်ရှင်ရှာဖွေရေးအက်ပ်ကို ဖန်တီးရန်ဖြစ်သည်။ အောက်တွင်ဖော်ပြထားသောပုံသည်နောက်ဆုံးလျှောက်လွှာ၏ပုံသည်-
သင်ဘာသင်ယူမည်နည်း
ဤအက်ပ်ကိုတည်ဆောက်ခြင်းဖြင့်၊ အတော်လေးအသစ်ဖြစ်သော Hooks API ကိုအသုံးပြုခြင်းဖြင့် သင်၏တုံ့ပြန်မှုစွမ်းရည်ကို မြှင့်တင်နိုင်မည်ဖြစ်သည်။ ဥပမာပရောဂျက်သည် React အစိတ်အပိုင်းများ၊ ချိတ်အများအပြား၊ ပြင်ပ API နှင့် CSS ပုံစံအချို့ကို အသုံးပြုသည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- ချိတ်ဖြင့် တုံ့ပြန်ပါ။
- ဖန်တီး - တုံ့ပြန် - app ကို
- JSX
- CSS ကို
မည်သည့်အတန်းကိုမျှ မသုံးဘဲ၊ ဤပရောဂျက်များက သင့်အား Functional React သို့ ပြီးပြည့်စုံသော ဝင်ခွင့်အမှတ်ကို ပေးဆောင်ပြီး 2020 တွင် သင့်ကို ကျိန်းသေ ကူညီပေးပါမည်။ သင်ရှာလိုရသည် . ညွှန်ကြားချက်များကို လိုက်နာပါ သို့မဟုတ် သင့်ကိုယ်ပိုင်လုပ်ပါ။
Vue နှင့် ချတ်အက်ပ်
သင်လုပ်ဆောင်ရမည့် နောက်ထပ်အကောင်းဆုံးပရောဂျက်မှာ ကျွန်ုပ်အကြိုက်ဆုံး JavaScript စာကြည့်တိုက်- VueJS ကို အသုံးပြု၍ ချတ်အက်ပ်တစ်ခု ဖန်တီးရန်ဖြစ်သည်။ အပလီကေးရှင်းသည် ဤကဲ့သို့သောပုံပေါ်ပါမည်-
သင်ဘာသင်ယူမည်နည်း
ဤသင်ခန်းစာတွင်၊ အစိတ်အပိုင်းများဖန်တီးခြင်း၊ အခြေအနေကို ကိုင်တွယ်ခြင်း၊ လမ်းကြောင်းများဖန်တီးခြင်း၊ ပြင်ပကုမ္ပဏီဝန်ဆောင်မှုများသို့ ချိတ်ဆက်ခြင်းနှင့် အထောက်အထားစိစစ်ခြင်းတို့ကို ကိုင်တွယ်ခြင်းတို့ကိုပင် Vue အက်ပ်ကို အစမှနေ၍ မည်သို့ဖန်တီးရမည်ကို သင်လေ့လာနိုင်မည်ဖြစ်သည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- Vue
- vuex
- Vue Router
- Vue CLI
- တွန်း
- CSS ကို
၎င်းသည် Vue ဖြင့် စတင်ရန် သို့မဟုတ် 2020 တွင် ဖွံ့ဖြိုးတိုးတက်မှုသို့ရောက်ရန် သင်၏ရှိပြီးသားအရည်အချင်းများကို မြှင့်တင်ရန် အမှန်တကယ်ကောင်းမွန်သောပရောဂျက်ဖြစ်သည်။ သင်ရှာလိုရသည် .
Angular 8 နှင့်အတူလှပသောရာသီဥတုအက်ပ်
ဤဥပမာသည် Angular 8 ကို အသုံးပြု၍ လှပသောရာသီဥတုအက်ပ်ကို ဖန်တီးရန် ကူညီပေးလိမ့်မည်-
သင်ဘာသင်ယူမည်နည်း
ဤပရောဂျက်သည် သင့်အား ဒီဇိုင်းအစမှ ဖွံ့ဖြိုးတိုးတက်မှုအထိ၊ အသုံးချရန်အသင့်ရှိသော အက်ပ်လီကေးရှင်းအထိ အသုံးချတည်ဆောက်ခြင်းအတွက် အဖိုးတန်စွမ်းရည်များကို သင်ကြားပေးမည်ဖြစ်သည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- angular 8
- Firebase
- ဆာဗာဖက်က ပုံဖေါ်ခြင်း။
- Grid နှင့် Flexbox ဖြင့် CSS
- မိုဘိုင်းဖော်ရွေပြီး လိုက်လျောညီထွေရှိမှု
- အမှောင်စနစ်
- လှပသောမျက်နှာပြင်
ဤအလုံးစုံလွှမ်းခြုံထားသော ပရောဂျက်အတွက် ကျွန်ုပ်တကယ်နှစ်သက်သောအရာမှာ အထီးကျန်မှုတွင် အရာများကို သင်မလေ့လာခြင်းဖြစ်သည်။ ယင်းအစား၊ ဒီဇိုင်းမှ နောက်ဆုံးအသုံးချမှုအထိ ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်းစဉ်တစ်ခုလုံးကို သင်လေ့လာပါ။
Svelte ကို အသုံးပြု၍ လုပ်ဆောင်ရမည့် အက်ပ်
Svelte သည် React၊ Vue နှင့် Angular တို့ကဲ့သို့ အစိတ်အပိုင်းအခြေခံချဉ်းကပ်မှုဆိုင်ရာ ကလေးအသစ်နှင့်တူသည်။ ၎င်းသည် 2020 ခုနှစ်အတွက် အကျော်ကြားဆုံး ထုတ်ကုန်အသစ်များထဲမှ တစ်ခုဖြစ်သည်။
To-Do အက်ပ်များသည် ရေပန်းအစားဆုံးအကြောင်းအရာမဟုတ်သော်လည်း ၎င်းသည် သင့် Svelte စွမ်းရည်ကို အမှန်တကယ် မြှင့်တင်ရန် ကူညီပေးပါလိမ့်မည်။ ဤကဲ့သို့ပုံပေါ်လိမ့်မည်-
သင်ဘာသင်ယူမည်နည်း
ဤသင်ခန်းစာတွင် Svelte 3 ကို အသုံးပြု၍ အက်ပ်တစ်ခုအား အစမှအဆုံးအထိ ဖန်တီးနည်းကို သင့်အား ပြသပါမည်။ သင်သည် အစိတ်အပိုင်းများ၊ ပုံစံဒီဇိုင်းနှင့် ဖြစ်ရပ်ကို ကိုင်တွယ်ဖြေရှင်းသူများကို အသုံးပြုမည်ဖြစ်သည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- Svelte ၃
- အစိတ်အပိုင်းများ
- CSS ဖြင့် ပုံသွင်းခြင်း။
- ES 6 အထားအသို
ကောင်းမွန်တဲ့ Svelte စတင်တဲ့ ပရောဂျက်တွေ အများကြီးမရှိတာကြောင့် ကျွန်တော်တွေ့ခဲ့ပါတယ်။ .
Next.js ကို အသုံးပြု၍ E-commerce အက်ပ်
Next.js သည် ဘောက်စ်အတွင်းမှ ဆာဗာဘက်သို့ တင်ဆက်ခြင်းကို ပံ့ပိုးပေးသည့် React အပလီကေးရှင်းများ တည်ဆောက်ရန်အတွက် ရေပန်းအစားဆုံး မူဘောင်ဖြစ်သည်။
ဤပရောဂျက်သည် ဤကဲ့သို့သော e-commerce အပလီကေးရှင်းကို ဖန်တီးနည်းကို သင့်အား ပြသပါမည်-
သင်ဘာသင်ယူမည်နည်း
ဤပရောဂျက်တွင်၊ သင်သည် Next.js ဖြင့် မည်ကဲ့သို့ ဖွံ့ဖြိုးတိုးတက်ရမည်ကို လေ့လာနိုင်သည်—စာမျက်နှာအသစ်များနှင့် အစိတ်အပိုင်းများကို ဖန်တီးခြင်း၊ ဒေတာကို ထုတ်ယူခြင်းနှင့် စတိုင်လ်ထုတ်ပြီး Next application ကို အသုံးပြုပါ။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- Next.js
- အစိတ်အပိုင်းများနှင့် စာမျက်နှာများ
- ဒေတာနမူနာ
- Stylization
- ပရောဂျက် ဖြန့်ကျက်ခြင်း။
- SSR နှင့် SPA
အသစ်အဆန်းများကိုလေ့လာရန် e-commerce အက်ပ်ကဲ့သို့ လက်တွေ့ကမ္ဘာဥပမာတစ်ခုရှိခြင်းသည် အမြဲတမ်းကောင်းမွန်ပါသည်။ သင်လုပ်နိုင်သည် .
Nuxt.js ဖြင့် ဘာသာစကားပေါင်းစုံ ဘလော့ဂ်
Nuxt.js သည် Vue အတွက်ဖြစ်ပြီး Next.js သည် React အတွက်ဖြစ်သည်- server-side rendering နှင့် single-page applications များ၏ ပါဝါကို ပေါင်းစပ်ရန်အတွက် ကောင်းမွန်သော မူဘောင်တစ်ခု
သင်ဖန်တီးနိုင်သော နောက်ဆုံးအပလီကေးရှင်းသည် ဤကဲ့သို့ဖြစ်နေလိမ့်မည်-
သင်ဘာသင်ယူမည်နည်း
ဤနမူနာပရောဂျက်တွင် Nuxt.js ကို အသုံးပြု၍ ပြီးပြည့်စုံသော ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီးနည်းကို သင်လေ့လာရမည်ဖြစ်ပြီး၊ ကနဦးစဖွင့်သတ်မှတ်မှုမှ နောက်ဆုံးအဆင့်အထိ အသုံးပြုနိုင်မည်ဖြစ်သည်။
၎င်းသည် စာမျက်နှာများနှင့် အစိတ်အပိုင်းများ နှင့် SCSS နှင့် ပုံစံပုံသွင်းခြင်းကဲ့သို့သော Nuxt ပေးဆောင်သည့် အေးမြသောအင်္ဂါရပ်များစွာကို အခွင့်ကောင်းယူသည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- Nuxt.js
- အစိတ်အပိုင်းများနှင့် စာမျက်နှာများ
- Storyblock သင်ခန်းစာ
- Hagfish
- ပြည်နယ်စီမံခန့်ခွဲမှုအတွက် Vuex
- SCSS သည် ပုံသဏ္ဍာန်ပြုလုပ်ရန်
- Nuxt အလယ်အလတ်ပစ္စည်းများ
Nuxt.js အင်္ဂါရပ်များစွာ ပါဝင်သည်။ Nuxt နဲ့အလုပ်လုပ်ရတာကို ကျွန်တော် ကိုယ်တိုင်ကိုယ်ကျ နှစ်သက်ပါတယ်၊ ဒါကြောင့် အဲဒါက သင့်ကို Vue developer ကြီးတစ်ယောက်ဖြစ်လာစေတဲ့အတွက် စမ်းကြည့်သင့်ပါတယ်။
Gatsby နှင့်အတူ ဘလော့ဂ်
Gatsby သည် React နှင့် GraphQL ကို အသုံးပြု၍ အကောင်းဆုံး static site generator တစ်ခုဖြစ်သည်။ ဤသည်မှာ ပရောဂျက်၏ရလဒ်ဖြစ်သည်။
သင်ဘာသင်ယူမည်နည်း
ဤသင်ခန်းစာတွင်၊ React နှင့် GraphQL ကိုအသုံးပြု၍ သင့်ကိုယ်ပိုင်ဆောင်းပါးများရေးသားရန်အတွက် သင်အသုံးပြုမည့် ဘလော့ဂ်တစ်ခုဖန်တီးရန် Gatsby ကိုအသုံးပြုပုံကို သင်လေ့လာနိုင်မည်ဖြစ်သည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- ဂက်စဘီ
- တုံ့ပြန်
- GraphQL
- ပလပ်အင်များနှင့် အပြင်အဆင်များ
- MDX/Markdown
- Bootstrap CSS
- ပုံစံများ
ဘလော့ဂ်တစ်ခု စတင်ချင်ပါက၊ React နှင့် GraphQL ကိုအသုံးပြုနည်း။
WordPress သည် ဆိုးရွားသောရွေးချယ်မှုဖြစ်သည်ဟု ကျွန်တော်မဆိုလိုပါ၊ သို့သော် Gatsby ဖြင့် သင်သည် အံ့သြဖွယ်ပေါင်းစပ်မှုဖြစ်သည့် React ကို အသုံးပြု၍ စွမ်းဆောင်ရည်မြင့် ဝဘ်ဆိုဒ်များကို တည်ဆောက်နိုင်ပါသည်။
Gridsome ဖြင့် ဘလော့ဂ်
Vue အတွက် Gridsome... ကောင်းပြီ၊ ကျွန်ုပ်တို့တွင် ၎င်းကို Next/Nuxt ဖြင့် ပြုလုပ်ထားပြီးဖြစ်သည်။
ဒါပေမယ့် Gridsome နဲ့ Gatsby အတွက်လည်း အလားတူပါပဲ။ နှစ်ခုလုံးသည် ၎င်းတို့၏ဒေတာအလွှာအဖြစ် GraphQL ကိုအသုံးပြုသော်လည်း Gridsome သည် VueJS ကိုအသုံးပြုသည်။ ၎င်းသည် သင့်အား ကောင်းမွန်သောဘလော့ဂ်များဖန်တီးရာတွင် ကူညီပေးမည့် အံ့သြဖွယ်ကောင်းသော ဆိုက်ဂျင်နရေတာတစ်ခုလည်းဖြစ်သည်။
သင်ဘာသင်ယူမည်နည်း
ဤပရောဂျက်သည် သင့်အား Gridsome၊ GraphQL နှင့် Markdown တို့ဖြင့် စတင်ရန် ရိုးရှင်းသော ဘလော့ဂ်တစ်ခုကို ဖန်တီးနည်းကို သင်ကြားပေးမည်ဖြစ်သည်။ ၎င်းသည် Netlify မှတစ်ဆင့် အက်ပလီကေးရှင်းတစ်ခုအား မည်သို့အသုံးပြုရပုံကိုလည်း အကျုံးဝင်ပါသည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- ခပ်မိုက်မိုက်
- Vue
- GraphQL
- Markdown
- Netlify
ဤသည်မှာ သေချာပေါက် အပြည့်စုံဆုံး ကျူတိုရီရယ် မဟုတ်သော်လည်း၊ ၎င်းသည် Gridsome ၏ အခြေခံသဘောတရားများနှင့် အကျုံးဝင်ပါသည်။ .
Quasar ကို အသုံးပြု၍ SoundCloud ကဲ့သို့သော အသံဖွင့်စက်
Quasar သည် မိုဘိုင်းအက်ပလီကေးရှင်းများဖန်တီးရန် နောက်ထပ် Vue framework တစ်ခုဖြစ်သည်။ ဤပရောဂျက်တွင် သင်သည် အသံဖွင့်စက် အပလီကေးရှင်းကို ဖန်တီးမည်၊ ဥပမာ-
သင်ဘာသင်ယူမည်နည်း
အခြားပရောဂျက်များသည် ဝဘ်အက်ပလီကေးရှင်းများကိုသာ အဓိကအာရုံစိုက်ထားသော်လည်း၊ ဤအရာသည် သင့်အား Vue နှင့် Quasar framework ကိုအသုံးပြု၍ မိုဘိုင်းအက်ပလီကေးရှင်းတစ်ခုဖန်တီးနည်းကို ပြသမည်ဖြစ်သည်။
သင်သည် Android Studio/Xcode ဖြင့် ဖွဲ့စည်းထားသော Cordova နှင့် လုပ်ဆောင်နေသင့်သည်။ မဟုတ်ပါက၊ လက်စွဲစာအုပ်တွင် အရာအားလုံးကို စတင်သတ်မှတ်နည်းကို ပြသသည့် Quasar ဝဘ်ဆိုက်သို့ လင့်ခ်တစ်ခု ပါရှိသည်။
နည်းပညာအစုအဝေးနှင့်အင်္ဂါရပ်များ
- quasar
- Vue
- Cordova
- WaveSurfer
- UI အစိတ်အပိုင်းများ
မိုဘိုင်းအက်ပလီကေးရှင်းများဖန်တီးရန်အတွက် Quasar ၏စွမ်းရည်များကိုပြသခြင်း။
Форма кредитной карты
ချောမွေ့ပြီး ပျော်စရာကောင်းသော အပြန်အလှန်တုံ့ပြန်မှုများနှင့်အတူ အေးမြသော ခရက်ဒစ်ကတ်ပုံစံ။ နံပါတ်ဖော်မတ်ခြင်း၊ အတည်ပြုခြင်းနှင့် အလိုအလျောက်ကတ်အမျိုးအစား သိရှိခြင်းတို့ ပါဝင်သည်။ ၎င်းကို Vue.js ပေါ်တွင်တည်ဆောက်ထားပြီး အပြည့်အဝတုံ့ပြန်မှုလည်းရှိသည်။ (မြင်နိုင်ပါတယ်။ .)
သင်ယူရမယ့်အရာ-
- လုပ်ငန်းစဉ်နှင့် ပုံစံများကို အတည်ပြုပါ။
- အဖြစ်အပျက်များကို ကိုင်တွယ်ပါ (ဥပမာ၊ အကွက်များ ပြောင်းလဲသည့်အခါ)
- အထူးသဖြင့် ဖောင်၏ထိပ်တွင် ပေါ်လာသော အကြွေးဝယ်ကတ် အချက်အလက်များကို စာမျက်နှာပေါ်တွင် အစိတ်အပိုင်းများကို မည်သို့ပြသပြီး နေရာချရမည်ကို နားလည်ပါ။
ဘားဂရပ်
ဟီစတိုဂရမ်သည် အမြင့် သို့မဟုတ် အလျားများကို ၎င်းတို့ကိုယ်စားပြုတန်ဖိုးများနှင့် အချိုးကျသည့် စတုဂံဘားများဖြင့် အမျိုးအစားအလိုက် အချက်အလက်များကို ကိုယ်စားပြုသည့် ဇယား သို့မဟုတ် ဂရပ်တစ်ခုဖြစ်သည်။
၎င်းတို့ကို ဒေါင်လိုက် သို့မဟုတ် အလျားလိုက် အသုံးချနိုင်သည်။ ဒေါင်လိုက်ဘားဇယားကို တစ်ခါတစ်ရံ မျဉ်းဇယားဟုခေါ်သည်။
သင်ယူရမယ့်အရာ-
- ဒေတာများကို စနစ်တကျနှင့် နားလည်နိုင်သောနည်းလမ်းဖြင့် ပြသပါ။
- ထို့အပြင်- ဒြပ်စင်ကို အသုံးပြုနည်းကို လေ့လာပါ။
canvasအဲဒါနဲ့ ဒြပ်စင်တွေကို ဘယ်လိုဆွဲမလဲ။
ကမ္ဘာ့လူဦးရေဒေတာကို သင်ရှာတွေ့နိုင်ပါသည်။ ၎င်းတို့ကို နှစ်အလိုက်စီထားသည်။
Анимация сердечка Twitter
2016 ခုနှစ်တွင် Twitter သည် ၎င်း၏ tweets အတွက် အံ့သြဖွယ်ကောင်းသော ကာတွန်းကို မိတ်ဆက်ခဲ့သည်။ 2019 ခုနှစ်အထိ၊ ၎င်းသည် အစိတ်အပိုင်းတစ်ခုအဖြစ် မြင်နေရဆဲဖြစ်သောကြောင့် အဘယ်ကြောင့် သင်ကိုယ်တိုင်ဖန်တီးခြင်းမပြုသနည်း။
သင်ယူရမယ့်အရာ-
- CSS ရည်ညွှန်းချက်ဖြင့် လုပ်ဆောင်ပါ။
keyframes - HTML ဒြပ်စင်များကို စီမံခန့်ခွဲပြီး လှုပ်ရှားလုပ်ဆောင်ပါ။
- JavaScript၊ HTML နှင့် CSS ကို ပေါင်းစပ်ပါ။
Репозитории GitHub с функцией поиска
ဤနေရာတွင် စိတ်ကူးယဉ်စရာတစ်ခုမျှ မရှိပါ။-GitHub သိုလှောင်မှုများသည် ဂုဏ်ကျက်သရေရှိသော စာရင်းတစ်ခုမျှသာဖြစ်သည်။
ရည်ရွယ်ချက်မှာ သိုလှောင်ရုံများကို ပြသရန်နှင့် အသုံးပြုသူကို ၎င်းတို့ကို စစ်ထုတ်ခွင့်ပြုရန်ဖြစ်သည်။ သုံးပါ။ အသုံးပြုသူတိုင်းအတွက် repositories ရယူရန်။
GitHub ပရိုဖိုင်စာမျက်နှာ -
သင်ယူရမယ့်အရာ-
- API မှဒေတာကိုရယူပါ။
- API မှဒေတာကိုပြသပါ။
- ရှာဖွေမှုတစ်ခုစီအတွက် သက်ဆိုင်ရာဒေတာကို စစ်ထုတ်ပြီး ပြပါ။
- ရွေးချယ်နိုင်သည်- သင်စိန်ခေါ်မှုတစ်ခုအတွက် အဆင်သင့်ဖြစ်နေပါက အသုံးပြုပါ။ GraphQL ကို အသုံးပြု၍ တည်ဆောက်ထားသည်။ .
Чаты в стиле Reddit
ချတ်များသည် ၎င်းတို့၏ရိုးရှင်းမှုနှင့် အသုံးပြုရလွယ်ကူခြင်းကြောင့် လူကြိုက်များသော ဆက်သွယ်ရေးနည်းလမ်းတစ်ခုဖြစ်သည်။ သို့သော် ခေတ်မီ စကားပြောခန်းများကို အမှန်တကယ် လှုံ့ဆော်ပေးသည့်အရာက အဘယ်နည်း။ WebSockets
သင်ယူရမယ့်အရာ-
- WebSockets၊ အချိန်နှင့်တစ်ပြေးညီ ဆက်သွယ်မှုနှင့် ဒေတာအပ်ဒိတ်များကို အသုံးပြုပါ။
- အသုံးပြုသူ၏ဝင်ရောက်ခွင့်အဆင့်များနှင့်အလုပ်လုပ်ပါ (ဥပမာ၊ ချတ်ချန်နယ်တစ်ခု၏ပိုင်ရှင်တွင် အခန်းကဏ္ဍရှိသည်။
adminအခန်းထဲတွင် အခြားသူများ၊user) - လုပ်ငန်းစဉ်နှင့် ဖောင်များကို အတည်ပြုပါ - စာတိုပေးပို့ခြင်းအတွက် ချတ်ဝင်းဒိုးကို သတိရပါ။
input - မတူညီသော ချတ်များကို ဖန်တီးပြီး ပါဝင်ပါ။
- ကိုယ်ရေးကိုယ်တာစာတိုများဖြင့် အလုပ်လုပ်ပါ။ အသုံးပြုသူများသည် အခြားအသုံးပြုသူများနှင့် သီးသန့်ချတ်လုပ်နိုင်ပါသည်။ အခြေခံအားဖြင့်၊ သင်သည် အသုံးပြုသူနှစ်ဦးကြားတွင် WebSocket ချိတ်ဆက်မှုတစ်ခုကို ထူထောင်မည်ဖြစ်သည်။
Навигация в стиле Stripe
ဤလမ်းညွှန်ချက်ကို ထူးခြားစေသောအရာမှာ အကြောင်းအရာနှင့် ကိုက်ညီစေရန် popover ကွန်တိန်နာသည် ပြောင်းလဲသွားခြင်းပင်ဖြစ်သည်။ ဤအကူးအပြောင်းအတွက် ကျက်သရေရှိလှသည့် ရိုးရာအမူအရာများနှင့် နှိုင်းယှဥ်မှုအသစ်တစ်ခုအား အဖွင့်အပိတ်လုပ်ခြင်း။
သင်ယူရမယ့်အရာ-
- အကူးအပြောင်းများနှင့် CSS ကာတွန်းများကို ပေါင်းစပ်ပါ။
- အကြောင်းအရာကို မှိန်ဖျော့ဖျော့ထားပြီး အသုံးပြုနေသော အတန်းအစားကို အသုံးပြုပါ။
Pacman
သင်၏ကိုယ်ပိုင် Pacman ဗားရှင်းကိုဖန်တီးပါ။ ဤသည်မှာ ဂိမ်းများကို မည်ကဲ့သို့ တီထွင်ပြီး အခြေခံများကို နားလည်ရန် အကြံဥာဏ်ကောင်းများ ရရှိစေမည့် နည်းလမ်းကောင်း ဖြစ်ပါသည်။ JavaScript framework၊ React သို့မဟုတ် Vue ကိုသုံးပါ။
သင်လေ့လာလိမ့်မည်။
- ဒြပ်စင်တွေ ဘယ်လိုရွေ့မလဲ။
- ဘယ်ခလုတ်တွေကို နှိပ်ရမယ်ဆိုတာ ဆုံးဖြတ်နည်း
- တိုက်မိသည့်အခိုက်အတန့်ကို မည်သို့ဆုံးဖြတ်မည်နည်း။
- သင်သည် နောက်ထပ်သွား၍ တစ္ဆေလှုပ်ရှားမှုထိန်းချုပ်မှုများကို ထည့်နိုင်သည်။
ဤပရောဂျက်၏ ဥပမာကို သင်တွေ့လိမ့်မည်။ GitHub
အသုံးပြုသူစီမံခန့်ခွဲမှု
စီမံကိန်း၏ GitHub
သုံးစွဲသူစီမံခန့်ခွဲမှုအတွက် CRUD အမျိုးအစား အက်ပလီကေးရှင်းကို ဖန်တီးခြင်းသည် ဖွံ့ဖြိုးတိုးတက်မှုဆိုင်ရာ အခြေခံများကို သင်ပေးမည်ဖြစ်သည်။ ၎င်းသည် developer အသစ်များအတွက် အထူးသင့်လျော်ပါသည်။
သင်လေ့လာလိမ့်မည်။
- လမ်းကြောင်းဆိုတာဘာလဲ
- ဒေတာထည့်သွင်းမှုပုံစံများကို ကိုင်တွယ်နည်းနှင့် အသုံးပြုသူထည့်သွင်းထားသည်ကို စစ်ဆေးပါ။
- ဒေတာဘေ့စ်နှင့်အလုပ်လုပ်ပုံ - လုပ်ဆောင်ချက်များကိုဖန်တီး၊ ဖတ်ရန်၊ အပ်ဒိတ်လုပ်ရန်နှင့်ဖျက်ပစ်ပါ။
Проверка погоды в вашем местоположении
စီမံကိန်း၏ GitHub
အက်ပ်များကို ဖန်တီးလိုပါက ရာသီဥတုအက်ပ်ဖြင့် စတင်ပါ။ ဤပရောဂျက်သည် Swift ကို အသုံးပြု၍ ပြီးမြောက်နိုင်သည်။
အက်ပလီကေးရှင်းတစ်ခုတည်ဆောက်ရာတွင် အတွေ့အကြုံများအပြင် သင်လေ့လာနိုင်သည်-
- API နဲ့ ဘယ်လိုအလုပ်လုပ်မလဲ။
- Geolocation ကိုအသုံးပြုနည်း
- စာသားထည့်သွင်းခြင်းဖြင့် သင့်အပလီကေးရှင်းကို ပိုမိုတက်ကြွစေသည်။ ၎င်းတွင် အသုံးပြုသူများသည် သီးခြားတည်နေရာတစ်ခုရှိ ရာသီဥတုကို စစ်ဆေးရန် ၎င်းတို့၏တည်နေရာကို ဝင်ရောက်နိုင်မည်ဖြစ်သည်။
API တစ်ခုလိုပါလိမ့်မယ်။ မိုးလေဝသဒေတာရယူရန် OpenWeather API ကို အသုံးပြုပါ။ OpenWeather API အကြောင်း နောက်ထပ်အချက်အလက်များ.
Окно чата
ကျွန်ုပ်၏ ချတ်ဝင်းဒိုးကို လုပ်ဆောင်ရန်၊ ဘရောက်ဆာ တက်ဘ်နှစ်ခုတွင် ဖွင့်ပါ။
ချတ်ဝင်းဒိုးကိုဖန်တီးခြင်းသည် socket များဖြင့်စတင်ရန် အကောင်းဆုံးနည်းလမ်းဖြစ်သည်။ နည်းပညာအစုအဝေး၏ရွေးချယ်မှုသည်ကြီးမားသည်။ ဥပမာ၊ Node.js သည် ပြီးပြည့်စုံသည်။
sockets အလုပ်လုပ်ပုံနှင့် ၎င်းတို့ကို အကောင်အထည်ဖော်ပုံတို့ကို သင်လေ့လာပါမည်။ ဒါက ဒီပရောဂျက်ရဲ့ အဓိကအားသာချက်ပါ။
အကယ်၍ သင်သည် sockets များနှင့်အလုပ်လုပ်လိုသော Laravel developer ဖြစ်ပါက ကျွန်ုပ်ကိုဖတ်ပါ။
GitLab CI
အကယ်၍ သင်သည် စဉ်ဆက်မပြတ် ပေါင်းစည်းခြင်း (CI) အတွက် အသစ်ဖြစ်ပါက GitLab CI ဖြင့် ကစားပါ။ ပတ်ဝန်းကျင်အနည်းငယ်ကို သတ်မှတ်ပြီး စမ်းသပ်မှုအချို့ကို လုပ်ဆောင်ကြည့်ပါ။ သိပ်ခက်ခဲတဲ့ ပရောဂျက်မဟုတ်ပေမယ့် အဲဒါကနေ အများကြီး သင်ယူရမယ်ဆိုတာ သေချာပါတယ်။ ဖွံ့ဖြိုးတိုးတက်ရေးအဖွဲ့များစွာသည် ယခုအခါ CI ကို အသုံးပြုနေပါသည်။ အသုံးပြုနည်းကို သိခြင်းသည် အသုံးဝင်ပါသည်။
သင်လေ့လာလိမ့်မည်။
- GitLab CI ဆိုတာဘာလဲ
- ဘယ်လို configure လုပ်မလဲ။
.gitlab-ci.ymlGitLab အသုံးပြုသူကို ဘာလုပ်ရမည်ကို ပြောပြသည်။ - တခြားပတ်ဝန်းကျင်မှာ ဘယ်လိုအသုံးချမလဲ။
Анализатор сайтов
ဝဘ်ဆိုက်များ၏ သဘောတရားများကို ပိုင်းခြားစိတ်ဖြာပြီး ၎င်းတို့၏ အဆင့်သတ်မှတ်ချက်ကို ဖန်တီးပေးသည့် ခြစ်ရာတစ်ခု ပြုလုပ်ပါ။ ဥပမာအားဖြင့်၊ ပုံများတွင် လွဲမှားနေသော alt တဂ်များကို စစ်ဆေးနိုင်သည်။ သို့မဟုတ် စာမျက်နှာတွင် SEO မက်တာတက်ဂ်များ ရှိ၊ မရှိ စစ်ဆေးပါ။ အသုံးပြုသူမျက်နှာပြင်မပါဘဲ scraper ကိုဖန်တီးနိုင်သည်။
သင်လေ့လာလိမ့်မည်။
- scraper ဘယ်လိုအလုပ်လုပ်သလဲ။
- DOM ရွေးချယ်မှုများ ဖန်တီးနည်း
- algorithm တစ်ခုဘယ်လိုရေးရမလဲ
- ထိုနေရာတွင် မရပ်တန့်လိုပါက အသုံးပြုသူ အင်တာဖေ့စ်ကို ဖန်တီးပါ။ သင်စစ်ဆေးသော ဝဘ်ဆိုက်တစ်ခုစီတွင် အစီရင်ခံစာတစ်ခုကိုလည်း ဖန်တီးနိုင်သည်။
Определение настроений в социальных сетях
ဆိုရှယ်မီဒီယာပေါ်ရှိ စိတ်ခံစားမှုကို သိရှိနိုင်မှုသည် စက်သင်ယူမှုတွင် မိတ်ဆက်ရန် အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်သည်။
လူမှုကွန်ရက်တစ်ခုတည်းကို ခွဲခြမ်းစိတ်ဖြာခြင်းဖြင့် စတင်နိုင်သည်။ လူတိုင်းက Twitter နဲ့ စတင်လေ့ရှိပါတယ်။
အကယ်၍ သင့်တွင် machine learning အတွေ့အကြုံရှိပြီးသားဖြစ်ပါက၊ မတူညီသော လူမှုကွန်ရက်များမှ ဒေတာများကို စုဆောင်းပြီး ၎င်းတို့ကို ပေါင်းစပ်ကြည့်ပါ။
သင်လေ့လာလိမ့်မည်။
- machine learning ဆိုတာဘာလဲ
Клон Trello
သင်ယူရမယ့်အရာ
- အဖွဲ့အစည်း၏ တောင်းဆိုမှု လမ်းကြောင်းများ (Routing) လုပ်ဆောင်ခြင်း။
- ဆွဲချလိုက်ပါ။
- အရာဝတ္ထုအသစ်များဖန်တီးနည်း (ဘုတ်များ၊ စာရင်းများ၊ ကတ်များ)။
- ထည့်သွင်းခြင်းဒေတာကို လုပ်ဆောင်ခြင်းနှင့် အတည်ပြုခြင်း။
- client ဘက်မှ- local storage ကိုအသုံးပြုနည်း၊ local storage တွင် data သိမ်းဆည်းနည်း၊ local storage မှ data ဖတ်နည်း။
- ဆာဗာဘက်ခြမ်းမှ- ဒေတာဘေ့စ်များကို အသုံးပြုနည်း၊ ဒေတာဘေ့စ်တွင် ဒေတာသိမ်းဆည်းနည်း၊ ဒေတာဘေ့စ်မှ ဒေတာဖတ်နည်း။
React+Redux ဖြင့် ပြုလုပ်ထားသည်။
Панель админа
အခြေခံများကိုလေ့လာရန် ရိုးရှင်းသော CRUD အက်ပ်။ လေ့လာကြပါစို့။
- အသုံးပြုသူများကိုဖန်တီးပါ၊ အသုံးပြုသူများကိုစီမံခန့်ခွဲပါ။
- ဒေတာဘေ့စ်နှင့် အပြန်အလှန် ဆက်သွယ်ပါ - အသုံးပြုသူများကို ဖန်တီး၊ ဖတ်ပါ၊ တည်းဖြတ်ပါ၊ ဖျက်ပါ။
- ထည့်သွင်းအတည်ပြုပြီး ပုံစံများဖြင့် လုပ်ဆောင်ပါ။
Трекер криптовалют (нативное мобильное приложение)
မည်သည့်အရာမဆို- Swift၊ Objective-C၊ React Native၊ Java၊ Kotlin။
လေ့လာကြည့်ရအောင်။
- မူရင်းအက်ပ်များ အလုပ်လုပ်ပုံ။
- API မှဒေတာကိုဘယ်လိုရယူမလဲ။
- မူရင်းစာမျက်နှာ အပြင်အဆင်များ မည်သို့အလုပ်လုပ်သနည်း။
- မိုဘိုင်း Simulator များနှင့်မည်သို့လုပ်ဆောင်ရမည်နည်း။
. ပိုကောင်းရှာပါ - မှတ်ချက်များတွင်ရေးပါ။
စိတ်ဝင်စားရင် ဒီမှာ .
Настроить собственный конфиг webpack с нуля
နည်းပညာအရ၊ ၎င်းသည် အက်ပလီကေးရှင်းတစ်ခုမဟုတ်သော်လည်း webpack မည်သို့အလုပ်လုပ်သည်ကို နားလည်ရန် အလွန်အသုံးဝင်သောအလုပ်ဖြစ်သည်။ ယခု၎င်းသည် "အနက်ရောင်သေတ္တာ" မဟုတ်သော်လည်းနားလည်နိုင်သောကိရိယာတစ်ခုဖြစ်သည်။
လိုအပ်ချက်များကို:
- es7 မှ es5 (အခြေခံ) ကို စုစည်းပါ။
- jsx သို့ js - သို့မဟုတ် - .vue to .js (သင် loaders များကို လေ့လာရပါမည်)
- webpack dev server နှင့် hot module ပြန်လည်စတင်ခြင်းကို စနစ်ထည့်သွင်းပါ။ (vue-cli နှင့် create-react-app နှစ်မျိုးလုံးကို သုံးပါ)
- Heroku၊ now.sh သို့မဟုတ် Github ကိုသုံး၍ ဝဘ်ပက်ခ်ပရောဂျက်များကို အသုံးချနည်းကို လေ့လာပါ။
- css - scss၊ နည်းသော၊ stylus တို့ကို စုစည်းရန် သင့်စိတ်ကြိုက် ပရိုဆက်ဆာကို စနစ်ထည့်သွင်းပါ။
- ပုံများနှင့် svgs ကို webpack ဖြင့် မည်သို့အသုံးပြုရမည်ကို လေ့လာပါ။
Клон Hackernews
Jedi တိုင်းသည် ၎င်းတို့၏ကိုယ်ပိုင် Hackernews ပြုလုပ်ရန် လိုအပ်သည်။
လမ်းတလျှောက် သင်ဘာတွေ သင်ယူရမလဲ။
- hackernews API နဲ့ ဘယ်လို တုံ့ပြန်မလဲ။
- စာမျက်နှာတစ်ခုတည်းအက်ပ်ကိုဖန်တီးနည်း။
- မှတ်ချက်များကြည့်ရှုခြင်း၊ တစ်ဦးချင်း မှတ်ချက်များ၊ ပရိုဖိုင်များကဲ့သို့သော အင်္ဂါရပ်များကို မည်သို့အကောင်အထည်ဖော်မည်နည်း။
- အဖွဲ့အစည်း၏ တောင်းဆိုမှု လမ်းကြောင်းများ (Routing) လုပ်ဆောင်ခြင်း။
Тудушечка
လေးလေးလား? Tudushka? ထောင်ပေါင်းများစွာ ရှိတယ်။ ဒါပေမယ့် ယုံပါ ၊ ဒီလိုမျိုး လူကြိုက်များရခြင်းရဲ့ အကြောင်းရင်းတစ်ခုရှိပါတယ်။
Tudu အက်ပ်သည် အခြေခံများကို သင်နားလည်ကြောင်း သေချာစေရန် အကောင်းဆုံးနည်းလမ်းတစ်ခုဖြစ်သည်။ vanilla Javascript တွင် အပလီကေးရှင်းတစ်ခုနှင့် သင်နှစ်သက်ရာ framework တွင် တစ်ခုကို ရေးကြည့်ပါ။
လေ့လာရန်-
- အလုပ်အသစ်များဖန်တီးပါ။
- ကွင်းဆင်းစစ်ဆေးပါ။
- လုပ်ဆောင်စရာများကို စစ်ထုတ်ပါ (ပြီးပါပြီ၊ လုပ်ဆောင်နေသည်၊ အားလုံး)။ သုံးပါ။
filterиreduce. - Javascript ၏အခြေခံများကိုနားလည်ပါ။
Сортируемый drag and drop список
နားလည်ရန်အလွန်အထောက်အကူပြုသည်။ .
လေ့လာကြပါစို့။
- API ကို ဆွဲချ ၊
- ကြွယ်ဝသော UI များကို ဖန်တီးပါ။
Клон мессенджера (нативное приложение)
ဝဘ်အပလီကေးရှင်းများနှင့် မူရင်းအက်ပ်လီကေးရှင်းနှစ်ခုလုံးသည် သင့်အား မီးခိုးရောင်အစုအဝေးနှင့် ခြားနားစေမည့် ဝဘ်အက်ပ်လီကေးရှင်းများ မည်သို့အလုပ်လုပ်သည်ကို သင်နားလည်မည်ဖြစ်သည်။
ကျွန်ုပ်တို့လေ့လာမည့်အရာ-
- ဝဘ်ပေါက်များ (ချက်ချင်းစာတိုပေးပို့ခြင်း)
- မူရင်းအက်ပ်များ အလုပ်လုပ်ပုံ။
- နဂိုအပလီကေးရှင်းများတွင် နမူနာပုံစံများ အလုပ်လုပ်ပုံ။
- မူရင်းအက်ပ်လီကေးရှင်းများတွင် တောင်းဆိုမှုလုပ်ဆောင်ခြင်းလမ်းကြောင်းများ ဖွဲ့စည်းခြင်း။
စာသားတည်းဖြတ်သူ
စာသားတည်းဖြတ်သူ၏ ရည်ရွယ်ချက်မှာ ၎င်းတို့၏ ဖော်မတ်ချခြင်းကို တရားဝင် HTML markup အဖြစ်သို့ ပြောင်းလဲရန် ကြိုးစားသည့် အသုံးပြုသူများ၏ ကြိုးစားအားထုတ်မှုကို လျှော့ချရန်ဖြစ်သည်။ ကောင်းမွန်သော စာသားတည်းဖြတ်သူသည် အသုံးပြုသူများအား စာသားကို ပုံစံအမျိုးမျိုးဖြင့် ဖော်မတ်လုပ်ခွင့်ပေးသည်။
တစ်ချိန်ချိန်တွင် လူတိုင်းသည် စာသားတည်းဖြတ်ခြင်းကို အသုံးပြုကြသည်။ ဒါဘာကြောင့်လဲ။ ?
Клон Reddit
လူမှုရေးသတင်းများစုစည်းမှု၊ ဝဘ်အကြောင်းအရာအဆင့်သတ်မှတ်ချက်နှင့် ဆွေးနွေးမှုဆိုက်တစ်ခုဖြစ်သည်။
Reddit သည် ကျွန်ုပ်၏အချိန်အများစုကို အချိန်ယူနေသော်လည်း ၎င်းကို ကျွန်ုပ်ဆက်လက်လုပ်ဆောင်နေပါသည်။ Reddit clone ဖန်တီးခြင်းသည် ပရိုဂရမ်းမင်းကို လေ့လာရန် ထိရောက်သောနည်းလမ်း ( Reddit ကို တချိန်တည်းတွင် ရှာဖွေနေချိန်)။
Reddit သည် သင့်အား အလွန်ချမ်းသာကြွယ်ဝစေပါသည်။. မည်သည့်အင်္ဂါရပ်ကိုမှ ချန်မထားပါနှင့် သို့မဟုတ် တော်ရိလျော်ကန် မလုပ်ပါနှင့်။ ဖောက်သည်များနှင့် ဖောက်သည်များနှင့်အတူ လက်တွေ့ကမ္ဘာတွင် သင်သည် တော်ရိလျော်ရိ အလုပ်မလုပ်နိုင်ပါ သို့မဟုတ် အလုပ်အမြန်ဆုံးရှုံးရလိမ့်မည်။
စမတ်ကျသော ဖောက်သည်များသည် အလုပ်ကို ညံ့ဖျင်းစွာ လုပ်ဆောင်နေကြောင်း ချက်ချင်း သဘောပေါက်ပြီး အခြားတစ်ဦးကို ရှာဖွေလိမ့်မည်။
Публикация пакета NPM с открытым исходным кодом
သင်သည် Javascript ကုဒ်ကိုရေးပါက၊ သင်သည် package manager ကိုအသုံးပြုရန် အလားအလာရှိသည်။ ပက်ကေ့ဂျ်မန်နေဂျာသည် သင့်အား အခြားသူများရေးသားပြီး ထုတ်ဝေထားသည့် ရှိပြီးသားကုဒ်ကို ပြန်သုံးခွင့်ပြုသည်။
ပက်ကေ့ဂျ်တစ်ခု၏ ဖွံ့ဖြိုးတိုးတက်မှု သံသရာကို နားလည်ခြင်းသည် အလွန်ကောင်းမွန်သော အတွေ့အကြုံကို ပေးစွမ်းမည်ဖြစ်သည်။ ကုဒ်ထုတ်ရာတွင် သင်သိထားရမည့်အချက်များစွာရှိပါသည်။ လုံခြုံရေး၊ အဓိပ္ပါယ်ဖွင့်ဆိုမှု၊ အတိုင်းအတာ၊ စည်းမျဥ်းများအမည်ပေးခြင်းနှင့် ပြုပြင်ထိန်းသိမ်းမှုတို့အကြောင်း သင်စဉ်းစားရန်လိုသည်။
အထုပ်က ဘာမဆိုဖြစ်နိုင်တယ်။ သင့်တွင် စိတ်ကူးမရှိပါက သင့်ကိုယ်ပိုင် Lodash ကို ဖန်တီးပြီး ၎င်းကို ထုတ်ဝေပါ။
Lodash-
သင်အွန်လိုင်းမှာလုပ်ထားတဲ့အရာတစ်ခုရှိခြင်းက သင့်ကိုအခြားသူတွေထက် 10% ပိုစေတယ်။ open source နှင့် packages များအကြောင်း။
Учебный план freeCodeCamp
freeCodecamp သည်များစွာစုဆောင်းထားသည်။ .
freeCodeCamp သည် အကျိုးအမြတ်မယူသော အဖွဲ့အစည်းတစ်ခုဖြစ်သည်။ ၎င်းတွင် အပြန်အလှန်အကျိုးပြုသော ဝဘ်အခြေခံ သင်ယူမှုပလပ်ဖောင်း၊ အွန်လိုင်းအသိုင်းအဝိုင်းဖိုရမ်၊ စကားပြောခန်းများ၊ အလတ်စား ပုံနှိပ်ထုတ်ဝေမှုများနှင့် လူတိုင်းအတွက် သင်ယူမှုဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုကို လူတိုင်းလက်လှမ်းမီနိုင်စေရန် ရည်ရွယ်သည့် အရာများ ပါဝင်သည်။
သင်တန်းတစ်ခုလုံးကို ပြီးမြောက်အောင် စီမံနိုင်ရင် မင်းရဲ့ပထမဆုံးအလုပ်အတွက် အရည်အချင်းပြည့်မီလိမ့်မယ်။
Создайте HTTP-сервер с нуля
HTTP ပရိုတိုကောသည် အင်တာနက်ပေါ်တွင် အကြောင်းအရာများ ဖြတ်သန်းသွားလာနိုင်သည့် အဓိက ပရိုတိုကောများထဲမှ တစ်ခုဖြစ်သည်။ HTTP ဆာဗာများကို HTML၊ CSS နှင့် JS ကဲ့သို့သော တည်ငြိမ်သော အကြောင်းအရာများကို ဆောင်ရွက်ပေးရန်အတွက် အသုံးပြုပါသည်။
HTTP ပရိုတိုကောကို အစမှ အကောင်အထည်ဖော်နိုင်ခြင်းကြောင့် အရာများ အပြန်အလှန်အကျိုးသက်ရောက်မှုအပေါ် သင့်အသိပညာကို တိုးမြင့်လာစေမည်ဖြစ်သည်။
ဥပမာအားဖြင့်၊ သင်သည် NodeJs ကိုအသုံးပြုပါက၊ Express သည် HTTP ဆာဗာကို ပံ့ပိုးပေးသည်ကို သင်သိပါသည်။
အကိုးအကားအတွက်၊ သင်လုပ်နိုင်သလား ကြည့်ပါ-
- မည်သည့်စာကြည့်တိုက်ကိုမျှ အသုံးမပြုဘဲ ဆာဗာတစ်ခု တည်ဆောက်ပါ။
- ဆာဗာသည် HTML၊ CSS နှင့် JS အကြောင်းအရာတို့ကို ဆောင်ရွက်ပေးရပါမည်။
- Router ကို အစမှ အကောင်အထည်ဖော်ခြင်း။
- အပြောင်းအလဲများကို စောင့်ကြည့်ပြီး ဆာဗာကို အပ်ဒိတ်လုပ်ပါ။
ဘာကြောင့်မှန်းမသိရင် သုံးပါ။ HTTP ဆာဗာတစ်ခု ဖန်တီးရန် ကြိုးစားပါ။ အစကနေ။
Десктопное приложение для заметок
ငါတို့အားလုံး မှတ်ထားကြတယ် မဟုတ်လား?
မှတ်စုအက်ပ်တစ်ခု ဖန်တီးကြပါစို့။ အပလီကေးရှင်းသည် မှတ်စုများကို သိမ်းဆည်းပြီး ၎င်းတို့ကို ဒေတာဘေ့စ်နှင့် ထပ်တူပြုရန် လိုအပ်သည်။ Electron၊ Swift သို့မဟုတ် သင်နှစ်သက်သမျှနှင့် သင့်စနစ်အတွက် အလုပ်လုပ်သည့်အရာကို အသုံးပြု၍ မူရင်းအက်ပ်ကို တည်ဆောက်ပါ။
၎င်းကို ပထမဆုံးစိန်ခေါ်မှု (စာသားတည်းဖြတ်သူ) နှင့် ပေါင်းစည်းရန် အားမနာပါနှင့်။
ဘောနပ်စ်အနေဖြင့်၊ သင့်ဒက်စတော့ဗားရှင်းကို ဝဘ်ဗားရှင်းနှင့် စင့်ခ်လုပ်ကြည့်ပါ။
Подкасты (клон Overcast)
ပေါ့တ်ကာစ်တွေကို ဘယ်သူက နားမထောင်တာလဲ။
အောက်ပါလုပ်ဆောင်ချက်များဖြင့် ဝဘ်အက်ပလီကေးရှင်းကို ဖန်တီးပါ။
- အကောင့်တစ်ခုဖန်တီးသည်
- ပေါ့တ်ကာစ်များကို ရှာဖွေပါ။
- အဆင့်သတ်မှတ်ပြီး ပေါ့တ်ကာစ်များကို စာရင်းသွင်းပါ။
- ရပ်ပြီး ကစားပါ၊ မြန်နှုန်း၊ ရှေ့နှင့် နောက်သို့ စက္ကန့် 30 ကြာ လုပ်ဆောင်ချက်များကို ပြောင်းလဲပါ။
အစမှတ်အဖြစ် iTunes API ကို အသုံးပြုကြည့်ပါ။ အခြားအရင်းအမြစ်များကို သိပါက comment တွင် ရေးပေးပါ။
ဖန်သားပြင်ရိုက်
မင်္ဂလာပါ! ငါ အခုပဲ ငါ့စခရင်ကို ရိုက်နေတယ်။
သင့်စခရင်ကို ဖမ်းယူပြီး ကလစ်အဖြစ် သိမ်းဆည်းရန် ခွင့်ပြုသည့် ဒက်စ်တော့ သို့မဟုတ် ဝဘ်အက်ပ်ကို ဖန်တီးပါ။ .gif
ဒီမှာ ဒါကို အောင်မြင်အောင် ဘယ်လိုလုပ်မလဲ။
သတင်းရင်းမြစ်
source: www.habr.com