Getting Started

So you wanna be a web developer? I dabble in web development in my day job. It’s part of my real live job title and everything. I started web design with NamoWeb Editor 5.5 quite a few years ago. One day I discovered code view and decided I wanted to know what all that stuff was and how to use it. It wasn’t long before I discovered PHP, MYSQL, and Open Source. Always a freeware junkie, Open Source offered reliable software built by passionate programmers to solve a specific problem.

These are the tools that make my job possible…enjoy and add your favorites in comments.

Web Development

FileZilla
Filezilla is an FTP program I couldn’t live without. It’s easy to use. Upload and download connections are consistent. I don’t have a lot of connection problems with this one. Since it’s Open Source there are no nag screens or reminders to purchase a pro version.

EasyPHP
Perfect for setting up a contained PHP/MySQL development environment on your Windows machine.

PHP Designer
PHP Designer is a code editor that handles just about every language with code highlighting and lots of extra goodies like code snipits, start-end tags, and manual integration (PHP & MySql). I started using the program when it was totally free. The developer was still in college when the early versions were released (PHP Designer 2005 & 2006). Since the developer’s graduation the software has gone commercial and improved a lot. There’s more than one version now. I have used a lot of code editors over the years and this one is my favorite. It’s worth buying and could be the last code editor you use. Get the trial to see for yourself.

Firefox + assorted extensions
Firefox Bookmark Toolbar -quick links to your faves, web hosting control panels, client sites, technorati, your blogs, reference sites…

Firebug
Inline code editor complete with search, save, javascript error debug, and lots more. Helpful for finding a specific line of code on the page without downloading anything.

Fireftp
This was my main FTP program for a long time. I now use it as a backup and to check that a connection really is bad. If I can’t connect in Firezilla I try Fireftp. If both are dead I know the connection isn’t good. It’s as simple to use as Firezilla.

Developer Toolbar
My favorite feature is ‘Outline Current Element’. It works best with CSS. You can turn off Javascript with one click, check web page load speed, handle cookies, turn off images, resize the window to a specific size, validate your html and css, view source, and more.

Source Chart
A visual, color coded, source chart is created using javascript. Visually see the CSS box model.

Colorzilla
Choose any color from any webpage with a right click. Eyedropper tool and color history included! A must have for color matching.
Firefox Spell Check - Built in with Firefox 2! Just right click to check spelling.

GSpace (only works with regular gmail account)
Use your Gmail storage space for file storage. How can this be? Gspace creates a message for each file you add to gmail. That message contains your file as an attachment. When you login to Gspace you’ll see a file listing and not the emails. It works like FTP. I created a specific filter to pick up my Gspace documents. They are filed away neatly and I never see them in my inbox.

Down Them All
Download all images, pdfs, or whatever files from a page or entire site with one click. File name overrites available too. This is a great add-on for downloading all site images for a new client site redesign. Get all the logos and site images at once without asking for the FTP login.

Dummy Lipsum Generator
This automatically generates dummy text without going directly to Lipsum.com. You can stay in one window/tab.

ScreenGrab
If you’re still creating long screenshots one section at a time you can stop that now. Screen Grab lets you save only the visible portion or the entire page. It automatically creates PNG files where you tell to.

Faviconize Tabs
Sometimes I’ve got too many tabs open and I run out of screen space. This exention does what it sounds like. Right click to show just the favicon in the tab. You get a lot more room onscreen, no scrolling through tabs to find what you had open 2 hours ago.

ColorfurlTabs
Colorful Tabs adds a little color to your tabs. I bet you didn’t guess that from the name. This isn’t really a development tool but it does help distinguish your tabs from one another. You can know that blue is your site and yellow is your control panel.

Google Bookmarks
I never used the bookmarks option in my Google account until I found this add-on. Now I’ve got a portable bookmark list. You can organize everything by tags. Bookmarks can be listed in more than one tag too. The add-on is accessible right from the menu bar after the help menu.

ServerSpy
Check up on the server a site is running without doing a trace. Sever Spy gives you the low down right inside the browser. Well at the bottom, but it’s visible without any extra clicks to open.

IETab
IE tab is great for quick checking sites in IE. It actually uses IE to function too so you know it’s a pretty accurate representation of what you’ll see in IE.

McAfeeSite Advisor
(IE & Firefox)This is a nice little add-on to help you spot the junk sites in your search results. The rating system checks for malware and spammy emails. Sites marked with a green checkmark are good, those with red exclamation marks are not.

GmailNotifier (works with google apps)
This is a great tool and time waster at the same time. It can keep up with multiple Gmail accounts including Google Apps accounts.

Jotform
I hate writing contact forms and Jotform doesn’t. Form data is relayed quickly and painlessly. You can even see reports on who’s sent email and what that email said. You can do more than create contact forms too. Use this Jotform to tip you blogger (that’s me).

SourceForge
Searching for a simple news program for a site project? Need a web-based FTP alternative? This is your place. I’ve found many useful programs here (too many to list). Save development time and see if someone else has already solved your problem.

Graphic & Print Design

The GIMP
This program works a lot like Adobe Photoshop. They’ve got plenty of tutorials and documentation to help you get the most out of the program.

InkScape
InkScape is a vector graphics editor comparable to Adobe Illustrator.

PDF Creator + Ghostscript
Create PDFs from almost any program. PDF Creator can print documents as a pdf.

Scribus
Print layout program akin to Adobe InDesign. Create newsletters, business cards, post cards, or anything else that can be printed. Export to a PDF that can be handled without error or quality loss by almost any major layout program.

Stock Xchange
Freely available stock photos. The only requirement to download images is registration and they don’t even send out a newsletter. Most images are 190 dpi with some being higher resolution. When in doubt, ask the photographer if a higher resolution version is available.

Account/Information Management

GoogleDocs
I’ve been using Google Docs to save new blog posts instead of Wordpress. This saves bandwidth and there’s plenty of storage. I only use the word processor right now.

Google Apps
for Small Business
I use Google Apps for small business to manage my website email. This takes the load off my hosting server and gives me a lot more storage too.

SidejobTrack (invoicing here too)
This is a simple web application for tracking and invoicing freelance projects. You can set up services, projects, and materials then add them to your schedule. At login you can see all your projects and their due dates.

Payment

Paypal (invoicing +payment)
This is a no-brainer. Get payments securely online with paypal. Send customized invoices and set up subscription payments too. It’s an easy way to accept credit card payments online.

Jotform (paymentforms)
Here’s one for a simple brochure website. It’s plain text alone but can be added to your site, customized to match perfectly. This form is a real order form so be prepared to pay if you use it. I’ll contact you about your website requirements the next business day after you place an order.

Browsers

Opera

Safari (now
for windows too)

IE7

Extras

iPodNano
Yes, this is not a freebie but it could be if you got it for a gift! Productivity Tip: Set up a playlist that has songs adding up to 30 minutes and work until the music stops then take a break. Repeat. Use all your CPU power to run your applications and not your mp3 files.

25Free (DRM-Free) MP3’s (eMusic)
They’re really really free. No kidding. Sign up for the trial and start downloading right away. You own the music - even the freebie downloads! Add ‘em to your iPod and get back to work already!

Google Sidebar - News, RSS Feeds, Stocks, & System Monitor I use the Google Sidebar as an RSS and news feed reader but not much else. There are loads of gadgets you can add to it too.
Two1 GB USB Drives - One in your desk, one in your pocket/purse/…
You’re not a true techie unless you’ve got at least 2 USB drives within reach at any time… I’ve got two. One at home and one in my bag. They’re great for transporting customer data files from their location to yours. They’re waaay better than burning a CD.

There you have it. A list of my favorite applications and services for development. Did I miss anything? Leave a comment.

This post also featured in the weekly Blogging Chicks Blog Carnival
Technorati Tags: Blogging Chicks, Free Web Development Tools

Categories: Web Design & Development
Tags: Web Widget Reviews