1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
អត្ថបទនេះត្រូវបានបកប្រែដោយមានការគាំទ្រពីកម្មវិធី EDISON ដែល , ក៏ដូចជា .
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 ដំណើរការ ការដឹងពីរបៀបដំណើរការផ្ទាំងក្រណាត់គឺជាជំនាញសំខាន់មួយនៅក្នុងកម្មវិធីជាច្រើន។
- របៀបសម្របសម្រួលការអនុញ្ញាតរបស់អ្នកប្រើប្រាស់។ អ្នកប្រើប្រាស់ម្នាក់ៗអាចគូរមួយភីកសែលរៀងរាល់ 15 នាទីដោយមិនចាំបាច់ចូល។
- បង្កើតវគ្គខូគី។
Squoosh
Squoosh គឺជាកម្មវិធីបង្ហាប់រូបភាពដែលមានជម្រើសកម្រិតខ្ពស់ជាច្រើន។
GIF 20 មេកាបៃ
ដោយបង្កើតកំណែផ្ទាល់ខ្លួនរបស់អ្នកនៃ Squoosh អ្នកនឹងរៀន:
- របៀបធ្វើការជាមួយទំហំរូបភាព
- ស្វែងយល់ពីមូលដ្ឋានគ្រឹះនៃ Drag'n'Drop API
- ស្វែងយល់ពីរបៀបដែល API និងអ្នកស្តាប់ព្រឹត្តិការណ៍ដំណើរការ
- របៀបបង្ហោះ និងនាំចេញឯកសារ
ចំណាំ: ម៉ាស៊ីនបង្ហាប់រូបភាពគឺក្នុងស្រុក។ វាមិនចាំបាច់ក្នុងការផ្ញើទិន្នន័យបន្ថែមទៅម៉ាស៊ីនមេទេ។ អ្នកអាចមានម៉ាស៊ីនបង្ហាប់នៅផ្ទះ ឬអ្នកអាចប្រើវានៅលើម៉ាស៊ីនមេតាមជម្រើសរបស់អ្នក។
កម្មវិធីគណនា
ឆាប់ឡើង? ធ្ងន់ធ្ងរ? ម៉ាស៊ីនគិតលេខ? បាទពិតជាម៉ាស៊ីនគិតលេខ។ ការយល់ដឹងអំពីមូលដ្ឋានគ្រឹះនៃប្រតិបត្តិការគណិតវិទ្យា និងរបៀបដែលពួកគេធ្វើការជាមួយគ្នា គឺជាជំនាញសំខាន់មួយសម្រាប់សម្រួលកម្មវិធីរបស់អ្នក។ មិនយូរមិនឆាប់ អ្នកនឹងត្រូវដោះស្រាយជាមួយលេខ ហើយកាន់តែឆាប់កាន់តែល្អ។
តាមរយៈការបង្កើតម៉ាស៊ីនគិតលេខដោយខ្លួនឯង អ្នកនឹងរៀន៖
- ធ្វើការជាមួយលេខ និងប្រតិបត្តិការគណិតវិទ្យា
- អនុវត្តជាមួយ API អ្នកស្តាប់ព្រឹត្តិការណ៍
- របៀបរៀបចំធាតុ, យល់ពីរចនាប័ទ្ម
Crawler (ម៉ាស៊ីនស្វែងរក)
មនុស្សគ្រប់គ្នាបានប្រើម៉ាស៊ីនស្វែងរក ដូច្នេះហេតុអ្វីមិនបង្កើតដោយខ្លួនឯង? Crawlers ត្រូវការដើម្បីស្វែងរកព័ត៌មាន។ មនុស្សគ្រប់គ្នាប្រើប្រាស់វាជារៀងរាល់ថ្ងៃ ហើយតម្រូវការសម្រាប់បច្ចេកវិទ្យានេះ និងអ្នកឯកទេសនឹងកើនឡើងតាមពេលវេលាតែប៉ុណ្ណោះ។
ម៉ាស៊ីនស្វែងរក Google
អ្វីដែលអ្នកនឹងរៀនដោយបង្កើតម៉ាស៊ីនស្វែងរកផ្ទាល់ខ្លួនរបស់អ្នក៖
- របៀបដែល crawlers ដំណើរការ
- របៀបដាក់លិបិក្រមគេហទំព័រ និងរបៀបចាត់ចំណាត់ថ្នាក់ពួកវាដោយការវាយតម្លៃ និងកេរ្តិ៍ឈ្មោះ
- របៀបរក្សាទុកគេហទំព័រដែលបានធ្វើលិបិក្រមនៅក្នុងមូលដ្ឋានទិន្នន័យ និងរបៀបធ្វើការជាមួយមូលដ្ឋានទិន្នន័យ
កម្មវិធីចាក់តន្ត្រី (Spotify, Apple Music)
មនុស្សគ្រប់គ្នាស្តាប់តន្ត្រី - វាគ្រាន់តែជាផ្នែកសំខាន់មួយនៃជីវិតរបស់យើងប៉ុណ្ណោះ។ តោះបង្កើតកម្មវិធីចាក់តន្ត្រី ដើម្បីយល់កាន់តែច្បាស់ពីរបៀបដែលយន្តការមូលដ្ឋាននៃវេទិកាស្ទ្រីមតន្ត្រីទំនើបដំណើរការ។
តាម Online
អ្វីដែលអ្នកនឹងរៀនដោយបង្កើតវេទិកាស្ទ្រីមតន្ត្រីផ្ទាល់ខ្លួនរបស់អ្នក៖
- របៀបធ្វើការជាមួយ API ។ ប្រើ API ពី Spotify ឬ Apple Music
- របៀបលេង ផ្អាក ឬត្រឡប់ទៅកាន់បទបន្ទាប់/ពីមុន
- របៀបផ្លាស់ប្តូរកម្រិតសំឡេង
- របៀបគ្រប់គ្រងការបញ្ជូនអ្នកប្រើប្រាស់ និងប្រវត្តិកម្មវិធីរុករកតាមអ៊ីនធឺណិត
កម្មវិធីស្វែងរកភាពយន្តដោយប្រើ React (ជាមួយទំពក់)
រឿងដំបូងដែលអ្នកអាចចាប់ផ្តើមជាមួយគឺបង្កើតកម្មវិធីស្វែងរកភាពយន្តដោយប្រើ React ។ ខាងក្រោមនេះជារូបភាពនៃកម្មវិធីចុងក្រោយនឹងមើលទៅដូចជា៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
តាមរយៈការបង្កើតកម្មវិធីនេះ អ្នកនឹងធ្វើឱ្យប្រសើរឡើងនូវជំនាញ React របស់អ្នកដោយប្រើ Hooks API ថ្មី។ គម្រោងឧទាហរណ៍នេះប្រើសមាសធាតុប្រតិកម្ម ទំពក់ជាច្រើន API ខាងក្រៅ ហើយពិតណាស់រចនាប័ទ្ម CSS មួយចំនួន។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- ប្រតិកម្មជាមួយទំពក់
- បង្កើត - ប្រតិកម្ម - កម្មវិធី
- JSX
- ជា CSS
ដោយមិនប្រើថ្នាក់ណាមួយ គម្រោងទាំងនេះផ្តល់ឱ្យអ្នកនូវចំណុចចូលដ៏ល្អឥតខ្ចោះទៅក្នុងមុខងារ React ហើយពិតជានឹងជួយអ្នកនៅឆ្នាំ 2020។ អ្នកអាចរកឃើញ . ធ្វើតាមការណែនាំ ឬធ្វើវាដោយខ្លួនឯង។
កម្មវិធីជជែកជាមួយ Vue
គម្រោងដ៏អស្ចារ្យមួយទៀតដែលអ្នកត្រូវធ្វើគឺបង្កើតកម្មវិធីជជែកដោយប្រើបណ្ណាល័យ JavaScript ដែលខ្ញុំចូលចិត្ត៖ VueJS។ កម្មវិធីនឹងមើលទៅដូចនេះ៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបបង្កើតកម្មវិធី Vue ពីដំបូង - ការបង្កើតសមាសធាតុ ការគ្រប់គ្រងស្ថានភាព បង្កើតផ្លូវ ភ្ជាប់ទៅសេវាកម្មភាគីទីបី និងសូម្បីតែការគ្រប់គ្រងការផ្ទៀងផ្ទាត់។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- មើល
- វុច
- រ៉ោតទ័រ Vue
- វៃក្លី
- អ្នករុញ
- ជា CSS
នេះគឺជាគម្រោងដ៏អស្ចារ្យមួយដើម្បីចាប់ផ្តើមជាមួយ Vue ឬកែលម្អជំនាញដែលមានស្រាប់របស់អ្នក ដើម្បីឈានទៅរកការអភិវឌ្ឍន៍នៅឆ្នាំ 2020។ អ្នកអាចរកឃើញ .
កម្មវិធីអាកាសធាតុដ៏ស្រស់ស្អាតជាមួយ Angular 8
ឧទាហរណ៍នេះនឹងជួយអ្នកបង្កើតកម្មវិធីអាកាសធាតុដ៏ស្រស់ស្អាតដោយប្រើ Angular 8៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
គម្រោងនេះនឹងបង្រៀនអ្នកនូវជំនាញដ៏មានតម្លៃក្នុងការបង្កើតកម្មវិធីតាំងពីដំបូង - ពីការរចនារហូតដល់ការអភិវឌ្ឍន៍ គ្រប់មធ្យោបាយរហូតដល់កម្មវិធីដែលត្រៀមរួចជាស្រេច។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- មុំ ២
- Firebase
- ការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ
- CSS ជាមួយ Grid និង Flexbox
- ងាយស្រួលចល័ត និងអាចបត់បែនបាន។
- របៀបងងឹត
- ចំណុចប្រទាក់ដ៏ស្រស់ស្អាត
អ្វីដែលខ្ញុំពិតជាស្រឡាញ់ចំពោះគម្រោងគ្រប់ជ្រុងជ្រោយនេះគឺថាអ្នកមិនសិក្សាអ្វីៗដោយឯកោ។ ផ្ទុយទៅវិញ អ្នករៀនពីដំណើរការអភិវឌ្ឍន៍ទាំងមូល ចាប់ពីការរចនារហូតដល់ការដាក់ពង្រាយចុងក្រោយ។
កម្មវិធីត្រូវធ្វើដោយប្រើ Svelte
Svelte គឺដូចជាក្មេងថ្មីនៅលើវិធីសាស្រ្តផ្អែកលើសមាសធាតុ - យ៉ាងហោចណាស់ស្រដៀងទៅនឹង React, Vue និង Angular ។ ហើយនេះគឺជាផលិតផលថ្មីដ៏ពេញនិយមបំផុតមួយសម្រាប់ឆ្នាំ 2020។
កម្មវិធីដែលត្រូវធ្វើគឺមិនចាំបាច់ជាប្រធានបទក្តៅបំផុតនោះទេ ប៉ុន្តែវានឹងជួយអ្នកឱ្យពង្រឹងជំនាញ Svelte របស់អ្នក។ វានឹងមើលទៅដូចនេះ៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
ការបង្រៀននេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធីដោយប្រើ Svelte 3 ពីដើមដល់ចប់។ អ្នកនឹងប្រើសមាសធាតុ រចនាប័ទ្ម និងឧបករណ៍ដោះស្រាយព្រឹត្តិការណ៍
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- ស្វេលតេ ៣
- សមាសភាគ
- រចនាប័ទ្មជាមួយ CSS
- វាក្យសម្ព័ន្ធ ES 6
មិនមានគម្រោងចាប់ផ្តើម Svelte ល្អច្រើនទេ ដូច្នេះខ្ញុំបានរកឃើញ .
កម្មវិធី E-commerce ដោយប្រើ Next.js
Next.js គឺជាក្របខ័ណ្ឌដ៏ពេញនិយមបំផុតសម្រាប់បង្កើតកម្មវិធី React ដែលគាំទ្រការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេចេញពីប្រអប់។
គម្រោងនេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធី e-commerce ដែលមើលទៅដូចនេះ៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងគម្រោងនេះ អ្នកនឹងរៀនពីរបៀបអភិវឌ្ឍជាមួយ Next.js—បង្កើតទំព័រ និងសមាសធាតុថ្មី ស្រង់ទិន្នន័យ និងរចនាប័ទ្ម ហើយដាក់ឱ្យប្រើប្រាស់កម្មវិធីបន្ទាប់។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- Next.js ។
- សមាសភាគ និងទំព័រ
- គំរូទិន្នន័យ
- ការធ្វើឱ្យមានស្ថេរភាព
- ការដាក់ពង្រាយគម្រោង
- SSR និង SPA
វាតែងតែល្អណាស់ក្នុងការមានឧទាហរណ៍ជាក់ស្តែងដូចជាកម្មវិធី e-commerce ដើម្បីរៀនអ្វីថ្មី។ អ្នកអាច .
ប្លុកពហុភាសាពេញលេញជាមួយ Nuxt.js
Nuxt.js គឺសម្រាប់ Vue អ្វីដែល Next.js គឺសម្រាប់ React៖ ក្របខ័ណ្ឌដ៏ល្អសម្រាប់ការរួមបញ្ចូលគ្នានូវថាមពលនៃការបង្ហាញផ្នែកខាងម៉ាស៊ីនមេ និងកម្មវិធីទំព័រតែមួយ
កម្មវិធីចុងក្រោយដែលអ្នកអាចបង្កើតនឹងមើលទៅដូចនេះ៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងគម្រោងគំរូនេះ អ្នកនឹងរៀនពីរបៀបបង្កើតគេហទំព័រពេញលេញដោយប្រើ Nuxt.js ចាប់ពីការដំឡើងដំបូងរហូតដល់ការដាក់ឱ្យប្រើប្រាស់ចុងក្រោយ។
វាទាញយកអត្ថប្រយោជន៍ពីលក្ខណៈពិសេសល្អៗជាច្រើនដែល Nuxt មានផ្តល់ជូន ដូចជាទំព័រ និងសមាសធាតុ និងការកំណត់រចនាប័ទ្មជាមួយ SCSS ។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- Nuxt.js
- សមាសភាគ និងទំព័រ
- ម៉ូឌុល Storyblock
- ត្រីឆ្លាម
- Vuex សម្រាប់ការគ្រប់គ្រងរដ្ឋ
- SCSS សម្រាប់រចនាប័ទ្ម
- ឧបករណ៍កណ្តាលបន្ទាប់
ដែលរួមបញ្ចូលលក្ខណៈពិសេស Nuxt.js ដ៏អស្ចារ្យជាច្រើន។ ខ្ញុំផ្ទាល់ចូលចិត្តធ្វើការជាមួយ Nuxt ដូច្នេះអ្នកគួរតែសាកល្បងវាព្រោះវានឹងធ្វើឱ្យអ្នកក្លាយជាអ្នកអភិវឌ្ឍន៍ Vue ដ៏អស្ចារ្យផងដែរ។
ប្លុកជាមួយ Gatsby
Gatsby គឺជាម៉ាស៊ីនបង្កើតគេហទំព័រឋិតិវន្តដ៏ល្អមួយដោយប្រើ React និង GraphQL ។ នេះជាលទ្ធផលនៃគម្រោង៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
នៅក្នុងមេរៀននេះ អ្នកនឹងរៀនពីរបៀបប្រើ Gatsby ដើម្បីបង្កើតប្លក់ដែលអ្នកនឹងប្រើដើម្បីសរសេរអត្ថបទរបស់អ្នកដោយប្រើ React និង GraphQL។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- ហ្គេតប៊ី
- ប្រតិកម្ម
- ក្រាហ្វិច។
- កម្មវិធីជំនួយ និងស្បែក
- MDX/Markdown
- Bootstrap CSS
- ពុម្ព
ប្រសិនបើអ្នកធ្លាប់ចង់ចាប់ផ្តើមប្លុក, អំពីរបៀបបង្កើតវាដោយប្រើ React និង GraphQL។
ខ្ញុំមិននិយាយថា WordPress គឺជាជម្រើសមិនល្អទេ ប៉ុន្តែជាមួយ Gatsby អ្នកអាចបង្កើតគេហទំព័រដែលមានប្រសិទ្ធភាពខ្ពស់ដោយប្រើ React - ដែលជាការរួមបញ្ចូលគ្នាដ៏អស្ចារ្យ។
ប្លុកជាមួយ Gridsome
Gridsome សម្រាប់ Vue... អូខេ យើងមានវារួចហើយជាមួយ Next/Nuxt។
ប៉ុន្តែសម្រាប់ Gridsome និង Gatsby ក៏ដូចគ្នាដែរ។ ទាំងពីរប្រើ GraphQL ជាស្រទាប់ទិន្នន័យរបស់ពួកគេ ប៉ុន្តែ Gridsome ប្រើ VueJS ។ នេះក៏ជាកម្មវិធីបង្កើតគេហទំព័រឋិតិវន្តដ៏អស្ចារ្យ ដែលនឹងជួយអ្នកបង្កើតប្លុកដ៏អស្ចារ្យ៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
គម្រោងនេះនឹងបង្រៀនអ្នកពីរបៀបបង្កើតប្លក់សាមញ្ញ ដើម្បីចាប់ផ្តើមជាមួយ Gridsome, GraphQL និង Markdown ។ វាក៏គ្របដណ្តប់ផងដែរអំពីរបៀបដាក់ឱ្យប្រើប្រាស់កម្មវិធីតាមរយៈ Netlify ។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- ក្រឡាចត្រង្គ
- មើល
- ក្រាហ្វិច។
- Markdown
- Netlify
នេះមិនមែនជាការបង្រៀនដ៏ទូលំទូលាយបំផុតនោះទេ ប៉ុន្តែវាគ្របដណ្តប់គោលគំនិតជាមូលដ្ឋាននៃ Gridsome និង .
កម្មវិធីចាក់សំឡេងដូច SoundCloud ដោយប្រើ Quasar
Quasar គឺជាក្របខ័ណ្ឌ Vue មួយផ្សេងទៀតដែលអាចត្រូវបានប្រើដើម្បីបង្កើតកម្មវិធីទូរស័ព្ទ។ នៅក្នុងគម្រោងនេះ អ្នកនឹងបង្កើតកម្មវិធីចាក់អូឌីយ៉ូ ឧទាហរណ៍៖
តើអ្នកនឹងរៀនអ្វីខ្លះ
ខណៈពេលដែលគម្រោងផ្សេងទៀតផ្តោតជាសំខាន់លើកម្មវិធីបណ្តាញ គម្រោងនេះនឹងបង្ហាញអ្នកពីរបៀបបង្កើតកម្មវិធីទូរស័ព្ទដោយប្រើ Vue និង Quasar framework ។
អ្នកគួរតែមាន Cordova ដំណើរការជាមួយ Android Studio/Xcode ដែលបានកំណត់រចនាសម្ព័ន្ធរួចហើយ។ បើមិនដូច្នោះទេ សៀវភៅដៃមានតំណភ្ជាប់ទៅកាន់គេហទំព័រ Quasar ដែលពួកគេបង្ហាញអ្នកពីរបៀបរៀបចំអ្វីៗគ្រប់យ៉ាង។
ជង់បច្ចេកវិទ្យានិងលក្ខណៈពិសេស
- quasar
- មើល
- Cordova
- WaveSurfer
- សមាសធាតុ UI
ដោយបង្ហាញពីសមត្ថភាពរបស់ Quasar សម្រាប់ការបង្កើតកម្មវិធីទូរស័ព្ទ។
Форма кредитной карты
ទម្រង់កាតឥណទានដ៏ត្រជាក់ ជាមួយនឹងអន្តរកម្មខ្នាតតូចដ៏រលូន និងរីករាយ។ រួមបញ្ចូលការធ្វើទ្រង់ទ្រាយលេខ ការផ្ទៀងផ្ទាត់ និងការរកឃើញប្រភេទកាតដោយស្វ័យប្រវត្តិ។ វាត្រូវបានបង្កើតឡើងនៅលើ Vue.js ហើយក៏មានការឆ្លើយតបយ៉ាងពេញលេញផងដែរ។ (អ្នកអាចមើលឃើញ .)
អ្វីដែលអ្នកនឹងរៀន៖
- ដំណើរការនិងធ្វើឱ្យទម្រង់មានសុពលភាព
- ដោះស្រាយព្រឹត្តិការណ៍ (ឧទាហរណ៍ នៅពេលដែលវាលផ្លាស់ប្តូរ)
- ស្វែងយល់ពីរបៀបបង្ហាញ និងដាក់ធាតុនៅលើទំព័រ ជាពិសេសព័ត៌មានកាតឥណទានដែលបង្ហាញនៅផ្នែកខាងលើនៃទម្រង់
ក្រាហ្វរបារ
អ៊ីស្តូក្រាម គឺជាគំនូសតាង ឬក្រាហ្វដែលតំណាងឱ្យទិន្នន័យប្រភេទដែលមានរបារចតុកោណដែលមានកម្ពស់ ឬប្រវែងសមាមាត្រទៅនឹងតម្លៃដែលពួកគេតំណាង។
ពួកគេអាចត្រូវបានអនុវត្តបញ្ឈរឬផ្ដេក។ គំនូសតាងរបារបញ្ឈរជួនកាលត្រូវបានគេហៅថាគំនូសតាងបន្ទាត់។
អ្វីដែលអ្នកនឹងរៀន៖
- បង្ហាញទិន្នន័យតាមរបៀបដែលមានរចនាសម្ព័ន្ធ និងអាចយល់បាន។
- បន្ថែម៖ រៀនពីរបៀបប្រើធាតុ
canvasនិងរបៀបគូរធាតុជាមួយវា។
អ្នកអាចស្វែងរកទិន្នន័យចំនួនប្រជាជនពិភពលោក។ ពួកវាត្រូវបានតម្រៀបតាមឆ្នាំ។
Анимация сердечка Twitter
ត្រលប់ទៅឆ្នាំ 2016 Twitter បានណែនាំចលនាដ៏អស្ចារ្យនេះសម្រាប់ tweets របស់ខ្លួន។ គិតត្រឹមឆ្នាំ 2019 វានៅតែមើលទៅជាផ្នែក ដូច្នេះហេតុអ្វីមិនបង្កើតដោយខ្លួនឯង?
អ្វីដែលអ្នកនឹងរៀន៖
- ធ្វើការជាមួយគុណលក្ខណៈ CSS
keyframes - រៀបចំ និងធ្វើឱ្យធាតុ HTML មានចលនា
- ផ្សំ JavaScript, HTML និង CSS
Репозитории GitHub с функцией поиска
មិនមានអ្វីប្លែកទេនៅទីនេះ - ឃ្លាំង GitHub គ្រាន់តែជាបញ្ជីដ៏រុងរឿងប៉ុណ្ណោះ។
គោលដៅគឺដើម្បីបង្ហាញឃ្លាំង និងអនុញ្ញាតឱ្យអ្នកប្រើត្រងពួកវា។ ប្រើ ដើម្បីទទួលបានឃ្លាំងសម្រាប់អ្នកប្រើប្រាស់ម្នាក់ៗ។
ទំព័រប្រវត្តិរូប GitHub -
អ្វីដែលអ្នកនឹងរៀន៖
- ទទួលទិន្នន័យពី API
- បង្ហាញទិន្នន័យពី API
- ត្រង និងបង្ហាញទិន្នន័យពាក់ព័ន្ធសម្រាប់ការស្វែងរកនីមួយៗ
- ស្រេចចិត្ត៖ ប្រសិនបើអ្នកកំពុងប្រឈមមុខនឹងបញ្ហា សូមប្រើ បង្កើតឡើងដោយប្រើ GraphQL ។ .
Чаты в стиле Reddit
ការជជែកគឺជាមធ្យោបាយទំនាក់ទំនងដ៏ពេញនិយមមួយ ដោយសារភាពសាមញ្ញ និងភាពងាយស្រួលនៃការប្រើប្រាស់របស់វា។ ប៉ុន្តែ តើអ្វីទៅជាថាមពលបន្ទប់ជជែកដ៏ទំនើប? WebSockets!
អ្វីដែលអ្នកនឹងរៀន៖
- ប្រើ WebSockets ការទំនាក់ទំនងតាមពេលវេលាជាក់ស្តែង និងការធ្វើបច្ចុប្បន្នភាពទិន្នន័យ
- ធ្វើការជាមួយកម្រិតនៃការចូលប្រើរបស់អ្នកប្រើប្រាស់ (ឧទាហរណ៍ ម្ចាស់ឆានែលជជែកមានតួនាទី
adminនិងអ្នកផ្សេងទៀតនៅក្នុងបន្ទប់ -user) - ដំណើរការ និងធ្វើឱ្យទម្រង់បែបបទមានសុពលភាព - ចងចាំ បង្អួចជជែកសម្រាប់ការផ្ញើសារគឺ
input - បង្កើត និងចូលរួមការជជែកផ្សេងៗ
- ធ្វើការជាមួយសារផ្ទាល់ខ្លួន។ អ្នកប្រើប្រាស់អាចជជែកជាមួយអ្នកប្រើប្រាស់ផ្សេងទៀតជាលក្ខណៈឯកជន។ សំខាន់ អ្នកនឹងបង្កើតការតភ្ជាប់ WebSocket រវាងអ្នកប្រើប្រាស់ពីរនាក់។
Навигация в стиле Stripe
អ្វីដែលធ្វើឱ្យការរុករកនេះមានលក្ខណៈពិសេសនោះគឺថាកុងតឺន័រ popover បំប្លែងឱ្យសមនឹងមាតិកា។ មានភាពឆើតឆាយចំពោះការផ្លាស់ប្តូរនេះបើប្រៀបធៀបទៅនឹងអាកប្បកិរិយាបែបប្រពៃណីនៃការបើក និងបិទផ្ទាំងពាណិជ្ជកម្មថ្មី។
អ្វីដែលអ្នកនឹងរៀន៖
- ផ្សំចលនា CSS ជាមួយនឹងការផ្លាស់ប្តូរ
- បន្ថយខ្លឹមសារ និងអនុវត្តថ្នាក់សកម្មទៅធាតុអណ្តែត
Pacman
បង្កើតកំណែផ្ទាល់ខ្លួនរបស់អ្នកនៃ Pacman ។ នេះគឺជាវិធីដ៏ល្អមួយដើម្បីទទួលបានគំនិតអំពីរបៀបដែលហ្គេមត្រូវបានបង្កើតឡើង និងយល់ពីមូលដ្ឋាន។ ប្រើក្របខ័ណ្ឌ JavaScript, ប្រតិកម្ម ឬ Vue ។
អ្នកនឹងរៀន:
- របៀបដែលធាតុផ្លាស់ទី
- របៀបកំណត់ថាចុចមួយណា
- របៀបកំណត់ពេលវេលានៃការប៉ះទង្គិច
- អ្នកអាចទៅបន្ថែមទៀត និងបន្ថែមការគ្រប់គ្រងចលនាខ្មោច
អ្នកនឹងឃើញឧទាហរណ៍នៃគម្រោងនេះ។ GitHub
ការគ្រប់គ្រងអ្នកប្រើប្រាស់
គម្រោង GitHub
ការបង្កើតកម្មវិធីប្រភេទ CRUD សម្រាប់ការគ្រប់គ្រងអ្នកប្រើប្រាស់នឹងបង្រៀនអ្នកពីមូលដ្ឋានគ្រឹះនៃការអភិវឌ្ឍន៍។ វាមានប្រយោជន៍ជាពិសេសសម្រាប់អ្នកអភិវឌ្ឍន៍ថ្មី។
អ្នកនឹងរៀន:
- តើអ្វីជាផ្លូវ
- របៀបដោះស្រាយទម្រង់បញ្ចូលទិន្នន័យ និងពិនិត្យមើលអ្វីដែលអ្នកប្រើបានបញ្ចូល
- របៀបធ្វើការជាមួយមូលដ្ឋានទិន្នន័យ - បង្កើត អាន ធ្វើបច្ចុប្បន្នភាព និងលុបសកម្មភាព
Проверка погоды в вашем местоположении
គម្រោង GitHub
ប្រសិនបើអ្នកចង់បង្កើតកម្មវិធី សូមចាប់ផ្តើមជាមួយកម្មវិធីអាកាសធាតុ។ គម្រោងនេះអាចត្រូវបានបញ្ចប់ដោយប្រើ Swift ។
បន្ថែមពីលើការទទួលបានបទពិសោធន៍បង្កើតកម្មវិធី អ្នកនឹងរៀន៖
- របៀបធ្វើការជាមួយ API
- របៀបប្រើទីតាំងភូមិសាស្ត្រ
- ធ្វើឱ្យកម្មវិធីរបស់អ្នកមានភាពស្វាហាប់ជាងមុនដោយបន្ថែមការបញ្ចូលអត្ថបទ។ នៅក្នុងនោះ អ្នកប្រើប្រាស់នឹងអាចចូលទៅក្នុងទីតាំងរបស់ពួកគេ ដើម្បីពិនិត្យមើលអាកាសធាតុនៅក្នុងទីតាំងជាក់លាក់មួយ។
អ្នកនឹងត្រូវការ API ។ ដើម្បីទទួលបានទិន្នន័យអាកាសធាតុ សូមប្រើ OpenWeather API។ ព័ត៌មានបន្ថែមអំពី OpenWeather API.
Окно чата
បង្អួចជជែករបស់ខ្ញុំនៅក្នុងសកម្មភាព បើកនៅក្នុងផ្ទាំងកម្មវិធីរុករកតាមអ៊ីនធឺណិតពីរ
ការបង្កើតផ្ទាំងជជែកគឺជាវិធីដ៏ល្អឥតខ្ចោះដើម្បីចាប់ផ្តើមជាមួយរន្ធ។ ជម្រើសនៃជង់បច្ចេកវិទ្យាគឺធំណាស់។ ជាឧទាហរណ៍ Node.js គឺល្អឥតខ្ចោះ។
អ្នកនឹងរៀនពីរបៀបដែលរន្ធដំណើរការ និងរបៀបអនុវត្តពួកវា។ នេះគឺជាអត្ថប្រយោជន៍ចម្បងនៃគម្រោងនេះ។
ប្រសិនបើអ្នកជាអ្នកអភិវឌ្ឍន៍ Laravel ដែលចង់ធ្វើការជាមួយ sockets សូមអានរបស់ខ្ញុំ
GitLab ស៊ីអាយ
ប្រសិនបើអ្នកថ្មីក្នុងការរួមបញ្ចូលជាបន្តបន្ទាប់ (CI) សូមលេងជាមួយ GitLab CI ។ រៀបចំបរិស្ថានមួយចំនួន ហើយព្យាយាមដំណើរការការធ្វើតេស្តមួយចំនួន។ វាមិនមែនជាគម្រោងពិបាកខ្លាំងនោះទេ ប៉ុន្តែខ្ញុំប្រាកដថាអ្នកនឹងរៀនបានច្រើនពីវា។ ក្រុមអភិវឌ្ឍន៍ជាច្រើនឥឡូវនេះកំពុងប្រើប្រាស់ CI ។ ដឹងពីរបៀបប្រើវាមានប្រយោជន៍។
អ្នកនឹងរៀន:
- តើ GitLab CI ជាអ្វី?
- របៀបកំណត់រចនាសម្ព័ន្ធ
.gitlab-ci.ymlដែលប្រាប់អ្នកប្រើប្រាស់ GitLab អ្វីដែលត្រូវធ្វើ - របៀបដាក់ពង្រាយទៅបរិយាកាសផ្សេងទៀត។
Анализатор сайтов
បង្កើត scraper ដែលវិភាគអត្ថន័យនៃគេហទំព័រ និងបង្កើតការវាយតម្លៃរបស់ពួកគេ។ ឧទាហរណ៍ អ្នកអាចពិនិត្យរកស្លាក alt ដែលបាត់នៅក្នុងរូបភាព។ ឬពិនិត្យមើលថាតើទំព័រមានស្លាកមេតា SEO ។ scraper អាចត្រូវបានបង្កើតដោយគ្មានចំណុចប្រទាក់អ្នកប្រើ។
អ្នកនឹងរៀន:
- តើ scraper ដំណើរការយ៉ាងដូចម្តេច?
- របៀបបង្កើតឧបករណ៍ជ្រើសរើស 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 use 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
នៅទីនេះ , как добиться этого.
ប្រភព។
ប្រភព: www.habr.com