Ulasan Minggu ke-3 Google Developer Kejar Mobile Web Specialist

  1. Ada kesalahan penulisan di materi CSS Grid
  2. Menggunakan sintaks CSS height: fit-content;
  3. Quiz MWS 2
  4. Web Server sederhana untuk Udacity Auto Grader (Udacity Feedback Chrome Extension)
  5. Menggunakan JavaScript untuk include HTML sebagai footer

#1 Perhatikan sintaks dengan teliti, ada kesalahan penulisan di materi CSS Grid

Pada materi pengenalan CSS Grid yang disampaikan di minggu ke-3, dikenalkan sejumlah sintaks terkait grid, antara lain:
grid-column dapat digunakan untuk mempersingkat penggunaan grid-column-start dan grid-column-end menjadi satu baris saja,
sayangnya pada materi tersebut terjadi kesalahan penulisan grid-column-end yang dituliskan "grid-column-end: 1/2;",
sedangkan seharusnya sintaks dengan X/Y itu adalah sintaks dari grid-column.

#2 Agar situs responsif dengan tinggi CSS Grid menyesuaikan konten, gunakan height: fit-content;

Pada materi pengenalan CSS Grid yang disampaikan di minggu ke-3, pembahasan tentang tinggi baris masih dituliskan fix sejumlah px.
hal ini menyebabkan masalah ketika konten yang dituliskan panjang, jadi melebihi tinggi baris yang disetting fix tersebut.
Akan sangat merepotkan jika harus setting tinggi baris per masing-masing konten, termasuk jika dibuka di perangkat yang lain.
Untuk itu bisa digunakan sintaks CSS height: fit-content; sehingga masing-masing row akan berbeda-beda tinggi menyesuaikan
dengan kontennya, termasuk juga untuk responsive jika dilihat pada perangkat ponsel atau tablet.
berikut contoh dari salah satu yang saya gunakan:

    .content {
        background: #eceff1;
        grid-column: 2/7;
        height: fit-content;
    }

#3 Quiz MWS 2

Quiz ke-2 ini, waktu pelaksanaannya lebih masuk akal, 10 soal dengan total waktu 40 menit.
Jadi proses mencoba, mengecek referensi kursus, atau mengingat materi dari kursus masih cukup waktu.
(terima kasih panitia!)
Secara umum pertanyaannya dari Quiz di kursus Udacity Responsive Images.
Tapi, ada juga pertanyaan quiz dari materi minggu sebelumnya, tentang Responsive Web Design Fundamental.
Perhatikan baik-baik pertanyaannya, karena sejumlah pertanyaan disisipkan kata "kecuali", jadi jangan disamakan.
Opini saya, pertanyaannya kadang menyulitkan, harus membuka Youtube dahulu, kemudian membuka Udacity, lalu baru membaca
pertanyaan dari Quiz, jadi harus tetap fokus meloncat-loncat window browser.
Kemudian ada juga pilihan jawaban yang "dibuat salah dengan kurang sesuai konteks", sehingga dengan mudah pilihannya dihindari.

#4 Web Server Sederhana untuk Kebutuhan Udacity Auto Grader (Udacity Feedback Chrome Extension)

Karena berada di komputer dengan sistem operasi Linux dan Mac, yang sudah ada instalasi Python, saya memilih untuk
menggunakan web server sederhana dengan Python.

    python -m SimpleHTTPServer 8000

Tentu saja bisa juga dengan Web Server sekelas Nginx, Apache HTTPd, IIS, tapi tentunya overkill (buang-buang resource).
Atau karena sekaligus instalasi npm saat kursus menggunakan grunt untuk mengubah ukuran gambar secara otomatis,
web server sederhana juga bisa paket npm bernama http-server. 

    npm install http-server -g
    http-server -p 8000

#5 Menggunakan JavaScript untuk menyertakan HTML file lain sebagai footer

Dibandingkan menuliskan HTML (ataupun kode) yang sama terus-menerus berulang-ulang, saya membuat sebuah file HTML sebagai
footer untuk mengurangi duplikasi penulisan HTML footer, contohnya seperti di bawah halaman ini.
Karena dalam kelompok belajar ini hanya diperbolehkan menggunakan JavaScript dan CSS tanpa framework dan library,
artinya saya harus mencari cara untuk bisa menyertakan (include) HTML file lain.
akhirnya pilihan jatuh pada HTML yang dihasilkan dengan JavaScript, seperti kode berikut ini.

    document.write('\
\
<p> </p>\
<p>←<a href="//gdkmws.firebaseapp.com">Kembali ke halaman utama</a> </p>\
<p>©2018 oon arfiandwi, peserta Google Developer Kejar, Mobile Web Specialist, Kota Makassar, batch #1<br/>\
<a target="_blank" href="https://github.com/oonid/gdkmws">kode sumber dari halaman web ini</a></p>\
\
    ');