Interacting with the iOS Simulator from the Command Line using simctl

Wasn’t aware of this, but turns out one can control (and interact with) the iOS Simulator straight from the command line. There’s no need to install anything new though. The tool we’re going to be using is already on our Mac, hiding inside the xcrun command, which gets installed with Xcode. It’s called simctl. Here’s …

Better Error Handling in React 16 with Error Boundaries

The first beta React 16 has been released just yesterday. Next to it running on Fiber (speeeed!), and allowing one to return Arrays in the render() method (bye bye unnecessary wrapper divs!), it also introduces the concept of Error Boundaries: Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, …

Dunkirk and the “Shepard Tone“

Nice piece by Vox – in a true Nerdwriter1 style by the way – on the sound design of Dunkirk – and by extension all of Christoper Nolan’s films – which makes the movie so intense. Just like with visual illusions, the brain can also be tricked with sound illusions. Sidenote: Ever since I saw …

gpu.js – GPU Accelerated JavaScript

Amazing: gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript. Only a subset of …

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time. Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see …

Behind the front-end experience of Stripe’s ”Connect”

Great writeup by Benjamin De Cock on the work he and his colleagues did to creating unique landing pages that tell a story for our major products For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface. In this blog post, we’ll …

Hive’s best practices for JavaScript projects

Hive, a UK based technology design studio, have shared their set of best practices for developing JavaScript-based projects. While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here’s a list of guidelines we’ve found, written and gathered that (we …

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information. D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser. D3 in Depth: Rendering Geographic Information →

CSS Variables and Reduced Motion

Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting –duration to 0 it basically …

Theming with CSS Custom Properties (CSS Variables)

Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed. :root { –column-bg: #ae0001; –menu-bg-hover: #680001; –active-item: #D3A625; –active-item-text: #680001; –hover-item: #BE0002; –text-color: #FFFFFF; –active-presence: #00FFBA; …