#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 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

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 ReleasedTailwind 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.