Tags: eff

27

sparkline

JavaScript pedalboard

Effects pedals in the browser, using the Web Audio API. Very cool!

Be sure to read Trys’s write-up too.

Fading out siblings on hover in CSS | Trys Mudford

Well, the clever CSS techniques just keep on comin’ from Trys—I’m learning so much from him!

Carson: Textured fluid type - Steve Honeyman

I reckon it’s time for distressed type to make a comeback—CSS is ready for it.

CSS Border-Radius Can Do That? | IO 9elements

This is the trick that Charlotte used to get the nifty blobby effect on last year’s UX London site. Now there’s a tool to help you do the same.

Beyond style guides: lessons from scaling design at TELUS

I like the questions that the TELUS team ask about any potential components to be added to their design system:

  1. Is it on brand?
  2. Is it accessible?
  3. Has it been tested?
  4. Can it be reused?

They also have design principles.

Text Effects - a Collection by Mandy Michael on CodePen

Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!

Spinning jenny. — Ethan Marcotte

During the Industrial Revolution, as new machines were invented to increase output, business owners often dreamed of an entirely automated workforce—of a factory without workers. I assume their workers had different dreams.

Ethan thinks through the ethical implications of increasing automation and efficiency über alles:

I can’t stop thinking about how much automation has changed our industry already. And I know the rate of automation is only going to accelerate from here.

At the very least, maybe it’s worth asking ourselves what might happen next.

The Eponymous Laws of Tech - daverupert.com

Dave has curated a handy list of eponymous laws.

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

The Human Computer’s Dreams Of The Future by Ida Rhodes (PDF)

From the proceedings of the Electronic Computer Symposium in 1952, the remarkable Ida Rhodes describes a vision of the future…

My crystal ball reveals Mrs. Mary Jones in the living room of her home, most of the walls doubling as screens for projected art or information. She has just dialed her visiophone. On the wall panel facing her, the full colored image of a rare orchid fades, to be replaced by the figure of Mr. Brown seated at his desk. Mrs. Jones states her business: she wishes her valuable collection of orchid plants insured. Mr. Brown consults a small code book and dials a string of figures. A green light appears on his wall. He asks Mrs. Jones a few pertinent questions and types out her replies. He then pushes the start button. Mr. Brown fades from view. Instead, Mrs. Jones has now in front of her a set of figures relating to the policy in which she is interested. The premium rate and benefits are acceptable and she agrees to take out the policy. Here is Brown again. From a pocket in his wall emerges a sealed, addressed, and postage-metered envelope which drops into the mailing chute. It contains, says Brown, an application form completely filled out by the automatic computer and ready for her signature.

Dwitter

A social network for snippets of JavaScript effects in canvas, written in 140 characters or fewer. Impressive!

JavaScript Systems Music

A massively in-depth study of boundary-breaking music, recreated through the web audio API.

  1. Steve Reich - It’s Gonna Rain (1965)
  2. Brian Eno - Ambient 1: Music for Airports, 2/1 (1978)
  3. Brian Eno - Discreet Music (1975)

You don’t have to be a musician or an expert in music theory to follow this guide. I’m neither of those things. I’m figuring things out as I go and it’s perfectly fine if you do too. I believe that this kind of stuff is well within reach for anyone who knows a bit of programming, and you can have a lot of fun with it even if you aren’t a musician.

One thing that definitely won’t hurt though is an interest in experimental music! This will get weird at times.

CanvasSwirl: An animated spirograph experiment in JavaScript and canvas by xhva.net

But, like, have you have ever really looked at your hand?

Network Effect

The latest piece from Jonathan Harris explores online life in all its mundanity, presenting it in an engaging way, all the while trying to make you feel bad for doing exactly what the site is encouraging you to do.

Certbot

For your information, the Let’s Encrypt client is now called Certbot for some reason.

Carry on.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

Let’s Encrypt

This is a great development! The EFF are working on a creating a new certificate authority that will issue certs for free.

I am so happy that the certificate authority racket is getting this shake-up.

OriDomi - origami for the web

A fun little JavaScript library for folding the DOM like paper. The annotated source is really nicely documented.

Notes on remixing Noon, generative text and Markov chains

Jeff Noon and Markov chains—a heavenly match by Dan.

Tidy Street electricity usage | Flickr - Photo Sharing!

I really like this idea: one street in Brighton is openly displaying its electricity usage over time.

Tidy Street electricity usage