Logical layout enhancements with flow-relative shorthands Stay organized with collections Save and categorize content based on your preferences. Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have
Alignment using the first and last keywords is now available in all major engines. This means that we can use last baseline alignment as another option when aligning groups of flex or grid items. First baseline alignment If you set the value of align-items to baseline, the result will be first baseline alignment. Therefore the first baseline of the item you are aligning (described as the alignment
Optimizing Web Vitals using Lighthouse Stay organized with collections Save and categorize content based on your preferences. Today, we'll cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your site can improve on the Web Vitals. As a refresher on the tools, Lighthouse is an open-source, automated tool for improving the quality of web pages. You can find it in t
Building a Settings component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a settings component of sliders and checkboxes. In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If you prefer
The nuances of base64 encoding strings in JavaScript Stay organized with collections Save and categorize content based on your preferences. 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 po
Google スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google スプレッドシートは、Chrome で WasmGC を使用する Google 初のプロダクトの 1 つです。この移行は 2022 年に発表され、Google スプレッドシートと Chrome のチームは標準化、エンジニアリング、ツールに関して連携し、最適化に関するフィードバックをリアルタイムで提供しました。このパートナーシップは、Google のエンジニアリング チームが Chrome を効果的に連携させ、より多くの Google アプリを WasmGC で実行できるようにする前例となります。 課題: JavaScript Google スプレッドシートの計算エンジンは元々 Java で記述
A higher contrast ratio is scored with a higher number, like 4.5 or 7 instead of 3. To get more familiar with the scoring table, check out Polypane's Contrast Checker. Which of these color pairings do you feel contrast more? Testing contrast between colors So, now that we know what we’re looking for, how do we test this? Here are three free tools to assist you in inspecting, correcting and measuri
The end of Internet Explorer Stay organized with collections Save and categorize content based on your preferences. What ending support for Internet Explorer meant for the customers and developers at Maersk.com. I'm Steve Workman and I'm the Lead Engineer for Maersk.com. Maersk is the global leader in integrated supply chain logistics, helping customers to move goods around the world for 118 years
Let's take a closer look at the strategies and learn the meaning behind their names. Determine testing goals: What do you want to achieve with these tests? Before you can start building a good strategy, figure out your testing goal. When do you consider that your application has been sufficiently tested? Achieving high test coverage is often viewed as the ultimate goal for developers when it comes
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate the
Custom metrics Stay organized with collections Save and categorize content based on your preferences. There's a lot of value in having user-centric metrics that you can measure, universally, on any given website. These metrics let you: Understand how real users experience the web as a whole. Compare your site to a competitor's. Track useful and actionable data in your analytics tools without needi
Interop 2022: end of year update Stay organized with collections Save and categorize content based on your preferences. We've reached the end of another year, and it's time to look at the improvements made by browsers as we work together to improve the interoperability of the web platform. You can check out how things started in our post in March this year, as the initiative was launched. The scor
Yahoo! JAPAN は、検索、ニュース、e コマース、メールなどのサービスを提供している日本の大手メディア企業である LY コーポレーションの一員です。5,500 万人を超えるユーザーが Yahoo!JAPAN のサービスを毎月ご利用いただけます。 e コマースやその他の金銭関連サービスを提供しているため、アカウントのセキュリティが最優先です。セキュリティを強化するため、Yahoo!JAPAN は 2017 年以降、ユーザーのパスワードレス認証への移行を進めています。これには、SMS 認証、パスワード無効化機能、パスキーの導入などが含まれていました。この記事では、Yahoo!JAPAN は、パスキーのユーザー エクスペリエンスと導入率の改善における実績とアプローチを打ち出しています。 パスワードレス認証で成功 パスワードレス認証への移行により、ログイン ID やパスワードの忘れた問い
Economic Times quest for fixing INP Stay organized with collections Save and categorize content based on your preferences. Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews. Interaction to Next Paint (INP) is a metric that assesses a website's responsiveness to user inp
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
Fill OTP forms within cross-origin iframes with WebOTP API Stay organized with collections Save and categorize content based on your preferences. SMS OTPs (one-time passwords) are commonly used to verify phone numbers, for example as a second step in authentication, or to verify payments on the web. However, switching between the browser and the SMS app, to copy-paste or manually enter the OTP mak
この記事では、保護するために使用できる最も重要なセキュリティ ヘッダーについて説明します。 測定しますウェブベースのセキュリティ機能を理解し、 ウェブサイトに実装し、リマインダーが必要なときの参考にしてください。 ユーザーの機密情報を扱うウェブサイトに推奨されるセキュリティ ヘッダー: コンテンツ セキュリティ ポリシー（CSP） Trusted Types すべてのウェブサイトで推奨されるセキュリティ ヘッダー: X-Content-Type-Options X-Frame-Options クロスオリジン リソース ポリシー（CORP） クロスオリジン オープナー ポリシー（COOP） HTTP Strict Transport Security（HSTS） 高度な機能を持つウェブサイトのセキュリティ ヘッダー: クロスオリジン リソース シェアリング（CORS） クロスオリジン エンベ
最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 Array.prototype.with()。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 115 <ph type="x-smartling-placeholder"></ph> 16 ソース この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value)
The business impact of Core Web Vitals Stay organized with collections Save and categorize content based on your preferences. This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already see positive impact for their users and business. Are you struggling to convince your stakeholders to adopt Core Web Vitals? O
Monitor your web page's total memory usage with measureUserAgentSpecificMemory() Stay organized with collections Save and categorize content based on your preferences. Learn how to measure memory usage of your web page in production to detect regressions. Browsers manage the memory of web pages automatically. Whenever a web page creates an object, the browser allocates a chunk of memory "under the
Workers overview Stay organized with collections Save and categorize content based on your preferences. How web workers and service workers can improve the performance of your site, and when to use a web worker versus a service worker. This overview explains how web workers and service workers can improve the performance of your website, and when to use a web worker versus a service worker. Check
Building multiple Progressive Web Apps on the same domain Stay organized with collections Save and categorize content based on your preferences. How to build multiple PWAs, taking advantage of the same domain name, to make the user aware that they belong to the same organization or service. In the Progressive Web Apps in multi-origin sites blog post, Demian discussed the challenges that sites buil
Web Vitals コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブに関する指標とは、ウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠なウェブページ品質シグナルに関する統一されたガイダンスを提供する Google の取り組みです。このツールの目的は、利用可能なさまざまなパフォーマンス測定ツールを簡素化し、サイト所有者が最も重要な指標である Core Web Vitals に集中できるようにすることです。 Core Web Vitals Core Web Vitals は Web Vitals のサブセットであり、すべてのウェブページに適用されます。すべてのサイト所有者が測定する必要があり、すべての Google ツールに表示されます。Core Web Vitals は、それぞれユーザー エクスペリエンスの個別の側面を表し、現場で測定
Three common types of test automation Stay organized with collections Save and categorize content based on your preferences. Let's start with the basics! Exploring the two general testing modes and three common types of test automation. We've all been there: what is a recurring coding meme that happens all too often in real life? This meme sums it up quite nicely: each drawer works perfectly well
Building a PWA at Google, part 1 Stay organized with collections Save and categorize content based on your preferences. This is the first of a series of blog posts about the lessons that the Google Bulletin team learned while building an external-facing PWA. In these posts we'll share some of the challenges we faced, the approaches we took to overcome them, and general advice for avoiding pitfalls
Changes to the web.dev infrastructure Stay organized with collections Save and categorize content based on your preferences. Hello, Paul here. I wanted to share some news with you about this site. I've taken the decision to move from a GitHub hosted version of the CMS to infrastructure that's shared across a number of different teams in Google. This will have an impact on how people contribute to
Defining test cases and priorities Stay organized with collections Save and categorize content based on your preferences. In the previous post, you learned about testing strategies, the number of tests needed to test an application, and how to find the best fit to gain the most confidence in the results while bearing in mind your resources. However, this only gives us an idea of how much to test.
How Mercado Libre optimized for Web Vitals (TBT/FID) Stay organized with collections Save and categorize content based on your preferences. Optimizing interactivity of product details pages for a 90% reduction in Max Potential FID in Lighthouse and a 9% improvement in FID in Chrome User Experience Report. Mercado Libre is the largest e-commerce and payments ecosystem in Latin America. It is presen
Optimize WebFont loading and rendering Stay organized with collections Save and categorize content based on your preferences. A "full" WebFont that includes all stylistic variants, which you may not need, plus all the glyphs, which may go unused, can easily result in a multi-megabyte download. In this post you will find out how to optimize loading of WebFonts so visitors only download what they wi
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts Stay organized with collections Save and categorize content based on your preferences. Starting in Chrome 83, link rel="preload" and font-display: optional can be combined to remove layout jank completely By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Comb
Don't fight the browser preload scanner Stay organized with collections Save and categorize content based on your preferences. Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way. One overlooked aspect of optimizing page speed involves knowing a bit about browser internals. Browsers make certain optimizations to improve performance in ways th
Cross-Origin Resource Sharing (CORS) Stay organized with collections Save and categorize content based on your preferences. The browser's same-origin policy blocks reading a resource from a different origin. This mechanism stops malicious sites from reading other sites' data, but it also prevents legitimate uses. Modern web apps often want to get resources from a different origin, for example, ret
Code splitting with dynamic imports in Next.js Stay organized with collections Save and categorize content based on your preferences. How to speed up your Next.js app with code splitting and smart loading strategies. What will you learn? This post explains different types of code splitting and how to use dynamic imports to speed up your Next.js apps. Route-based and component-based code splitting
Chrome and Firefox soon to reach major version 100 Stay organized with collections Save and categorize content based on your preferences. User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help. Chrome and Firefox will reach version 100 in a couple of months. This has the potential to cause breakage on sites that rely on identifying
Feedback wanted: The road to a better layout shift metric for long-lived pages Stay organized with collections Save and categorize content based on your preferences. Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback. Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page. The metric is called cumulative layout shift beca
Building a theme switch component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build an adaptive and accessible theme switch component. In this post I want to share thinking on a way to build a dark and light theme switch component. Try the demo. Demo button size increased for easy visibility If you prefer video, here's a
Building a Better Web - Part 1: A faster YouTube on web Stay organized with collections Save and categorize content based on your preferences. A case study of changes the YouTube Web team made to improve performance, increase their Core Web Vitals pass rates and lift key business metrics. The Chrome team often talks about "building a better web", but what does that mean? Web experiences should be
Reduce web font size Stay organized with collections Save and categorize content based on your preferences. Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering regardless of the screen size and resolution. Web
Learn Images! Stay organized with collections Save and categorize content based on your preferences. Today we have launched Learn Images! In our newest course learn about image formats, compression, responsive images, and performance. Today we are excited to share with you our latest course on web.dev. Learn Images is a new course written by Mat Marquis, and it's a deep dive into all you need to k
How the BBC is rolling out HSTS for better security and performance. Stay organized with collections Save and categorize content based on your preferences. The BBC is rolling out HSTS for their website to improve security and performance. Find out what it means, and how HSTS can help you. HTTPS adoption has been steadily increasing in recent years. Per the HTTP Archive's 2021 Web Almanac, around 9
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Logical layout enhancements with flow-relative shorthands | Articles | web.dev
Last baseline alignment | Blog | web.dev
Optimizing Web Vitals using Lighthouse | Articles | web.dev
Building a Settings component | Articles | web.dev
The nuances of base64 encoding strings in JavaScript | Articles | web.dev
Google スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由 | web.dev
Testing Web Design Color Contrast | Articles | web.dev
The end of Internet Explorer | Articles | web.dev
Pyramid or Crab? Find a testing strategy that fits | Articles | web.dev
Read files in JavaScript | Articles | web.dev
Custom metrics | Articles | web.dev
Interop 2022: end of year update | Blog | web.dev
Yahoo!JAPAN、パスキーの導入率を 11% に増やし、SMS OTP の費用を削減 | web.dev
Economic Times quest for fixing INP | web.dev
Interop 2024 mid-year update | Blog | web.dev
Fill OTP forms within cross-origin iframes with WebOTP API | Articles | web.dev
セキュリティ ヘッダーのクイック リファレンス | Articles | web.dev
Array.prototype.with による不変の配列の更新 | Blog | web.dev
The business impact of Core Web Vitals | web.dev
Monitor your web page's total memory usage with measureUserAgentSpecificMemory() | Articles | web.dev
Workers overview | Articles | web.dev
Building multiple Progressive Web Apps on the same domain | Articles | web.dev
Web Vitals | Articles | web.dev
Three common types of test automation | Articles | web.dev
Building a PWA at Google, part 1 | Articles | web.dev
Changes to the web.dev infrastructure | Blog
Defining test cases and priorities | Articles | web.dev
How Mercado Libre optimized for Web Vitals (TBT/FID) | web.dev
Optimize WebFont loading and rendering | Articles | web.dev
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts | Articles | web.dev
Don't fight the browser preload scanner | Articles | web.dev
Cross-Origin Resource Sharing (CORS) | Articles | web.dev
Code splitting with dynamic imports in Next.js | Articles | web.dev
Chrome and Firefox soon to reach major version 100 | Articles | web.dev
Feedback wanted: The road to a better layout shift metric for long-lived pages | Articles | web.dev
Building a theme switch component | Articles | web.dev
Building a Better Web - Part 1: A faster YouTube on web | web.dev
Reduce web font size | Articles | web.dev
Learn Images! | Blog | web.dev
How the BBC is rolling out HSTS for better security and performance. | Articles | web.dev