Skip to main content
Fresh Article

Listen to your web pages

A clever idea from Tom Hicks combining MutationObserver (which can "observe" changes to elements like when their attributes, text, or children change) and the Web Audio API for creating sounds. Plop this code into the console on a page where you'd like to listen to essentially any DOM change to hear it doing stuff.… Read article

Article

“CSS4” Update

Since I first chimed in on the CSS4¹ thing, there's been tons of more discussion on it. I'm going to round up my favorite thoughts from others here. There is an overwhelming amount of talk about this, so I'm going to distill it here down as far as I can, hopefully making it easier to follow.… Read article

Article

Creating a Details Element That Opens But Never Closes

The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element.

But let's say you want to be able to click it open and that's that. Interactivity over. I saw this used in one of those "Read more" article designs, where you click that "Read more" … Read article

Article

While You Weren’t Looking, CSS Gradients Got Better

One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item:

Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with the same color)

Surprisingly, I recently discovered most people aren't even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.

According to the spec:

Specifying two

Read article
Article

A Complete Guide to Links and Buttons

Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

Article

Why JavaScript is Eating HTML

Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made. It is exciting for some but frustrating for others, and the reasons for both are difficult to explain.

A web page is traditionally made up of three separate parts with separate responsibilities: HTML code defines the structure and meaning of the content on a page, CSS code defines its appearance, … Read article

Link

The Unseen Performance Costs of Modern CSS-in-JS Libraries

Sponsored Link

A Headless CMS for You and Your Web Development Agency

Storyblok is a headless but component-based CMS with a built-in live-preview. You can use it for building fast and reliable websites and power native apps with your favorite technology.

Let us start with the basics and what a headless CMS is:

A headless content management system is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful or GraphQL API for display on any device.

At … Read article

Link

2020 Stack

Link

Toward Responsive Elements

Article

Building an Images Gallery using PixiJS and WebGL

Sometimes, we have to go a little further than HTML, CSS, and JavaScript to create the UI we need, and instead use other resources, like SVG, WebGL, canvas, and others.

For example, the most amazing effects can be created with WebGL, because it’s a JavaScript API designed to render interactive 2D and 3D graphics within any compatible web browser, allowing GPU-accelerated image processing.

That said, working with WebGL can be very complex. As such, there’s a variety of libraries that … Read article

Keep browsing in the archives

Monthly Mixup

Article

Leveling up with React: React Router

Article

Making the Move from jQuery to Vue

Snippet

Get URL and URL Parts in JavaScript

Monthly Sponsor
Thanks, Frontend Masters!