Take a (Client) Hint!
A presentation at FullStack Fest in in Barcelona, Spain by Jeremy Wagner
@malchata
Client hints are both server headers we can detect on the back end and objects we can reference in JavaScript (e.g., navigator.connection) that application developers can use to tailor application resource delivery to accommodate users’ devices and preferences for reduced data usage.
In this talk, we’ll cover the various client hints available. By the end, you’ll understand how to sniff for them on both the front and back end, and adjust your application on the fly to adapt to the user. You’ll also get some inspiration as we step through a few recipes involving these useful little hints. You won’t want to miss it!
for free. You
can too.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Automatic responsive images with Client Hints
Learn how to scale an image using Cloudinary's "Automatic Width" and "Automatic DPR" transformations to implement automatic responsive images solution.
-
Client Hints and Responsive Images - What Changed in Chrome 67
Chrome 67 changed desktop Client Hints for privacy concerns. Mobile users download 42% less bytes with w_auto and Client Hints. Feature Policy API coming.
-
Delivering Fast and Light Applications with Save-Data
he Save-Data client hint request header available in Chrome, Opera, and Yandex browsers enables developers to deliver fast and light applications to users who have opted-in to "data saving" mode in the browser.
-
Help Your Users `Save-Data`
When enabled, Chrome's Data Saver mode sends a
Save-Datarequest header you can use to help users conserve data. How you will help your usersSave-Data? -
Automating Resource Selection with Client Hints
Image optimization is hard and automation is the key to success.
Buzz and feedback
Here’s what was said about this presentation on social media.
