Create a Progressive Web App with the Angular CLI
Learn how to create installable progressive Angular applications.
Creative list styling
A look at some useful and creative ways to style a list.
Critical Rendering Path
Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
Defragment cross-domain logins
Learn how to use architectural standards and solutions (such as metadata, cross-origin iframes, identity federation, and subdomain consolidation) to resolve cross-domain identity fragmentation and deliver a seamless user journey.
A guide to enable cross-origin isolation
Cross-origin isolation enables a web page to use powerful features such as SharedArrayBuffer. This article explains how to enable cross-origin isolation on your website.
Cross-Origin Resource Sharing (CORS)
The browser's same-origin policy blocks reading a resource from a different origin for security purposes. Enabling CORS lets the server tell the browser it can use an additional origin.
Why is CrUX data different from my RUM data?
Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.
Content security policy
Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.
CSS animated grid layouts
In CSS Grid, the `grid-template-columns` and `grid-template-rows` properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
CSS border animations
Looking at several ways to animate a border in CSS
Create interesting image shapes with CSS's clip-path property
Using clipping in CSS can help us move away from everything in our designs looking like a box. By using various basic shapes, or an SVG, you can create a clip path. Then cut away the parts of an element you don't want to show.
Quickly create nice CSS gradients with the CSS Gradient Creator
This tool by Josh W Comeau makes it super simple to create nice looking gradients.
Finer grained control over CSS transforms with individual transform properties
Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.
New CSS functional pseudo-class selectors :is() and :where()
These seemingly small additions to CSS selector syntax are going to have a big impact.
Custom bullets with CSS ::marker
Use CSS to customize the color, size, or type of numbers or bullets in list elements.
Apply effects to images with the CSS mask-image property
CSS masking gives you the option of using an image as a mask layer. This means that you can use an image, an SVG, or a gradient as your mask, to create interesting effects without an image editor.
Using CSS Module Scripts to import stylesheets
Learn how to use CSS module scripts to import CSS stylesheets using the same syntax as JavaScript modules.
CSS paint times and page render weight
Smarter custom properties with Houdini’s new API
Though useful, CSS variables are hard to work with because they can take any value and be overridden and you can’t use transitions with them. CSS Properties and Values API Level 1 overcomes these issues.
Magazine-like layout for the web with CSS regions and exclusions
Well-controlled scrolling with CSS Scroll Snap
CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. This enables common UX scroll patterns without the need for JavaScript.
CSS size-adjust for @font-face
As a web font loads, you can now adjust its scale to normalize the document font sizes and prevent layout shift when switching between fonts
CSS subgrid
Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.
Trigonometric functions in CSS
Calculate the sine, cosine, tangent, and more in CSS.
CSS versus JavaScript animations
You can animate with CSS or JavaScript. Which should you use, and why?
CSS for Web Vitals
This article covers CSS-related techniques for optimizing Web Vitals.
Custom easing
Go offroad and create totally custom animations for your projects.
Custom Element Best Practices
Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements.
Custom Elements v1 - Reusable Web Components
Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.
Custom metrics
Custom metrics let you measure and optimize aspects of your site's experience that are unique to your site.
How Nordhealth uses Custom Properties in Web Components
The benefits of using Custom Properties in design systems and component libraries.
Working with Custom Elements
How to provide your own in-app install experience
Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.
Correlating Core Web Vitals and ad revenue with Google tools
Learn how you can use Google tools to help correlate your Core Web Vitals with ad revenue.
Breaking down barriers using the DataTransfer API
The DataTransfer object holds data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.
Debounce your input handlers
Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
Debug layout shifts
Learn how to identify and fix layout shifts.
Debug performance in the field
Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics
Debug media playback errors on the web
Learn how to debug media playback errors on the web.
Declarative Shadow DOM
Declarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.
Decrease front-end size
How to use webpack to make your app as small as possible
Deep dive into top web developer pain points
A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.
Defer non-critical CSS
Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving First Contentful Paint (FCP).
How to define your install strategy
Best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.
How the Core Web Vitals metrics thresholds were defined
The research and methodology behind Core Web Vitals thresholds
Designcember Calculator
A skeuomorphic attempt at recreating a solar calculator on the web that makes use of the ambient light sensor and the window controls overlay feature.
Detached window memory leaks
Detached windows are a common type of memory leak that is particularly difficult to find and fix.
Web Developer Satisfaction
Web Developer Satisfaction is a Google project to gather information about the needs of web developers. The goal is a more reliable, predictable and interoperable web platform, enabling developers to invest in and trust it, and adopt and use new features to grow the platform and their business.
Device Orientation & Motion
Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass in mobile devices.
Pixel-perfect rendering with devicePixelContentBox
Since Chrome 84, ResizeObserver supports a new box measurement called device-pixel-content-box, that measures the element's dimension in physical pixels. This is crucial for rendering pixel-perfect graphics, especially in the context of high-density screens.
Accessing hardware devices on the web
This article helps Web developers pick the right hardware API based on a given device.
Disable mouse acceleration to provide a better FPS gaming experience
Web apps can now disable mouse acceleration when capturing pointer events.
Improve page dismissal in synchronous XMLHttpRequest
It's common for a page or app to have unsubmitted analytics or other data when a user closes it. Sites use a synchronous call to XMLHttpRequest(), which hurts the user experience and ignores better ways to save data. Chrome 80 implements a recent spec change to address this.
Discover performance opportunities with Lighthouse
Lighthouse is a tool that helps you measure and find ways to improve a page's performance. Lighthouse gives you a report on how the page did. The report provides a score for each metric and a list of opportunities which, if you implement them, should make the page load faster.
DOM Order Matters
The importance of the default DOM order
How large DOM sizes affect interactivity, and what you can do about it
Large DOM sizes can be a factor in whether interactions are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.
Jumping the hurdles with the Gamepad API
![Frontend — Downloading resources in HTML5 - a[download]](/covers/8637d946c2.webp?v=8564874)
Downloading resources in HTML5 - a[download]
Chrome now supports the HTML spec's new `download` attribute to `a` elements.
The HTML Drag and Drop API
The HTML5 Drag and Drop API lets developers make almost any element on a page draggable.
Drawing to canvas in Emscripten
Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.