u-sho🐾

フロントエンドエンジニアあかうんと。フォロバ◎
公式ドキュメントが好き👀

[u-sho🐾 @u_sho_engineer]

ソフトウェアが速くなるだけで改善されるものってたくさんあるにゃ

[u-sho🐾 @u_sho_engineer]

SVGのminifyツール作ってみたいにゃんけど、結構大変だにゃあ

[u-sho🐾 @u_sho_engineer]

MとLが交互に出てくるタイプのパスコマンド群を圧縮して8分の5倍くらいの長さになったにゃ！

[u-sho🐾 @u_sho_engineer]

SVGのパスコマンドを圧縮しようとして軽い気持ちでプログラムを組みはじめてみましたが、これ単純な拡大縮小や並行移動、絶対パス相対パスの比較を除くとTSPにゃんですね
たまたま頂点数が16くらいなので動的計画法を使えばできそうですが、一般化できないのは残念ですにゃ

[MDN Web Docs @MozDevNet]

🆕 Introducing the MDN MCP server!

Bring MDN's docs and browser compat data straight into your AI agent or IDE for accurate, up-to-date answers about the web platform.

No more outdated guesses from training data.

Learn more 👇
https://t.co/yMeR7tVwkM

[u-sho🐾 @u_sho_engineer]

MDNにMCPサーバー来てたんだにゃ👀

https://t.co/RB8DffM6hO

[u-sho🐾 @u_sho_engineer]

コントラスト比が低いところだけ簡単に取得できたんだにゃあ〜
Devtoolsって便利にゃ https://t.co/zvnTAq8tTN

[u-sho🐾 @u_sho_engineer]

👀 svelte.config.jsファイルが必要なくなってそうだにゃ
https://t.co/3upv6fG1PZ

[u-sho🐾 @u_sho_engineer]

網羅的ですごく使いやすそうですにゃ(*^^*)
お恥ずかしながらGrid周りやmin-block-size, min-inline-sizeは存じ上げなかったので勉強になりましたにゃ

[鹿野 壮 Takeshi Kano @tonkotsuboy_com]

本日二本目の記事を出しました🌻
Googleのリリースした「Modern Web Guidance」は、モダンCSSのDos / Don'ts（やるべきこと・やっちゃいけないこと）の宝庫です。CSSにしぼってまとめたらとても勉強になりました。知ってることも多いですが、「Googleがこう言ってるから」というのは大きな判断基準になりますね🤗
たとえば…
- 全幅レイアウトに 100vw を使うな、100dvwを使え
- * { margin: 0 } のグローバルリセットは使うな
- 詳細度管理のためにBEMを使うな、@ layer や @ where() を使え
- 操作対象の最小サイズは24px, 24pxだが、そのサイズ指定にwidth, heightを使うな、min-block-size, min-inline-sizeを使え
- 親の見た目を変えるためにJavaScriptでクラスを付け外しするな、:has()を使え
- フォーカスリングは:focusではなく:focus-visibleを使え

https://t.co/fanJVFsS3q

#イマドキCSS

[u-sho🐾 @u_sho_engineer]

👀

[鹿野 壮 Takeshi Kano @tonkotsuboy_com]

新しい記事を書きました💐
AIエージェントにフロントエンドのコードを書かせると、一昔前の書き方になり困ったことがありませんか？私は！ありまぁす！
Google I/Oで発表された「Modern Web Guidance」のスキルならClaude Code等が最新のCSS・JS・アクセシビリティまで押さえたコードを書けるように。フロントエンド開発するなら、ぜひ導入したいスキルです。
https://t.co/mw5SKI5eJJ
#イマドキCSS #イマドキJS

[リンゴマン @ringo2999]

Linux Mint の国内ミラーリポジトリーに JAIST のサーバーを指定していたのですが、今朝は通信エラーが出たので山形大学のサーバーにバトンタッチ。

JAIST は 16 日（土）23 時 30 分までサービス停止だそうです。

[u-sho🐾 @u_sho_engineer]

<dialog>タグ周りは本当に便利になりましたにゃんね〜

[池田 泰延 @clockmaker]

HTMLの<dialog>タグの開閉モーションは、CSSの@​starting-styleとallow-discreteでやるのがオススメ。

サポートブラウザ的にもBaseline 2024 Availableです。

従来の実装方法（JSを絡めて自前で開閉モーション）は複雑でしたので、CSSでやれば圧倒的に楽になります。

[Фабон (ふぁぼん) @syobon_hinata]

Temporalのpolyfillをゼロから実装した｜ふぁぼん https://t.co/UzFKkEmuh6 #zenn

[shinobe179 @shinobe179]

GitHubのドキュメントには「ローテで解決するものは別に消さなくてよくない？」とあり、僕たちを冷静にさせてくれる
https://t.co/naMorPxD2W

[ymrl @ymrl]

機微情報をGitHubに置いてはいけないのは当然として、もし置いてしまったときに何をするべきなのか、メルカリでの実例と解説が公開されているので、この機会にあらためて読んでおくといいと思う。rebaseして --forceつきでpushだけじゃ足りないのよ。
https://t.co/ZOJmPUIhW4

[u-sho🐾 @u_sho_engineer]

いったんVite+で急場を凌いでいますにゃ
mise, aubeも試したいですね

[u-sho🐾 @u_sho_engineer]

Voltaは好きなツールにゃのですが、メンテナンスが終了しているの気づきませんでした T^T
次のNode.jsメジャーアップデートまでにはツール移行しますにゃん......

[u-sho🐾 @u_sho_engineer]

@EmposyOtsuyama そうですにゃ
オンボーディングでも、実装でもレビューでもテストでも、折に触れて選定の背景とそれに沿ったやり方を伝えて実践していきたいですね🐈‍⬛

[u-sho🐾 @u_sho_engineer]

なぜその技術選定をしたかを常に意識しながらコーディングしにゃいと、技術選定の意味がなくなってしまうにゃ

[u-sho🐾 @u_sho_engineer]

Laravelの最新版でログイン機能のない簡易CRUDアプリを作りたいのですが、laravel new meow-appするとno starter kitを選択しても認証関連のコードが着いてきちゃいますね......
にゃん

[かみくず @p_craft]

世界中のWebフロントエンドエンジニアに届いてほしいのですが

keydownイベントでEnterキーを待ち受けてサブミットを行う機能を作るとき、KeyboardEvent.isComposingを参照してください。そうしないと日本人ユーザーがまともに使えなくなります。
詳しくはこちらを。
https://t.co/Vx0PbtZqmb