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.
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.
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
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:
😊 I wrote a blog post w/Vlad about this that just went live (see ⬆️ link)
Some notes: – Don't apply this to everything! Chunk content that you are applying this to – The scrollbar will shift when new content gets rendered, so use `contain-intrinsic-size` w/a placeholder size
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) 😅