QR Code contains TinyURL of this article.The Trawler: № 10

Stylised rendering of a fishing trawler at sea

Welcome one and all to another issue of The Trawler, the Internet’s premier collection of “stuff”.


Web Design

Background Segment Effect: Mary Lou walks us through an implementation of a gorgeous background image decoration in which the browser renders replicate boxes from a background image and makes these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes for an attractive and novel visual design.


Design Better Data Tables:

“The ire raised by data tables is due, no doubt, to just how awful they can look when they’re not well designed. The design of a table is its linchpin: if it’s done right, it makes complex data easy to scan and compare. If it’s done wrong, it can render information incomprehensible.”


Ways To Reduce Content Shifting On Page Load. I struggled with this problem myself until recently. The solution, again, is intrinsic ratios.

Typography

Flexible Typography with CSS Locks. Tim Brown introduces the concept of CSS Locks (as in canal locks):

“You can have perfect smooth scaling between any two font sizes over any viewport range. The font will start scaling and stop scaling exactly where you want.”

Florens Verschelde then analyses Brown’s work and offers a more detailed explanation of the formulae in The Math of CSS Locks. Fascinating stuff from both parties.

Imaging

The GIF is Dead. Long Live the GIF. Eric Limer takes us on a journey through the Internet’s long, doomed quest to replace its most iconic and flawed filetype.

“November 5, 1999, was Burn All GIF‍s Day. Had you visited its homepage that Friday, you would have seen the movement’s game plan laid out as plainly as its name: ‘On Burn All GIF‍s Day, all GIF users will gather at Unisys and burn all their GIF files.’ This, alongside a selection of pointedly anti-GIF imagery — all proudly PNG files.”

Gaming

The Making of Lemmings: How DMA Design created a classic, and what happened next. A wonderful article — by Rich Stanton — which stirred fond memories of playing Lemmings, one of my favourite games.1  Also, note the subtle parallax effect on the hero image, that’s damn cool.

The Fruit Company

Jimmy Maher has done it again. In Cracking Open the Mac, Maher explores a period of Apple’s history — from the time of the original Macintosh, to the Mac IIfx. Sometimes sad, sometimes funny, endlessly stimulating, Maher’s essays are always worth a read.

Version Control

Oh shit, git! Screwing up in git is easy. Figuring out how to fix your mistakes can be difficult. Git documentation has this chicken and egg problem where you can’t search for how to get yourself out of a mess, unless you already know the name of the thing you need to know about in order to fix your specific problem.

“So here are some bad situations I’ve gotten myself into, and how I eventually got myself out of them… in plain English.”

Software Development

Richard Mitton introduces us to The Metaprogrammer, a curious breed.

“If they don’t have the shiniest Apple MacBook then they can’t work. Never mind that their job involves typing letters into a text file, something you could have done on CP/M back in ‘78. Gotta have that 40″ monitor, it’s essential, can’t work without it. To insult a new hire by providing only a single 4:3 monitor? I can’t work like this. This keyboard doesn’t even have any OLED key-caps on it. This is an outrage.”


The Fall Of Perl, The Web’s Most Promising Language. When I began creating my first web-pages and server-side applications, Perl was the lingua franca amongst web developers. It was common to hear the language described as “the glue that holds the Web together.” Perl’s position as top-dog seemed unassailable. But her decline was rapid and unforgiving. Perl still has a place, yet her glory is but a shadow of what it once was and — without the support of the developer community — it feels like a dying language.

Cool Hacks

This HTML page is also a JPEG: blew my mind. A specially prepared image file includes embedded HTML. When viewed in a web-browser, the computer renders a regular web-page — with the image embedded. When we link the same file in a HTML <img> tag, then the browser renders only the image. A reddit discussion explains it better than I can.


sw-delta is an incremental cache for the web that operates via a service worker. It only downloads the delta between the old file in the cache and the new file, thus offering performance improvements and bandwidth savings. It’s not production ready… yet. Worth keeping an eye though.

Uncool Hacks

Revealing Dropbox’s Dirty Little Security Hack: Phil Stokes exposes an unconscionable practice Dropbox have used to bypass Apple’s security restrictions.2

“Dropbox didn’t ask for permission to take control of your computer. What does ‘take control’ mean here? It means to literally do what you can do in the desktop: click buttons, menus, launch apps, delete files… There’s a reason why apps in that list have to ask for permission and why it takes a password and explicit user permission to get in there: it’s a security risk.”

Stokes followed up with an post-mortem, Discovering How Dropbox Hacks Your Mac.

Regardless of Dropbox’s current position on this, I have stopped using the service and have uninstalled the software from my computers. They have broken the trust.

Noteworthy