最近の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に本当にアクセスしてしまう。なおかつ、セキュリティ
AIでプログラミングが「楽しくなった」人たちと、少し違和感を抱く自分｜magurotuna
最近、SNSを眺めていたり、オンライン・オフライン問わず交流をするような機会で、多くの人がAIの登場をポジティブに受け止めている声を聞く。「開発速度が格段に上がった」「今まで以上にたくさんのものが作れるようになった」「プログラミングがより楽しくなった」。確かにそれは素晴らしいことだと思う。でも、その一方で、なんとなくモヤモヤした気持ちを抱えている自分がいる。 私がソフトウェアエンジニアとして一番達成感を感じるのは、複雑な問題を解決できた時だ。OSSの難しいissueかもしれないし、本番環境で突然発生した謎のエラーかもしれないし、パフォーマンスが劣化した原因を突き止めることかもしれない。なぜこの問題が起きるのか、どこに原因があるのか、仮説を立てて検証を重ねて、ついに問題の本質を突き止めた時の興奮。そして、既存のコードと調和する美しい解決策を思いついた時の満足感。私にとって、プログラミングはパ
星の数による評価 (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属性を、画像の機能を伝えるために利用します。詳細は機能を持つ画像 (英語版)を参照してください。 かつ、画像内のテキスト
Cline利用におけるデータの取り扱いについて - サーバーワークスエンジニアブログ
【2025年5月16日追記】 利用規約について、Cline社からの回答により適用範囲が明確となりました。 以下の記事も合わせてご覧ください。 blog.serverworks.co.jp 【2025年5月16日追記ここまで】 これまでClineに関するブログ記事をいくつか公開し紹介してきました。 今回、利用規約の変更に伴うユーザーデータの取り扱いについて懸念が生じたため、本記事ではClineの利用規約の中でも特に注意すべき点と、弊社の対応についてご説明します。 Cline利用規約の変更点とデータ収集のリスク Clineの利用規約 (https://cline.bot/tos 更新日: 2025年2月24日) を確認すると、ユーザーコンテンツの取り扱いに関する記述が変更されていることがわかります。特に注目すべきは、利用規約の3.2における以下の記述です。 You further grant,
OpenAI、AIコードエディタの「Windsurf」の買収で合意との報道
OpenAIは、生成AIを用いたコーディング支援ツール「Windsurf」の開発元であるWindsurf（旧Codeium）社を買収することで両社がほぼ合意したと、Bloombergが報道しています。 OpenAI has agreed to buy Windsurf, an artificial intelligence-assisted coding tool formerly known as Codeium, for about $3 billion, marking the ChatGPT maker’s largest acquisition to date https://t.co/ZhWgEHGXVc — Bloomberg (@business) May 6, 2025 買収金額は30億ドル（1ドル145円換算で4350億円）で、OpenAIにとって過去最大の買収になると
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
ライセンス条項とお客様のデータ利用について
こんにちは！ 今日はGitHub Japanからのお知らせです。 最近、GitHub Copilotの新機能やアップデートなど、GitHubの新機能を多数リリースしており、パブリックプレビュー版でお使いいただける機能が増えてきたため、ライセンス条項について日本語ブログにてGitHubからご説明します。 TL;DR GitHub CopilotなどGitHub製品のパブリックプレビュー版またはプライベートプレビュー版など、一般提供（GA）開始前の機能を利用していても、お客様のデータはGitHubが製品で使用するLLM（モデル）の学習には使われません。公開されているデータであり、著作権利用の許容範囲内としてGitHub上のパブリックレポジトリー上のソースコードを含むデータは学習に用いられています。 詳しく GitHub プレリリース ライセンス条項にある「4. データの収集と使用」において、「
コード品質向上のテクニック：第60回 出る杭を「ひっぱたく」な
こんにちは。コミュニケーションアプリ「LINE」のモバイルクライアントを開発している石川です。 この記事は、毎週木曜の定期連載 "Weekly Report" 共有の第 60 回です。 LINEヤフー社内には、高い開発生産性を維持するための Review Committee という活動があります。ここで集まった知見を、Weekly Report と称して毎週社内に共有しており、その一部を本ブログ上でも公開しています。（Weekly Report の詳細については、過去の記事一覧を参照してください） 出る杭を「ひっぱたく」な 以下の compressFile 関数は、その名の通り、指定されたファイルを圧縮する関数です。 fun compressFile(...) { try { val workingDirectory = createDirectory(...) val fileToCom
then() を export した結果ｗｗｗ - Object.create(null)
Promise と Thenable Promise が ECMAScript の言語仕様に追加されたのは ES2015 ですが, Promise ライクなオブジェクトはそれ以前からも広く使われてきました (jQuery の Deferred など). そういった Promise ライクなオブジェクトとの互換性のため, Promise の仕様は本物の Promise と Promise ライクなオブジェクトを混ぜて使えるようになっています. 具体的には, Promise ライクなオブジェクトは一般に Thenable という共通のインターフェースを持つことになっています. オブジェクトが Thenable であるために必要なのは「then() という名前のメソッドを持っている」という一点のみです. もし Promise を解決 (resolve) するときに使われた値が Thenable
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2025年のz-index設計を考える
principles-of-web-accessibility/README_ja.md at main · Heydon/principles-of-web-accessibility
Fizz Buzz, Object-Oriented Edition: Exploring the Open/Closed Principle With Polymorphism and Metaprogramming - Kerrick Long's Blog
エンジニアに許された特別な時間の終わり
なぜPHPファイルは <?php が省略できないのか - Qiita