はてなブックマーク

パスキーは、ログイン エクスペリエンスを変革し、パスワードに代わる、よりシンプルで高速かつ安全な方法を提供するように設計されています。このチェックリストでは、パスキーを実装して最適なユーザー エクスペリエンス(UX)を実現するための主な要素について説明します。 このチェックリストの使用方法 このチェックリストは、認証フローにパスキーを実装するデベロッパーとプロダクト チームを対象としています。適した用途: 実装が、以下の記事で説明されている最新のパスキーの UX のベスト プラクティスに準拠していることを確認します。 ユーザビリティ、セキュリティ、互換性を向上させる必須要素とオプション要素を特定します。 開発中とデプロイ前に実装を確認します。 ユーザーの採用とシステムの相互運用性をサポートするベスト プラクティスに沿って設計します。 これにより、エンドユーザーにスムーズで安全なエクスペリエ

JavaScript に依存するサイトを構築する際に、送信したコンテンツに対して、簡単には確認できない方法で料金が発生することがあります。この記事では、モバイル デバイスでサイトをすばやく読み込み、操作できるようにするために、少しの規律が役立つ理由について説明します。配信する JavaScript を減らすと、ネットワーク転送時間、コードの解凍時間、JavaScript の解析とコンパイル時間が短縮されます。 ネットワーク ほとんどのデベロッパーは、JavaScript のコストについて考えるとき、ダウンロードと実行のコストについて考えます。ワイヤーを介して送信する JavaScript バイト数が多いほど、ユーザーの接続が遅くなると時間がかかるようになります。 ユーザーの有効なネットワーク接続タイプが実際には 3G、4G、Wi-Fi ではない可能性があるため、これは問題になる可能性があり

Published: March 18, 2025 Polyfills have long been a part of the web developer experience, as they attempt to provide support for web features that aren't supported in all browsers. It would seem that polyfills are an indispensable tool in the web developer's toolkit, but it's nearly impossible to distill such a complex area of concern into a single, definitive statement. Knowing when to use a pol

Published: March 12, 2025, Last updated: March 26, 2025 ESLint has long been the preferred linter for JavaScript, offering a variety of settings and rules that help developers enforce good style for JavaScript in their projects. Recently, ESLint shipped support for linting CSS in projects, offering additional rules for checking aspects of stylesheets. As a part of launching CSS support, ESLint now

公開日: 2025 年 2 月 7 日 2024 年 4 月に、このサイトの投稿で、Popover API がベースラインで新しく利用可能になったことが発表されました。ただし、誤りがあり、ポップオーバーは 2025 年 1 月 27 日よりベースラインに移行されます。この記事では、誤った判断をした理由と、このような誤りが起こりにくくするためにその後に行われた変更について説明します。 Popover API とは何ですか? Popover API には、ウェブ アプリケーションで使用されるさまざまなタイプのポップオーバーを作成するための組み込みの方法が用意されています。これまでは、JavaScript を使用して、ユーザー アクセスが可能な方法で実装する必要がありました。この API を使用すると、ブラウザにこれらすべてを導入できます。また、HTML で宣言的にシンプルなポップオーバーを作成

Published: February 7, 2025 In April 2024, a post on this site announced that the Popover API was Baseline Newly available. However, we got it wrong, and popover enters Baseline as of January 27, 2025. This post explains why we got it wrong, and what has changed since to make these mistakes less likely to happen. What's the Popover API? The Popover API provides a built-in way to create various typ

公開日: 2025 年 1 月 31 日 ブラウザで、フロントエンドだけでなくバックエンドも含めて、完全に機能するブログを実行するとします。サーバーやクラウドは不要です。必要なのは、ユーザー、ブラウザ、WebAssembly だけです。WebAssembly は、サーバーサイド フレームワークをローカルで実行できるようにすることで、従来のウェブ開発の境界を曖昧にし、新しい可能性を開いています。この投稿では、Vladimir Dementyev(Evil Martians のバックエンド ヘッド)が、Ruby on Rails を Wasm とブラウザに対応させるための進捗状況を共有します。 15 分で Rails をブラウザに導入する方法。 Rails の wasm 化の裏側。 Rails と Wasm の将来。 Ruby on Rails の有名な「15 分でブログ」がブラウザで実行可能

Published: Feb 1, 2025 With the scrollbar-color property you can change the colors used for scrollbars. You can specify the color of the thumb and the color track with it. Using scrollbar-width you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability. Learn more about scrollbars and how to style them in scrollbar styling.

Published: January 31, 2025 Imagine running a fully functional blog in your browser—not just the frontend, but the backend, too. No servers or clouds involved—just you, your browser, and... WebAssembly! By allowing server-side frameworks to run locally, WebAssembly is blurring the boundaries of classic web development and opening up exciting new possibilities. In this post, Vladimir Dementyev (Head

Published: October 23, 2024 In this post, learn how you can use the new <baseline-status> web component on your own site, and the Baseline logos in presentations, whenever you write or talk about web platform features. Most developers have had the experience of searching for a solution to a web development problem, finding an article that describes the perfect solution, then realizing right at the

base64 encoding and decoding is a common form of transforming binary content to be represented as web-safe text. It's used commonly for data URLs, such as inline images. What happens when you apply base64 encoding and decoding to strings in JavaScript? This post explores the nuances and common pitfalls to avoid. btoa() and atob() The core functions to base64 encode and decode in JavaScript are bto

Web Platform Dive into the web platform, at your pace.

Published: Oct 2, 2024 When starting to use a new CSS feature it's important to understand its impact on the performance of your websites, whether positive or negative. With @property now in Baseline this post explores its performance impact, and things you can do to help prevent negative impact. Benchmarking the performance of CSS with PerfTestRunner To benchmark the performance of CSS we built t

ブロック レイアウトとテーブル レイアウトで、CSS Box Alignment の align-content プロパティを使用できるようになりました。これにより、フレキシブル レイアウトやグリッド レイアウトを作成しなくても、ブロックの方向を揃えることができます。 アイテムを垂直方向に中央揃えする、以前は不可能だったタスクが、フレックスボックスとグリッドと align-content プロパティを使用することで簡単になりました。しかし、この位置揃えを行う以外の目的では、フレックスまたはグリッドのレイアウトを作成する必要がありました。このプロパティはブロック レイアウトに対して指定されており、ここ数か月で 3 つの主要エンジンすべてにこの機能がリリースされています。 ブロック レイアウトで align-content を使用すると、プロパティを機能させるためにフレックス レイアウトまたは

For this post, we used data from page navigations with a subresource image LCP in Chrome to take a look at the LCP subparts. We've looked at this kind of data before, but never from field data to see where real users are spending their time while waiting for a page's LCP. Like with Core Web Vitals, we took the 75th percentile (p75) of each LCP subpart for each origin in the CrUX dataset, resulting

The post four new CSS features for entry and exit effects shared some useful features that had just landed in Chrome. Now, two of these features, @starting-style and transition-behavior: allow-discrete have become Baseline Newly available with the release of Firefox 129. You can now create entry animation effects for elements, including those animating from display: none, and animating into the to

公開日: 2024 年 7 月 12 日 CSS のパワーアップに備えましょう。CSS Houdini 傘下の API の一部である @property ルールが、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ(CSS 変数)の制御と柔軟性が飛躍的に向上し、スタイルシートをよりスマートで動的なものにすることができます。 @property のメリット 意味: @property を使用して、カスタム プロパティの型(構文)を定義します。これにより、カスタム プロパティが保持するデータの種類(色、長さ、数値など)をブラウザに伝え、予期しない結果を防ぎ、グラデーションのアニメーション化などの新しい可能性をサポートできます。 代替値: スタイルが消えることはありません。@property を使用して、カスタム プロパティの初期値を

Published: July 12, 2024 Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (also known as CSS variables), making your stylesheets smarter and more dynamic. The benefits of @property Semantic meaning: Use @pro

Today that score is 90, with a score for stable browsers of 85 as of the release of Chrome 126 in June. The overall experimental interop score has risen 10 points, and this post shares some of the features that have contributed to that score. Popover Popover became part of Baseline Newly available in April 2024. Popover is exciting because so many of the UI features you need to build—for example,

この記事では、ウェブサイトの保護に使用できる最も重要なセキュリティ ヘッダーについて説明します。ウェブベースのセキュリティ機能の理解、ウェブサイトへの実装方法の学習、リマインダーが必要な場合の参照として使用してください。 機密性の高いユーザーデータを扱うウェブサイトに推奨されるセキュリティ ヘッダー: コンテンツ セキュリティ ポリシー(CSP) 信頼できる型 すべてのウェブサイトに推奨されるセキュリティ ヘッダー: X-Content-Type-Options X-Frame-Options Cross-Origin Resource Policy(CORP) Cross-Origin Opener Policy(COOP) HTTP Strict Transport Security(HSTS) 高度な機能を備えたウェブサイトのセキュリティ ヘッダー: クロスオリジン リソース シェア

最近、Chris Coyier 氏は、 コンテナクエリがすべてのブラウザ エンジンでサポートされるようになった今、開発者がコンテナクエリを使用する機会が増えないのはなぜでしょうか。 Chris の投稿には考えられるさまざまな理由が挙げられています(意識の欠如、古い習慣が困難になるなど)が、際立った特に理由があります。 今はコンテナクエリを使用したいが、古いブラウザをサポートする必要があるためできないと考えているデベロッパーもいます。 タイトルから推測できるように、古いブラウザをサポートする必要がある場合でも、ほとんどのデベロッパーは本番環境でコンテナクエリをすぐに使用できると考えています。この投稿では、そのためにおすすめのアプローチについて説明します。 実際的なアプローチ 現時点でコンテナクエリをコードで使用するものの、すべてのブラウザで同じエクスペリエンスを表示したい場合は、コンテナクエ

Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there's one particular reason that stands out. Some developers say they want to use container queries now but think they can't

Google スプレッドシートは、Chrome で WasmGC を使用する Google の最初のプロダクトの一つです。この移行は 2022 年に発表されました。スプレッドシート チームと Chrome チームは、標準化、エンジニアリング、ツールの面で連携し、最適化に関するリアルタイムのフィードバックを提供することができました。このパートナーシップは、Google のエンジニアリング チームが Chrome と効果的に連携して、より多くの Google アプリを WasmGC で実行できるようにするための先例となりました。 課題: JavaScript Google スプレッドシートの計算エンジンは、もともと Java で記述され、2006 年にリリースされました。サービス初期の頃は、すべての計算がサーバーで行われていました。ただし、2013 年以降、このエンジンは JavaScript

Google Sheets is one of the first products at Google to use WasmGC on Chrome. The move was announced in 2022, and the Sheets and Chrome teams partnered on standardization, engineering, and tooling to provide real-time feedback on optimizations. This partnership set a precedent for how engineering teams at Google can effectively work with Chrome to have more Google apps running on WasmGC. The chall

Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように

Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にします。 ベースラインでは、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を確認できます。記事を読んだり、プロジェクト用のライブラリを選択したりする際に、使用される機能がすべてベースラインに含まれている場合は、ブラウザの互換性レベルを信頼できます。

本日は、web.dev に関する最新のコースをご紹介します。Learn JavaScript は、Mat Marquis が作成した新しいコースで、最新の JavaScript について詳しく説明しています。既存のコース、特に「HTML、CSS を学ぶ」の基礎コースと合わせてご利用ください。 web.dev の他のすべてのコースと同様に、コースを最初から最後まで学習する必要はありません。仕様をブラッシュアップするだけの参考資料としてご利用いただけます。 リンクする資料は、他の記事の背景情報としても使用します。 JavaScript の学習がお役に立てば幸いです。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Develop

Web Platform Dive into the web platform, at your pace.