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?
A list of chapters
Table of contents
- Hello friends Introduction
- My Name Is… Chapter 1
- Learning How To Learn Chapter 2
- So, What Do I Need To Know? Chapter 3
- Okay, Now What? Chapter 4
- How To Keep Friends And Be Happy Chapter 5
- Setting Up An Environment Chapter 6
- A Minor Digression Chapter 7
- Making Something Awesome Chapter 8
- We Need You Chapter 9
- Four Things To Remember Chapter 10
- Epilogue Conclusion
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.
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.
My name is…
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.
Learning How To Learn
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.
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.
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.
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)
So, What Do I Need To Know?
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.
HTML + CSS + JS
THAT + PHP
THAT + PYTHON
Or you could check out Python and give that a shot.
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”.
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++)
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.
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.
“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.
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.
Okay, Now What?
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.
Incredibly, one of the best places to learn about making the internet is on the internet. Go figure, right?
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.
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.
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:
A List Apart
Envato’s Million Blogs
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.
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
Just search “Web Development” in Book Depository. You’ll be golden.
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!
All of the JS meetups!
There is the MelbJS meetup, which is about listening to really interesting speakers and enjoying free beer!
There is the SydJS meetup, which is about listening to really interesting speakers and enjoying free beer!
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.
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.
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.
York Butter Factory
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.
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.
How To Keep Friends
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:
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.
2. Google it.
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.
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.
4. Ask Stack Overflow
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!
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.
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:
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.
Setting up an environment
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!
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.
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.
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.
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
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.
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.
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 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 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!
A Minor Digression
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.
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.
Making something awesome
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.
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?
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
We’ll also need a text editor. I like Sublime Text 2.
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)
So, let’s get started
(Everyone, to the command line!)
# Once you’ve installed the Heroku toolbelt, log in > heroku login # Enter your Heroku credentials. # Email: > [email protected] # 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
# 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 [email protected]: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 [email protected]: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/ | [email protected]:temp.git # Git remote heroku added # Deploy the app > git push heroku master # Celebrate! > heroku open
We Have A Website!
Let’s celebrate, Mars Rover style!
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!
We need you
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.
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.
Four things to remember
Right. So. Four things to take away.
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.
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.
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.
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!
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.