Vivaldi: A Universal JS Router Library for React

Post by Pete Watson-Wailes

react, web dev

One of the problems faced when developing more complex universal applications is how to manage routing requests to UI output. React Router does this by taking in a URI and returning a React component structure. And it's excellent at doing that, but doing so means there's only the front end…

[ES5 & ES6] Debounce React Events on Inputs

Post by Pete Watson-Wailes

react, web dev

In my day to day, I deal with a lot of React code. One of the most common components I use across the codebase I maintain is a table with search and sorting options. The sorting runs onClick immediately, but the tables (generated from JSON) can often run into 10k+…

Aim for 0.1x Growth

Post by Pete Watson-Wailes

react, web dev

In development circles, there's the concept of the "10x engineer". That is to say, the best of the best, who by virtue of their excellence are 10x more productive than average. The problem is, productiveness doesn't scale. Complexity adds inertia, and inertia is logarithmic in scale, not linear. A company…

Big & Meaningless Data

Post by Pete Watson-Wailes

web dev, business, marketing

The main problem with the digital industry at the moment was nicely summed up by Bob Hoffman: The online advertising industry is drowning in data, but has generated almost no useful facts or principles. The encyclopedia of things we don’t know about online advertising since we started collecting 'big…

Minigeist

Post by Pete Watson-Wailes

ghost, design, web dev

Minigeist, like Upholsterygeist is a minimalist Ghost theme available here, built to use the least possible CSS whilst still supporting nice social buttons, responsive layout and tidy typography. This site runs it, so you're looking at it now. Features Endlessly responsive Typography friendly 4kb CSS Syntax highlighting using highlight.js…

The Slow Magazinisation of the Web

Post by Pete Watson-Wailes

web dev, marketing

A thought struck me today, as I came across yet another page of the web starting with a full-bleed image with text on it, that what web design over the past two to three years has been slowly doing, is starting to try and turn the generally crappy designs we've…

React Dynamic Components: Building & Rendering

Post by Pete Watson-Wailes

react, web dev

If you just want a quick answer on how you do this, here it is: renderElement(key, props) { var components = { 'componentA': componentA, 'componentB': componentB, 'componentC': componentC } return React.createElement(components[key], componentProps) } If you want more information on how to use this more broadly and an example live implementation, read…

OpenDAWS

Post by Pete Watson-Wailes

web dev

v6.0.0 The original responsive CSS structured library. Powered by LESS and LESS Hat. Available via the OpenDAWS repo. Upholsterygeist, this site's theme, is powered by it. It also powers the layout of the interactive guide to space exploration, Fly Me to the Moon. Consider both a demo. Theory…

Upholstrygeist - A Free Ghost Theme

Post by Pete Watson-Wailes

ghost, design, web dev

Upholsterygeist is a minimalist Ghost theme built using OpenDAWS, available here. Features Endlessly responsive using flexbox Typography friendly Built with LESS Syntax highlighting using highlight.js baked in Installation Download the files using the GitHub .zip download Unzip the files and rename the folder to 'Upholsterygeist' Upload the folder to…

Really Responsive Design and the Adaptive Grid

Post by Pete Watson-Wailes

web dev

Many years ago, the web was a simpler place, in terms of design. After all, it's quite hard to bring anything of visual beauty to your users, when your canvas is monospaced syntax-highlighted text, and nothing else. Thankfully, we've come quite a way since then, and now we can do…