For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals.

I recognize the things she brings up in her post. Everytime I’ve gone straight to the browser to create something quick for myself, the result is an incomprehensible mess. Perhaps I’m not good enough yet, but my brain just isn’t in “creative mode” when I’m coding. Everything gets more bulky when you’re doing major changes (that is, not subtle colour changes, but numerous layout experiments, for instance). Doing layout changes in Photoshop? Just drag that box over there. Doing it in HTML/CSS? Um, just make that box float: left;, and clear that container, then .. < and so on >.

I’ve seen a couple of web designers writing about this before (can’t find the blog posts right now …). Someone suggested creating a mockup in Photoshop, but without any text, and then putting the mockup as a background-image for the body tag and adding text in the browser with absolute positioning.

Andy Clarke brought up the idea consisting of that initially showing the client a browser mockup is like lying – the client get the impression of that his/her website will look exactly like that in all browsers. That’s not the case – websites don’t need to look exactly the same in all browsers. By quickly iterating in code and perhaps showing the website in Internet Explorer from the beginning, the client might think “Wow, the design looks so much better in Chrome/Firefox/Safari than in Explorer!”. We let the weakest link set the bar – not a static mockup.

Personally, I prefer a hybrid solution, where I mockup the overall visual style in Photoshop in order to develop a colour scheme that works, contrasts in typography, and other elements. I then begin very early iterating the mockup in HTML and CSS, and jump back and forth between the browser and Photoshop. It’s much easier than doing the whole thing in code, only to realize that the design isn’t cutting it, and then having to start over coding a new design. It’s the same in Photoshop though: you can throw countless of hours into a static mockup only to recreate everything in code later on. I say a hybrid solution is most effective.

★ Permalink

So this time I did everything right. During my journeys through the internets I picked up nifty tools and techniques, as well as other blog posts describing pitfalls and other general tips. Google around for something like “setting up web development environment os x”. Two gems are Setting Up a Ruby Development Machine From Scratch With OS X Lion and Setting Up an Apple Mac for Ruby Development (just skip the parts about RVM, I’ll get to that further down). I also made a list of every technology/tool/language I needed:

Johan’s Checklist

They are ordered by importance and dependency.

Xcode or the GCC/LLVM compilers

Compilers are vital if you need to build dev tools and/or languages. Both you and I would like to do that. Some time ago, the only way to get the GCC and LLVM compilers up and running on a Mac was through Xcode. If you’re a web developer, chances are big that you won’t touch Xcode.app at all, and on top of that the installation footprint is quite large. Then a smart guy came along and made GCC/LLVM/other important tools available as standalone files, and put it up on GitHub!

• osx-gcc-installer on GitHub
• Blog post

The instructions on GitHub is all you need to set it up. However, I decided to download and install Xcode 4 anyway, since I suspected I likely wanted to deal with building iOS apps later on.

Homebrew

The awesome package manager for OS X. Don’t go dabble with installing tools manually, go through Homebrew. You can pull of stuff like brew install mysql or brew install git without having to download tarballs, building, managing binaries on the PATH, and … arrgghhh.

To get Homebrew started:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"
$ brew update

Get to know the tool with the bin command brew.

git

$ brew install git

That is all. My .gitconfig is included in my dotfiles (linked further down).

Ruby

Ruby is a must-have, with all its great gems (Sass! Compass! Sinatra! Rake!). Ruby is indeed included in OS X, but we want to manage versions ourselves and stay up to date. You could download and build Ruby from the website, but instead I used a Ruby version manager to do it for me.

I used RVM before, and it worked well. However, Sam Stephenson convinced me to switch to his tool rbenv. Read more in the rbenv Readme. rbenv works just like RVM, but feels more lightweight.

Everything you need to know is explained in the Readme. Note that you’ll need ruby-build to actually build the Ruby versions (GitHub project).

$ brew install rbenv
$ brew install ruby-build

# Install Ruby 1.9.3
$ rbenv install 1.9.3-p0

# Check that everything works
$ ruby -v
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin11.2.0]

RubyGems

RubyGems manages all Ruby gems, and is included in OS X. But remember to update it to the latest version before you do anything.

$ gem update --system

Then I installed some handy gems.

$ gem update rake
$ gem update rails
$ gem install rack
$ gem install sass
$ gem install compass
$ gem install sinatra
$ gem install bundler

Other

If there’s anything else you need, it’s probably in Homebrew:

$ brew install wget mysql node mongodb

# NPM
$ curl http://npmjs.org/install.sh | sh

And MAMP for local PHP/MySQL development in an .app.

Dotfiles

I’ve forked some neat dotfiles to keep in the home folder. You can find them in my GitHub project. Just do:

$ git clone git://github.com/johanbrook/dotfiles.git
$ rake install

The dotfiles include:

• gitignore
• gitconfig (with aliases and settings)
• custom bash prompt
• git and Rake completion scripts
• irbrc (for irb)
• railsrc
• gemrc

Outro

And there we go! We’re done! Wasn’t so bad, eh? I suppose you can put an enormous amount of hours into configuring your setup, but this is enough for me. It’s a solid foundation with few unnecessary dependencies, which is important to me.

Don’t hesitate to give me shout if anything is wrong, outdated, or simply suck.

Disclaimer: I’m by no means an experienced software engineer or programmer. I focus on front-end web development, and this is only my opinions on learning to program from a student’s perspective.

How do you really learn to program? Not just in a specific language, but the general idea – the logic, the ability to think in abstractions, algorithms, to see the flows of a program? There are freshmen at software engineering and computer science university programs who have never programmed before, and it’s not a simple and quick task to teach these students the idioms and thoughts behind programming. What’s the most efficient, student friendly, and most pedagogical way of teaching how to think in code?

As mentioned, I went to university this fall. I considered myself lucky, since I had programmed before. I.e., I had taken a couple of courses in high school and after that worked with web technologies as a freelancer. I had been exposed to both the academical and practical side of programming.

The three courses I took in high school taught us Java. We were first supposed to study C++ during the first two courses, and take Java last, but the school decided to go for Java for all three, in a way to let us get a firm grasp of programming and general OO principles. Java was hence the first real programming language I actively used. During the senior year I began studying other languages lightly. PHP seemed like heaven with dynamic typing in all its glory, and Javascript was a nice buddy I could see myself hang out with. Later Ruby and Python lured (but I haven’t to this day begun learning them seriously).

I had heard from other students that Java was the language tutored at this university program I was to apply for. My heart sank a bit since I had begun to grasp code minimalism, “beautiful code”, and DRY. According to me, Java isn’t really embracing those teachings.

I had a couple of theories about why, oh why, the university chose Java to teach new students:

• It’s cross-platform. Students run OS X, Linux, or Windows, and you can get Java up and running effortlessly on these platforms.
• It’s object oriented. The two programming courses we had during the past fall were actually titles Object Oriented Development (beginner and intermediate). Java was built with many solid object oriented ideologies in regard: inheritance, interfaces, polymorphism, dynamic binding, etc. If you have a solid understanding of the OO in Java, there’s a good change you’ll grasp any other OO language in very short time.
• It’s widely used in the enterprise sector (or my “Who’s waiting for the fresh students after they graduate?” theory).
• It’s quite versatile. The university can use Java to teach full blown desktop applications, database programming, GUI design, web server programming, and in recent years mobile app development (Android).

But what about the cons of teaching Java to new students?

• Its bloated syntax might be an obstacle when learning how to program. Why should a beginner care about curly braces? Why should he or she even have to ponder over what static is? As soon as the teacher states: Don’t worry about , we’ll get to that in course X and leaves the students dumb-founded, there’s something rotten going on.
• The lack of simplicity, and need for boilerplate code. Tasks you pull off in Ruby in a line of code can take up several lines in Java. The question is: should the students be forced to write a lot of code by themselves, or should the language serve convenience methods for even the simplest tasks? Or both?
• Overly complicated and sometimes utterly useless design patterns. AbstractModelFactory, I’m looking at you.

I think it all boils down to: Is the possible pain and frustration associated with Java worth getting a solid foundation in object orientation, scanning through documentation, diving deep into Swing, and worrying about semicolons? Perhaps.

What’s the focus? Learn to program in general, or learn a single language? Sometimes I think my university focus a bit too much on Java. They should branch out and bring in examples from other languages once in a while. In the end, I think universities often use Java since it’s the shotgun solution: You can squeeze in quite a large curriculum with Java, it’s widely used in the industry, it teaches basic OO concepts.

If it was up to me, I’d teach Ruby to new students. Just to get a hang of basic program flows, printing and reading data to a console (I/O), calculations, string manipulations, and then move on to methods, classes, objects, et al. It would only serve as a intro tool to programming. Sure, you can’t create an Android app with Ruby, but I think it would be godsent for the totally new students. The downside? These students would have to learn Java later on instead.

One could debate wether it’s good or bad for new students to learn two programming languages in a short period of time. But when I see students struggling with why they can’t call methods on an int in Java – like they can on a String – and other things, I wonder if Java is the right choice to start out with.

Layout

I still go with the two-column layout. This time, I fully ditched any 12 or 16 column grids, and went fluid all the way, i.e. I’ve made all measures relative to each other, and the Golden Ratio. I’ve used a 6pt baseline grid, and a modular scale. It was actually quite relaxing ‘letting go’ of the old grids and start fresh.

Try adding ?dev=1 to any URL on the site, and press and hold G on your keyboard to view the baseline grid.

Typography and Colours

Switched the somewhat boring Georgia for PT Serif, and Helvetica for Lato. Both are served via Google Webfonts Directory. The goal with the realignment was to create more whitespace to focus on the typography, and for that great typefaces were needed.

This is also the first time I use the new-ish rem unit (with a fallback). There are almost no pixel values as far as the eyes can see.

The colour palette is quite sparse: just plain white, kinda-black, and cerise red.

Under the Hood

I have for once not used Compass for this project. Don’t know why, just felt for a change – trying out something new. That ‘new’ is Bourbon by Thoughtbot. A lightweight collection of Sass mixins. Might as well, right?

The very small amount of Javascript I’ve included is written in CoffeeScript, which I’ve been dabbling with recently.

Responsiveness

No need to explain anything here. I believe every web designer and developer with self-respect should create responsive websites for themselves and clients these days. For this one I have two breakpoints set in ems. There is no max-width of the container.

Javascript?

Nope, almost none. I don’t need jQuery for anything, so it felt good getting rid of all that fat.

More writing?

Hopefully this will encourage me to blog more often :) (as I and many before me have said – all the time).

Thanks for reading.

Music I program to

I’ve set up a Spotify playlist where I collect great programming tunes. Mostly techno and other computer related genres.

Programming playlist by Johan
Opens Spotify

I especially like the Tron soundtrack (who doesn’t), Nine Inch Nails and Daft Punk. It’s hard not to feel the kick when these epic melodies are doing their thing.

Also check out the site who inspired this post: Musicforprogramming();. Free MP3 downloads. The official Portal soundtrack is also really, really cool.

Other notable playlists to check out:

• “Coding”, by John Barbero Unenge
• “Work playlist”, by Sebastiaan de With

More suggestions on great programming songs are welcomed!

site.com/single-post/attachment/flower

That’s cool. However, we wanted something like this:

site.com/single-post/photos

… where all attachments would be listed. The /photos part is called an endpoint. So how do you add them in WordPress? And how do you assign this endpoint to render a specific template file?

Relevant APIs

After some quick googling to find out if this was possible and worth a try, I found the Rewrite API in the Codex. Neat stuff.

Other resources I found during my quest:

• http://johnbeales.com/20090824/endpoints-a-little-secret-for-url-manipulation-in-wordpress/
• http://wordpress.org/support/topic/custom-rewrite-approach-with-add_rewrite_endpoint
• http://www.rlmseo.com/blog/passing-get-query-string-parameters-in-wordpress-url/
• URL Design for Sub-Posts?
• http://codex.wordpress.org/Template_Hierarchy

The code

After reading through these, I simply implemented the necessary filters and callbacks in the functions.php file.

I began with this:

add_filter( 'query_vars', 'add_query_vars');

/**
*   Add the 'photos' query variable so WordPress
*   won't mangle it.
*/
function add_query_vars($vars){
    $vars[] = "photos";
    return $vars;
}

As you can see, I’m working with my /photos endpoint. I have to tell WordPress’ rewrite engine to take our special query variable (“photos”) into account when rewriting URLs, so I used the query_vars filter for this (see the Filter Reference).

Next, I registered the actual endpoint with the built-in function add_rewrite_endpoint() (Docs). It takes a string (the endpoint) and a place. “Place” is where the endpoint will be active, and the docs only specify a couple: “EP_PERMALINK, EP_PAGES, EP_ATTACHMENT, etc”. From other examples I’ve spotted EP_ALL as well. I used EP_PERMALINK:

add_rewrite_endpoint('photos', EP_PERMALINK);

Right. The endpoint is up and running, but as I said at the top, I wanted a specific template to render when this URL is visited. It’s doable! Check out the single_template filter.

add_filter( 'single_template', 'project_attachments_template' );

/**
*	From http://codex.wordpress.org/Template_Hierarchy
*
*	Adds a custom template to the query queue.
*/
function project_attachments_template($templates = ""){
	global $wp_query;

	// If the 'photos' endpoint isn't appended to the URL,
	// don't do anything and return
	if(!isset( $wp_query->query['photos'] ))
		return $templates;

	// .. otherwise, go ahead and add the 'photos.php' template
	// instead of 'single-{$type}.php'.
	if(!is_array($templates) && !empty($templates)) {
		$templates = locate_template(array("photos.php", $templates),false);
	}
	elseif(empty($templates)) {
		$templates = locate_template("photos.php",false);
	}
	else {
		$new_template = locate_template(array("photos.php"));
		if(!empty($new_template)) array_unshift($templates,$new_template);
	}

	return $templates;
}

I’ve hard coded the file photos.php above. Create this file in the theme folder, and you’re all set! In this template you’ve got access to the global $post variable, so you’re able to pull in all kinds of post data into it.

Outro

Pretty cool to bend WordPress to your will, eh? I can imagine this functionality is pretty nifty to have when doing more advanced things in WordPress.

★ Permalink

I’ve known fabulous programmers flame out in the quizzing cage and terrible ones excel. So unless you’re specifically hiring someone to design you the next sorting algorithm, making them do so on the white board is a poor gauge of future success.

I’ve read many articles on this subject: how to ace an interview for a developer position. Even for front-end positions, questions about algorithms and similar “puzzles” arise. Sorry, but I actually think you have to tailor the interview material for the practical assignments the interviewee will receive.

Today, most developers (at least web developers) don’t write computer science-y stuff all day long. We solve real world problems, read documentation, build scalable systems, cooperate (social skills are vital!), implementing other people’s code, and more. Quizzes are fine, as long as they are relevant for the actual work I am going to do.

(Also: see 37signals job listing for an interface designer position some time ago, I wrote about and linked to it).

★ Permalink

The students that are successful look at that challenge, wrestle with feelings of inadequacy and stupidity, and begin to take steps hiking that mountain, knowing that bruised pride is a small price to pay for getting to see the view from the top. They ask for help, they acknowledge their inadequacies. They don’t blame their lack of intelligence, they blame their lack of motivation.

Great text from an MIT grad about the challenges and feelings during his freshman year at MIT. Many wise quotes.

★ Permalink

★ Permalink