The portable web development toolkit

The portable web development toolkit


Web developers are sometimes forced to travel. Unfortunately, lugging a big, bulky laptop around with all their programs is the only way to develop on the road. After all, using another computer is out of the question since it doesn’t hold all of your favorite programs. Luckily, there is a best of both worlds. Thanks to John T. Haller, the Apache Friends, evolt.org, winPenPack.com, and a host of others, you can carry an Apache server, a MySQL (and SQLite) install, a PHP install, a Perl install, a mail server, an FTP server, two popular web browsers, an FTP client, an HTML editor, an image editor, and a vector graphics editor on a 512MB flash drive to be used with any Windows computer. All using free software.

What is a portable app?

Today, you can get a 512MB flash drive for as low as $7.99. It’s hard to fill up 512MB with just documents. That’s where portable applications come in. A portable application is an application that doesn’t write settings to the registry or Application Data folder (for a more formal definition, visit the What is a portable app? page at PortableApps.com). And that’s what we’re going to use to set up our portable web development kit.

XAMPP: All-in-one server

XAMPP is an Apache friends project to create an easy, all-in-one testing development for web developers. Running on Windows 98, NT, 2000, 2003, XP and Vista, it features an Apache server, MySQL and SQLite, PHP (4 and 5), Perl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System, Ming, FileZilla FTP Server, WEB-DAV, and much more. You can add more languages and features using the XAMPP Addons (installation guide at the XAMPP for Windows page). Just download the Windows .zip, extract it to the root of the thumb drive (so the xampp folder would be E:\xampp), run xampp-control.exe, and start the services. Put the web content in \xampp\htdocs. There’s a list of where the software executables are on the XAMPP for Windows page.

Nvu Portable: What You See Is What You Get

Nvu is one of the most popular WYSIWYG (What You See Is What You Get) HTML editors. Besides its rich text capabilities, it has basic FTP capabilites, tabs, forms, and much more. John T. Haller was one of the people who liked it. In fact, he liked it so much that he created a portable version called Nvu Portable.

Notepad++: All purpose programming editor

There are tons of replacements for the Windows Notepad (Notepad2, SciTE, and NoteTab come to mind), but my favorite is Notepad++ (in fact, that’s what I’m using right now to write this blog entry). It’s got code collapsing, syntax highlighting, auto completion, macros, and much more. Best of all, it is portable out of the box.

ESWAT web project framework: Quickstart your web development

Unlike the other things on our USB drive, this isn’t a program. It’s a skeleton design containing folders for CSS, images, flash, JavaScripts, designs, and docs, all laid out in a neat order. It also includes (X)HTML and CSS templates, some PSDs, and more. Use it to quickstart your web development.

Firefox Portable and Opera@USB: Cross platform testing

The most important thing for a web developer to do is to make sure that his site works in the four major browsers: Firefox, Opera, IE6, and IE7. Luckily, two of these browsers have unofficial portable builds: Firefox Portable and Opera@USB (IE isn’t as neccessary since most computers have either 6 or 7 installed).

FileZilla Portable: FTP Uploading

Every good web developer’s toolkit is never complete without an FTP client (yes, Windows Explorer will act as an FTP client, but it doesn’t support many features that real FTP clients support). FileZilla is my personal favorite. However, it’s not portable. That’s why John T. Haller created FileZilla Portable, which lets your run FZ off of your USB drive.

GIMP Portable: Image editing on the go

All web developers need an image editor. And what (free) editor is better than the GIMP? After all, it supports almost every image type, has tons of brushes, filters, scripts, and much more. However, it isn’t portable. That’s why John T. Haller created GIMP Portable. For GIMPshop users, who prefer the Photoshop-feel, there exists a program called X-GimpShop.

X-Inkscape: Vector graphics editing

While GIMP is useful for editing images, you’ll need a vector graphics editor as well. The best one is Inkscape: it’s free software, works like a charm, uses standards, supports CC metadata, imports all the popular image formats, and works almost as well as commercial apps do. And of course, there’s a portable version called X-Inkscape (if there wasn’t, I wouldn’t be talking about Inkscape, would I?).

Wrapping it all up

Our web development thumb drive is now done. We have a server, some editors, an FTP client, an image editor, and a vector graphics editor. All free software. Everything that a web developer could possibly need is there. If you don’t like some options, many alternatives abound. The Portable Freeware Collection and the List of portable software at Wikipedia are some good places to start.

Category: 

Comments

rooy's picture
Submitted by rooy on

And there's Tor for people who want to remain anonymous on the net. At least the FSF Associate member USB key has a copy of it, but I don't know the detail of setting it up portably.

And Opera is portable when you unselect "use 1 profile for each user" in the installer, and install it straight on the key.

clievers's picture
Submitted by clievers on

I've actually tried the Tor a few times and I could never get a connection. Not sure if work was blocking it somehow (the port), or if it just didn't have any available connections. Neat idea though.

------
let's all play nice!

clievers's picture
Submitted by clievers on

This is great. I never realized you could run xampp from a usb drive. I've heard of some other apps though.
For quick dev type work, I use Crimson Editor a lot. It's a great replacement for notepad, has tabs and what not, but also does syntax highlighting for a lot of languages.
Thanks very much, this is great!
------
let's all play nice!

Andrew Min's picture
Submitted by Andrew Min on

Yeah, I should have clarified that. From what I can see, Crimson is open source. At least, they offer the source code.

--
Andrew Min

Brent Hopkins's picture

Thanks for the suggestions. I think it worth mentioning that if you use the Firefox Portable, there are several useful extensions which work nicely with it. The DOM Inspector, Web Developer Toolbar, FireFTP, and others allow you to work within tabs of Firefox, which I find very handy.

magstudios's picture
Submitted by magstudios on

Hi thank you very much for provide information on The portable web development toolkit it's really working for Software Development,Web Development
the view on FTP is also very good it's helpful foe every one.

Thanks
Mag Studios
http://www.mag-corp.com

Author information

Andrew Min's picture

Biography

/ˈændruː/ /mi:n/
(n): a Christian.
(n): a student.
(n): a technology enthusiast.
(n): a journalist for several online publications.

Andrew Min is a student, programmer, and journalist from New York City.

My main forte in the technology realm is journalism. I’ve written for a variety of magazines, both print and non-print, with a focus on open source software and the new web. I’ve also been interviewed on a long list of topics, ranging from politicians on Twitter to open source software and homeschooling.

I also have experience with a variety of programming languages (Bash, Batch, CSS, JavaScript, PHP, and (X)HTML) and content management systems (WordPress). I’ve been hired to design and administer several websites. In addition, I’ve been the lead programmer on several small coding projects.