console.snapshot

Output snapshots and screenshots of canvas elements directly in the console of the Chrome Dev Tools var canvas = document.createElement(“canvas”), ctx = canvas.getContext(“2d”); // … //draw // … console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size Resulting output is the image picture above. Also supports creating a snapshot which …

Sizing (Web) components by adding a Trojan horse into your CSS

So when it comes to changing the size of a component [of a framework], for example making a Slider bigger for touch input, it might get tedious fiddling with all the widths/heights, border-radi.. etc. So how can we make it easier? Well, by sneaking a Trojan horse into your components and use it to control …

Color Emoji in Windows 8.1 —The Future of Color Fonts?

With Windows 8.1, Microsoft’s operating system now also supports color emoji. But they did it in a very different way than Apple and Google. Instead of using PNG images, they introduced a support for layered vector glyphs! Reminds of that neat trick where one would layer webfonts/icofonts on top of eachother, all in a different …

The franticness of working in the web business

Some interesting quotes by Richard Davey from his talk HTML5 Gaming on the Mobile Web is now live on Adobe TV: Things you’re told not possible today might be by the end of the project and Be prepared to un-learn what you know every 6 months Think of new features that appear in a canary/beta …

X-Tag: Web Components’ Custom Elements Polyfill

X-Tag is a powerful sugar library primarily focused on wrapping and enhancing one of the draft-state Web Component specs: Custom Elements With Custom Elements, you could for example just write up <x-map data-key="6c86bb5b30a442c180772d978f3ae000"></x-map> in your HTML and have it rendered as a full blown map. Speed Up App Development with X-Tag and Web Components →X-Tag …