Penyerahan saya untuk Cabaran Frontend (Dis&#

Ini adalah penyerahan untuk Cabaran Frontend - Edisi Disember, Glam Up My Markup: Winter Solstice

Apa yang Saya Bina

Tapak web disiarkan secara langsung di sini: https://plutonium-239.github.io/dev.to-frontend-challenge/
Matlamat saya adalah untuk menjadikan HTML biasa yang diberikan lebih interaktif ?, cantik ? dan berguna?. Saya melakukan ini dengan menambah penggayaan yang konsisten pada semua bahagian, menyerlahkan istilah penting untuk memahami kandungan dengan lebih cepat sambil juga menambahkan lebih kontras. Saya juga mengoptimumkan tapak untuk reka letak mudah alih dan walaupun ia menampilkan kurang interaksi, tapak ini juga bertemakan baik dan berguna.

Demo

Kod sumber tersedia secara terbuka di https://github.com/plutonium-239/dev.to-frontend-challenge

Perjalanan

Tema/CSS

Saya mahu pergi dengan tema langit malam kerana Solstis Musim Sejuk menyebabkan Hemisfera Utara mengalami hari terpendek dalam setahun. Jadi, saya teringat zarah rakan lama kita.js. Kecuali sekarang ia telah berubah menjadi tsParticles dengan sekumpulan pembetulan kebocoran memori, pengoptimuman dan penulisan semula dalam skrip taip. Ini membentuk latar belakang halaman. Saya mengkonfigurasinya supaya tidak mengganggu sambil juga kelihatan meriah dan menyenangkan dari segi estetika. Mendapatkan persediaan ini adalah satu kesakitan yang tidak saya jangkakan. Versi terkini mempunyai tsparticles.bundle.js yang sepatutnya menjadi semua yang anda perlukan dan mengeksport global supaya anda boleh bermula dalam satu baris, tetapi itu tidak berlaku. Saya cuba memanggilnya secara manual semasa menggunakan tsparticles.engine.js tetapi tidak berjaya. Ini mengalami kekurangan dokumentasi yang berguna. Saya juga mencuba versi slim yang mempunyai satu contoh penggunaan tetapi ia tidak berfungsi. Saya cuba hanya menggantikan versi dengan versi yang lebih lama (kerana yang saya perlukan kebanyakannya adalah tingkah laku asas dan bukan ciri-cirinya yang lebih baharu) dan mendapat emas dengan 1.43.1. Anda menjangkakan mengikuti arahan dalam readme akan membolehkan anda menyiarkannya, tetapi ini tidak benar di sini.

Memilih skema warna adalah satu kebetulan yang lucu. Saya telah melihat tangkapan skrin siaran tumblr/meme dan sangat menyukai warna di dalamnya. Saya benar-benar mencari imej beresolusi tinggi melalui Google Lens dan mengekstrak warnanya. Ini memberikan saya 3 warna asas (permukaan, utama, aktif). Untuk warna lain, saya mahu salah satu daripadanya berwarna merah-merah jambu dan satu berwarna kehijauan/pirus. Saya memilih beberapa warna dalam julat ini dan memadankan naungan supaya ia selaras dengan palet warna semasa. Saya belajar tentang alatan hebat seperti Colormind untuk mencuba palet warna alternatif.

Mengenai tipografi, saya sudah lama mengetahui tentang fon Readex Pro, dan saya sangat menyukainya. Ia berfungsi dengan baik sebagai fon paparan untuk tajuk dan juga sebagai fon asas untuk teks biasa. Saya telah mencuba beberapa yang lain (Noto, Raleway) tetapi akhirnya menggunakan Readex Pro. Saya juga pernah terfikir untuk menggunakan fon monospace untuk semua teks, tetapi kandungan pada halaman ini tidak serasi dengan penggayaan itu.

Seterusnya, untuk animasi dipacu tatal! Saya telah mahu menggunakannya dalam laman web sebenar untuk beberapa waktu sekarang, dan saya memasukkannya dalam TOC dan tajuk. Terdapat beberapa isu dengan Firefox (masih) tidak menyokong julat animasi (dan animasi dipacu tatal sendiri dilumpuhkan secara lalai di belakang bendera¹), jadi saya terpaksa melaksanakan penggodaman -ish fix (tetapi anda masih perlu mendayakan bendera).

Kandungan/HTML (melalui JS)/CSS

Untuk kandungan, saya melakukan ini dalam dua cara:

1. Menambahkan sorotan pada teks melalui JS - pada asasnya diperlukan untuk menggantikan innerHTML yang terasa buruk, tetapi tidak dapat mengubah suai HTML adalah agak mengehadkan. Saya juga telah menambah imej pada pengenalan menggunakan JS dengan memasukkan elemen. Saya melakukan ini kerana saya ingin menambahkan sedikit kesan pudar padanya. Pada mulanya, saya telah melakukan ini melalui latar belakang CSS pada bahagian ::after, tetapi menjadikan pudar menjadi konsisten (iaitu tepi atas imej tidak kelihatan tajam) merentas pelbagai saiz desktop dan mudah alih ternyata mustahil. Jadi, saya terpaksa menambah elemen baharu dalam bahagian itu, dan kemudian menggayakan elemen pseudo ::selepas terhad kepada imej itu sendiri - yang berfungsi dengan baik.
2. Menambah imej pada perayaan melalui CSS - Untuk setiap daripada empat perayaan, saya dapati gambar yang sesuai melalui pelbagai sumber (dikreditkan) dan menambahkannya melalui elemen pseudo. Saya memberi mereka gaya paralaks yang bagus dan juga menambahkan imej penuh tayangan pada interaksi tuding. Kerana kepelbagaian imej, saya melakukan yang terbaik untuk mencari yang beresolusi tinggi dan kemudian mengubah saiznya untuk mempunyai lebar seragam 800px menggunakan ImageMagick. Saya melaksanakan ini dengan cara yang bijak menggunakan kelas .celebration untuk mentakrifkan rangka kerja dan menggunakan pembolehubah CSS untuk setiap perayaan tertentu untuk menentukan URL imej (dan teks kredit).

Untuk halaman tradisi, saya menukar penanda senarai kepada (dan belajar cara menggunakan) gaya @kaunter tersuai - ini adalah ciri yang cukup bagus!

Interaksi: Saya menambah penunjuk skrol dalam TOC menggunakan IntersectionObserver API. Ini agak mudah: semak persimpangan, tetapkan kelas dan itu sahaja!

Terdapat juga kesan lekukan pada item senarai perayaan, yang mendedahkan keseluruhan imej masing-masing. Saya melakukan ini melalui CSS dengan menetapkan imej sebagai kandungan ::after dan menjadikannya kelihatan pada tuding.

?Saya mungkin juga telah menambah rahsia kecil yang menarik di penghujung halaman?

Ini menggunakan API Kanvas dan pendengar tatal. Ia kelihatan agak menarik, tetapi saya tidak 100% pasti sama ada ia sesuai dengan penggayaan yang lain.

Kesimpulan

Saya bukan pereka UI/webdev mengikut profesion. Sebenarnya, saya seorang penyelidik ML. Tetapi saya telah mereka apl/tapak web dan saya suka menjadi kreatif!

Jadi, apabila saya melihat siaran cabaran, saya fikir ia menarik tetapi saya tidak fikir saya akan mengambilnya terlalu serius. Walau bagaimanapun, secara kebetulan saya melihat tangkapan skrin yang dibincangkan di atas, dan tapak web menggunakan kesan particles.js lama, dan kedua-duanya mesti telah mengklik pada satu ketika. Panggil itu keajaiban Krismas! ?

Saya tidak benar-benar memikirkan apa-apa langkah masa depan, saya rasa saya telah melakukan apa yang saya rancang untuk lakukan dan banyak lagi.

Mengulas beberapa penyerahan orang lain, saya rasa tidak begitu jelas bahawa HTML tidak boleh diedit secara langsung. Saya telah mengikuti peraturan yang ditetapkan ini dan hanya menambah teg skrip dan teg pautan untuk CSS - tanpa mengedit mana-mana kandungan markup sebenar.

Kod ini tersedia di bawah Lesen MIT.

---

1. Untuk sesiapa sahaja di pelayar berasaskan firefox/(cth. Zen), hidupkan layout.css.scroll-driven-animations.enabled in about:config ↩

Atas ialah kandungan terperinci Penyerahan saya untuk Cabaran Frontend (Dis&#. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!