Using Intersection Observers

With the Intersection Observer coming to Firefox, a nice article covering it appeared on Mozilla Hacks. The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. To use it, create a new instance …

GridBugs – A Curated List of CSS Grid Interop Issues

Like Flexbugs, but then for CSS Grid Layout: Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Grid shipped into browsers in a highly interoperable state, however there are a few issues – let’s document any we find here. By Rachel Andrew …

Automatically rerun PHPUnit tests when source code changes with phpunit-watcher

Nice new package by Freek from Spatie.be. Think of it like Jest, but for PHP: Wouldn’t it be great if your PHPUnit tests would be automatically rerun whenever you change some code? This package can do exactly that. By default it will watch all files in the src, app and tests subdirectories in the directory …

Navigating on the next iPhone

Some folks have been poking around in the HomePod Firmware update. Doing so they’ve unearthed the existence of an upcoming face unlock feature using and infrared camera and face detection, the new iPhone’s bezel-less form factor, and its resolution of 1125 x 2436 (375 x 812 points rendered @3x). Me too. New bezel-less form factor …

React, Relay and GraphQL: Under the Hood of the Times Website Redesign

The folks over at The New York Times have made change to using React, Relay and GraphQL for the new version of their website (which they are rolling out over the coming months): We thought it would be nice if there was one place to add and retrieve data and one way to authenticate against …

Chromeless Playground: Chrome Automation Made Simple

With Chrome 59 came the ability to run a Headless Chrome. Controlling it via code isn’t that easy nor elegant. Enter Chromeless (not be confused with Mozilla’s Chromeless): With Chromeless you can control Chrome (open website, click elements, fill out forms…) using an elegant API. This is useful for integration tests or any other scenario …

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, …

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 …