Issue 23: Safari 15 and CSS Image-Set

On this weeks Stack Snack, we walk through some new changes to Safari. It is not often that a browser changes their UI in a large way so it is worth noting. We also look at some fun project starters that can help you launch your new projects

Upcoming CSS Features

Using Performant Next-Gen Images in CSS with image-set
The CSS image-set() function has been supported in Chromium-based browsers since 2012 and in Safari since version 6. Support recently landed in Firefox

Browser Updates

Safari in the upcoming version will be making a lot of UI changes. You can install Safari’s Preview on MacOS11.

Downloads - Safari - Apple Developer
Powered by the WebKit engine, Safari offers leading performance, compatibility, and a great set of built-in web development tools. Download Safari Technology Preview.

Core Web Vitals

Following up on our mega list of Core Web Vitals updates. This article walks through how Lighthouse 8.0 will rate your sites with some new percentages for each items

Page Speed Insights (Lighthouse) went through an upgrade on 1st June 2021 - what changed and how will it affect you?
Page Speed Insights is now running Lighthouse 8.0 and let me tell you, the changes that have been...

Project Starters

Useful Front-End Boilerplates And Starter Kits — Smashing Magazine
We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.
CSS Layout Generator
A CSS Grid & Flexbox generator for creating layout components.
Tailwind CSS Components
Tailwind CSS Components plugin - daisyui tailwind component library
John Siwicki

John Siwicki