Thoughts on Browser Engine Diversity

#410 — September 25, 2019 Read on the Web Frontend Focus Inconsistent Behavior Among Browsers When Clicking on Buttons? — Upon noticing that browsers handle a <button> click in differing ways, the author digs into these differences, and shares his findings here (along with some ways to overcome these inconsistencies). Zell Liew Wikipedia's JavaScript Initialization on a Budget — As one of the world’s most heavily used sites, Wikipedia wants to keep things running as quickly as possible, including delivering all of their JavaScript within 28KB. Here’s what they’ve done to (almost) reach the goal. Timo Tijhof Want a Better Way to Store and Serve Images and Videos? — Join a community of over 400K web and mobile developers dynamically managing rich media with Cloudinary. Try it free. Cloudinary sponsor Browser Engine Diversity — Some thoughts on the decreasing diversity in the browser space: “What we may have lost in browser engine diversity we may gain back in the openness of browser engines and outside players stepping up.” Chris Coyier An HTML Attribute Potentially Worth $4.4M to Chipotle — The author discovered an autofill bug in Chipotle’s checkout process that could be costing the food company upwards of $4 million annually. Jason Grigsby Filtering Data Client-Side: Comparing CSS, jQuery, and React — Let’s say you have an unordered list of names (or a similar type of data) and you want to filter them client-side, what’s the best way to do it? Here are live code examples of three options. Chris Coyier 💻 Jobs Mobile App Developer Wanted for High-Growth Fundraising Platform — Join a dispersed team of thinkers and tacticians; micromanagers are non-existent. We have a big vision, and everyone embraces it. CareersJS Find a Frontend job through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📙 Articles, Tutorials & Opinion Variable Fonts & The New Google Fonts API — A look at how variable fonts (and the related syntax) are going to work in Google Fonts going forward. Jason Pamental ▶  Mind The Gap, User Centered Design in Large Organizations — Luke’s talks are always filled with great insight, examples and real-world data to back up his thoughts. Here he talks about the gaps that often appear between customer and company, and idea and implementation at large companies - often resulting in user hostile practices. Luke Wroblewski Designing Complex Responsive Tables in WordPress — What you need to know about designing complex tables for mobile visitors in WordPress. Suzanne Scacca Smoother and Sharper Shadows with Layered box-shadows — Using a simple CSS trick to get fine-tuned control over how shadows are rendered creating “richer and more realistic 3D effects”. Tobias Bjerrome Ahlin Get a User's-Eye View of Your Systems with Datadog Synthetics Datadog Synthetics sponsor Intelligent Tracking Prevention (ITP) Version 2.3 in Safari — ITP 2.3 includes updates to the Storage Access API, and introduces two new further steps to combat so-called link decoration (for the purposes of cross-site tracking). John Wilander How to Build Unique, Beautiful Websites with Tailwind CSS — A look at how to use Tailwind, a highly customizable CSS framework. Ivaylo Gerchev More Options to Help Websites Preview Their Content On Google Search John Mueller (Google) 🔧 Code, Tools & Resources augmented-ui: A 'Futuristic, Cyberpunk-inspired' UI Library — The repo is here, and you can see examples of the look here. PropJockey Workbox: JavaScript libraries for Progressive Web Apps — We've linked to this popular collection of libraries before - version 5.0 is currently in beta. Google The 10 Best Chrome Extensions for Product Designers Brendan Mahony 100,000 Free-to-Download AI-Generated Faces — You could use these for avatars, testing, etc. though they're being offered on a non-commercial only basis for now. Another way to generate such faces is to refresh This Person Does Not Exist. Generated Photos    🗓 Upcoming Events Fronteers Conference, October 3-4 — Amsterdam, Netherlands — One of Europe’s premiere conferences on front-end web development. SmashingConf New York, October 15-16 — New York, USA — The conference is sold out, but some workshop tickets are still available. Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility. Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world. 🕰 ICYMI (Some older stuff that's worth checking out...) This list of everything that could go in the <head> section of your document is worth a skim. Bill Mei runs through ten CSS mistakes that both new and experienced developers may make from time to time. If you've any confusion surrounding pseudo-element's (such as :before and :after) then this explainer will prove handy. Here's a designer's guide to animating icons with CSS. Here's how you can use some client–side JS to detect whether a page was served from cache or not. Robin Rendle asserts that accessibility and web performance are not features, they’re the baseline. This guide to frontend performance is a good primer that's worth sharing with beginners.

by via Frontend Focus