In Defense of a Fussy Website
June 26th, 2020
The other day I was doom-scrolling twitter, and I saw a delightful article titled “The Case for Fussy Breakfasts.” I love food and especially breakfast, and since the pandemic hit I’ve been using my breaks in between meetings (or sometimes on meetings, shh) to make full bacon, poached egg, vegetable plate, so I really got…
Angular 10 Now Available
June 24th, 2020
Angular 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. This release is smaller than typical; it has only been 4 months since we released version 9.0 of Angular. Photo of Butterfly Beach by Minko Gechev We try to release two major versions…
How to Make localStorage Reactive in Vue
June 24th, 2020
Reactivity is one of Vue’s greatest features. It is also one of the most mysterious if you don’t know what it’s doing behind the scenes. Like, why does it work with objects and arrays and not with other things, like localStorage? Let’s answer that that question, and while we’re at it, make Vue reactivity work…
Let’s Make a Multi-Thumb Slider That Calculates The Width Between Thumbs
June 23rd, 2020
HTML has an <input type=”range”>, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could represent a proportion of whatever is before and whatever is after it (using the value and max attributes). Getting fancier, it’s possible to build a multi-thumb slider. But we’ve got…
Easing Animations in Canvas
June 19th, 2020
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A common canvas use-case is programmatically generating images for websites, particularly games. That’s exactly what I’ve done in a website I built for playing Solitaire. The cards, including all their…
Stay DRY Using axios for API Requests
June 18th, 2020
HTTP requests are a crucial part of any web application that’s communicating with a back-end server. The front end needs some data, so it asks for it via a network HTTP request (or Ajax, as it tends to be called), and the server returns an answer. Almost every website these days does this in some…
Everything You Need to Know About FLIP Animations in React
June 16th, 2020
With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE). Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because it’s native —…
What is Developer Experience (DX)?
June 15th, 2020
Developer Experience¹ is a term² that has one somewhat obvious meaning — the experience of developers — but it eludes definition in the sense that people invoke it at different times for different reasons referring to different things. For instance, our own Sarah Drasner’s current job title is “VP of Developer Experience” at Netlify. But…
Making My Netlify Build Run Sass
June 9th, 2020
Let’s say you wanted to build a site with Eleventy as the generator. A popular choice these days! Eleventy doesn’t have some particularly blessed way of preprocessing your CSS if that’s something you want to do. There are a variety of ways to do it and perhaps that freedom is part of the spirit of…
How to Get All Custom Properties on a Page in JavaScript
June 8th, 2020
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element: html { –color-accent: #00eb9b; } In JavaScript, we can access…