We're live-coding on Twitch! Join us!
Modern Javascript Tools and the Stories Behind Them

Modern Javascript Tools and the Stories Behind Them

So what you are about to read was never supposed to exist at all. I basically accidentally wrote it (and I swear I didn’t intend this article to be this way), but originally I wanted it to be a listicle. You know: “The 25 Most Awkward Cat Sleeping Positions”, “the 10 best easter eggs by google”, “10 things I hate about you”, et cetera.

This article would have been: “21 MEAN stack tools” or “21 Tools for modern Javascript Development”. When I dug into the research phase I did what any normal guy would do… sent out some emails to figure out how to write it. One of the emails that came back and changed what I thought the article should be:

Response from John Papa:

I think I’d first suggest you step back and ask what it is you want folks to walk away with. It seems like you want them to know the right combo of tools that make working with MEAN most productive. If so, then a list is OK, but telling them what each thing does for them (What’s In It For Me – WIIFM) is important. Good luck!

John Papa (@john_papa) in case you didn’t know is an amazing developer. He is currently an "evangelist on the loose” after spending more than a few seasons with Microsoft, and is one of the top guys out there in regards to developing Single Page Applications. Plus he’s a tremendous speaker.

So Based on John’s advice I went a different route and decided to get the stories of how some of the best tools came to be and then some NOT "straight-off-the-shelf" use that would answer that question: “What’s In It For Me?” My aim is that you might find something that will make you more productive or help you better make use of the tools… and in the process find out where they came from.


The missing package manager for OS X

Find it here: brew.sh


Description: Homebrew is a tool that saves you lots of time when downloading those miscellaneous programs that Apple skipped for whatever reason.

better.dev Get Started w/ JavaScript for free!

Max Howell (@mxcl )responded back to tell a little bit about how Homebrew came about and give us some other goodies:

“[homebrew came about when] I was developing cross platform desktop software for Last.fm in London and had to compile various dependencies in different configurations. I was using MacPorts, but customizing it was hard, it wasn’t designed for it. So I made a small set of ruby scripts to make it easy to compile software in various configurations in various places from various sources." "I’d used a lot of package managers and my main beef always came down to how opaque they were. They were generally easy to use, but nobody knew how they worked: what they were doing behind those commands: how to fix problems if they occurred… So I made Homebrew the opposite. You can literally install something in the Cellar directory manually and then you have a package installed. If you were determined you could do everything Homebrew does with plain shell tooling. Being determined to do this led to other useful attributes and gives the user flexibility and power should they want it.

What is Max’s favorite thing about Homebrew?

"I think not many people realize that brew can be installed anywhere and then you have a separate sandbox. You can install multiple copies of it, it just works. And you can modify the formula yourself and commit any changes you make locally, when you then brew update your changes are merged with any upstream changes. So you could change a formula to add some special configuration flag only you care about and it will persist even when that formula is updated to new versions upstream."


“the Streaming Build System”

Find it Here: gulpjs.com


Description: Gulp has been covered all over the place including: Scotch.io , because its an amazing tool. Gulp takes care of all sorts of task automation, and handling of pesky things that you don’t want to deal with. Check out this handy list of tools/ plugins for gulp: tools/plugins

Eric Schoffstall (@contrahacks) explained the awesome story of how gulp came to be and a couple of little tricks:

"I was eating a burger with my squad (@funkytek / @terinjokes) in San Francisco and we were talking about all of the bugs introduced in grunt 4 and the idea of an asset pipeline with streams came to me. On the 4th of July I was out all night and when I got home I wrote 30 lines of code to prove the idea out, and that's how it all started."

[My favorite thing: ] "The performance and small API surface”…[also] "You can use gulp to serve and process files dynamically on your web server... You can glob everything, then use gulp-if to selectively pass files through to transforms based on extension (DIY web pack)"


The Smartest JavaScript IDE

Find it Here: jetbrains.com/webstorm/


Description: WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex JavaScript development. Being an IDE (and not just a handy text editor) means that WebStorm comes with out-of-the-box support for modern frameworks and lots on integrated tools. Top-notch support for AngularJS, Node.js and Express, WebStorm is ideal for developing MEAN apps.

Eugenia Dubova was kind enough to give a couple of tidbits about WebStorm:

"Features you’ll love: WebStorm has a built-in REST Client that makes testing RESTful APIs a breeze. Go to Tools | Test RESTful APIs Web Service. Enter the URL where your app is running and the path, select the HTTP method, and specify Headers, Request parameters or Request body. The just click Run to send a request and get the reply.

Since WebStorm has a built-in debugger both for client-side JavaScript and Node.js, you can debug your app from end-to-end. Start a Node.js debug session and simultaneously run a JavaScript debug. Put breakpoints in your code, start up the required scenario and WebStorm will stop at breakpoints both in the client-side code and in Node.js code."

Some Goodies: We have a nice video tutorial on building a MEAN app in WebStorm: MEAN App As well as a blog post on AngularJS workflow in WebStorm: Angularjs WorkFlow

and Here’s the stuff I get geeked out about… Live templates: Live Templates plugins (webstorm > preferences > plugins)


[hilariously named] A command Line Shell for the 90s

Find it here: fishshell.com


Description: Fish is a command line shell that makes using Terminal infinitely more user-friendly. Don’t be fooled by the date the project started (or the tagline), the shell is a wonderful tool that can help most anyone.

Axel Liljencrantz is no longer the primary maintainer but he was kind enough to talk about the origins and give us some of those pro tips that developers love to have.

"It started out with me being frustrated that terminal handling in other shells was kind of crappy and wanting to make a nicer UI. I learned a lot about the possibilites and limitations of terminal handling. I tried for a while to add these improvements to bash, but the code base of bash was sufficiently arcane and hairy that I gave up. After that, I started playing around with various other ideas that I had for an ideal shell, including tab completion descriptions, sharing environment variables between instances and a simpler more consistent syntax without most of the shellscripting gotchas of the Bourne syntax."

“[The things I love...] I love universal variables. Universal variables make configuring your shell much easier. Run 'set -Ux EDITOR emacs' to set emacs as your default editor in all current and future fish instances. The value is persisted on disk and survives across reboots, etc. It's a much nicer workflow than having to append a line to some config file…. Similarly, the workflow for creating a shellscript function is much simpler. Write 'funced foo' on the cli to edit a shellscript function. Once you're happy with what it does, write 'funcsave foo' to persist it to disk. All other fish instances will have access to the function at once!"

iTerm 2

a terminal emulator for Mac os x thal does amazing things

Find it here: iterm2.com


Description: Iterm2 are fantastic replacements for your boring lazy bash terminal that you are currently using.

George Nachman (@gnachman) is a current Google Engineer and fantastically interesting Developer (Great interview here ). George gave us the skinny about the project:

"The origin: I was frustrated with Terminal." "All I wanted was to switch tabs like in a browser with Cmd+Number, but it didn't support that. I found an open-source alternative called iTerm. It had the feature I needed, but it had some bugs. The worst one was that it was really slow to resize the window: it could take multiple minutes! So I wrote a few patches and sent them in, but never heard back because the project had just been abandoned. I decided it would make a nice Google 20% project. I forked their code base and started making changes, fixing the performance issue and a couple other things that annoyed me. One day, people started filing bugs against my project! I was pretty surprised, but I rolled with it. I figured I could use the bugs fixed as much as anyone. About three months later, TUAW ran this article: Article: Early Development and then I knew I was in it for good :). I started treating it more seriously and aimed for a 1.0 release, which the original iTerm had never enjoyed in its 10 years of life. A year and change later, all the bugs I knew about were fixed and 1.0 came out. I really enjoyed working on it as a distraction from real life, and users seemed to really appreciate what I was doing, so I just kept at it. The more time I spent on it the more cool ideas appeared, and it's been self-sustaining. I learned Objective-C from doing this, and am now an iOS developer professionally. It's been an extremely rewarding experience!"

George’s Favorite part: the tmux integration explained here: TMUX integration. "You can connect to a remote host over ssh and get native windows using tmux. It totally changes how you work. I liked the idea of tmux but I prefer native UIs over tmux's virtualized windows. Plus, tmux steals ^B (or some other key) for its command key and I had no shortcuts I could sacrifice. I proposed the idea of a low-level protocol to their tmux maintainer Nicholas Marriott. We worked together to get the changes into tmux. It rained for most of a two-week vacation I took in Brazil, and that's where the iTerm2 changes were made. Many of the big features were written on vacation, which is awesome for me because it reminds me of my vacations to use them! Step back in time? Ireland. Undo session close? Australia. Split panes? Cancun. Coding on the beach is definitely my favorite pastime."

George's Mind-blowing things about iterm2: "a bunch of features in the nightly build are pretty awesome. A) Session restoration “session restoration”) . This is off by default because it's so new, but you can turn it on in advanced prefs. The idea is that instead of running your shell as a child process of iTerm2, instead we spawn a server, and it runs your shell. If iTerm2 crashes or upgrades, the server doesn't die. It's like tmux without tmux. With the OS's window restoration feature, the contents of the window get saved, and iTerm2 marries that up with the running shell process, so you lose literally none of your work on crash/upgrade/force quit (not that it crashes very often, but still :)

B) Shell integration. This does a lot of stuff, but the easiest to explain mind-blowing feature is that we know where your shell prompt is, so you can navigate from prompt to prompt with cmd-shift-up/down arrow. Makes it easy to find the start of the output of a big command. The other things it enables are, for example, a keyboard shortcut to select the output of the last command. And we know which working directory you're in at all times, even if you're ssh'ed to a remote machine. And we know the hostname. So you can drag-drop files to upload or download them. And you can automatically change color schemes based on the current username, hostname, or directory. This enables the "Open Quickly" feature which lets you search all your sessions by all these things, which makes navigation much easier if you have lots of tabs open. Or if you have a long-running job, we know when it ends (because we know when the shell prompt comes back) so you can ask to get notified. There's a lot more coming here. I've only scratched the surface of what's possible. C) You can show images--even animated GIFs--inline in your terminal.http://iterm2.com/images.html Need I say more? D) There's a password manager! I got so fed up with typing my password over and over. It integrates with triggers, so they can detect a password prompt and automatically pop open the password manager. It makes sure you're actually at a password prompt before sending a password so it doesn't accidentally get leaked. E) If you accidentally close a session, tab, or window, you get five seconds to undo closing it with Cmd-Z. This was inspired by Gmail's "undo send" feature. It's a real lifesaver! F) Favorite easter egg? There's a Find Cursor feature (Cmd-/) that shows you where your cursor went since it can be hard to find on a really big monitor. Try it in the nightly build to see how it looks, it's super fun now.


An ultra-fast HTML5 build tool

Find it here: brunch.io


Description: Brunch does a lot of things… (check out the site to see what I’m talking about) the best comparison would be to pretend your project is Daniel from Karate Kid … Brunch would be your Mr. Miyagi.

Paul Miller (@paulmillr) straight from Singapore told us about the build and his favorite parts:

" @__tosh and @nikgraf created the tool in Jan 2011. It was a complicated builder totally different from what it is today. I saw the potential then and joined the team in Sep. I worked for a few months on the tool (even full-time!), re-did the architecture from scratch and released 1.0 in Mar 2012. That was the point when Brunch stared gaining some traction."

“[My favorite part has got to be the] Simplicity. It only has 3 commands: “Create, build, deploy”. The config files are super short. No complicated task runners, no complex configuration for users. The second main factor is probably speed. It’s faster than any other tool. [We have some cool examples up:] [Examples!]19


Reload, Automatically

Find it here: nodemon.io


Description: Nodemon keeps the server alive! It’s a tool for Nodejs that will restart your server for you automatically. It was written by Remy Sharp (@rem) who is outrageously talented and has had his hands in some big time projects like: JSBin. Check out this article for a tear jerker: Article … makes me want to seek out and destroy some of the hidden jerks on the internet.

Remy gave the complete story of Nodemon plus a couple of extras to help out your work flow:

"My historical server development consisted of Perl and Apache (and then some PHP and Apache), and since Apache would read the file off disk on request, the development cycle was: save code, change to browser, refresh browser. I saw Ryan's introduction to Node back in September 2009 and started writing (small) apps right away, but the big slow down was always forgetting to stop and start the server.

Nodemon was an evening's worth of hacking to simply wrap the node process, watch for files, and then handle restarts (the first version was actually incredibly simple ) compared to today's code). This wasn't the first restarter, but it certainly was one of the early apps, and for some reason or another (possibly because it's been around for now coming on 4 years) it's grown to be many people's default dev tool for running node."

The coolest thing: "The coolest thing, for me, is the lack of configuration needed to use nodemon. I knew there were restarter apps that required you to modify your code (back in 2010) but for me, I wanted something that was unobtrusive, and smart enough to "just work" out the box. Second after that is the --exec (or -x) option, that lets you specify what to run (instead of node), which opens the doors up to all kinds of usage (as proven by the many different and whacky issues that get raised!)."

"Aside from the -x option, there's two (documented) features that I think are pretty useful but probably overlooked. The first, not that interesting, but nodemon respects the -- (dash-dash) argument - which tells nodemon not to slurp up the arguments after the dash-dash. Particularly useful if your app arguments overlap with nodemon’s. The second, which I use on a handful of my own apps is a nodemon.json file with Apple's native notification system. So when nodemon restarts my project, I get an OS level notification to say my app has restarted, and what caused the restart. The nodemon.json looks like this:

{ "events": { "_restart": "osascript -e 'display notification \"JS Bin restarted due to:\n'$FILENAME'\" with title \"nodemon\"'" }, }


Supercharge your API workflow

Find it here: getpostman.com


Description: Postman (a favorite of Chris @sevilayha) is a tool to help you "Build, test, and document your APIs faster.” No denying it will help you get your API’s ship shape quicker than you could without it. It’s also worth noting that their website is beautiful too.

Abhinav Asthana (@a85) shot me an email back with how POSTman came about and with some utilities that the pro’s use.

"Postman started off as a simple side project. I had been working with APIs since early 2010. I was at Yahoo as an intern with my co-founder, Ankit, who had just joined as an employee. We were working on a front end for a service that managed data for Yahoo properties through an API. I was not very happy with the tools that were available for testing APIs then; curl commands were scary and there was a lot of back and forth between us and the API developers about how the API works. This was a rapidly changing API and mistakes were quite frequent. After my Yahoo experience, I started another company where I worked on the front end as well as the back end. When our team started expanding, we faced problems such as sharing API documentation and testing APIs. I started looking for existing tools to make our lives easier but did not like anything in particular."

"The key feature in the first version of Postman was the request history that let you go back in time and replay a request. Postman Collections came in soon later. Since then, Postman has grown through word of mouth with great support from the developer community. The feedback was very strong. Ankit and I then got together to add authentication features like Basic Auth, OAuth 1.0. The use cases that Postman solved kept exploding even without us knowing it. We were amazed by the response and then started looking deeper into the underlying problems with API development and that led to the founding of the company when Abhijit joined us in August 2014."

“[The] Coolest thing about Postman: For me it would be Postman Collections. Collections let you organise your API calls and document them for future use. You can store workflows as well. Postman has several other features that complement Collections. More details about Collections here: Collections . Cool features that you most people might not have explored yet: Postman has a powerful testing sandbox that can help users write automated API tests super quickly. Postman goes way beyond a REST client! These tests that can be run using our command line companion tool called newman. Details about newman are available here: Newman

YOUTUBE: https://www.youtube.com/watch?v=h5p90FvJo0Y

Like this article? Follow @jppope on Twitter