Simon Sinek: Why Leaders Eat Last

In this in-depth talk, ethnographer and leadership expert Simon Sinek reveals the hidden dynamics that inspire leadership and trust. In biological terms, leaders get the first pick of food and other spoils, but at a cost. When danger is present, the group expects the leader to mitigate all threats even at the expense of their …

123D Circuits

123D Circuits.io enables beginners to easily get started with electronics. Instead of blowing up a component, you can now experiment freely in the live simulated virtual breadboard environment together with friends without being afraid of breaking something. 123D Circuits.io even allows you to simulate Arduino code along with your electronics to control it all or …

JavaScript Bouncing Ball

One of the assignments of one of the courses I teach requires my students to let a cube fall in a Three.js environment. To teach them about how something falls I used Choc to visualize and explain the process of falling per tick of the animation. The final code is available on CodePen. JavaScript Bouncing …

Google Maps JavaScript API Cookbook

Last November I was lead technical reviewer for a book titled Google Maps JavaScript API Cookbook. On December 26th – my birthday, of all days – the book was released on Packt Publishing. It’s a very practical book with lots of code (hence it being a cookbook) touching basic map interactions, custom layers, drawing stuff …

CSS Animated Content Switching

A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you should read — I started goofing around with CSS transforms and transitions a bit. The …

Fluidbox

I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and opening/closing of the lightbox is intuitive and straightforward. So I tasked myself with a little challenge — replicate it, and improve on it, if possible. CSS transitions and transforms FTW Fluidbox Demo → Fluidbox Source (GitHub) → Fluidbox Explanation →

Skrollr – CSS animations linked to scroll position

Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …

Graffiti General

Graffiti General is an immersive WebGL plunge into an abandoned building near Paris and the countless graffiti works that it enshrines. On the eve of it’s restoration, the memory of the building in its current state is preserved and accessible to everybody. Graffiti General was made possible thanks to a combination of the very latest …