Developing for Safari on Windows 10 / Linux

Fabian — Sat, 23 Jan 2021 15:05:36 +0000

Are you a Web Developer?
If yes, my bet is that you are probably developing on one of the following browsers: Chrome, Opera, Firefox, Edge, Brave or Safari.

In the end, it boils down to the big three browsers:

Chromium based
Safari
Firefox

Even though I am currently a kind of happy Firefox user, the market share of the browser is converging to zero and ultimately it seems like the browser is dying. They even decided to close the ticket regarding the install option for PWA without plans of continuing.

Beside the nagging, a lot of consumers are effectively using Safari on desktop and especially mobile. (cf. statcounter or Can I Use)

So, how do we as Web Developer test on Safari, without feeling uncomfortable? In the past I had jobs where I could make use of a local MacBook or paid services like browserstack. It felt burdensome for me to work on a macOS, mostly because I was not used to it and my peripherals were somewhere else. And even if you would have a macOS at your workplace, given the fact that most of us are working from home right now, this is no longer an option.

🤝 The solution

Have you heard of Playwright?
If your answer is no, then let me tell you that Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. In fact, the API is very simular to Puppeteer, because two of the Developers moved from Puppeteer to Playwright. (cf. Puppeteer Contributions vs. Playwright Contributions)
If your answer is yes, and if you are not using Safari yet for testing purposes as Windows or Linux user, then congratulations, you are just like me 🤡.

The solution was right in front of us and I am happy to share a little snippet to kickstart the browser, so that we all can create better applications 🚀

// unflagged top-level await from Node 14.8.0+
import { webkit } from "playwright";
const browser = await webkit.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://www.whatismybrowser.com/");

For anything else, please refer to the official playwright documentation.

🖼 Further improvements on Windows

If you do not want to execute the .js file everytime you want to make use of Safari, follow these steps:

Execute the script
Open the Task Manager, go to tab 'Details', right-click on Playwright.exe and select 'Open file location'.
Right-click on Playwright.exe in the folder and click on 'Create shortcut'
(optional) download Safari Icon from wikipedia, convert it to an icon, save it in the folder, right-click on the shortcut, properties 'Change Icon' and select the .ico.
Right-click the shortcut and select 'Pin to Start'

Enhancing Images on the Web

Fabian — Tue, 30 Jun 2020 21:23:20 +0000

As a developer, I noticed that I sometimes code:

<img ...>

However, there are some points to consider when working with images:

Lazy Loading
Responsiveness
Avoiding Layout Shifts
File Size
Intial fast load
Accessibility
Art Direction

Which leads to the question — is there a way to combine as many points of them as possible with one approach? Luckily there is.

The importance of images

First, let’s emphasize why we should care about this. On HTTP Archive it is noticable that 47.3% of the total sent KB per page are from images on desktop in 2020 (47.9% on mobile).

Page Weight on HTTP Archive

Because the summed bytes do not equal the Total Kilobytes, I created the following chart.

Images: 31.5% for Desktop | 32.5% for Mobile

Altough videos are the most significant ressources considering the size, images are on the next place and from a developers perspective, almost all applications are using images which is not true for videos.

Another reason for improving images is to make yourself and other people happy browsing on the web. The internet connection might be weak or the mobile data plan might be throttled. Both causes lead to long waiting times, which are definitely unwanted😔.

The approach

Native lazy loading is supported in all modern browsers beside Safari (support is in the Experimental Phase). It can be added via an attribute on the element.

<img loading=”lazy" src="...">

https://caniuse.com/#feat=loading-lazy-attr

Alternatively it is possible to use a library which polyfills this functionality. Beside lazy loading to reduce the initial payload, the images could be optimized. However, this is something off the web which would contain reducing quality, reducing the dimensions width and height and transforming the image to better types such as webp or AVIF™(flagged support in Firefox).

webp support https://caniuse.com/#search=webp

Progressive Image Loading — a way to display a low quality preview image and loading the high quality picture at the same time, would also be a great way to save bytes for the intital load (like on medium). While there are libraries for this, I tried to do this without altering the HTML and display the image simultaneously to the request via Streams. Example of fetch progress here. Sadly, this did not work. Even though the browser was able to display an halfway received image, the transformed Uint8Array could not resolve to an image. Here is the used code to transform the array:

function createImageFromArrayBuffer(type, arrayBuffer) {
 const base64String = 
   btoa(String.fromCharCode(...new  Uint8Array(arrayBuffer)));
 const image = new Image()
 image.src = `data:${type}base64,${base64String}`;
 return image;
}
document.body.append(createImage("image/jpeg", arrayBuffer));

We will come back to Progressive Image Loading at a later state.

So how is it possible to fix responsive layout and layout shifts at the same time? Both approaches require information about width and height — in HTML and CSS. While setting it in HTML seems like an old fashioned way, it is actually helpful for the browser since December 2019 (Chrome and Firefox). And it will stay responsive as long as the CSS remains. Awesome🎉

Now, only accessibility, art direction and intial fast load remain open. From my perspective, there is not much to do for accessibility beside adding an alt attribute to the <img>.

Art Direction — means that an image might be cropped, exchanged etc. depending on device size, device resolution, dpi, orientation and more. This is easily achievable with the <picture> element via the media attribute and subelements. Those subelements can also be used to let the browser choose the best image type and to change to a higher resolution picture, when needed. (This works with lazy load🤯)

// type
<picture>
  <source srcset="logo2x.webp" type="image/webp" media="(min-width:
    601px)">
  <source srcset="logo1x.webp" type="image/webp" media="(max-width:
    600px)">
  <img loading="lazy" src="logo.jpg" alt="logo" height="320" 
    width="320">
</picture>// srcset
<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img loading="lazy" src="logo-320.png" alt="logo" height="320" 
    width="320">
</picture>

Which combines almost all of our best practices. That is where progressive loading for the intial fast load comes in. Because it is not natively supported, I created a library. All there is to do is adding data-src attributes for the high quality picture and putting the URI of the low quality picture in the srcset and src. It will even change the to the next picture’s width and height attributes, however, it would be probably preferable if these stay the same.

This is where you can find a masonry demo.