Thank you to Rowan Merewood for his patient explanation and review of this post. Client Hints are a content negotiation tool and can help with making responsive images easier to work with and give you other tools to help create a better user experience. They are a set of HTTP request headers allowing clients to indicate a list of device and browser preferences. Using client hints isn’t automatic: servers must tell clients what hints they want clients to send using the Accept-CH (accept client hints) header: Accept-CH: Width, Viewport-Width, Downlink or an equivalent HTML meta element with the http-equiv attribute.
I’ve told myself for a while that I would learn how to write and use tests for front end code. Most of the code and tutorials I’ve seen are written for backend code. But using tools like Playwright together with Mocha and the Chai assertion library we can build very robust testing for front end code that works in multiple browsers. Background: Playwright Playwright is Microsoft’s browser testing and automation library. It allows you to control a browser: Chrome, Firefox, or Safari (WebKit) and perform operations as if you were working on the browser directly. Because we support multiple browsers
Normally, only some elements have an aspect ratio, for example, images. For them, if only the width, or the height, is specified, the other is automatically computed using the intrinsic aspect ratio. In this example, the browser will calculate the height of the image using the width and the image’s intrinsic dimensions. <img src=”…” style=”width: 800px;”> The aspect-ratio property allows developers to explicitly set the aspect ratio of an element (not just those that already have an aspect ratio) and use it when one of the measurements is missing. The example below, taken From Una Kravetz codepen shows how this