Flipboard Engineering: 60fps on the mobile web

Since earlier this week Flipboard now is a website too. As they wanted to mimic their mobile apps, it would sport lots of animations. During their first tests, they found the DOM being too slow (although that’s not entirely true, see this video and its description for example). And then, an epiphany: Most modern mobile …

CSS object-fit

img { width: 150px; height: 100px; border: 1px solid #000; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established …

PHP Scalar Type Hints

At this moment a vote on the PHP RFC “Scalar Type Hints” is going on. It would allow stuff like this: <?php class ElePHPant { public $name, $age, $cuteness, $evil; public function __construct(string $name, int $age, float $cuteness, bool $evil) { $this->name = $name; $this->age = $age; $this->cuteness = $cuteness; $this->evil = $evil; } } …

Designing Twitter Video

We wanted to be extremely careful about weighing down the experience with extra pro-user functionality. Even though we support longer videos, we don’t necessarily want to make people feel like they need to fill it up. As such, we landed on a simple interface for capturing multiple video segments without the pressure of filling up …