Link tags: demo

57

sparkline

Folk Interfaces

Folk creations fill a gap. They solve problems for individuals and small communities in a way that that centralised, top-down, industrial creations never can. They are informal, distributed practices that emerge from real world contexts. Contexts where individuals have little or no control over the “official” means of production – of furniture, urban architecture, crockery, artwork, media stories, or taxonomies. In response people develop their own unpolished, unofficial, and deeply practical creations.

Now apply that to software:

Only professional programmers and designers get to decide what buttons go on the interface, what features get prioritised, and what affordances users have access to. Subverting that dynamic is the only way people can get their needs met with the computational tools they have at hand.

Douglas Engelbart | Hidden Heroes

An account of the mother of all demos, written by Steven Johnson.

The Demo → Demo Loop - daverupert.com

I’m 100% convinced that working demo-to-demo is the secret formula to making successful creative products.

Townscaper

Now you can play a demo of Townscaper right in your browser.

There goes your productivity.

Office politics: A working letter

Here’s the thing: we need politics in the workplace. Politics—that is, the act of negotiating our relationships and obligations to each other—is critical to the work of building and sustaining democracy. And the workplace isn’t separate from democracy—it is democracy. It is as much a part of the democratic system as a neighborhood association or a town council, as a library or youth center or food bank. By the very nature of the outsized role that work plays in our lives, it’s where most of us have the potential to make the biggest impact on how we—and our families and communities—live.

Mandy, as always, hits the nail on the head.

When we talk about politics belonging outside the workplace, we reduce democracy to an extracurricular instead of a core part of our lives. Democracy cannot be sustained by annual visits to the ballot box—it isn’t something we have, it’s something we practice. Like all things that require practice, if you don’t practice it often, you lose it.

All Them Switches: Responsive Elements and More

Container queries are like buses: you’re waiting for ages and then two come along at once.

This switch() syntax looks interesting.

Demos, Prototypes, and MVPs | Jacob Kaplan-Moss

I’m usually building one of three things: a demo, a prototype, or a minimum viable product (MVP).

I’ve seen some confusion over these terms — some people seem to use them somewhat interchangeable. But they’re not the same thing, and building one when you need another can cause problems.

This is a very useful distinction!

Jeremy Keith & Remy Sharp - How We Built the World Wide Web in Five Days on Vimeo

Here’s the talk that Remy and I gave at Fronteers in Amsterdam, all about our hack week at CERN. We’re both really pleased with how this turned out and we’d love to give it again!

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.

How can we break the Brexit deadlock? Ask ancient Athens | James Bridle | Opinion | The Guardian

James describes an ancient Greek machine called the kleroterian:

The method of governance embodied in the kleroterion, which dates back to the very establishment of democracy, is called sortition, meaning selection by lot, as opposed to election by vote.

PushAPI without Notifications | Seblog

Remember when I wrote about using push without notifications? Sebastiaan has written up the details of the experiment he conducted at Indie Web Camp Berlin.

The Complete CSS Demo for OpenType Features - OpenType Features in CSS

Every single font-feature-settings value demonstrated in one single page.

Home Refreshment

A nifty little responsive demo from Nick, recreating a 1948 Coca-Cola ad that was designed to be responsive to different wall spaces.

Web Push Notifications Demo | Microsoft Edge Demos

Push notifications explained using astrology. But don’t worry, there’s also some code, just in case you prefer your explanations to also include models that actually work.

Segmented type appreciation corner

Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.

page-transitions-travelapp

A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.

All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

In Defense of Design Thinking, Which Is Terrible + Subtraction.com

Our insular discourse, the way we’ve jealously protected the language and tools of design, the way we’ve focused so much on the “genius designer”… these behaviors have all worked against our own interests.

Khoi on design thinking and the democratisation of design.

Any embrace of design by non-designers is a good thing, and design thinking qualifies here. The reason for this is that when that happens, it means our language, the vocabulary of design, is broadening to the rest of the world.

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.

100 Demon Dialogues – Lucy Bellwood

This is easily the most relatable 100 Days project I’ve seen:

I began posting a daily dialogue with the little voice in my head who tells me I’m no good.

Now you can back already-funded the Kickstarter project to get the book …and a plush demon.