ITT #8: Finding the Right Tools
Overview
In web development, as with most crafts, you're not limited by your tools. However, having said that, it's also arguable that having the right tools can help turn a skilled programmer into a master (or at least give that extra edge to increase speed and accuracy while simultaneously reducing stress levels and the murderous impulses that accompany staring at code snippets that "can't possibly be wrong!").
In this installment of Instant Tip Tuesday, I'll be sharing the tools I use to keep my productivity high and my blood pressure low.
1. Eclipse SDK
First and foremost, every developer should have their development kit. I've used several different development environments over the years, and I found, with many of them, that I had trouble switching between the programming languages I use on a day-to-day basis.
With Eclipse, all I have to do when I start using a new programming language is add a plugin, and I've got syntax highlighting and (in many cases) error detection, code suggestions, and a built-in language reference, all of which save me untold hours of searching manuals, debugging, and refreshing pages.
Eclipse: The Pros
- It's free and open source!
- Multiple language support
- Syntax highlighting
- Code suggestions, hints, and reference
- Multiple project support
- Easy plugin expansion to add support for new languages
Eclipse: The Cons
- A little confusing to set up initially
- Requires a Java virtual machine, which is somewhat memory-intensive
- The documentation isn't always beginner-friendly
Overall, the initial pain of getting Eclipse installed was 100% worth it. The added levels of control over my workflow versus that of simpler code editors makes all the difference in the world to me.
Eclipse for PHP Developers Download Page
2. MAMP
MAMP, or Mac, Apache, MySQL, and PHP, is an incredibly easy way to get an Apache, MySQL, and PHP environment set up on your local machine. (NOTE: There are also Linux and Windows flavors available.)
MAMP should appeal to anyone who's fought for hours with making a simple change, then uploading a file, then waiting for the page to reload, only to find out that it was the wrong change. With this handy software installed, you can easily check your code on your local machine, no upload required.
MAMP: The Pros
- It's free!
- Easy to install
- Speeds up testing
- Saves money (no hosting required)
MAMP: The Cons
Honestly, I don't have any cons for this one. You're not a bad person if you don't use it, but you have nothing to lose by making the switch.
3. Firefox
Not much needs to be said about Firefox, and I only mention it here because the rest of my suggestions are Firefox Plugins and Add-Ons.
Essentially, Firefox is the standard for the web-savvy masses. It's especially useful for designers due to its high level of customizability via plugins, add-ons, and themes.
Firefox: The Pros
- Free!
- Huge community of users and developers that consistently try to make it better
- Highly customizable
- Ever-improving support for new web technologies
Firefox: The Cons
- Tends to eat memory
- Occasionally crashes for seemingly no reason
- When run in conjunction with other memory-intensive programs, it can freeze
- Converts may experience a holier-than-thou attitude toward all "unenlightened" Internet users
4. Firebug
Firebug is indespensable as a web developer, especially if you dabble, wade, or deep-sea dive in JavaScript. It has live-updating source for a page, showing you the changes made by JavaScript that simply aren't available with the standard "View Source", which, coupled with the Console, create an unbeatable JavaScript debugging experience.
Firebug: The Pros
- Free!
- Inspect individual elements' box model
- Debug JavaScript easily
- Manipulate HTML and CSS on-the-fly
Firebug: The Cons
- Saving code edits can be a pain
5. Web Developer Toolbar
The Web Developer toolbar for Firefox, when paired with Firebug, is the one-two punch that completes my front-end development workflow. In addition to letting you turn of JavaScript, CSS, and images with one click, it has a great feature that pulls up a site's CSS in its original format, allowing you to edit the native files, see instant results, and simply copy-paste the edited CSS into your editor to commit the changes. (NOTE: To activate the CSS editor, simply press CMD+SHIFT+E while looking at the page you wish to edit.)
Web Developer: The Pros
- Free!
- Easily toggle CSS, JavaScript, and images in your pages
- Edit your CSS files easily and see results instantly
Web Developer: The Cons
- A lot of extras that don't see a lot of use
- CSS edits are lost if you change tabs
6. FireFTP
I need to use an FTP site every day, and it always used to be a huge thorn in my side. FTP meant an additional application running, plus a Finder window or two open, lots of application switching, and just a bunch of wasted time in general.
FireFTP solves that by creating an FTP client in a Firefox tab, allowing local file browsing, drag-and-drop uploading, and support for multiple accounts.
FireFTP: The Pros
- Free!
- Turns Firefox into an FTP client using a browser tab
- Support for multiple FTP accounts
- Drag-and-drop uploading
FireFTP: The Cons
This is another one I don't have anything bad to say about. It probably lacks some of the features that stand-alone FTP clients have, but so far, I haven't felt like I've given up anything.
What's In Your Toolbox?
I don't claim that the above tools are "the ultimate development resource pack" by any means, but they work well for me. What are you using? How does it help your productivity? Let me know in the comments!
Want more content like this? Subscribe for FREE!
Site Sponsors
Popular Topics
Who Is This Guy?
Jason Lengstorf is a professional geek, specializing in PHP and jQuery applications, with a love for XHTML, CSS, and AJAX. If he's not glued to his keyboard, you're likely to find him in line for coffee, brewing his own beer, lifting heavy things, or pretending to know something about wine.
Get in Touch
Email:
answers@ennuidesign.com
Phone: +1 (406) 76-ENNUI (36684)
Twitter:
@jasonatennui
Facebook:
Jason Lengstorf
Comments for This Entry
1. Textmate
2. Cyberduck
3. Coda
4. Terminal
5. Safari with web inspector.
A very similar toolset to me, although I continue to use Dreamweaver SDK. Have been searching for a solid open source alternative to try out, though. Will add Eclipse to the list, as well as trying to get Aptana working once more!
Extensively use Notepad++ for small edits or to keep on top of XAMPP/Windows server configuration files.
Never had any complaints about Filezilla as an FTP.
Browsers is always a tough one though. For design work I do use Firefox, because of the add ons that you identified. Particularly a fan of the "View Style Information" option on the Web Developer add on, which can be invaluable when styling for CMSs that overcomplicate their page structure.
But for initial site previews I tend to use Safari, as I find it the most likely to comply to all standards (although thankfully differences between non-IE browsers are increasingly rare). And I rarely use Firefox for day to day browsing except if using the StumbleUpon toolbar.
If other browsers such as Safari or Chrome had similar add-ons to Firefox, how do you think Firefox would rank given its base performance as "just a browser" in comparison to those competitors?
1. Notepad++
2. Firefox/Firebug
3. FlashFXP
That's really about it, nothing too fancy. For a long time I was stubbornly using regular Notepad until I decided to give myself an upgrade.
Just like the feeling of writing it myself without getting too much help from the software itself. Yeah, stubborn, I know.
@Logan Leger:
Cyberduck was my weapon of choice before I found FireFTP. It's a great program; I just prefer having as few programs running as possible.
@Robin Cannon:
I was never a big fan of Dreamweaver. It's one of the only Adobe programs I really dislike.
That's a pretty interesting point about browser popularity resting on add-on support. Personally, if Safari had add-ons that were as good as Firefox's, I'd probably use it instead. I hate how much of a memory hog Firefox can be. I really liked Mozilla's Camino project, but, again, the add-on support wasn't there.
Firebug, ohhh how I love thee!
Seriously would not know what to do without the little bug of fire :)
So my list...
Firebug
Notepad++
Texter (text replacement util)
Wordpress
WAMP
I think thats it... mmm
I am searching for my editor, for the moment it is Coda but it's lack of true coding features has me stressed. I only dont use Eclipse (or any of the clones) because on a mac I just don't like the Java feel (it drives me nuts). The best I could get on the Mac was Komodo Edit (which is built on Mozilla engine so not Java feeling, but still quirky).
Editor(s): Coda, Komodo Edit, TextMate
FTP: Transmit
SVN: Versions
Browser: Firefox w/ Firebug and Web Dev toolkit, Safari
Backups: S3 (via Jungle Disk) and DropBox
Localhost: MAMP Pro
@Will:
Eclipse doesn't actually write your code for you, it just provides tooltips to remind you what the parameters are for a function, or notifies you of syntax errors. The only autocomplete function I use is the variable lookup, which dynamically pulls up a list of variables you're using and lets you pick the one you wanted to use.
I did plain ol' Notepad for a while, too, but it just got too cumbersome with complex software.
@Rob MacKay:
Good call on the text expander! I just watched a screencast by Jeffrey Way on this, and I'm thinking I shouldn't have missed that memo. In fact, I think I'll download Texter right now. :)
@Shane Sponagle:
My dad called me the other day with raving reviews about the NetBeans IDE. I looked at it for a minute just now, but I couldn't find anything talking about what it's powered by. Could be worth adding to your list of apps to check out.
Great suggestions, everyone!
Textpad or Notepad++
FireFTP
Photoshop
Linux webserver --with mysql oci8 php apache2 and svn.
Ultraedit in vista for writing the code.
Yeah, I used Eclipse back in college when I was taking a couple Comp Sci classes, it's good stuff. If I was doing coding more seriously I would definitely need to use some sort of platform like Eclipse.
I also tried NetBeans, Eclipse is definitely better.
I'll definitely check out WAMP though.
I need these so much, I keep a portable version with me at all times.
E-TextEditor
Firefox
Filezilla
XAMPP
Photoshop ( at home )
GIMP ( on the go )
I switched from Eclipse (used since it existed for both Java and PHP) to e-texteditor for PHP. Haven't looked back, much better, much lighter, hi-liting and code prompts are much nicer. Since then I have removed notepad++ as it's now redundant. Current tool stack is:
E-TextEditor
Firefox/Firebug (is there another option)
Chrome (quick, light, good for dual browser use)
WinSCP (ahh, no more ftp)
XAMPP (easiest way to get a lamp stack)
Xara Xtreme (cause I want to)
Photoshop (cause I have to)
PaintShopPro 5 (quick screen captures, resizing, etc.)
You should switch to SCP, it works miles better than FTP and is more secure. It won't occasionally fail on one file in a multi-file transfer, and not tell you, which is worth it's weight in gold (I'm sure we updated the xxx file to fix that). Nor will it write 0 byte files and move along happily. No, I don't miss FTP.
~dave
@david glenn:
I checked up on SCP, and it's pretty cool stuff.
WinSCP is Windows only, though, so I dug around for a Mac alternative. I found a program called Fugu (http://rsug.itd.umich.edu/software/fugu/) that looks promising.
I just downloaded it, and I'm giving it a test drive. I'm not sure that I'm sold enough to stop using my FTP tab, though. :)
Hi Jason,
One less application switch for you if you were to use Eclipse system explorer plugin (http://www.eclipse.org/dsdp/tm/).
Allows you to access remote servers through ftp, sftp, even launch shells if you have ssh access, all from within Eclipse, just another perspective
Cheers
- TextMate
- CSSEdit
- MAMP
- MacGDBp (step-through debugger with XDebug. If you don't know about this. Go get it! Awesome stuff. http://technosophos.com/content/debugging-your-php-code-xdebug-mamp-textmate-and-macgdbp-support)
- Safari 4 (inspector is quite nice. can profile and debug javascript too.)
- XyleScope (Great DOM browser)
- Versions (SVN)
- DTerm (command line directly in an active window. Primarily used for CVS. No decent CVS client on the Mac.)
- PhotoShop (for layouts, pretty graphics and slicing them to bits.)
- Illustrator (illustrations, logos)
- VMWare Fusion (to test all versions of IE)
- ExpanDrive (for remote sftp)
- Sketch book and a Rotring pencil & rapidiograph (The most important when starting out.)
NotePad++ on Windows
Geany on Linux
Firefox + Firebug everywhere
1.TextMate
2.Coda
3.Espresso
4.Dreamweaver
5.Firebug
6.MAMP
7.Safari with web inspector.
Post a Comment
Want to show your face? Get a gravatar!