The failed promise of Web Components

#460 — September 30, 2020 Web Version Frontend Focus How to Emulate Vision Deficiencies in Chrome DevTools — Did you know you can emulate various vision deficiencies in Chrome to see how users who experience color blindness or blurred vision might see your site? Here’s how to try it out and help catch any issues that might be degrading your user experience. Addy Osmani The Failed Promise of Web Components — The idea was that Web Components would help us more simply roll out new, powerful HTML elements and features, but.. it didn’t quite work out that way, as Lea explains. Before you think this is just someone’s opinion.. sure, but plenty of people in the space have agreed with it. Lea Verou Tutorial: Build An Online Payment Form In 3 Steps — The Square payment form is customizable and easy to integrate into your web application’s checkout flow. It securely tokenizes sensitive card data so it never touches your servers, facilitating PCI-compliant payment processing. Square sponsor Gutenberg Accessibility Costs WordPress the W3C Work — Not a great look when the international standards organization for the Web points the finger (politely) at the Gutenberg editor as the reason for WordPress no longer being a CMS consideration for the in-progress W3C redesign. Joe Dolson raises some related internationalization concerns in this related post. Adrian Roselli Wikipedia Is Getting A New Look for The First Time in 10 Years. Here’s Why — Making any sort of design changes can be a daunting task, so hats off to those doing so on such a massive, widely-used, and important site. If you want to follow along, this is the first entry in a series on how Wikipedia is going about things. Olga Vasileva (Wikimedia) ⚡️ Quick bits: The second alpha of Bootstrap 5 is now available, and includes new dark dropdown options. Use the Web Audio API? The Chrome Web Audio team want your feedback "to make a plan for the upcoming years." Here's the latest Dev channel update for Microsoft Edge. 💻 Jobs 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 Frontend Developer (Remote) — We're seeking a developer (Vue + React) to join our talented team, building community and esports-centric products that impact millions of people worldwide. GFinity ➡️ Looking to share your job listing in Frontend Focus? More info here. 📙 Tutorials, Articles & Opinion How Screen Readers Navigate Data Tables — A thoughtful explainer on how screen reader users navigate <table> based content. Léonie Watson How To Auto Adjust Your Font Size With CSS font-size-adjust? — Explains how the CSS font-size-adjust property works and how you can experiment with it across multiple browsers. Nimritee Sirsalewala The 20 Best Brackets Extensions for Front End Developers — We've highlighted our top picks for Brackets extensions that will help developers working to optimize their workflow. Shopify Partners sponsor Debugging Browsers: Tools and Techniques — If you’ve a keen interest in testing, this is a quick (growing) summary of some tools and techniques you can use to diagnose browser problems. Eric Lawrence Five Ways Google Analytics Helps Web Developers In UI/UX Design — Features in Google Analytics that can help web devs and designers in making a better user experience on their website. Clara Buenconsejo Menu Reveal By Page Rotate Animation — A neat hidden menu idea. Preethi runs through how to create it. CSS Tricks Optimizing Your Website with Fiddler and Lighthouse Rob Lauer The High Privacy Cost of a “Free” Website Aaron Sankin and Surya Mattu 🔧 Code, Tools and Resources Duet Date Picker: An Accessible WCAG-Compliant Date Picker — Has an elegant default design with lots of ways to customize it (e.g. min/max ranges, changing first day of the week, localization, etc). Try different examples here. Duet Design System Keyboard Simulator: A Three.js-based Customizable 3D Keyboard — Allows you to design and test virtual keyboards using a number of different layouts and keyboard features, along with a whole slew of color themes. Carson Britt Ballpoint: An Experimental Web-Based Vector Graphics Editor — Offers offline support, its own native BPS file format, SVG import, and export via SVG, PDF, or PNG. ballpoint 500M End-Users Depend On Our Scalable Chat & Activity Feed APIs Stream sponsor Visual Mind AI: Analyse the Visual Quality Of Your Website — Take this with a grain of salt, since it’s based on AI, but this is an interesting way to see how your website’s layout is scored for its overall attractiveness. myraah a11yresources - A Growing List of Accessibility Tools and Resources Hannah Milan A CSS Nintendo Switch — Sharing this as I’m currently playing through Super Mario 3D All-Stars and this naturally caught my eye. A great CSS recreation of Nintendo’s hybrid console making good use of box-shadows. (Oh, and if you’re a Switch gamer, there’s a newsletter for that 😉). Tee Diang codepen 📬 Got a new email address? You can change your email here. Bored of us? Click here to stop getting this newsletter. Got a link or news for us? Reply and tell us. We can't include everything but we'll take a look. Published by Cooper Press Ltd. Curated by Chris Brandrick & Peter Cooper. Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom Stop getting this newsletter

by via Frontend Focus