Bookmarks

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
enkidevs/seapig: 🌊🐷 Utility for generalized composition of React components

Really interesting utility for creating "compound" React components, like what Ryan Florence has advocated for. The api is actually minimal, but seems super useful

November 2017
Alt-texts: The Ultimate Guide - Axess Lab

Really excellent guide to writing alt text for images on the web

October 2017
Bit calculator

Useful JS bitwise calculator

October 2017
The Output Element | CSS-Tricks

About new (to me) HTML element which is useful for showing output for an interactive control. The example shown is a range input that shows the value. It beats a div because of improved a11y - it can be linked to the input with a for attribute. Can also see it being useful for showing preview output for a setting

October 2017
Untitled (https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/)

Another great article from @linclark, this time on Firefox’s new WebRender project:

October 2017
A Look at Bootstrap 4's New Reset: Reboot.css ― Scotch

Bootstrap 4 has a new CSS reset, called Reboot. Looks useful

October 2017
Zondicons

Nice looking SVG icon set

October 2017