Menu

JavaScript News

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…