Webサイト、ハイライト、推測 – Codepen

私はヘンリーのガイドが大好きです： ウェブサイトの作り方。

貴重な小さなものがあります 最近の ウェブの原材料だけを使用して、完全に優れたウェブサイトであるWebサイトを構築する方法に関する教育資料。 生 HTML＆CSS、そのまま。しかし、それがヘンリーのガイドについてではありません。 Webデザインをはるかに超えている全体的なアドバイスに満ちています：

あなたが人々と仕事をしているとき、親切で好奇心and盛で謙虚になり、彼らの間違いをさらに寛容にしてください。だから、あなたが自分で作ることが必然的に来るとき、おそらくあなたのために金庫にいくつかの善意があります。

🙏

私はあなたが認識の欠如だけではないのではないかと疑っています できる 手書きの生のhtmlとcssだけでウェブサイトを構築しますが、もっと それでは何？ 状況。もちろん、Codepenはそれが良い選択肢であり、それを毎日より良くするために取り組んでいる場所であることを望んでいます。しかし、その地元で作成されたHTML WebサイトをVercel、Netlify、GitHubページなどのような実際のWebサイトに届けるためのオプションがたくさんあります。 Webサイトを制作するためのDevOpsの知識が、実際にWebサイトを作成するのと同じくらいの知識がある場合、それは残念です。

ああ、これは私にロブ・オーウェンによって捨てられた素晴らしい用語を考えさせます： ハンドスローフロントエンド。 彼は、粘土からボウルを作る陶器のプロセスとウェブサイト制作のプロセスを比較しています。

だから、私にとって、 フロントエンド ボウルメイキングプロセスは、周期的で非線形のプロセスです。表面レベルでは、おそらくレゴのレンガを組み立てるのと同じくらい効率的ではないように思われますが、時間の経過とともに、より多くのボウルを作り、スキルが習得に向かって増加するにつれて反復の各段階が徐々に短くなります。

それが私の芸術学士が大学で焦点を合わせていたので、私は良い陶器の類推の吸盤です。

おお！そして、陶器といえば、シャーロット・ダンを見たことがありますか 陶器 プロジェクト？それはおそらく私が今まで見た私のお気に入りの生成アートプロジェクトです。この表面は完全にコード生成されています：

Oooooo Tricky CSS Challenge！ 歪んだハイライト。 Vadim Makeevはうまくやった：

あなたは思うだろう transform: skew() どういうわけか関与するでしょうが、特に任意のラインブレークなどでは、そのための素晴らしい機会はありません。代わりに、背景は複数の勾配の背景（超賢い）で作成され、幸いなことに box-decoration-break: clone; ライン全体で合理的に見えるようにします。

CSSセレクター構造のわずかな変化と、それが選択にどのように影響するかについて考えていますか？ そのパーティーにサインアップしてください！ ブラモは比較します：

.a .b .c { }
/* Versus! */
.a :is(.b .c) { }

彼らは同様に見え、振る舞いますが、前者は「CはBの子はAの子です」状況をしっかりと施行していますが、後者はCがbの子であるAの子である状況を可能にします。それは言葉で理解するのが難しすぎるので、ここにイメージがあります：

確かに私は手を伸ばしません :is() それはすべてですが、ネイティブCSSネスティングがここにあり、すべてのネストされたセレクターがシンボルから始まる必要があるので、使用が少し上がるかもしれないと思います。したがって、要素セレクターをネストしたいという簡単な方法は、 :is()：

header {
  h1 { } /* nope */
}

header {
  :is(h1) { } /* yup */
}

今後の技術トレンドを楽しみにしている開発者の小さなコレクションで終わりましょう。もちろん、これは人気があります 1月 そしてそれはそうです 行進 今、しかし、私は時々少し遅いです。