前回の記事のまとめ

何が起こっているのかを理解するには、前回の記事を読む必要があると思います(少なくとも、すばやくスキャンする必要があります)。

前回の記事では、 CSS Moleculesの方法論を紹介し、それが2 つの対立する方法の間の完璧なバランスであると述べました。これは、一般的にCSS Zen GardenとTailwind CSSによって表されます。

コード スニペットだけでは、方法論と他の方法と比較した利点を明確に示すには不十分であることに気付きました。

したがって、架空のメディア記事のレプリカを作成して、実際のコードを使用することにしました。

次に、他の開発者に同じことをするように招待/挑戦しました。2つの目的を考えていました

1. 相互理解
2. お互いから学ぶ

候補リスト

1. Joana Borges Late (私) — Molecular CSS Science の原則を擁護する
2. ジェイソン ナイト— CSS 禅ガーデン テンプルの旗を掲げる (またはテンプル騎士団を代表する)

オードコンクール

JavaScript で作成したレプリカを見せたい場合、それはオードコンクールとして受け入れられます: コンテストを実際に「論争」するのではなく、あなたの素晴らしいスキルで立派な大衆を驚かせるだけです.

*架空の* 記事 — カーネル

架空の記事がMedium記事ではないことを明確にするために、「Medium」ではなく「Tedium」と表記します。ロゴとファビコンを修正しました。

そのような記事のタイトルとサブタイトルは次のとおりです。

次に、彼女の写真が続きます(現在の記事の冒頭に表示されています)。

その画像の後に、以下に書かれているすべてが続きます(3 つのドット区切りが見つかるまで):

「定義されたラグジュアリー」 — 1996 マキシマ GLE スポーツ セダン

ここでは、ポルトガル語の字幕付きのビデオをご覧いただけます。

実話: 非常に熟練したアート ディレクターがこの驚くべきビデオを作成し、彼の無駄になった古い車のすべての欠陥を、目の前で購入者に有利に変えました! ビデオは世界中で大成功を収めたため、日産はこの車を買い戻すことにしました。

私の祖母は、この取り引きが日産に大きな損害を与えた結果、社長が解雇され、日本政府は彼を汚職容疑で逮捕したと語った。

さらに、私の祖母は再び彼女の深い知恵を示しました：

「非常に才能があり、悪い車を運転していますか？広告でお金を稼ぐ人はいません、私はいつもそれをあなたに言いました！

ヤモリのラブストーリー

ウィリアム・シェイクスピアが死ななかったことを除けば、このビデオの背後にある物語については何も言えません。明らかに、彼は広告業界の脚本家として生計を立てています。

おばあちゃんも何も言えません。彼女はまだ泣いています。私がするように。

ダイアナ・ロス 最後にマペットショーで彼を見た

私のおばあちゃんは、このビデオがエンターテインメント、メロディー、楽しさ、解釈 (人物と人形)、そして知恵/愛/希望 (歌詞に注意してください) のこれまでで最高のブレンドであると固く信じています。

彼女が心の底から感じていることを証言できます。これはこれまでで最高のビデオです。

彼女がしらふのとき。

彼女が飲むとき、彼女はいつもこれを見ています。

ついに

おばあちゃんと私はあなたがそれを楽しんだことを願っています！

*架空の*記事 — 著者、読者、およびそのアバター

*架空の*記事 — 回答

著者への Waldorf CSS Expert: I would like to buy that vehicle .

Gonzo HTML Expert から Waldorf CSS Expert へ:車の状態が良くないようです。

Waldorf CSS Expert の著者:なぜですか? あなたはコレクターですか？

Animal JS Expert から作成者へ:いいえ! 彼はあなたのおばあちゃんを乗り物に連れて行きたいと思っています。

*架空の* 記事 — 提案された記事 (およびそのアイコン)

画面の幅が許す場合：右側に 3 つの記事、下部に 3 つの記事。そうでない場合は、下部の 6 つの記事すべて。

記事 (およびその著者) のリスト:

1. Animal JS Expert による、今日使用すべき 1500 の JavaScript フレームワーク
2. タグの使用をやめると HTML コードがよりクリーンになる理由by Gonzo HTML Expert
3. CSS をたった 5 時間で学び、わずか 5 分でクビになる方法by Waldorf CSS Expert
4. Linus Torvalds が Linux カーネルの記述に JavaScript を選んだ理由: 「Rust には Garbage Collector は付属していません :(」 by Animal JS エキスパート
5. Markdown と Upside Down Markup の微妙な違いby Gonzo HTML Expert
6. CSS は命令型言語ではないので… F#$%K YOU!!! Waldorf CSS エキスパートによる

Medium の記事の Web ページには、いくつかのメニュー/可動部分/フローティング ボックスがあります。

これらの (FIRST DEGREE) パーツのすべてがレプリカに存在し、機能する必要があります。しかし、影響はレプリカの一部ではありません。

たとえば、Medium Web ページの右上隅にある自分のアバターをクリックすると、メニューがポップアップ表示されます。レプリカが実行する必要があるこの動作。ただし、メニュー内のクリックに反応することは、レプリカのタスクではありません。

Web ページは編集できません。ユーザーはそれを読み、返信を書きません。

動く部分はJavaScriptでもOKです。

リソース (フォントと画像)

これは、レプリカの各部分のフォントについて説明している簡単な Web ページです: 色とフォント ファミリー/太さ/スタイル。(パブリック) Google フォントのみを選択しました。

その Web ページには、必要なすべてのアイコンと画像(一部は SVG 形式) が埋め込まれています。

アベイラシエーション

すべてのレプリカは、 W3C バリデーター、PageSpeed Insights、およびLighthouseに対してチェックされます。

レプリカ

理想的には、各候補者は、使用したテクニック/方法を説明する記事と、実行中のレプリカへのリンクを書く必要があります。

リンクができたら、ここにすべてのリンクを掲載します。