It's time to start caring about AVIF

#457 — September 9, 2020 Web Version Frontend Focus AVIF Has Landed — This is a fantastic dive into all of the benefits of the AVIF image format and how you can use it now. Plenty of great visual examples, along with details on the techniques and codecs behind the tech. The F1 image above clocks in at just 18.2 kB when in the .avif format. 🤯 Jake Archibald Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs — David Atanda digs into a number tools that we have at the ready, from responsive images to relatively new CSS functions, that work naturally whether we use media queries or not. CSS-Tricks The Essential Guide to Building Analytic Applications — What are best practices when designing the UI and UX of embedded dashboards, reports, and analytics? What are common mistakes to avoid? We talked to 16 experts about what it takes to build a successful application with analytics at its core. Logi Analytics sponsor Designing With Reduced Motion For Motion Sensitivities — Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities. Val Head Working with JavaScript Media Queries — Yep, when I think of media queries I’m thinking of something in a CSS file, but as Marko explains we also have media queries for JavaScript too. Here, he outlines how the concepts are similar but they work in a very different way. Marko Ilic ⚡️ Quick bits: Chrome 86 (out in October) will add support for the CSS ::marker pseudo-element, perfect for styling bullet elements. Version 3.3 of the Vivaldi browser is out now, featuring a new 'Break Mode' which puts a pause on access to your tabs. 💻 Jobs Sr. Engineer @ Dutchie, Remote — Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital. DUTCHIE Front End Development Leader — Wanted: A Front End Developer to lead a group of young software developers. Help us change the insurance industry for the better. BRANCH INSURANCE Find Your Next 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, Articles & Opinion Comparing Browsers for Responsive Design — A look at the various specialist dev browsers that are available for simultaneously viewing your site at different dimensions. Chris Coyier Mozilla CEO Urges European Commission to Seize ‘Once-in-a-Generation’ Opportunity — In the open letter, Mitchell Baker asks the European Commission President Ursula von der Leyen to seize the moment and “build a better internet through the opportunity presented by the upcoming Digital Services Act”. Mozilla Virtual Square UnBoxed 2020 — 2020 gave us 🍋, app devs are helping business owners make 🍹. Get inspired and join our free, 90 min virtual event. Square sponsor ▶  Accessible Color Standards — Covers what the A, AA, and AAA conformance levels mean and how to ensure proper accessibility compliance for your own site. Una Kravets Is There A Google-Free Future For Firefox? — Firefox is said to be exploring subscriptions and other “value exchange” services to ease its financial dependence on rival Google. Barry Collins What is the Value of Browser Diversity? — Considered thoughts on the seemingly increasing dominance of Chromium in the browser landscape. Dave Rupert ▶  How to Organize and Sync SVG Files with Iconset — A look at how the cross-platform tool Iconset can be used to keep all your SVG files organised. Colby Fayock Getting Started With Chrome and Firefox Developer Tools — A decent guide for beginners to learn both the console and developer tools for Chrome and Firefox browsers. Albert Kim beginner Web Brutalism, Seamfulness, and Notion — An essay on brutalism in web design and how note taking app of the moment Notion captures the Brutalist ethos, thoughtfully balancing “the tension between seamfulness and seamlessness, revelation and disclosure”. Brandon Dorn Ten Tips to Improve Productivity When using Chrome Dev Tools Rumesh Eranga Hapuarachchi Everything Developers Need To Know About Figma Jurn van Wissen How to Simplify SVG Code Using Basic Shapes Mariana Beldi 🗓 Upcoming Events: CityJS Conference (September 14 - 18) — Online conference and workshops. Speakers include Tan Li Hau, Ana Cidre, Kyle Simpson, Maximiliano Firtman and others. Web and Machine Learning Workshop (Various September dates) — This event from the W3C aims to bring together providers of ML toolkits and framework providers with web platform practitioners. Improving Web Animations by Learning from Performance Mistakes (September 21) — Rowan Merewood, Developer Advocate for Chrome at Google will deliver a free, personal talk on things discovered trying to build fun animations on the web. Front-End Web Development Foundations (September 28) — An in-depth, four half-day live online training event that "will give you a foundation of front-end web development". Frontend Love (October 1 - 2) — Online JavaScript conference with over over 20 frontend professionals and authors speaking. ImageReady (October 2) — A free half-day online event featuring talks about modern image formats. 🔧 Code, Tools and Resources vanilla-colorful: A Tiny Color Picker for Modern Web Apps — See a demo here. It’s built as a Custom Element with TypeScript, framework-agnostic, no dependencies, and mobile friendly. Serhii Kulykov 345Tool.com: Tools for Formatting, Minifying, and Converting Code — This is a collection of coding-related tools that includes minifiers, generators, formatters, encoders, decoders, and converters. 345Tool.com 500M End-Users Depend on Our Scalable Chat & Activity Feed APIs Stream sponsor JSchallenger: Learn JavaScript by Solving Coding Exercises — I like that the homepage shows the “most failed” challenges, which can give you an idea of the kind of thing other developers are having trouble with. Erik Kückelheim Inspect: The 'New Standard' for Mobile Web DevTools — A new developer tool (currently in early access) for macOS and Windows to inspect and debug your web apps and websites on iOS devices. Kenneth Auchenberg 🕰 ICYMI (Some older stuff that's worth checking out...) Timothy Vernon looks at how you can improve site performance by inlining CSS - the right way. Enter a URL and this tool will tell you where a site is being hosted. Sandrina Perera shares how to strike a good balance between native and custom select elements. Working with Vue.js and Nuxt.js? Here's a look at the different ways in which you can apply CSS transitions in both. Jesse Breneman shows us how to build a hexagonal grid (think Settlers of Catan) using CSS grid properties.

by via Frontend Focus