Proyek CSS Zen Garden

• CSS Zen Garden adalah proyek yang menampilkan keindahan desain berbasis CSS
• HTML tetap sama, dan berbagai desain dapat dinikmati hanya dengan mengubah file CSS eksternal
• Para peserta dapat menunjukkan kekuatan desain web melalui CSS, memberi inspirasi, dan memanfaatkannya sebagai materi pembelajaran
• Utamanya menggunakan CSS 1 & 2, sedangkan CSS 3 & 4 harus digunakan secara terbatas
• Desain yang dikirim harus menampilkan hasil yang konsisten di berbagai browser, dan minimal harus berfungsi di IE9+ serta browser modern terbaru

---

Pentingnya CSS Zen Garden

• CSS Zen Garden adalah proyek untuk menunjukkan kekuatan CSS dan memberi inspirasi kepada desainer serta pengembang
• HTML tetap sama, dan berbagai desain dapat dinikmati hanya dengan mengubah file CSS eksternal
• Proyek ini menunjukkan kemungkinan CSS dan menekankan keindahan desain web

Cara Berpartisipasi

• Dibutuhkan desain visual yang kuat dan keterampilan CSS, tetapi pemula pun dapat memulai melalui file contoh
• Stylesheet dapat dimodifikasi dengan bebas, tetapi HTML tidak dapat diubah
• Karya yang telah selesai harus diunggah ke server web dan tautannya harus dikirimkan

Manfaat Berpartisipasi

• Dapat dimanfaatkan untuk meningkatkan pengakuan, memberi inspirasi, dan menunjukkan kemungkinan luar biasa dari CSS
• Ini adalah situs yang dapat memberi inspirasi kepada desainer web dan pengembang, serta digunakan sebagai materi pembelajaran

Persyaratan

• Utamanya menggunakan CSS 1 & 2, sedangkan CSS 3 & 4 harus digunakan secara terbatas
• Harus menampilkan hasil yang konsisten di berbagai browser, dan minimal harus berfungsi di IE9+ serta browser modern terbaru
• Harus mengirimkan karya yang orisinal dan menghormati hak cipta

Hak Cipta dan Lisensi

• Grafik yang dikirim tetap mempertahankan hak cipta, dan CSS harus disediakan dengan lisensi Creative Commons
• CSS harus dibagikan agar orang lain dapat belajar darinya

[GN⁺]

Komentar Hacker News

• Sebelum CSS muncul, para pengembang web menyalahgunakan elemen tabel untuk membuat grid dan menerapkan layout dengan memotong gambar lalu menempatkannya di dalam tabel

  • Ada penolakan terhadap CSS, dan banyak pengembang menolak mempelajari CSS
  • Ada kesalahpahaman bahwa CSS hanya memungkinkan desain yang "membosankan dan seperti kotak"
  • Dave Shea menunjukkan kemungkinan CSS melalui CSS Zen Garden dan mematahkan kesalahpahaman ini
  • Ia membuktikan bahwa desain keren bisa dibuat dengan CSS dan mengakhiri perdebatan tersebut

• Situs ini sudah tua, tetapi bagus dalam arti yang positif

  • Pada awal 2000-an, ini menjadi titik awal yang membuat orang beralih dari Microsoft ASP.NET untuk mengembangkan aplikasi di Linux
  • Alex Russell memberikan wawasan baru melalui Dojo JS dan mengingatkan akan pentingnya berita teknologi
  • Toolkit yang digunakan terdiri dari Web.py, HTML, JS, dan CSS, lalu setelah itu muncul jQuery, Backbone, Underscore, React, TS, dan lainnya

• Poin utama CSS Zen Garden adalah bahwa dengan memanfaatkan HTML semantik semaksimal mungkin, presentasi dan konten bisa dioperasikan sepenuhnya secara terpisah

  • Desain dapat diwujudkan dalam batasan CSS
  • Untuk mengubah gaya, sering kali perlu memodifikasi DOM secara langsung
  • Keputusan tentang presentasi dan struktur konten sering tercampur di tingkat HTML dan Javascript

• Sebagai orang yang belajar CSS melalui Zen Garden dan Eric Meyer, alat CSS modern seperti Tailwind terlihat seperti antipola

• Ini adalah cahaya di masa gelap Tailwind dan CSS-in-JS

  • Sulit menyadari betapa pentingnya CSS Zen Garden 20 tahun lalu

• Sesuatu yang lama, tetapi bagus

  • Ini menjadi dasar untuk mengajarkan web design kepada siswa SMA dari keluarga berpenghasilan rendah
  • Para siswa harus menjelaskan CSS dalam kompetisi web design, dan banyak dari mereka memenangkan komputer desktop
  • Pertanyaan dikirim kepada Dave Shea, Eric Meyer, Andy Budd, dan lainnya, lalu mendapat bantuan

• Saya mengirimkan dua desain, dan sampai sekarang masih menerima permintaan untuk penggunaan ulang CSS tersebut

• Situs ini dulu sangat berpengaruh

  • Orang bisa mengirimkan CSS dan gambar untuk konten HTML yang sama
  • Ada contoh desain yang sangat mengesankan

• Nostalgia masa lalu... Saya menyukai CSS Zen Garden, tetapi itu adalah filosofi dari masa ketika tujuan utama website adalah menyediakan dokumen

  • Dunia yang kaya media kemudian meninggalkan visi itu

• Senang melihat CSS Zen Garden di HN

  • Ada keluhan terhadap "framework" CSS seperti Tailwind
  • Tailwind memungkinkan orang mendapatkan hasil yang "cukup oke" tanpa mempelajari cara kerja CSS
  • HTML menjadi penuh dengan kelas CSS hingga jumlahnya lebih banyak daripada konten
  • Ada kecenderungan menganggap kedalaman dan kemahiran sebagai sesuatu yang opsional