Bookmarks

The Offline Cookbook  |  Web  |  Google Developers

Service worker best practices and strategies for caching for offline

May 2017
CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS

Good "rule book" for writing CSS in teams. Do't agree with everything and some I wouldn't take to the extremes suggested here, but mostly good. I like the BEM suggestions too

May 2017
Twitter Lite and High Performance React Progressive Web Apps at Scale

Good perf tips from Twitter Lite PWA. Includes some nice flame graphs which are useful for diagnosing the problem (and learning how to read flame graphs)

May 2017
Compressing Genomes for Fun and Profit with Pareto, Docker and Gnuplot

Compressing Genomes for Fun and Profit with Pareto, Docker and Gnuplot:

May 2017
Interesting Takes on Log in / Sign Up Forms - The Media Temple Blog

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

April 2017
Between the Lines | CSS-Tricks

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

April 2017
Test Double | Our Thinking | Makefile Usability Tips

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

April 2017
WTF is JSX

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

April 2017
Building a CSS Grid Overlay | CSS-Tricks

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

April 2017
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