Desktop developer wants to learn about this "web" thing

May 31, 2011 10:02 AM

Desktop developer seeks your favorite tutorials, links, books, to learn up on web development.

I know there are ten thousand sites that cover this stuff, but I'm having trouble getting the right ones. I spend my days writing Java, and I spend a fair amount of time mucking about with Oracle, but I'm entirely clueless about the web side of things. For my own edification and curiosity I'd like to start mucking about with some AJAXy client-side stuff and server-side PHP, but the books my web-head friends suggest all seem to assume I'm an old hand with CSS and the like, and I have a proper web page that I'm trying to fancify. On the other hand, when I look for things that don't anticipate as much web experience, I get a lot of "Okay, you will now learn javascript, which has things called variables...." when what I really want is "okay, you're used to desktop languages, here's how javascript is different, and once you've got the basics, here's the jQuery you came here for." I'm perfectly happy for that to mean combining resources; "This is a good tutorial on javascript for people who are already developers, then about halfway through pick up this jQuery book and that php thing."

Basically, both for my own purposes and in anticipation of a future project at work I'm hoping to be involved with, I want to start using industry-standard tools (inasmuch as the infamously fragmented web-development world has 'em) to build nontrivial web apps, and I'd like the hive mind to point me to resources to do so.

posted by Tomorrowful to computers & internet (9 answers total)

I highly recommend the writings and videos of Douglas Crockford.
posted by Rhomboid at 10:24 AM on May 31, 2011

HTML Dog is my standard recommendation for learning proper XHTML and CSS. (I emphasize the proper part. For boring historical reasons, there's a lot of bad information out there. I'd even say that the majority of published resources on the subject, both on paper on on the Web, are wrong. People get away with it because the parsers built into browsers are extremely forgiving, and will jump through all kinds of hoops to make sense of badly mangled code. HTML Dog is one of the few sites that teaches modern, standards-compliant markup and best practices.)

Dive Into HTML5 is a good resource for learning about the emerging next-generation version of HTML.

Douglas Crockford is a JavaScript guru, and has a lot of good information about the language from a Real Programmer's perspective. John Resig (the creator of jQuery) sometimes posts similar stuff.

This is a little on the hokey side, but it's a decent enough resource when you just need to look up the arguments for a particular method, etc.

The official jQuery docs are quite good.

A few notable features of JavaScript:

It's loosely and dynamically typed.

It's a functional language. Functions are objects. (Everything in JavaScript is an object.) function foo() { doSomething(); } is equivalent to var foo = function() { doSomething(); }.

Because functions are just objects, like anything else, they can also be expressed as literals, as shown in the second snippet above. And they can be passed around like any other variable—for example, you can pass a function as an argument to another function, to be used (for example) as a callback.

// remember, this just creates a Function object in the current scope, with the name saySomething
function saySomething() {
    alert("Holla!");
}

function callAnotherFunction( functionToCall ) {
    functionToCall();
}

callAnotherFunction( saySomething ); // alerts "Holla!"

Learn the module pattern; it's quite useful. It's basically a way to create an ad-hoc private scope, so your code doesn't pollute the global scope.

Never, ever use onclick="" or other inline event registration, unless you're just throwing together a quick and ugly hack. Instead, register your event handlers programmatically and unobtrusively.

Gotta run. Hope this helps!
posted by ixohoxi at 11:26 AM on May 31, 2011 [3 favorites]

Also familiarize yourself with JSON; it's very useful (and widely used) for AJAXy stuff.
posted by ixohoxi at 11:28 AM on May 31, 2011

(And note that PHP has built-in functions for converting PHP's native data structures into JSON-encoded strings.)
posted by ixohoxi at 11:30 AM on May 31, 2011

I generally hate tutorials, and would rather learn by just doing stuff -- trial and error, and tearing apart other peopl'se pages and code.

That said, Lynda.com tutorials are mostly excellent.
posted by coolguymichael at 11:47 AM on May 31, 2011

Having just done this within the last year, here's my advice: just build something from scratch that you want to have work. You will run into a thousand little problems, none of which you would have been able to preemptively avoid through reading or google, and all of which are on the critical path.

This is really the internet's blind spot -- how to learn web technology. Google is horrible at it; most of the pages that rank highly in google rank that way because they were at one point great to steal from, and were passed around through the gigantic overhang of mediocre cut-and-paste coders until their pagerank was super high. However it's very likely that the focus, the method, the technology, and indeed the entire apparatus has changed in several ways since the page was first posted. And those new pages, with the new correct information, are not nearly as highly ranked.

Worse, there's an active culture of people who don't actually know all that much about web technology, but do know about SEO, and wish to profit. So they'll post millions of pages of wrong, or subtly wrong, but close, hacky nonsense and drive them to the top through means both illicit and complicit.

The only way I was able to fight through all that crap was to work on problems, and when I had very specific issues, to look up those specific issues and the ecosystem around those issues; bottom up rather than top down.

tl;dr: haml sass compass rails 3 redis riak mongodb node.js
posted by felix at 12:02 PM on May 31, 2011 [1 favorite]

Oh, and by all means, use a decent browser for development. Firefox (especially with the Web Developer Toolbar add-on) is good. Chrome is even better. IE is utter shit. (IE9 was just released. Maybe it's getting better. After the pain I've been through with IE6–8, I'll never find out.)

(You'll need to test in other browsers, of course—but you'll save yourself a lot of frustration if your reference browser implements the standards well and has good developer tools, i.e. is not IE.)
posted by ixohoxi at 12:20 PM on May 31, 2011

I'm going to generalize grotesquely here, so forgive me fellow web developers. I'm also going to focus on freely available web-resources rather than books, since that's pretty much how I learn, and it's worked well for me, for the most part (although, I have had access to O'Reilly's Safari Online library through various jobs, and bought a bunch of PDF books from Manning...so I'm cheating a bit). And finally, I'll focus on server-side development since that's what I know best (with a few nods to client-side dev at the end). But my goal is more to give you a lay of the land (as I see it), which it seems like you need, and to try to steer you away from thinking about PHP, at least exclusively, especially if you are already a Java developer (...anti-PHP screed at the end).

I believe there are three main approaches these days in most small-to-medium scale web development.

1) Using a content management system and customizing it to a greater or lesser degree. The software/systems in this category that seem to be the most popular are Wordpress and Drupal. Of course, there are others (hey, I said I was going to generalize grotesquely). There is a ton of work now just for people who know these two systems though.

2) Building more "from scratch," but not really, using an MVC framework. The most popular one these days seems to be Ruby on Rails. There is a great, free online tutorial for RoR too which walks you through making a site from scratch, using a test-driven methodology. An earlier MVC system which gets a lot of praise, and which aspects of Rails are arguably based on, is Django (which is Python based). Although, Java is probably where this all started with Struts (again, generalizing...). I believe Spring is another well-regarded Java web-development framework, but I don't know much about it. Perl even has one called Catalyst. PHP has 'em too, and I guess I should give them some mention though I hate to: CakePHP and Symfony.

3) .NET. I know almost nothing about this. If you go down this route, well, it's Microsoft, you know? It locks you in to their way of doing things in their systems exclusively, I think I can say without being accused of hyperbole. That's that. I know a few ASP/C# devs who love the stuff though, so your mileage may vary. May have the best crossover for you too, if you're a desktop developer.

All of the sites I linked to above have significant documentation available for free. Some of them are less newbie than others, but most of them at least have reference guides. And the nice thing about a lot of MVC frameworks, too, is that the docs come from a perspective of "we assume you already know how to develop, so we are just showing how our stuff works." This may be good for you being a developer already.

Of course, there is a fourth way to build dynamic web sites and that is from scratch, and that is what big organizations serving a ton of page views a second do (Ebay, Amazon, etc.). But while I once would have advocated that you try this, in this day and age I think you are far better off starting with more of a scaffolding, like one of the systems I listed above. If you are a serious developer, I would argue that you're also better off working with an MVC framework in the language of your choice, rather than a CMS. If you want to move towards server-side development, both of these sorts of systems are where the actual work is these days. However, I believe that MVC will teach you more about how the web actually works, and will also show you what the most generally appropriate solutions to the most common web development problems are.

Finally, if you just sit down and read this all the way through, dry as it is, you'll have a big advantage over most web developers.

A few comments regarding front-end stuff:

I will happily echo the Douglas Crockford stuff, if you want to learn Javascript. I didn't know anything about Javascript (even though I was putting in my resume for almost a decade!) until I read his book Javascript: The Good Parts.

You've already mentioned jQuery. So I'll say no more, other than I love working with it. John Resig, by the way, understands Crockford very well I think.

For CSS this has been my go-to book in the past, although I'll admit I'm not the most up-to-date guy regarding CSS (I HATE dealing with cross-browser incompatibility shit, and only deal with what I have to; I work with front-end folks who handle the hairy stuff). Jeffrey Zeldman lays it out in a way that makes sense to both designers and developers. His solutions are pragmatic but standards-based. Good stuff.

The hopefully short, admittedly completely subjective PHP rant, at the end and smaller so ya'll can ignore it if you'd like:
PHP's strengths are: ubiquitous deployment, easy to start coding in, and it's fast. A ton of stuff is written in PHP including some rather large sites (I'm sure you already know Facebook is written in PHP, for example). You'll probably be able to find PHP jobs for some time.

Simply put, PHP's weakness is that it is fundamentally a bad, ugly language, with features randomly hacked-on, inconsistent APIs and documentation, which makes things harder for the experienced developer, and therefore makes your time developing PHP less satisfying and productive. Of course, you can make this argument about Javascript too; Crockford's book I linked to above is all about using a subset of Javascript in a particular way because much of it is ugly—that's pretty perverse when you think about it. But we don't have much of a choice on the front-end, do we? And Javascript is still arguably more lovely than PHP.

There are a millions links out there about why PHP sucks so I'll let you google it and end my rant here. I'll just finish with this: after starting web development with Perl (CGI!) and then moving to Java, I worked as a PHP dev for six years, and seriously considered quitting web development...and then I got a job doing Ruby. Just sayin'.
posted by dubitable at 1:51 PM on May 31, 2011

Aside from the people mentioned previously, you may want to stay on top of Matt Cutts's blog if you want to know more about how Google works. Also, most (many?) web technology conferences you can't attend will post video/transcripts of talks. Watch them! They are informative and will give you an idea of who else you might want to follow.

My honest opinion, though, is that the best resource is creative googling to discover a solution for a specific problem you actually have.

Here are some generalized tips/comments, that reflect my autobiography at least as much as reality:

Try to actually understand the DOM. This will give you a huge leg up over weekend warriors, such as... myself. I don't have a good resource to recommend. Just Google it in different ways and read everything until you grok it (and the many ways it's not understood).

PHP may be ugly, but it has objects and inheritance and is so ubiquitous that there are several competing caching mechanisms that make it very, very fast. Don't ever avoid it just on principle. It's a tool that has its place.

Understand the MVC paradigm and gain experience using at least one MVC framework. The front-runner PHP frameworks are Symfony, CakePHP, CodeIgniter, and Zend. I believe CodeIgniter is the lightest/fastest, and leaves a lot in your own hands; at the opposite end of the spectrum is CakePHP, which has a lot of magic built in.

Look at Boilerplate; follow the comments, read reviews/criticisms/debates over what it does and why.

Be sure to use firebug and Web Developer for FireFox.

Spend some time putting together a development server that is wide open and on your home network, that is simple to push changes to and view as a website on your development machine. You don't want to have to FTP everything to a server on the internets in order to troubleshoot/view.

Internet Explorer 7 is still widely used and supported. Memorize the following to not go freakin' crazy at how it doesn't support inline-block properly:

your-element-here {
display: inline-block; /*For everything but IE */
*display: inline; /* IE is the only browser that listens to this line*/
zoom:1; /* for IE only */
}

Aside from Wordpress and Drupal, Expression Engine and Joomla are two other relatively common PHP CMSs. Ruby on Rails and Django are the only other ones that I see come up often.

Use javascript/ajax properly: to decrease load times, for example, and provide superior functionality for your users. Don't use it blindly, and for god's sake, don't break back/forward buttons.

Never assume your site viewers will have javascript turned on. Turn it off yourself and go through your site during the testing phase and make sure minimal functionality is there. OR, alternately, ensure nothing loads without javascript except for a message saying javascript is required.

Load scripts at the bottom of the page/asynchronously.

Never use Flash for text without creating a way for search engines to index it and visually impaired site visitors to access it. Basically, just never use Flash for anything except games and playing media.

Plan for accessibility at the earliest stage of every project. Visitors will appreciate it, and so will the search engines.

Do not try to game search engines with a website you care about. Short term success with black-hat SEO techniques is generally erased and sometimes punished as search algorithms get refreshed.

Never touch a database without using paramaters. Never, ever just put strings together to form an SQL statement. Never ever ever. PDO is one option to handle this in PHP. There are others.

Learn regular expressions if you don't already know them front and back, and learn how to use them in htaccess files.

View source!

Read stuff by hackers in your spare time. Always have security on your mind, especially when building a site that accepts input from strangers. Never rely on information in a cookie to be accurate. Always use different complex passwords on all your sites (which means having a system to store and retrieve them, such as keepass).

Never ever send out e-mail messages without the user opting in. Always have a single-click opt out link in every mailing list message.

Aim for your code to validate, but don't make it your number one priority. Opinions differ on this, but reality is complicated. Sometimes the return on time invested just isn't worth it.

Most importantly, don't take any of the above as gospel.
posted by jsturgill at 4:22 PM on May 31, 2011