Web Developer Essentials

My first shot at a sort of “Top Ten” list – featuring the most essential Tools for Web Developers. This one goes out to web developers getting started as well as more experienced ones. I tried to gather the “Best of Breed” tools which come in handy for all the different areas of expertise when it comes to Web Development – from HTML/CSS Template Coding to Server Side PHP Scripting and more generic tasks such as Version Control or Webserver administration and configuration.

I personally use OS X, but most of the tools should be available on your preferred operating system flavor.

PhpStorm

Yet another IDE, yet perfect for all PHP coders out there

My IDE Of choice, perfect for PHP Projects. Its code completion (intelliSense) is beyond all. Remote Deployment and Git integration is top notch too. And it comes with a nice Gadget called “CSS X Fire” which will let you edit CSS in Firebug and have the changes selectively applied directly to your local CSS Files. Sounds trivial but it’s so handy when it comes to finetuning websites along with the people on the Graphic Detail.

Screen Shot 2013-04-29 at 10.17.00 AM

Just look at that sexy interface

What else is there to say about it? So far, it has covered my every PHP Coding needs. Oh yeah, and debugging – while debugging with xdebug is a hassle on some of the IDE Tools, it is completely integrated into PhpStorm and has increased my productivity ever since i implemented it. No more ghetto debugging with “echo $var” and “var_dump($array)” anymore but nice step by step breakpoint analysis, as one is used to in Java e.g.

Get a Trial version of PhpStorm from JetStorm’s Official Site

Firebug

In-Browser debugging and website analysis

Super useful when debugging Websites – actually the only reason i really use Firefox anymore at the moment. Not that i don’t like the browser per se, it’s just that Chrome is working better for me as an everyday browser – for debugging Firefox still wins hands down with all its useful Plugins and Extensions. It also integraties nicely with the Zend Framework (enter the FirePHP extension) for which it allows Database-Profiling and Logging to the Firebug console, as well as the aforementioned CSS X Fire, that allows realtime CSS editing in the Browser, connected to your local Files.

Get firebug Add-On for Firefox

Zend Framework

The preferred PHP Application Framework

My Framework of choice when it comes to concoct webbased applications. Still getting warm with it’s recently released Version 2, which offers a whole different approach.
Generally, i can only recommend to use some kind of PHP Framework when it comes to bigger project – something MVC driven like CakePHP, Codeigniter or the much praised Symfony2 would make good alternatives.

I’ve been working with Zend Framework for almost four years now and i couldn’t live without it. The codebase i have written for our standard applications (CMS, Social Media Marketing Toolkit, Datapool) have become so big and enables me to quickly setup any thinkable Web Application. If you’re looking to get started with a Web Application Framework for PHP, i’d probably recommend diving directly into ZF2 – the learning curve is likely as steep as when you get into ZF1, but you’ll find yourself inside a much more modular and future oriented approach.

A good point to get started is Rob Allen’s Zend Framework Tutorials – it offers Tutorials for absolute Beginners for every thinkable Version.

Git

Version Control made easy

The Weapon of Choice when it comes to Version Control. Especially if you have worked with SVN or any similar VCS before. Git is really intuitive and pretty easy to get started with. I recommend reading the official Git Book, which is available online for free. Once you got the basics running, i also recommend you to have a look at Git Flow, which is a super useful plugin that enables you to implement a proper version control workflow – instead of creating, merging and deleting multiple branches, you get different release branches for feature, release candidates and hotfixes – after the corresponding development cycles, these branches can automatically merge back into their respective target branches, so you have a clean master and development branch at all times. Jeff Kreeftmeyer wrote a great tutorial about “Why aren’t you using Git Flow?”.

A few complementary tools for Git

Last but not least enter Github, an increasingly popular platform that offers public and private repository hosting. Not only does it offer you an easy way to backup your repositories, as well as a free GUI-Tool for tracking your repos, it also integrates a largely social component, which allows you to star and track certain public repos and follow other contributors, fork their creation, create comments, change and pull requests and much more.

Jumpcut (OS X only)

Simple but effective Clipboard history. After the first time i used it, i ask myself how i could have ever been productive before. Makes code cutting copying and pasting much more comfortable. Also useful when it comes to simple task such as copying and pasting unmemorizable usernames and passwords over and over again. While a lot of IDEs and Editors have some kind of Clipboard History integrated, this feature will come in handy across all applications.

Get Jumpcut for OS X

MySQL Workbench

Database Administration GUI

This little helper has slowly but surely made phpMyAdmin obsolete. Altering Tables is much faster and also editing row data comes off the hand easily. Migrating Databases from Remote to Local for Testing is a breeze too. Plus it has a nice visual editor which is hugely useful when it comes to fast prototyping of database schemas and structures – automatic foreign key generation and relational tables make the development process much faster, especially in bigger projects.

Easy visual Database Structure planning

Get MySQL Workbench from the official Page

Vagrant

“Out of the Box” virtualized Webserver Environments

Set up virtual machines for web projects with ease. I’m still getting started with using cookbooks to configure the virtual machines, but this tool might eventually replace my local custom AMP (Apache, MySQL, PHP) stack, which often breaks with OS updates and also makes it difficult to distribute Web Applications to team members with different local configurations. Read all about it on their official Website. It’s easily installed and only requires the free Sun Virtual Box Software in order to run the virtual machines. I’m currently working on setting up a custom¬†LAMP Stack¬†which is configured for all my standard PHP/Zend Framework projects, i’ll probably write an in depth article once everything is up and running.

Get Started with Vagrant

Twitter Bootstrap

Get a sexy Web App User Interface up and running in no time

If you ever need to put together a graphical user interface for a Web Application, this is a great start. It gives you nicely designed HTML/CSS template elements for all the UI Elements you could possibly need, such as forms, buttons, tables, paging controllers and then some. It’s really easy to get a quick prototype up and running in no time, but also complex user interfaces find a great base of tools in Twitter Bootstrap.

There’s plenty of additional themes to be found on Bootswatch, a nice extension to Twitter Bootstrap that allows you to add a little bit of flavor to your standard user interfaces.

Get down with Twitter Bootstrap now. Oh, and while you’re at it, get started with LESS – makes your CSS so much more flexible.

HTML5 Boilerplate

Progressive Enhancement and Polyfills made easy

The perfect starting point for all HTML5 standardized website templates. Integrates nicely with any javascript frameworks and optionally comes with a “graceful degradation” library such as modernizr.js, that takes care of displaying your website nicely along older HTML5 incompatible browsers. Also includes elements that often be forgotten in the progress of the web development process, such as favicon, robots.txt, a optimized .htaccess file and miniature iOS homescreen icons. All there, ready to be tweaked and adjusted to your needs.

Build your custom HTML5 Boilerplate now.

Thanks for reading! I hope this compilation of tools has been useful to get you ahead in web development. I know there’s a lot more to be discovered! Tell me if you have a certain favorite web developer tool of your own, which is missing in this list!

1 Comments

Leave a Comment.