Tools We Like v3

IDEO New York's wildcard developer dishes up the best tech for everything from building mobile apps to testing APIs.

July 24, 2014
Reading Time
4 minutes

The other day at lunch I was talking my colleague’s ear off about various technologies I like to use and why I like to use them. I decided to compile a list, which I shared with all my co-workers at IDEO New York. Why stop there? All of these technologies have helped me immensely, so for the benefit of all you Labs readers, here are my favorite tools.

I’ve grouped them together so you can jump straight to what interests you: tools to build a dynamic mobile app, tools to create and deploy a web server, great UX design frameworks, and generally helpful workflow utilities.

Dynamic Mobile App technologies: AngularJS, Ionic, and Firebase
Used together, these three technologies provide a straightforward way to get a dynamic mobile app up and running.

AngularJS is a revolutionary library because it introduces dependency injection into a front-end framework, which allows front-end builds to be extremely modular and lets you seamlessly inject modules into other modules. The framework is divided into three main components: directives, controllers, and services. Instead of using the built-in router I like to use UI-Router for additional flexibility. A great resource for learning more about Angular is ng-book.

Ionic is a framework built on Angular that provides an easy way to create mobile applications. Its docs are quite friendly and it contains a very complete set of pre-built components. Check out the getting started guide.

Firebase is the go-to when you want BaaS (backend as a service). It has great documentation, works with a multitude of different languages, and comes prepackaged with authentication. It’s a wrapper for MongoDB, which supports a document tree model (as opposed to a relational store model like SQL). This means that all the data you save is branched off of a root node. So, for example, you might have the first children be ‘clients’, ‘shipments’, and ‘products’, and then underneath let’s say the ‘clients’ node would a child node identified by the client id. Under client id would be nodes that pertain to that particular client, like ‘shipments’ which could contain an array of ‘shipment ids’. The one issue with saving information in this fashion is that children nodes cannot be joined like rows can in relational stores, so the relationships must be saved in multiple places within the tree, which results in data being written multiple times on save (denormalizing data). This works fine, with the assumption that the client will do significantly more database reads than writes (which is almost always the case).

Web Server technologies: Node and Heroku
This pair allows anyone to create and deploy a web server.

What makes Node so powerful for writing a server is its package manager, npm. Type what you would like the server to control in the npm search bar: chances are, someone has already created a library to do exactly what you want. Each library usually comes with a README on how to set up the server and a snippet of example code to get you started. By using multiple packages from npm and a little bit of copy/paste wizardry, nearly anything can be accomplished.

Once you have your Node server in a Git repository, getting it on the web is easy using Heroku—all it takes is two command-line commands: “heroku create <nameOfApplication>” and “git push heroku master.” Then your node server will be available at <nameOfApplication>

UX design frameworks: Bootstrap, Foundation, and jQuery
Three libraries that have proved extremely useful.

Boostrap creates a great skeleton and components to quickly put together a front-end look and feel through a combination of class name and nested HTML structure. When you assign a class to an HTML component, Bootstrap assigns it some CSS and JavaScript to introduce the minimal look and feel of the page. On WrapBootstrap, you can find a lot of themes that have been built on top of Bootstrap, so you can write HTML once and then mask it with different themes.

Rather than designing around the “mobile also” design paradigm, Foundation focuses on “mobile first.” Look to this framework over Bootstrap if your main focus is mobile, but keep in mind that there is a smaller community around Foundation, so you won’t find as much support or as many themes.

jQuery is an extremely simple library that makes DOM manipulation a breeze. It was built on JavaScript, and it took what people hated about JavaScript and fixed it. It is extremely easy to select a DOM element through class or ID and then invoke a method on the selected element(s). It’s perfect for drag and drop, dynamic styling, and showing and hiding elements. This library is what got me started with coding, because you can accomplish so much by writing just one or two lines of code. Check out some demos to see its power. JQM (jquery mobile) is great for quick and dirty mobile prototypes built with jQuery.

A selection of great tools to help streamline your workflow.

Divvy should just come standard on OS X. It allows you create shortcuts to “arrangle” (arrange/wrangle) your windows into quadrants, halves, or however you’d like to tile them.

Postman is a Chrome add-on that lets you test any sort of REST API.

Kimono turns any website into an API. When you visit a page that you want to scrape data from, you can simply click on a bookmark to translate the document structure into an API that can update as often as 15 times a minute!

Using Chrome Developer Tools, you can right click and choose “inspect element” to do everything from typing jQuery or JavaScript code in the console to inspecting how your HTML rendered. You can also see what resources are fetched from the network view, change the CSS live in the Elements tab, and profile the performance of the Chrome V8 engine.

Sublime Text 3 is a great text editor with many plug-ins that can help with syntax highlighting, auto-completion, code formatting, and file navigation.

Kuler by Adobe is a great place to find color swatches for inspiration or roll your own color swatch using math-based color principals.

Google Trends is an awesome tool that I use to find out what frameworks and libraries are gaining or losing traction within the coding community. If a tool is on the way out, it might not be a good time to start learning about it.

Diigo is a browser add-on for link sharing that lets teams compile links under descriptive tags. If you highlight text or media within the linked page, your highlighting will appear when other people open the link.

What are your favorites? Send me a tweet (or comment below) to add to the list or find out more about any of the tools I’ve mentioned.