May 292013


I’ve been hearing for years that designers need to learn to code. At first I thought I’d just end up doing two jobs instead of one. But the better I get at coding, the more I understand how connected they are. As a designer in the digital spectrum, you realize that your very work–your material, which exists in the world–is code. How can you design something if you don’t know how it works? So, designers, step into the ring.


I want you to download Processing. It’s a language built on Java and it focuses on images and animation. It’s good for designers because it gives you solid visual feedback about what your code is doing. After you download Processing, I want you to watch the video below. It’s a Processing sketch (a sketch is what the programs are called in Processing), and this is your first gentle punch. The video is about ten minutes long and shows a few simple examples of how to use numbers in different ways in order to make simple shapes on the canvas. Try to follow along with me and type everything out as I do, because I think it’ll help you learn.

MORE:   Designers: Learn To Code! Here’s How To Start | Co.Design: business + innovation + design.




Sep 122012

Don’t listen to the voices in your head, advises frontend developer Nick Jones. Here he explains how he got stuck creating his personal site and learned to trust his instincts instead

There’s this fallacy of a right way and a wrong way to design and code. If you spend enough time looking for it or reading about it, you’ll end up paralysed. It happened to me. But in early 2012, five years after the launch of the iPhone, I decided it was time to suck it up and create a modern website for myself. What follows are my doubts about making


(INTERNAL DIALOGUE) You know nothing about ‘responsive web design’. You have no business making a responsive site for yourself or anyone else. It’s too new and untested. You aren’t capable of pulling it off. You’re not even a real programmer. In the event that you do pull it off, you’ll immediately wish you hadn’t. Something new will replace it by this time next year. You’ll look stupid for jumping on the bandwagon with every SEO expert and web guru who now drop its name. Remember what happened with microsites?

MORE:  I cannot design or code a responsive website | Opinion | .net magazine.


Sep 102012

We’ve written before about the value of writing your README before your code, but what about when it comes to the actual code? Terse one-liners? Paragraph-long descriptions? How much is enough and when is it too much?

How to comment code is a perennial subject of debate for programmers, one that developer Zachary Voase recently jumped into, arguing that one of the potential flaws with extensive comments (or any comments really) is that they never seem to get updated when the code changes. “We forget,” writes Voase, “overlooking a comment when changing the fundamental behavior of semantics of the code to which it relates.”

Voase thinks the solution is in our text editors, which typically “gray out” comments, fading then into the background so we can focus on the actual code. We ought to do the opposite, he believes: Make the comments jump out. Looking at the visual examples on Voase’s post makes the argument a bit more compelling. Good text editors have configurable color schemes so it shouldn’t be too hard to give this a try and see if it improves your comments and your code.

Another approach is to treat comments as a narrative. Dave Winer recently mentioned comments in passing, writing about the benefits of using an outliner to handle comments since it makes it easy to show and hide them:

MORE:  The Best Way to Comment Your Code | Webmonkey |


Apr 032012

So you want to create an interactive WebGL liquid metal ball? Glad you asked, programming wizard Paul Lewis has got just the thing!

Making websites is tons of fun, but sometimes you need to break free and do something a bit unusual. That’s what we’ll be doing today. We’ll be using the excellent Three.js engine to create an interactive metallic ball. As you click and drag the ball distorts and then slowly settles back to its original shape.

To do this we’ll be covering spring physics, 3D vectors and ray casting (and a few other things besides) all in an effort to create a compelling and fun interactive experience. Let’s start by looking at what we’re going to make.

The thing about experiments like these is that on the surface they don’t look to have direct commercial applications. You’d be forgiven for thinking the same about this one as well, and perhaps you’re right. But my philosophy is that as a developer you learn techniques and solutions to problems in these experiments that can help you in your day-to-day work. There have been many times where this has proved true for me, and I’m certain it’ll work out for you as well. In any case this is going to be tons of fun, so let’s get started on creating our scene.


via Create an interactive liquid metal ball with WebGL | Tutorial | .net magazine.


Sep 062011



Unpretentious and easy to approach, Codeacademy makes coding so enjoyable, it’s hard to believe you’re actually learning something. The website starts users off small, offering tutorials on how to use some very basic JavaScript commands. Each lesson is incrementally progressive and conversational in tone, making it easy to advance your skills without breaking a sweat. Each time you reach a new plateau of coding knowledge, users are awarded with a virtual trophy, making the time spent learning how to do something useful feel a like playing a game.

via Maximum PC | Cool Site of the Week: Codeacademy.

Sep 062011



PHP has the reputation of being the poor cousin of scripting languages, due to outdated language features and plenty of poor quality code written using it. I use PHP as my main programming language and it’s seen waves of change over the last five years; it’s so much more than a language for script kiddies and hobbyist hackers. There are some ‘truths’ about the language that aren’t true these days, so I’d like to bring you a little update.

via Debunking PHP’s bad reputation | Opinion | .net magazine.

Aug 252011

The word gradient has many different meanings, but in CSS, a gradient is strictly defined as a gradual transition between a range of (at least two) colours. CSS gradients are a fairly recent development but have already been through a number of changes. They were originally proposed by the WebKit team in April 2008, modified from the syntax proposed for the canvas element in HTML 5.

The W3C’s CSS Working Group later proposed a modified syntax, and this syntax is in the latest revisions of the Image Values Module. The first browser to implement this was Firefox 3.6, and the WebKit team weren’t far behind, so Safari 5.1 and above and recent versions of Chrome also use this syntax (The Book of CSS3 explains the old WebKit implementation fully).

via Master CSS gradients | Tutorial | .net magazine.

Aug 252011



According to jQuery support, training and consulting company appendTo, the popular open source library has now ‘overtaken’ Flash, in terms of how many websites have deployed each technology, at least when it comes to the world’s ‘top’ websites.

via jQuery overtakes Flash | News | .net magazine.