CSS Code Review by Jonathan Snook

Some time last week Brad Frost asked on Twitter for some feedback on a bit of markup he had built:

Jonathan Snook took the time to give Brad some feedback, which he recorded:

A Code Review, Or Yet Another Reason to Love the Web →

Elsewhere , , Leave a comment

Pokemon Locator Apps

pokevison

With the launch of Pokémon Go, a truckload of Pokémon locator apps/websites have appeared. Fons Van Damme (not related) created Pokemon Locator. And then there’s the more powerful Pokévision (pictured above):

Pokevision is a Pokemon tracker/locator for the mobile game Pokemon Go. It uses the Niantic API to grab the location of all Pokemon near your (or your selected location) and display them on the map in real-time; this means if it is displayed on the map, you can go out and catch them!

These apps totally remind of GowallaMILF, a website I created back in the day to locating items from Gowalla (RIP).

Pokévision →
Pokémon Locator →

Elsewhere , , , Leave a comment

Transit Maps: Apple vs. Google vs. Transit App

transit-maps

The folks who created Transit App, which sports very nice transit maps:

We wanted the prettiness of Apple’s slow solution, but the scalability of Google’s automatic process. In short, we wanted algorithms to draw beautiful transit maps.

It’s in the details, people!

Transit Maps: Apple vs. Google vs. Transit App →

Elsewhere , , , Leave a comment

Behind the Scenes of “Rogue One: A Star Wars Story”

Go behind the scenes with the cast and crew of Rogue One: A Star Wars Story.

Can’t wait for this one to be released!

Elsewhere , Leave a comment

Fixing HTML Video on Mobile

1-HnEpDa3knnXVj7qxuW_pXQ

Samir Zahran on how and why they built Whitewater, an open source video encoder and player for their site:

Common HTML5 Video features such as preloading and autoplay are completely missing in some browsers. The scripting APIs are limited compared to what’s available on desktop. Worst of all, Safari on the iPhone (the most popular mobile browser to visit our site) does not allow inline video playback at all (not until iOS 10 is released)

It renders on <canvas> and requires you to first encode your video to the Whitewater format which uses diffmaps.

Fixing HTML Video on Mobile →
Whitewater Mobile Video →

Note: In case you don’t want to encode your videos you can – alternatively – use the hack that powers “players” such as iphone-inline-video: manually change the currentTime of the video element.

Here’s a little snippet of a (non-public) project that I’m working on that might be of help:

play(reset = false) {

  // Reset to start if need be
  if (reset) {
    this.refs.video.currentTime = 0;
  }

  // Store time
  this.lastTime = Date.now();

  // "Play" the video, using requestAnimationFrame
  this._rAFRender();

}

pause() {
  this.rAF && cancelAnimationFrame(this.rAF);
}

_rAFRender() {

  // Calculate time difference between this and the previous call to _rAFRender
  const time = Date.now();
  const elapsed = (time - this.lastTime) / 1000;

  // More time has passed than the framerate
  if (elapsed >= (1 / 25)) {

    // Seek the video to currentTime, thus rendering a new frame even though it's not playing
    this.refs.video.currentTime = this.refs.video.currentTime + elapsed;

    // Store time as lastTime
    this.lastTime = time;

  }

  // We are not at the end of the video: keep on rendering
  if (this.refs.video.currentTime < this.refs.video.duration) {
    this.rAF = requestAnimationFrame(this._rAFRender);
  }

}

If you create an <audio> element in parallel, you can even sync up the audio from the video with it – a feature Whitewater has not.

Note to self: I urgently need to release this component …

Elsewhere , , , Leave a comment

Real–world HTTP/2: 400gb of images per day

h2-fast-profile

Michael Mifsud of 99designs:

We began a small-scale rollout for static assets earlier this year. After building confidence in our new infrastructure, we began transitioning our static assets to HTTP/2. Surprisingly, some sections of our platform felt noticeably slower. This post will cover our investigation into the performance regressions we experienced by adopting HTTP/2.

So, should you then move to HTTP/2? As per usual, the answer is “It Depends”:

For a typical image rich, latency–bound page using a high–speed, low–latency connection, visual completion was achieved 5% faster on average.

For an extremely image–heavy, bandwidth–bound page using the same connection, visual completion was achieved 5–10% slower on average.

Real–world HTTP/2: 400gb of images per day →

Elsewhere , , Leave a comment

HyperTerm – JS/HTML/CSS Powered Terminal

HyperTerm

The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards.

HyperTerm →
HyperTerm Source (GitHub) →
HyperTerm Hyperpower Extension →

Elsewhere , , Leave a comment

Drunk Han Solo

When friends drink too much – even in galaxies far, far away – friends don’t let friends drive fly drunk.

Elsewhere , , Leave a comment

The mobile device lab at Facebook

13671998_1795348784017689_1025492062_n

Insightful post by the folks at Facebook on how they transitioned from testing their apps on a single device to a mobile device lab (holding 1000+ devices) at their Prineville data center.

Having tried out several things, they eventually built their own custom racks which not only hold the devices, but also function as an electromagnetic isolation (EMI) chamber.

Each rack holds eight Mac Minis (or four OCP Leopard servers for Android testing) that drive the phones to install, test, and uninstall the application we’re testing. Each Mac Mini is connected to four iPhones, and each OCP Leopard server is connected to eight Android devices, for a total of 32 phones per rack. The phones connect to Wi-Fi via a wireless access point in each rack. These phones lie on a slightly tilted pegboard so mounted cameras can record their screens. Engineers can access these cameras remotely to learn more about how each phone reacts to a code change.

Right now they have about 60 of these racks, and they are planning on doubling the capacity of each rack from 32 to 64 devices.

UPDATE: Here’s a better picture of such a rack. Note the Mac Minis at the bottom:

img_20160712_122640

The mobile device lab at the Prineville data center →
TechCrunch: Facebook lifts the veil on its mobile device testing lab →

Elsewhere , , , Leave a comment

Introduction to Webpack

Slides by Jan De Wilde:

This presentation will guide you step by step so you can start using Webpack in your own projects.

Elsewhere , , Leave a comment