Bookmarks

RIP Ueli Steck. Met him once and he was super nice

Some neat sign in form demos. Particularly like the "Josh Sorosky Slide’n’Zoom" one

Seems like a really useful technique for making better sized CSS (e.g. padding) at arbitrary screen sizes. It effectively "tweens" based on the current screen size, between a min and max size. This means that screens that don't fit with defined breakpoints will be better sized

Some useful tips for Makefiles. Includes a useful script for extracting comments from the Makefile to show help docs in the CLI

Good BEM explainer from Harry Roberts (CSS Wizardry)

Great intro article to JSX. Abstracts away React, so could potential be a little confusing. But if you think that `h()` -> `React.createElement`, then it's fine

Some neat CSS to add an overlay demonstrating a grid system as a dev tool. Can be configured using CSS variables

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

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

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.

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

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

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

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

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

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

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

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

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

Btw, taken from this excellent explainer series from @linclark