表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
リソースの読み込みを助けるウェブブラウザ API の世界
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やその処理を最適化するための API を提供しています。本記事ではそれらを網羅的に紹介し、ウェブアプリの性能改善を図る上でどのようなブラウザ機能が使えるのかを知ってもらうことを目的としています。各機能の具体的な適用事例については他の記事に委ねます。 本記事の内容は記事公開時点での情報に基づいており、閲覧時点では既に古くなっている可能性があります。最新の正確な情報は一次情報源を参照してください。また特定のブラウザ実装について言及する場合は、断りがない限り Chrome を想定しています。誤りや補足、質問な
PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～の資料です。 https://pwanight.connpass.com/event/128434/
ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver | blog.jxck.io
Intro Web サービスにおいては通常、 Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。 しかし、 Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。 今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。 Notice 本記事の大半は 1 年以上前に書いたものだが、そのころは仕様も実装もまだまだ落ち着きが無かった。 仕様 report-uri から report-to への移行期 JFV の採用への不安 実装 ディレクティブの実装がバラバラ ReportingObserver では取れるが default group に自動では飛ばない(未実装) ReportingObserver で取った report が JSON Seriali
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
GitHub - luruke/browser-2020: Things you can do with a browser in 2020 ☕️
It's 2020, and browsers can do amazing stuff. This repo contains a non-exhaustive list of less-known features implemented in browsers today. This list isn't intended for a technical audience; instead it wants to be a "I didn't know we could do that in a browser!" list. In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations. p
Browser-level image lazy loading for the web Stay organized with collections Save and categorize content based on your preferences. You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the detai
Modern client-side routing: the Navigation API | Web Platform | Chrome for Developers
Single-page applications, or SPAs, are defined by a core feature: dynamically rewriting their content as the user interacts with the site, instead of the default method of loading entirely new pages from the server. While SPAs have been able to bring you this feature via the History API (or in limited cases, by adjusting the site's #hash part), it's a clunky API developed long-before SPAs were the
Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DO
Safe DOM manipulation with the Sanitizer API Stay organized with collections Save and categorize content based on your preferences. The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page. Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML document can be tricky. Without sufficient care,
Cumulative Layout Shift (CLS) Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It's an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is delightful. Unexpected layout
Have you ever wondered how web compatible Deno is? Probably not, but I did today. To answer that question, I am writing this blog post: I’ll list and explain every single web API implemented in Deno. Get yourself something to drink, because this is going to take a while to go through. Before we get into it though, I just want to set some ground rules: I am not including any JS language features. O
GitHub - progfay/benefit-from-end-of-ie: List of APIs that will be available due to IE termination
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact
An overview on how to write a WebGPU application. Learn what key data structures and types are needed to draw in WebGPU.
Detect inactive users with the Idle Detection API | Capabilities | Chrome for Developers
How to use the Idle Detection API Feature detection To check if the Idle Detection API is supported, use: if ('IdleDetector' in window) { // Idle Detector API supported } Idle Detection API concepts The Idle Detection API assumes that there is some level of engagement between the user, the user agent (that is, the browser), and the operating system of the device in use. This is represented in two
URLPattern brings routing to the web platform | Web Platform | Chrome for Developers
Background Routing is a key piece of every web application. At its heart, routing involves taking a URL, applying some pattern matching or other app-specific logic to it, and then, usually, displaying web content based on the result. Routing might be implemented in a number of ways: it's sometimes code running on a server that maps a path to files on disk, or logic in a single-page app that waits
Caniuse and MDN compatibility data collaboration – Mozilla Hacks - the Web developer blog
Web developers spend a good amount of time making web compatibility decisions. Deciding whether or not to use a web platform feature often depends on its availability in web browsers. A brief history of compatibility data More than 10 years ago, @fyrd created the caniuse project, to help developers check feature availability across browsers. Over time, caniuse has evolved into the go-to resource t
Accessing hardware devices on the web Stay organized with collections Save and categorize content based on your preferences. The goal of this guide is to help you pick the best API to communicate with a hardware device (e.g. webcam, microphone, etc.) on the web. By "best" I mean it gives you everything you need with the shortest amount of work. In other words, you know the general use case you wan
Why you need "cross-origin isolated" for powerful features Stay organized with collections Save and categorize content based on your preferences. Learn why cross-origin isolation is needed to use powerful features such as SharedArrayBuffer, performance.measureUserAgentSpecificMemory() and high resolution timer with better precision. Introduction In Making your website "cross-origin isolated" using
Verify phone numbers on the web with the WebOTP API | Identity | Chrome for Developers
What is the WebOTP API? These days, most people in the world own a mobile device and developers are commonly using phone numbers as an identifier for users of their services. There are a variety of ways to verify phone numbers, but a randomly generated one-time password (OTP) sent by SMS is one of the most common. Sending this code back to the developer's server demonstrates control of the phone n
Strategies for Telemetry Exfiltration (aka Beaconing In Practice)
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents Introduction What are Beacons? Beaconing Stages Sending Data at Startup Gathering Data through the Page Load Incrementally Gathering Telemetry throughout a Page’s Lifetime Gathering Data up to the End of the Page “Whenever” How Many Beacons? A Single Beacon Multipl
Video processing with WebCodecs | Web Platform | Chrome for Developers
Modern web technologies provide ample ways to work with video. Media Stream API, Media Recording API, Media Source API, and WebRTC API add up to a rich tool set for recording, transferring, and playing video streams. While solving certain high-level tasks, these APIs don't let web programmers work with individual components of a video stream such as frames and unmuxed chunks of encoded video or au
GitHub - WICG/navigation-api: The new navigation API provides a new interface for navigations and session history, with a focus on single-page application navigations.
Formerly known as the app history API The web's existing history API is problematic for a number of reasons, which makes it hard to use for web applications. This proposal introduces a new API encompassing navigation and history traversal, which is more directly usable by web application developers. Its scope is: initiating navigations, intercepting navigations, and history introspection and mutat
Interop 2022、Interop 2023に続き、Interop 2024の取り組みがスタートした旨を知らせる記事が、参加組織それぞれから一斉に公開されました。 Interop 2024 | Blog | web.dev The web just gets better with Interop 2024 | WebKit Interop 2024 Launch - Bocoup Interop 2024 Launches | Igalia Microsoft Edge and Interop 2024 - Microsoft Edge Blog Announcing Interop 2024 - Mozilla Hacks - the Web developer blog 加えて、既にInterop 2024 Dashboardが公開されています。Interop 2023より引き
Better JS scheduling with isInputPending() | Capabilities | Chrome for Developers
Loading fast is hard. Sites that leverage JS to render their content currently have to make a trade-off between load performance and input responsiveness: either perform all the work needed for display all at once (better load performance, worse input responsiveness), or chunk the work into smaller tasks in order to remain responsive to input and paint (worse load performance, better input respons
ResizeObserver in WebKit
For years now, web developers have desired the ability to design components that are responsive to their container instead of the viewport. Developers are used to using media queries against viewport width for responsive designs, but having media queries based on element sizes is not possible in CSS because it could result in circular dependencies. Thus, a JavaScript solution was required. ResizeO
This explainer proposes an API called the Login Status API with which websites can inform the web browser of the user's login status. Currently, web browsers have no way of knowing if the user is logged in to a particular website. Neither the existence of cookies nor frequent/recent user interaction can serve that purpose since most users have cookies for and interact with plenty of websites they
When a user navigates on the web from Page-A to Page-B, the content that they are looking at changes suddenly and unexpectedly as the first page disappears and the new page jumps into view. This sequenced, disconnected user experience is disorienting and results in a higher-cognitive load as the user is forced to piece together how they got to where they came from. Additionally, this jarring exper
Let installed web applications be file handlers | Capabilities | Chrome for Developers
Now that web apps are capable of reading and writing files, the next logical step is to let developers declare these very web apps as file handlers for the files their apps can create and process. The File Handling API allows you to do exactly this. After registering a text editor app as a file handler and after installing it, you can right-click a .txt file on macOS and select "Get Info" to then
Recognize your users' handwriting | Web Platform | Chrome for Developers
What is the Handwriting Recognition API? The Handwriting Recognition API allows you to convert handwriting (ink) from your users into text. Some operating systems have long included such APIs, and with this new capability, your web apps can finally use this functionality. The conversion takes place directly on the user's device, works even in offline mode, all without adding any third-party librar
Scheduling in React
In modern applications, user interfaces often have to juggle multiple tasks at the same time. For example, a search component might need to respond to user input while providing auto completion results, and an interactive dashboard might need to update charts while loading data from the server and sending analytics data to a backend. All these parallel steps can lead to slow and unresponsive inter
Alex Russell on browsers, standards, and the process of progress. Joining a new team has surfaced just how much I've relied on a few lenses to explain the incredible opportunities and challenges of platform work. This post is the second in an emergent series towards a broader model for organisational and manager maturity in platform work, the first being last year's Platform Adjacency Theory. That
GitHub - WebKit/explainers: Explainers from WebKit contributors
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Insertable streams for MediaStreamTrack | Capabilities | Chrome for Developers
Background In the context of the Media Capture and Streams API the MediaStreamTrack interface represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist. MediaStream objects consist of zero or more MediaStreamTrack objects, representing various audio or video tracks. Each MediaStreamTrack may have one or more channels. The channel r
Know your code health with the ReportingObserver API | Capabilities | Chrome for Developers
ReportingObserver lets you know when your site uses a deprecated API or runs into a browser intervention. The basic functionality originally landed in Chrome 69. As of Chrome 84, it can be used in workers. const observer = new ReportingObserver((reports, observer) => { for (const report of reports) { console.log(report.type, report.url, report.body); } }, {buffered: true}); observer.observe(); Use
handwriting-recognition/explainer.md at main · WICG/handwriting-recognition
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Compression Streams are now supported on all browsers Stay organized with collections Save and categorize content based on your preferences. The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats. Using the built-in compression of the Compression Streams API, JavaScript applications do not need to include a compression li
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Working together on Interop 2022
From the very beginning, the web was always intended to work in any browser, on any computer. This is possible through interoperability — when each underlying web technology is implemented in the same way in every browser. To reach interoperability, it takes a commitment from all browser engineers to implement web technology according to web standards — the incredibly detailed specifications where
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
Browser-level image lazy loading for the web | Articles | web.dev
HTML DOM — Phuoc Nguyen
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
Cumulative Layout Shift (CLS) | Articles | web.dev
A list of every web API in Deno
How to Use the Web Share API | CSS-Tricks
Raw WebGPU
Accessing hardware devices on the web | Articles | web.dev
Why you need "cross-origin isolated" for powerful features | Articles | web.dev
Interop 2024がスタート | フロントエンドBlog | ミツエーリンクス
GitHub - privacycg/is-logged-in: The IsLoggedIn API
GitHub - WICG/view-transitions
The Core Web Platform Loop - Infrequently Noted
Compression Streams are now supported on all browsers | Blog | web.dev
GitHub - WICG/web-otp: phone number verification
www.pixiv.net
osakanosakenomi.hatenablog.com
grit-story.com
osakanosakenomi.hatenablog.com
shinsyu-meshi.hatenablog.com
softantenna.com