Case Study: Building the Stanisław Lem Google doodle Hello, (strange) world The Google homepage is a fascinating environment to code within. It comes with many challenging restrictions: particular focus on speed and latency, having to cater to all sorts of browsers and work under various circumstances, and… yes, surprise and delight. I’m talking about Google doodles, the special illustrations that occasionally replace our logo. Every interactive doodle I coded (Pac-Man, Jules Verne, World’s Fair) – and many I helped with – were in equal parts futuristic and anachronistic: great opportunities for pie-in-the-sky applications of cutting-edge Web features… and gritty pragmatism of cross-browser compatibility. We learn a lot from each interactive doodle, and the recent Stanisław Lem mini-game was no exception, with its 17,000 lines of JavaScript code trying many things for the first time in doodle history. View Stanisław Lem doodle code » A thing worth keeping in mind is that Google's homepage is not a place for tech demos. The frame rate When?
HTML5 is not ready yet – and will never be (and that is a good thing) – HTML5 Question #1 One of the big questions I repeatedly got at events lately is this: Is HTML5 ready yet? The answer is no, because HTML5 is not a bowl of spaghetti that you know when they are ready by flinging them against the wall. HTML was never “ready” and will never be “ready”. It can be “the right choice” and it will be “an exciting opportunity”, it might also be “a dirty hack that works right now” or a “semantically valuable resource that can be converted to whatever you want”. You see, even HTML4.01 or XHTML for that matter was never “ready”. Standard compliance on the web is a means to an end. We used spacer GIFs and for padding and margins before CSS got support, we used tables for layout, we used image maps, we used image replacement, we used HTML generated from JavaScript for different browsers and whatever it took to get the best out of what we had in order to achieve the goal we set ourselves. What needs killing is the close-minded limited way we think about web applications.
Free customisable icon font sets from Fontello Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? Well, wonder no more. Drawing from number of sources - including Entypo and Font Awesome - Fontello not only has all the icons you need, but you can pick and choose the glyphs you need and compile them into your own minimalist set. You can of course, download the entire set of icons from the GitHub repository (actually it’s several sets) but the Fontello interface makes customising your font so easy it’s the only sensible approach.
From PSD to HTML the easy way - Using Ultimate CSS Framework From PSD to HTML the easy way – Using Ultimate CSS Framework Already a member? This tutorial will teach you how to transform your PSD files to HTML with a very easy method using Ultimate CSS Framework. This framework will help you first to create your designs using the psd file. Using css classes, you will be able to align your design like a pro. Things you need: Download Ultimate CSS Framework Optional – Vector icons Please note: we have created over 60,000 premium design items which you will be able to download instantly and use in your own or client designs. View layout option: Before you start this tutorial it is better to look on the layout option. View Layout Option After you have the framework .zip file, extract it to your hard drive. The first step is to open the PSD file included in the “PSD Template” folder. In case your layout will not look the same try to make the folder with the blue blueprints visible. After you enable the Guides you will see some vertical blue lines. Demo 1 1.
Design How To Build A Site That Looks Great On Every Screen bost.ocks.org Please find my recent work on Observable. Past Work April 28, 2017A Better Way to Code December 9, 2016Command-Line Cartography March 9, 2016What Makes Software Good? December 28, 2015Introducing d3-scale December 3, 2015Introducing d3-shape November 23, 2015Let’s Make a (D3) Plugin December 27, 2014Mapping Every Path to the N.F.L. December 20, 2014How Each Team Can Make the N.F.L. November 5, 2014The Most Detailed Maps You’ll See From the Midterm Elections November 3, 2014How To Scroll September 19, 2014‘Stop-and-Frisk’ Is All but Gone From New York July 26, 2014Mapping the Spread of Drought Across the U.S. June 26, 2014Visualizing Algorithms June 15, 2014Three Little Circles May 22, 2014Is It Better to Rent or Buy? May 6, 2014Let’s Make a Bubble Map April 22, 2014Who Will Win The Senate? March 7, 2014Let’s Make a Block Feburary 14, 2014Front Row to Fashion Week February 14, 2014Sochi 2014: Interactive Stories January 11, 2014Taking the Battle to the States November 5, 2013Let’s Make a Bar Chart #Examples
New web-based tool for batch-processing images Sizzlepig is a web-based image resizing app that will process a whole folder of images to multiple sizes, scales, crops, and compressions. The new tool is able to process large numbers of batched images or photos in the cloud, syncing directly with Dropbox. Aimed at designers involved in any kind of digital image processing - from ecommerce site builds to content management systems to digital asset creation - it's currently in public beta. The app was created by a team of creatives and developers - formerly working for agencies including Razorfish - who were "tired of scripts, blind resizing, messed up crops and more," says Sizzlepig's Andrea Livingston. "We wanted a way to visually control and display the results of batch sizes. Processing in the cloud enables you to produce results very quickly, says Livingston, while visually fine-tuning and cropping each image size in one area eliminates rework due to error. Liked this?