An introduction to the JAMstack

This introduction to JAMstack – or is it SHAMstack? – is quite complete:

Traditional websites or CMS sites (e.g WordPress, Drupal, etc.) rely heavily on servers, plugins and databases. But the JAMstack can load some JavaScript that receives data from an API, serving files from a CDN and markup generated using a static site generator during deploy time.

Maggie Appleton – from the aforementioned illustrated.dev – also created this ace drawing:

☝️ Yes, that should be markup instead of markdown, I already notified Maggie about it 😉

And oh, I follow Chris here, whether <body><script src="react-bundle.js"></script></body> falls under the JAMstack label or not:

An introduction to the JAMstack: the architecture of the modern web →

Accessible Icon Buttons

Sara Soueidan:

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.

Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.

Sara gives us 5 techniques to solving this.

Accessible Icon Buttons →

Why the Soviets doctored this iconic photo

With the recent 75 year remembrance of the Normandy Landings (D-Day), I was reminded of this video by Vox, from the Vox Darkroom series:

“Raising the Flag on Iwo Jima” and “Raising a Flag over the Reichstag” are similarly iconic photos from World War II. They’re both beloved images of victory, and they’re both taken after the fighting ended in significant battles. But the Russian Soviet one is different, because parts of it are altered.

Internal classes in PHP

As a (PHP) package developer, you sometimes have classes that are meant for internal use – inside the package itself – only. PHP has no built-in solution for this, but using a DocBlock Tag one can indicate its intended use. As Nuno Maduro explains:

Maybe in the future, the PHP language will have the internal class access modifier, it would prevent people from using internal classes from your library. Meanwhile, the PHP @internal tag can be used to denote that the associated class/method is internal to the library. It’s supported by PHPStorm and it warns people that those classes/methods are not meant to be used

Internal classes in PHP →

Via Freek (who recently redesigned his blog by the way)

Tests and types

Brent has some thoughts on strong and weakly typed programming languages. Starting point: a simple function that needs testing:

rgbToHex(red, green, blue) {
    // …
}

Testing the result the function should return is easy. But what about edge cases?

What happens though if we pass doubles instead of integers? Or numbers outside of the allowed range? What about null? Or strings Or the wrong amount of arguments? Or a combination of the above?

Ah, the starting point for a nice article … (and no, requiring ints is not a bulletproof solution)

Tests and types →

🔥 Be sure to also check out Brent’s podcast Rant With Brent.

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 →