The extremely concise complete guide to web development.
I just emailed this to a friend, and thought I’d share.
First of all, Firefox is the primary browser used by web developers. This is largely because of excellent add-ons such as the Web Developer toolbar and Firebug. Get them:
- Firebug - allows you to inspect the HTML and CSS of a document, determine which styles apply to a given element, debug javascript, analyse network usage, and more
- Web Developer add-on - installs a toolbar with many nifty tricks. Not used as frequently as Firebug, but install this and be familiar with its functionality
That doesn’t mean we don’t need to use other browsers. Modern web sites need to support IE6 to IE8 (IE = Internet Explorer), Safari 3, and Firefox. Chrome is also rising in popularity, but renders almost exactly the same as Safari. In order to run multiple versions of IE on one machine, the most stable way is to use the free Virtual PC instances offered by Microsoft. You’ll need to install Virtual PC as well, which is free for Windows.
IE6 is the bane of everyone’s existence. Special style rules often need to be created in order for pages to work in IE6. Some web sites are no longer supporting IE6, but there is still a sizable user base (maybe 15% of web users). It is important to check IE6 and IE7 frequently during the process of creating a web site so you don’t dig yourself in a deep hole before realizing your site looks like shit in IE. Here is a great article on the most troubling CSS difference in IE6.
There are also javascript differences in IE6, but the popular javascript frameworks (JQuery, MooTools, YUI) largely protect developers from those differences.
Javascript is the language used to make web pages behave more like applications. GMail, NetVibes, and other popular web sites with dynamic appearances (DHTML) and content that updates without a page refresh (AJAX) are heavy javascript applications built on HTML & CSS skeletons. While some might dispute the fact, javascript is an object-oriented (OO) language. Advanced javascript is a little easier and more organized if you are familiar with common OO design patterns.
Server-side languages such as PHP and Python, to oversimplify a bit, pretty much just output HTML. Server-side logic processes requests, retrieves & manipulates data, and returns a document to the web browser. If all is operating correctly, the server-side language code never arrives at the browser. Any HTML, CSS, or javascript is regarded by the server as simply output text. The server output is then interpreted, processed, and ‘executed’ in the client (your web browser).
In some applications, the server-side application does all of the heavy lifting. Increasingly, tasks that can be delegated to the browser are implemented in javascript. Modern Web 2.0 applications are just as much client-side applications as they are server-side applications.
MVC frameworks have become the standard starting point for web applications. In PHP, CakePHP is popular. Then there’s Django for Python and Ruby on Rails. All of them consist of pre-written code for many common tasks, making it faster to prototype, finish, and deploy web applications. Neither language choice nor framework choice is likely to make or break a project. Not using any MVC framework, however, can be a big mistake, costing hundreds of man-hours. Ditto with javascript frameworks.
You’ll need a database for most web applications, and all of the MVC frameworks I’ve listed require one to make a decent web app. MySQL is the standard choice.
If you are going to invest a significant amount of time and/or money in developing an application, you might as well save your work. Version control and software configuration management systems such as subversion and mercurial allow you to save your progress frequently, collaborate effectively, and, in case of emergency, go back to any previous saved state. The current open-source industry standard is subversion. Any self-respecting developer must use version control for every project she works on.
You can develop a web application right on your own computer, without a hosting provider. XAMPP is a great, free all-in-one package for developing PHP applications with a MySQL database and Apache web server on your Windows machine. MAC OSX actually comes loaded with pretty much everything you need to run a PHP or Python web application, but there are convenience tools such as MAMP to make setup easier. Popular code hosting services such as Google Code and Sourceforge offer subversion and other version control servers.
In order to have a live web site at www.myawesomesite.com, you must obtain rights to the domain name myawesomesite.com from a domain name registrar such as GoDaddy. Many hosting providers, such as Dreamhost, are also domain name registrars, making the next step convenient. A live web site must reside on a server. Your personal computer is not a good choice, because it’s probably not connected to the internet 24/7 and it probably does not have a static IP address. Hosting is cheap these days. Choose a reputable hosting provider that is appropriate for the type of application you are building. Dreamhost specializes in PHP applications. Some providers specifically target other languages, such as Python or Ruby, or even target specific frameworks (such as Rails or Django).
My favorite resources:
CSS Property Index
JavaScript - The Definitive Guide
Wikipedia (link to DNS article)
JavaScript, MySQL, OOP, PHP, ajax, books, open source, platforms and frameworks, software, softwarearchitecture, version control
