Skip to content

Instantly share code, notes, and snippets.

Blogging furiously

Robin Rendle robinrendle

Blogging furiously
View GitHub Profile
mirisuzanne / cq.css
Last active Jan 11, 2021
Thoughts on Container Queries
View cq.css
This is not meant to be a final CSSWG proposal,
but reflects my immediate thoughts after reading
[David Baron's]( promising draft.
This gist was created to demonstrate my idea for removing selectors from his query syntax.
More of my thoughts & notes are online at
View lighthouse-bookmarklet.js
// Modified from Jeremy Keith’s lovely bookmarklet:
javascript:(function(){open(''+escape(document.location)+'&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa', 'test__lighthouse')})();
wesbos / gist:0d5572a29e4f5688a1c8
Last active Jan 28, 2019
Handy list of widths to target in a responsive website
View gist:0d5572a29e4f5688a1c8
mrmrs /
Last active May 15, 2019
WIP thoughts on my last few years thinking about how to scale css for large and small teams working on large and small web applications.

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get


Hi [redacted],

Some answers for you:

What interested you in composing this image and what does it mean to you.

I work on satellite imagery at Mapbox, so I see a lot of pictures of Earth. I’ve always been interested in the history and culture around the Whole Earth: the image of the sunlit planet floating in space. When the Himawari-8 data started coming out, I tried different things with it, and the most compelling for me was that Whole Earth – what we call a full disk image. Because you get a frame every 10 minutes, you can make a fairly smooth animation, and I wanted to show that off. We don’t get a lot of chances to think about the face of the Earth as something in motion.

As for what it means to me personally, I think of a few things.

futurefabric / gif_animation_example.pde
Last active Sep 1, 2020
Example code to create an animation and image sequence
View gif_animation_example.pde
// Example code from
// Based on the work of Dave Whyte —
int[][] result;
float t;
void setup() {
paulirish /
Last active Feb 26, 2021
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
View punctuation.js
var paras = document.querySelectorAll('p');
for(var p of paras) {
if (p.textContent.startsWith('“')) p.classList.add('p--oq');
tkadlec / perf.js
Created Apr 23, 2015
Super simple example of adding perf timing to the page display during dev work
View perf.js
(function () {
var perfBar = function(budget) {
window.onload = function() {
window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = window.performance.timing,
now = new Date().getTime(),
output, loadTime;
csswizardry /
Last active Sep 5, 2018
I frequently get asked about over-abstracted CSS, and ‘can CSS be too modular’, so I thought I’d publish this anonymised email I received, along with my reply.