#393 — May 29, 2019

Read on the Web

Frontend Focus

W3C and WHATWG to Work Together to Advance The Open Web Platform — If you've been a Frontend Focus subscriber from when it was HTML5 Weekly, you might remember frequent articles about the divisions between the W3C and WHATWG's approaches to working on the then-HTML5 (now just 'HTML') specs. It's fantastic to see them coming together to collaborate on the development of a single version of the HTML and DOM specifications from here on out.

Jeff Jaffe

The State of Fluid Web Typography — This detailed summary seeks to answer the question of whether fluid typography is ready to be used on the web today. Highlights how fluid type can improve the reading experience, explores potential scaling problems and raises some accessibility considerations.

Matej Latin

Build Fast, Accurate, Customized Maps With Mapbox — Whether you’re designing an app from scratch or looking to improve your UX, Mapbox has the tools and solutions for you. Built by and for developers, Mapbox is used by 1.2M developers today. Sign up for free.

Mapbox sponsor

Accessible Icon Buttons — An icon button is, simply, a button that’s merely an icon (with no text). They’re very popular in webapps in particular, but are they accessible? They can be, with Sara’s great tips.

Sara Soueidan

Pixi.js 5.0: Create Beautiful 2D Web Experiences — Boasts the ‘fastest, most flexible 2D WebGL renderer’ to let you take advantage of hardware acceleration without getting involved in WebGL or 3D concerns. Check out demos for what the code looks like and what you’d use it for. There’s also a Pixi Playground for quickly crafting your own experiments.


Firefox Brings You Smooth Video Playback with the World’s Fastest AV1 Decoder — Last week’s release of Firefox 67 added support for the “high performance, royalty free AV1 video decoder called 'dav1d'”, which is now enabled by default on all desktop platforms.

Nathan Egge & Christopher Montgomery (Mozilla)

📋 A little FYI: The 2019 Frontend Tooling survey closes this week. If you're yet to fill it out, you've got until Friday.

💻 Jobs

Frontend Engineers to Profitable Healthtech Startup (Stockholm, Sweden) — 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.


📘 News, Tutorials & Opinion

Google Forces Microsoft Edge Preview Users to Use Chrome for the Modern YouTube Experience — This is odd considering the recent collaboration between Microsoft & Google, and is hopefully in error.. although.

Mehedi Hassan

Understanding Grid Placement Through Building A HTML Periodical Table — A practical walkthrough of CSS Grid techniques.

Chen Hui Jing

The CSS background-image Property as an Anti-Pattern — The author argues that the CSS background-image property “allowed us to do some amazing things, but in most cases, it’s time to leave it behind”.

Andrew Welch

How to Create a Split, Faux-Container Layout with CSS Grid and Flexbox — Building a split layout that breaks an article into separate, colored panels.

Andy Bell

Four Reasons Your z-index Isn’t Working (and How to Fix It) — Explains in detail some of the most common reasons why z-index might not be doing what you expect, with fixes for each.

Jessica Chan

Reducing Motion with the picture Element — This element accepts media queries, so prefers-reduced-motion can prove handy.

Brad Frost

Get the Fastest App Deployments. Get Started Free

Buddy sponsor

Before Netscape: The Forgotten Browsers of the Early 1990s — This article is from a few years back but has surfaced up again. It offers a look back at web browsers such as Erwise, Viola, Cello and Mosaic.

Matthew Lasar

16 DevTools Tips & Tricks Every CSS Developer Needs to Know

Louis Lazaris

Making Websites Work with Windows High Contrast Mode

Diedra Rater (Khan Academy)

💡 Tip of the Week

supported by Microsoft Azure

How to identify which font is being rendered

Any browsers dev tools can display the font stack for a selected DOM element, but some can also highlight which font from that stack is actually being rendered on screen. Handy for when you want to know excatly what font you're looking at.

Chrome (and the new Chromium-powered Edge) show this information at the bottom of the Computed tab:

Whereas in Firefox the rendered font will be shown inline, by way of an underline in the style inspector panel:

Safari has a similar behaviour to Firefox, but highlights the font, instead of underlining it.

As a bonus, Dean Hume explains here how in Chrome you can also see what the full character set of a selected font looks like.

This week's tip is sponsored by Microsoft Azure. Learn how Burke Holland and Cecil Philip built a fully serverless web app on Azure from scratch with Vue.js, serverless functions, and more.

🔧 Code and Tools

Zdog: A Pseudo-3D Engine for Canvas and SVG — A JavaScript engine for designing and rendering simple 3D models on the Web. Geometries exist in 3D space, but are rendered here as flat shapes, which helps keeps things small. Here’s the repo.


Version 8 of Angular Released — A major release of the popular app framework, featuring smaller bundles, CLI APIs, differential loading and more.

Stephen Fluin

115+ Robust Components for Your Angular Apps — ExtAngular offers pre-built components and tools to help you build Angular apps fast. Save time and try it free today.

SENCHA sponsor

CSS Grid Generator — Set the numbers and units of your columns and rows, and this tool will generate a CSS grid for you.

Sarah Drasner

subsetcss: Linter to Limit Yourself to Defined Subset of Values

Ilya Radchenko

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