A Simple gulp Plugin

Photo of Elephant by James Hammond on Unsplash

gulp is the new black. It’s quickly supplanting Grunt for JavaScript builds because it’s faster and simpler. When we replaced our Gruntfile with a gulpfile on one of our projects, our build script sped up by an order of magnitude and became much more comprehensible.

Because gulp is so new, its suite of plugins is much smaller.  Granted it’s easy to use many basic node modules without a gulp plugin, like:

var rimraf = require('rimraf');
gulp.task('clean', function (cb) {
    rimraf('./build', cb);
});

But in many other cases a plugin either saves code duplication between projects or makes it simpler to perform a conventional action. How hard is it to create a gulp plugin?

(more…)

JavaScript Isolation with Nodeenv

Image of ice fisher all alone—Photo by Carlos "Grury" Santos on Unsplash

I do a lot of Python work, and I’m a huge fan of virtualenv, which allows you to set up a completely isolated Python environment. This is hugely helpful to keep various dependencies from multiple projects from clobbering one another. It’s so helpful, that when I work in pretty much any other language, I miss having the ability to isolate things so nicely.

Since a lot of the Python work I do is also Web work, I frequently end up doing a lot of Javascript as well. The (relatively) recent appearance of node.js and various development tools based on it has been a great boon, but whenever I’ve had multiple projects using different versions of the same tool, I’ve craved a way to keep my Javascript environments as nicely separated as my Python environments. If only there was something like virtualenv, but for node.js…

In fact there are several ways such things, but my favorite by far is a project called nodeenv. It’s written in Python, which might seem a bit strange until you realize that it’s written specifically to integrate nicely with virtualenv.

Here’s how you use it. Or at least how I use it.

First create a virtualenv. Here I’m using virtualenvwrapper, but of course you can use vanilla virtualenv if you prefer:

$ mkproject nodeenv-test
New python executable in nodeenv-test/bin/python
Installing setuptools............done.
Installing pip...............done.
Creating /home/funsize/code/nodeenv-test
Setting project for nodeenv-test to /home/funsize/code/nodeenv-test

This will create a project directory, create a virtualenv, install pip into the virtualenv, activate it, and switch my current working directory to the project directory just created.

Now we install nodeenv into the virtualenv:

$ pip install nodeenv

This installs a command called, unsurprisingly, "nodeenv", which we now run with the -p flag, which tells it to integrate with the current python virtualenv:

$ nodenv -p
 * Install node.js (0.10.26) ... done.
 * Appending nodeenv settings to /home/funsize/.virtualenvs/nodeenv-test/bin/activate

Everything will probably work fine at this point, but just to be safe, I like to reset the virtualenv by deactivating and reactivating it:

$ deactivate
$ workon nodeenv-test

(Again, I’m using virtualenvwrapper, which may or may not be to your taste).

At this point we are working in an isolated environment for both Python and Node.js. I can install libraries for Python using pip, or for Node using npm -g and they will not interact with my system Python libraries or Node libraries in any way. Some of you may recall that I’m a big fan of bower, so I can install it like so:

$ npm install -g bower

Bower has a bunch of dependencies, which npm takes care of for us, and all of those get installed into our isolated environment. They can’t interfere with any of our other projects in any way. Bliss!

Ok, so it’s not quite all sunshine and roses. nodeenv needs a bunch of dependencies to work, though nothing too outlandish (stuff like a C compiler, curl, etc.). This isn’t too onerous, and anyone who can install software packages on their machine should be able to get it working on pretty much any Unix flavor without too much trouble. I have not, much to my disappointment, been able to get it to work on Windows as of yet, even with all of the relevant dependencies installed. It appears to have something to do with the way Windows handles command parsing and/or escaping. If anyone out there has gotten it running on Windows, please let me know in the comments. With those caveats, though, nodeenv really is pretty fantastic.

Now this is the kind of thing that you may not really appreciate until you use it, so I encourage all of you out there to give this a shot. It really is worth your time. Enjoy!

Accelerated, Lower Frustration Web Development with BrowserSync

Photo of Raven by Kasturi Roy on Unsplash

With apologies to Mr. Poe:

I was fuming in frustration, sitting clicking at my station,
I’ll spare you some narration, but I was getting pretty sore.
‘Surely there must be some method, whereby changes are detected,
And perhaps then be injected into my page’s DOM!’, I swore.
‘Some way to edit CSS without it being such a chore,
And click Refresh nevermore.’

So I then took up the challenge, and began a quest for knowledge
on this strange mysterious thing for which I’d searched some times before.
But amidst auto-refresh plugins, and bookmarklets by the dozen,
Nothing did I find which would my page’s state restore.
Then I chanced upon a newsfeed and this here did it implore:
“BrowserSync, you will adore.”

— not quite Edgar Allen Poe

BrowserSync is a nifty development tool for editing and/or testing websites. It’s written in JavaScript, on top of node.js, so you install it using npm (perhaps inside a nodeenv ). After installing it, you start it up something like this:

(more…)

Meteor: Working with Accounts

Photo of night sky by Kristopher Roller on Unsplash

In my last blog post I had just discovered the Meteor JavaScript-based web application platform. I have had a little more time to play with it and I am still having a lot of fun with it. On a personal project I was working on, I needed to add user accounts. The support for Accounts in the Meteor platform has left me incredibly impressed. Various accounts packages allow for the addition of account handling on the backend and on the user interface with minimal effort. Adding in support for popular authentication methods (such as Google, Facebook, Twitter, etc.) consists of adding a new accounts package.

To demonstrate, I’m going to take the simple chat application that I built in the Meteor Introduction post and extend it to use accounts instead of using a simple text input to specify the message user.

(more…)