Bookmarks

Official React lifecycle diagram

Diagram showing the new React lifecycle in React 16+ after changes for React fiber

May 2018
Try out Overleaf v2 - Overleaf Blog

It's here (in beta!) -- you can now try out Overleaf v2 :)

May 2018
Didact Fiber: Incremental reconciliation – Hexacta Engineering

Really great blog post on React Fiber, walking through building your own mini-Fiber. Makes the concepts a lot clearer

March 2018
BICEPS — PALOMA MEDINA

Some principles on what motivates people within a group e.g. a work team

March 2018
How to Describe Complex Designs for Users with Disabilities

Generalised advice on providing screen reader support. Mostly the advice is to use native elements, and if that doesn't work use ARIA. The most interesting bit to me was clear advice on using ARIA live regions

March 2018
Automatic visual diffing with Puppeteer – Monica Dinculescu

Quick test setup for testing visual changes in the browser. Useful for css refactoring

February 2018
Drag and Drop for Design Systems – UX Collective

Some good tips on designing consistent drag and drop UIs. Somewhat obvious but ensuring that affordances are kept the same is key.

February 2018
4 Major Patterns for Accessible Drag and Drop – Salesforce UX – Medium

Super interesting read on techniques for making drag and drop UIs accessible. Some very clever ideas.

February 2018
https://epoch.now.sh/

Simple epoch time converter

February 2018
Spectral - Google Fonts

Nice new open source font from Google

December 2017
A11Y Style Guide

Useful examples of HTML/CSS components with built in accessibility. Great for copy/pasting a quick example.

December 2017
Implicit ARIA roles of HTML elements

Table from ARIA spec showing implicit aria-role definitions of HTML elements and the possible optional aria-roles for the elements.

December 2017
llnode for Node.js Memory Leak Analysis

Useful post describing how to create & analyse Node core dumps to find a memory leak

December 2017
What makes a good Diagnostic Question? – EEDI – Medium

Great post on writing questions that assess whether a student has understood a concept (called a diagnostic question). Written in the context of maths, but applies equally to other topics (e.g. programming) too

December 2017
Debugging React performance with React 16 and Chrome Devtools.

Simple guide to using the Chrome performance dev tools to debug React

December 2017
Using with puppeteer · Jest

Jest documentation to run Jest tests in Chrome via Puppeteer

December 2017
How to use SVG as a Placeholder, and Other Image Loading Techniques

Really clever approach to placeholder images shown while the real image loads. Basically describes using a library to decompose an image into a SVG with basic shapes that resembles the image. This could be used diectly, or a blur could be applied.

November 2017
Inclusive Design Checkilst

Big list of things to check to ensure websites are inclusive for all

November 2017
GitHub - jaredpalmer/react-fns: Browser API's turned into declarative React components and HoC's

This looks so good 😱 react-fns: Browser API's turned into declarative React components and HoC's

November 2017