Web Tools #410 - bfcache, CSS Tools, Vue Tools, Uncats

Advertisement

Last year Philip Walton wrote an article on Google's web.dev on a new feature supported by Chrome, Firefox, and Safari called back/forward cache or bfcache for short.

This is not a feature that you as a developer can implement, it's something that's built into the browser. But, as Philip explains in the article, it is something you can optimize for.

What is bfcache? To quote the article:

"bfcache is an in-memory cache that stores a complete snapshot of a page (including the JavaScript heap) as the user is navigating away. With the entire page in memory, the browser can quickly and easily restore it if the user decides to return."

The article embeds a video to show you the difference between a website using bfcache compared to one not. If you've navigated the web on mobile, then you'll immediately see what a huge benefit this is when it's in use.

Philip also explains the APIs you can use to understand when the feature is working:

"The primary events used to observe bfcache are the page transition events—pageshow and pagehide—which have been around as long as bfcache has and are supported in pretty much all browsers in use today."

Suggestions for optimizing for bfcache include:

• Never use the unload event (which doesn't work the same as it used to anyhow)
• Only add beforeunload listeners conditionally
• Avoid window.opener references (i.e. opening a link in a new window without using rel=noopener)
• Always close open connections before the user navigates away

CSS and HTML Tools

Cloudways Hosting
A managed cloud hosting platform for digital agencies, developers, and e-commerce businesses offering simplicity, great performance, expert 24/7 support, and powerful team collaboration features.   sponsored 

tailwindcss-capsize
A port of Capsize, a Tailwind plugin for trimming the white space above and below text nodes.

Stacking Contexts Inspector
Chrome extension to assist in using z-index by allowing you to inspect stacking contexts.

react-spinners-css
A collection of React loading spinner components made with CSS.

CSS Filters Generator
Interactive tool to fiddle with basic CSS or SVG filters. You can upload your own image, make adjustments, then grab the CSS or HTML/SVG code.

CQFill
A polyfill for the CSS Container Queries spec, which uses the new contain and content-visibility properties.

Font Subsetter
Online tool that lets you upload a font file, select the glyphs you intend to use, then download the specified subset, rather than using the entire set of glyphs.

Tailwind JIT as a CDN
Use the full power of Tailwind's new JIT compiler by including one script tag to your HTML.

Font Brief
A font discovery tool that lets you find the right font for your project intuitively, by searching for attributes of your brand personality.

Transition.css
A collection of over 40 drop-in CSS animations that you can test out directly on the page.

Input
A flexible system of fonts designed specifically for code that offers both monospaced and proportional fonts, all with a large range of widths, weights, and styles for richer code formatting.

Formium
A form builder service with a drag-and-drop editor with a free plan that offers 10 forms and 100 monthly submissions.

tailwindcss-scroll-snap
Adds CSS Scroll Snap top Tailwind using CSS custom properties.

Vue Tools

motion
Vue Composables to put your components in motion featuring smooth animations based on Popmotion, a declarative API, and plug-and-play with 10+ presets.

Pinia
Intuitive, type safe and flexible Store for Vue using the Composition API with DevTools support.

vue-cli-plugin-vite
An out-of-the-box solution to allow you to use Vite with the vue-cli.

Vite SVG loader
Vite 2.x plugin to load SVG files as Vue components.

Vue3 Icon Picker
An icon picker component for Vue 3 projects.
 
Vue Tiny Validator
Tiny validation library (~0.7K gzip'd) without dependencies for Vue 3, inspired by vee-validate and Vuetify's validation.

Vue Chemistry
Reactified JavaScript functions for Vue, powered by reactify from VueUse.

Chūshō
A small library of unstyled and accessible components for Vue.js 3 (alert, button, collapse, etc).

vue-easytable
A data table component for Vue with features like column sorting, fixed column/header, and lots more.

Vuex
A state management solution for Vue 3.

On the Release Radar:

• vue-mention - @-mentions library now at v1+
• VueUse - Currently at v4+ or v5 beta
• vue-router-next - The official Vue router is now at v4+
• Vue I18n - Now at v9+
• vue-content-loader - Placeholder loading now at v2+

The Uncategorizables

Qatir
A privacy-focused web analytics platform with a free plan of up to 10,000 page views per month.

Mighty
A new browser streamed from the cloud that lets you have more tabs while taking 10x less memory.

Paletter
Not free. A color palette tool for Mac that lets you create professional color palettes from a single color.

domain.garden
Helps you to find great, clever domain names for your new idea, side project, or business.

MarkShow
Create slideshow presentations from markdown.

Glyphics
A platform to build feature-rich QR experiences for walking tours, product docs, signage, packages/labeling, and more.

Cusdis
A lightweight, privacy-first, open-source comment system that's an alternative to Disqus.

Calendso
Open source Calendly alternative with no branding, free if you self host.
 
Image to Sketch
Convert any photo to a sketch that looks hand-drawn, based on advanced AI technology.

Reverse Engineer's Toolkit
A collection of tools to use if you're interested in reverse engineering and/or malware analysis on x86 and x64 Windows systems.

Autocode
Instant endpoints for anything. Trigger endpoints from SaaS events using a built-in scheduler or just via web request.
 

A Tweet for Thought

A reminder that maybe it's not good to pixelate sensitive data.

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

If you're shopping for tech products, you might want to check out RecoRank. It's a site that aggregates expert product reviews (not customer reviews) from various sources, to help you make a decision on a purchase.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books