1
なぜか日本であまり話題になっていないが、マジでヤバいノーコード・ローコードツール。UI も使いやすいうえ (個人的に Webflow や STUDIO より断然使いやすい) 、HTML/React/Vue などのエクスポートも可能。逆に日本で流行らないでくれ。
TeleportHQ teleporthq.io
2
Google Fonts で、たとえば数字のみ Roboto を使いたい場合、フォントリクエスト URL に text=0123456789 のように指定することで、無駄な文字データをダウンロードせずに済みます。使う文字が決まっているあるいは限定的な場合は最適化しましょう。
詳細についてはこちら developers.google.com/fonts/docs/css…
3
いいのができました！たとえば幅320pxでは32px、960pxでは48pxにフォントサイズを流動的に変化させたいとき、この320、32、960、48を CSS カスタムプロパティに設定するだけで自動的に計算してくれるものを作りました。さらに、最小最大値のありなしも指定可能。Sass、JS 不要、CSS のみ。
4
今日の HTML マークアップでは、© のように実体参照で書く必要はほとんどないですよというお話。
5
6
なにこれすごい。ピクセルアートを描いていくと 3D CSS を生成してくれるツール。
VoCSSels - Easily create 3D CSS & HTML Voxel Models codepen.io/jcoulterdesign…
7
VS Code に移行した当初、気に入ったテーマがなくて自作してずっと使ってたんですが、ついに Marketplace に公開しました！ミニマル、フラット、Monokai カラースキーム！よかった使ってください！
KTRZ Monokai - Cool minimal flat VS Code dark theme ixkaito.github.io/ktrz-monokai/
8
ここ何年か僕が使ってる独自のグリッドシステム。960グリッドシステムの20pxのガターはちょっと狭すぎるし要素幅を10px、20px変えるとグリッドから大きく逸脱します。そこでカラムもガターも40px。というよりもガターかどうかもあまり関係ない。最近流行りのブロークングリッドにも対応しやすい！
9
おそらく即出ですが、何度注意喚起してもいいと思います。
イラストレーター上のベクターデータをコピーしてほかのツールにペーストするとき、パスが荒れることがあります。
それはイラストレーターで SVG 保存時の「小数点以下の桁数」設定が低いことが関係している可能性が高いです。
10
文字に座布団を敷くデザインを CSS で実装するとき、それぞれの行を span などで囲んで padding を設定すれば簡単に再現できますが、CMS やレスポンシブ対応などで改行を制御できない場合は困ることがあると思います。実は box-decoration-break: clone; を利用すればいい感じにできます。
11
やっとキテレツのロゴマークからできた KTRZ フォントを公開しました！オープンソースで完全無料です！可読性は皆無なのでブランドサイトを参考に使っていただければと思います！
KTRZ Font - Free minimal geometric font ixkaito.github.io/ktrz-font/
12
rem か px か、html { font-size: 62.5%; } は OK か NG か、まとめて検証してみました。
結論：みんなウェブをよくしようとしてるのでどれでもいいと思います。プロジェクトやチームでルールを設ければ。
じゃ僕はどれかというと、シンプルに px を使います。
デモを上げてますのでぜひご自身で→
13
めちゃくちゃオススメの Helvetica / Roboto ライクのフォントです！オープンソース！バリアブル！18スタイル！数字と大文字のコンテキストでの記号の縦位置の自動調整などの豊富な機能！しかもつい先日 Google Fonts でも使えるようになりました！
Inter font family rsms.me/inter/ twitter.com/rsms/status/12…
14
遅延読み込みの loading="lazy" が HTML 標準になりました。Edge も Chromium ベースになったことですし、JS による画像の遅延読み込みは今すぐやめてこちらにしたほうがいいと思います。
ちなみに WordPress コアも対応することを検討しております。 twitter.com/webcreinfo/sta…
15
しばらくログインしていないアプリにログインしようとするとき、以前どのログイン方法を使っていたのか忘れているだろうから、最後に使ったログイン方法をわかるようにしておくと UX 的にいいよね、というお話。 twitter.com/Leandro8209/st…
株式会社キテレツ代表 / デザイナー / フルスタック開発者 / WordPress, Rails, React コントリビュータ / Open-sourcer: wocker.dev, ixkaito.github.io/ktrz-font, ixkaito.github.io/ktrz-monokai