A guide to overcoming CSS browser support issues

#377 — February 6, 2019 Read on the Web Frontend Focus How to Architect a Complex Web Table — Tables frequently appear on the web but aren’t particularly easy to design and code. This illustrated guide explains the anatomy of tables and how to build them properly. Slava Shestopalov Firefox 66 to Block Automatically Playing Audible Video & Audio — Version 66 is due in March, and it will block audible content by default. It will only allow a site to play audio or video aloud via the 'HTMLMediaElement' API once a page has had interaction to initiate (such as a user clicking ‘Play’). Chris Pearce (Mozilla) Free Visual Testing with Percy — Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing solution makes it easy to test your UI across browsers and responsive breakpoint widths and review all visual changes with a single click. Percy sponsor A Guide To CSS Support In Browsers — A look at the issues you may face when certain CSS features behave differently across browsers (or not at all), with some tips for getting around such roadblocks. Smashing Magazine Bandwidth or Latency: When to Optimise for Which — A simple way to quickly and roughly work out whether your assets would benefit most from an increase in bandwidth or a reduction in latency. Harry Roberts WebExtensions V3 Considered Harmful? — A strong reaction to Chrome’s proposed changes to how Web extensions will work. “The Open Web Platform is alive and vibrant. The Browser Extension ecosystem is in jail, subject to unpredictable harmful changes decided by one single actor. This must change, it’s not viable any more.” Daniel Glazman HTML, CSS and Our Vanishing Industry Entry Points — Thoughts on CSS, frameworks and the vanishing entry points to web development. The author fears a loss of something that “has enabled so many people without a traditional computer science background to be here”. Rachel Andrew 💻 Jobs Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands. X-Team Try Vettery — Vettery specializes in developer roles and is completely free for job seekers. Vettery 📘 Articles, Opinion & Tutorials ▶  Time Traveler's Guide to Accessibility Mechanics — “the time has come to invent another solution that will let us encapsulate accessibility in the shadow DOM - and its called the Accessibility Object Model”. Léonie Watson Revisiting the abbr Element — An experiment in enhancing the <abbr> abbreviation element, creating a tooltip experience that works for touchscreen, keyboard, and mouse. Ire Aderinokun The Case for Vanilla Front-end Development — Makes the argument for framework-free front-end web development using vanilla HTML, CSS, and JS. Ragnar Lonn A Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and displays the results of expressions right in your editor as you type. Wallaby.js sponsor Navigation Should Be Boring — “Almost any part of an app can be a good place to add novelty, except for one: navigation. Navigation is different. Navigation should be boring.” Allen Pike Ways to Change an SVG Fill on Hover (and When to Use Them) Cassie Evans State of gRPC in The Browser — “With the release of gRPC-Web, gRPC is poised to become a valuable addition in the toolbox of frontend developers.” Johan Brandhorst Dropbox Paper As A Headless CMS — A quick look at how to turn Dropbox Paper into a headless CMS (and use it to publish content elsewhere). Here’s the code if you want to take a look. Jasper Moelker Setting Up a MongoDB Service Under Windows via PowerShell Studio 3T sponsor Basic Color Theory for Web Developers Nicole Zonnenberg 🔧 Code and Tools CSS Grid: Excel Spreadsheet — An impressive recreation of the Excel user interface using CSS Grid. Olivia Ng codepen stylelint: A Modern Style Linter — A linter with over 160 built-in rules to help “catch errors, apply limits and enforce stylistic conventions”. Here’s the repo. stylelint Lightning-Fast GraphQL Service for Ecommerce✌️PIM & Subscription Commerce 🎉 Crystallize sponsor Cattle Grid: A Configurable CSS Flexbox Framework — A lightweight, basic flex CSS Grid built from simple Mixins. Ruth Johnson Usability Hike: A Chrome Extension to Find Usability Problems Ulmo    🗓 Upcoming Events Frontend Developer Love, February 13-15 — Amsterdam, Netherlands — The biggest frontend developer / JS conference in the Netherlands. An Event Apart, March 4-6 — Seattle, Washington — A 3-day conference with 17 sessions and a focus on digital design, UX, content, code, and more. UpFront Conference, March 22 — Manchester, UK — A frontend conference 'open to everyone who makes for the web'. SmashingConf, April 16–17 — San Francisco, California — A friendly, inclusive event which is focused on real-world problems and solutions

by via Frontend Focus