Componentization is the central concept driving frontend development today. It enables us to encapsulate core logic of a user interface into smaller chunks thereby making them easier to reason about. While each of these components exist in isolation, they work in concert to build a unified interface. This relative isolation also means that components are reusable and can be easily mixed and matched to create a variety of patterns and styles. An example that best illustrates this is the screwdriver. Though there are many types of screwdrivers, like the phillips head, the flat head, the allen head and so on, these variations can be made by simply changing the head of the screw instead of having to buy multiple single use screwdrivers. By enabling a high level of isolation, components thereby promote ownership while also maintaining the right conditions to efficiently scale. ...

With 2018 drawing to a close, I’d like to take a moment to review some of my personal highlights from the past year. Attended Recurse Center 2018 was by far the first time that I hit the ground running at the start of the year. I successfully matriculated(?) at the Recurse Center in their first ever mini retreat and spent a full week in January learning and building alongside a bunch of incredibly smart, talented recursers. My project for the week was to ramp up on WebGL and gain (pseudo) proficiency in working with shaders. While I managed to somewhat accomplish this, I also spent a good chunk of time pairing on other recurser projects that ranged from building compilers to writing functional code in haskell. The week was wonderful, albeit a tad exhausting and I hope to return again sometime soon. ...

If you’ve been keeping up with the JavaScripts, chances are you’ve heard snatches of excitement about the latest and greatest in web technology, WebAssembly. WebAssembly is a binary executable for the web that promises near-native performance for web applications. This means that graphics heavy applications like Photoshop, and AutoCAD can now be run in the browser without the need for clunky third party plugins like Silverlight, Flash and Java Applets. Web Assembly effectively removes the notion that JavaScript is the de-facto assembly language of the Web and opens the door for other languages like C, and C++ to run on the web. ...

In the last few years, virtual reality (VR) and augmented reality (AR), also known as cross reality or XR, have developed far beyond the niche realms of the gaming industry. There are now compelling use cases for using XR for building applications focused on education (Aurasma, Math Alive), home improvement (Wayfair, Ikea Place) and even beauty (Meitu) that are accessible to the masses. Despite its growth in popularity, many XR applications today often require the installation of a separate mobile application. Snapchat lenses, and Instagram face filters for instance require using these applications to get the full XR experience. The reason developers lean on mobile when building XR is largely because mobile gives them more fine tuned control of native input controls compared to the web. To address this current handicap and to better bridge the gap between the virtual world and the web, browser vendors have teamed up to work on a XR focused web API termed WebXR. ...

One of the most memorable cinematic portrayals of a voice recognition system is Hal 9000, the seemingly omniscient computer from Stanley Kubrick’s 2001: A Space Odyssey. Hal captured our collective imaginations and opened our eyes to the possible future of a voice based human-computer interaction. Since the movie’s release in 1966, the landscape of voice recognition systems have changed drastically. According a study done by Adobe Analytics over 32% of US consumers own a smart speaker and that number is expected to increase nearly twofold by the end of the year. The emergence of integrated digital assistants like Amazon’s Alexa and Google’s Google Home has also meant that voice is now being used beyond just playing music and checking the weather forecast. With the increased reliance on voice as a medium of interacting with the web, designers and developers are now faced with a new challenge: designing interfaces optimized for voice-based interactions. ...

The task of building for accessibility, while worthwhile, can be a rather daunting one. Strategies to incorporate it into a product frequently involve a fair amount of work, much of which tends to be manual and admittedly, tedious. The web accessibility community has made many strides to improving this by making accessibility more accessible for developers. In addition to the best practices and recommendations by WCAG, there are many automated tools that make implementing them a breeze. Recent advances in AI have contributed further improvements to this, such that is it now possible to build for accessibility with minimal effort. In addition to helping streamlining existing tasks like alt-text generation, AI advances in areas such as natural language processing, machine learning and image processing have opened up new possibilities in the world of accessibility online. ...

For most of us, the web is a magical world of media rich content like images, gifs and most importantly, cat videos. Images, however humorous, are the primary means of maintaining user engagement online. Unfortunately, for many users with disabilities and/or other impairments, this rich visual heavy experience of the web remains inaccessible. Assistive devices like screen readers and refreshable braille displays can only interpret text and rely on developers adding alt-text or captions to make sense of images. Though this type of content is hard to parse, low vision users should not be predisposed to a text only web experience. For one, not all low vision users are blind. Many, like sighted users, can benefit from the added semantic meaning that images and video provide. As a result, as developers it is important to account for the range of abilities and adjust our media content appropriately. ...

Earlier this week, we briefly examined the concept of an accessibility tree, which represents the information model—much like the DOM—that assistive devices use to parse and make sense of a webpage. Unlike the DOM tree which can be queried and modified after the fact via JavaScript APIs, the accessibility tree can only be queried but not modified by assistive technologies. In an increasingly JavaScript heavy web ecosystem, input events like click and hover drive interactivity. Interactions are tailor made to suit specific input controls, so a hover event may open up help text, while changing focus states by clicking away may trigger form validation. These specific mappings between input controls and actions add a layer of fine grained control to the overall user experience. While alternate input controls have access to similar interactions, they still have to rely on DOM updates since they is no way to directly access the accessibility tree. ...

With the rise in popularity of client side, JavaScript frameworks like React, Vue and Angular, it is undeniable that JavaScript is eating the web. This increased reliance on JavaScript isn’t necessarily a bad thing. JavaScript enables us to add interactivity to a page and thereby create more engaging user experiences online. It has also helped address many performance issues with its solutions relating to lazy load and client-side routing via the history API. JavaScript however, is also a notorious cause of many accessibility issues. For instance, client side routing while enabling navigation without a full page reload, doesn’t get picked up accurately by screen readers. In addition, click and hover only events make apps virtually unusable for keyboard only users. To better understand the role of JavaScript with regards to these accessibility issues, let’s more closely examine how assistive devices are used to navigate the web. ...

When building for the web and making considerations for accessibility, it is easy to fall into the trap of assuming that accessible features only benefit disabled users. While disabled users positively benefit from accessibly designed interfaces, there are many other reasons why a user may similarly leverage keyboard shortcuts or specialized software to navigate websites. For instance, an otherwise able-bodied user may be forced to use assistive technologies as a result of an injury or a recent surgery that make it difficult to navigate a website as they ordinarily would. A user may also choose to use such assistive technologies purely out of personal preference because it allows them to navigate a site quickly and efficiently. It is therefore important for us as developers to build online experiences that don’t discriminate against how a website is accessed. ...