最近のHTMLを改めてちゃんと学んでみた
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
【海外記事紹介】AIがオープンソース開発者の生産性を下げてしまった理由は「メンタルモデル」にあり — 「『汚物を撒き散らす』ようなシチュエーションならAIは有効」
7月15日、John Whilesが「AI slows down open source developers. Peter Naur can teach us why.」と題した記事を公開した。この記事では、AIコーディングツールが熟練オープンソース開発者の生産性を19％低下させた理由を、「メンタルモデル」という視点から解き明かしている。以下に、その内容を紹介する。 研究結果――「速くなる」と信じた開発者ほど遅くなる現実 Metrの論文によれば、被験者となった経験豊富なOSS開発者は、AIツールの使用を許可された課題で平均19％長く作業時間を要した。開発者は事前に「24％高速化する」と予測し、実験後も「20％は速くなった」と誤認したままだった。 When developers are allowed to use AI tools, they take 19% longer to com
【海外記事紹介】「AIがコーディングを速める」は思い込み？「20%速くなったと思ったら19%遅くなっていた」という研究結果が話題に
以下に、その内容を紹介する。 METRの無作為化比較試験の概要 非営利研究団体 Model Evaluation & Threat Research（METR）は、16 名の熟練オープンソース開発者を対象に、実際のバグ修正や新機能実装など計 246 件の課題を処理させる実験を実施した。 各課題は「AIツール使用可」または「使用不可」に無作為に割り当てられ、 開発者は自ら選んだ生成AI支援環境（主に Cursor Pro＋Claude 3.5/3.7 Sonnet）を利用した。作業期間は 2025 年2 月から6 月にわたる。 期待と現実のギャップ 開発者は事前に「AIで24 %高速化できる」と予測した。 実際には 19 %の遅延 が発生し、完了後の自己評価でも「20 %短縮できたはずだ」と誤認していた。 つまり、体感と計測結果が真逆になった。 なぜ遅くなったのか――5 つの要因 AI有用性
HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになります
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
テスト用に適当なドメインを注入したいときは .invalid を使うとよさそう - Lambdaカクテル
tl;dr foobarhogehoge.invalidは絶対にリクエストが飛ばないのでおすすめ あらすじ 書いていたコードは、とあるミドルウェア向けに内部利用するURLを環境変数で受け取るようになっていた。普段は実際の内部のURLが書かれているのだが、テスト時には以下のようにダミーを設定していた: FOOBAR_EXTERNAL_URL="https://example.com/foobardummy" テストではこのURLを利用しないのだが、内部で環境変数のバリデーションを行っている都合上、とりあえず適当なURLを指定しなければ起動してくれないから、こうなっていた。重ねて言うが、実際はこの環境変数を利用していないのでこれでいい。 しかしこれだと、うっかり内部の様子がおかしくなったりエンジニアが狂ってしまった場合に、example.comに本当にアクセスしてしまう。なおかつ、セキュリティ
星の数による評価 (star rating) のアクセシビリティ | Accessible & Usable
公開日 : 2025年6月13日 (2025年6月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ EC サイトやクチコミなどで、商品やサービスに対するユーザー評価を、星の数で示すユーザーインターフェース (UI) があります。端的な日本語表現はなさそうですが、英語では「star rating」と言うようです。 白地の背景に黄色い星印という外観が一般的ですが、それだとコントラストが低すぎて (特にロービジョンや高齢者などにとって) 星が視認しにくい可能性があります。こうした問題をはじめ、星の数による評価 (star rating) の UI は、アクセシビリティがおざなりにされることが少なくないように (実際に EC サイトなどのアクセシビリティ診断をしていて) 感じます。 この記事では、星の数による評価 (star rating) をアクセシブルにする方法について、解
altディシジョンツリー
About this translation ボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。 翻訳者 Hiroya UGA. 寄稿者 Naoki Nakamura. WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します その画像はテキストを含んでいますか？ Yes: かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストが視覚効果のためだけに表示されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストがアイコンなど特定の機能を持つ場合 alt属性を、画像の機能を伝えるために利用します。詳細は機能を持つ画像 (英語版)を参照してください。 かつ、画像内のテキスト
CSS Variablesはここまで進化した | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables（CSS変数）は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに
Default styles for h1 elements are changing | MDN Blog
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
Linus Torvalds氏、Rustからの使用を拒否することはできないとカーネルメンテナの役割を明言 | ソフトアンテナ
ホームソフトウェアLinus Torvalds氏、Rustからの使用を拒否することはできないとカーネルメンテナの役割を明言 Linuxカーネルメーリングリストでは、カーネル内でのプログラミング言語「Rust」の使用に関し、活発な議論が続いています。 Linuxの生みの親であるLinus Torvalds氏はこれまで、Rust使用に関するLKMLでの議論にほとんど参加せず、静観する立場をとってきましたが、ついにこの議論に口を挟むことを決めたようです(Phoronix)。 Linus氏は、数日前、メンテナの反対を押し切って、Rustコードをカーネルにマージすると「プライベートで」発言したと報じられていましたが、今回は、Rust反対派のChristoph Hellwig氏への返信の中で、メンテナは、「カーネル内で自身が管理する領域における Rust バインディングに積極的に関与するか、あるいは一
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 | レバテックラボ（レバテックLAB）
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主
ペアプロが嫌すぎて会社を退職した話 - Qiita
ペアプロ・モブプロアンケート結果発表 🎉 ペアプロに対するエンジニアの本音が分かります。こちらもオススメです。 はじめに 巷ではペアプロ、モブプロがホットワードになっており、あたかも開発生産性を向上する特効薬のように取り上げられている印象を受けます。一方、この記事では、ペアプロ、モブプロ開発のネガティブな部分を考え、私の経験から感じたペアプロ、モブプロのアンチパターンとその改善策をご紹介します。 どんなアンチパターンを踏んでいたのか？ 勤務時間は100%ペアプロを実施（ソロプロ禁止） ソロプロは悪、ペアプロが最高というチームの雰囲気 フロー効率を過度に重視する姿勢 どうなったか？ ＋) 開発生産性およびデプロイ頻度は上がった ＋) 4keysなどの数値上の指標はすべてプラスになった －) エンジニアとしての楽しさ、個性が抑制された －) 精神的な負担が蓄積し、最終的には退職に至った 学び
type=”email”は使わない方が良いんじゃないか（ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検証が古いのでやめた方がよくないですか……。 デモ： https://codepen.io/ginpei/pen/dPbWQKB @ だけ見るのが良いのでは 先に結論なんですけど、もう基本は試しにメールを送って届いたら OK くらいのつもりが良いんじゃないのと思います。とはいえ入力内容は @ の有無くらいは見ておくと、爆速コピペでつい他の項目を入力してしまった際に気付けるかもしれません。 というわけでこれでどうですか。 メールアドレスの検証 メールアドレスの書式って実はだいぶ心が広くて、意外な文字や記号が利用可能だったりします。@ の右側もドットなしの localhost とか IP ア
Open UI コミュニティグループについて調べた
Open UI はW3Cのコミュニティグループの一つ 以下の文章は上記サイトに書いてあることをまとめたもの 発足背景 WHATワーキンググループは、多数のWebサイトで見られる最も一般的なパターンをHTML自体で体系化する取り組みに着手した。 それにより、Web開発者がHTMLを使用するだけでリッチなフォームを実装できるようになった。 しかし、それらの最後の大幅な改定から15年以上経過し、現在のWebアプリケーションはより多くの複雑なインターフェースを提供するようになった。 したがって、HTMLをもう一度最新化し、今日のWebサイトのUIの最も一般的なパターンを作成するために必要な技術を標準化する時期が来ている。 目標 Web開発者が最新のカスタムなUIを作成するためには、どのようにHTML・CSS・JS・Web APIを組み合わせればいいかについて、構築計画を立てること 標準そのものを定
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are
Batsを使ってシェルスクリプトをテストする
はじめに この記事はシェルスクリプト＆PowerShell Advent Calendar 2024の12日目として書かれています。 概要 BatsはBash用のテストフレームワークです。 何らかのプログラミング言語で書くまででもない簡単なスクリプトを書こうと思った際に、とはいえテストが欲しいと思って見つけたのがBatsでした。 今回は簡単なBatsのテストコードの紹介をします。 書いたコードはここに置いています。 今回使用したbatsコマンドはHomebrewで入れており、バージョンは1.11.0です。 シンプルなテストコード Batsのテストコードはシェルスクリプトとは別のファイルに書き、batsコマンドでそのファイルを実行することでテストを実行できます。 テストケースは@test "test case name" のように書けます。 #!/usr/bin/env bats @test
バグの重さを定量化したら話が早い - Qiita
バグ管理にまつわる困りごと 検出したバグを報告したは良いけど、その先の判断が役割によって意見が割れることってよくありますよね！ 優先度が高いと思ってたのに、「このフェーズでは対応しない」ってなっちゃった…大丈夫かな？？ 「ユーザーさんが困るのでは」って訴えたけど、本当にそうかな？？ そもそも、QAチームで検出したこのバグ、プロジェクトにとってどの程度のインパクトになるんだろう？？ バグが溜まりすぎてどこから修正すればいいか分からない！ こうなる原因は、プロジェクトや製品にとって何が大事なのか「認識が合っていないこと」です。 もっと深掘りすると品質の曖昧さ（主観的で相対的で変化する）が要因なのですが、それはまたいずれ別の記事で（書けたら書く）。 そして、この認識を揃えるためには手間ヒマをかけたチームビルディングが必要だったりします。 ……とはいえ、いま困ってるんだよなぁ。という過去の自分にオ
フォーム全体を非活性化（ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2025年のz-index設計を考える
principles-of-web-accessibility/README_ja.md at main · Heydon/principles-of-web-accessibility
