命名、タイル、シンプルさ – Codepen

彼らは言います 「物事を命名するのは難しい」 ol ‘nameを選ぶのが難しいからではなく、便利で長持ちする、意味のある、理解しやすく、深くコミュニケーションのある名前を選ぶのが難しいからです。それを台無しにすると、あなたは自分自身や他の人を不必要に混乱させることができます。

私たちは今、CodePen自体で開発されている自体のサイクルにあります。これは、私たちのためにもうそれをしていないので、大胆にAPI全体とそれらのすべての使用法を大胆に再名称するPRSをレギュラーに見ています。私たちは悪い名前で生きるつもりはありません。

しかし、あなたが名前、または一連の名前のテーマを選ぶことにこだわっているなら、ポール・ロバート・ロイドはあなたの背中をここに持っています。設計システムに取り組んでいますか？多分 アーキテクチャからの名前 インスピレーションになる可能性があります。おそらくあなたのCMSプロジェクトは可能です ジャーナリズムから学ぶ。

あなたが理解できる良い名前、そしてすぐに。 CSSカスタムプロパティの場合、名前を選ぶ以外に選択肢がないので、名前をつけることを考えるのに興味深いスペースです。ジョナサンダラスは素晴らしい仕事をしています。 CSSの命名変数。単独の名前が大丈夫であっても、それはグループとしてOKを読みますか？よりよく読むために再ケースまたは再配置することはできますか？ジョナサンの素晴らしい例：

:root {
  /* Harder to scan: */
  --system-control-accent-color: blue;
  --system-focus-ring-color: cadetBlue;
  --system-label-color-quaternary: lightGray;
  --system-heading-title-font-size: 1.5rem;
  --system-subheading-font-size: 1.2rem;
  --system-caption-font-size: 0.65rem;


  /* Easier to scan: */
  --system-color-controlAccent: blue;
  --system-color-focusRing: cadetBlue;
  --system-color-labelQuaternary: lightGray;
  --system-fontSize-headingTitle: 1.5rem;
  --system-fontSize-subheading: 1.2rem;
  --system-fontSize-caption: 0.65rem;
}

ジョナサンは区別します 記述 名前と 価値ベース 名前。どちらが望ましいとは異なる意見があり、両方を使用すべきだと思う人でさえ（例：値ベースの変数を参照する記述変数）。それは依存します、あなたは言うことができます。

CSSのいくつかの色がすでに名前が付けられていることを知っていると確信しています。ジョナサンは使用します CadetBlue 何度も、これはCSSで完全に有効な色です。しかし、あなたは何がないか知っていますか？ TheSoulOfChris。それは明らかに激しいオレンジ色であるにもかかわらず、その名前はCSSで何もしません。しかし、それを自由に作ってください --system-color-accent。

名前を付けてください 全て 色？ できた 私たちは？ David Aerneは、に基づいてそう考えなければなりません カラー名 プロジェクト。これまでのところ、彼らはRGBで16,777,216色のうち30,200を指定しています。 0.18％。それでも、印象的です（しかし、P3について誰も彼らに話しません）。

Deepak Gulatiを楽しんだ 19世紀の装飾用タイルイラストを21世紀のWebアプリに持ち込む。結果として生じました 小さなアプリ それはタイルの仕組みを示しています。フリップ/ミラーリングされた1つのタイルは、面白いことをすることができます！デザインはクールです！

ここには、私が見たペンの小さな走りで、いくつかの興味深いタイミングがあります。ビデオゲームが非常に奇妙な面白いUIを持っていることを知っていますか？慎重に様式化されたメニューやボタンなどのように。 Baldur’s Gateは古典的な例であり、誰かがCSSでかなり近くで延期する例をいくつか見たので、ある種の挑戦を提案したに違いありません。これらがどのように「コーナーをデザインし、必要に応じて回転/ミラーリングするか」を持っていることを見ている間、あなたは想像できると思います：

アーロン・アイカー：

ニコラス・ジェセンバーガー：

ジェーン・オリ：

あなたが私に尋ねると、彼らは皆それを釘付けにしました！

Webの最高のアニメーションフレームワーク、 GSAP、新たに再設計されたWebサイトがあります。

おめでとうギャング – 素晴らしく見えます！嗅ぎますか Docusaurus それらのドキュメントのフックの下？

私はかつて、抱きしめることについての記事を書きました シンプルで退屈 テクノロジーは、私は同意しますが、それは主にそれらの原則を称賛する他の人々のコレクションでした。それはあなたがあなた自身のために学ばなければならない教訓である傾向があります。十分な期間にわたってテクノロジーに責任を負うことになった場合、それはあなたの背中を持つ最も派手な技術であり、安定していて、メンテナンスが最も少ない傾向があります。したがって、あなたとユーザーの両方を支援します。

ダン・マッキンリーは、これについて素晴らしい話をしています 退屈なテクノロジーを選択してください。いいことは、ダンが私が上で吐き出した種類の漠然とした純粋な模範ではなく、強力な現実世界の例を持っているということです。 Etsyでは、ダンは「アクティビティフィード」に取り組み、スタックにRedisを追加してそれらを処理することを検討しましたが、…

しかし、アクティビティフィードの構築に着手したとき、Redisはありませんでした。私たちはMemcachedをしました。それらは、あなたがそれらに塊を押し込み、同様のAPIでそれを取り戻すことができるという意味で一種の似ています。しかし、それらは非常に異なる保証を持っています。ここで私たちに最も関連する違いは、Redisが持続的であり、Memcachedがはかないものであることです。

つまり、Memcachedでアクティビティフィードを構築したい場合は、余分な作業を行う必要があるということです。 Memcachedがあなたが望む瞬間にあなたのデータを取り除いた可能性に対処する必要があります。

これにより、機能を配信するためのコードを作成する際に、さらに作業が作成されます。しかし、新しい種類のデータベースを操作するための永続的なコストに反して、弾丸を噛んでMemcachedの機能を構築することを決定しました。

次に何が起こったのですか？彼らはテクノロジーについて考えていませんでした 年。結局のところ、機能20x’dの使用と、この機能は非常に安定していて、誰も触れる必要がありませんでした。彼らがスタックに新しいテクノロジーを追加した場合、それは起こりますか。ダンの答えは明確です：いいえ。

今年初めに、デイブ・ルパートは、退屈性について守備設計システムのかなり具体的な美徳について話しました。潜在的な属性を約20枚リストした後 コンポーネント、彼は言う：

このコンポーネントは、著者がサポートするコンテンツの順列に対して防御的に設計および構築する必要があります。かつて謙虚な視覚的なディスプレイコンポーネントだったものは、現在コンテンツの主力です。どのコンポーネントも、無数のルールと要件で満たされた小さなマシンになる可能性があります。多目的コンポーネントになるための重力があります。

これらすべての複雑さは、コンテンツのすべての可能な順列に対して平均化して、コンポーネントを当たり障りのない防御デザインに向けて希釈します。ユーティリティが上がると、そうです 設計システムの退屈さ。そして、それは良いことかもしれません！

設計システムの退屈さ

色のコントラストは、全体としてWebサイトの主要なアクセシビリティ障害の1つです。幸いなことに、自動テストで障害を検出するのはかなり簡単です。確かに、それらを修正することは、仕事を少し退屈にすることができます。私はここでマグナスランドのポイントを取ります： コントラストは退屈です – 他の誰かがそれをすることはできませんか？

あなたのウェブサイトに十分なコントラストを持つことは、特にあなたのサイトが複数の背景色を使用している場合、非常に重要ですが、それでも非常に退屈なものの1つです。

マグナスは面白いものです。彼は「他の人間が私の仕事をしてください」と言っているのではなく、彼は私たちがより自動的に正しいことをするのに役立ついくつかの新しいCSSテクノロジーを導入しています。

.text {
  background: var(--bg-color);
  color: color-contrast(var(--bg-color) vs navy, lightseagreen to AA););
}

ドラフト仕様と初期のフラグ付き実装がありますが、残念ながらまだ急いで使用することはありません。私は大ファンです。私はあなたが常にこの関数を与えているデザインシステムから色のリストを持っているというアイデアが好きで、それはに応じて最高のものを選ぶでしょう どれでも 変更されたとしても、背景色があります。それは良いことです。

ルークプラントのシンプルさのアイデアに関するもう少し最近の投稿で終わります。

もちろん、私たちは皆、複雑さを嫌うと主張していますが、実際には私たちが嫌いな他の人々によって追加されたのは単なる複雑さです。私たち自身のバグベアは常に免除されており、私たちが理解するために、私たちはすぐに他の人に潜在的な問題があることさえ見ることができません。

誰も実際にシンプルさを望んでいません