Miriam Suzanne adalah penulis, seniman, dan developer web di Denver, Colorado, dan saat ini sedang mengerjakan spesifikasi CSS menarik seperti Kueri Penampung dan Lapisan Bertingkat.
Postingan ini adalah bagian dari Designcember. Perayaan desain web, dipersembahkan oleh web.dev.
Miriam Suzanne adalah penulis, seniman, dan developer web di Denver, Colorado. Ia adalah salah satu pendiri OddBird (agensi web), penulis staf untuk CSS Tricks, anggota tim inti Sass, dan Pakar yang Diundang W3C di Kelompok Kerja CSS. Baru-baru ini, dia berfokus pada pengembangan fitur CSS baru seperti Cascade Layers, Container Queries, dan Scope. Di luar dunia maya, Miriam adalah novelis, penulis drama, dan musisi yang telah menerbitkan karyanya. Kami membahas karyanya dengan Sass dan CSS.
Rachel: Saya pertama kali mengetahui karya Anda karena framework petak Susy, apa yang membuat Anda membuatnya?
Miriam: Pada tahun 2008, tata letak di web sangat berbeda. Developer telah beralih dari tata letak tabel ke tata letak semantik yang lebih baik (tetapi masih tidak sempurna) dengan menggunakan grid mengambang. Ada ledakan dalam "framework petak" 12 kolom yang cocok untuk semua ukuran–yang menyediakan petak standar (biasanya statis) dengan serangkaian class CSS standar. Jika Anda memerlukan sesuatu yang lebih dapat disesuaikan, Anda harus melakukannya sendiri. Jelas bahwa situs perlu menjadi lebih responsif, tetapi kueri media belum tersedia, dan ada banyak masalah kompatibilitas browser terkait float lancar.
Saya menggunakan pendekatan Sistem CSS Natalie Downe, yang pintar dalam merespons ukuran font dan area pandang, tetapi saya merasa frustrasi dengan semua perhitungan berulang dan peretasan browser yang diperlukan. Pada saat yang sama, Sass mulai mendapatkan perhatian, dan sangat cocok dengan apa yang saya butuhkan. Draf pertama Susy sangat sederhana: hanya beberapa mixin untuk melakukan perhitungan dan menambahkan hack yang saya butuhkan. Tujuannya adalah untuk meminimalkan, dan hanya menghasilkan kode penting. Petak yang dapat disesuaikan sepenuhnya, tanpa class yang telah ditentukan sebelumnya.
Rachel: Bagaimana Anda beralih dari menggunakan praprosesor CSS ke menggunakan spesifikasi CSS? Apakah Anda merasa bahwa bekerja pada praprosesor adalah latar belakang yang baik untuk menulis spesifikasi?
Miriam: Menurut pengalaman saya, ada banyak tumpang-tindih, dan saya masih sangat aktif di kedua sisi perbedaan tersebut. Namun, saya rasa hal itu sebagian besar berkat tim Sass, khususnya yang dipimpin oleh Natalie Weizenbaum, yang memiliki pandangan jangka panjang—berupaya mengembangkan alat yang terintegrasi dengan lancar dengan pengembangan standar web. Mendorong solusi "berpendapat" yang tidak sesuai untuk semua orang dan membangun fleksibilitas jangka panjang sangat penting saat Anda memikirkan masa depan standar web inti.
Bagaimana cara membangun alat yang menghargai keberagaman kebutuhan dan pendekatan developer, sekaligus mendorong dan memfasilitasi aksesibilitas dan pertimbangan penting lainnya?
Rachel: Kita memiliki banyak hal yang masuk ke CSS yang pada dasarnya menggantikan fungsi yang secara tradisional merupakan bagian dari Sass. Apakah ada alasan kuat untuk tetap menggunakan sesuatu seperti Sass?
Miriam: Ya, untuk sebagian orang—tetapi tidak ada jawaban universal di sini. Misalnya, variabel. Variabel Sass memiliki cakupan leksikal, dan dikompilasi di server, dengan struktur data yang teratur seperti daftar dan objek, manipulasi warna, dll. Hal ini sangat bagus untuk logika sistem desain yang tidak perlu dijalankan di browser.
Variabel CSS memiliki beberapa tumpang-tindih, juga dapat menyimpan nilai, tetapi memberikan serangkaian kekuatan dan kelemahan berbasis susunan yang sama sekali berbeda. Sass tidak dapat menangani properti kustom, dan CSS tidak dapat menangani data terstruktur. Keduanya berguna dan efektif, tetapi kebutuhan spesifik Anda mungkin berbeda.
Saya rasa bagus jika orang dapat menghapus alat yang tidak lagi mereka butuhkan, dan beberapa project mungkin tidak memerlukan variabel sisi server dan sisi klien. Bagus. Namun, terlalu sederhana untuk mengasumsikan bahwa keduanya identik, dan yang satu hanya menggantikan yang lain. Akan selalu ada kasus penggunaan untuk beberapa logika desain yang terjadi di sisi server, dan beberapa yang terjadi di sisi klien—bahkan jika kita mencapai titik di mana bahasa pada dasarnya menyediakan fitur yang sama. Praprosesor akan bersama kita dalam jangka panjang.
Rachel: Apakah ada hal yang mengejutkan Anda saat Anda semakin terlibat dalam pekerjaan membuat standar, atau hal yang menurut Anda umumnya tidak disadari orang tentang prosesnya?
Miriam: Sebelum terlibat, proses standar terasa seperti kotak hitam yang misterius dan ajaib, dan saya tidak yakin apa yang akan terjadi. Saya takut tidak memiliki cukup pengetahuan tentang internal browser untuk berkontribusi, tetapi kenyataannya mereka tidak membutuhkan lebih banyak engineer browser. Mereka membutuhkan lebih banyak developer dan desainer yang membangun situs dan aplikasi di luar sana.
Saya terkejut mendapati bahwa hanya sedikit orang yang terlibat yang berfokus terutama pada standar, tetapi juga hanya sedikit yang berfokus terutama pada pengembangan atau desain situs. W3C terdiri dari 'sukarelawan' dari organisasi anggota (sering kali dibayar oleh organisasi tersebut, tetapi bukan sebagai pekerjaan utama mereka) dan keanggotaannya tidak murah. Hal itu membuat peserta menjauhi desainer dan developer sehari-hari, terutama kami yang mengerjakan pekerjaan klien di agensi kecil, atau sebagai pekerja lepas. Peran saya sebagai Pakar yang Diundang akan sepenuhnya bersifat sukarela, hobi yang mahal, jika saya tidak menemukan pendanaan eksternal untuk pekerjaan tersebut.
Pada kenyataannya, proses ini cukup terbuka dan publik serta memerlukan keterlibatan developer. Namun, karena ada begitu banyak percakapan yang terjadi sekaligus, Anda mungkin kesulitan untuk menemukan tempat Anda. Terutama jika itu bukan pekerjaan utama Anda.
Rachel: Kueri penampung telah menjadi impian banyak developer web selama bertahun-tahun. Saya sangat senang karena kita akan mendapatkan mereka. Saya merasa banyak orang yang memikirkan kegunaan kueri penampung. Apakah Anda merasa kueri penampung berpotensi untuk membuka lebih banyak kreativitas?
Miriam: Tentu saja, meskipun saya tidak melihatnya sebagai sesuatu yang sepenuhnya terpisah. Kita semua memiliki waktu yang terbatas, dan kita berusaha menulis kode yang mudah dikelola dan berperforma tinggi. Jika sesuatu sulit dilakukan secara praktis, kita cenderung tidak berkreasi dengan apa yang mungkin dilakukan.
Namun, industri web kini didominasi oleh kepentingan perusahaan besar, sehingga masalah bisnis tersebut selalu mendapatkan lebih banyak perhatian daripada seniman web. Dan saya rasa kita akan kehilangan banyak hal jika mengabaikan kreativitas web sebagai kasus penggunaan utama untuk fitur. Saya sangat senang melihat beberapa orang yang membuat seni CSS bermain dengan prototipe kueri penampung. Jhey Tompkins membuat demo tirai venesia CSS yang sangat cerdas dan interaktif sebagai komentar tentang meme anti-CSS lama. Saya rasa ada banyak hal lain yang dapat dijelajahi di ruang tersebut, dan saya tidak sabar untuk melihat ide-ide lain yang akan muncul.
Percakapan ini juga berfokus pada kueri berbasis ukuran, sebagai kasus penggunaan awal, tetapi saya sangat antusias untuk melihat apa yang dilakukan orang dengan kueri gaya–kemampuan untuk menulis gaya bersyarat berdasarkan nilai properti atau variabel CSS. Fitur ini sangat canggih, dan sejauh ini belum banyak dieksplorasi. Saya rasa hal ini membuka lebih banyak peluang kreatif.
Rachel: Apakah ada hal yang tidak dapat kita lakukan (atau akan segera dapat dilakukan) di CSS yang menurut Anda akan berguna?
Miriam: Saya sangat antusias dengan beberapa spesifikasi lain yang sedang saya kerjakan. Lapisan bertingkat akan memberi penulis kontrol lebih besar atas masalah spesifisitas, dan Cakupan akan membantu penargetan selektor yang lebih presisi. Namun, keduanya adalah masalah arsitektur tingkat tinggi. Sebagai seorang seniman, saya lebih bersemangat dengan hal-hal seperti tombol CSS, cara deklaratif untuk membuat gaya interaktif, atau 'linimasa' penampung, yang memungkinkan kita melakukan transisi nilai dengan lancar antara titik henti sementara media atau penampung. Hal ini memiliki implikasi yang sangat praktis untuk tipografi responsif, tetapi juga akan membuka banyak peluang kreatif untuk seni dan animasi responsif.
Rachel: Siapa lagi yang sedang melakukan pekerjaan yang sangat menarik, menyenangkan, atau kreatif di web saat ini?
Miriam: Oh, saya bahkan tidak yakin bagaimana menjawabnya, ada begitu banyak orang yang melakukan pekerjaan kreatif di berbagai bidang. Ada banyak pekerjaan standar menarik yang sedang berlangsung dari CSSWG dan Open-UI, termasuk beberapa pekerjaan Anda terkait fragmentasi. Namun, saya sering kali mendapatkan inspirasi dari seniman web, dan bagaimana orang-orang menggunakan alat ini dalam produksi, dengan cara yang tidak terkait langsung dengan perdagangan. Orang-orang seperti Jhey, atau Lynn Fisher, atau Yuan Chuan, atau banyak orang lain yang mendorong batas kemampuan teknologi web secara visual dan interaktif. Bahkan orang yang melakukan pekerjaan yang lebih berorientasi bisnis dapat belajar banyak dari teknik artistik mereka.
Saya juga mengagumi seni web yang lebih konseptual dari orang-orang seperti Ben Grosser, yang terus mendorong kita untuk mempertimbangkan kembali apa yang kita inginkan dari web, dan khususnya media sosial. Misalnya, lihat minus.social barunya.
Rachel: Ikuti terus karya Miriam di CSS di css.oddbird.net dan cari tahu apa saja yang sedang dikerjakannya melalui situsnya di miriam.codes dan Twitter @TerribleMia.