Microsoft's tool to walk you through a Web accessibility audit
source link: https://www.tuicool.com/articles/VvUJ7rf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 someinteresting ideas to the table nonetheless.
Polypane
:computer: 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
:blue_book: 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 open-source 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
How to Combine Sass Color Functions and CSS Variables — This is pro level Sass-work right here. Grab a cup of :coffee:️
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
:bulb: Tip of the Week
supported by 
How to style the <audio> tag's standard controls
byPeter 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'sthe 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 byCodefund. 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.
:wrench: 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 outthe 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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK