Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file. A typical example would be to blackbox the script of the JS …

Creating a Multiple Image Hero Layout with CSS Grid Layout

Excellent demo by Rachel Andrew: Using CSS Grid Layout and a touch of flexbox to build a more forgiving hero image block that can cope with additional content or additional boxes. CSS Grid: Multiple image hero block (CodePen) → Related: A Complete Guide to CSS Grid Layout →

Flow – A static type checker for JavaScript

Flow is a static type checker for JavaScript. With it, you can add types to any existing JS code. Without flow: function foo(x, y) { return x.length * y; } With flow: // @flow function foo(x: string, y: number): number { return x.length * y; } When passing in a Number for the value of …

Keystroke Recognition Using WiFi Signals

We’re all doomed: In this paper, we propose a WiFi signal based keystroke recognition system called WiKey. WiKey consists of two Commercial Off-The-Shelf (COTS) WiFi devices, a sender (such as a router) and a receiver (such as a laptop). The sender continuously emits signals and the receiver continuously receives signals. When a human subject types …

Feature Detection in CSS (CSS @supports)

There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code …

Pure CSS Twitter Heart Animation

Ana Tudor has recreated the Twitter Heart Animation in pure CSS: See the Pen no sprite, no JS heart animation – click it! by Ana Tudor (@thebabydino) on CodePen. Easy to follow step-by-step instructions in the original post. The most surprising part – to me – is that the particles are rendered using box-shadow. Recreating …