How to use the .avif image format

#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 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: The Chromium team are looking for ways for the browser to have access to direct TCP and UDP sockets. Here are the changes for web developers in version 80 of Firefox Here's a primer on how to use the Layers Tab in Safari's Web Inspector. A quick note from Steve Faulkner on how the new content-visibility CSS property is exposed to screen readers and other assistive technology. Mozilla are seeking testers and feedback for VoiceOver support in Firefox for Mac. Running a WordPress site? There'll be no change to the minimum PHP version this year, as it will continue to support PHP 5.6 for a while longer. 💻 Jobs Frontend UI Engineer — We are a remote, open-source, mission-driven company building developer tools for the decentralized web. Come build with us. Textile.io 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. Stream 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. Vettery ➡️ 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. Themesberg Faven: A Web Tool to Help You Generate Favicons — Use 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...) Sa11y is a quality assurance tool that visually highlights common accessibility and usability issues. Here's a little snippet on how the scroll-margin-top property can solve the problem of in-page jump link content getting obscured by a fixed header. Lots of good practical tips and suggestions here for anyone building for a global audience, including design considerations, text size, pseudo-localization, cultural differences, and more. Don't want to rely on Google stuff so much? This post looks at lots of alternatives to commonly-used Google services. In need of a basic way to allowing commenting on your site? Octomments lets you use GitHub Issues to do just that.

by via Frontend Focus