An Eleventy Starter with Tailwind CSS and Alpine.js
July 10th, 2020
When I decided to try to base my current personal website on Eleventy, I didn’t want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation. Many of the starters seemed to integrate Tailwind CSS in a contrived way. Also, some…
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…
Leveraging Angular Prereleases to keep Ionic in Sync
June 23rd, 2020
Unlike other open-source projects, Angular tries to bring a new major release at least twice a year. With each new release, Angular stands by its commitment to ensuring the upgrade process is easier every time. In fact, we noticed recently that the Angular team was preparing for a new major release, v10. By keeping an eye…
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…