#395 — June 12, 2019

Read on the Web

Frontend Focus

How to Use the Web Share API — This API provides a way to trigger the native share dialog of a device when sharing content, such as a link, directly from a website or web app. It's mostly focused on mobile use cases so far but the latest Safari build supports it too.

Ayooluwa Isaiah

Are Long JavaScript Tasks Delaying Your 'Time to Interactive'? — Chrome DevTools can now visualize ‘Long Tasks’ (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimize away any problems.

Addy Osmani

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

The Concept of 'Micro Frontends' — A look at a pattern aroundo splitging up your large, complex, frontend codebases into simple, composable, independently deliverable apps that integrate together.

Cam Jackson (ThoughtWorks)

▶  Using DevTools To Understand Modern CSS Layouts — Explains a variety of modern CSS layout techniques through live demonstrations via DevTools.

Chen Hui Jing

Styling in Modern Web Apps — A dive into the different ways of organizing styling in modern apps, which often have complex interfaces and design patterns.

Ajay NS

Mozilla Will Reportedly Launch a Paid Version of Firefox — A premium version of Firefox, offering a VPN and secure cloud storage, is expected to launch by October.

Ivan Mehta

💻 Jobs

JavaScript / React Performance Optimization Engineer - Exodus (Remote) — Exodus are looking for an obsessive engineer to work on improving the performance of the Exodus desktop application.

Exodus

Senior Software Engineer (Santa Barbara or Remote) — Join a team where everyone is striving to constantly improve their knowledge of software development tools, practices, and processes.

Invoca

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 News, Tutorials & Opinion

Safari Web Inspector Now Includes A New CPU Usage Timeline — ...that lets devs measure a page’s CPU usage, estimate its energy impact, and more easily investigate sources of script execution that may be contributing to poor energy utilization.

Joseph Pecoraro

▶  Hello Subgrid — Rachel Andrew, member of the CSS Working Group, introduces Subgrid — with various use cases, example code and thoughts on where we might see Grid going in the future.

Rachel Andrew

It’s Finally Possible to Code Web Apps on an iPad Pro — ...using Visual Studio Code. (Originally shared in our mobile development newsletter.)

Owen Williams

Exploring Domain-Driven Design at CircleCI — One thing that has helped maintain a sense of consistency has been for us to adopt a different approach to writing software: Domain-Driven Design.

CircleCI sponsor

An Introduction to the MediaRecorder API — Here's how to use the MediaRecorder browser API to record audio and video in the browser.

Phil Nash (Twilio)

'Why We Prefer CSS Custom Properties to SASS Variables' — Some practical examples of how CSS variables can power-up your workflow.

Sebastiano Guerriero

CSS Grid and IE11 — A look at how a little JavaScript "helped us make peace" with CSS Grid and IE11.

Valentina Versari & Tom Rothe

Write HTML Like It's 1999 — A reminder of good semantic best practices to “inspire you to keep things simple”.

Bradley Taunt

💡 Tip of the Week

supported by

Optimizing Google Fonts requests

If you use Google Fonts and know in advance which letters you'll need from a particular typeface (such as if you're rendering a headline or title with an elaborate heading font), there's a technique you can use to significantly reduce load.

Google Fonts lets you specify which letters you need and will only serve those as part of the font. To do this you can append a text= parameter to the end of a font request, like so:

<link href="https://fonts.googleapis.com/css?family=Montserrat&text=Frontedcus" rel="stylesheet">

In the example above, we've requested all the letters needed to type out 'Frontend Focus'.

Google claims that in some cases this technique can reduce the size of your font file request by up to 90% (in the case above, we've worked out it's a 86% drop from a 9.2KB font to a 1.3KB one) so it's a neat little optimization strategy worth looking into.

This week's tip is sponsored by Percy, the all-in-one visual testing platform. Replace manual QA and catch visual UI bugs before your customers do.
Get started for free.

🔧 Code, Tools & Resources

html5-boilerplate: A Professional Front-End Template for Building Fast, Robust, and Adaptable Web Apps/Sites — This project has been around for several years now, but recently saw an update and remains a highly popular templating choice.

H5BP

lightweight-charts: Financial Lightweight Charts Built with HTML5 Canvas — If you want to replace static image charts with interactive ones that are small and fast this HTML5 charts library may be worth a look.

TradingView

The Open Source Conundrum: How Do We Keep the Lights On?

CodeFund sponsor

Cube.js: An Open Source Analytics Framework — Designed to work with large-scale data sets.

Statsbot

Pretty Checkbox: A Pure CSS Library to Beautify Checkbox and Radio Buttons

Lokesh

   🗓 Upcoming Events

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.

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

❓ Last But Not Least..

Chrome Incognito Mode No Longer Detectable: