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

Efficiently render large lists and tabular data with react-virtualized

Just like Infinity.js, but then for React.

The list is windowed (or “virtualized”) meaning that only the visible rows are rendered.

Less DOM nodes = better performance 🙂

Also works with rows that have different heights, something not quite common for this kind of thing.

react-virtualized

Elsewhere , , Leave a comment

Rome’s Invisible City

Sometime last week “Rome’s Invisible City” aired on the telly here in Belgium.

With the help of a team of experts and the latest in 3D scanning technology, Alexander Armstrong, along with Dr Michael Scott, explores the hidden underground treasures that made Rome the powerhouse of the ancient world. In his favourite city, he uncovers a lost subterranean world that helped build and run the world’s first metropolis and its empire.

I didn’t give it that much attention at first, yet as the show progressed I became more and more intrigued by the cleverness of the Romans (and of course by the stunning 3D visualizations).

To say that the Romans developed this wicked concrete (now known as “Roman Concrete”) based on lime and pozzolana which hardens even under water and lasts for decades — This in contrast to our modern day concrete that only hardens in air, and lasts for half a decade (if all goes well).

The 3D scanning itself was done by ScanLAB.

We journeyed via the icy, crystal clear waters of subterranean aqueducts that feed the Trevi fountain and two thousand year old sewers which still function beneath the Roman Forum today, to decadent, labyrinthine catacombs. Our laser scans map these hidden treasures, revealing for the first time the complex network of tunnels, chambers and passageways without which Rome could not have survived as a city of a million people.

ScanLAB Projects: Rome’s Invisible City →

👉 FYI: If you live in Belgium you can watch “Rome’s Invisible City” for free online on vrtnu, until March 21. A lesser legal version (and windowed) version is up on YouTube.

Elsewhere , , Leave a comment

PanelKit, a UI framework enabling floating and pinned panels on iOS

Great stuff by Louis D’hauwe, a former student of mine:

PanelKit is a UI framework that enables panels on iOS. A panel can be presented in the following ways:

  • Modally
  • As a popover
  • Floating (drag the panel around)
  • Pinned (either left or right)

This framework does all the heavy lifting for dragging panels, pinning them and even moving/resizing them when a keyboard is shown/dismissed.

PanelKit →

Elsewhere , , Leave a comment

Reflecting On One Very, Very Strange Year At Uber

Susan J. Fowler, whom left Uber after about a year of employment there:

I joined Uber as a site reliability engineer (SRE) back in November 2015, and it was a great time to join as an engineer […] After the first couple of weeks of training, I chose to join the team that worked on my area of expertise, and this is where things started getting weird. On my first official day rotating on the team, my new manager sent me a string of messages over company chat. He was in an open relationship, he said, and his girlfriend was having an easy time finding new partners but he wasn’t. He was trying to stay out of trouble at work, he said, but he couldn’t help getting in trouble, because he was looking for women to have sex with. It was clear that he was trying to get me to have sex with him, and it was so clearly out of line that I immediately took screenshots of these chat messages and reported him to HR.

And that’s just the tip of the iceberg. Unbelievable that this kind of of stuff is still possible. Even worse is that HR neglected all of her complaints, and even protected the offender.

Reflecting On One Very, Very Strange Year At Uber →

Elsewhere , , Leave a comment