In the last two posts we talked about laying the foundation for an accessible website and making sure keyboard users can navigate your site—this week we're gonna dive into the visual and talk about color. As it turns out, color is a more complex topic than it might seem. We'll start with a quick run-through of some thing designers and developers should be looking for as they create their sites.

Tagged:

animating lines with missing data

While working on visualizing the results of internet speed test data for Measurement Lab, it became clear that there wouldn't always be data for every geographic location on every single day. We might go several days without meeting a minimum threshold of tests, meaning there would be gaps in our data. This is a pretty common problem when working with time series data, and one that is easily ignored by connecting the points that have data-- but it feels wrong and it can be misleading at best.

Tagged:

The modern workforce is going digital. Teams are taking advantage of new communication tools in order to meet people where they are and allowing them to work from wherever they are most fulfilled and inspired, be it a home office in Montana, a coffee shop in Toronto, or a War Room at WeWork. While this remote-friendly attitude has been quickly adopted by organizational functions like engineering, marketing, and sales, design groups have lagged behind, stuck with the idea that teams need to be in the same physical room in order to create great designs.

Tagged:

Smooth path interpolation with d3-interpolate-path

D3 provides us with many of the basic building blocks needed to make charts in browsers while also making it extremely easy to animate them. One of the most common charts created with D3 is a line chart, often consisting of a series of SVG <path> elements to visualize the data. In this post, I dissect how the animation of paths work in D3 and how they can be improved. The final result has been packed and released as a plugin d3-interpolate-path that you can use in your own line charts.

How do paths work?

Tagged:

Our last article about BoxArt showed how to use BoxArt's Animated component to animate a tile-dropping game built in React. This time, we are going to look at some features of how Animated optimizes animations for performance.

The Beastliness of Layout Thrash

There's a performance nightmare constantly threatening when you're animating in the browser.

Tagged:

Have you ever tried writing animations into a website? It's complicated. There's lots of room for error, and no tool seems to fill every animation need. Recently, while writing some DOM-based games, the Bocoup team realized there wasn't existing software for all of the projects' animation needs. To help fill the gaps, Bocoup created BoxArt, a collection of tools for creating DOM-based games with React.

Tagged:

Last week, in the first of our series on Accessibility Wins, we looked at setting up a good foundation by using HTML and ARIA roles properly. This week we're going to dive into the world of making sure that people can navigate your site using their keyboard.

Many, many people use just their keyboards for navigation because it's easier on their wrists or hands, or they prefer it, or they don't have the fine motor control to work a mouse or touchpad effectively. Making sure they can get around your site is pretty important. This is another population that wants to get at your content—if you make it possible for them to do it—and the reality is that it doesn't take too much to make it possible.

Tagged:

Welcome to the first post in our Accessibility Wins series, which will detail techniques you can use today to improve the accessibility of your web projects. Through this process, you’ll gain insight into how we think about accessibility here at Bocoup. First up is the foundation on which it all rests: writing good HTML and adding in the proper ARIA roles.

I can already hear a few of you questioning the need for ARIA roles now that we live in the wonderful world of HTML5. And, like you, I'm super excited that we have elements like <nav>, <main>, and <footer> but that doesn't mean that all legacy browsers read and understand those elements. In fact, only Microsoft Edge is supporting all the new elements for accessibility. So if you want to provide good backwards compatibility, you still need to use them.

Tagged:

The mobile web's market share is growing as a bigger and bigger part of the overall web every year. Because of this, more and more organizations are recognizing the value of responsive web design. However, not every organization is ready to go responsive right now. Fixed width sites don’t translate into cheaper sites to build necessarily, but there are other priorities that may override responsive when building a site. But you can set up a site to easily go responsive when you’re ready, which can mean easier changes in the future.

Tagged:

An illustration of a carnival barker holding back the JavaScript logo Illustration by Sue Lockwood

TC-39, the standards body that defines JavaScript, maintains a gigantic suite of tests for the language. The name of that test suite is Test262. When we started extending Test262 to cover brand new language features, we knew we were in for some surprises.

Tagged: