Bookmarks

A React And Preact Progressive Web App Performance Case Study: Treebo

Good write up of some high level React app load performance tips

September 2017
Interface font family

Nice looking san-serif font. Quite similar to Roboto. Aimed at user interfaces

August 2017
CodePen - JPNG.svg (Transparent PNG with JPEG Compression)

Interesting technique to cut down on transparent PNG sizes by combining compressed JPEG, PNG and SVG

August 2017
Inside a super fast CSS engine: Quantum CSS (aka Stylo) ★ Mozilla Hacks – the Web developer blog

This is exciting. Looking forward to the next jump in browsers. Firefox Nightly shipping some more parts from Servo:

August 2017
Exploiting Script Injection Flaws in ReactJS Apps – DailyJS – Medium

Useful tips on React & security vectors. Most are pretty unlikely but good to keep in mind

August 2017
How to manage or eliminate React state without Redux · Monica

Some nice tips on managing state in React. The title mentions not using Redux, but there's really more useful stuff about pulling state out into composable functions

August 2017
Open feature request: CallSession API – Collaborate From Anywhere – Medium

“Open feature request: CallSession API” [for Progressive Web Apps #PWA] by Trond Kjetil Bremnes

August 2017
Check for missing npm dependencies before starting node script · GitHub

Wrote a quick script to check for missing dependencies before starting a node script:

July 2017
Bootstrap to CSS Grid

Pretty cool demo showing CSS Grid overrides of Bootstrap with @supports. Great way of slowly migrating over to Grid and without losing browser support

July 2017
About rel=noopener

If you’re a web developer, stop what you’re doing right now and read this: Then go fix your shit 😱

July 2017
Automated testing with Headless Chrome  |  Web  |  Google Developers

Useful walkthrough on setting up Headless Chrome with Karma. Looks like a good replacement for PhantomJS

July 2017
Cooling the tube – Engineering heat out of the Underground – IanVisits

RT @AndyDavies: Fascinating article on why the London Underground gets so hot -

June 2017
When running eslint with npm script, npm throws error. · Issue #7933 · eslint/eslint · GitHub

This comment is so useful for npm scripts: Especially when most advice seems to be `exit 0` which breaks piping & CI

June 2017
How the minmax() Function Works

Nice explanation of CSS minmax function (part of the Grid spec)

June 2017
Octicons

Github's icon set

June 2017
Feather – Simply beautiful open source icons

A nice (but small) icon set from Nelify

June 2017
Avoid Large, Complex Layouts and Layout Thrashing  |  Web  |  Google Developers

Good guide on ways to avoid "layout thrashing" which is bad for performance. Most useful tip is to only check layout forcing properties in JS (height, width etc) at the beginning of requestAnimationFrame

May 2017
What forces layout/reflow. The comprehensive list.

List of JS properties & functions which will cause forced layout/reflow when accessed. This can cause "layout thrashing" which is bad for performance

May 2017