Front-end dojo: proyek untuk melatih keterampilan developer (5 baru + 43 lama)

1. Клон Notion

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

www.notion.so

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

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

Artikel tersebut diterjemahkan dengan dukungan EDISON Software, yang разрабатывает приложения и сайтыDan berinvestasi pada startup.

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

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Catatan: di sini adalah GitHub example repository.

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

Lapisan

www.reddit.com/r/layer

Lapisan adalah komunitas tempat setiap orang dapat menggambar piksel pada “papan” bersama. Ide awalnya lahir di Reddit. Komunitas r/Layer adalah sebuah metafora untuk kreativitas bersama, bahwa setiap orang dapat menjadi pencipta dan berkontribusi pada tujuan bersama.

Apa yang akan Anda pelajari saat membuat proyek Layer Anda sendiri:

• Cara kerja kanvas JavaScript Mengetahui cara mengoperasikan kanvas adalah keterampilan penting dalam banyak aplikasi.
• Cara mengoordinasikan izin pengguna. Setiap pengguna dapat menggambar satu piksel setiap 15 menit tanpa harus login.
• Buat sesi cookie.

Squoosh

squoosh.app

Squoosh adalah aplikasi kompresi gambar dengan banyak opsi lanjutan.

GIF 20 MB

Dengan membuat Squoosh versi Anda sendiri, Anda akan belajar:

• Cara bekerja dengan ukuran gambar
• Pelajari dasar-dasar API Drag'n'Drop
• Pahami cara kerja API dan pemroses peristiwa
• Cara mengunggah dan mengekspor file

Catatan: Kompresor gambar bersifat lokal. Tidak perlu mengirim data tambahan ke server. Anda dapat memiliki kompresor di rumah, atau Anda dapat menggunakannya di server, sesuai pilihan Anda.

Kalkulator

Ayo? Dengan serius? Kalkulator? Ya, tepatnya, kalkulator. Memahami dasar-dasar operasi matematika dan cara kerjanya merupakan keterampilan penting untuk menyederhanakan aplikasi Anda. Cepat atau lambat Anda harus berurusan dengan angka-angka dan semakin cepat semakin baik.

jarodburchill.github.io/CalculatorReactApp

Dengan membuat kalkulator Anda sendiri, Anda akan belajar:

• Bekerja dengan angka dan operasi matematika
• Berlatih dengan API pendengar acara
• Bagaimana mengatur elemen, memahami gaya

Perayap (Mesin pencari)

Semua orang pernah menggunakan mesin pencari, jadi mengapa tidak membuatnya sendiri? Crawler diperlukan untuk mencari informasi. Semua orang menggunakannya setiap hari dan permintaan akan teknologi serta spesialis ini akan terus meningkat seiring berjalannya waktu.

Mesin pencari Google

Apa yang akan Anda pelajari dengan membuat mesin pencari Anda sendiri:

• Cara kerja crawler
• Cara mengindeks situs dan cara memberi peringkat berdasarkan peringkat dan reputasi
• Cara menyimpan situs yang diindeks dalam database dan cara bekerja dengan database

Pemutar musik (Spotify, Apple Music)

Semua orang mendengarkan musik - itu hanyalah bagian integral dari kehidupan kita. Mari buat pemutar musik untuk lebih memahami cara kerja mekanisme dasar platform streaming musik modern.

Spotify

Apa yang akan Anda pelajari dengan membuat platform streaming musik Anda sendiri:

• Cara bekerja dengan API. gunakan API dari Spotify atau Apple Music
• Cara memutar, menjeda, atau memundurkan ke trek berikutnya/sebelumnya
• Cara mengubah volume
• Cara mengelola perutean pengguna dan riwayat browser

Aplikasi pencarian film menggunakan React (dengan kait)

Hal pertama yang bisa Anda mulai adalah membuat aplikasi pencarian film menggunakan React. Di bawah ini adalah gambar tampilan akhir aplikasi:

Apa yang akan kamu pelajari?
Dengan membangun aplikasi ini, Anda akan meningkatkan keterampilan React Anda dengan menggunakan Hooks API yang relatif baru. Proyek contoh menggunakan komponen React, banyak hook, API eksternal, dan tentu saja beberapa gaya CSS.

Tumpukan teknologi dan fitur

• Bereaksi dengan kait
• buat-reaksi-aplikasi
• BEJ
• CSS

Tanpa menggunakan kelas apa pun, proyek ini memberi Anda titik masuk yang sempurna ke dalam React yang fungsional dan pasti akan membantu Anda di tahun 2020. kamu dapat menemukan contoh proyek di sini. Ikuti instruksinya atau buat sendiri.

Aplikasi Obrolan dengan Vue

Proyek hebat lainnya yang dapat Anda lakukan adalah membuat aplikasi obrolan menggunakan perpustakaan JavaScript favorit saya: VueJS. Aplikasinya akan terlihat seperti ini:

Apa yang akan kamu pelajari?
Dalam tutorial ini, Anda akan mempelajari cara membuat aplikasi Vue dari awal - membuat komponen, menangani status, membuat rute, menghubungkan ke layanan pihak ketiga, dan bahkan menangani otentikasi.

Tumpukan teknologi dan fitur

• Pandangan
• vuex
• Router Vue
• tampilan CLI
• Orang ambisius
• CSS

Ini adalah proyek yang sangat bagus untuk memulai Vue atau meningkatkan keterampilan Anda yang sudah ada agar dapat dikembangkan pada tahun 2020. kamu dapat menemukan tutorialnya di sini.

Aplikasi cuaca indah dengan Angular 8

Contoh ini akan membantu Anda membuat aplikasi cuaca yang indah menggunakan Angular 8:

Apa yang akan kamu pelajari?
Proyek ini akan mengajarkan Anda keterampilan berharga dalam membangun aplikasi dari awal - mulai dari desain hingga pengembangan, hingga aplikasi siap penerapan.

Tumpukan teknologi dan fitur

• Sudut 8
• Firebase
• Render sisi server
• CSS dengan Grid dan Flexbox
• Ramah seluler dan kemampuan beradaptasi
• Mode gelap
• Antarmuka yang indah

Hal yang sangat saya sukai dari proyek komprehensif ini adalah Anda tidak mempelajari berbagai hal secara terpisah. Sebaliknya, Anda mempelajari keseluruhan proses pengembangan, mulai dari desain hingga penerapan akhir.

Aplikasi Agenda menggunakan Svelte

Svelte seperti anak baru dalam pendekatan berbasis komponen - setidaknya mirip dengan React, Vue, dan Angular. Dan ini adalah salah satu produk baru terpanas untuk tahun 2020.

Aplikasi Agenda belum tentu menjadi topik terhangat, namun aplikasi ini akan sangat membantu Anda mengasah keterampilan Svelte Anda. Ini akan terlihat seperti ini:

Apa yang akan kamu pelajari?
Tutorial ini akan menunjukkan cara membuat aplikasi menggunakan Svelte 3, dari awal hingga akhir. Anda akan menggunakan komponen, gaya, dan pengendali kejadian

Tumpukan teknologi dan fitur

• Langsing 3
• Komponen
• Menata gaya dengan CSS
• Sintaks ES 6

Tidak banyak proyek awal Svelte yang bagus, jadi saya menemukannya ini adalah pilihan yang bagus untuk memulai.

Aplikasi e-niaga menggunakan Next.js

Next.js adalah kerangka kerja paling populer untuk membangun aplikasi React yang mendukung rendering sisi server.

Proyek ini akan menunjukkan cara membuat aplikasi e-commerce yang terlihat seperti ini:

Apa yang akan kamu pelajari?
Dalam proyek ini, Anda akan mempelajari cara mengembangkan dengan Next.js—membuat halaman dan komponen baru, mengekstrak data, serta menata gaya dan menerapkan aplikasi Berikutnya.

Tumpukan teknologi dan fitur

• Next.js
• Komponen dan Halaman
• Pengambilan sampel data
• Styling
• Penerapan Proyek
• RSK dan SPA

Selalu menyenangkan memiliki contoh dunia nyata seperti aplikasi e-niaga untuk mempelajari sesuatu yang baru. Kamu bisa temukan tutorialnya di sini.

Blog multibahasa lengkap dengan Nuxt.js

Nuxt.js untuk Vue, sedangkan Next.js untuk React: kerangka kerja hebat untuk menggabungkan kekuatan rendering sisi server dan aplikasi satu halaman
Aplikasi akhir yang bisa Anda buat akan terlihat seperti ini:

Apa yang akan kamu pelajari?

Dalam contoh proyek ini, Anda akan mempelajari cara membuat situs web lengkap menggunakan Nuxt.js, mulai dari penyiapan awal hingga penerapan akhir.

Ini memanfaatkan banyak fitur keren yang ditawarkan Nuxt, seperti halaman dan komponen, serta penataan gaya dengan SCSS.

Tumpukan teknologi dan fitur

• Nuxt.js
• Komponen dan Halaman
• Modul blok cerita
• ikan hag
• Vuex untuk manajemen negara
• SCSS untuk penataan
• Middleware berikutnya

Ini adalah proyek yang sangat keren, yang mencakup banyak fitur hebat Nuxt.js. Saya pribadi suka bekerja dengan Nuxt jadi Anda harus mencobanya karena ini juga akan menjadikan Anda pengembang Vue yang hebat.

Blog dengan Gatsby

Gatsby adalah generator situs statis luar biasa yang menggunakan React dan GraphQL. Ini adalah hasil dari proyek ini:

Apa yang akan kamu pelajari?

Dalam tutorial ini, Anda akan mempelajari cara menggunakan Gatsby untuk membuat blog yang akan Anda gunakan untuk menulis artikel Anda sendiri menggunakan React dan GraphQL.

Tumpukan teknologi dan fitur

• gatsby
• Bereaksi
• GraphQL
• Plugin dan tema
• MDX/Penurunan harga
• CSS bootstrap
• Template

Jika Anda pernah ingin memulai sebuah blog, ini adalah contoh yang bagus tentang cara membuatnya menggunakan React dan GraphQL.

Saya tidak mengatakan WordPress adalah pilihan yang buruk, tetapi dengan Gatsby Anda dapat membangun situs web berkinerja tinggi menggunakan React - yang merupakan kombinasi luar biasa.

Blog dengan Gridsome

Mengerikan untuk Vue... Oke, kita sudah memilikinya dengan Next/Nuxt.
Namun hal yang sama juga berlaku untuk Gridsome dan Gatsby. Keduanya menggunakan GraphQL sebagai lapisan datanya, tetapi Gridsome menggunakan VueJS. Ini juga merupakan generator situs statis luar biasa yang akan membantu Anda membuat blog hebat:

Apa yang akan kamu pelajari?

Proyek ini akan mengajarkan Anda cara membuat blog sederhana untuk memulai dengan Gridsome, GraphQL, dan Markdown. Ini juga mencakup cara menyebarkan aplikasi melalui Netlify.

Tumpukan teknologi dan fitur

• keren
• Pandangan
• GraphQL
• Penurunan harga
• netlify

Ini tentunya bukan tutorial yang paling komprehensif, tetapi mencakup konsep dasar Gridsome dan Penurunan harga mungkin merupakan titik awal yang baik.

Pemutar audio mirip SoundCloud menggunakan Quasar

Quasar adalah framework Vue lain yang dapat digunakan untuk membuat aplikasi seluler. Pada project ini Anda akan membuat aplikasi pemutar audio, misalnya:

Apa yang akan kamu pelajari?

Meskipun proyek lain berfokus terutama pada aplikasi web, proyek ini akan menunjukkan kepada Anda cara membuat aplikasi seluler menggunakan Vue dan kerangka Quasar.
Anda seharusnya sudah menjalankan Cordova dengan Android Studio/Xcode yang dikonfigurasi. Jika tidak, manual ini memiliki tautan ke situs web Quasar di mana mereka menunjukkan cara mengatur semuanya.

Tumpukan teknologi dan fitur

• Quasar
• Pandangan
• Cordova
• Peselancar Gelombang
• Komponen UI

Proyek kecil, menunjukkan kemampuan Quasar untuk membuat aplikasi seluler.

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

Bentuk kartu kredit yang keren dengan interaksi mikro yang lancar dan menyenangkan. Termasuk pemformatan nomor, verifikasi, dan deteksi jenis kartu otomatis. Itu dibangun di atas Vue.js dan juga sepenuhnya responsif. (Anda dapat melihat di sini.)

formulir kartu kredit

Apa yang akan Anda pelajari:

• Memproses dan memvalidasi formulir
• Menangani peristiwa (misalnya, ketika bidang berubah)
• Memahami cara menampilkan dan menempatkan elemen pada halaman, terutama informasi kartu kredit yang muncul di atas formulir

grafik batang

Histogram adalah bagan atau grafik yang mewakili data kategorikal dengan batang persegi panjang dengan tinggi atau panjang sebanding dengan nilai yang diwakilinya.

Mereka dapat diterapkan secara vertikal atau horizontal. Diagram batang vertikal terkadang disebut diagram garis.

Apa yang akan Anda pelajari:

• Menampilkan data dengan cara yang terstruktur dan mudah dipahami
• Selain itu: Pelajari cara menggunakan elemen tersebut canvas dan cara menggambar elemen dengannya

Di sini Anda dapat menemukan data populasi dunia. Mereka diurutkan berdasarkan tahun.

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

Pada tahun 2016, Twitter memperkenalkan animasi luar biasa ini untuk tweet-nya. Pada tahun 2019, tampilannya masih sama, jadi mengapa tidak membuatnya sendiri?

Apa yang akan Anda pelajari:

• Bekerja dengan atribut CSS keyframes
• Memanipulasi dan menganimasikan elemen HTML
• Gabungkan JavaScript, HTML, dan CSS

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

Tidak ada yang mewah di sini—repositori GitHub hanyalah daftar yang dimuliakan.
Tujuannya adalah untuk menampilkan repositori dan memungkinkan pengguna memfilternya. Menggunakan API GitHub resmi untuk mendapatkan repositori untuk setiap pengguna.

Halaman profil GitHub - github.com/indreklasn

Apa yang akan Anda pelajari:

• Terima data dari API
• Menampilkan data dari API
• Filter dan tampilkan data yang relevan untuk setiap pencarian
• Opsional: Jika Anda siap menghadapi tantangan, gunakan API v4, dibangun menggunakan GraphQL. Jika Anda ingin mempelajari GraphQL, buka salah satu artikel saya sebelumnya.

Чаты в стиле Reddit

Obrolan adalah cara komunikasi yang populer karena kesederhanaan dan kemudahan penggunaannya. Tapi apa sebenarnya yang mendorong ruang obrolan modern? Soket Web!

Apa yang akan Anda pelajari:

• Gunakan WebSockets, komunikasi real-time dan pembaruan data
• Bekerja dengan tingkat akses pengguna (misalnya, pemilik saluran obrolan memiliki peran tersebut admin, dan orang lain di ruangan itu - user)
• Memproses dan memvalidasi formulir - ingat, jendela obrolan untuk mengirim pesan adalah input
• Buat dan bergabunglah dalam obrolan yang berbeda
• Bekerja dengan pesan pribadi. Pengguna dapat mengobrol dengan pengguna lain secara pribadi. Pada dasarnya, Anda akan membuat koneksi WebSocket antara dua pengguna.

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

Apa yang membuat navigasi ini unik adalah wadah popover berubah agar sesuai dengan konten. Ada keanggunan dalam transisi ini dibandingkan dengan perilaku tradisional membuka dan menutup popover baru.

Apa yang akan Anda pelajari:

• Gabungkan animasi CSS dengan transisi
• Redupkan konten dan terapkan kelas aktif ke elemen mengambang

Pacman

Buat Pacman versi Anda sendiri. Ini adalah cara yang bagus untuk mendapatkan gambaran tentang bagaimana game dikembangkan dan memahami dasar-dasarnya. Gunakan kerangka JavaScript, React atau Vue.

Anda akan belajar:

• Bagaimana elemen bergerak
• Cara menentukan tombol mana yang harus ditekan
• Cara menentukan momen tumbukan
• Anda dapat melangkah lebih jauh dan menambahkan kontrol gerakan hantu

Anda akan menemukan contoh proyek ini di repositori GitHub

manajemen pengguna

Proyek di repositori GitHub

Membuat aplikasi tipe CRUD untuk administrasi pengguna akan mengajarkan Anda dasar-dasar pengembangan. Ini sangat berguna bagi pengembang baru.

Anda akan belajar:

• Apa itu perutean
• Bagaimana menangani formulir entri data dan memeriksa apa yang telah dimasukkan pengguna
• Cara bekerja dengan database - tindakan membuat, membaca, memperbarui, dan menghapus

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

Proyek di repositori GitHub

Jika Anda ingin membuat aplikasi, mulailah dengan aplikasi cuaca. Proyek ini dapat diselesaikan menggunakan Swift.

Selain mendapatkan pengalaman membuat aplikasi, Anda akan belajar:

• Cara bekerja dengan API
• Cara menggunakan geolokasi
• Jadikan aplikasi Anda lebih dinamis dengan menambahkan input teks. Di dalamnya, pengguna akan bisa memasukkan lokasinya untuk mengecek cuaca di lokasi tertentu.

Anda memerlukan API. Untuk mendapatkan data cuaca, gunakan OpenWeather API. Informasi lebih lanjut tentang API OpenWeather di sini.

Окно чата

Jendela obrolan saya beraksi, terbuka di dua tab browser

Membuat jendela obrolan adalah cara sempurna untuk memulai dengan soket. Pilihan tumpukan teknologi sangat besar. Node.js, misalnya, sempurna.

Anda akan mempelajari cara kerja soket dan cara menerapkannya. Inilah keuntungan utama dari proyek ini.

Jika Anda seorang pengembang Laravel yang ingin bekerja dengan soket, baca milik saya sebuah artikel

GitLab CI

Источник

Jika Anda baru mengenal integrasi berkelanjutan (CI), cobalah GitLab CI. Siapkan beberapa lingkungan dan coba jalankan beberapa tes. Ini bukan proyek yang terlalu sulit, tapi saya yakin Anda akan belajar banyak darinya. Banyak tim pengembangan sekarang menggunakan CI. Mengetahui cara menggunakannya berguna.

Anda akan belajar:

• Apa itu GitLab CI
• Cara mengkonfigurasi .gitlab-ci.ymlyang memberi tahu pengguna GitLab apa yang harus dilakukan
• Cara menyebarkan ke lingkungan lain

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

Buat pengikis yang menganalisis semantik situs web dan membuat peringkatnya. Misalnya, Anda dapat memeriksa tag alt yang hilang di gambar. Atau periksa apakah halaman tersebut memiliki tag meta SEO. Scraper dapat dibuat tanpa antarmuka pengguna.

Anda akan belajar:

• Bagaimana cara kerja pengikis?
• Cara membuat penyeleksi DOM
• Cara menulis algoritma
• Jika Anda tidak ingin berhenti di situ, buatlah antarmuka pengguna. Anda juga dapat membuat laporan pada setiap website yang Anda periksa.

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

Источник

Deteksi sentimen di media sosial adalah cara terbaik untuk mengenal pembelajaran mesin.

Anda bisa mulai dengan menganalisis satu jejaring sosial saja. Semua orang biasanya memulai dengan Twitter.

Jika Anda sudah memiliki pengalaman dengan pembelajaran mesin, coba kumpulkan data dari berbagai jejaring sosial dan gabungkan.

Anda akan belajar:

• Apa itu pembelajaran mesin

Клон Trello

Klon Trello dari Indrek Lasn.

Apa yang akan Anda pelajari:

• Organisasi rute pemrosesan permintaan (Routing).
• Seret dan lepas.
• Cara membuat objek baru (papan, daftar, kartu).
• Memproses dan memeriksa data masukan.
• Dari sisi klien: cara menggunakan penyimpanan lokal, cara menyimpan data ke penyimpanan lokal, cara membaca data dari penyimpanan lokal.
• Dari sisi server: cara menggunakan database, cara menyimpan data di database, cara membaca data dari database.

Berikut adalah contoh repositori, dibuat di React+Redux.

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

Repositori Github.

Aplikasi CRUD sederhana, ideal untuk mempelajari dasar-dasarnya. Ayo Belajar:

• Buat pengguna, kelola pengguna.
• Berinteraksi dengan database - membuat, membaca, mengedit, menghapus pengguna.
• Memvalidasi input dan bekerja dengan formulir.

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

Repositori Github.

Apa saja: Swift, Objective-C, React Native, Java, Kotlin.

Mari belajar:

• Cara kerja aplikasi asli.
• Cara mengambil data dari API.
• Cara kerja tata letak halaman asli.
• Cara bekerja dengan simulator seluler.

Coba API ini. Jika Anda menemukan sesuatu yang lebih baik, tulis di komentar.

Jika Anda tertarik, ini dia berikut tutorialnya.

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

Secara teknis, ini bukan sebuah aplikasi, tetapi ini adalah tugas yang sangat berguna untuk memahami cara kerja webpack dari dalam. Sekarang ini bukan lagi “kotak hitam”, tapi alat yang bisa dimengerti.

Persyaratan:

• Kompilasi es7 ke es5 (dasar-dasar).
• Kompilasi jsx ke js - atau - .vue ke .js (Anda harus mempelajari loader)
• Siapkan server pengembang webpack dan pemuatan ulang modul panas. (vue-cli dan create-react-app menggunakan keduanya)
• Gunakan Heroku, now.sh atau Github, pelajari cara menerapkan proyek webpack.
• Siapkan praprosesor favorit Anda untuk mengkompilasi css - scss, less, stylus.
• Pelajari cara menggunakan gambar dan svg dengan webpack.

Ini adalah sumber yang luar biasa untuk pemula yang lengkap.

Клон Hackernews

Setiap Jedi diharuskan membuat Hackernews sendiri.

Apa yang akan Anda pelajari selama ini:

• Cara berinteraksi dengan API hackernews.
• Cara membuat aplikasi satu halaman.
• Bagaimana menerapkan fitur seperti melihat komentar, komentar individual, profil.
• Organisasi rute pemrosesan permintaan (Routing).

Тудушечка

TodoMVC.

Dengan serius? Tudushka? Ada ribuan dari mereka. Tapi percayalah, ada alasan di balik popularitas ini.
Aplikasi Tudu adalah cara terbaik untuk memastikan Anda memahami dasar-dasarnya. Cobalah menulis satu aplikasi dalam Javascript vanilla dan satu lagi dalam kerangka favorit Anda.

Mempelajari:

• Buat tugas baru.
• Periksa apakah kolom sudah diisi.
• Filter tugas (selesai, aktif, semua). Menggunakan filter и reduce.
• Memahami dasar-dasar Javascript.

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

Repositori Github.

Sangat membantu untuk dipahami seret dan lepas api.

Ayo Belajar:

• Seret dan lepas API
• Buat UI yang kaya

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

Anda akan memahami cara kerja aplikasi web dan aplikasi asli, yang akan membedakan Anda dari masyarakat abu-abu.

Apa yang akan kita pelajari:

• Soket web (pesan instan)
• Cara kerja aplikasi asli.
• Cara kerja templat di aplikasi asli.
• Mengatur rute pemrosesan permintaan dalam aplikasi asli.

Editor teks

Tujuan dari editor teks adalah untuk mengurangi upaya pengguna yang mencoba mengubah format mereka menjadi markup HTML yang valid. Editor teks yang baik memungkinkan pengguna memformat teks dengan berbagai cara.

Pada titik tertentu, semua orang pernah menggunakan editor teks. Jadi mengapa tidak buat sendiri?

Клон Reddit

Reddit adalah agregasi berita sosial, pemeringkatan konten web, dan situs diskusi.

Reddit menyita sebagian besar waktu saya, tetapi saya terus menggunakannya. Membuat klon Reddit adalah cara efektif untuk mempelajari pemrograman (sambil menjelajahi Reddit pada saat yang bersamaan).

Reddit memberi Anda kekayaan yang sangat besar API. Jangan tinggalkan fitur apa pun atau melakukan sesuatu secara sembarangan. Di dunia nyata dengan klien dan pelanggan, Anda tidak bisa bekerja sembarangan, atau Anda akan segera kehilangan pekerjaan.

Klien yang cerdas akan segera menyadari bahwa pekerjaannya dilakukan dengan buruk dan akan mencari orang lain.

API Reddit

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

Jika Anda menulis kode Javascript, kemungkinan besar Anda menggunakan pengelola paket. Manajer paket memungkinkan Anda menggunakan kembali kode yang sudah ada yang telah ditulis dan diterbitkan orang lain.

Memahami siklus pengembangan penuh suatu paket akan memberikan pengalaman yang sangat baik. Ada banyak hal yang perlu Anda ketahui saat memublikasikan kode. Anda perlu memikirkan tentang keamanan, pembuatan versi semantik, skalabilitas, konvensi penamaan, dan pemeliharaan.

Paketnya bisa apa saja. Jika Anda tidak punya ide, buat Lodash Anda sendiri dan publikasikan.

Lodash: lodash.com

Memiliki sesuatu yang Anda lakukan secara online menempatkan Anda 10% di atas orang lain. Berikut adalah beberapa sumber yang berguna tentang sumber terbuka dan paket.

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

Kurikulum FCC

freeCodecamp telah mengumpulkan banyak hal kursus pemrograman yang komprehensif.

freeCodeCamp adalah organisasi nirlaba. Ini terdiri dari platform pembelajaran berbasis web interaktif, forum komunitas online, ruang obrolan, publikasi Medium, dan organisasi lokal yang bermaksud membuat pengembangan web pembelajaran dapat diakses oleh semua orang.

Anda akan lebih dari memenuhi syarat untuk pekerjaan pertama Anda jika Anda berhasil menyelesaikan seluruh kursus.

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

Protokol HTTP adalah salah satu protokol utama yang digunakan untuk menyebarkan konten di Internet. Server HTTP digunakan untuk menyajikan konten statis seperti HTML, CSS, dan JS.

Mampu mengimplementasikan protokol HTTP dari awal akan memperluas pengetahuan Anda tentang bagaimana berbagai hal berinteraksi.

Misalnya, jika Anda menggunakan NodeJs, Anda tahu bahwa Express menyediakan server HTTP.

Sebagai referensi, lihat apakah Anda dapat:

• Siapkan server tanpa menggunakan perpustakaan apa pun
• Server harus menyajikan konten HTML, CSS dan JS.
• Menerapkan router dari awal
• Pantau perubahan dan perbarui server

Jika Anda tidak tahu alasannya, gunakan Pergilah dan coba buat server HTTP Kadi dari awal.

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

Kita semua mencatat, bukan?

Mari membuat aplikasi catatan. Aplikasi perlu menyimpan catatan dan menyinkronkannya dengan database. Bangun aplikasi asli menggunakan Electron, Swift, atau apa pun yang Anda suka dan yang sesuai untuk sistem Anda.

Jangan ragu untuk menggabungkan ini dengan tantangan pertama (editor teks).

Sebagai bonus, coba sinkronkan versi desktop Anda dengan versi web.

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

Siapa yang tidak mendengarkan podcast?

Buat aplikasi web dengan fungsi berikut:

• Buat sebuah akun
• Cari Podcast
• Beri peringkat dan berlangganan podcast
• Berhenti dan mainkan, ubah kecepatan, fungsi maju dan mundur selama 30 detik.

Coba gunakan iTunes API sebagai titik awal. Jika Anda mengetahui sumber lain, silakan posting di komentar.

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

Cuplikan Layar

Halo! Saya sedang merekam layar saya sekarang!

Buat aplikasi desktop atau web yang memungkinkan Anda menangkap layar dan menyimpan klip sebagai .gif

di sini adalah beberapa tipsbagaimana mencapai hal ini.

sumber

• 5 proyek pelatihan yang lebih berani untuk pengembang (Layer, Squoosh, Kalkulator, Perayap Situs Web, Pemutar Musik)
• 9 proyek untuk mengasah keterampilan Front-End Anda
• Enam tugas untuk pengembang Front-End
• Latihan yang menyenangkan bagi seorang pengembang
• 8 proyek pendidikan
• Daftar proyek lain untuk dipraktikkan

Sumber: www.habr.com