The new Mac Pro is a design remix

Arun Venkatesan takes a deep dive into the design and engineering behind the new Mac Pro:

Apple held its annual developer conference, WWDC, this week in San Jose. In the keynote, aside from a slew of developer-focused software announcements, one new hardware announcement has attracted the most attention, the 2019 Mac Pro and Pro Display XDR.

Amazing device. Expensive too, but still amazing.

The new Mac Pro is a design remix →

Pika CDN – A CDN for modern JavaScript

Yesterday the aforementioned Pika announced some new things. One of the things that stood out is Pika CDN:

The Pika CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax. This module syntax runs natively in the browser, so you can build for the web without a bundler.

With our CDN, package authors can distribute more modern, unminified packages without worrying about how to serve them directly. Instead, our nifty package-builder automatically resolves each package — and any legacy sub-dependencies — into a single, minified, ready-to-import JavaScript file.

Nice! Do note that versioning is limited:

🤔 I do wonder if something like Subresource Integrity will land for ES Modules … and oh, don’t we need to self-host our assets? Computering is hard, ugh! #nuance

Pika CDN →

Related: The previously mentioned create-es-react-app also touches directly importing ES Modules

Self-Host Your Static Assets

Harry Roberts:

One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.

For the site tested, this resulted in a ~300ms win:

Test Results with remotely hosted assets.

Test Results with self hosted assets.

One of the main reasons for me is that you, as developer, stay in control of everything. I’ve had sites break due to some external files no longer being available.

Self-Host Your Static Assets →

create-es-react-app – A create-react-app like template using only es-modules (no build step).

create-es-react-app is a create-react-app like template demonstrating how far you can get creating progressive web apps (using react) with no build step. It takes advantage of static and dynamic imports which enables you to break up your app into small reusable ES modules that are compiled for you by the browser at run time.

TIL: You can directly import ES modules from unpkg:

import { React, ReactDOM } from 'https://unpkg.com/[email protected]/index.js';
import htm from 'https://unpkg.com/[email protected]/dist/htm.mjs'
import csz from 'https://unpkg.com/[email protected]/index.js'

🤔 ES Modules? This video by Heydon Pickering has got you covered.

create-es-react-app Source (GitHub) →
create-es-react-app demo →

CSS Grid Level 2: Subgrid

Good news! Firefox 69 will support subgrid. As Rachel Andrew explains:

In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own track listings. However it makes a number of previously difficult patterns possible.

For example, if you have a card layout, and the cards have headers and footers with uneven amounts of content, you might want the card headers and footers to align across the rows. However, with a standard nested grid this isn’t possible.

With Subgrid that type of layout is perfectly possible:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  grid-row: auto / span 3;
  border: 1px solid rgb(0,48,90);
  border-radius: 5px;
  display: grid;
  grid-template-rows: subgrid;
}

More use cases in the article.

CSS Grid Level 2 – subgrid is coming to Firefox →

Control Google Fonts font loading with font-display

As of late May Google Fonts has added support for a display querystring parameter. Using it you can control the CSS font-display Property which allows you to control what happens while the font is unavailable.

Specifying https://fonts.googleapis.com/css?family=Roboto&display=swap as the font to load, will yield the following:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Google Fonts: Using font-display
font-display explainer →

Chernobyl

Past Monday the fifth and final episode of HBO’s Chernobyl miniseries aired. I’ve enjoyed watching this show, which covers the events that lead up to and followed the Chernobyl Nuclear Disaster in 1986.

Solid acting, good storytelling, brilliant atmosphere, … Highly recommended! Also: That font (not the one from the trailer but the one from the top banner)! Love it! 😍

HBO: Chernobyl →

Thanks for the tip, Lennart!

SF Symbols

In addition to SwiftUI Apple also introduced SF Symbols at WWDC. Think of it as the Glyphicons that ship with Bootstrap, but then for iOS/iPadOS/tvOS apps.

SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.

This was long overdue.

Each icon comes in comes in nine weights (from ultralight to black) and three sizes (small, medium, and large), which make them usable in just about any context they appear in: regular text, buttons, menus, … it’s all covered.

As outlined in WWDC2019 Session 206 – featuring @inferis who worked on it – they’re very easy to use them. Creating your own also is a breeze. Nice work, Tom!

One lesser detail about these though, is that some icons are only allowed to be used for referring to one of Apple’s apps. This seems logical for stuff like Face ID (which has a very specific icon), but is very limiting for apps such as Mail that have a very generic icon (e.g. the enveloppe):

Introducing SF Symbols WWDC2019 Session 206 (video + slides) →
SF Symbols →

Optimize Rendering with CSS Containment

The folks at Igalia has been recently working on the implementation of CSS Containment in Chromium – which already shipped in Chrome 52, back in 2016 – by providing some fixes and optimizations based on the standard.

Their post forms a nice intro on the subject:

The main goal of CSS Containment standard is to improve the rendering performance of web pages, allowing the isolation of a subtree from the rest of the document. This specification only introduces one new CSS property called contain with different possible values.

  • layout: The internal layout of the element is totally isolated from the rest of the page, it’s not affected by anything outside and its contents cannot have any effect on the ancestors.
  • paint: Descendants of the element cannot be displayed outside its bounds, nothing will overflow this element (or if it does it won’t be visible).
  • size: The size of the element can be computed without checking its children, the element dimensions are independent of its contents.
  • style: The effects of counters and quotes cannot escape this element, so they are isolated from the rest of the page.

Browser engines can use that information to implement optimizations and avoid doing extra work when they know which subtrees are independent of the rest of the page.

An introduction to CSS Containment →