Search
Getting To Know The MutationObserver API
8.5.2019
MutationObserver watches the DOM, specifically the places you tell it to, like:
document.querySelector('#watch-this');
...and it can tell you (trigger a callback) when stuff happens — like when a child is added, removed, changed, or a number of other things.
I used it just the other day...
The Simplest Ways to Handle HTML Includes
30.4.2019
It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that addresses it. I'm talking about straight up includes, like taking a chunk of HTML and plopping it right into another. For example the...
Preload, prefetch and other link tags
24.4.2019
Ivan Akulov has collected a whole bunch of information and know-how on making things load a bit more quickly with preload and prefetch. That's great in and of itself, but he also points to something new to me – the as attribute:
<link rel="preload" href="/style.css" as="style"...
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()...
7 Useful JavaScript Tricks
16.4.2019
Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let’s have a look at {x} JavaScript tricks you can start using today! Get Unique Values of an Array...
Get a CSS Custom Property Value with JavaScript
11.4.2019
Here’s a neat trick from Andy Bell where he uses CSS Custom Properties to check if a particular CSS feature is supported by using JavaScript.
Basically, he's using the ability CSS has to check for browser support on a particular property, setting a custom property that returns a value of either...
Using “box shadows” and clip-path together
11.4.2019
Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it'll be applying a shadow to a shape.
You make a box
.tag {
background: #FB8C00;
color: #222;
font: bold 32px system-ui;
padding:...
Native Lazy Loading
9.4.2019
IntersectionObserver has made lazy loading a lot easier and more efficient than it used to be, but to do it really right you still gotta remove the src and such, which is cumbersome. It's definitely not as easy as:
<img src="celebration.jpg" loading="lazy" alt="..." />
Addy Osmani says...
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...
KV Storage
1.4.2019
localStorage is...
Good! It's an incredibly easy API to use.
localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');
Bad! Philip Walton explains why:
localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your...
Differential Serving
1.4.2019
There is "futuristic" JavaScript that we can write. "Stage 0" refers to ideas for the JavaScript language that are still proposals. Still, someone might turn that idea into a Babel plugin and it could compile into code that can ship to any browser. For some of these lucky proposals, Stage 0 becomes...
JavaScript Glossary: String length
26.3.2019
Basics
The length property of the String object returns the number of code points in a string object. It indicates the length of the string
Understanding Event Emitters
26.3.2019
Consider, a DOM Event:
const button = document.querySelector("button");
button.addEventListener("click", (event) => /* do something with the event */)
We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that...
All About mailto: Links
22.3.2019
You can make a garden variety anchor link (<a>) open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything web, there are lots of things to consider.
The basic functionality
<a href="mailto:someone@yoursite.com">Email...
Planning for Responsive Images
13.3.2019
The first time I made an image responsive, it was as simple as coding these four lines:
img {
max-width: 100%;
height auto; /* default */
}
Though that worked for me as a developer, it wasn’t the best for the audience. What happens if the the image in the src attribute is heavy? On high-end...
Smooth Scrolling for Screencasts
13.3.2019
Let's say you wanted to scroll a web page from top to bottom programmatically. For example, you're recording a screencast and want a nice full-page scroll. You probably can't scroll it yourself because it'll be all uneven and jerky. Native JavaScript can do smooth scrolling. Here's a tiny snippet...
Downsides of Smooth Scrolling
11.3.2019
Smooth scrolling has gotten a lot easier. If you want it all the time on your page, and you are happy letting the browser deal with the duration for you, it's a single line of CSS:
html {
scroll-behavior: smooth;
}
I tried this on version 17 of this site, and it was the second most-hated thing...
A Bit of Performance
28.2.2019
Here’s a great post by Roman Komarov on what he learned by improving the performance of his personal website. There’s a couple of neat things he does to tackle font loading in particular, such as adding the <link rel="preload"> tags for fonts. This will encourage those font files...
Did you know that CSS Custom Properties can handle images too?
27.2.2019
So you might be aware of CSS Custom Properties that let you set a variable, such as a theme color, and then apply it to multiple classes like this:
:root {
--theme: #777;
}
.alert {
background: var(—-theme);
}
.button {
background: var(—-theme);
}
Well, I had seen this pattern so often...