#380 — February 27, 2019

Read on the Web

Frontend Focus

Exploring a Back/Forward Cache for Chrome — The Chrome team are experimenting with a way to navigate back and forth, which thanks to caching pages in-memory (preserving JS and DOM states) will allow for ‘instant’ navigation to previously visited pages. Both Firefox and Safari already have similar back-forward cache implementations.

Addy Osmani (Google)

When is a Button not a Button? — Not everything that’s round and stands out is considered to be a button. Here’s an explainer on how you can create a proper interactive button for your users — one that shouldn’t be confused for anything else.

Vadim Makeev

What Should Developers Consider When Planning a React Application? — Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy.

Progress KendoReact sponsor

The Dark Side of the Grid — The first in a series on the CSS Grid Layout spec, highlighting the new ‘dangers’ regarding accessibility and UX that it creates.

Manuel Matuzovic

?  The Lost Art of MIDI: Bringing It Back to the Web — Bringing MIDI and the obsolete bgsound back from the dead using WebAssembly, Emscripten, Web Audio, and Web Components. Give your webpages the 90’s treatment in a fun, modern and standards-compliant way.

Feross Aboukhadijeh

? Jobs

Sr Frontend Dev. JS & React (Berlin, DE) — Product-focused ML startup looking for a new talent to build and refine the experience of our B2B product.

jobpal

Find A Job Through Vettery — Vettery specializes in developer roles and is completely free for job seekers. Create a profile to get started.

Vettery

? Articles, Tutorials & Opinion

WebP support in modern browsers

A Complete Guide to Using the WebP Image Format — Although not universally adopted just yet, Edge, Chrome, Opera and Firefox do now support Google’s WebP image format. This guide has a few tips that may be one worth referencing once support is more widespread.

Hongkiat Lim

Build Great PDFs on the Web Using SVG — How to generate print-ready PDFs directly from standard web frontend code by leveraging SVG.

Li He

How Do Top Developers Deliver Video? – Download the Video Report — Dive into the insights of video developers from Broadcasters, Integrators, Publishers, Telcos and more.

Bitmovin sponsor

?  Accessibility Is Not A “Nice to Have” — Jeffrey Zeldman and Derek Featherstone ask why companies de-prioritize accessibility.

The Big Web Show podcast

Making Google Fonts Faster — A few additional steps you can take to achieve much faster load times.

Sia Karamalegos

Properly Size Images for the Web — A reminder in serving images at the size they’re actually rendered at.

Victor Zhou

Advanced JavaScript Logging Using console.group() — A golden oldie recommended to us by Kristian Roebuck, the world’s 29th most followable JavaScript developer.

Marius Schulz

Build Enterprise-Grade Apps for Free with Ext JS Community Edition

Sencha, Inc. sponsor

Using Artificial Intelligence to Generate Alt Text on Images

Nino Ross Rodriguez

21 Ways to Optimise Your CSS and Speed Up Your Site

Tam Hanna

? Code and Tools

capture-website: Capture Screenshots of Websites — A high-level Puppeteer wrapper to make it easy to capture screenshots of websites from Node or the command-line.

Sindre Sorhus

Boilerform: A Boilerplate to ‘Take The Pain Away’ From Working with Forms — Provides a solid baseline for building forms. Here’s the pattern library.

Andy Bell

? Create Feature-Rich JavaScript Data Grids & Tables with ZingGrid

ZingGrid sponsor

Buefy: Lightweight UI Components for Vue.js Based on Bulma — A set of responsive UI components for Vue.js based on the Bulma CSS framework.

Buefy

Howler.js: An Audio Library for the Modern Web — Get a simple API for your audio needs across all platforms. No dependencies, too.

James Simpson

HEX, RGB, HSL Converter — A handy browser-based color converter that quickly translates a HEX value to RGB and HSL.

Pankaj Parashar

ICONSVG: Find, Customize & Generate Common SVG Icons for Your Project — A good collection of common icons here.

Gaddafi Rusli