Merangkum artikel sebelumnya

Saya benar-benar berpikir bahwa Anda harus membaca artikel sebelumnya (setidaknya, lakukan pemindaian cepat) untuk memahami apa yang sedang terjadi.

Artikel sebelumnya memperkenalkan metodologi Molekul CSS , yang menyatakan bahwa ini adalah keseimbangan sempurna antara dua cara antagonis — biasanya diwakili oleh CSS Zen Garden dan Tailwind CSS .

Saya menyadari bahwa cuplikan kode tidak cukup untuk memaparkan metodologi dan kelebihannya dengan jelas dibandingkan dengan yang lain.

Oleh karena itu, saya memutuskan untuk menggunakan cara kode yang sebenarnya, membuat replika artikel Medium imajiner.

Kemudian saya mengundang/menantang pengembang lain untuk melakukan hal yang sama. Saya memiliki dua tujuan dalam pikiran

1. mengerti satu sama lain
2. belajar dari satu sama lain

Daftar pesaing

1. Joana Borges Late (saya) — membela prinsip-prinsip Ilmu CSS Molekuler
2. Jason Knight — membawa panji CSS Zen Garden Temple (atau mewakili Ksatria Templar)

Hors-Concours

Jika Anda ingin menunjukkan replika buatan JavaScript Anda, itu akan diterima sebagai Hors-Concours: tidak benar-benar "menyengketakan" kontes - hanya memukau publik terhormat dengan keahlian Anda yang luar biasa.

Artikel *imajiner* — kernel

Untuk memperjelas bahwa artikel imajiner bukanlah artikel Medium, kami akan menulis "Tedium", bukan "Medium". Dan saya telah memodifikasi logo dan favicon.

Judul dan subjudul dari artikel tersebut adalah sebagai berikut:

Kemudian muncul GAMBARnya (ditampilkan di awal artikel saat ini).

Gambar itu diikuti oleh semua yang tertulis di bawah ini (SAMPAI ANDA MENEMUKAN PEMISAH TITIK TIGA):

“Kemewahan Terdefinisi” — Sedan Sport Maxima GLE 1996

Di sini Anda menemukan video dengan terjemahan dalam bahasa Portugis .

Kisah nyata: Seorang direktur seni yang sangat terampil membuat video LUAR BIASA ini mengubah semua cacat mobil tuanya yang terbuang menjadi keuntungan bagi pembeli, tepat di depan mata Anda! Video tersebut sukses besar di seluruh dunia sehingga Nissan memutuskan untuk membeli kembali mobil tersebut.

Nenek saya memberi tahu saya bahwa kesepakatan ini sangat merugikan Nissan sehingga presidennya dipecat dan pemerintah Jepang menangkapnya atas tuduhan korupsi .

Selanjutnya, nenek saya sekali lagi menunjukkan kebijaksanaannya yang mendalam:

“Sangat berbakat dan mengendarai mobil yang buruk? Tidak ada yang menghasilkan uang dari iklan, saya selalu mengatakan itu kepada Anda!”

Kisah Cinta Tokek

Saya tidak bisa mengatakan apa-apa tentang kisah di balik video ini, kecuali bahwa William Shakespeare tidak pernah mati. Jelas, dia mencari nafkah sebagai penulis naskah untuk industri periklanan.

Nenek saya juga tidak bisa berkata apa-apa. Dia masih menangis. Seperti yang saya lakukan.

DIANA ROSS Terakhir Kali Aku Melihatnya di The Muppet Show

Nenek saya sangat percaya bahwa video ini adalah perpaduan terbaik antara hiburan, melodi, kesenangan, interpretasi (manusia dan boneka) dan kebijaksanaan/cinta/harapan (perhatikan liriknya).

Saya dapat bersaksi bahwa dia benar-benar merasa, dari lubuk hatinya, ini adalah video terbaik yang pernah ada.

Saat dia sadar.

Saat dia minum, dia selalu menonton yang ini .

Akhirnya

Nenek saya dan saya harap Anda menikmatinya!

Artikel *imajiner* — penulis, pembaca, dan avatar mereka

Artikel *imajiner* — tanggapan

Pakar CSS Waldorf untuk penulis: Saya ingin membeli mobil itu .

Pakar HTML Gonzo hingga Pakar CSS Waldorf: Mobil tampaknya tidak dalam kondisi baik .

Penulis untuk Pakar CSS Waldorf: Mengapa? Apakah Anda seorang kolektor ?

Pakar Animal JS untuk penulis: TIDAK! DIA INGIN MEMBAWA NENEKMU BERKENDARA HAHAHAHAHAHA !

Artikel *imajiner* — artikel yang disarankan (dan ikonnya)

Bila lebar layar memungkinkan: 3 artikel di sisi kanan dan 3 artikel di bawah. Bila tidak, semua 6 artikel di bagian bawah.

Daftar artikel (dan penulisnya):

1. 1500 Kerangka JavaScript yang Harus Anda Gunakan Hari Ini oleh Animal JS Expert
2. Mengapa Berhenti Menggunakan Tag Akan Membuat Kode HTML Anda Jauh Lebih Bersih oleh Pakar HTML Gonzo
3. Cara Belajar CSS HANYA dalam 5 Jam dan Dipecat HANYA dalam 5 Menit oleh Waldorf CSS Expert
4. Mengapa Linus Torvalds Memilih JavaScript untuk Menulis Kernel Linux: “ Karat tidak datang dengan Garbage Collector :( “ oleh pakar Animal JS
5. Perbedaan Halus Antara Markdown & Upside Down Markup oleh Gonzo HTML Expert
6. CSS BUKAN Bahasa Imperatif, jadi… F#$%K YOU!!! oleh Pakar CSS Waldorf

Halaman web artikel Medium memiliki beberapa menu/bagian bergerak/kotak mengambang.

Semua bagian (GELAR PERTAMA) itu harus ada dalam replika dan karya. Tetapi konsekuensinya BUKAN bagian dari replika.

Misalnya, ketika saya mengklik avatar saya di pojok kanan atas halaman web Medium, sebuah menu akan muncul. Perilaku ini harus dilakukan oleh replika. Tetapi bereaksi terhadap klik di dalam menu bukanlah tugas replika.

Halaman web tidak dapat diedit. Pengguna membacanya, tidak menulis balasan.

JavaScript dapat diterima untuk bagian yang bergerak.

Sumber daya (font dan gambar)

Berikut ini adalah halaman web sederhana yang menceritakan tentang font dari setiap bagian replika: warna dan font family/weight/style. Saya hanya memilih font Google (publik).

Halaman web itu menyematkan semua ikon dan gambar yang diperlukan (beberapa dalam format SVG).

Avaliasi

Semua replika akan diperiksa terhadap validator W3C , PageSpeed ​​Insights , dan Lighthouse .

Replika

Idealnya, setiap peserta harus menulis artikel yang menjelaskan teknik/metode yang dia gunakan, ditambah tautan ke replika yang sedang berjalan.

Saya akan memposting semua tautan di sini ketika saya memilikinya.