Frontend

Browser-level lazy loading for CMSs

This post provides guidance on how to adopt the loading attribute in content management systems.

Bundling non-JavaScript resources

Learn how to import and bundle various types of assets from JavaScript in a way that works both in browsers and bundlers.

Centering in CSS

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.

Choose a JavaScript library or framework

Understand the decisions around using a JavaScript library or framework.

Code splitting with React.lazy and Suspense

The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. Use it along with Suspense to show appropriate loading states to your users.

Code splitting with dynamic imports in Next.js

Codelab: Building a Sidenav component

Learn how to build a responsive slide out side navigation layout component.

Codelab: Building a Stories component

Learn how to build an experience similar to Instagram Stories on the web.

Codelab: Centering in CSS

Learn 5 different centering techniques with CSS.

Extract and inline critical CSS with Critical

Learn how use Critical to extract and inline critical CSS, and improve render times.

Optimize third-party JavaScript

Learn about techniques for optimizing slow third-party resources with some help from Lighthouse.

Use cross-platform browser features to build a sign-in form

Use cross-platform browser features to build a sign-in form that's secure, accessible, and easier to use.

Sign-up form best practices codelab

Use cross-platform browser features to build a sign-up form that's secure, accessible, and easier to use.

How CommonJS is making your bundles larger

CommonJS modules are very dynamic, which prevents JavaScript optimizers and bundles perform advanced optimizations over them.

Content reordering

When creating a layout using CSS, ensure you give the same experience for keyboard users as other users.

Create a Progressive Web App with the Angular CLI

Learn how to create installable progressive Angular applications.

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?

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.

How Nordhealth uses Custom Properties in Web Components

The benefits of using Custom Properties in design systems and component libraries.

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

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).

DOM Order Matters

The importance of the default DOM order

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.

Efficiently load third-party JavaScript

Learn how to improve load times and user experience by avoiding the common pitfalls of using third-party scripts.

JavaScript eventing deep dive

Extract critical CSS

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.

Optimize Angular's change detection

Learn how to optimize your Angular app's change detection to make it more responsive.

Global and local variable scope

Learn about scope and how it works in JavaScript.

Web developer tools for debugging JavaScript issues in Google Search

How to debug SEO issues on individual pages or across an entire site.

Cross-browser paint worklets and Houdini.how

Learn how to implement cross-browser Houdini Paint API's and explore a world of Houdini worklets with Houdini.how.

How AMP can guarantee fastness in your Next.js app

How to file a good browser bug

Telling browser vendors about issues you find in their browser, on a specific device or platform is an integral part of making the web platform better!

Prevent unnecessary network requests with the HTTP Cache

The browser's HTTP Cache is your first line of defense against unnecessary network requests.

Icons and browser colors

Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.

Identify slow third-party JavaScript

Learn how to use Lighthouse and Chrome DevTools to identify slow third-party resources.

HTML Imports

The inert attribute

The inert property is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies.

IntersectionObserver's coming into view

IntersectionObservers let you know when an observed element enters or exits the browser's viewport.

Is it :modal?

This handy CSS pseudo-selector gives you a way to select elements that are modal.

JavaScript: What is the meaning of this?

Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…

The difference between JavaScript libraries and frameworks

Understand the differences between frameworks and libraries in the context of a client-side JavaScript environment.