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 […]

The Future of Responsive Digital Layout

Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. National Geographic: Forest Giant (Demo) → Next Generation Web Layout: […]

Jake Archibald – Rendering without lumpy bits

Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more […]

lessphp

LESS Compiler written in PHP. Usage is simple: <?php require “lessc.inc.php”; $less = new lessc; echo $less->compile(“.block { padding: 3 + 4px }”); Of course one can take files as input too (define a 2nd argument to cache on disk): <?php echo $less->compileFile(“input.less”); Also ships with an extra shell executable script plessc $ plessc input.less […]

Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices

grunticon takes a folder of SVG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder. Just […]

It’s not a web app. It’s an app you install from the web.

The people over at forecast.io on how often they receive mails from people looking for their app in the App Store where it is not to be found:/p> You don’t get Forecast from the App Store: just go to http://forecast.io/ on your phone, and you’ll be given instructions on how to download it. It’s 2013, […]

Browser Repaint Performance

To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance. The H shortcut within the Developer Tools sure comes in handy! DevTools: Visually Re-engineering CSS For […]