httpstat – curl statistics made simple

httpstat visualizes curl(1) statistics in a way of beauty and clarity.

It is a single file🌟 Python script that has no dependency👏 and is compatible with Python 3🍻.

Installation through PiP or HomeBrew:

pip install httpstat
brew install httpstat

Once installed through one of those, you can directly call httpstat:

httpstat https://www.bram.us/

httpstat – curl statistics made simple →

Enhancing User Experience With CSS Animations

Great talk by Stéphanie Walter:

With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need to be careful about to build inclusive and accessible motion and avoid making some people sick.

Be sure to check the post on her website too, as it contains a full writeup, videos, examples, slides, links to extra resources, etc.

Enhancing User Experience With CSS Animations →

Track Your Smartphone in 2D With JavaScript

Sanjeet Chatterjee built this nice demo where your smartphone can act as a virtual pointer for a webpage shown on screen.

With a fundamental shift to the web, we are able to do really cool things right from our browser. In this tutorial, we will be utilising the Generic Sensor API to turn your smartphone into a pointer with real-time tracking.

The “quaternions” provided by the AbsoluteOrientationSensor API are converted to yaw/roll, and transferred to the canvas-page using SocketIO.

Unfortunately it doesn’t work on iOS at the moment, as MobileSafari does not support AbsoluteOrientationSensor:

Data on support for the mdn-api__AbsoluteOrientationSensor feature across the major browsers

💡 Shown above is an interactive CanIUse.com embed, showing an always up-to-date support table. By the time you are reading this browser support might have become better.

PhoneTrackingDemo Canvas →
PhoneTrackingDemo Controller →
PhoneTrackingDemo Source (repl.it) →

☝️ If you lack an Android Smartphone with a modern Chrome on it, you can test it all out using Chrome on Desktop: use the Sensors panel to emulate/override the position of the device.

Blind Spot

While working with CCTV cameras in a project, I was reminded of this short film from 2007:

redaxios – The Axios API, as an 800 byte Fetch wrapper.

Axios has a great API that developers love. Redaxios provides that API in 800 bytes, using native fetch().

For those searching for ways to shave a few kilobytes off of their bundles, that’s less than 1/5th of the size. This is made possible by using the browser’s native Fetch API, which is supported in all modern browsers and polyfilled by most tools including Next.js, Create React App and Preact CLI.

To swith from axios to redaxios, you only need to adjust your import statement

import axios from 'redaxios';
// That's it! Use as you would normally

redaxios →

content-visibility: the new CSS property that boosts your rendering performance

Coming to Chromium 85 is content-visibility (part of Display Locking):

content-visibility enables the user agent to skip an element’s rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content. Pretty neat.

You see that correct in the image above: rendering went from 232ms down to 30ms … that’s a 7x improvement!

Now don’t go plastering this all over your site, but use it carefully. As Una noted:

Combined with contain-intrinsic-size it’d look like this:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

content-visibility: the new CSS property that boosts your rendering performance →

React Refresh Webpack Plugin

If you’re using React Hot Loader, it’s time to start looking at React Refresh Webpack Plugin, an EXPERIMENTAL Webpack plugin to enable “Fast Refresh” (which you might know from React Native) for React components. It’s also to be included with Create React App version 4.0 (now in alpha).

Installation per NPM/Yarn:

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Once installed you must also adjust your Webpack and Babel configs to activate it.

React Refresh Webpack Plugin →

🙀 In case you’re a bit scared by that EXPERIMENTAL word in there, here’s what Dan Abramov – author of React Hot Loader, amongst many other things – says about it:

Modern CSS grid solutions to common layout problems

Kevin Pennekamp (Vycke):

With the addition of grids, we can overcome media-query fatigue. Not only make our CSS more maintainable, but they also improve the user experience. We can let CSS handle the available space. In this article, I will describe three layout implementations that can improve your (personal) website.

The addition of Grid Layout to CSS indeed has changed the way I lay out web pages quite a lot. I don’t event want to go back to using floats (or tables, before that) 😅

Modern CSS grid solutions to common layout problems →