Search
Reduced Motion Picture Technique, Take Two
21.6.2019
Did you see that neat technique for using the <picture> element with <source media=""> to serve an animated image (or not) based on a prefers-reduced-motion media query?
After we shared that in our newsletter, we got an interesting reply from Michael Gale:
What about folks who love...
How to Section Your HTML
18.6.2019
The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.
Here is a brief explanation of each sectioning element...
Detect if Element is a Web Component
5.6.2019
I’ve advocated for web components since before they became a spec, mostly inspired by the Dojo Toolkit’s dijit framework. Empowering first class JavaScript widgets, as opposed to a mess of DIVs and templates, always made the most sense. Now that web components exist, and awesome...
Reducing motion with the picture element
31.5.2019
Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the <picture> element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that:
<picture>
<!-- This image will be loaded if...
Collective #520
30.5.2019
Zdog * xstyled * How !important are we? * Daily Ethical Design * The future is dark * Reducing motion with the picture element
Collective #520 was written by Pedro Botelho and published on Codrops
Using the Grid Shepherd Technique to Order Data with CSS
28.5.2019
Shepherds are good at tending to their sheep, bringing order and structure to their herds. Even if there are hundreds of those wooly animals, a shepherd still herds them back to the farm at the end of the day.
When dealing with data, programmers often don't know if it is correctly filtered...
The Browser Can Remember Edited Content
22.5.2019
You can make the text inside any HTML element editable by adding the contenteditable attribute.
<div contenteditable>
Hey, I'm like a textarea kinda now!
</div>
I wouldn't say there are wheelbarrows full of use-cases for that, but it's neat. One possible use might be...
The “Inside” Problem
20.5.2019
So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:
Limit the width (for large screens)
Pad the edges
Center...
10 React Challenges (Beginner): DOM Movement with Events
20.5.2019
Styling elements or in some instances, components in a React project is essential. Sometimes, you need to make a change in the style of an element bas
Footnotes That Work in RSS Readers
17.5.2019
Feedbin is the RSS reader I'm using at the moment. I was reading one of Harry's blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it,...
Everything You Ever Wanted to Know About inputmode
17.5.2019
The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textarea element.
<input type="text" inputmode="" />
<textarea inputmode="" />
Unlike changing the type...
SVG Properties and CSS
13.5.2019
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size...
A Few Functional Uses for Intersection Observer to Know When an Element is in View
8.5.2019
You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that arsenal. Observers are objects that spot something in real-time — like birdwatchers going to their favorite place to sit and wait for the birds...
Could Grouping HTML Classes Make Them More Readable?
22.4.2019
You can have multiple classes on an HTML element:
<div class="module p-2"></div>
Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:
.module { }
.p-2 { }
const div...
Tabs: It’s Complicated™
19.4.2019
I've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes.
const button = document.querySelector(".my-button");
const element = document.querySelector(".content");
button.addEventListener("click", function()...
The Power of Named Transitions in Vue
16.4.2019
Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component.
A simple example of this is with...
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!
3.4.2019
Let's take a basic on-page link:
<a href="#section-two">Section Two</a>
When clicked, the browser will scroll itself to the element with that ID: <section id="section-two"></section>. A browser feature as old as browsers themselves, just about.
But as soon as...
Scroll-Linked Animations
29.3.2019
You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event and alter...
JavaScript Glossary: String lastIndexOf()
27.3.2019
Basics
The lastIndexOf() method returns the last position within a String object which an element can be found. The search starts from the last position of the String object.
Advanced Tooling for Web Components
22.3.2019
Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, we dove into creating our own custom element....