#338 — May 2, 2018

Read on the Web

Frontend Focus

A Guide to the State of Print Stylesheets in 2018 — We’re printing fewer documents than ever, but it pays to make it easy for users to print well-styled versions of documents like invoices, receipts, recipes, instructions, etc.

Rachel Andrew

What’s New in the Latest Microsoft Edge? A Lot — The foundation for full-featured PWAs is now here with Service Workers and push notifications enabled by default, there’s variable fonts support, Notification API support, improved ARIA support, support for CSS transforms on SVG elements, and more.

Kyle Pflug (Microsoft)

New Course ✨ Master CSS Grid and Flexbox — Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.

Frontend Masters sponsor

Is ServiceWorker Ready? (Yes.) — The Edge news (above) means this page that analyzes cross-browser support for the Service Worker ecosystem has something to celebrate :-) All major browsers now support Service Workers.

Jake Archibald

HTML5 Boilerplate 6.1.0 Released — The popular, long standing front-end template get some updates to underlying dependencies and switches from JSHint to ESLint. Downloads here.

Rob Larsen

Pure CSS Francine: An Exquisite Portrait Created in Pure CSS — ‘Demos’ normally go at the end of the issue but this 18th-century oil painting-style portrait hand coded in HTML and CSS (4000 lines of Less, specifically) is magnificent. There’s also this one. Andy Baio noted that the image looks rather different on older browsers.

Diana Smith

Finger-Friendly Numerical Inputs with 'inputmode' — On mobile in particular, it’s very helpful if input fields that expect numerical values have a numerical UI, but there are a few ways to approach this.

Ollie Williams

Measuring Sites with Mobile-First Optimization Tools — Not sure how to remove the code debt that bloats and weighs down your site? Here are specific ways mobile performance impacts your site and page speed results.

Jon Raasch

An Update on CSS Grid Level 2 and Subgrids — A handy post for getting a feel for progress on subgrids with future versions of the CSS Grid spec.

Rachel Andrew

💻 Jobs

Front-end Developer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote.

Helical Levity

Frontend Developer (m/f) #VueJS / Berlin — We are looking for an experienced & passionate developer who knows how browsers work below the surface. Join Pepper.com.

Pepper.com

Open to a New Job? Sign Up for Vettery — Top developers can get 5+ interview requests during their first week on Vettery.

Vettery

📘 Tutorials

Getting More CSS Grid Flexibility with 'minmax()'minmax lets you specify a minimum and maximum size for your grid tracks.

Michelle Barker

How to Get Started with User Timing and Custom Metrics

speedcurve sponsor

Solved With CSS: Dropdown Menus

Una Kravets

Looking at the 'line-clamp' CSS Attribute — Truncates text at a specific number of lines. Support is mixed (Chrome and Safari, but not Firefox or Edge).

Geoff Graham

Radial Gradient Recipes — A lot to enjoy here, complete with embedded CodePen examples.

Chris Coyier

Native Modals Using HTML 5.2's 'dialog' Element — Note that support is currently limited to Chrome.

Alligator

Choosing Cameras in JavaScript with the mediaDevices API

Phil Nash

The Power of 'Flex-Grow' — To get access to Flexbox’s full power, you need to venture past its most basic properties.

Ethan Jarrell

'display: contents' Is Not a CSS Reset — And using it as one could negatively affect accessibility.

Adrian Roselli

Cheat Sheet: Functional Programming with JavaScript

Progress Kendo UI sponsor

🔧 Code and Tools

Subfont: Generate Optimal, Optimized Web Font Subsets for Pages — It automatically figures out what characters are used from your Web Fonts and generates smaller versions.

Peter Brandt Müller

cssgr.id: An Interactive CSS Grid Code Tool and Generator

Dan Netherton

$20 Free On A New Linode Account — Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.

Linode Cloud Hosting sponsor

Web Audio API DSP Playground — This is a lot of fun to noodle with.

Arthur Carabott

Bootstrap 4.1.1 Released — The first patch release of Bootstrap 4.

Mark Otto, Jacob Thornton, and Bootstrap contributors

CSS Grid 12 Column Layout

Erik Monjas

CKEditor 5 v10 Released: A Powerful WYSIWYG Editor Framework — The first stable release of CKEditor 5. Now fully GPL 2+ licensed.

Piotr Koszuliński