npm Directives

"scripts": {
   "build-js": "browserify src/js/script.js | uglifyjs -mc > build/js/script.js",
   "build-css": "cat src/css/*/*.css src/css/*.css | uglifycss > build/css/style.css",
   "build-html": "jade src/jade/*.jade -o build",
   "build": "npm run build-js && npm run build-css && npm run build-html",
   "watch-js": "watchify src/js/script.js -o build/js/script.js -dv",
   "watch-css": "catw src/css/*/*.css src/css/*.css -o build/css/style.css -v",
   "watch-html": "jade src/jade/*.jade -o build -w",
   "watch": "npm run watch-js & npm run watch-css & npm run watch-html",
   "start": "npm run build && cd build; http-server",
   "start-dev": "npm run watch & npm start",
   "postinstall": "npm run build"
 }

I recently replaced my 100 line gulp file with 10 lines of npm directives which have already proven to be simpler and more reliable.

Not happy with the hacks that were piling up in my gulpfile.js I started looking at the alternatives. Makefiles are too magical for me but I haven’t ruled them out completely. For anybody interested in using them I highly recommend James Coglan’s post “Building JavaScript projects with Make”.

Instead I found substack’s post “task automation with npm run” and have liberally copied from it. Because this current project is a static site and not one of my usual Express applications I’ve also added Jade to convert my .jade files to HTML and http-server to serve the site.


Tumblr API & Node.js

function getFacebooks(id) {
   var fb = require('fb')
   fb.setAccessToken(config.facebook.accessToken)
   return new Promise(function (resolve, reject) {
     fb.api(id + '/feed', function (res) {
       if (!res || res.error) return reject(res.error)
       return resolve(res.data.filter(filterFbPost).map(formatFbPost))
     })
   })
}

function getTumblrs(name) {
   var tumblr = require('tumblr.js').createClient(config.tumblr)
   var getPosts = Promise.promisify(tumblr.posts, tumblr)
   return getPosts(name).then(function(data) {
     return data.posts.map(formatTumblrPost)
   })
}

Thank you Tumblr for having the best API documentation I’ve seen in this week of scraping posts from every social media site under the sun. Maintaining an official npm library is an added bonus.

(the differences between scraping from Tumblr and Facebook can be seen above)


Writing About Me

Ryan Smith is an Australasian immigrant, living in Scotland and working for Graphical House where he is a Senior Developer and technology wrangler for money. His interests are many and diverse (owing to his millennial attention span) and some of them include design, photography, hardcore punk and obscure fashion no-one has ever heard of.

His current foci are the functional programming languages — primarily Clojure, Haskell, and if he squints hard enough, Javascript — and he spends his private development time arguing about them at length over the internet. You can read some of his opinions here.

Recently commissioned my copy-writing girlfriend to make up some words about me as part of a series of talk proposals I’m putting together.


Doing Away with Express-Messages

Although I was recently appointed as a maintainer of express-messages by the expressjs organisation I no longer use it any of my projects. There’s a lot I don’t particularly agree with – HTML as strings, lack of support for templating engines and particularly the way it locks you into a structure – but I can’t deny it’s been very useful to me in the past and I hope I can keep it that way for others in the future.

So I’m going to show you what I do instead. Lets get rid of that app.use(require('express-messages')()) and replace it with:

app.use(function (req, res, next) {
  var flash = req.flash()
  res.locals.messages = Object.keys(flash).reduce(function (messages, type) {
    flash[type].forEach(function (message) {
      messages.push({type: type, message: message})
    })
    return messages
  }, [])
  next()
})

What we’re doing here is taking the object of arrays generated by connect-flash and turning it into an array of objects so I don’t have to do any fiddly logic to include it in my templates. If I’m using Jade (my personal favourite) I can do this:

ul.messages
  each message in messages
    li(class="#{message.type}")= message.message

and if I’m using EJS I do this:

<ul class="messages">
  <% messages.forEach(function (message) { %>
    <li class="<%= message.type %>"><%= message.message %></li>
  <% }) %>
</ul>

Now instead of asking express-messages to concatanate some strings into HTML for us to include as a function in our template we get a nice messages array on the locals object that we can include wherever and however we want.


Reading the Problem

Yesterday a friend asked on Twitter if I had any JavaScript/jQuery snippets to “detect that something has scrolled into view and trigger an event”. Pretty easy I thought:

$(window).bind('scroll', function() {
  var $e = $('.some-element')
    , scrolltop = $(window).scrollTop() + $(window).height();
  if (scrolltop > $e.offset().top) {
    console.log('in view');
  } else {
    console.log('not in view');
  }
});

Of course, anybody that actually read the question (unlike me, apparently) would realise that the above snippet doesn’t answer it at all, all we can do with this is constantly log whether or not the element is view. Lets try again:

var currentlyIn = false;
$(window).bind('scroll', function() {
  var inView = ($(this).scrollTop() + $(this).height()) > $('.some-element').offset().top;
  if (inView === currentlyIn) return true;
  $('.some-element').trigger(inView ? 'in-view' : 'out-view');
  currentlyIn = inView;
});

Which – unless you already know what it’s for – is almost as useless as the first attempt. Time for some comments:

var currentlyIn = false; 
// we need somewhere to hold state so that we don't continuously emit events
$(window).bind('scroll', function() {
// bind the scroll event from the window so this function's called when the user scrolls
  var inView = ($(this).scrollTop() + $(this).height()) > $('.some-element').offset().top; 
  // check if the top of the element is less than the bottom of the window
  if (inView === currentlyIn) return true;
  // if the new state is the same as the old then don't do anything
  $('.some-element').trigger(inView ? 'in-view' : 'out-view');
  // 'else' trigger an event depending on whether the element has gone in or out of view
  currentlyIn = inView;
  // update the state
});

Done!

… and then I woke up this morning and realised that I still hadn’t answered the question. (this might explain why I do so poorly in written examinations) While the code would detect when the element comes in from the bottom of the screen, what happens at the top of the viewport? Lets fix that right up and turn it into a little jQuery plugin too:

// the plugin
(function($) {
  var currentlyIn = false
    , $window = $(window);
  $.fn.inViewport = function() {
    var $e = this;
    $window.bind('scroll', function() {
      var aboveBottom = ($window.scrollTop() + $window.height()) > $e.offset().top
        , belowTop = ($window.scrollTop() < ($e.offset().top + $e.outerHeight()))
        , inView = aboveBottom && belowTop; 
      if (inView === currentlyIn) return true;
      $e.trigger(inView ? 'in-view' : 'out-view');
      currentlyIn = inView;
    });
    return this;
  };
}(jQuery));

// and to call it
$('.some-element')
  .inViewport()
  .on('in-view', function() {
    // in view
  })
  .on('out-view', function() {
    // out of view
  });

Overall, quite different from where I started.


A Type Driven Approach to Functional Design

Michael Feathers’ (@mfeathers) “Type Driven Approach to Functional Design” is a perfectly-sized 20 minute talk on how to think about solving design problems in a functional way.

It also serves as a gentle introduction to Haskell’s Type Annotation which I personally find useful even when not working in Haskell, or in languages without proper typing at all! (JavaScript I’m looking at you)


Join Me on My Functional JavaScript Journey

I have some pages, each of these pages has a string called “tags” containing a list of comma-separated tags. What I need is a way of grabbing all of these tags and counting them:

var allTags = {};
for (var i = 0; i < pages.length; i++) {
  var tags = pages[i].tags.split(', ');
  for (var j = 0; j < tags.length; j++) {
    allTags[tags[j]] = allTags[tags[j]]
      ? allTags[tags[j]]++
      : 1;
  }
}

Okay, that’s not even remotely functional and it’s also pretty ugly. Lets take advantage of Array.reduce to functionify this up a little:

pages.reduce(function (allTags, page) {
  page.tags.split(', ').forEach(function (tag) {
    allTags[tag] = ++allTags[tag] || 1;
  });
  return allTags;
}, {});

That’s a little better! We’re just reducing the pages into an empty object ({} at the end there) that contains the summed-up tags. It works quite well and is looking pretty good but I’m not happy with the nesting of that forEach loop. Lets try again:

pages.reduce(function (allTags, page) {
  return allTags.concat(page.tags.split(', '));
}, []).reduce(function (countedTags, tag) {
  countedTags[tag] = ++countedTags[tag] || 1;
  return countedTags;
}, {});

Much better. On the first pass we go through each page and return an array containing every occurrence of a tag, the second pass simply takes this array and sums up those occurrences.


The Right Solution to the Wrong Problem

So I thought I’d come up with a pretty neat solution to organising a collection of posts in the format “YYYY [title]” by year:

Collection.findAndPopulate({
  title: this.controller
}, function (error, collection) {
  if (error) return callback(error);
  collection.pages = _.filter(collection.pages, function (page) {
    return _.first(page.title.split(' ')) === req.params.year;
  });
  callback(null, collection.pages);
});

Pretty cool right? Underscore is great when working with lists. However, a few hours after pushing the new code to production I realised (while in the shower) I could’ve skipped the Underscore and just done:

Page.findAndPopulate({
  title: new RegExp('^' + req.params.year),
  collection: this.controller
}, callback);

Technical Papers

I have many dozens of technical papers saved to my hard drive but I thought I’d open up with some links to a selection of great papers I found from Rasmus Anderson’s Twitter:

Of these already great papers, Joe Armstrong’s thesis “Making reliable distributed systems in the presence of software errors” is my stand-out favourite. Written in a clear, concise manner it defines the problems he and his team were facing and goes on — through it’s nearly 300 pages — to solve each of them. I could (and probably should) dedicate an entire post to this paper alone.