1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» чирэх боломжтой элемент и поместить его в 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.
Тайлбар: энд .
Подборка проектов из предыдущих публикаций.
Layer
Давхарга бол хүн бүр хуваалцсан "самбар" дээр пиксел зурах боломжтой нийгэмлэг юм. Анхны санаа нь Reddit дээр төрсөн. r/Layer нийгэмлэг нь хүн бүр бүтээгч байж, нийтлэг үйл хэрэгт хувь нэмрээ оруулж чадна гэсэн хамтын бүтээлч байдлын зүйрлэл юм.
Та өөрийн давхаргын төслийг бүтээхдээ юу сурах вэ:
- JavaScript canvas хэрхэн ажилладаг вэ? Зурган дээр хэрхэн ажиллахаа мэдэх нь олон хэрэглээний чухал ур чадвар юм.
- Хэрэглэгчийн зөвшөөрлийг хэрхэн зохицуулах вэ. Хэрэглэгч бүр нэвтрэх шаардлагагүйгээр 15 минут тутамд нэг пиксел зурах боломжтой.
- Күүки сесс үүсгэх.
Сквош
Squoosh бол олон дэвшилтэт сонголт бүхий зураг шахах програм юм.
GIF 20 MB
Squoosh-ийн өөрийн хувилбарыг үүсгэснээр та дараахь зүйлийг сурах болно.
- Зургийн хэмжээтэй хэрхэн ажиллах вэ
- Drag'n'Drop API-ийн үндсийг мэдэж аваарай
- API болон үйл явдлын сонсогчид хэрхэн ажилладагийг ойлгох
- Файлуудыг хэрхэн байршуулах, экспортлох талаар
Тайлбар: Зургийн компрессор нь орон нутгийнх юм. Сервер рүү нэмэлт мэдээлэл илгээх шаардлагагүй. Та компрессорыг гэртээ суулгаж болно, эсвэл сервер дээр ашиглах боломжтой.
Тооны машин
Аливээ? Ноцтой юу? Тооцоологч? Тийм ээ, яг тооцоолуур. Математикийн үйлдлүүдийн үндсийг ойлгох, тэдгээрийн хэрхэн хамтран ажиллахыг ойлгох нь таны хэрэглээг хялбарчлахад чухал ур чадвар юм. Эрт орой хэзээ нэгэн цагт та тоонуудтай харьцах хэрэгтэй болно, хэдий чинээ хурдан байх тусмаа сайн.
Өөрийнхөө тооны машиныг хийснээр та дараахь зүйлийг сурах болно.
- Тоон болон математикийн үйлдлүүдтэй ажиллах
- Үйл явдлын сонсогч API дээр дадлага хий
- Элементүүдийг хэрхэн яаж зохион байгуулах, хэв маягийг ойлгох
Мөлхөгч (Хайлтын систем)
Хүн бүр хайлтын систем ашигласан тул яагаад өөрийнхөөрөө үүсгэж болохгүй гэж? Мэдээлэл хайхад мөлхөгчид хэрэгтэй. Хүн бүр тэдгээрийг өдөр бүр ашигладаг бөгөөд энэ технологи, мэргэжилтнүүдийн эрэлт хэрэгцээ цаг хугацааны явцад л өсөх болно.
Google хайлтын систем
Өөрийн хайлтын системийг бий болгосноор та юу сурах вэ:
- Мөлхөгчид хэрхэн ажилладаг
- Сайтуудыг хэрхэн индексжүүлэх, рейтинг, нэр хүндээр нь хэрхэн эрэмбэлэх вэ
- Индексжүүлсэн сайтуудыг мэдээллийн санд хэрхэн хадгалах, мэдээллийн сантай хэрхэн ажиллах талаар
Хөгжим тоглуулагч (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 програмыг эхнээс нь хэрхэн бүтээх талаар сурах болно - бүрэлдэхүүн хэсгүүдийг үүсгэх, төлөвийг зохицуулах, маршрут үүсгэх, гуравдагч талын үйлчилгээнд холбогдох, тэр ч байтугай баталгаажуулалтыг зохицуулах.
Техникийн стек ба онцлогууд
- Vue
- vuex
- Vue чиглүүлэгч
- Vue CLI
- Тээрэмчин
- CSS
Энэ бол Vue-г эхлүүлэх, эсвэл 2020 онд хөгжүүлэх чадвараа сайжруулах үнэхээр гайхалтай төсөл юм. чи олж чадна .
Angular 8-тай цаг агаарын сайхан програм
Энэ жишээ танд Angular 8 ашиглан цаг агаарын сайхан програм бүтээхэд тусална.
Та юу сурах вэ
Энэхүү төсөл нь дизайнаас эхлээд хөгжүүлэлт, ашиглахад бэлэн программ хүртэл эхнээс нь програм бүтээх үнэ цэнэтэй ур чадварыг танд заах болно.
Техникийн стек ба онцлогууд
- Булангийн 8
- Функц
- Сервер талын дүрслэл
- Grid болон Flexbox бүхий CSS
- Гар утсанд ээлтэй, дасан зохицох чадвартай
- Харанхуй горим
- Сайхан интерфэйс
Энэ бүх зүйлийг хамарсан төслийн миний үнэхээр дуртай зүйл бол та аливаа зүйлийг тусад нь судалдаггүй явдал юм. Үүний оронд та дизайн хийхээс эхлээд эцсийн байршуулалт хүртэлх бүх хөгжлийн үйл явцыг сурдаг.
Svelte ашиглан хийх ажлын програм
Svelte нь бүрэлдэхүүн хэсэг дээр суурилсан шинэ хүүхэдтэй адил юм - наад зах нь React, Vue болон Angular-тай төстэй. Энэ бол 2020 оны хамгийн халуун шинэ бүтээгдэхүүнүүдийн нэг юм.
Хийх программууд нь хамгийн халуун сэдэв биш ч гэсэн тэд танд Svelte ур чадвараа сайжруулахад үнэхээр тусална. Энэ нь дараах байдлаар харагдах болно.
Та юу сурах вэ
Энэхүү заавар нь танд Svelte 3 ашиглан програмыг эхнээс нь дуустал хэрхэн үүсгэхийг харуулах болно. Та бүрэлдэхүүн хэсэг, загварчлал, үйл явдал зохицуулагчийг ашиглах болно
Техникийн стек ба онцлогууд
- Сайхан 3
- Бүрэлдэхүүн хэсгүүд
- CSS ашиглан загварчлах
- ES 6 синтакс
Олон сайн Svelte гарааны төслүүд байдаггүй тул би олсон .
Next.js ашиглан цахим худалдааны програм
Next.js нь сервер талын рэндэрийг дэмждэг React програмуудыг бүтээх хамгийн алдартай хүрээ юм.
Энэхүү төсөл нь дараах байдлаар харагдах цахим худалдааны програмыг хэрхэн бүтээхийг харуулах болно.
Та юу сурах вэ
Энэ төсөлд та Next.js-ийг хэрхэн хөгжүүлж сурах болно—шинэ хуудас, бүрэлдэхүүн хэсгүүдийг үүсгэх, өгөгдөл задлах, загварчлах, Next програмыг байрлуулах.
Техникийн стек ба онцлогууд
- Дараа нь.js
- Бүрэлдэхүүн хэсгүүд ба хуудаснууд
- Өгөгдлийн түүвэрлэлт
- Загварчлах
- Төслийн байршуулалт
- SSR ба 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 ашигладаг маш сайн статик сайт үүсгэгч юм. Энэ бол төслийн үр дүн юм:
Та юу сурах вэ
Энэ зааварт та React болон GraphQL ашиглан өөрийн нийтлэлээ бичихдээ ашиглах блог үүсгэхийн тулд Gatsby-г хэрхэн ашиглах талаар сурах болно.
Техникийн стек ба онцлогууд
- Гэтсби
- урвалд
- GraphQL
- Plugins болон сэдэв
- 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
- Markdown
- Цэвэршүүлэх
Энэ нь мэдээжийн хэрэг хамгийн дэлгэрэнгүй заавар биш боловч Gridsome болон програмын үндсэн ойлголтуудыг багтаасан болно. .
Quasar ашиглан SoundCloud шиг аудио тоглуулагч
Quasar бол гар утасны програм үүсгэхэд ашиглаж болох өөр нэг Vue хүрээ юм. Энэ төсөлд та аудио тоглуулагч програм үүсгэх болно, жишээлбэл:
Та юу сурах вэ
Бусад төслүүд голчлон вэб програмууд дээр төвлөрдөг бол энэ нь танд Vue болон Quasar framework ашиглан гар утасны программыг хэрхэн бүтээхийг харуулах болно.
Та Cordova-г аль хэдийн Android Studio/Xcode-той тохируулсан байх ёстой. Хэрэв тийм биш бол гарын авлагад бүх зүйлийг хэрхэн тохируулахыг харуулсан Quasar вэб сайтын холбоос байдаг.
Техникийн стек ба онцлогууд
- Квазар
- Vue
- Кордова
- WaveSurfer
- UI бүрэлдэхүүн хэсгүүд
, гар утасны програм үүсгэх Quasar-ийн чадварыг харуулсан.
Форма кредитной карты
Гөлгөр, тааламжтай бичил харилцан үйлчлэл бүхий гайхалтай зээлийн картын хэлбэр. Дугаар форматлах, баталгаажуулах, картын төрлийг автоматаар илрүүлэх зэрэг орно. Энэ нь Vue.js дээр бүтээгдсэн бөгөөд бүрэн хариу үйлдэл үзүүлдэг. (Та харж болно .)
Та юу сурах вэ:
- Маягтыг боловсруулж, баталгаажуулах
- Үйл явдлыг зохицуулах (жишээ нь талбар өөрчлөгдөх үед)
- Хуудасны элементүүдийг, ялангуяа маягтын дээд талд гарч буй зээлийн картын мэдээллийг хэрхэн харуулах, байрлуулах талаар ойлгох
Бар график
Гистограмм нь тэдгээрийн илэрхийлж буй утгуудтай пропорциональ өндөр эсвэл урттай тэгш өнцөгт баар бүхий категори өгөгдлийг харуулсан диаграмм эсвэл график юм.
Тэдгээрийг босоо болон хэвтээ байдлаар хэрэглэж болно. Босоо баганан диаграммыг заримдаа шугаман диаграм гэж нэрлэдэг.
Та юу сурах вэ:
- Өгөгдлийг бүтэцтэй, ойлгомжтой байдлаар харуулах
- Нэмэлт: Элементийг хэрхэн ашиглах талаар суралц
canvasтүүгээр хэрхэн элементүүдийг зурах вэ
Та дэлхийн хүн амын мэдээллийг олж болно. Тэдгээрийг жилээр нь ангилдаг.
Анимация сердечка Twitter
2016 онд Твиттер жиргээнүүддээ зориулж энэхүү гайхалтай хөдөлгөөнт дүрсийг нэвтрүүлсэн. 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 сонгогчийг хэрхэн үүсгэх вэ
- Алгоритмыг хэрхэн бичих вэ
- Хэрэв та үүгээр зогсохыг хүсэхгүй бол хэрэглэгчийн интерфэйс үүсгээрэй. Та мөн шалгасан вэбсайт бүр дээрээ тайлан гаргаж болно.
Определение настроений в социальных сетях
Олон нийтийн мэдээллийн хэрэгслээр сэтгэл хөдлөлийг илрүүлэх нь машин сургалттай танилцах сайхан арга юм.
Та зөвхөн нэг нийгмийн сүлжээнд дүн шинжилгээ хийж эхэлж болно. Хүн бүр ихэвчлэн твиттерээс эхэлдэг.
Хэрэв та машин сурах туршлагатай бол өөр өөр нийгмийн сүлжээнээс мэдээлэл цуглуулж, тэдгээрийг нэгтгэж үзээрэй.
Та сурах болно:
- Машины сургалт гэж юу вэ
Клон Trello
Та юу сурах вэ:
- Хүсэлтийг боловсруулах маршрутын зохион байгуулалт (чиглүүлэлт).
- Чи чирээд тавина уу.
- Шинэ объектуудыг хэрхэн бий болгох вэ (самбар, жагсаалт, карт).
- Оруулсан өгөгдлийг боловсруулах, шалгах.
- Үйлчлүүлэгчийн талаас: дотоод санах ойг хэрхэн ашиглах, дотоод санах ойд өгөгдлийг хэрхэн хадгалах, дотоод сангаас өгөгдлийг хэрхэн унших.
- Сервер талаас: өгөгдлийн санг хэрхэн ашиглах, мэдээллийн санд өгөгдлийг хэрхэн хадгалах, мэдээллийн сангаас өгөгдлийг хэрхэн унших.
, React+Redux дээр хийгдсэн.
Панель админа
Энгийн CRUD програм бөгөөд үндсийг сурахад тохиромжтой. сурцгаая:
- Хэрэглэгч үүсгэх, хэрэглэгчдийг удирдах.
- Өгөгдлийн сантай харилцах - хэрэглэгчдийг үүсгэх, унших, засах, устгах.
- Оруулсан мэдээллийг баталгаажуулж, маягттай ажиллах.
Трекер криптовалют (нативное мобильное приложение)
Юу ч: Swift, Objective-C, React Native, Java, Kotlin.
Суралцъя:
- Төрөлх програмууд хэрхэн ажилладаг.
- API-аас өгөгдлийг хэрхэн татаж авах вэ.
- Үндсэн хуудасны загвар хэрхэн ажилладаг.
- Хөдөлгөөнт симуляторуудтай хэрхэн ажиллах вэ.
. Хэрэв танд илүү сайн зүйл олдвол сэтгэгдэл дээр бичээрэй.
Хэрэв та сонирхож байгаа бол энд байна .
Настроить собственный конфиг webpack с нуля
Техникийн хувьд энэ нь програм биш, гэхдээ энэ нь webpack хэрхэн ажилладагийг дотроос нь ойлгоход маш хэрэгтэй ажил юм. Одоо энэ нь "хар хайрцаг" биш, харин ойлгомжтой хэрэгсэл байх болно.
Шаардлагууд:
- es7-аас es5 хүртэл эмхэтгэх (үндсэн).
- jsx-г js- эсвэл - .vue-г .js-д хөрвүүлэх (та дуудагчийг сурах хэрэгтэй)
- Webpack dev сервер болон халуун модулийг дахин ачаалах тохиргоог хийнэ үү. (vue-cli болон create-react-app хоёуланг нь ашигладаг)
- Heroku, now.sh эсвэл Github ашиглан вэб багцын төслүүдийг хэрхэн ашиглах талаар суралцаарай.
- Өөрийн дуртай препроцессорыг css - scss, small, stylus хөрвүүлэхийн тулд тохируулаарай.
- Вэб багцтай зураг болон svg-г хэрхэн ашиглах талаар суралц.
Клон Hackernews
Жеди бүр өөрийн гэсэн Hackernews хийх шаардлагатай.
Замдаа та юу сурах вэ:
- Hackernews API-тай хэрхэн харилцах вэ.
- Нэг хуудасны програмыг хэрхэн үүсгэх.
- Сэтгэгдэл үзэх, хувь хүний сэтгэгдэл, профайл зэрэг функцуудыг хэрхэн хэрэгжүүлэх вэ.
- Хүсэлтийг боловсруулах маршрутын зохион байгуулалт (чиглүүлэлт).
Тудушечка
Ноцтой юу? Тудушка? Тэдний мянга мянга нь бий. Гэхдээ надад итгээрэй, ийм алдартай болсон шалтгаан бий.
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
энд үүнд хэрхэн хүрэх вэ.
Эх сурвалжууд
Эх сурвалж: www.habr.com