Tugas pelatihan front-end: doodle-place, Apple Podcasts, Site Blocker, parsing file CSV

Klon tempat orat-oret



gambar



doodle-place adalah dunia online yang dipenuhi orat-oret animasi. Anda dapat berkeliling dan melihat coretan yang dibuat oleh pengguna di seluruh dunia, atau berkontribusi.



Apa yang akan Anda pelajari dengan membuat tiruan dari tempat doodle:



  • Menggunakan Canvas API dalam JavaScript untuk menggambar grafik seperti coretan pada layar.
  • Teknik untuk bekerja dengan grafik 2D dan API WebGL
  • Bekerja dengan input pengguna, seperti gambar, dan menyimpan hasilnya dalam database.


Parsing file CSV ke JSON



Aplikasi ini menggunakan d3-dsv (sisi klien) untuk mem-parsing file CSV. d3-dsv adalah utilitas yang disertakan dengan d3 (perpustakaan visualisasi data populer), tetapi juga dapat digunakan dengan sendirinya, seperti yang ditunjukkan di sini.



gambar



Apa yang akan Anda pelajari dengan membuat parser CSV ke JSON.





Klon ekstensi pemblokiran situs



Pemblokir Situs adalah ekstensi web yang memungkinkan Anda memblokir satu atau lebih situs dengan menambahkan nama domain. Kelola waktu Anda secara efektif tanpa gangguan.



gambar



Apa yang akan Anda pelajari dengan membuat klon "Pemblokir Situs":



  • Semua yang Anda butuhkan untuk membuat ekstensi browser
  • JavaScript, HTML, dan CSS untuk membangun ekstensi.
  • Bekerja dengan situs ekstensi di Chrome / Firefox / Safari.


Clone Notion



Notion adalah aplikasi pencatatan yang ringan, cepat, dan bebas gangguan dan banyak lagi. Saya menggunakannya untuk melacak tugas dan ide saya. Apa yang saya sukai dari Notion adalah dukungannya untuk bahasa markdown Markdown.



Tidak ada batasan: Anda dapat membuat versi desktop Notion, serta versi seluler atau web. Pilih lingkungan favorit Anda (atau yang paling ingin Anda jelajahi).



gambar



Apa yang akan Anda pelajari dengan membuat klon Notion:



  • Jika Anda ingin maju, gunakan Grid di CSS . Kotak sangat bagus untuk membuat tata letak.
  • Bekerja dengan basis data. Anda akan ingin menyimpan catatan Anda dalam database yang dapat Anda query nanti.
  • DevOps. Setelah selesai, sebarkan aplikasi ke web atau toko aplikasi. Tunjukkan pada dunia apa yang telah Anda lakukan.


Apple Podcast Clone



Aplikasi Podcast untuk iOS dan macOS menyediakan akses mudah ke podcast populer dan yang muncul menggunakan ikon navigasi di bagian bawah aplikasi.



gambar



Apa yang akan Anda pelajari dengan membuat klon Podcast:



  • Cara mendapatkan data dari API. Dalam hal aplikasi ini, data diwakili oleh podcast. Gunakan API ini untuk mendapatkan semua podcast.
  • Cara mengembangkan aplikasi desktop untuk Mac OS atau aplikasi iOS dan menyebarkannya ke toko aplikasi. Jika Anda suka membangun untuk web, itu bagus juga!
  • Membangun antarmuka asli. Misalnya, Anda akan belajar cara menampilkan data di layar.


gambar


Pelajari detail cara mendapatkan profesi yang dicari dari awal atau Tingkatkan keterampilan dan gaji dengan menyelesaikan kursus online berbayar SkillFactory:












All Articles