1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Artikel ieu ditarjamahkeun kalayan dukungan EDISON Software, anu jeung .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- bonus: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Catetan: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Catetan: di dieu .
Подборка проектов из предыдущих публикаций.
lapisan
Lapisan mangrupikeun komunitas dimana sadayana tiasa ngagambar piksel dina "papan" anu dibagikeun. Gagasan aslina dilahirkeun dina Reddit. komunitas r / Lapisan mangrupakeun métafora pikeun kreativitas dibagikeun, yén dulur bisa jadi panyipta sarta nyumbang kana ngabalukarkeun umum.
Naon anu anjeun bakal diajar nalika nyiptakeun proyék Layer anjeun nyalira:
- Kumaha JavaScript karya kanvas Nyaho kumaha carana beroperasi kanvas mangrupa skill kritis dina loba aplikasi.
- Kumaha koordinat idin pamaké. Unggal pangguna tiasa ngagambar hiji piksel unggal 15 menit tanpa kedah log in.
- Jieun sesi cookie.
Squoosh
Squoosh mangrupikeun aplikasi komprési gambar sareng seueur pilihan canggih.
GIF 20 MB
Ku nyieun versi sorangan tina Squoosh anjeun bakal diajar:
- Kumaha damel sareng ukuran gambar
- Diajar dasar tina Drag'n'Drop API
- Ngartos kumaha API sareng pamirsa acara tiasa dianggo
- Kumaha unggah sareng ékspor file
Catetan: Kompresor gambar lokal. Teu perlu ngirim data tambahan ka server. Anjeun tiasa gaduh compressor di imah, atawa anjeun bisa make eta dina server a, pilihan Anjeun.
Kalkulator
Kadieu? Serius? Kalkulator? Leres, persis, kalkulator. Ngartos dasar-dasar operasi matématika sareng kumaha aranjeunna damel babarengan mangrupikeun kaahlian kritis pikeun nyederhanakeun aplikasi anjeun. Sooner atanapi engké anjeun bakal kudu nungkulan angka jeung sooner hadé.
Ku nyieun kalkulator sorangan anjeun bakal diajar:
- Gawé sareng nomer sareng operasi matematika
- Prakték sareng acara listeners API
- Kumaha ngatur elemen, ngartos gaya
Crawler (mesin pencari)
Sarerea geus dipaké search engine, jadi naha henteu nyieun sorangan? Crawler diperlukeun pikeun neangan informasi. Sarerea nganggo aranjeunna unggal dinten sareng paménta pikeun téknologi sareng spesialis ieu ngan ukur bakal ningkat kana waktosna.
mesin pencari Google
Naon anu anjeun bakal diajar ku nyiptakeun mesin pencari anjeun nyalira:
- Kumaha crawlers jalan
- Kumaha indéks situs sareng kumaha pangkatna ku rating sareng reputasi
- Kumaha nyimpen situs anu diindeks dina pangkalan data sareng cara damel sareng pangkalan data
Pamuter musik (Spotify, Apple Music)
Sadayana ngadangukeun musik - éta mangrupikeun bagian integral tina kahirupan urang. Hayu urang nyiptakeun pamuter musik pikeun langkung ngartos kumaha mékanika dasar platform streaming musik modern.
Spotify
Naon anu anjeun bakal diajar ku nyiptakeun platform streaming musik anjeun nyalira:
- Kumaha dianggo sareng API. nganggo API ti Spotify atanapi Apple Music
- Kumaha carana maén, reureuhan atawa mundurkeun lagu salajengna / saméméhna
- Kumaha carana ngarobah volume
- Kumaha carana ngatur routing pamaké sarta sajarah browser
Aplikasi milarian pilem nganggo React (kalayan kait)
Hal kahiji anu anjeun tiasa ngamimitian nyaéta nyiptakeun aplikasi milarian pilem nganggo React. Di handap ieu hiji gambar kumaha aplikasi ahir bakal kasampak kawas:
Naon anu anjeun bakal pelajari
Ku ngawangun aplikasi ieu, anjeun bakal ningkatkeun kaahlian React anjeun ku ngagunakeun API Hooks anu kawilang anyar. Proyék conto ngagunakeun komponén React, seueur kait, API éksternal, sareng tangtosna sababaraha gaya CSS.
tumpukan Tech sarta fitur
- Ngaréaksikeun jeung hook
- Nyiptakeun-meta-aplikasi
- JSX
- CSS
Tanpa nganggo kelas naon waé, proyék ieu masihan anjeun titik éntri anu sampurna kana Réaksi fungsional sareng pasti bakal ngabantosan anjeun dina 2020. anjeun tiasa mendakan . Turutan parentah atawa nyieun sorangan.
Ngobrol App kalawan Vue
Proyék hébat anu sanés pikeun anjeun lakukeun nyaéta nyiptakeun aplikasi obrolan nganggo perpustakaan JavaScript karesep kuring: VueJS. Aplikasi bakal katingali sapertos kieu:
Naon anu anjeun bakal pelajari
Dina tutorial ieu, anjeun bakal diajar kumaha nyieun aplikasi Vue ti mimiti - nyieun komponén, nanganan kaayaan, nyieun ruteu, nyambungkeun ka layanan pihak katilu, komo nanganan auténtikasi.
tumpukan Tech sarta fitur
- Vue
- vuex
- Router Vue
- Vue CLI
- Pusher
- CSS
Ieu mangrupikeun proyék anu saé pikeun ngamimitian sareng Vue atanapi ningkatkeun kaahlian anjeun anu tos aya pikeun ngembangkeun dina 2020. anjeun tiasa mendakan .
Aplikasi cuaca anu saé sareng Angular 8
Conto ieu bakal ngabantosan anjeun nyiptakeun aplikasi cuaca anu saé nganggo Angular 8:
Naon anu anjeun bakal pelajari
Proyék ieu bakal ngajarkeun anjeun kaahlian anu berharga dina ngawangun aplikasi ti mimiti - tina desain dugi ka pamekaran, dugi ka aplikasi anu siap-deployment.
tumpukan Tech sarta fitur
- Sudut 8
- Firebase
- Rendering sisi server
- CSS jeung Grid na Flexbox
- Mobile friendly jeung adaptability
- Modeu poék
- panganteur geulis
Anu kuring resep pisan ngeunaan proyék anu nyertakeun ieu nyaéta yén anjeun henteu diajar hal-hal anu diasingkeun. Gantina, anjeun diajar sakabéh prosés ngembangkeun, ti desain nepi ka deployment final.
Aplikasi To-Do ngagunakeun Svelte
Svelte sapertos budak énggal dina pendekatan dumasar-komponén - sahenteuna sami sareng React, Vue sareng Angular. Sareng ieu mangrupikeun salah sahiji produk énggal anu paling panas pikeun 2020.
Aplikasi To-Do henteu kedah janten topik anu paling panas, tapi éta bakal ngabantosan anjeun ngasah kaahlian Svelte anjeun. Ieu bakal kasampak kawas kieu:
Naon anu anjeun bakal pelajari
Tutorial ieu bakal nunjukkeun anjeun kumaha cara ngadamel aplikasi nganggo Svelte 3, ti mimiti dugi ka rengse. Anjeun bakal nganggo komponén, gaya, sareng pawang acara
tumpukan Tech sarta fitur
- Leutik 3
- komponén
- Styling kalawan CSS
- ES 6 sintaksis
Aya teu loba proyék starter Svelte alus, jadi kuring kapanggih .
Aplikasi e-commerce nganggo Next.js
Next.js mangrupikeun kerangka anu paling populér pikeun ngawangun aplikasi React anu ngadukung rendering sisi server tina kotak.
Proyék ieu bakal nunjukkeun anjeun kumaha cara nyiptakeun aplikasi e-commerce anu siga kieu:
Naon anu anjeun bakal pelajari
Dina proyék ieu, anjeun bakal diajar kumaha carana ngamekarkeun jeung Next.js-nyieun kaca anyar jeung komponén, nimba data, jeung gaya sarta nyebarkeun hiji aplikasi Next.
tumpukan Tech sarta fitur
- Teras.js
- Komponén jeung Kaca
- Sampling data
- Stilisasi
- Panyebaran Proyék
- SSR jeung SPA
Éta saé pisan gaduh conto dunya nyata sapertos aplikasi e-commerce pikeun diajar anu énggal. Anjeun tiasa .
Blog multibasa pinuh ku Nuxt.js
Nuxt.js kanggo Vue, naon Next.js kanggo React: kerangka anu saé pikeun ngagabungkeun kakuatan rendering sisi server sareng aplikasi halaman tunggal
Aplikasi ahir anu anjeun tiasa jieun bakal katingali sapertos kieu:
Naon anu anjeun bakal pelajari
Dina conto proyék ieu, anjeun bakal diajar kumaha cara nyieun situs wéb anu lengkep nganggo Nuxt.js, tina setélan awal dugi ka panyebaran ahir.
Butuh kauntungan tina seueur fitur anu saé anu ditawarkeun Nuxt, sapertos halaman sareng komponén, sareng gaya sareng SCSS.
tumpukan Tech sarta fitur
- Nuxt.js
- Komponén jeung Kaca
- modul Storyblock
- Hagfish
- Vuex pikeun manajemén kaayaan
- SCSS pikeun styling
- Nuxt middlewares
, nu ngawengku loba fitur Nuxt.js hébat. Abdi pribadi resep damel sareng Nuxt janten anjeun kedah nyobian sabab éta ogé bakal ngajantenkeun anjeun pamekar Vue anu saé.
Blog kalawan Gatsby
Gatsby mangrupikeun generator situs statik anu saé ngagunakeun React sareng GraphQL. Ieu hasil tina proyék:
Naon anu anjeun bakal pelajari
Dina tutorial ieu, anjeun bakal diajar kumaha ngagunakeun Gatsby pikeun nyieun blog anu bakal anjeun pake pikeun nyerat artikel anjeun sorangan nganggo React sareng GraphQL.
tumpukan Tech sarta fitur
- gatsby
- mere tanggapan
- GraphQL
- Plugins jeung téma
- MDX / Markdown
- Bootstrap CSS
- Nyai
Upami anjeun kantos hoyong ngamimitian blog, kumaha carana make React jeung GraphQL.
Abdi henteu nyarios WordPress mangrupikeun pilihan anu goréng, tapi kalayan Gatsby anjeun tiasa ngawangun situs wéb anu berprestasi tinggi nganggo React - anu mangrupikeun kombinasi anu luar biasa.
Blog kalawan Gridsome
Gridsome pikeun Vue ... Oke, urang geus kungsi ieu kalawan salajengna / Nuxt.
Tapi sami bener keur Gridsome na Gatsby. Duanana nganggo GraphQL salaku lapisan datana, tapi Gridsome nganggo VueJS. Ieu ogé generator situs statik anu luar biasa anu bakal ngabantosan anjeun nyiptakeun blog anu saé:
Naon anu anjeun bakal pelajari
Proyék ieu bakal ngajarkeun anjeun kumaha ngadamel blog saderhana pikeun ngamimitian nganggo Gridsome, GraphQL sareng Markdown. Éta ogé nyertakeun kumaha cara nyebarkeun aplikasi ngalangkungan Netlify.
tumpukan Tech sarta fitur
- Geulis
- Vue
- GraphQL
- Markdown
- Netlify
Ieu pasti sanes tutorial panghadena, tapi nyertakeun konsép dasar tina Gridsome na .
Pamuter audio sapertos SoundCloud nganggo Quasar
Quasar mangrupikeun kerangka Vue sanés anu tiasa dianggo pikeun nyiptakeun aplikasi mobile. Dina proyék ieu anjeun bakal nyiptakeun aplikasi pamuter audio, contona:
Naon anu anjeun bakal pelajari
Samentara proyék-proyék sanés museurkeun utamina kana aplikasi wéb, ieu bakal nunjukkeun anjeun kumaha cara ngadamel aplikasi sélulér nganggo Vue sareng kerangka Quasar.
Anjeun kedah parantos ngajalankeun Cordova sareng Android Studio / Xcode ngonpigurasi. Upami henteu, manual gaduh tautan kana halaman wéb Quasar dimana aranjeunna nunjukkeun anjeun kumaha nyetél sadayana.
tumpukan Tech sarta fitur
- kuasar
- Vue
- Cordova
- WaveSurfer
- Komponén UI
, demonstrating kamampuhan Quasar pikeun nyieun aplikasi mobile.
Форма кредитной карты
Bentuk kartu kiridit anu saé kalayan interaksi mikro anu lancar sareng pikaresepeun. Ngawengku pormat angka, verifikasi jeung deteksi tipe kartu otomatis. Hal ieu diwangun dina Vue.js sarta ogé pinuh responsif. (Anjeun tiasa ningali .)
Naon anu anjeun bakal diajar:
- Proses sareng validasi bentuk
- Nanganan acara (contona, nalika widang robah)
- Ngartos kumaha cara nampilkeun sareng nempatkeun elemen dina halaman, khususna inpormasi kartu kiridit anu muncul dina luhureun formulir
grafik bar
Histogram nyaéta bagan atawa grafik anu ngagambarkeun data katégori jeung bar rectangular kalayan jangkungna atawa panjangna sabanding jeung nilai anu diwakilan.
Éta tiasa diterapkeun sacara vertikal atanapi horisontal. Bagan bar nangtung sok disebut bagan garis.
Naon anu anjeun bakal diajar:
- Témbongkeun data dina cara terstruktur tur kaharti
- Salaku tambahan: Diajar kumaha ngagunakeun unsur
canvassareng kumaha ngagambar unsur-unsurna
anjeun tiasa mendakan data populasi dunya. Aranjeunna diurutkeun dumasar taun.
Анимация сердечка Twitter
Deui dina 2016, Twitter ngenalkeun animasi endah ieu pikeun tweets na. Dina taun 2019, éta masih katingali bagian éta, janten naha henteu nyiptakeun hiji diri?
Naon anu anjeun bakal diajar:
- Gawe sareng atribut CSS
keyframes - Ngamanipulasi sareng ngahirupkeun elemen HTML
- Ngagabungkeun JavaScript, HTML jeung CSS
Репозитории GitHub с функцией поиска
Henteu aya anu pikaresepeun di dieu - repositori GitHub ngan ukur daptar anu dimulyakeun.
Tujuanana nyaéta pikeun nampilkeun repositori sareng ngamungkinkeun pangguna pikeun nyaring aranjeunna. Paké pikeun meunangkeun repositories pikeun tiap pamaké.
Kaca profil GitHub -
Naon anu anjeun bakal diajar:
- Nampi data tina API
- Témbongkeun data tina API
- Nyaring sareng nunjukkeun data anu relevan pikeun unggal pamilarian
- Opsional: Upami anjeun nuju tangtangan, paké , diwangun ngagunakeun GraphQL. .
Чаты в стиле Reddit
Obrolan mangrupikeun cara komunikasi anu populer kusabab kesederhanaan sareng gampang dianggo. Tapi naon bener suluh kamar obrolan modern? WebSockets!
Naon anu anjeun bakal diajar:
- Paké WebSockets, komunikasi real-time jeung apdet data
- Gawe sareng tingkat aksés pamaké (contona, nu boga saluran obrolan boga peran
admin, jeung batur di kamar -user) - Ngolah sareng ngabuktoskeun bentuk - émut, jandela obrolan pikeun ngirim pesen nyaéta
input - Jieun tur gabung obrolan béda
- Gawe sareng pesen pribadi. Pamaké tiasa ngobrol sareng pangguna sanés sacara pribadi. Intina, anjeun bakal ngadamel sambungan WebSocket antara dua pangguna.
Навигация в стиле Stripe
Anu ngajadikeun navigasi ieu unik nyaéta wadah popover dirobih pikeun nyocogkeun kana eusi. Aya kaanggunan pikeun transisi ieu dibandingkeun sareng kabiasaan tradisional muka sareng nutup popover énggal.
Naon anu anjeun bakal diajar:
- Ngagabungkeun animasi CSS jeung transisi
- Taram eusi jeung nerapkeun kelas aktip ka elemen floated
Pacman
Jieun versi anjeun sorangan tina Pacman. Ieu mangrupikeun cara anu saé pikeun kéngingkeun ideu kumaha kaulinan dikembangkeun sareng ngartos dasarna. Paké kerangka JavaScript, meta atawa Vue.
Anjeun bakal diajar:
- Kumaha elemen gerak
- Kumaha nangtukeun mana kenop pikeun pencét
- Kumaha nangtukeun momen tabrakan
- Anjeun tiasa langkung jauh sareng nambihan kadali gerakan hantu
Anjeun bakal mendakan conto proyék ieu GitHub
manajemén pamaké
proyek GitHub
Nyiptakeun aplikasi jinis CRUD pikeun administrasi pangguna bakal ngajarkeun anjeun dasar-dasar pangwangunan. Ieu hususna kapaké pikeun pamekar anyar.
Anjeun bakal diajar:
- Naon routing
- Kumaha nanganan bentuk éntri data sareng pariksa naon anu parantos diasupkeun ku pangguna
- Kumaha damel sareng pangkalan data - nyiptakeun, maca, ngapdet sareng ngahapus tindakan
Проверка погоды в вашем местоположении
proyek GitHub
Upami anjeun hoyong ngadamel aplikasi, mimitian ku aplikasi cuaca. Proyék ieu tiasa réngsé nganggo Swift.
Salian mangtaun pangalaman ngawangun aplikasi, anjeun bakal diajar:
- Kumaha dianggo sareng API
- Kumaha ngagunakeun geolocation
- Jadikeun aplikasi Anjeun leuwih dinamis ku nambahkeun input téks. Di jerona, pangguna bakal tiasa ngalebetkeun lokasina pikeun mariksa cuaca di lokasi anu khusus.
Anjeun peryogi API. Pikeun meunangkeun data cuaca, paké OpenWeather API. Inpo nu langkung lengkep ihwal OpenWeather API.
Окно чата
Jandela obrolan kuring dina aksi, muka dina dua tab browser
Nyiptakeun jandela obrolan mangrupikeun cara anu sampurna pikeun ngamimitian nganggo sockets. Pilihan tumpukan téknologi ageung. Node.js, contona, sampurna.
Anjeun bakal diajar kumaha sockets dianggo sareng kumaha nerapkeunana. Ieu kaunggulan utama proyék ieu.
Upami anjeun pamekar Laravel anu hoyong damel sareng soket, baca kuring
GitLab CI
Upami anjeun énggal kana integrasi kontinyu (CI), ulin sareng GitLab CI. Setel sababaraha lingkungan sareng cobian ngajalankeun sababaraha tés. Ieu sanés proyek anu sesah, tapi kuring yakin anjeun bakal diajar seueur tina éta. Seueur tim pamekaran ayeuna nganggo CI. Nyaho kumaha ngagunakeun éta mangpaat.
Anjeun bakal diajar:
- Naon GitLab CI
- Kumaha ngonpigurasikeun
.gitlab-ci.ymlnu ngabejaan pamaké GitLab naon anu kudu dipigawé - Kumaha nyebarkeun ka lingkungan anu sanés
Анализатор сайтов
Jieun scraper nu nganalisa semantik jaba jeung nyieun rating maranéhanana. Contona, anjeun tiasa pariksa tag alt leungit dina gambar. Atawa pariksa lamun kaca boga SEO meta tag. A scraper bisa dijieun tanpa panganteur pamaké.
Anjeun bakal diajar:
- Kumaha scraper dianggo?
- Kumaha cara nyiptakeun pamilih DOM
- Kumaha cara nyerat algoritma
- Upami anjeun henteu hoyong eureun di dinya, jieun antarbeungeut pangguna. Anjeun oge bisa nyieun laporan dina unggal ramatloka anjeun pariksa.
Определение настроений в социальных сетях
Deteksi sentimen dina média sosial mangrupikeun cara anu saé pikeun diwanohkeun kana mesin diajar.
Anjeun tiasa ngamimitian ku nganalisa ngan hiji jaringan sosial. Sarerea biasana dimimitian ku Twitter.
Upami anjeun parantos gaduh pangalaman diajar mesin, cobian ngumpulkeun data tina jaringan sosial anu béda sareng ngagabungkeun aranjeunna.
Anjeun bakal diajar:
- Naon mesin learning
Клон Trello
Naon anu anjeun bakal diajar:
- Organisasi rute pamrosésan pamundut (Routing).
- Séréd sareng teundeun.
- Kumaha cara nyieun objék anyar (papan, daptar, kartu).
- Ngolah sareng mariksa data input.
- Tina sisi klien: kumaha ngagunakeun panyimpenan lokal, kumaha nyimpen data kana panyimpenan lokal, kumaha maca data tina panyimpenan lokal.
- Ti sisi server: kumaha ngagunakeun database, kumaha carana nyimpen data dina database, kumaha carana maca data tina database.
, dilakukeun dina React+Redux.
Панель админа
Aplikasi CRUD saderhana, idéal pikeun diajar dasar-dasar. Hayu urang diajar:
- Jieun pamaké, ngatur pamaké.
- Interaksi sareng pangkalan data - nyiptakeun, maca, ngédit, ngahapus pangguna.
- Validasi input sarta gawé bareng formulir.
Трекер криптовалют (нативное мобильное приложение)
Naon waé: Swift, Objective-C, React Native, Java, Kotlin.
Hayu urang diajar:
- Kumaha aplikasi asli jalan.
- Kumaha nimba data tina API.
- Kumaha tata perenah halaman asli dianggo.
- Kumaha gawé bareng simulators mobile.
. Upami anjeun mendakan anu langkung saé, tulis dina koméntar.
Upami anjeun kabetot, ieu .
Настроить собственный конфиг webpack с нуля
Téhnisna, ieu sanés aplikasi, tapi éta mangrupikeun tugas anu mangpaat pikeun ngartos kumaha webpack tiasa dianggo ti jero. Ayeuna éta moal janten "kotak hideung", tapi alat anu kaharti.
Syarat:
- Kompilasi es7 ka es5 (dasar).
- Kompilasi jsx ka js - atanapi - .vue ka .js (anjeun kedah diajar loader)
- Nyetél server webpack dev sareng ngamuat ulang modul panas. (vue-cli sareng create-react-app nganggo duanana)
- Anggo Heroku, now.sh atanapi Github, diajar kumaha nyebarkeun proyék webpack.
- Setel preprocessor favorit anjeun pikeun compile css - scss, kirang, stylus.
- Diajar kumaha ngagunakeun gambar sareng svgs sareng webpack.
Клон Hackernews
Unggal Jedi diwajibkeun ngadamel hackernews sorangan.
Naon anu anjeun bakal diajar sapanjang jalan:
- Kumaha berinteraksi sareng hackernews API.
- Kumaha cara ngadamel aplikasi halaman tunggal.
- Kumaha nerapkeun fitur sapertos ningali koméntar, koméntar individu, profil.
- Organisasi rute pamrosésan pamundut (Routing).
Тудушечка
Serius? Tudushka? Aya rébuan sahijina. Tapi percanten ka kuring, aya alesan pikeun popularitas ieu.
Aplikasi Tudu mangrupikeun cara anu saé pikeun mastikeun yén anjeun ngartos dasarna. Coba nyerat hiji aplikasi dina Javascript vanili sareng hiji dina kerangka karesep anjeun.
Diajar:
- Jieun tugas anyar.
- Pariksa yén widang anu dieusian.
- Saringan tugas (réngsé, aktip, sadayana). Paké
filterиreduce. - Ngartos dasar-dasar Javascript.
Сортируемый drag and drop список
Pisan mantuan ngartos .
Hayu urang diajar:
- Séred tur teundeun API
- Jieun UIs euyeub
Клон мессенджера (нативное приложение)
Anjeun bakal ngartos kumaha aplikasi wéb sareng aplikasi asli tiasa dianggo, anu bakal ngabédakeun anjeun tina massa abu.
Naon urang bakal diajar:
- Sockets wéb (pesen instan)
- Kumaha aplikasi asli jalan.
- Kumaha témplat dianggo dina aplikasi asli.
- Ngatur rute pamrosésan pamundut dina aplikasi asli.
Redaksi téks
Tujuan pangropéa téksu nyaéta pikeun ngirangan usaha pangguna anu nyobian ngarobih pormatna kana markup HTML anu valid. Pangropéa téksu anu saé ngamungkinkeun pangguna pikeun pormat téks dina sababaraha cara.
Dina sababaraha waktos, sadayana parantos nganggo pangropéa téksu. Janten naha henteu ?
Клон Reddit
mangrupakeun aggregation warta sosial, rating eusi web na situs diskusi.
Reddit nyéépkeun waktos kuring, tapi kuring teras-terasan nongkrong. Nyiptakeun klon Reddit mangrupikeun cara anu efektif pikeun diajar program (bari ngotéktak Reddit dina waktos anu sami).
Reddit nyayogikeun anjeun anu beunghar pisan. Ulah ninggalkeun kaluar fitur naon atawa ngalakukeun hal haphazardly. Di dunya nyata sareng klien sareng palanggan, anjeun moal tiasa damel sacara haphazardly, atanapi anjeun bakal gancang kaleungitan padamelan anjeun.
Klién anu pinter bakal langsung sadar yén padamelan éta dilaksanakeun kirang sareng bakal mendakan batur.
Публикация пакета NPM с открытым исходным кодом
Lamun anjeun nulis kode Javascript, Chances anjeun ngagunakeun manajer pakét. Pangatur pakét ngamungkinkeun anjeun nganggo deui kode anu tos aya anu diserat sareng diterbitkeun ku jalma sanés.
Ngartos siklus pangembangan pinuh ku pakét bakal masihan pangalaman anu saé. Aya seueur hal anu anjeun kedah terang nalika nyebarkeun kode. Anjeun kudu mikir ngeunaan kaamanan, versioning semantik, scalability, konvénsi ngaran jeung perawatan.
Bungkusan tiasa naon waé. Upami anjeun teu gaduh ide, jieun Lodash anjeun nyalira sareng publikasikeun.
Lodash:
Ngagaduhan hal anu anjeun laksanakeun online nempatkeun anjeun 10% di luhur batur. ngeunaan open source sareng bungkusan.
Учебный план freeCodeCamp
freeCodecamp geus dikumpulkeun loba .
freeCodeCamp nyaéta organisasi nirlaba. Éta diwangun ku platform pembelajaran berbasis wéb interaktif, forum komunitas online, ruang obrolan, publikasi Medium, sareng organisasi lokal anu badé ngajantenkeun pangembangan wéb diajar tiasa diaksés ku sadayana.
Anjeun bakal leuwih ti mumpuni pikeun pakasaban munggaran anjeun lamun junun ngalengkepan sakabéh kursus.
Создайте HTTP-сервер с нуля
Protokol HTTP mangrupikeun salah sahiji protokol utama anu ngalangkungan eusi dina Internét. Pangladén HTTP dianggo pikeun ngalayanan eusi statik sapertos HTML, CSS, sareng JS.
Bisa nerapkeun protokol HTTP ti scratch bakal dilegakeun pangaweruh anjeun kumaha hal berinteraksi.
Salaku conto, upami anjeun nganggo NodeJs, anjeun terang yén Express nyayogikeun server HTTP.
Pikeun rujukan, tingali upami anjeun tiasa:
- Nyetél server tanpa nganggo perpustakaan
- server kudu ngawula HTML, CSS jeung eusi JS.
- Ngalaksanakeun router ti scratch
- Ngawas parobahan sarta ngapdet server
Upami anjeun henteu terang naha, paké jeung cobaan nyieun hiji server HTTP ti scratch.
Десктопное приложение для заметок
Urang sadayana nyandak catetan, sanés?
Hayu urang nyieun aplikasi catetan. Aplikasina kedah nyimpen catetan sareng nyinkronkeunana sareng pangkalan data. Bangun aplikasi asli nganggo Electron, Swift, atanapi naon waé anu anjeun pikahoyong sareng naon anu dianggo pikeun sistem anjeun.
Ngarasa Luncat pikeun ngagabungkeun ieu kalawan tantangan munggaran (éditor téks).
Salaku bonus, coba nyingkronkeun versi desktop anjeun sareng versi wéb.
Подкасты (клон Overcast)
Saha anu henteu ngadangukeun podcast?
Jieun aplikasi wéb nganggo fitur ieu:
- Ngadamel akun
- Pilarian Podcast
- Meunteun sareng ngalanggan podcast
- Eureun jeung muter, ngarobah speed, maju jeung mundur fungsi pikeun 30 detik.
Coba nganggo iTunes API salaku titik awal. Upami anjeun terang sumber anu sanés, punten pasang dina koméntar.
Potret layar
Halo! Abdi nuju syuting layar abdi ayeuna!
Jieun desktop atawa aplikasi wéb nu ngidinan Anjeun pikeun moto layar Anjeun tur nyimpen klip salaku .gif
di dieu kumaha carana ngahontal ieu.
sumber
sumber: www.habr.com