Bookmarks

Rendering Performance  |  Web  |  Google Developers

Great guides from Paul Lewis on CSS performance problems and how to debug them in Chrome dev tools

April 2017
Using DevTools to Tweak Designs in the Browser | CSS-Tricks

Whole bunch of useful dev tools tips for designing in the browser:

April 2017
Building performant expand & collapse animations  |  Web  |  Google Developers

A script for creating a performant menu animation with transform scale. Interesting technique of calculating a custom animation based on menu size in JS, then injecting it into the DOM.

April 2017
Making Animations Wait | CSS-Tricks

Useful tip on forcing CSS animations to be paused until assets (like large images) are loaded

April 2017
React A11y Testing

Useful gist showing quick testing set up for React & axe-core for accessibility

March 2017
Hidden Devtools Gem for Working with Media Queries

Quick tip to enable media query detection/visualisation in Chrome Dev Tools

March 2017
Observatory by Mozilla

Scanner from mozilla to check for security headers/settings on your web sites

March 2017
Brian Vaughn - Forward JS Slides

Some great slides on the why and how of react-virtualized for rendering long/complex lists

March 2017
Using CSS Transitions on Auto Dimensions | CSS-Tricks

Some useful techniques for animating elements without a hard-coded height. No perfect solutions unfortunately, but still useful in some situations

March 2017
Simple Little Use Case for `vmin` | CSS-Tricks

Neat trick using vmin measurement unit to make a more balanced header on large and small devices

March 2017
Scrolling on the web: A primer - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

Interesting notes on scroll performance across the browsers - I didn't realise they optimised to make scrolling multi-threaded

March 2017
CSS Triggers

Useful reference showing which CSS properties will trigger repaints/layouts/etc if changed

March 2017
A cartoon intro to WebAssembly ★ Mozilla Hacks – the Web developer blog

Btw, taken from this excellent explainer series from @linclark

March 2017
Code smells in CSS – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

A list of code smells in CSS from Harry Roberts. Mostly agree with the ones listed, however I find some of the sentiments too strong (too much "never do this")

March 2017
Web Field Manual | Design

Massive list of resources for web design. Everything from accessibility to UX patterns

March 2017
CSS Grid: One Layout, Multiple Ways | CSS-Tricks

Short & simple practical introduction to CSS Grid

March 2017
Squeezy Stretchy Flexbox Nav | CSS-Tricks

Great article on a "stretchy" navigation with submenus that expands/contracts based on viewport height (see demos for a better explanation). I can see this being useful for file tree UIs too

March 2017
The Unexpected Power of Viewport Units in CSS | Lullabot

Nice article walking through usages of viewport height (vh) and viewport width (vw) units in CSS. Some useful explanatory examples

March 2017
(500) https://raphaelschaad.github.io/peaks/

Always a sucker for Swiss Alps maps 😍 Climbed a handful for these :)

March 2017
A litmus test for job descriptions - Julia Evans

Another piece by @b0rk on job descriptions and how to write good ones. See another one of my links for the job description she ended up writing

January 2017