You are a developer, the Internet is your friend.

Charlie Gleason

with your friend Charlie Gleason

Hello. You’ve probably just seen my talk at Web Directions South 2012. If not, that’s cool. Perhaps someone tweeted it? Or you’re my Mum (Hey Mum!) and I asked you to check it out?

It was called You Are A Developer, The Internet Is Your Friend. To give you an idea of what it was about, this is the blurb:

Below are a series of notes, links, references and general ephemera for anyone who is enthusiastic about such things. Let’s venture on, shall we?

like Hello friends

Introduction

With a title that looks as though it was plucked directly from a heavily discounted self help guide, you may be wondering who this is aimed at. Essentially, me. It’s a big list of things I wish someone had told me when I was starting out as a designer.

In my opening remarks, I mentioned a to do list written by a seven year old.

Above: A to-do list by a seven year old.

It’s probably my favourite to do list ever, because the end goal is simply to be happy and go home. I opened the talk with it because that, to me, is what web design and development should be about - doing something you love. So if at any point while trying out these new toys, tricks, gadgets and gizmos you feel frustrated or annoyed, just walk away for a bit. Get some fresh air. Hug a puppy. It’ll help.

Such a great to do list. Seven year olds are pretty much the best.

smile My name is…

Chapter 1

I am Charlie Gleason. I love design, development, photography, beer, riding a bicycle and rock climbing. I used to live in London, and I almost lived in Perth, but I grew up in Melbourne. I’ve been a lead developer and technical lead at a big traditional ad agency, and a senior designer at another, and now I’m a designer / developer at Goodfilms, which is a rad social film site. I spend the rest of my time freelancing, listening to vinyls and playing in a band called Brightly.

Also, I’m on twitter at @superhighfives, if you’re so inclined.

books Learning How To Learn

Chapter 2

The question is not whether you should learn to code, but more importantly, whether you have something to build. If you do, that’s awesome! Let us plow ahead into the choppy seas of cross browser compatibility and ever changing specification documents that constitute a pretty massive part of my day. If you don’t, think of something! Make a website for your band, or your gardener, or you best friend. I once made a website for a cafe I liked, called Limoncello Is The Best Cafe.

Above: Limoncello Is The Best Cafe. Dot com.

lightning Embrace your ideas

Think about the things you use, the things you love, and the things that frustrate you. Prototype things in your head. Your tram never comes on time. How can the internet help you to make that less annoying? The best design and development is about making things easier.

Sometimes, when I am reclining in my tasteful Ikea Poäng chair ($189.00, birch veneer, alme black, absurdly comfortable) I think of something that would be awesome to build, and write it down.

5 / 10 times it is a terrible idea

Which is why I still own decafdoesnotsuck.com.

4 / 10 times someone stole it already

Or it is a good idea, but someone has already built it and they are too busy making hats out of money to respond to me on Twitter.

1 / 10 times the domain name is taken

Or you won’t be able to find a good domain name, because they’re all taken. Every single one. These are the trials of our times.

exclamationchat However, that’s awesome!

Don’t let that get you down - it’s like automated refinement. It just means you’re working up towards something incredibly rad.

The point is, building something is the best way to learn how to build something. And if you build it, they might come. And if they don’t, at least you learnt something.

As an example of mashing together an idea and a desire to try something new, I built The 98 Against.

Above: The 98 Against site.

I built it in response to the 98 parliamentary members who voted against marriage equality in the lower house. I was feeling frustrated, and I wanted to make a list that I could refer to later, with names, photos and contact details. I used Nokogiri, a Ruby library for parsing sites. Then I used it to write a script to spider the parliamentary website and grab all the required details, and dump it into a CSV. I put that into a database and voila, armchair activism!

“‘It’s better to be safe than sorry’ is such crap. You know what’s better than being safe? Being awesome.”

Jeff Atwood (Co-founder of Stack Overflow and Stack Exchange)

question So, What Do I Need To Know?

Chapter 3

onedie HTML + CSS

If you’re currently working as a designer, but dabbling in some web work, I’d recommend introducing yourself to HTML and CSS.

twodie HTML + CSS + JS

If you’re a web designer who knows a couple of things, and you’ve built some simple sites, but you’re not really sure where to go from here, I’d recommend challenging yourself with adding interactivity with JavaScript and jQuery, or looking at the awesome stuff in CSS3. Build something tougher, essentially.

threedie THAT + PHP

Or you could start doing some simple stuff in PHP, which doesn’t have as much of a learning curve as Ruby and can be hosted on almost any server in the universe.

fourdie THAT + PYTHON

Or you could check out Python and give that a shot.

fivedie THAT + RUBY

If you’re looking to learn a back end language, I’d recommend Ruby because I write it, and because the incredible Why The Lucky Stiff (I know, I know, what an incredibly rad name) wrote a wonderful free book called “Why’s Poignant Guide To Ruby”.

Above: Why's Poignant Guide To Ruby. It's a wild book.

I love it so much it’s offensive. It’s one of the most bizarre, hilarious and quirky explorations of a programming language. And it’s free online. The sheer amount of effort that has gone into the storytelling and illustrations is incredible. If you take one thing away from this whole take - this is probably it.

“There are just two kinds of languages: the ones everybody complains about and the ones nobody uses.”

Bjarne Stroustrup (Designer of C++)

frown On languages, everyone hates everything.

People hate Ruby because it doesn’t scale (it does), and people hate PHP because it has some ridiculous quirks (it does, but so do I), and people hate .NET because it’s clunky (I’ve never written it so I probably shouldn’t comment on it?), and everyone hates everything because of a million reasons that may or may not be true.

There are a lot of languages.

It doesn’t really matter in the end. Twitter was built on Ruby, and Facebook was built on PHP, loads of stuff is built with Python. There are no truly bad languages, except maybe Actionscript 2.

sixdie RUBY + SINATRA + HAML + SASS (Oh my!)

Personally, I primarily use these, if I’m not doing something fancy with databases. Now, if you haven’t built much in the way of HTML and CSS before, this might be a bit of a leap. But I think my favourite thing about Ruby is that it allows you to hack really easily. To build little things. So let’s explore what these four things mean, if you’re not already aware.

Ruby is a Japanese programming language.

Ruby was first designed and developed in 1993, by Yukihiro “Matz” Matsumoto in Japan. At a Google Tech Talk in 2008 Matsumoto stated:

“I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language.”

Yukihiro “Matz” Matsumoto (Inventor of Ruby)

That’s also the main purpose OF MY LIFE.

Sinatra is a simple application framework

Sinatra allows you to quickly create web applications in Ruby with minimal effort. At its most basic, you tell it some locations and the things you want it to show, and it will. It’s also named after Frank Sinatra. You win this round, Internet.

HAML is simplified HTML

HAML allows you to write shorthand HTML without repeating yourself, and is the backbone of many, many ruby applications. HAML turns into HTML, so you don’t have strain those weary hands of yours.

SASS is syntactically awesome CSS

Sass is an extension of CSS3, adding a bunch of features to make styling pages really clean and simple. It’s translated to well-formatted, standard CSS, which is then served to the browser.

Git + Github make version control and social coding easy

Git is a version control system that allows you to keep track of your code as you work on it. It also allows you to share code amongst teams, keep backups of all iterations of your work and is generally great. It’s similar to Subversion (SVN), an alternative version control option. Github is a social coding site for sharing and documenting code and projects. It’s free and awesome, too.

Heroku is for hosting applications

Heroku is a deployment platform for Ruby (and a bunch of other languages.) It’s a really simple way of deploying something up into the world wide web and scaling it up as you become super famous. It can be expensive though, but there are alternatively available. I just really like their design.

= Joy! (And making things!)

Together these form the basis of a lot of the projects I work on. Should I need more grunt I use Ruby on Rails, which is a more complex framework based on the MVC (model view controller) methodology. Later on I’ll take you through setting up a Sinatra app, using HAML and SASS, putting it on Github and deploying it to Heroku. Then you can go and make awesome things, and send them to me, and we’ll digitally high five, and it will be great.

like An aside on how great you are

I think it’s worth mentioning, anyone who tells you that the language you’re using is terrible or that the code that you’re writing is terrible or that your ideas are terrible are just really boring. Don’t let that hot air balloon of your boundless self esteem be deflated by cranky humans.

You are great. You have great hair, and a great fashion sense, and you’re doing good. There is a big difference between constructive criticism and being a giant jerk face. Life is short - if someone is making you feel crummy, they’re probably not worth your time.

End aside!

flask Okay, Now What?

Chapter 4

So, now you’ve decided what you want to learn, and who to ignore, where to next? Let’s run through some rad services for learning to code like a champ.

computer The INTERNET!

Incredibly, one of the best places to learn about making the internet is on the internet. Go figure, right?

Codecademy

codecademy.com
Above: The Codecademy home page.

For example, Codecademy offers delicious bite sized pieces of education that help you learn the fundamentals of a bunch of different languages, all while making something awesome.

Code Year

codeyear.com
Above: The Code Year home page.

And Code Year, by the same people, is a whirlwind tour of using HTML, CSS and Javascript to build websites. Perfect. They also do jQuery, which is a super popular way of making sites interactive really easily, and Python, which is a wild language for building the brains behind an application. Everyone wins.

Coursera

coursera.org
Above: The Coursera home page.

Coursera, though oddly hosted on GoDaddy (let’s not bother linking to the least fashionable web host around), has some incredible free computer science courses for anyone who wants to skip straight to studying compilers.

I actually studied their compilers course. Got The Dragon Book and everything. It was really, really hard.

Github

github.com
Above: The Github home page.

Alternatively, Github has about a thousand open source projects. You can find loads of pre-built websites to rip apart. Sometimes the best way to learn is to break something, so I encourage you to do just that.

And there are so, so many more websites. The list goes on:

Smashing Magazine

smashingmagazine.com
Above: The Smashing Magazine home page.

A List Apart

alistapart.com
Above: A List Apart's home page.

Envato’s Million Blogs

envato.com
Above: Envato's Million Blogs. (May be an exaggeration.)

So many websites that this is probably 0.0000001% of the total count of interesting blogs, sites and applications for being a more awesome web developer. But it’s a start.

computer The Books!

There are literally an endless array of books. You can probably ask your developer friends for a spare copy of Hard Boiled Webdesign. It’s like the Jagged Little Pill of front end development. Everyone has it. Is Andy Clarke currently living on an island drinking cocktails out of coconuts? I’m guessing the answer to that is yes.

Hardboiled Web Design

hardboiledwebdesign.com
Above: Hardboiled Web Design, by Andy Clarke.

Just search “Web Development” in Book Depository. You’ll be golden.

ellipsischat The Meetups and Co-Working Spaces and Podcasts!

Let’s talk about social opportunities! Meetups are a great way to get to know new people, and there are loads and loads of them. Gone are the days of developers dressed in black t-shirts and tracksuits pants, hiding in their parents basement. Developers are upwardly mobile, well-dressed hipsters, hacking on Ruby for fun. Or maybe that’s just me. Regardless, they like to party.

Co-working spaces are also a great way to meet people and form potential colloborations.

Finally, podcasts are a really easy way to stay up to date without having to use your eyes. I’m going to focus on Melbourne and Sydney, so I apologise, out-of-town friends!

beer All of the JS meetups!

MelbJS

melbjs.com
Above: The MelbJS logo.

There is the MelbJS meetup, which is about listening to really interesting speakers and enjoying free beer!

SydJS

sydjs.com
Above: The SydJS logo.

There is the SydJS meetup, which is about listening to really interesting speakers and enjoying free beer!

BeerJS

beerjs.com
Above: The BeerJS logo.

And there is the BeerJS meet up, a worldwide phenomenom, which is actually just about having free beers and meeting people. It’s the best.

chats The Co-Working Spaces!

One of the best ways to get involved in a community is to start living in that community. There are a number of sweet co-working spaces around Melbourne and Sydney. There are a bunch of great nerds to hang out with and ask questions.

The Workben.ch

theworkben.ch
Above: The The Workben.ch logo.

For Sydneysiders, the new startup, The Workben.ch, based in Ultimo. I believe Lachlan Hardy is a part of it (he’s really, really nice), so there is likely to be whiskey and duck involved. In that order.

Inspire9

inspire9.com.au
Above: The Inspire9 logo.

Inspire 9 are based in Richmond, Melbourne, and super friendly. They also regularly host RORO, a Ruby meetup.

York Butter Factory

yorkbutterfactory.com
Above: The York Butter Factory logo.

And York Butter Factory York Butter Factory in Melbourne host a bunch of events, and rent out space. They also make me hungry. Go figure.

audio The Podcasts!

As a part of living the community you can start introducing little bits of it into your life. Podcasts are a great way to keep abreast of what everyone is talking about without having to leave the house.

5by5

5by5.tv
Above: The 5by5 logo.

5by5 do a bunch of great podcasts on a couple of million topics, and Dan Benjamin must be sharing that island with Andy Clarke. They’re like rock royalty. Amazing.

heart How To Keep Friends

Chapter 5

So, you start building something and it breaks. That will happen. You will be annoyed. It will not make sense. Internet Explorer 7 can seriously go die. All is, however, not lost.

Here we come to Charlie’s 6 things to remember:

onedie 1. Walk away.

Goodfilms, the start up I work at, has an indoor swing. Whenever we get angry, or frustrated, or a start crying, we can walk away from our desks and have a swing. I encourage you to try being angry on a swing. It’s like the fat free equivalent of eating a tub of ice cream. It is distilled childhood joy. It is the literally the best. And before you know it, everything will be clarified by the space you’ve given your aching brain.

Alternatively, if you don’t have an indoor swing because you work for a company that isn’t as enthusiastic about play equipment within an office environment (and who can blame them?) try working on something else for a bit. Or have a coffee. Or eat a hamburger. Or walk around the block. Or google lolcats.

twodie 2. Google it.

Above: The Google homepage. Which probably doesn't need an image.

90% of questions have already been asked and answered. It’s a comforting statistic, especially given that I only just made it up. You can find a host of information using your trusty search engine, likely with a bunch of people going through the pain and frustration you are currently going through.

threedie 3. Ask a friend.

So you don’t find anything online. Ho hum! If you started attending some meet ups you might have gotten someone’s Twitter handle. Why not take this opportunity to ask them?

Your new friend will most likely tell you to Google it. Thanks for nothing, new friend. But they have a point - there are places you can ask for exactly this kind of advice, in an environment for likeminded people. So maybe avoid asking a friend, unless you know it’s a topic they’re particularly passionate about. Like me and the any musical ever. And that includes Chicago and the High School Musicals. I do not discriminate.

fourdie 4. Ask Stack Overflow

Above: The Stack Overflow homepage.

Stack Overflow is a wild way to get help. It’s basically a big Q&A on making the internet, where people are rewarded for asking good questions and giving good answers. It’s gamification of being a rad human, and I’ve had some pretty obscure and not-so obscure questions answered in record time. From Backbone.js incorrectly managing models when the ID of the item is returned as an object, to the best way to build a one page site, to errors I was getting when mashing a bunch of different JavaScript libraries together with Require.js. The last one was answered by the dude who wrote one of them. I felt like his best friend.

My point being, almost everything has been asked. It’s a great resource.

One of the things about asking questions is asking the right ones. With great power comes great responsibility and all that. For example, just saying “OH HAI THIS WEBPAGE IS BROKEN WHY?” is probably the quickest way to get nowhere. Ask sensible, detailed questions with code examples so people can recreate the issue you’re having, and loads of folks will do their best to help. It’s like communism but without any of the awkwardness of having to share back!

fivedie 5. Find a mentor.

There are lots of people who are experts in very specific areas of web development, and I’ve yet to find one who couldn’t be swayed by cake. So that is always a good fallback.

sixdie 6. IRC.

IRC, which Wikipedia told me stands for Internet Relay Chat, is a realtime chat messaging service. There are rooms on almost every topic, from Ruby to CSS to jQuery. It’s kind of a hunting ground for super nerds though, and every time I’ve ever asked a (in my mind) reasonable, well considered question on IRC I was either:

  • Mocked
  • Flamed
  • Ignored

So maybe leave IRC off the list? Unless it works for you. In which case, good for you, and please don’t mock, flame or ignore me for not flying the IRC flag. I have cripplingly low self esteem, and you seem pretty angry.

laptop Setting up an environment

Chapter 6

Now, setting up an environment. Let’s go through some applications I can’t live without. This is mostly aimed at OSX developers, but I’ll try and throw in some Windows alternatives where I can. See, we can all be friends!

HTML5 Boilerplate

html5boilerplate.com
Above: The HTML5 Boilerplater home page.

If you’re working with straight HTML, the HTML5 boilerplate is a brilliant place to start. It’s a bunch of HTML, CSS and JS, thoroughly commented and explained, that will help you to build wild web apps and sites. It features normalize.css, a CSS stylesheet that resets browsers - as, unfortunately, not all browsers are created equal. It features tip and tricks for making the best possible start on a site. It is fantastic. It was also originally started by Paul Irish, who is a superhero of the internet.

Transmit

panic.com/transmit
Above: The Panic Transmit home page.

There are lots of ways of getting files onto a server. There are more complicated methods, like using SSH, but if you’re not super keen on the command line or version control you can always fall back to trusty Transmit on the Mac. There are also a host of FTP applications for Windows and Linux, too.

MAMP

mamp.info
Above: The MAMP home page.

If you’re looking to learn PHP, you’ll need to run a server locally. Let’s say you want to start off with a Wordpress installation. MAMP (for Mac, or WAMP for Windows) will help you get started. It is true that OSX comes with an Apache server built in, but if you’re starting out it’ll save you a bunch of terror to start with MAMP and work your way up. MAMP makes local development super speedy.

Sequel Pro

sequelpro.com
Above: The Sequel Pro home page.

If you’re getting into Wordpress, you’ll likely start look at databases. Wordpress is built to use MySQL, a relational database that is very common. There are various interfaces to deal with the data from MySQL, and the most common one, PHPMyAdmin, is probably one of the most amazingly terrible user experiences available. Fortunately, you can use the native application Sequel Pro on Mac. It makes managing MySQL databases incredibly easy, and it’s a powerful free tool. If anyone knows of an alternative for Windows, do tweet me and I’ll share it!

Sublime Text 2

sublimetext.com/2
Above: The Sublime Text 2 home page.

When you do start hacking, you’ll need a text editor. Sublime Text 2 is a delight, and you’ll see if the live coding portion of this star studded event goes to plan. It’s flexible, free to use (though I encourage you to pay to register) and super simple. It has a host of plugins available, too. And nice colour schemes. If you’re feeling more adventurous, you can google Vi, or Vim. It’s a steep learning curve, but it is an incredibly powerful method of text editing. Notepad++ is what I’ve used previously for Windows, and it’s also swell.

iTerm 2

iterm2.com
Above: The iTerm 2 home page.

Embrace the terminal. Command line is a very powerful way of getting things done, and if you stick with it your productivity is sure to jump in leaps and bounds. There are a load of tutorials on using the command line effectively, and I encourage you to check in with out friend Google. iTerm2 is a powerful command line tool, but you can also use Terminal on the Mac or the command line on Windows too.

Anvil

anvilformac.com
Above: The Anvil home page.

If you’re not keen on PHP, and you’re more interested in static sites, Anvil might be the alternative you’re looking for. Recently released for OSX, it allows you to put apps and sites in your Sites directory, and it’ll just append .dev to them, allowing you to straight away visit them in a browser, without that pesky file:///

It also runs Ruby rack apps, which is great/

Homebrew

mxcl.github.com/homebrew
Above: The Homebrew home page.

Homebrew is a command line tool for OSX that allows you to install all the things that Apple didn’t. There are a bunch of command line applications you can get, and they’ll make your development life much easier. I highly encourage installing it.

Heroku Toolbelt

toolbelt.heroku.com
Above: The Heroku Toolbelt home page.

Heroku is a great hosting service. Heroku toolbelt provides a series of command-line tools for working with the Heroku platform, on OS X, Windows and Debian/Ubuntu. Swell!

clapboard A Minor Digression

Chapter 7

Basic complementary color theory states that when two contrasting colors are put together, they “pop,” so the natural technique is to color films to have a strong, contrasting palette.

The one thing you will almost always have in a film is people. Human skin runs from pale pinkish yellow to dark brown, all of which are shades of orange. The color that contrasts best with orange is blue.

Above: The Avengers poster, which is very blue and very orange.

See what I mean? Into The Abyss has a brilliant article on it, showing a bunch of examples and references.

Also, sorry for ruining movies for you for the rest of time.

pencil Making something awesome

Chapter 8

Right. So, let’s make something awesome. I’m going to show you how to start developing a Sinatra based app, using HAML and SASS, and how to deploy it straight to Heroku. That way we’ll be able to start making swell stuff, and have it live on the web straight away, with the minimum of hassle.

I should mention, this is a walkthrough for a UNIX based system. Sorry Windows people.

In anticipation of coming here, I built the Sinatra Boilerplate.

Sinatra Boilerplate

superhighfives.github.com/sinatra-boilerplate
Above: The Sinatra Boilerplate.

Essentially it’s a boilerplate for rapidly developing Sinatra based apps. Remember how I mentioned we should break some stuff? This is the playground in which we will break things. Which sounds dark, right?

iTerm 2

iterm2.com
Above: The iTerm 2 home page.

First off, we need our trusty command line tool. I like iTerm2 but Terminal, which is located in your the Utilities folder of your Applications, will do.

Sublime Text 2

sublimetext.com/2
Above: The Sublime Text 2 home page.

We’ll also need a text editor. I like Sublime Text 2.

Heroku Toolbelt

toolbelt.heroku.com
Above: The Heroku Toolbelt home page.

And finally, the Heroku Toolbelt. It’ll give you access to these three rad tools:

  • Heroku (for Heroku on the command line)
  • Git (for version control)
  • Foreman (for running Sinatra locally)

like So, let’s get started

(Everyone, to the command line!)

First we’re going to sign in to Heroku on the command line. Fire up iTerm2 or similar, and recreate the prompts below!

 # Once you’ve installed the Heroku toolbelt, log in
 > heroku login
 # Enter your Heroku credentials.
 # Email:
 > adam@example.com
 # Password:
 > ••••••••
 # If you haven’t set up keys, Heroku will help you out. For example:
 # Could not find an existing public key.
 > Would you like to generate one? [Yn]
 # Generating new SSH public key.
 # Uploading ssh public key /Users/you/.ssh/id_rsa.pub
 # If for some reason this doesn't occur, you can add them manually
 > heroku keys:add

However, if you’re not keen on the Heroku Toolbelt for whatever reason, you can install Brew and use Git that way.

 # Install Brew (it is so, so awesome)
 > ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
 # Install Git
 > brew install git

Next up, we make a directory, jump into it, and pull down a copy of Sinatra Boilerplate. We install all the dependancies and start the server. Super easy!

 # Make a new directory and jump into it
 > mkdir ~/myapp && cd ~/myapp
 # Grab a copy of Sinatra Boilerplate
 > git clone git@github.com:superhighfives/sinatra-boilerplate.git .
 # Install the appropriate Ruby gems (bundle means bundle install)
 > bundle
 # Start the server, accessible at http://0.0.0.0:5000
 > foreman start

Now, if you want to put your work on Github, you’ll need to change the origin to be your Github repository. Otherwise you’ll be trying to add your changes to the boilerplate itself. And as enthusiastic as I am about your work… Follow the instructions below, replacing username with your Github username, and app_name with your repository name.

 # Sign up for a Github account
 # make a repo and add it to your project
 > git remote set-url origin git@github.com:username/app_name.git
 # You may need to set up SSH keys on your machine first, but
 # Github has a great tutorial on making them at
 # https://help.github.com/articles/generating-ssh-keys
 # Push to Git, and then celebrate
 > git push

Finally, if you’d like to go live on Heroku right now you totally can. Just follow the below!

 > heroku create
 # Creating temp... done, stack is cedar
 # http://temp.herokuapp.com/ | git@heroku.com:temp.git
 # Git remote heroku added
 # Deploy the app
 > git push heroku master
 # Celebrate!
 > heroku open

smile We Have A Website!

Let’s celebrate, Mars Rover style!

Above: Bobak Ferdowsi at the Mars Rover launch.

Right, so hopefully that will give you something to mess about with. Clone a copy and break it into bits. Add fancy stuff. Let me know what you think of it. Let’s write love letters to one another until the internet is so good we can’t stand it. We can’t lose!

heart We need you

Chapter 9

So, web development is awesome. However, of fourty odd people enrolling on my first day of Computer Science, I counted three girls. Three. That’s not awesome. The web needs more female developers. So I implore you, lady designers, dip a toe in the pool of web development. The water is warm. And please don’t let things like this stop you.

Above: Say no to brogramming

This is just no.

The propagation of lame movements like brogramming, in my mind, only serve to further alienates very awesome and very interesting people from getting involved in the community. We need to create working environments that are open, inclusive and welcoming. Brogramming, like sexism and homophobia and all those dumb things, is super uncool.

I implore you to get involved with web development, and not to let stuff like this stop you. Embrace the code! Start building more fantastic things. Like I said, it will make the cogs of the universe turn a little more joyously.

exclamationchat Four things to remember

Chapter 10

Right. So. Four things to take away.

rules 1. Plan ahead

Web development is sort of like a ball of thread. If you don’t plan, it’s surprisingly easy to end up with a big of tangled mess.

Not planning is a recipe for disaster. The joy of working on your own projects is that you can plan them out at your leisure. No deadlines, no panic attacks, no stress. And that doesn’t mean you need Microsoft Word. I recommend using a pen and paper. Jot down your ideas, sketch our your layouts, lay out your core workflow. It can be an incredibly helpful way of iterating your work (be it design or development), and even when you’re in Photoshop, or Fireworks, or build, you can always jump back between them.

scissors 2. Design to build

The best thing, as a designer, about learning to build sites is that it allows you to better design sites. You’ll start to see the potential pitfalls of certain layouts, of certain typographic treatments, and of certain conceptual decisions. And that means faster, happier and more effective development. Costs go down, stress goes down, everyone wins. Now, that’s not always possible, but that’s why we need to manage our clients, especially in ad land, to get the best possible results for the user and the customer, not for personal taste. That’s why I am such a big advocate for A/B testing. As Jim Barksdale said:

“If we have data, let’s look at data.
If all we have are opinions, let’s go with mine.”

Jim Barksdale (Former CEO of Netscape)

That, to me, is what web development is all about. It’s hard, especially in larger scale organisations, but we have the means to test our work - focus testing can be done cheaply online, we can A/B test in the wild, and we use heatmaps to see what our users are actually interacting with. Don’t paint yourself into a corner with your designs. Try and build a collaborative relationship with your clients or users that will give them the trust to allow you to work in a way that doesn’t necessarily line up with traditional media.

pixels 3. Less is more

For design, this means keeping things simple. The best design solves a problem, so start by looking at what you can take out. One of my favourite design movements recently is the mobile-first theory. Design for a tiny screen. Then scale up. It’s surprisingly how little you need to get a site started.

For development, ship early, ship often. Remember what the core thing you’re trying to make is, and make that. Put it live. If people respond, keep working on it, if they don’t you have an opportunity to go back to the drawing board.

chats 4. Ask more questions

And finally, ask more questions. Get onto Stack Overflow, get onto Google groups, attend meetups, make your own podcast, build things, help one another. There is nothing, literally nothing, in the way of you sharing your knowledge. Start a blog. If you fix something, show people how you fixed it.

Your Internet needs you!

like Epilogue

Conclusion

In conclusion, thank you.

Again, I am Charlie Gleason. If you made it to my talk, thank you for coming. If you have any questions, I am @superhighfives. If you’d like to make corrections or changes to this site, it’s up on Github so make a pull request and I’ll add it in. As long as it isn’t my face with funny eyebrows drawn on it.

navigateup