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

Stripe.com Alike Morphing Navigation Dropdown

Analysis and reproduction – using jQuery – of the morphing navigation dropdown as seen on stripe.com:

Instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes.

The trick is that the dropdown items themselves are separated from the background layer .bg-layer:

When the user moves from a navigation item to a different one, the scaleX and scaleY values of the .bg-layer are changed (using JavaScript) to create the morph effect.

Stripe.com Navigation Demo →
Stripe.com Navigation Article →

Elsewhere , , Leave a comment

Data Driven Depression – Determining Radiohead’s Most Sad Song

Radiohead has been my favorite band for a while, so I am used to people politely suggesting that I play something “less depressing.” Much of Radiohead’s music is undeniably sad, and this post catalogs my journey to quantify that sadness, concluding in a data-driven determination of their most depressing song.

The result: “True Love Waits” from their latest album “A Moon Shaped Pool” is the one.

The score was determined using R, the Spotify API, and the Genius Lyrics API

Data Driven Depression: Radiohead Song Sadness by Album →
Finding the most depressing Radiohead song →

Elsewhere , , Leave a comment

Glossary of Modern JavaScript Concepts

Modern JavaScript has experienced massive proliferation over recent years and shows no signs of slowing. Numerous concepts appearing in JS blogs and documentation are still unfamiliar to many front-end developers. In this post series, we’ll learn intermediate and advanced concepts in the current front-end programming landscape and explore how they apply to modern JavaScript.

Pure Functions, Impure Functions, Side Effects, Stateful and Stateless, Immutability and Mutability, Imperative and Declarative Programming, Higher-order Functions, … that kind of proliferation 🙂

Glossary of Modern JavaScript Concepts →

(via Freek)

Elsewhere , Leave a comment

Mimic Realistic Networking Conditions on Windows with winShaper

If you’re using macOS then you might be familiar with the XCode bundled “Network Link Conditioner”, a tool to simulate certain specific networking environments. On Windows you can use winShaper for this. The project consists of a traffic-shaping network driver and an easy-to-use GUI.

You need to be an administrator to run it since it needs to run a device driver to do the filtering but otherwise it is just a matter of running winShaper, selecting a connection profile and turning it on.

Don’t forget that your DevTools have network throttling features built-in. winShaper and the Network Link Conditioner differ from the DevTools in this by throttling the traffic on a system-wide level.

winShaper Downloads →
winShaper Source (GitHub) →

Elsewhere , , Leave a comment

Using Machine Learning to Predict Parking Difficulty

No monitoring of parking meters, video feeds, etc. Looking at the users their behavior is the way to do it:

Google determined that if users circled around a location like in the picture above, it usually suggested that parking might be difficult. To recognize this behavior, they took the difference between when they should have arrived at the location versus when they actually arrived there, with a large difference indicating more difficulty in finding a parking spot.

Using Machine Learning to Predict Parking Difficulty →

Elsewhere , , Leave a comment

JavaScript immutability-helper – Mutate a copy of data without changing the original source

Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we’ve provided a simple immutability helper, update(), that makes dealing with this type of data much easier, without fundamentally changing how your data is represented.

Say you have an object like so:

const user = {
  id: 787466,
  firstName: "Bramus",
  lastName: "Van Damme",
  messages: {
    12345678: {
      type: "text",
      content: "…",
      liked_by: [
         33296376,
         335658,
      ]
    },
    12345679: {
      type: "text",
      content: "…",
      liked_by: [
         558746,
         66314744,
      ]
    }
  }
}

Adding a new id onto one of the liked_by arrays in an immutable way is quite cumbersome, even when using a mordern ES6 ES2015 syntax:

const newUser = {
  ...user,
  messages: {
    ...user.messages,
    12345679: {
      ...user.messages['12345679'],
      liked_by: [
        ...user.messages['12345679'].liked_by,
        589774125
      ]
    }
  }
}

YUCK!

Enter immutability-helper which allows us to write code like so:

import update from 'immutability-helper';

const newUser = update(user, {
  messages: {
    12345679: {
      liked_by: {
        $push: [589774125]
      },
    },
},
});

$push is the action to apply onto the source. Other actions provided by immutability-helper are:

  • {$push: array}: push() all the items in array on the target.
  • {$unshift: array}: unshift() all the items in array on the target.
  • {$splice: array of arrays}: for each item in arrays call splice() on the target with the parameters provided by the item.
  • {$set: any}: replace the target entirely.
  • {$merge: object}: merge the keys of object with the target.
  • {$apply: function}: passes in the current value to the function and updates it with the new returned value.

immutability-helper

Elsewhere , Leave a comment