--- title: "How to use the .avif image format" publication: "Frontend Focus" issue: 455 published_at: "2020-08-26" canonical_url: "https://frontendfoc.us/issues/455" --- Plus this week's browser, HTML and CSS links. #455 — August 26, 2020 [Web Version](https://frontendfoc.us/issues/455) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1598436712/sypu0bosisnrl1t1ko40.png)](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/) [How to Use AVIF: The New Next-Gen Image Compression Format](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/) — The [`.avif` format](https://github.com/AOMediaCodec/av1-avif) results in files ~50% smaller in size compared to JPEG, and ~20% smaller than WebP. [This related post from Netflix](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4) (who are seemingly fans of the file format) is also worth a read. Dan Klammer [Use Advanced Typography with Local Fonts](https://web.dev/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 [![\](https://copm.s3.amazonaws.com/6577cde9.png)](https://www.igloohome.co/en-us?utm_source=frontend_focus&utm_medium=email&utm_campaign=primary_link) [The Remote Access Smart Locks That Work Without Wi-Fi](https://www.igloohome.co/en-us?utm_source=frontend_focus&utm_medium=email&utm_campaign=primary_link) — 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](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202) — As Jen Simmons notes, leading has always [felt a bit "broken/weird in web typography"](https://twitter.com/jensimmons/status/1296209692746829826). 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](https://daverupert.com/2020/07/gettin-foldy-with-the-dual-screen-web-part-i/) — With interesting new devices like the [Surface Duo](https://www.microsoft.com/en-us/surface/devices/surface-duo) and [Surface Neo](https://www.microsoft.com/en-us/surface/devices/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](https://developers.google.com/web/updates/2020/08/devtools) — 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.](https://www.theregister.com/2020/08/22/chromium_devices_raw_sockets/) - Here are the [changes for web developers](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/80) in version 80 of Firefox - [Here's a primer on how to use the Layers Tab](https://webkit.org/web-inspector/layers-tab/) in Safari's Web Inspector. - A quick note from Steve Faulkner on [how the new `content-visibility` CSS property is exposed](https://html5accessibility.com/stuff/2020/08/25/short-note-on-content-visibility-hidden/) to screen readers and other assistive technology. - Mozilla are seeking [testers and feedback for VoiceOver support](https://blog.mozilla.org/accessibility/early-mac-firefox-voiceover-support/) in Firefox for Mac. - Running a WordPress site? There'll be [no change to the minimum PHP version](https://wptavern.com/no-minimum-php-version-bump-this-year-wordpress-to-support-php-5-6-for-a-while-longer) this year, as it will continue to support PHP 5.6 for a while longer. 💻 **Jobs** [Frontend UI Engineer](https://textile.breezy.hr/p/2efb847aca79-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](https://getstream.io/careers/job/senior-product-manager/) — We are looking for a highly skilled Senior Product Manager to help guide our product direction. Stream [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — 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](https://booking.cooperpress.com/jobs)_. 📙 **Tutorials, Stories & Opinion** [How To Build Your Own Comment System Using Firebase](https://www.smashingmagazine.com/2020/08/comment-system-firebase/) — Runs through how to add a comments section to your blog with Firebase, while learning the basics of [Firebase](https://firebase.google.com) along the way. Aman Thakur [Understanding Web Performance Monitoring](https://blog.bitsrc.io/understanding-web-performance-monitoring-2ed52f97a974) — 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](https://tsh.io/state-of-frontend/?utm_source=newsletter&utm_medium=mailing&utm_campaign=sofe_report&utm_content=frontendfocuslink) — 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](https://web.dev/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](https://blog.logrocket.com/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](https://blog.maximeheckel.com/posts/guide-to-cicd-for-frontend-developers) Maxime Heckel [Why CSS Logical Properties Aren’t Ready for Use](https://medium.com/@elad/why-css-logical-properties-arent-ready-for-use-c102925a5cba) Elad Shechter **🗓 Upcoming Events:** - **[International JavaScript Conference](https://javascript-conference.com/london)** (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online. - **[CityJS Conference](http://cityjsconf.org/)** (September 14 - 18) — Online conference and workshops. Speakers include Tan Li Hau, Ana Cidre, Kyle Simpson, Maximiliano Firtman and others. - **[Frontend Love](https://frontenddeveloperlove.com)** (October 1 - 2) — Online JavaScript conference with over over 20 frontend professionals and authors speaking. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1598436060/rzax5dpzozcylxilfzcc.png)](http://apps.workflower.fi/vocabs/css/en) [CSS Vocabulary](http://apps.workflower.fi/vocabs/css/en) — 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](https://github.com/themesberg/volt-bootstrap-5-dashboard) — See a [live preview here](https://demo.themesberg.com/volt/). Includes eleven example pages, 100+ components, and some plugins with no dependencies. Themesberg [Faven: A Web Tool to Help You Generate Favicons](https://github.com/22mahmoud/faven) — [Use it here](https://faven.netlify.app/). 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](https://squareup.com/t/f_online/d_newsletter/p_frontendfocus/l_us/dt_alldevice/pr_ecommerce_api/?route=online-payments-how-to&site=developer.squareup.com) Square Developer sponsor [Marks: A Markup Language for Blazing Fast Web Page Rendering](https://marksjs.com/) — 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](https://github.com/gruns/ImmortalDB) — Data is redundantly stored in numerous places like in cookies, IndexedDB, LocalStorage, and SessionStorage, and self heals as needed. [v1.1](https://github.com/gruns/ImmortalDB/releases/tag/v1.1.0) just came out. Ansgar Grunseid 🕰 **ICYMI** _(Some older stuff that's worth checking out...)_ - Sa11y is a [quality assurance tool](https://ryersondmp.github.io/sa11y/) that visually highlights common accessibility and usability issues. - [Here's a little snippet](https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/) 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](https://www.shopify.com/partners/blog/internationalization), 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](https://markosaric.com/degoogleify/) to commonly-used Google services. - In need of a basic way to allowing commenting on your site? [Octomments](https://ocs.now.sh) lets you use GitHub Issues to do just that. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom