Microsoft's tool to walk you through a Web accessibility audit

#391 — May 15, 2019 Read on the Web 🚀 Frontend Focus Google Fonts Adds font-display Support to Give You More Control over Webfont Loading — Google Fonts is a fantastic service and the font-display property will help you get more control over your webfonts’ loading and display behavior. Contrary to this blog post, you need to use the display parameter when loading fonts, e.g. <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet"> Zach Leatherman Accessibility Insights: A Tool to Guide You Through a Web Accessibility Check — Available as a Chrome (and Edge Insider!) extension or a Windows app, this tool from Microsoft will guide you through doing an accessibility assessment on a Web site including both automated and manual checks. Microsoft Build Maps That Feature Your Brand & Your Data — Struggling to find a mapping product that does justice to what you’ve built? Mapbox makes it easier than ever to build, implement, and customize amazing maps. See for yourself why 1.2M developers are building with Mapbox - Sign up for free. Mapbox sponsor Integrating Third-Party Animation Libraries to a Project — I wasn’t expecting an in-depth tutorial on front-end animation approaches to include a history of Dreamweaver and jQuery, but that’s just how deep this post goes. Travis Almand Building a Web Audio API Guitar Pedalboard — This is really fun! You can play with the pedalboard for yourself (no guitar needed, there’s a musical sample available) or just learn how the whole thing was set up. Trys Mudford Polypane: A (Paid) Browser for Responsive Web Development and Design — It’s not every day we see a browser aimed at development, but this commercial (with a free trial) Chromium based browser brings some interesting ideas to the table nonetheless. Polypane 💻 Jobs Product-Focused & Driven Frontend Engineers in Stockholm — Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company. Diet Doctor Sweden AB Find A Frontend Job On Vettery — Vettery specializes in tech roles and is completely free for job seekers. Vettery 📘 Tutorials Creating a 'Chinese Window Lattice' with CSS — If you like drawing interesting shapes using CSS alone, this is for you and is pretty darn clever in its use of the little seen -webkit-box-reflect. Yuan Chuan A Pure CSS onclick Context Menu — The :active pseudo-selector makes it easy. Simone Vittori The Parallel Streaming of Progressive Images with HTTP/2 — Image-optimized HTTP/2 multiplexing makes all progressive images across a page appear visually complete in half of the time. Here’s how. Andrew Galloni and Kornel Lesiński (Cloudflare) Learn GraphQL by Doing - 2 Hour GraphQL Tutorials for Frontend Developers — A series of free GraphQL tutorials with videos. Now featuring tutorials for React, Vue, ReactNative & iOS developers. Hasura sponsor SVG Properties and CSS — The relationship between SVG and normal HTML and CSS can seem a little complicated at times, so guides like this are always welcomed. And if you like this, maybe you’ll like seeing how to change the color an SVG on hover. Katherine Kato A New (and Easy) Way to Hide Content Accessibly Zell Liew How to Combine Sass Color Functions and CSS Variables — This is pro level Sass-work right here. Grab a cup of ☕️ Claudia Romano 4 CSS Filters For Adjusting Color — This is an old post, but still very relevant given our Tip of the Week (below) :-) Steven Bradley Styling HTML Checkboxes is Hard - Here's Why Areknawo 💡 Tip of the Week supported by How to style the <audio> tag's standard controls by Peter Cooper The <audio> tag is an easy way to include audio playback on a page. You can either include it 'headlessly' and control it via JavaScript, or pass along controls="controls" and see a set of default controls: The default controls save you a lot of work if your design can tolerate them, but if you Google how to style them, everyone says "You can't!" But, it turns out, you can! CSS filters are a way to apply various types of graphical effect to HTML elements using CSS and are supported by every major browser. So we can take our <audio> tag, colorize it using the sepia filter and then use hue-rotate and other filters to get the basic color scheme we want. Here's the code on CodePen if you want to play around, and if you get a taste for playing with CSS filters, there's a fantastic guide to more advanced colorization tricks in Color Filters Can Turn Your Gray Skies Blue. This week's tip is sponsored by Codefund. Earning funds for your open source projects or tech blogs is now as easy as adding two lines of code to your website. Last month, we paid over $24,000 to developers worldwide. Find out if you qualify. 🔧 Code and Tools Tailwind CSS 1.0 Released — Tailwind is a popular low-level CSS framework that provides useful building blocks for more easily styling things your own way. If you’re already using Tailwind, be sure to check out the upgrade guide. Tailwind CSSFX: Simple Click-to-Copy CSS Effects — It really is simple. Here’s a page with 45 different button and loading effects, click on one and you get the code to copy/paste. Jonathan Olaleye Get the Fastest Website Deployments. Get Started Free Buddy sponsor headingsMap: Shows the Structure of Headings on Pages — Another tool that’s helpful in performing a basic accessibility audit. Chrome Web Store Feather: 279 Minimal Monochromatic Line-Based Icons — These icons are as simple as it gets but cover all the essentials such as alerts, popular services, user icons, etc. Cole Bemis    🗓 Upcoming Events JSNation, June 5-7 — Amsterdam, the Netherlands — A 2-day event focusing exclusively on JavaScript development. Front Utah 2019, June 6-7 — Salt Lake City — Two days of learning better ways to work together with your team and be inspired to grow your career in UX or product management. Pixel Pioneers, June 7 — Bristol, UK — A one-day conference of practical design and frontend talks, featuring eight speakers (preceded by a workshop day). CSS Day, June 13-14 — Amsterdam, Netherlands — Features eight world-class sessions by eight world-class speakers about curious, 'badly-known', or otherwise interesting CSS features. CSSCamp 2019, July 17 — Barcelona, Spain — A one-day, one-track conference for web designers and developers. An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience.

by via Frontend Focus