#455 — August 26, 2020

Web Version

Frontend Focus

How to Use AVIF: The New Next-Gen Image Compression Format — The .avif format results in files ~50% smaller in size compared to JPEG, and ~20% smaller than WebP. This related post from Netflix (who are seemingly fans of the file format) is also worth a read.

Dan Klammer

Use Advanced Typography with Local Fonts — A look at how the in-development Local Font Access API allows you to access a user’s locally installed fonts and obtain low-level details about them.

Thomas Steiner

The Remote Access Smart Locks That Work Without Wi-Fi — Protect your property with the Deadbolt 2S Metal Grey, Keybox 3, or Smart Padlock. Choose the access level. Share a one-time, permanent, duration, or recurring PIN with family, friends, guests, and employees. Take 10% off with code FRONTENDFOCUS

igloohome sponsor

Leading-Trim: The Future of Digital Typesetting — As Jen Simmons notes, leading has always felt a bit "broken/weird in web typography". The CSS Working Group are working on it, and the hope is an emerging CSS standard can fix old problems and raise the bar for web apps.

Ethan Wang

Gettin’ Foldy with The Dual-Screen Web — With interesting new devices like the Surface Duo and Surface Neo on the horizon, Dave not only shares his thoughts on dual-screen web design in this two part blog entry, but also kicks the tires on Microsoft’s Dual Screen Windows emulator.

Dave Rupert

A Look At What's New In DevTools for Chrome 86 — Includes a new Media panel, the ability to capture node screenshots, emulate missing local fonts, and more.

Jecelyn Yeen (Google Developers)

⚡️ Quick bits:

💻 Jobs

Frontend UI Engineer — We are a remote, open-source, mission-driven company building developer tools for the decentralized web. Come build with us.


Stream Provides APIs for Building Activity Feeds and Chat — We are looking for a highly skilled Senior Product Manager to help guide our product direction.


Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.


➡️ Looking to share your job listing in Frontend Focus? More info here.

📙 Tutorials, Stories & Opinion

How To Build Your Own Comment System Using Firebase — Runs through how to add a comments section to your blog with Firebase, while learning the basics of Firebase along the way.

Aman Thakur

Understanding Web Performance Monitoring — A decent guide to measuring web performance and finding common performance issues in a modern web app.

Himanshu Jariyal

State of Frontend 2020 Survey Results — 74% of frontend developers use React, 54% like TypeScript better than JS, and 31% think that CSS in JS will be dead soon.

The Software House sponsor

Sign-in Form Best Practices — Looks at how to use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.

Sam Dutton

A Guide to Theming in CSS — How to create apps that are theme-aware using CSS variables and JavaScript.

Ogundipe Samuel

The Little Guide to CI/CD for Frontend Developers

Maxime Heckel

Why CSS Logical Properties Aren’t Ready for Use

Elad Shechter

🗓 Upcoming Events:

  • International JavaScript Conference (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online.
  • CityJS Conference (September 14 - 18) — Online conference and workshops. Speakers include Tan Li Hau, Ana Cidre, Kyle Simpson, Maximiliano Firtman and others.
  • Frontend Love (October 1 - 2) — Online JavaScript conference with over over 20 frontend professionals and authors speaking.

🔧 Code, Tools and Resources

CSS Vocabulary — This is a neat little visual tool to help you understand different CSS terms (property, keyword, statement, etc).

Ville V. Vanninen

Volt: A Free Bootstrap 5 Admin Dashboard Using Only Vanilla JavaScript — See a live preview here. Includes eleven example pages, 100+ components, and some plugins with no dependencies.


Faven: A Web Tool to Help You Generate FaviconsUse it here. Works offline, client-side only, produces a ZIP file with 20+ icon dimensions and formats.

Mahmoud Ashraf

Online Checkout Made Simple with Square’s Payments APIs and SDKs

Square Developer sponsor

Marks: A Markup Language for Blazing Fast Web Page Rendering — Similar to Markdown but with a few extra features including the ability to add styles and the use of custom components.

françois skorzec

ImmortalDB: A Resilient Key-Value Store for the Browser — Data is redundantly stored in numerous places like in cookies, IndexedDB, LocalStorage, and SessionStorage, and self heals as needed. v1.1 just came out.

Ansgar Grunseid

🕰 ICYMI (Some older stuff that's worth checking out...)