カテゴリー
UIデザイン

#HEXWORDS – 16進カラーコードで「意味のある単語」をまとめたサイト

HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。

#3C3

#BD2031

16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE)

これに、0から9までの数字を似た形のアルファベットに見立てて英文を読みにくくし、仲間うちだけで通じるようにする リートスピーク(leetspeek) を組み合わせると、6桁の色コードの中に英単語として読めてしまうものの数がぐっと増えてきます。

この英単語として読めてしまうような16進コードを集めたのが#HEXWORDSというサイト。

#HEXWORDS トップ

サイトには検索機能もあり、使いたい色コードを入れて、その色に近いもので英単語っぽいものを列挙してくれます。

#HEXWORD の検索例

Hacker Newsのスレッドでは、「認識できる英単語と、その16進コードが表示する色の間に関係があるものがあるのでは?」という問いかけが出て、何人もの人がそれっぽいコードを発見・披露しています。

#C0A575 (COASTS, 海岸 – 砂っぽい色?)

#5A6E57 (SAGEST, セージの葉 – 葉っぱの色)

#CABB1E (CABBIE, キャブ – イエローキャブタクシーの色)

このサイトは英単語を列挙していますが、ローマ字で日本語として意味を成すものも探せば日本語版を作ることもできそうですね。

Webサイトのソースコード中に含まれる色のコード、一般的には意識することもないと思います。

なのでこのサイトの実用性はそれほどないでしょうけれど、何か平凡なwebページの中に隠れた情報を埋め込んでおき、色コードを登場順に読んでいくと文章が浮かび上がって情報を伝える、みたいなお遊びをするときに役立つかもしれません。

via Hacker News

カテゴリー
fun

Game of Codes – プログラミングツールやライブラリの勢力を表した架空の世界地図

Game of Codes は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。

フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。

React が帝国であるのに対し、Angular, Vue, jQuery が王国、Svelte が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。

各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。

2015年版の地図 と比べると、6年間でも勢力が変化していますね。Ember とか Backbone とか、そんなのあったなあ、という感じです。

CSSフレームワークについても同じような架空地図が公開されています。

昔、SNSの勢力図で似たようなものがありました。地図の形にすることで詳しくない人に大雑把な関係性が伝えられる場合もあるでしょう。

SNSの勢力図

via Product Hunt

カテゴリー
ツール

正しい(イギリス)英語でCSSが書けるプラグイン

jevakallio/css-properly は、正しい英語でCSSを書くことができるPortCSSのプラグインです。

CSS の整形やトランスパイルを行う PortCSS にこのプラグインを入れて呼び出すことで、以下のように


.foo {
colour: black;
background-colour: lightgrey;
text-align: centre;
}

色指定を”colour”、中央寄せを”centre”などと、「正しい」英語で書いても、”color”, “center” など、正しくないけどなぜか受け入れられる文字列に修正してくれます。

他にも、あなたの大好きなクマ padding-ton(パディントン)を padding-top に、表記は変わりませんがゼットインデックス(z-index)をズィーインデックス(z-index)に、など直してくれます。ラブリーですね!