NPM as an automated build system.

I hate having to set up complicated environments. I like JavaScript/Front End Development environments to be:

  1. Easy to understand and follow along for everyone on the team.
  2. Quick to get running and make changes.
  3. Free of having to learn new domain specific or pseudo languages for simple building.

Other platforms, Java or .NET, benefit from IDEs because they follow a predefined path and have a set of best practices defined into the language. The ugliness of JavaScript is why it’s powerful. But it can also lead to a lot of unnecessary reinventing the wheel.

Using NPM to use simpleton and replaceable tools keeps my projects fitting those three points above.

NPM is amazing and powerful. I’ve built three major projects now without Grunt or Gulp, using only NPM and locally installed modules.

The run command lets you run a locally installed module from the command line.

This runs “mocha test.js”

Scripts can also call one another.

In this previous example, “npm run check” will execute lint and test.

You can also use other NPM modules to run and watch the app.

For instance, in the following example, I use babel to convert and bundle the files after the lint and test. Then I run nodemon, which I have executing a custom script. Nodemon is also told to ignore the public directory where babel places the bundle. (I learned the fun way that this creates an infinite loop, if you don’t ignore it!)

Now when I run “npm run auto-start” it won’t just run the lint and tests and launch the app, nodemon will also watch for changes, linting, testing and restarting each time a change is detected.

Building from NPM is incredibly powerful. When I need to change the files or directories, I can do it inside the string. If I want to change the linter, I can change the dependency, and the script for “lint’s” value. Run “npm install” to update the dependencies. Then all the existing “npm run lint” calls will call the new linter. There’s only a tiny amount of configuration and no coding, just a JSON file describing what I want to happen.

Multiple calls to the same NPM module are possible, while using a different command to have different options.

Finally, the best part about building with NPM way: All that someone on the team needs to do to include this automation or build this app on another machine is clone the files and run “npm install” to get it up and running (if they have Node installed).

When won’t automated building with NPM work? Well, sometimes I have more complex builds, where one area of code might use one set of tools and another area uses some other tools. Some operations are easier to do asynchronously, rather than through piping stdout. What I’ve found myself doing more, is using NPM for my smaller personal modules and I’m still using grunt for my large projects.

Thanks for reading, if you have any ideas, concerns, or complaints please let me know on twitter @StevenLacks or in the comments.

Chaining and other Practical Uses for Promises for JavaScript (ECMAScript6, ES2015)

Repo on Github here.

Promises are cool. The best source for Promise API basics is still the API documentation on MDN. Well here’s some news. Promises are awesome and really easy to work with. That article will teach you all about the built in methods, like “all” and “resolve”, we’re going to go over some useful techniques that are not built into the Promise object.

First, let’s do a simple promise.

What if we want to do something sequentially? Promise.all() waits for all of the promised functions, Promise.race waits for one… but a lot of times, we want to run sequences without losing the benefits of asynchronous code.

Next, let’s make it a bit more complex, with issuing the then in the then. Adding the reseting the counter and using our thenableLoop.

| 0 – Working
| 1 – Working
| 2 – Working
| 3 – Working

This outputs like so:

| 0 – Working
| 1 – Working
* 0 – Working
* 1 – Working
* 2 – Working
* 3 – Working
* 4 – Working
* 5 – Working

You can also pass callbacks as promisables…

That outputs…

| 0 – Still Working
| 1 – Still Working

Keep in mind if we passed in promisable, instead of promisable 2 it would look like this:

| 0 – Still Working
| 1 – Working

Finally, let’s look at binding arguments to the promise…

This outputs:

| 0 – Custom String
| 1 – Custom String

You can have very powerful sequences, with non-blocking IO. This is great for real world applications using ES2015/ES6. You could easily replace our timeouts in these examples with AJAX calls, queries to a datastore, complex DOM interactions, or anything else you might want to ensure is done before executing another set of instructions.

Repo on Github here.

Update: Guatom makes a good point (in the comments below), we’re all more familiar with ES2015 concepts, you can avoid using “bind” by using arrow functions, which keep the context of where the function was called.

T-Mobile Data Usage

Previously, I was on the T-Mobile 1GB plan. Towards the end of the month, I’d always hit 1GB, sometimes a day or two early. I realized that the day or two of lost productivity would be worth upgrading to 3GB… so I did… Now, a day or two before the new month, I’m getting the same warnings and I’m hitting 3GB.

Now, my usage probably has increased a bit, but I doubt by 2GB more… and I’m still on wifi most of the time.

Has anyone else had this experience?

Are these the simplest`Template Strings` in ES6 (JavaScript)?

Instead of a quote, wrap your string in back-ticks ` (on QWERTY this is just above tab, it shares a key with the tilde ~) to make a template string.

Works on: Chrome 41 or greater, Firefox 34 or greater, not currently in IE. Let me know if this is working in the Spartan preview, I’m the biggest windows fan without Win10 installed.

First, let’s check out the console.

Next, in a web page. Here’s a really simple demonstration of the ES6 template string being implemented in the DOM .


ES6/HTML5 Import Demo and Tutorial (Video)

“HTML import” is a well put together way to bring in HTML from other files. It uses minimal JavaScript to make it happen natively, and it’s only a matter of time before someone writes a nice little library on making that happen in a way that appears to be magical for designers.

Mozilla’s not supporting them, but now that I’ve used it, I’m think that this syntax was well thought out and will be easily shimmed. (I know you hate shims, but this is really small and should package nicely.)

First, note that this isn’t going to work serving it locally right from your file system. In other words, you can’t just open your HTML files in the browser from the file explorer. If you don’t know how to set up a server, then this might be a bit too advanced for you anyway. No offense, I still suck at that stuff. (why I work as a front ender!) Continue reading “ES6/HTML5 Import Demo and Tutorial (Video)”

How to Install Firefox Developer Edition on Ubuntu Linux (Debian)

Firefox Developer Edition Logo
Great free dev tool

Firefox developer edition has a lot of cool tools to help web developers, designers, and those who want to build for FirefoxOS.  Of course, on Linux, it’s a little harder to install for those who don’t have a lot of experience in the command line, right now. It’s a really easy install, once you know your way around a bit more. This tutorial is assuming your using default settings in Ubuntu/Lubuntu/Xubuntu.

Go here:

You’ll be presented with various versions available to run in Linux, if you’re using Ubuntu, you’ll want the Debian flavor in either 32- or 64-bit. 32-bit will run on either, so unless you know you’re on 64- bit get the 32-bit. Continue reading “How to Install Firefox Developer Edition on Ubuntu Linux (Debian)”

How do you rate a framework?

This could really be asked of anything. How do you rate a car? How do you rate a programming language?

Wikipedia’s comparison of web frameworks is objective, but useless as a qualitative or meaningful quantitative comparison. It is nice to have dates of last release, but how often are these released? How many people are working on them? Is there any money backing them up?  Is there any interest in big players in keeping these alive and open?  Are they free? Are they open source? How closely do they follow the community goals of the parent language?

How many tutorials are there? How active is the community? What is the frame work used in? How many repos?

I’m not saying that these things need to be put in a chart on Wikipedia or Stack, but we should at least keep these things in mind when discussing them.

What is it good for?

Generally, these aren’t to hard to do one your own.  You can literally Google most of these yourself.

I need some help.

Entry level Developer | HTML and Javascript Programming

Clearwater/Saint Petersburg, FL


Immediate opening for a smart, ambitious HTML programmer looking for a good work environment at Vericle – a fast paced, innovative Internet billing technology company with extraordinary client-centered culture and focus on client relationships.  Vericle offers integrated cloud-based practice management software, billing and revenue cycle management service, and client coaching for maximum profitability, compliance, practice growth, and office efficiency.

If you are motivated by having a role that

  1. has a purpose – you improve healthcare and you help practice owners reach their goals
  2. promotes mastery – you learn and master your skills
  3. offers autonomy – you develop your own ideas on your own time

then Vericle may be the company for you.

You must love HTML/CSS and JavaScript. You must be self-driven and have a capacity to learn quickly without a lot of supervision. You will be responsible for responding to user support requests and user requirement analysis for a state of the art software application.


Day-to-day work involves responding to time-sensitive end-user and internal user requests (tickets), including:

  • Building new custom documentation
  • Working with end-users to gather requirements
  • Analyzing HTML and JavaScript


  • Proficient in HTML,CSS
  • Knowledgeable in JavaScript
  • Good communication skills
  • Good sense of design and layout


  1. College education or equivalent
  2. Recent college graduates welcome – on-the-job training available
  3. No previous experience necessary

Complaints, Revenue, Closings – Comparison of Top Builders

This post isn’t about programming or web development, sorry.

My wife and I are/were looking for a new home.

Ratings for builders are unreliable, all the big ones showed 1.5-3 starts because people are generally happy for a few months, then complain for a couple years, then are content. So it depends more on when they rated. So, I created something a little more objective… but only a little.  I will probably work on law suits and lender ratings next, if I keep interested.

It’s not totally complete, if you have any corrections or missing data, let me know.

Rip off report Revenue 2013 Closings 2013 Complaints/revenew * 10^9 Complaints/closing * 1000
D.R. Horton 15 $6,655,000,000 25161 2.253944403 0.5961607249
Lennar 27 $5,935,000,000 18290 4.549283909 1.476216512
KB 13 $2,097,000,000 7145 6.19933238 1.819454164
Taylor Morrison 12 $2,323,000,000 5829 5.165733965 2.058672156
Meritage 13 $1,834,000,000 5259 7.088331516 2.471952843
Beazer 13 $1,334,000,000 5056 9.745127436 2.571202532
Ryland 33 $2,141,000,000 7027 15.41335824 4.696171908
Pulte 89 $5,680,000,000 17766 15.66901408 5.009568839
K. Hovnanian 46 $2,157,000,000 5927 21.32591562 7.761093302
William Ryan 3 $87,000,000 287 34.48275862 10.45296167
David Weekley 4 $1,120,000,000 ? 3.571428571  ?
Ashton Wood? 0 $734,000,000 2241 ? ?
Del Webb
Ryan 69 ? ?
Maronda 5 ? ?
Centex 24 See Pulte See Pulte

$ Source Continue reading “Complaints, Revenue, Closings – Comparison of Top Builders”