Six Web Development Tools You Might Not Know About

galvanize-students

Web Development Tools

Even the most experienced developers often get caught in a programming pickle. Thankfully, there’s a wealth of online resources and tools to help you out when you get stuck. To get a better idea of the some of the lesser-known resources, I spoke with the the Galvanize Full Stack team about some of their favorite tools that other programmers might not know about.

Check out these six awesome tools and level up your skills:

1. Reflex

Reflex is a small tool to watch a directory and rerun a command when certain files change. It’s great for automatically running compile/lint/test tasks and for reloading your application when the code changes.

Caught your interest, didn’t I? Take a look at the awesome stuff Reflex does:

  • Reflex has no dependencies. No need to install Ruby or anything like that.
  • Reflex uses an appropriate file watching mechanism to watch for changes efficiently on your platform.
  • Reflex gives your command the name of the file that changed.
  • No DSL to learn — just give it a shell command.
  • No plugins.
  • Not tied to any language, framework, workflow, or editor.

Contributed by Peter Grunde, Software Developer at Galvanize. 

2. Chrome Tips & Tricks

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. You can use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

The DevTools are organized into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you work with a specific type of page or app information, including DOMelements, resources, and sources.

Here are the eight main groups of tools available view Developer Tools:

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

Contributed by Jonathan Dinu, VP of Academic Excellence at Galvanize. 

3. Tree

Tree is a recursive directory listing command that produces a depth indented listing of files, which is colorized ala dircolors if the LS_COLORS environment variable is set and output is to tty.

Tree has been ported and reported to work under the following operating systems: Linux, FreeBSD, OS X, Solaris, HP/UX, Cygwin, HP Nonstop and OS/2.

Here’s an example of what Tree looks like:

Screen Shot on 2015-06-30 at 18-27-42

Contributed by Jeff Dean, Head of Full Stack at Galvanize. 

4. xScope

What about frontend developers? One example of an incredibly effective set of tools for designers and web developers on the Mac is xScope. xScope is an app that has a wide array of features, and allows you to layout and measure elements on screen in an incredibly “Mac-Like” way. The seven included tools offer everything from color sampling to pixel spacing, and everything in between.

The 7 tools available are:

  • Dimensions
  • Rulers
  • Loupe
  • Guides
  • Frames
  • Crosshair
  • Screens

Contributed by Jeff Dean, Head of Full Stack at Galvanize. 

5. Mou

Mou is a Markdown editor for developers, on Mac OS X. It features live preview, sync scroll, auto save, powerful actions, auto pair, custom themes and CSS, HTML and PDF export, enhanced CJK support and more.

Screen Shot on 2015-06-30 at 16-37-38

Contributed by Aaron Gray, Full Stack Instructor at Galvanize.

6. Paw

Paw is a full-featured and beautifully designed Mac app that makes interaction with REST services delightful. Whether you’re an API maker or consumer, Paw helps you build HTTP requests, inspect the server’s response and even generate client code.

  • Code Generation

Build your HTTP requests with Paw, try them out, and just copy/paste code in your app.

  • Dynamic Values

Unleash your capabilities. Access data from previous responses, so you can send back whatever the server returned. Compute hashes, authentication tokens, signatures, randomize data for testing, do some maths, or anything you want.

  • Environments

Parametrize your Requests with Environment Variables, then seamlessly switch between Environments to give differents values to your variables. Ideal to set up production or test servers, or have multiple users profiles.

  • Formatters

Time matters. Paw helps you build HTTP requests quickly thanks to formatters that matches the kind of input you need.

  • Extensions

You can also extend the already broad features Paw offers through easy to build JavaScript-based Extensions. If want to generate client code for your favorite yet exotic language or compute custom authentication schemes on the fly, extensions can make this happen.

Contributed by Peter Grunde, Software Developer at Galvanize. 

If you are a developer, you can never have too many resources. We also found this great list of 100 Programming Tools.

Want more web developer tutorials and how-to’s? Subscribe to our developer newsletter.