A Modern Web Development Syllabus

If you have programming or Computer Science experience, want to take the plunge into web development, and don’t know where to start, then start here. Before you signup for “Pusher”:http://pusher.com/ and “Twilio”:http://www.twilio.com/ and start copying and pasting Ruby and JavaScript code, you should have a firm understanding of how the many pieces and layers of your first webapp work together.

While not required, I recommend the following pre-reqs:
* Buy a Mac or install Ubuntu on your dev machine
* Read “The Pragmatic Programmer”:http://pragprog.com/the-pragmatic-programmer
* Learn Vim or Emacs
* Learn Git & make a “GitHub”:http://github.com account
* Use Firefox with the Firebug extension or Google Chrome for development

h3. HTTP

Understand this protocol or prepare yourself for perpetual confusion. Read “the RFC,”:http://www.w3.org/Protocols/rfc2616/rfc2616.html or at least the following sections:
* “Intro”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec1.html#sec1
* “HTTP Message”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4
* “Request”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html#sec5
* “Response”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6
* “Methods”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9
* “Status Codes”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10
* “Headers”:http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14

h3. Ruby

Read “The Pickaxe”:http://pragprog.com/book/ruby3/programming-ruby-1-9 if you don’t know Ruby or could use a refresher.

h3. Rails

Read “Agile Web Development with Rails 4th Edition”:http://pragprog.com/book/rails4/agile-web-development-with-rails

“Rails Guides”:http://guides.rubyonrails.org/getting_started.html is an excellent free companion resource to “the official Rails api docs”:http://api.rubyonrails.org/

Do “this Twitter clone Rails tutorial”:http://ruby.railstutorial.org/ruby-on-rails-tutorial-book

h3. CSS

Read “CSS Mastery 2nd Edition”:http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979
* Read chapters 1, 2, and 3 for the basics on CSS selectors, specificity, the box model, and positioning.
* Read the rest if you want even the slimmest chance of helping your app not look like it has drunken clown makeup smeared all over it.

If you finish that book and your app still looks like someone sat on a bunch of ketchup and mustard packets, read “The Principles of Beautiful Web Design 2nd Edition.”:http://www.sitepoint.com/books/design2/

h3. JavaScript

Read “JavaScript: The Good Parts”:http://shop.oreilly.com/product/9780596517748.do

Do the following jQuery tutorials:
* “How jQuery Works”:http://docs.jquery.com/Tutorials:How_jQuery_Works
* “Getting Started with jQuery”:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Read the “jQuery Types Documentation”:http://docs.jquery.com/Types and the “jQuery API Docs”:http://api.jquery.com/ – all of it.

Now would also be a good time to learn “Coffeescript”:http://coffeescript.org/

h3. Extra Credit (which is also required)

Make that Twitter clone tutorial app provide a REST api to a single-page Javascript app you write using Backbone.js. Try Mongo as a backing store instead of MySQL or SQLite and use Resque for background processing. Make it work offline:
* “Old yet good REST article”:http://www.infoq.com/articles/rest-introduction
* “REST stands for Representational State Transfer”:http://en.wikipedia.org/wiki/Representational_state_transfer
* “Backbone.js”:http://backbonejs.org/
* “Underscore.js (required by backbone, and useful in it’s own right)”:http://documentcloud.github.com/underscore/
* “MongoDB”:http://www.mongodb.org/ is easiest to transition to from ActiveRecord if you use use “Mongoid”:https://github.com/mongoid or “MongoMapper”:http://mongomapper.com/
* “Resque”:https://github.com/defunkt/resque
* “Dive into HTML5”:http://diveinto.html5doctor.com/

h3. Extra Extra Credit

Do it again using “Ember.js”:http://emberjs.com/ instead of Backbone.js.

h3. More Resources

* Install “Bundler”:http://gembundler.com/ and use a Gemfile to manage your dependencies for each project.
* “Know what works in which browser.”:http://www.quirksmode.org/compatibility.html
* “What gem or plugin should I use for X?”:https://www.ruby-toolbox.com/
* Deploy your demo apps to “Heroku.”:http://www.heroku.com/
* Use “Capistrano”:https://github.com/capistrano/capistrano/wiki to deploy elsewhere.
* Try “HAML”:http://haml.info/ & “SASS”:http://sass-lang.com/

h3. Independent Study

If you’re bored with everything being a RESTful resource represented in your database, Rails model, Rails controller, Backbone.js model, and view, (or just not sure what to do next) then try a different approach altogether.

Rewrite your sample app using “FAYE”:http://faye.jcoglan.com/ and “Node.js”:http://nodejs.org/ to build your app on a publish-subscribe model of communication between your client and server.

h3. Fin

If I missed anything important, please let me know.

 
Conversation
  • I started making sites 13 years ago… I wonder what this would’ve looked like back then.

    Regardless, I can verify this as a good list if you’re doing Ruby/Rails development in particular. I feel like Rails is a really good thing to use once you’ve learned another language, though. For one, you skip over learning about actual SQL and use the Rails paradigm instead. Plus, all the lol-magic commands are nice, but you kind of skip over the detail with some of them. By no means a criticism of the language, but I wouldn’t recommend it to a pure beginner. Plus, if you use something else you can potentially nix the “Buy a mac” requirement without a lot of headache.

    I guess I’m oldschool in the fact that I like being able to buy some cheap hosting for 4 bucks a month and not have to worry about environment hell deploying to it when I just want to write up some small pages and experiment.

    • Micah Alles Micah Alles says:

      @David I also dove into web development before Rails existed or Ruby was popular. My first web dev environment was Java / JSP with a custom Java Servlet. That was followed by PHP and Perl CGI scripts with text file, MySQL 3.x, and curl -> another webapp backends. Those experiences made Rails a cakewalk to learn when I was eventually introduced.

      I choose Rails as a first tool because I feel it has the best marketability for the kind of work I like to do – custom greenfield web application development.

      I think a Mac is a shortcut to a useable OS with a nice command line interface. Before my first Mac I went through 3 PC laptops with Gentoo installed from stage1 tarballs. Eventually I decided to trade money for the time of custom linux installation management by buying a mac. It was a personal decision, but one I feel worked very well for me and wanted to share with people who might not have considered it. It’s definitely not something I would have considered while in college ;)

      Also, if you’re looking for cheap Rails, Node.js, or Clojure hosting, I highly recommend heroku. For Rails in particular, it provides a very smooth deployment process which requires very little setup on the part of the developer.

      • Yeah, I come from a different background. I taught myself HTML when I was 12 and made fan sites for TV shows, funnily enough. I used PHP first (and still do) since it was easy to learn and really flexible. I’ve been a PC gamer through the years so I always have had a Windows box. I love it being a consumer/gamer, but it leaves a lot to be desired being a developer.

        Having only just made a Rails app recently I can say that developing with that platform on Windows is painful. I went through most of the Agile Web Dev w/ Rails book on Windows before hitting the wall at deployment and RVM. Plus, rakes are slooooow. Which is fine I suppose, I do have a Mac :P

        Yeah, I’ve heard of heroku. I mostly just remember the days when having a shared host with FTP, a control panel and being able to upload your site without deployment scripts was the norm :) I feel like that approach is easier for a beginner to website making (possibly). It would likely take longer starting there to get to the point of being a “real” web developer, of course!

  • Topher says:

    It does my heart good to see you have a gentoo background. :) Also to see that you ended the article in French. :)

  • Paul Hart says:

    I also try to include http://compass-style.org/ in all my sites now. It provides all kinds of “mix ins” for CSS dev and can fully integrate with Blueprint CSS or Susy grids, and SASS. Makes it so I don’t have to worry about browser compatibility for all kinds of new CSS (CSS3 or unsupported CSS—you know which browsers. :) ).

  • Brian Kelly says:

    I would add:

    – Register on StackExchange and ask & answer questions there to learn from others and learn by teaching.
    – Purchase http://pragprog.com/book/actb/technical-blogging and make your own work notes blog using tools like Markdown, Jekyll, WordPress, Tumblr, etc.

  • Dave Cline says:

    I’d wager I had one of the stranger web beginnings. Back in 1996/7 I got to write an intranet for Charles Schwab & Co. and on it, using a Dialogic telephony card, and Visual Basic, published morning calls through Real Audio ra/ram files.
    I used Visual Basic for years as my primary web development language. ASP was a great environment to write quickly and vastly. I do miss those days. By 1999 IE 5.0 and XMLAPI were magical, writing browser interactivity that years later would became AJAX. ASPX and C# now take up my web time. I’ve never even tried Ruby or Rails yet have programmed the web for 16 years. So, I’d have to say that you might want to cure the lack of a Microsoft option for server side execution. It’s still pretty prevalent in the world.

  • Schiva says:

    A lot of these choices/frameworks are arbitrary.

  • Anonymous coward says:

    Idunno, sounds to me like you want ppl to learn everything they need for reinventing the wheel.

    IMO, it’s much simpler than that. First, learn to program properly – design patterns, refactoring, algorithms and data structures. Read Steve McConnell’s Code Complete, and Steve Maguire’s Writing Solid Code.

    Then go on and choose a few technologies which allow you to develop and deploy applications easily on many platforms. Chances are these won’t be mainstream, established technologies, like RoR. For one, if something is already well established, it means it has some history, which means somebody already had the time to come up with something better. RoR may provide a nicer server-side environment + language, but it it is hosted by way less providers than PHP. PHP is also cheaper to host. And not just RoR but any framework providing a full server-side stack for web apps is not nice anymore, now that AJAX allows you to move much of the logic to the browser.

    IMO, since decent web browsers with Javascript enabled have become ubiquitous, qooxdoo is the best choice for a client side technology – no HTML, no CSS, same look across all supported browsers (IE, Chrome, FF and Opera, Android and iOS browsers too – support for multitouch events for mobile platforms included), richest widget set out there, completely customizable style (skinning-like, still without touching CSS). PHP’s ubiquitousness on hosted servers makes it IMO the best choice for a server-side technology. Plus, given a recent push for technology from one major social network (I can’t remember if it was LinkedIn or Facebook), PHP can be compiled to native code. Put these technologies together, and you can develop any web application you want, without ever having to worry about CSS or HTML again, deploy basically anywhere, and create fast, scalable, low latency web apps. And given that you’ve already learned how to program, not just how to web-program, it’s likely that you’ll be producing better engineered applications with less effort, and with a shorter learning cycle.

  • Daniel says:

    I have the following utilities in my web development tool box (under windows), just to take the bite out of debugging your code:

    – Fiddler 2, an HTTP debugger, that allows you to see really what is going between your browser and your website, very useful for debugging file uploads and webservices… and also what is going on if you have any flash objects that are talking to a remote server. Firebug does have some of fiddler’s capability (network tab), but Fiddler can do it better, and is browser independant… Great for that upload bug you can never reproduce under Firefox!

    – An extra extension of this would then be Wireshark, which is a network debugger, as then you can see everything your machine is sending and recieving, not just over HTTP…

    – StrikeIron Web Services Analyzer is a great tool for understanding what a SOAP webservice looks like without going mad trying to make sense of a WSDL… Paste the WSDL link and presto, there is the values and structure of the service… (I am prone to a fatal allergic reaction when trying to understand a raw WSDL on my own!)

  • Rhis nice information,,,

  • Matt says:

    This sounds good if you want to dive into Ruby. But my current gig, and all previous gigs, no one uses Ruby for anything. Funny enough this topic came up at work, and no one I work with used Ruby at any past job. So I asked around to some friends and none of them have either. (I asked web developers.)

    Obviously Ruby is good at many things and highly regarded but in terms of what you would actually use on a job… well that will depend.

    So while some of these topics are non-Ruby I’d probably recommend focusing on XAMP, JSP or ASP first (and JavaScript/CSS/HTML of course.) before going Ruby just to learn it.

  • I build my first website (for my wife’s business) in 1996 using CGI,Perl and HTML. Since then I’ve used PHP, Java, and C# in that order. I’ve played with Python a bit, but not investigated Ruby yet. My main reasons for using PHP are cheap hosting and familiarity. Most of my work in the last 7 years has used one form of MVC or another, so Rails would probably be familiar.

    I might give it a try some day when I have the time.

    /peter

  • SERware says:

    This an arbitrary transitional vocabulary.

    Modernity is tansitional by definition, and the products in the list are partial by their transitional nature: dedicated only to web development, a type of application, etc.

    I prefer to wait for the good features to be incorporated in integrated development environments as Java or Microsoft.NET.

    For example, in a combination of C# and F#, I can adress the best of OO and functional, a lot of platforms and yet share a lot of code: Web, Desktop, Phones, a lot of OS: Windows, Mac and Unix (Mono), etc., and many of these “modern” features are now incorporated.

    This reminds me that for a few years Cold Fusion was modern and was on everyone’s lips. And Cold Fusion in fact has some new good features for WEB applications, but in addition to maintain old projects, I think that very few organizations are starting new projects in Cold Fusion.

  • Donnie Brasco says:

    It’s never bad to learn any language, and JavaScript should be at the top of the list. It should be noted that many places that will pay you a nice salary are C# shops and that getting into .Net development is not expensive for a student. C# devs tend to get paid better than their counterparts in other languages, not to mention the superiority of the development environments, so it should be considered.

  • kifcaliph says:

    it’s a cool list however this list doesn’t focus on the architecture of web apps using python

  • Tobias says:

    Overall pragmatic (except for “Learn Vim or Emacs” of course … which is silly given the productivity gains other tools offer).

  • akalyasekar says:

    Good post. This is very useful. Thanks for sharing.

  • Comments are closed.