MySQL ST_Distance_Sphere Polyfill

One of the cool things about MySQL 5.7 is the fact that it sports a few spatial convenience functions (since 5.7.6), allowing one to do operations on geometric values. One of those convenience functions is ST_Distance_Sphere, which allows one to calculate the (spherical) distance between two points. Recently I was working an project where I …

Responsive Components: a Solution to the Container Queries Problem

Extensive writeup by Philip Walton on how he tackles the Container Queries problem. Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond to their environment. And if you accept this larger framing, there are actually new web …

Delighters.JS – Add CSS animations to delight users as they scroll down

Nice little library by Martin Kool / Q42. Delighters.js toggles classnames as you scroll. You do the rest! 🤓 Late 2013 I created a likewise thingy (dependent on jQuery) 🙂 The main class toggled is .delighter, with an extra .started or .ended to know if the animation just started or ended. /* when the library …

What’s next for React? Beyond React 16

Dan Abramov – of Redux fame – just spoke at JSConf Iceland 2018 previewing two new features that will make it in a future version of React. The first demo shows time slicing, which can be translated to async rendering: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a …

It’s not you. Phones are designed to be addicting.

Today’s phones are hard to put down. Push notifications buzz in your pocket, red bubbles demand attention, and endless distractions sit at your fingertips. It can feel impossible to pull away from. But that’s kind of the point. I never understood why people would want to get notifications for every cough and sneeze. Turn ‘m …

Hanging Punctuation in CSS

Using the hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment. Here’s a pen: See the Pen mWJJNx by Joel Drapper (@joeldrapper) …

Haiku – Lottie Without After Effects

Remember Lottie? It’s a library that can play back animations in React (Native) using a JSON file. One would define the animation in After Effects, and then export it to a JSON file for Lottie to use. But what if you don’t have After Effects? And is AE really the tool to do this job? …

Progressive Web Apps – PWA Roadshow

If you’ve totally missed out on PWAs, then this summarising video by Pete LePage is a good start. If you know what PWAs are then you might want to skip forward to the 8:30 mark, where details on the Twitter PWA (which might come to macOS soon?) are shared. In the first part of the …

The problem with usernames

In “Let’s talk about usernames” James Bennett – author of django-registration – digs deeper into an at first seemingly simple thing such as usernames and how to keep ‘m safe and unique. And no, you can’t make it by just doing a a simple comparison. You’ll have to think of more than that if you …