The success to the animations in “Who Framed Roger Rabbit”

As the author calls it: “the fundamentals of hybridizing animation with live action film”.

  1. Connected eye lines
  2. Physical Interactions with the Environment
  3. Light & Shadow Accuracy

… always take the chance to “Bump The Lamp” 🙂

(via The Verge)

Elsewhere , , Leave a comment

Deep dive CSS: font metrics, line-height and vertical-align

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

Deep dive CSS: font metrics, line-height and vertical-align

Elsewhere , , Leave a comment

Reactive Animations with CSS Variables

Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events.

The overall idea is that JS captures multiple streams of events into a single stream, and emits those values over to CSS, where they are expressed as custom properties. By doing this, we can accomplish reactive styles.

The result is RxCSS, “a very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables”.

Not entirely familiar with CSS Variables? CSS Variables: var(–subtitle); is a good video/presentation to get you started.

Observing the scroll offset in an element could be coded as such:

// Observe scrolling in .content
const content = document
  .querySelector('.content');

const scroll$ = Rx.Observable
  .fromEvent(content, 'scroll')
  .map(({target}) =>
    2 * target.scrollTop / target.clientHeight);

// Couple the result of the `scroll$` observable to the `scroll` CSS Variable
RxCSS({
  scroll: scroll$,
});

In your CSS you can then use the scroll CSS Variable like one would normally do:

// Fade out background photo + scale it up when scrolling up one screen
.ui-bg-photo {
  opacity: calc(1 - var(--scroll));
  transform: scale(calc(1 + var(--scroll) / 3));
}

// Fade in the content when scrolling up
.ui-content {
  opacity: var(--scroll, 0);
}

The end result is this:

Reactive Animations with CSS Variables (Slides) →
Reactive Animations with CSS Variables (Video) →
RxCSS →

Elsewhere , , , 1 Comment

Making accessibility simpler with ally.js

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the “web platform” should’ve provided itself, so JavaScript applications can be made accessible more easily.

An example of the things provided by ally.js is ally.maintain.tabFocus to trap TAB focus in dialogs for example, thus preventing the browser from shifting focus to its UI or to elements not contained in the dialog.

var handle = ally.maintain.tabFocus({
  context: '.dialog',
});

JS Bin on jsbin.com

ally.js

Elsewhere , , Leave a comment

The True Story of the “Ellen Selfie”

Talking about The Oscars, the story behind the famous “Ellen Selfie” is quite interesting:

From time to time, people ask me how that selfie came to be. It’s a pretty good story of collaboration, partnership and professionalism. And these days, a story with a happy ending is worth telling.

Next to collaboration, partnership and professionalism it’s also a part spontaneity:

In the months leading up to the Oscars, we tossed out dozens of ideas for Ellen to try out. The one she liked had her simply tweeting a selfie from the stage, with the audience behind her. On an impulse, during the rehearsals for the show on Saturday afternoon, she spotted the seating card for Meryl Streep, who would be on the aisle in the third row. Ellen rehearsed going down and taking a selfie with Meryl, just as an option.

The True Story of the “Ellen Selfie” →

Elsewhere , , Leave a comment

Did the Oscars Just Prove That We Are Living in a Computer Simulation?

The New Yorker, following the recent fuck-up at the Oscars where “La La Land” was mistakingly named as the winner for “Best Picture”:

This bizarre event put one in mind of a simple but arresting thesis: that we are living in the Matrix, and something has gone wrong with the controllers. This idea was, I’m told, put forward first and most forcibly by the N.Y.U. philosopher David Chalmers: what is happening lately, he says, is support for the hypothesis that we are living in a computer simulation and that something has recently gone haywire within it. The people or machines or aliens who are supposed to be running our lives are having some kind of breakdown. There’s a glitch, and we are in it.

Some people think too much … It’s human to make mistakes (the biggest one here being a poorly designed card). Some mistakes go without anyone even noticing, and some happen on the big screen for everyone to see. This event – you can watch the video here – just happens to be one in the latter category.

Did the Oscars Just Prove That We Are Living in a Computer Simulation? →

Sidenote: Betteridge’s law of headlines, anyone?

Elsewhere , , 1 Comment

How the BBC makes Planet Earth look like a Hollywood movie

Great piece by Vox, on the technology behind the cinematic style of the BBC’s Planet Earth II:

Elsewhere , , Leave a comment

Progressive Web Apps with React

Great set of articles by Addy Osmani:

In this series of posts I’ll share my experience turning React-based web apps into PWAs. We’ll also cover why shipping just what users need for a route & throwing out all other scripts are good ideas for fast perf.

As with all articles by Addy: well-written, accurate, and complete.

Part 1 — Introduction →
Part 2 — Page Load Performance →
Part 3 — Offline support and network resilience →
Part 4 — Progressive Enhancement →

Elsewhere , , , Leave a comment

When Algorithms Design a Concert Hall

The auditorium of Hamburg’s newly opened concert hall, the Elbphilharmonie, looks amazing.

The auditorium is a product of parametric design, a process by which designers use algorithms to develop an object’s form. In the case of the Elbphilharmonie, Herzog and De Meuron used algorithms to generate a unique shape for each of the 10,000 gypsum fiber acoustic panels that line the auditorium’s walls like the interlocking pieces of a giant, undulating puzzle.

What Happens When Algorithms Design a Concert Hall →

Elsewhere , , Leave a comment

Style Scoping with Element Queries using EQCSS

Tommy Hodgins on Style Scoping:

Style scoping is the idea that you can select an element anywhere in your document to serve as a point of reference as you write styles.

To achieve this he uses EQCSS, a JavaScript plugin to writing CSS Element Queries (which essentially are “scoped styles with a responsive condition”), and its specific $this selector:

Anywhere $this is present inside of a scoped style it refers to only the scoped element.

@element 'div' and (min-width: 500px) {
  $this { background: red; }
  /* When any div is >=500px, make that div red */

  div { background: lime }
  /* When any div is >=500px, make all divs on the page lime */

  $this div { background: gold }
  /* When any div is >=500px, make all divs inside the scope gold */
}

At the end of the article there are quite a few interesting demos to check out.

How Style Scoping Works with Element Queries →
EQCSS – A CSS Extension for Element Queries & More →

Elsewhere , , Leave a comment