Tags: tree

Tree views in CSS

Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.

Latewood | A Working Library

As this year draws to a close, you might be tempted to make some ambitious new year’s resolutions for yourself. But maybe read this first.

Dormancy isn’t stagnant; it’s potentiating. It’s patient. If you’ve grown a lot in the past however many months or years and now feel that growth coming to a close, don’t fret right away. Wait. Reflect on what you’ve learned. Look for signs of spring. Move to where there’s water, if you need to. But don’t rush. There will be time again for running and jumping, when you’re ready.

Improving the information architecture of the Smart Pension member app | Design and tech | Smart – retirement, savings and financial wellbeing

Here’s a really excellent, clearly-written case study that unfortunately includes this accurate observation:

In recent years the practice of information architecture has fallen out of fashion, which is a shame as you can’t design something successfully without it. If a user can’t find a feature, it’s game over - the feature may as well not exist as far as they’re concerned.

I also like this insight:

Burger menus are effective… at hiding things.

Balisage: Metaphors We Code By

My talk, Building, was about the metaphors we use to talk about the work we do on the web. So I’m interested in this analysis of the metaphors used to talk about markup:

• Data is documents, processing data is clerking
• Data is trees, processing data is forestry
• Data is buildings, processing data is construction
• Data is a place, processing data is a journey
• Data is a fluid, processing data is plumbing
• Data is a textile, processing data is weaving
• Data is music, processing data is performing

Bjørn Karmann › Occlusion Grotesque

A typeface co-designed with a tree over the course of five years.

Yes, a tree.

Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually.

The Great Distractor — Centre for Media, Technology and Democracy

James has penned a sweeping arc from the The Mechanical Turk, Sesame Street, and Teletubbies to Instagram, Facebook, and YouTube.

What is tree shaking and how does it work?

The context here is JavaScript, not apples or olives.

This is yet another great explainer from Ire. Tree shaking is one of those things that I thought I understood, but always had the nagging doubt that I was missing something. This article really helped clear things up for me.

Progressive Web App for FixMyStreet · Issue #1996 · mysociety/fixmystreet

Here’s a Github issue that turned into a good philosophical debate on how to build a progressive web app: should you enhance your existing site or creating a separate URL?

(For the record: I’m in favour of enhancing.)

Infinitown | A WebGL Experiment by Little Workshop

I reckon this could be the canonical WebGL demo.

And if I’m reading dev tools right, this is all done in 86K.

Trees of deep time are a portal to the past – and the future | Aeon Essays

From the library of Alexandria to the imagined canals of mars to the spots on the sun, this is a beautifully written examination of the chronology contained within the bristlecone pine.

The oldest of the living bristlecones were just saplings when the pyramids were raised. The most ancient, called Methuselah, is estimated to be more than 4,800 years old; with luck, it will soon enter its sixth millennium as a living, reproducing organism. Because we conceive of time in terms of experience, a life spanning millennia can seem alien or even eternal to the human mind. It is hard to grasp what it would be like to see hundreds of generations flow out from under you in the stream of time, hard to imagine how rich and varied the mind might become if seasoned by five thousand years of experience and culture.

There is only the briefest passing mention of the sad story of Don Currey.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Future Library – Framtidsbiblioteket

Here’s a lovely project with an eye on the Long Now. Trees that were planted last year will be used to make paper to print an anthology in 2114.

Margaret Atwood is one of the contributors.

SpringForward - A celebration of women in digital and technology - March 2015, Brighton

There’s a whole bunch of great events happening in Brighton this March: Codebar, Curiosity Hub, She Codes Brighton, 300 Seconds, She Says Brighton, and Ladies that UX. Lots of these will be downstairs from Clearleft in Middle Street—very handy!

Tobias Frere-Jones: My Kind of Neighborhood

Some sleuthing uncovers an interesting twist in New York’s psychogeography:

All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.

Tiny Games for Brighton

Look at the streets of Brighton for some games to play while you’re in town for dConstruct.

The Secret Door - Step Through To The Unknown… | Safestyle UK

Prepare to lose yourself for hours as you keep hitting “take me somewhere else” through these most bizarre and wonderful Google street view locations.

Strassenblickfernweh indeed.

CABINET // Trap Streets

A fascinating piece by James on trap streets, those fictitious places on maps that have no corresponding territory.

Street Ghosts project - Google Street View made Street Art and Public Concern

In the hippest areas for Street Art, life-sized pictures of people found on Google’s Street View are printed and posted without authorization at the same spot where they were taken.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.