An Early Look at the Vue 3 Composition API in the Wild
November 13th, 2019
I recently had an opportunity to try the new Vue Composition API in a real project to check where it might be useful and how we could use it in the future. Until now, when we were creating a new component we were using Options API. That API forced us to separate the component’s code…
Making an Audio Waveform Visualizer with Vanilla JavaScript
November 12th, 2019
As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine. A few years ago, as the design director of wsj.com, I was helping to re-design the Wall…
When to Use SVG vs. When to Use Canvas
November 12th, 2019
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear. A little flat-color icon? That’s clearly SVG territory. An interactive…
scrapestack: An API for Scraping Sites
November 12th, 2019
Not every site has an API to access data from it. Most don’t, in fact. If you need to pull that data, one approach is to “scrape” it. That is, load the page in the web browser (that you automate), find what you are looking for in the DOM, and take it. You can do…
Working with Fusebox and React
November 8th, 2019
If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers — code-splitting, hot module reloading, dynamic imports, etc. — but code-splitting in FuseBox requires zero configuration by default (although webpack will offer the same as of version 4.0). Instead, FuseBox…
Query JSON documents in the Terminal with GROQ
November 7th, 2019
JSON documents are everywhere today, but they have rarely structured the way you want them to be. They often include too much data, have weirdly named fields, or place the data in unnecessary nested objects. Graph-Relational Object Queries (GROQ) is a query language (like SQL, but different) which is designed to work directly on JSON…
Building Accessibility in Angular Applications
November 6th, 2019
Accessibility in Angular Applications Guest Author: Zama Khan Mohammed, Software Architect, Author of Angular Projects book. Hug illustration is taken from icon8 Many software development teams focus and prioritize software architecture, performance, security, testability, and maintainability of the software but often forget to value the importance of accessibility. Accessibility should never be an afterthought! Everyone should be…
What is super() in JavaScript?
November 6th, 2019
What’s happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super.<methodName> to access its parent’s methods. This article will assume at least a little familiarity with the concepts of constructors and child and parent classes. If that’s totally new, you may want to…
Building Great User Experiences with Concurrent Mode and Suspense
November 5th, 2019
At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com. This post will be most relevant to people working on data fetching libraries for React. It shows…
Making a Chart? Try Using Mobx State Tree to Power the Data
November 5th, 2019
Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options. But we don’t necessarily need a chart library to create charts. Take Mobx-state-tree (MST), an intuitive alternative to Redux for managing…