Front-end dojo: dasturchilar ko'nikmalarini o'rgatish loyihalari (5 ta yangi + 43 eski)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Maqola EDISON Software ko'magida tarjima qilingan разрабатывает приложения и сайты, shuningdek startaplarga sarmoya kiritadi.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonus: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

Gifskiy конвертирует видео в GIF используя функцииpng kvant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Eslatma: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Bonus: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Eslatma: shu yerda GitHub example repository.

Подборка проектов из предыдущих публикаций.

qatlam

www.reddit.com/r/layer

Layer - bu hamma umumiy "taxtada" piksel chizishi mumkin bo'lgan hamjamiyat. Asl g'oya Reddit-da tug'ilgan. r/Layer hamjamiyati umumiy ijodkorlikning metaforasidir, har bir kishi ijodkor bo'lishi va umumiy ishga hissa qo'shishi mumkin.

O'zingizning Layer loyihangizni yaratishda nimani o'rganasiz:

• JavaScript kanvasi qanday ishlaydi Tuval bilan qanday ishlashni bilish ko'pgina ilovalarda muhim mahoratdir.
• Foydalanuvchi ruxsatlarini qanday muvofiqlashtirish kerak. Har bir foydalanuvchi tizimga kirmasdan har 15 daqiqada bitta piksel chizishi mumkin.
• Cookie seanslarini yarating.

Squoosh

squoosh.app

Squoosh - bu ko'plab rivojlangan variantlarga ega tasvirni siqish ilovasi.

GIF 20 MB

Squoosh-ning o'z versiyasini yaratish orqali siz quyidagilarni bilib olasiz:

• Rasm o'lchamlari bilan qanday ishlash kerak
• Drag'n'Drop API asoslarini bilib oling
• API va voqea tinglovchilari qanday ishlashini tushuning
• Fayllarni qanday yuklash va eksport qilish

Eslatma: Tasvir kompressori mahalliy. Serverga qo'shimcha ma'lumotlarni yuborish shart emas. Kompressorni uyda bo'lishi mumkin yoki uni serverda ishlatishingiz mumkin, o'zingizning xohishingiz bilan.

Kalkulyator

Qo'ysangchi; qani endi? Jiddiymi? Kalkulyator? Ha, aniq kalkulyator. Matematik operatsiyalarning asoslarini va ular qanday birgalikda ishlashini tushunish ilovalaringizni soddalashtirish uchun muhim mahoratdir. Ertami-kechmi siz raqamlar bilan shug'ullanishingiz kerak va qanchalik tezroq bo'lsa, shuncha yaxshi bo'ladi.

jarodburchill.github.io/CalculatorReactApp

O'z kalkulyatoringizni yaratish orqali siz quyidagilarni o'rganasiz:

• Raqamlar va matematik amallar bilan ishlash
• Voqealar tinglovchilari API bilan mashq qiling
• Elementlarni qanday tartibga solish, uslublarni tushunish

Crawler (qidiruv tizimi)

Har bir inson qidiruv tizimidan foydalangan, shuning uchun nima uchun o'zingizni yaratmaysiz? Ma'lumot qidirish uchun skanerlar kerak. Har bir inson ularni har kuni ishlatadi va bu texnologiya va mutaxassislarga bo'lgan talab vaqt o'tishi bilan o'sib boradi.

Google qidiruvi

O'z qidiruv tizimini yaratish orqali nimani o'rganasiz:

• Brauzerlar qanday ishlaydi
• Saytlarni qanday indekslash va ularni reyting va obro'ga ko'ra tartiblash
• Indekslangan saytlarni ma'lumotlar bazasida qanday saqlash va ma'lumotlar bazasi bilan ishlash

Musiqa pleyeri (Spotify, Apple Music)

Har bir inson musiqa tinglaydi - bu bizning hayotimizning ajralmas qismidir. Zamonaviy musiqiy oqim platformasining asosiy mexanikasi qanday ishlashini yaxshiroq tushunish uchun musiqa pleyerini yarataylik.

Spotify

O'zingizning musiqiy oqim platformangizni yaratish orqali nimani o'rganasiz:

• API bilan qanday ishlash kerak. Spotify yoki Apple Music-dan API-dan foydalaning
• Keyingi/oldingi trekni qanday o'ynash, to'xtatib turish yoki orqaga qaytarish
• Ovoz balandligini qanday o'zgartirish mumkin
• Foydalanuvchi marshrutini va brauzer tarixini qanday boshqarish kerak

React yordamida film qidirish ilovasi (ilgaklar bilan)

Siz boshlashingiz mumkin bo'lgan birinchi narsa - React yordamida film qidirish ilovasini yaratish. Quyida yakuniy ilova qanday ko'rinishi tasvirlangan:

Siz nimani o'rganasiz
Ushbu ilovani yaratish orqali siz nisbatan yangi Hooks API yordamida React ko‘nikmalaringizni yaxshilaysiz. Misol loyihasida React komponentlari, ko'plab ilgaklar, tashqi API va, albatta, ba'zi CSS uslublari qo'llaniladi.

Texnik stack va xususiyatlar

• Kancalar bilan reaksiyaga kirishing
• yaratish-reaksiya-ilova
• JSX
• CSS

Hech qanday darslardan foydalanmasdan, ushbu loyihalar sizga funktsional Reactga mukammal kirish nuqtasini beradi va 2020 yilda sizga albatta yordam beradi. topishingiz mumkin misol loyiha bu erda. Ko'rsatmalarga rioya qiling yoki uni o'zingiz qiling.

Vue bilan suhbat ilovasi

Siz uchun yana bir ajoyib loyiha - bu mening sevimli JavaScript kutubxonam: VueJS yordamida chat ilovasini yaratish. Ilova quyidagicha ko'rinadi:

Siz nimani o'rganasiz
Ushbu qo'llanmada siz Vue ilovasini noldan qanday yaratishni o'rganasiz - komponentlarni yaratish, holatni boshqarish, marshrutlarni yaratish, uchinchi tomon xizmatlariga ulanish va hatto autentifikatsiyani boshqarish.

Texnik stack va xususiyatlar

• Vue
• vuex
• Vue Router
• CLI ko'rinishi
• Pusher
• CSS

Bu Vue bilan boshlash yoki 2020 yilda rivojlanishga kirishish uchun mavjud ko'nikmalaringizni yaxshilash uchun haqiqatan ham ajoyib loyiha. topishingiz mumkin darslik bu yerda.

Angular 8 bilan chiroyli ob-havo ilovasi

Ushbu misol Angular 8 yordamida chiroyli ob-havo ilovasini yaratishga yordam beradi:

Siz nimani o'rganasiz
Ushbu loyiha sizga noldan ilovalar yaratish bo'yicha qimmatli ko'nikmalarni o'rgatadi - dizayndan ishlab chiqishgacha, ishga tushirishga tayyor dasturgacha.

Texnik stack va xususiyatlar

• Burchak 8
• Firebase
• Server tomoni renderlash
• Grid va Flexbox bilan CSS
• Mobil qulaylik va moslashuvchanlik
• Qorong'i rejim
• Chiroyli interfeys

Bu hamma narsani qamrab oluvchi loyihaning menga yoqadigan jihati shundaki, siz narsalarni alohida o‘rganmaysiz. Buning o'rniga siz dizayndan tortib to yakuniy joylashtirishgacha bo'lgan butun rivojlanish jarayonini o'rganasiz.

Svelte yordamida bajariladigan dastur

Svelte komponentga asoslangan yondashuvdagi yangi bolaga o'xshaydi - hech bo'lmaganda React, Vue va Angular-ga o'xshaydi. Va bu 2020 yil uchun eng issiq yangi mahsulotlardan biri.

Vazifalar ilovalari har doim ham eng dolzarb mavzu emas, lekin bu sizning Svelte ko'nikmalaringizni rivojlantirishga yordam beradi. Bu shunday ko'rinadi:

Siz nimani o'rganasiz
Ushbu qo'llanma sizga boshidan oxirigacha Svelte 3 yordamida qanday qilib dastur yaratishni ko'rsatib beradi. Siz komponentlar, uslublar va hodisalarni qayta ishlash vositalaridan foydalanasiz

Texnik stack va xususiyatlar

• Svelte 3
• komponentlar
• CSS bilan uslublash
• ES 6 sintaksisi

Svelte boshlang'ich loyihalari ko'p emas, shuning uchun men topdim bu boshlash uchun yaxshi variant.

Next.js yordamida elektron tijorat ilovasi

Next.js - server tomonida renderlashni qo'llab-quvvatlaydigan React ilovalarini yaratish uchun eng mashhur ramka.

Ushbu loyiha sizga qanday qilib elektron tijorat ilovasini yaratishni ko'rsatib beradi:

Siz nimani o'rganasiz
Ushbu loyihada siz Next.js yordamida qanday ishlab chiqishni oʻrganasiz — yangi sahifalar va komponentlar yaratish, maʼlumotlarni ajratib olish, uslub va Keyingi ilovani joylashtirish.

Texnik stack va xususiyatlar

• Keyingi.js
• Komponentlar va sahifalar
• Ma'lumotlardan namuna olish
• Stilizatsiya
• Loyihani joylashtirish
• SSR va SPA

Yangi narsalarni o'rganish uchun elektron tijorat ilovasi kabi haqiqiy misolga ega bo'lish har doim ajoyib. Siz .. qila olasiz; siz ... mumkin o'quv qo'llanmasini bu erda toping.

Nuxt.js bilan to'liq huquqli ko'p tilli blog

Nuxt.js Vue uchun, Next.js esa React uchun: server tomonidagi renderlash va bitta sahifali ilovalarning kuchini birlashtirish uchun ajoyib ramka.
Siz yaratishingiz mumkin bo'lgan oxirgi dastur quyidagicha ko'rinadi:

Siz nimani o'rganasiz

Ushbu namunaviy loyihada siz Nuxt.js yordamida toʻliq veb-saytni qanday yaratishni oʻrganasiz, uni dastlabki sozlashdan tortib yakuniy joylashtirishgacha.

U Nuxt taqdim etayotgan sahifalar va komponentlar va SCSS bilan uslublash kabi ko'plab ajoyib xususiyatlardan foydalanadi.

Texnik stack va xususiyatlar

• Nuxt.js
• Komponentlar va sahifalar
• Storyblock moduli
• Hagfish
• Vuex davlat boshqaruvi uchun
• Styling uchun SCSS
• Nuxt o'rta dasturlari

Bu haqiqatan ham ajoyib loyiha, bu juda ko'p ajoyib Nuxt.js xususiyatlarini o'z ichiga oladi. Shaxsan men Nuxt bilan ishlashni yaxshi ko'raman, shuning uchun uni sinab ko'rishingiz kerak, chunki bu sizni ajoyib Vue dasturchisiga aylantiradi.

Gatsby bilan blog

Gatsby React va GraphQL-dan foydalanadigan ajoyib statik sayt generatoridir. Bu loyihaning natijasi:

Siz nimani o'rganasiz

Ushbu qo'llanmada siz React va GraphQL-dan foydalanib o'z maqolalaringizni yozish uchun foydalanadigan blog yaratish uchun Gatsby-dan qanday foydalanishni o'rganasiz.

Texnik stack va xususiyatlar

• Gatsbi
• munosabat
• GraphQL
• Plaginlar va mavzular
• MDX/Markdown
• Bootstrap CSS
• Shablonlar

Agar siz blog ochmoqchi bo'lsangiz, bu ajoyib misol React va GraphQL yordamida buni qanday qilish haqida.

Men WordPressni yomon tanlov demayman, lekin Gatsby bilan siz React yordamida yuqori unumdor veb-saytlar yaratishingiz mumkin - bu ajoyib kombinatsiya.

Gridsome bilan blog

Vue uchun Gridsome ... Mayli, bizda Next/Nuxt bilan allaqachon mavjud edi.
Ammo Gridsome va Gatsby uchun ham xuddi shunday. Ikkalasi ham ma'lumotlar qatlami sifatida GraphQL-dan foydalanadi, ammo Gridsome VueJS-dan foydalanadi. Bu, shuningdek, ajoyib bloglar yaratishga yordam beradigan ajoyib statik sayt generatoridir:

Siz nimani o'rganasiz

Ushbu loyiha sizga Gridsome, GraphQL va Markdown bilan ishlashni boshlash uchun oddiy blog yaratishni o'rgatadi. Shuningdek, u Netlify orqali dasturni qanday joylashtirishni o'z ichiga oladi.

Texnik stack va xususiyatlar

• G'alati
• Vue
• GraphQL
• Markdown
• Netify

Bu, albatta, eng keng qamrovli o'quv qo'llanma emas, lekin u Gridsome va asosiy tushunchalarni qamrab oladi. Markdown yaxshi boshlanish nuqtasi bo'lishi mumkin.

Quasar yordamida SoundCloud-ga o'xshash audio pleer

Quasar mobil ilovalar yaratish uchun ishlatilishi mumkin bo'lgan yana bir Vue ramkasidir. Ushbu loyihada siz audio pleer dasturini yaratasiz, masalan:

Siz nimani o'rganasiz

Boshqa loyihalar asosan veb-ilovalarga qaratilgan bo'lsa-da, bu sizga Vue va Quasar ramkalaridan foydalangan holda mobil ilovani qanday yaratishni ko'rsatib beradi.
Sizda allaqachon Android Studio/Xcode bilan ishlaydigan Cordova bo'lishi kerak. Agar yo'q bo'lsa, qo'llanmada Quasar veb-saytiga havola mavjud bo'lib, ular sizga hamma narsani qanday sozlashni ko'rsatadi.

Texnik stack va xususiyatlar

• Kvasar
• Vue
• Cordova
• WaveSurfer
• UI komponentlari

Kichik loyiha, mobil ilovalar yaratish uchun Quasar imkoniyatlarini namoyish qilish.

Форма кредитной карты

Yumshoq va yoqimli mikro shovqinlarga ega ajoyib kredit karta shakli. Raqamni formatlash, tekshirish va karta turini avtomatik aniqlashni o'z ichiga oladi. U Vue.js-da qurilgan va to'liq javob beradi. (Ko'rishingiz mumkin shu yerda.)

kredit karta shakli

Siz nimani o'rganasiz:

• Shakllarni qayta ishlash va tasdiqlash
• Hodisalarni boshqarish (masalan, maydonlar o'zgarganda)
• Sahifada elementlarni, ayniqsa, shaklning tepasida ko'rsatilgan kredit karta ma'lumotlarini qanday ko'rsatish va joylashtirishni tushuning

shtrixli grafik

Gistogramma - bu ular ko'rsatadigan qiymatlarga mutanosib balandlik yoki uzunlikdagi to'rtburchaklar chiziqli kategorik ma'lumotlarni aks ettiruvchi diagramma yoki grafik.

Ular vertikal yoki gorizontal ravishda qo'llanilishi mumkin. Vertikal chiziqli diagramma ba'zan chiziqli diagramma deb ataladi.

Siz nimani o'rganasiz:

• Ma'lumotlarni tuzilgan va tushunarli tarzda ko'rsatish
• Qo'shimcha: Elementdan qanday foydalanishni o'rganing canvas va u bilan elementlarni qanday chizish mumkin

u dunyo aholisi haqidagi ma'lumotlarni topishingiz mumkin. Ular yil bo'yicha saralanadi.

Анимация сердечка Twitter

2016 yilda Twitter o'zining tvitlari uchun ushbu ajoyib animatsiyani taqdim etdi. 2019 yil holatiga ko'ra, u hali ham qisman ko'rinadi, nega o'zingiz yaratmaysiz?

Siz nimani o'rganasiz:

• CSS atributi bilan ishlash keyframes
• HTML elementlarini manipulyatsiya qilish va jonlantirish
• JavaScript, HTML va CSS-ni birlashtiring

Репозитории GitHub с функцией поиска

Bu erda hech qanday ajoyib narsa yo'q - GitHub repolari shunchaki ulug'langan ro'yxat.
Maqsad, omborlarni ko'rsatish va foydalanuvchiga ularni filtrlash imkonini berishdir. Foydalanish rasmiy GitHub API Har bir foydalanuvchi uchun omborlarni olish.

GitHub profil sahifasi - github.com/indreklasn

Siz nimani o'rganasiz:

• API dan ma'lumotlarni oling
• API ma'lumotlarini ko'rsatish
• Har bir qidiruv uchun tegishli maʼlumotlarni filtrlang va koʻrsating
• Majburiy emas: Agar siz qiyinchilikka tayyor bo'lsangiz, foydalaning API v4, GraphQL yordamida qurilgan. Agar siz GraphQL-ni o'rganmoqchi bo'lsangiz, avvalgi maqolalarimdan biriga o'ting.

Чаты в стиле Reddit

Suhbatlar soddaligi va foydalanish qulayligi tufayli mashhur muloqot usulidir. Ammo zamonaviy chat xonalarini nima ta'minlaydi? WebSockets!

Siz nimani o'rganasiz:

• WebSockets, real vaqtda aloqa va ma'lumotlar yangilanishlaridan foydalaning
• Foydalanuvchilarning kirish darajalari bilan ishlash (masalan, chat kanali egasi rolga ega admin, va xonadagi boshqalar - user)
• Shakllarni qayta ishlash va tasdiqlash - unutmang, xabar yuborish uchun chat oynasi input
• Turli chatlarni yarating va ularga qo'shiling
• Shaxsiy xabarlar bilan ishlash. Foydalanuvchilar boshqa foydalanuvchilar bilan shaxsiy suhbatlashishlari mumkin. Asosan, siz ikki foydalanuvchi o'rtasida WebSocket ulanishini o'rnatasiz.

Навигация в стиле Stripe

Ushbu navigatsiyani noyob qiladigan narsa shundaki, popover konteyneri tarkibga mos ravishda o'zgaradi. Yangi popoverni ochish va yopishning an'anaviy xatti-harakatlariga nisbatan bu o'tishning nafisligi bor.

Siz nimani o'rganasiz:

• CSS animatsiyalarini o'tishlar bilan birlashtiring
• Tarkibni xiralashtiring va suzuvchi elementga faol sinfni qo'llang

Pacman

O'zingizning Pacman versiyasini yarating. Bu o'yinlar qanday ishlab chiqilganligi va asoslarini tushunishning ajoyib usuli. JavaScript ramkasidan foydalaning, React yoki Vue.

Buni bilib olasiz:

• Elementlar qanday harakatlanadi
• Qaysi tugmachalarni bosish kerakligini qanday aniqlash mumkin
• To'qnashuv momentini qanday aniqlash mumkin
• Siz oldinga borib, sharpa harakati boshqaruvlarini qo'shishingiz mumkin

Siz ushbu loyihaning namunasini topasiz omborida GitHub

foydalanuvchi boshqaruvi

Loyiha omborida GitHub

Foydalanuvchi ma'muriyati uchun CRUD tipidagi ilovani yaratish sizga rivojlanish asoslarini o'rgatadi. Bu, ayniqsa, yangi ishlab chiquvchilar uchun foydalidir.

Buni bilib olasiz:

• Marshrutlash nima
• Ma'lumotlarni kiritish shakllari bilan qanday ishlash va foydalanuvchi kiritgan narsalarni tekshirish
• Ma'lumotlar bazasi bilan ishlash - amallarni yaratish, o'qish, yangilash va o'chirish

Проверка погоды в вашем местоположении

Loyiha omborida GitHub

Ilovalar yaratmoqchi bo'lsangiz, ob-havo ilovasidan boshlang. Ushbu loyihani Swift yordamida bajarish mumkin.

Ilova yaratish tajribasiga ega bo'lishdan tashqari, siz quyidagilarni o'rganasiz:

• API bilan qanday ishlash kerak
• Geolokatsiyadan qanday foydalanish kerak
• Matn kiritish orqali ilovangizni yanada dinamikroq qiling. Unda foydalanuvchilar ma'lum bir joydagi ob-havoni tekshirish uchun o'z manzillarini kiritishlari mumkin bo'ladi.

Sizga API kerak bo'ladi. Ob-havo ma'lumotlarini olish uchun OpenWeather API-dan foydalaning. OpenWeather API haqida batafsil ma'lumot shu yerda.

Окно чата

Mening suhbat oynam ishlayapti, ikkita brauzer yorlig'ida oching

Suhbat oynasini yaratish - rozetkalardan foydalanishni boshlashning eng zo'r usuli. Texnik to'plamni tanlash juda katta. Masalan, Node.js mukammaldir.

Siz rozetkalar qanday ishlashini va ularni qanday amalga oshirishni bilib olasiz. Bu loyihaning asosiy afzalligi.

Agar siz rozetkalar bilan ishlashni xohlaydigan Laravel dasturchisi bo'lsangiz, mening maqolamni o'qing maqola

GitLab CI

manba

Agar siz uzluksiz integratsiya (CI) uchun yangi bo'lsangiz, GitLab CI bilan o'ynang. Bir nechta muhitni o'rnating va bir nechta testlarni o'tkazib ko'ring. Bu juda qiyin loyiha emas, lekin undan ko'p narsani o'rganishingizga aminman. Ko'pgina ishlab chiqish guruhlari hozirda CI dan foydalanmoqda. Uni qanday ishlatishni bilish foydalidir.

Buni bilib olasiz:

• GitLab CI nima
• Qanday sozlash kerak .gitlab-ci.ymlbu GitLab foydalanuvchisiga nima qilish kerakligini aytadi
• Boshqa muhitlarga qanday joylashtirish kerak

Анализатор сайтов

Veb-saytlarning semantikasini tahlil qiladigan va ularning reytingini yaratadigan qirg'ichni yarating. Misol uchun, siz tasvirlarda etishmayotgan alt teglarni tekshirishingiz mumkin. Yoki sahifada SEO meta teglari mavjudligini tekshiring. Scraper foydalanuvchi interfeysisiz yaratilishi mumkin.

Buni bilib olasiz:

• Skreper qanday ishlaydi?
• DOM selektorlarini qanday yaratish kerak
• Algoritmni qanday yozish kerak
• Agar u erda to'xtashni xohlamasangiz, foydalanuvchi interfeysini yarating. Siz tekshirgan har bir veb-saytda hisobot yaratishingiz mumkin.

Определение настроений в социальных сетях

manba

Ijtimoiy tarmoqlarda his-tuyg'ularni aniqlash - bu mashinani o'rganish bilan tanishishning ajoyib usuli.

Siz faqat bitta ijtimoiy tarmoqni tahlil qilishdan boshlashingiz mumkin. Har bir inson odatda Twitter bilan boshlanadi.

Mashinani o'rganish bo'yicha tajribangiz bo'lsa, turli ijtimoiy tarmoqlardan ma'lumotlarni yig'ib, ularni birlashtirib ko'ring.

Buni bilib olasiz:

• Mashinani o'rganish nima

Клон Trello

Indrek Lasn'dan Trello kloni.

Siz nimani o'rganasiz:

• So'rovlarni qayta ishlash marshrutlarini tashkil etish (Marshrutlash).
• Suring va torting.
• Yangi ob'ektlarni yaratish (taxtalar, ro'yxatlar, kartalar).
• Kiritilgan ma'lumotlarni qayta ishlash va tekshirish.
• Mijoz tomonidan: mahalliy xotiradan qanday foydalanish, ma'lumotlarni mahalliy xotiraga qanday saqlash, mahalliy xotiradan ma'lumotlarni o'qish.
• Server tomondan: ma'lumotlar bazalaridan qanday foydalanish, ma'lumotlar bazasida ma'lumotlarni saqlash, ma'lumotlar bazasidan ma'lumotlarni o'qish.

Mana, omborga misol, React+Redux-da yaratilgan.

Панель админа

Github ombori.

Oddiy CRUD ilovasi, asoslarni o'rganish uchun ideal. Keling, o'rganamiz:

• Foydalanuvchilarni yarating, foydalanuvchilarni boshqaring.
• Ma'lumotlar bazasi bilan o'zaro aloqa qilish - foydalanuvchilarni yaratish, o'qish, tahrirlash, o'chirish.
• Kiritilgan ma'lumotlarni tekshirish va shakllar bilan ishlash.

Трекер криптовалют (нативное мобильное приложение)

Github ombori.

Hamma narsa: Swift, Objective-C, React Native, Java, Kotlin.

Keling, o'rganamiz:

• Mahalliy ilovalar qanday ishlaydi.
• API dan ma'lumotlarni qanday olish mumkin.
• Mahalliy sahifa tartiblari qanday ishlaydi.
• Mobil simulyatorlar bilan qanday ishlash kerak.

Ushbu APIni sinab ko'ring. Agar siz yaxshiroq narsani topsangiz, sharhlarda yozing.

Agar sizni qiziqtirsa, bu erda bu yerda darslik.

Настроить собственный конфиг webpack с нуля

Texnik jihatdan, bu dastur emas, lekin bu veb-paketning ichkaridan qanday ishlashini tushunish uchun juda foydali vazifadir. Endi bu "qora quti" emas, balki tushunarli vosita bo'ladi.

Talablar:

• es7 dan es5 ga kompilyatsiya qiling (asosiy).
• jsx ni js - yoki - .vue dan .js ga kompilyatsiya qiling (siz yuklovchilarni o'rganishingiz kerak)
• Veb-paket dev serverini va issiq modulni qayta yuklashni sozlang. (vue-cli va create-react-app ikkalasidan ham foydalanadi)
• Heroku, now.sh yoki Github-dan foydalaning, veb-paket loyihalarini qanday joylashtirishni o'rganing.
• CSS kompilyatsiya qilish uchun sevimli preprotsessoringizni sozlang - scss, less, stylus.
• Veb-paket bilan tasvirlar va svglardan qanday foydalanishni o'rganing.

Bu yangi boshlanuvchilar uchun ajoyib manba.

Клон Hackernews

Har bir Jedi o'zining Hackernewsni yaratishi kerak.

Yo'lda nimani o'rganasiz:

• Hackernews API bilan qanday ishlash kerak.
• Bir sahifali ilovani qanday yaratish kerak.
• Sharhlarni ko'rish, individual sharhlar, profillar kabi xususiyatlarni qanday amalga oshirish kerak.
• So'rovlarni qayta ishlash marshrutlarini tashkil etish (Marshrutlash).

Тудушечка

TodoMVC.

Jiddiymi? Tudushka? Ularning minglablari bor. Ammo ishoning, bu mashhurlikning sababi bor.
Tudu ilovasi asoslarni tushunganingizga ishonch hosil qilishning ajoyib usuli. Vanilla Javascript-da bitta dastur va sevimli ramkangizda bitta dastur yozishga harakat qiling.

O'rganing:

• Yangi vazifalar yarating.
• Maydonlar to'ldirilganligini tekshiring.
• Vazifalarni filtrlash (bajarildi, faol, barchasi). Foydalanish filter и reduce.
• Javascript asoslarini tushuning.

Сортируемый drag and drop список

Github ombori.

Tushunish uchun juda foydali api-ni sudrab olib tashlang.

Keling, o'rganamiz:

• APIni sudrab olib tashlang
• Boy UI yarating

Клон мессенджера (нативное приложение)

Siz veb-ilovalar va mahalliy ilovalar qanday ishlashini tushunasiz, bu sizni kulrang massadan ajratib turadi.

Biz nimani o'rganamiz:

• Veb-rozetkalar (tezkor xabarlar)
• Mahalliy ilovalar qanday ishlaydi.
• Shablonlar mahalliy ilovalarda qanday ishlaydi.
• Mahalliy ilovalarda so'rovlarni qayta ishlash marshrutlarini tashkil qilish.

Matn muharriri

Matn muharririning maqsadi foydalanuvchilarning o'z formatlarini to'g'ri HTML belgilariga aylantirishga harakatlarini kamaytirishdir. Yaxshi matn muharriri foydalanuvchilarga matnni turli yo'llar bilan formatlash imkonini beradi.

Bir nuqtada hamma matn muharriridan foydalangan. Xo'sh, nima uchun emas uni o'zingiz yarating?

Клон Reddit

Digg ijtimoiy yangiliklarni yig'ish, veb-kontent reytingi va muhokama sayti.

Reddit ko'p vaqtimni oladi, lekin men u bilan shug'ullanishda davom etaman. Reddit klonini yaratish dasturlashni o'rganishning samarali usulidir (bir vaqtning o'zida Redditni ko'rib chiqishda).

Reddit sizga juda boy narsalarni taqdim etadi API. Hech qanday xususiyatni qoldirmang yoki tasodifiy ishlarni qilmang. Mijozlar va mijozlar bilan haqiqiy dunyoda siz tasodifiy ishlay olmaysiz, aks holda siz tezda ishingizni yo'qotasiz.

Aqlli mijozlar ishning yomon bajarilayotganini darhol anglaydilar va boshqasini topadilar.

Reddit API

Публикация пакета NPM с открытым исходным кодом

Agar siz Javascript kodini yozsangiz, paket menejeridan foydalanasiz. Paket menejeri boshqa odamlar yozgan va nashr etgan mavjud kodni qayta ishlatishga imkon beradi.

Paketning to'liq rivojlanish tsiklini tushunish juda yaxshi tajriba beradi. Kodni nashr qilishda bilishingiz kerak bo'lgan ko'p narsalar mavjud. Xavfsizlik, semantik versiya, miqyoslash, nomlash konventsiyalari va texnik xizmat ko'rsatish haqida o'ylashingiz kerak.

Paket har qanday bo'lishi mumkin. Agar g'oyangiz bo'lmasa, o'zingizning Lodashingizni yarating va uni nashr eting.

Lodash: lodash.com

Internetda qilgan biror narsangiz sizni boshqalardan 10% ustun qo'yadi. Mana bir nechta foydali manbalar ochiq manbalar va paketlar haqida.

Учебный план freeCodeCamp

FCC o'quv dasturi

freeCodecamp juda ko'p narsalarni to'pladi keng qamrovli dasturlash kursi.

freeCodeCamp notijorat tashkilotdir. U interaktiv veb-ta'lim platformasi, onlayn hamjamiyat forumi, chat xonalari, O'rta nashrlar va o'rganish veb-ishlab chiqishni hamma uchun ochiq qilishni maqsad qilgan mahalliy tashkilotlardan iborat.

Agar siz butun kursni tugatsangiz, birinchi ishingizga ko'proq malakali bo'lasiz.

Создайте HTTP-сервер с нуля

HTTP protokoli kontent Internetda harakatlanadigan asosiy protokollardan biridir. HTTP serverlari HTML, CSS va JS kabi statik tarkibga xizmat ko'rsatish uchun ishlatiladi.

HTTP protokolini noldan amalga oshirish qobiliyati narsalarning o'zaro ta'siri haqidagi bilimingizni kengaytiradi.

Misol uchun, agar siz NodeJs dan foydalansangiz, Express HTTP serverini taqdim etishini bilasiz.

Malumot uchun, mumkinmi, qarang:

• Hech qanday kutubxonadan foydalanmasdan serverni sozlang
• Server HTML, CSS va JS kontentiga xizmat qilishi kerak.
• Routerni noldan amalga oshirish
• O'zgarishlarni kuzatib boring va serverni yangilang

Sababini bilmasangiz, foydalaning Boring va HTTP serverini yaratishga harakat qiling Caddy noldan.

Десктопное приложение для заметок

Biz hammamiz eslatma olamiz, shunday emasmi?

Keling, eslatmalar ilovasini yarataylik. Ilova eslatmalarni saqlashi va ularni ma'lumotlar bazasi bilan sinxronlashtirishi kerak. Electron, Swift yoki o'zingizga yoqqan va tizimingizga mos keladigan narsadan foydalanib mahalliy ilovani yarating.

Buni birinchi qiyinchilik (matn muharriri) bilan birlashtiring.

Bonus sifatida ish stoli versiyasini veb-versiya bilan sinxronlashtirishga harakat qiling.

Подкасты (клон Overcast)

Kim podkastlarni tinglamaydi?

Quyidagi funksiyalarga ega veb-ilova yarating:

• Hisob ochish
• Podkastlarni qidirish
• Podkastlarga baho bering va obuna bo'ling
• To'xtating va o'ynang, tezlikni o'zgartiring, oldinga va orqaga 30 soniya.

Boshlanish nuqtasi sifatida iTunes API-dan foydalanib ko'ring. Agar siz boshqa manbalarni bilsangiz, izohlarda qoldiring.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Ekran tasviri

Salom! Men hozir ekranimni suratga olyapman!

Ekraningizni suratga olish va klipni shunday saqlash imkonini beruvchi ish stoli yoki veb-ilovani yarating .gif

shu yerda ba'zi maslahatlarbunga qanday erishish mumkin.

Axborot manbalari

• Ishlab chiquvchi uchun yana 5 ta jasoratli o'quv loyihalari (Layer, Squoosh, Kalkulyator, Veb-sayt skaneri, Musiqa pleyeri)
• Front-End mahoratingizni oshirish uchun 9 ta loyiha
• Front-End dasturchisi uchun oltita vazifa
• Dasturchi uchun qiziqarli amaliyot
• 8 ta ta'lim loyihalari
• Amaliyot uchun loyihalarning yana bir ro'yxati

Manba: www.habr.com