Submission Tiga MFWDE

English

This is a repository for storing code that will be used in the submission of three (final) in the "Becoming a Front-End Web Developer Expert" class from Dicoding.

In this class we will learn:

• Responsive Layout with Mobile First Approach: Applying a responsive layout using a grid system, media queries, off screen canvas, and other small things that can increase display responsiveness. In the implementation, we will use a mobile-first approach.
• Web Accessibility: Maximizing the use of web accessibility so that the website can be used properly by all users, including people with disabilities.
• JavaScript Clean Code: Get to know the principles of good code writing based on senior engineer Robert C. Martin through his book entitled “Clean Code”. And learn to write JavaScript code consistently by applying the style guide.
• Progressive Web Apps: Applying the nature of native applications on the web so that they can have installable and offline capabilities. In addition, we will also learn other Web APIs such as IndexedDB, Web Sockets and Notifications to better support the native nature of the application.
• Testing and Debugging: Perform testing and debugging to ensure the code written is functioning properly.
• Web Performance: Optimizing the website to reduce waiting time to access pages.

The website that I created has fulfilled:

• Implementing basic display responsibility on mobile devices (Implementing Small Things).
• Implement responsive layout using @media query and css grid (Implementing Responsive Layout).
• Optimization of UI elements such as implementing a navigation drawer, and setting appropriate text spacing (Other Optimization).
• Using focus and screen reader to input data on the website (Experiencing Focus & Experiencing Screen Reader).
• Using ESLint as a linter when writing JavaScript code (Using ESLint).
• Creating a website with Application Shell architecture (Practice: Application Shell).
• Implementing the Web App Manifest (Practice: Web App Manifest).
• Implementing Service Worker (Practice: Service Worker).
• Implemented Cache API on Service Worker (Practice: Cache API).
• Using IndexedDB to store data in object form (Practice: IndexedDB).
• As well as implementing WebSocket and Notification (Practice: Web Socket & Notification)
• Test Driven Development using Jasmine.
• Applying Testing to Applications.
• Implementing Test Contracts.
• Build Features Using TDD.
• Implementing E2E Testing.
• Compress images using Imagemin.
• Convert Gif into Video.
• Applying Responsive Image.
• Using WebP as image format.
• Applying lazy load image technique.
• Analyze JavaScript bundle size.
• Split the bundle to keep the load small. What is required for coding to pass this first submission The results of this submission get 3 stars out of 5 stars

You can see the website in action at my Instagram Reel

This repository has MIT License. This license allows the user to make any changes to the program code. This license only requires the user to include the license and author's copyright in the redistributed code and there is no prohibition against using the trademark of the original author. In addition, the user also has no right to sue the manufacturer when there is damage to the software.

Bahasa

Ini adalah repository untuk menyimpan kode yang akan digunakan dalam submission tiga (final) dalam kelas "Menjadi Front-End Web Developer Expert" dari Dicoding

Di kelas ini kita akan belajar:

• Responsive Layout with Mobile First Approach : Menerapkan layout yang responsif dengan menggunakan sistem grid, media query, off screen canvas, serta hal-hal kecil lain yang dapat meningkatkan responsibilitas tampilan. Pada implementasinya, kita akan menggunakan pendekatan mobile-first.
• Web Accessibility : Memaksimalkan penggunaan web aksesibilitas agar website dapat digunakan dengan baik oleh seluruh pengguna termasuk penyandang disabilitas.
• JavaScript Clean Code : Mengenal prinsip-prinsip penulisan kode yang baik berdasarkan senior engineer Robert C.Martin melalui bukunya berjudul “Clean Code”. Serta belajar menuliskan kode JavaScript secara konsisten dengan menerapkan style guide.
• Progressive Web Apps : Menerapkan sifat aplikasi native pada web sehingga dapat memiliki sifat installable dan offline capability. Selain itu kita juga akan belajar Web API lain seperti IndexedDB, Web Socket dan Notification untuk lebih mendukung sifat keaslian (native) dari aplikasi.
• Testing and Debugging : Melakukan testing dan debugging untuk memastikan kode yang dituliskan berfungsi dengan baik.
• Web Performance : Mengoptimalkan website agar dapat mengurangi waktu tunggu dalam mengakses halaman.

Adapun website yang saya buat sudah memenuhi:

• Menerapkan dasar responsibilitas tampilan pada perangkat seluler (Implementing Small Things).
• Menerapkan layout yang responsif menggunakan @media query dan grid css (Implementing Responsive Layout).
• Optimisasi elemen UI seperti menerapkan navigation drawer, dan menetapkan jarak teks yang sesuai (Other Optimization).
• Menggunakan focus dan screen reader untuk menginput data di website (Experiencing Focus & Experiencing Screen Reader).
• Menggunakan ESLint sebagai linter ketika menuliskan kode JavaScript (Using ESLint).
• Membuat website dengan arsitektur Application Shell (Practice: Application Shell).
• Menerapkan Web App Manifest (Practice: Web App Manifest).
• Menerapkan Service Worker (Practice: Service Worker).
• Menerapkan Cache API pada Service Worker (Practice: Cache API).
• Menggunakan IndexedDB untuk menyimpan data dalam bentuk objek (Practice: IndexedDB).
• Serta menerapkan WebSocket dan Notification (Practice: Web Socket & Notification).
• Test Driven Development menggunakan Jasmine.
• Menerapkan Testing Pada Aplikasi.
• Menerapkan Kontrak Test.
• Membangun Fitur Menggunakan TDD.
• Menerapkan E2E Testing.
• Mengkompresi gambar menggunakan Imagemin.
• Mengubah Gif menjadi Video.
• Menerapkan Image Responsive.
• Menggunakan WebP sebagai format gambar.
• Menerapkan teknik lazy load gambar.
• Menganalisa ukuran bundle JavaScript.
• Memecah bundle agar muatannya tetap kecil. Yang diharuskan Dicoding untuk lulus submisi pertama ini Hasil submisi ini mendapatkan bintang 3 dari 5 bintang

Hasil pengerjaan dari website bisa dilihat pada Instagram Reel

Repository ini memiliki Lisensi MIT.
Lisensi ini membolehkan pengguna untuk melakukan perubahan apapun pada kode program. Lisensi ini hanya mewajibkan pengguna untuk menyertakan lisensi dan copyright pembuat pada kode yang didistribusikan ulang dan tidak ada larangan untuk menggunakan trademark dari pembuat asli. Selain itu pengguna juga tidak berhak untuk menuntut pembuat ketika terjadi kerusakan pada perangkat lunak tersebut.