Hello world: bagaimana saya membuat website

Bagaimana semuanya dimulai

Pada tahun 2018, saya perlu memperbarui situs portofolio saya (seperti yang biasa dilakukan desainer). Saya pikir saya akan menjauhi tren saat ini dan membangun situs yang memanfaatkan estetika Cyberpunk tahun 80an dan 90an. Genrenya berisi beberapa film favorit saya seperti Ghost in the Shell (1995), The Matrix (1999), dan Akira (1988). Di situlah saya meminjam beberapa motif visual seperti huruf katakana tebal di beranda dan efek decoding teks sebagai penghormatan kepada efek "Hujan digital" Matrix, yang terinspirasi oleh kredit pembuka Ghost in the Shell. Bahkan ada referensi ke Ghost in the Shell di halaman 404 saya.

Iterasi pertama

Saya mempelajari React saat pertama kali membuat situs web ini, dan meskipun berlebihan untuk situs portofolio pribadi, ini merupakan kesempatan bagus untuk belajar dan bereksperimen dengan mempelajarinya. Saya telah menemukan cara terbaik untuk belajar adalah dengan benar-benar membuat sesuatu yang ingin Anda gunakan dan kirimkan.

Pilihan yang tepat pada saat itu adalah Create React App. Ini sangat membantu saya dalam menyiapkan dan menjalankan sesuatu tanpa harus repot dengan konfigurasi. Selain itu, saya menggunakan Styled Components, Tween.js, dan React Transition Group. Saya juga bermain dengan beberapa efek awal Three.js seperti perpindahan bola yang masih berada di beranda.

Sejak itu saya menggunakan situs web ini sebagai tempat bermain untuk bereksperimen dengan teknologi dan teknik baru, jadi seiring berjalannya waktu saya telah merombak hampir semuanya. Perubahan besar dalam prosesnya adalah mengganti gambar karya saya dalam mockup statis dengan perangkat 3D interaktif yang dirender secara real-time menggunakan model yang saya buat untuk Clay Mockups 3D Figma.

Bermigrasi ke Next.js

Dengan Create React App saya menggunakan paket yang agak tersendat-sendat dan tidak terawat untuk melakukan pra-render situs sebagai HTML statis di Puppeteer. Sebagian besar ini berfungsi dengan baik, tetapi saya menginginkan solusi yang lebih kuat untuk memposting artikel (seperti yang sedang Anda baca ini) menggunakan MDX. Saya memiliki versi setengah matang dari ini yang tidak aktif di repo, tetapi rasanya tidak pernah cukup baik untuk dipublikasikan. Saya melihat beberapa opsi seperti Gatsby, Vite, dan Parcel, dan Remix, namun Next.js menonjol sebagai yang paling sesuai dengan kebutuhan saya.

• Situs ini sekarang berbasis Next.js. Jauh lebih cocok daripada Create React App. Untuk saat ini saya hanya menggunakannya untuk membuat ekspor statis, tapi mungkin saya akan menambahkan beberapa hal yang dirender server di masa mendatang.
• Penataan gaya sekarang menjadi CSS vanilla dengan postcss untuk menambahkan dukungan untuk fitur sarang CSS asli dan kueri media khusus di masa mendatang. Saya menggunakan modul CSS alih-alih sintaks BEM untuk menghindari konflik gaya.
• Untuk menghasilkan halaman dari file .mdx, saya menggunakan Kent C Dodds mdx-bundler. Dikombinasikan dengan Next.js, pembuatan halaman dari file .mdx menjadi sangat cepat dan sederhana.
• Untuk animasi saya telah berpindah dari Tween.js dan React Transition Group ke Framer Motion saja.
• Efek 3D semuanya masih menggunakan Three.js, tetapi saya telah menambahkan three-stdlib sebagai pengganti modul yang lebih terawat dari contoh Three.

Tidak semuanya berjalan mulus

Secara umum, migrasi berjalan lancar. Cara saya menyusun situs dengan React Router cocok untuk menyesuaikan dengan perutean berbasis file Next.js, dan saya sudah menggunakan postcss untuk penataan gaya. Namun saya menemui beberapa masalah:

1. Route transisi

Ada sedikit konflik dalam transisi rute animasi. Next.js akan segera mencabut semua gaya untuk halaman sebelumnya saat menavigasi ke halaman baru. Ini berfungsi dengan baik ketika Anda tidak melakukan animasi antar halaman karena ini membersihkan semua bentuk gaya yang tidak terpakai yang ada. Saat Anda menganimasikan transisi halaman, tiba-tiba halaman sebelumnya menjadi sangat tidak bergaya saat transisi keluar. Masalah ini salah satunya yang paling banyak berkomentar dan bereaksi terhadap masalah pada repo Next.js, semoga segera ada perbaikan, tetapi untuk saat ini saya telah melakukan peretasan untuk memperbaiki berbagai hal dari komentar masalah tersebut.

2. Perputaran Restorasi

Agak terkait dengan transisi rute, saya harus memilih untuk tidak ikut restorasi gulir Next.js dan browser asli untuk mencegah browser segera menggulir ke atas ketika halaman mulai bertransisi keluar. Next.js juga tampaknya tidak menangani peralihan fokus saat menautkan ke id elemen di dalam halaman, jadi saya menambahkannya untuk aksesibilitas.

Melihat kedepan dan kebelakang

Cukup menarik melihat betapa populernya situs ini di Github, dengan 500 bintang (saat postingan ini ditulis). Menarik juga melihat bagaimana orang menyesuaikannya dengan gaya mereka sendiri dan memodifikasinya, yang merupakan salah satu alasan saya menjadikannya open source. Saya ingin orang lain dapat membongkarnya dan melihat cara pembuatannya, belajar darinya, dan memperbaikinya. Seperti itulah tampilan elemen inspeksi di web, tetapi dengan situs modern yang mengkompilasi dan mengecilkan serta memasukkan string yang kacau ke dalam kelas css, hal itu tidak sesederhana saat ini. Hal terbaik berikutnya yang dapat saya lakukan adalah menjadikannya open source.

Saya berharap untuk terus menggunakan situs ini sebagai taman bermain, dan akan menarik untuk membandingkan iterasi berikutnya dengan keadaan saat ini.

Update: Feb 2024

Saya baru-baru ini memigrasikan situs ke Remix karena mereka mendapat dukungan yang baik untuk modul CSS yang berarti saya tidak perlu mengonversi semua gaya saya. Itu sebagian besar merupakan proses menghapus semua peretasan yang disebutkan di atas dalam posting ini, dan semuanya berfungsi dan terasa lebih "standar web". Saya sekarang menggunakan API transisi tampilan CSS untuk menangani crossfading dengan lancar pada transisi rute, yang merupakan fitur yang dimasukkan ke dalam React Router (dan sebagai hasilnya Remix). Saya tidak perlu melakukan peretasan javascript yang aneh untuk mencoba dan menyetel tema yang benar (yang pasti akan menghasilkan sekilas konten yang tidak terlacak)

• Saya sekarang menyimpan tema pilihan dalam cookie sesi yang membuat Remix sangat mudah dilakukan.

Secara keseluruhan saya sangat senang dengan Remix, sangat merekomendasikannya. Saya pada akhirnya ingin mengganti banyak animasi yang dipicu oleh Javascript dengan API CSS animasi berbasis gulir yang akan datang, tetapi dukungan browser belum tersedia, jadi mungkin sekitar akhir tahun ini.