Free Tools to Speed Up Web Development

Free tools to speed up web development

I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.

Suggestions Updated July 2013:

Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography

Tools for faster, better web development

LAMP stack development

IDE: Zend Studio / PDT for Eclipse
PHP Framework: Zend Framework
Javascript library: jQuery
Source code versioning: SubVersion with Tortoise client
HTML filtering library: HTML Purifier
Image manipulation library: php image
Op-code cache: APC
Javascript / CSS deployment: Minify
Markup / javascript inspection debugging: Firebug
Database administration: phpMyAdmin
Page load analyzer: YSlow
Markup validation: HTML validator
Shell client: PuTTY
FTP Client: FlashFXP
The PHP manual
Experience and skill :)

(I focused on LAMP since that is what I use for web development)

Speeding up web development

I personally have found breaking everything up into small tasks helps.

The way I like to design web pages:

Draw out the design, or photoshop it.
Create the HTML - no CSS, no styling at all
Now add in your style - basic style, like positioning, save making the menu perfect for later
Connect to database if needed / server side code
Now add in any javascript, ajax needed
Tweak it to perfection

If you have all this broken into small tasks, when you get done with each, you feel more motivated to continue working.

Like I said, this is how I do it, and it seems to go quickly, especially since I only get about 1 to 2 hours a night to work.

Tools for faster, better web development

LAMP stack development

IDE: Zend Studio / PDT for Eclipse
PHP Framework: Zend Framework
Javascript library: jQuery
Source code versioning: SubVersion with Tortoise client
HTML filtering library: HTML Purifier
Image manipulation library: php image
Op-code cache: APC
Javascript / CSS deployment: Minify
Markup / javascript inspection debugging: Firebug
Database administration: phpMyAdmin
Page load analyzer: YSlow
Markup validation: HTML validator
Shell client: PuTTY
FTP Client: FlashFXP
The PHP manual
Experience and skill :)

(I focused on LAMP since that is what I use for web development)

Free cross-platform tools for web development

Code Repository: Add Mercurial - Its the only free, distributed version control system that easily runs on windows, mac, linux, etc. SVN will be the only one of those that has a friendly interface.
You'll need to plan for how to make your UI cross platform compatible. As of this writing, its quite difficult to perform a write-once interface in HTML/JS. Although state-of-compatibility is getting better, I would plan to very carefully separate your UI from your business logic because I think you'll likely need to either deploy separate versions of the UI for each device or to have unified, but very simplified, UI that works on many devices (assuming a web app).
Plan on unit test your business code to make sure it works on all of your devices. The JS engines differ, and you need to know that early in your dev process.
Plan ahead as to how to handle user input. If your users have a physical keypad, for example, they'll expect to use it. You may want a very different layout for a site targeting Blackberries with trackballs, then an iPhone or Storm that uses finger taps.
Know ahead of time which platforms you will target, and then buy those phones. If its worth doing, its worth buying the phone. As an example, my first iPhone app talked to the database. It worked fine on the simulator but I was waiting for my developer key before I could test on the device. Once on the device, I discovered that what I thought would be a 1/2 second delay was more like a 40 second delay, which forced me to totally revamp the project.

Hope this helps.

Tools similar to HTTP Watch or YSlow for Google Chrome browser

Google has a whole page on this subject (along with the announcement that speed will be considered in ranking pages):

Page Speed, an open source Firefox/Firebug add-on that evaluates the performance of web pages and gives suggestions for improvement.
YSlow, a free tool from Yahoo! that suggests ways to improve website speed.
WebPagetest shows a waterfall view of your pages' load performance plus an optimization checklist.
In Webmaster Tools, Labs > Site Performance shows the speed of your website as experienced by users around the world as in the chart below. We've also blogged about site performance.

What type of set-up/tools are must have if I want to build my skills as a software developer (in Java, Python, C, C++)?

Write Code:

In this article Jeff Atwood talks about how to become better at designing and writing software by designing and writing a lot of software. His is stated more elegantly, but it is a valid point. The more you do something, the better you will get at it.

Hardware:

Any modern PC/Mac hardware should suffice. If you plan to run Windows or Linux I would use a PC over Mac. There is a lot of clamor over which is better, but use the one you like the best.

It should be a moot point in this day and age, but make sure you have some sort of reliable internet connectivity (cable, dsl, whatever...). Then you will have access to Google and
stackoverflow; both good resources for programmers.

Make sure you have a keyboard and mouse which are comfortable to you. This includes setting up your desk and chair to accommodate your height and hand position. You will be at the computer for long stretches of time, and you want to be comfortable.

Editor/IDE:

Choose an editor: Vim, EMACS, KATE, Eclipse, whatever. It doesn't really matter which one, but whichever one you do pick learn it well. The editor is your main tool and you want to be comfortable and knowledgeable when using it. The better you know your editor the faster you can create/edit code.

It helps to have an editor that runs on all platforms you may be developing on, but it is not necessary.

Build Tools:

At some point you will find your self face to face with having to create or fix a build stystem. Make is pretty standard for *nix and C/C++, but for your own personal projects find the one that suits you best. There are a lot to choose from: Scons, Ant, Make, Jam, ...

I personally use SCons, since it is python based, and I like python.

Books:

When learning a new topic I would recommend getting a good book on it. This will generally give you a good overview of what you are getting into, and give you a good foundation to learn from. Google and Stackoverflow are good for specific questions, but a general overview of a topic is harder to get.

This of course assumes you have the luxury of time and money. For the monetarily constrained you can often find free versions of electronic books online.

Languages:

I used to have strong feelings about which languages to learn, but now I realize you should write in the language you enjoy most. However don't be afraid to try new languages. I personally like C++, python, and C# in no particular order.

Since you are just starting out pick the languages which you can get for free, which I actually think is most languages these days.

In the business world the language of choice tends to fluctuate on about a 5-7 year cycle. However you can find a job (at least currently) in all the "big" languages (C++, JAVA, C# VB.net, python, ruby, perl, ...). If you learn one of the modern languages well, it is typically not a problem to transition to another language quickly. The libraries tend to take longer to learn than the language itself. So pick a language you like learning in and learn it.

Miscellaneous Thoughts:

As Marc Charbonneau said set up source control. There are plenty of free source control offerings, so pick the one you like best. Personally I use Perforce, which is free for two or less people. I ahve heard good things about Subversion and git as well. The specific one is not as important, but choose one of them.

If you want to get a deeper knowledge of computing I would recommend Sipser's Book and Knuth.

Whichever language you choose I would spend time learning the debugger for it as well.

If you are doing web development, then make sure you know how to minimally setup and run Apachie (or IIS).

Avoid holy wars if you can. They are a waste of time, and you don't learn anything from it except that people are stubborn. Some Holy war topics (bracket style, editors, endianess, "best" language, "best" OS, ...).

My personal setup:

Standard PC (Windows XP Pro)

Visual Studio 2007 (a little behind).
VIM
Python
C/C++
C#
Scons

Standard PC (FreeBSD runs headless: no GUI)

gnu tool chain (Make, C/C++ etc)
VIM
python
Scons

Free Tools to Speed Up Web Development