A web developer’s favorite tools

Like most of us these days, I spend a lot of time my time on my computer.  I build web apps for a living, and my work involves writing/debugging code, managing servers, doing design, and many other miscellaneous tasks. I’m always trying new apps I hear about from friends or in communities like Hacker News and Twitter, hoping to ease them into my workflow in a way that makes me more a more efficient developer.  I want to share four of these apps that help me tremendously almost every day.

Charleshttps://www.charlesproxy.com/

Screenshot of Charles, inspecting a Twitter post

Charles is a proxy that inserts itself between the programs on your computer and the web, and lets you inspect pretty much all the communication that happens between those programs and the outside world.  Here are some of my favorite features:

  • Easy-to-navigate interface that shows you request and response headers and bodies
  • JSON and XML data are formatted into easily navigatable tree views
  • You can modify and replay requests
  • Simulate slow connections with connection throttling
  • Supports SSL connections

I really can’t say enough good things about Charles – it’s one of my most important debugging tools because it allows you to treat a system like a black box, and very quickly get an answer to the question of “what comes out when this goes in?” 

Here are some interesting uses I’ve found for it:

  • When you’re developing a webapp locally, everything will naturally be very fast, since you have practically zero lag between your browser and the server.  I’ve used Charles to simulate slow connections to test features like a progress bar for a file uploader.
  • When I was trying to figure out how a certain iPhone app worked, I used Charles to sniff the interactions between my iPhone and the web.  This actually showed me that the app was receiving an entire SQLite database on each request – a very smart/interesting strategy! (We’ll leave that for a future blog post ;))

Again, I can’t say enough good things about Charles.  If you do any sort of web development, it’s a must-have.

MacVim –https://code.google.com/p/macvim/

Screenshot of MacVim as I wrote this blog post

I couldn’t not mention vi 🙂 For the uninitiated, vi is one of the oldest text editors still in existence, and my mentioning MacVim (the GUI’d OS X version) pretty much guarantees that my nerdiness will be cemented in the annals of the internet for eternity.  I use lots of text editors and IDEs (RubyMine, Netbeans, Flash Builder, etc.) and I have vi keybindings installed in all of them, but nothing compares to the original.  I always have 10+ tabs open in MacVim holding the miscellaneous text editing tasks I do day-to-day (like writing this blog post, for instance).  Anyway, I won’t go on about it – if you’re a vi fan and a Mac user, you probably already have MacVim installed.

FluidApp – https://fluidapp.com/

Screenshot of FluidApp being used to create a GMail app

FluidApp is a very handy tool for creating Site Specific Browsers (SSBs).  I always have my GMail SSB open, and have used FluidApp for other webapps like Google Docs and the Amazon EC2 Console.  It’s hard to grasp how useful this is at first, but treating your webmail and other favorite webapps as native applications can have a significant and positive impact on your workflow.  The main reasons are that you spend less time jumping around tabs in your browser and because your SSB is sandboxed, so if it crashes or if your browser crashes, the other is protected.  Highly recommended.

DigitalColor Meter

Screenshot of Digital Color Meter

DigitalColor Meter is actually built into OS X, I think; I forgot that I never had to download it.  I’ll mention it very quickly, since it is one of the most useful tools I use.

I’m not a great designer but I do a lot of UI work because I enjoy it, and because it usually makes things go faster.  DigitalColor Meter is a great little utility that can tell you the exact color of a pixel in RGB, HEX, and several other representations.  It helps me quickly match colors for graphics and HTML/CSS without opening up Photoshop or digging through Firebug.  It’s very lightweight and stays out of your way if you want to leave it running all the time.

Conclusion

I love finding new tools that make the hours I spend in front of my computer more enjoyable.  I have high hopes that StackSocial will become a vibrant community where it’s easy and fun for people to share their favorite apps with each other.  Until then, if you’re itching to tell me about a favorite app of yours, why don’t you post a response to this blog post or leave a quick note in the comments 🙂

Be First to Comment

Leave a Reply