Archive for 'Technology'

Select2 Version 4 loading data remotely

Using select2 version 4
  • Custom data loader
  • Infinite scrolling
  • Setting values programmatically

$.fn.select2.amd.require([
                'select2/data/array',
                'select2/utils'], function(select2ArrayData, select2Utils) {

  var CustomData = function($element, options) {
    CustomData.__super__.constructor.call(this, $element, options);
  };

  select2Utils.Extend(CustomData, select2ArrayData);

  CustomData.prototype.current = function(callback) {
    var $element = this.$element;
    var currentVal = $element.val();
    // - do whatever you need to load the data needed to create data objects

    // callback with array of data objects
    callback([{id: '1', text: 'result 1'}, {id: '3', text: 'result 3'}]); 
  };

  CustomData.prototype.query = function(params, callback) {
    var searchTerm = params.term;
    var page = params.page || 1;

    // - do whatever you need to get your data -

    var resp = {
      // these are your results
      results: [
        {id: '1', text: 'result 1'}, 
        {id: '2', text: 'result 2'}
      ],
      pagination: {
        // this means there are additional pages to load, set to false if not
        more: true 
      }
    };

    callback(resp);
  };

  var attrs = {};

  attrs.dataAdapter = CustomData;
  attrs.ajax = {}; // this trick is important to allow for infinite scrolling

  attrs.multiple = true;


  // the $('.some-select') should return a SELECT element
  var $select = $('.some-select').select2(attrs); 


  // Now suppose you want to set some values on your select2
  // don't forget to add 'option' tags

  var values = ['1', '3'];

  // this step is really important!
  $select.find('option').remove();
  for(var i = 0, len = values.length; i < len; i++) {
    $select.append('<option value="' + values[i] + '" selected="selected"></option>');
  }
  
  // set the values and trigger the change event to select2 knows about it
  $select.val(values).trigger("change"); 

});

Harp – zero-configuration static web server

Getting started with Harp, a static web server that can intelligently serve out Jade, EJS, LESS, CoffeeScript and other such files without any configuration.

If you don’t already have NodeJS, please download and install it: http://nodejs.org/

Run this command to install Harp globally:
> npm install harp -g
Go into whatever directory has the files you want to serve out (your project) and type in:
> harp server
You can now go to the given address in the browser to view the served files. If you are a MAC user, you can add an alias to make using Harp even easier. Type the following in your command-line:
> nano ~/.bash_profile
Add this to the end of that file: alias server=”harp server” Save, close the terminal and re-open. You can now just type in ‘server’ as a command in any directory and it will start a server that will serve out the files from that directory.

For more information about Harp, please visit their site: http://harpjs.com/

NaN…what?

NaN is the only value in Javascript that is not equal to anything, including itself.
if(NaN !== NaN){
  alert("what??? how???  huh???");
}
Therefore, one way you could check if a variable has the value of NaN is to do something like this:
if(yourVar !== yourVar) { // thanks Vigen Sarksyan for this suggestion
  alert("yourVar has a value of NaN");
}
While this will work, it is not recommended as most people will think you wrote this by mistake and assume there is a bug in your code. The correct way to check if a variable contains a NaN is by calling the isNaN function:
if(isNaN(yourVar)) {
  alert("yourVar has a value of NaN");
}
This is much more readable and produces the same result.

Also note the fact that while NaN stands for “Not a Number”, calling typeof(NaN) returns “number”…so it’s a number that is not a number 🙂

Removing values from nested Arrays in MongoDB

Deleting values from beep nested array by calling the ‘update’ function can be tricky to get right when using MongoDB. Suppose you have this structure:
{
  _id: 'someID',
  foo: [
    {
      bar: [
        {
          title: 't1'
        },
        {
          title: 't2'
        }
      ]
    },
    {
      bar: [
        {
          title: 't3'
        },
        {
          title: 't4'
        }
    }
  ]
}
Now suppose we want to remove the object with title ‘t1’ from the array it is in. I first tried doing this:
 db.myCollection.update({ _id : 'someID' },
                        { $pull : { 'foo.bar' : { 'title' : 't1' } } }); 
However, this did not seem to work. Adding a ‘.$’ after foo seemed to do the trick:
 db.myCollection.update({ _id : 'someID' },
                        { $pull : {'foo.$.bar' : { 'title' : 't1' } } });
I hope this saves you some time. Good luck!

ZIP a Folder in NodeJS

Here is a simple way to archive and pipe a folder in NodeJS.
First, get the fstream and tar modules:
  • npm install fstream
  • npm install tar
Do something like this on your server:
var fstream = require('fstream'),
    tar = require('tar'),
    zlib = require('zlib');

    res.writeHead(200, {
      'Content-Type'        : 'application/octet-stream',
      'Content-Disposition' : 'attachment; filename=myArchive.zip', 
      'Content-Encoding'    : 'gzip'
    });

    var folderWeWantToZip = '/foo/bar';

    /* Read the source directory */
    fstream.Reader({ 'path' : folderWeWantToZip, 'type' : 'Directory' })
        .pipe(tar.Pack())/* Convert the directory to a .tar file */
        .pipe(zlib.Gzip())/* Compress the .tar file */
        .pipe(response); // Write back to the response, or wherever else...
This solution is based on an answer on StackOverflow

The Javascript Echosystem – Slides Available

I’ve recently added a set of slides I have been developing and using to teach courses around building modern web applications. Topics include:
  • World Wide Web Technologies – An introduction to http, browsers, html and css.
  • Javascript – Prototype-based programming language that is dynamic, loosely typed and has first-class functions.
  • Document Object Model – Manipulating the live HTML.
  • JQuery – Library for working with the DOM.
  • RequireJS – JavaScript file and module loader.
  • AngularJS – Application development framework for the browser.
  • HTML5 – Semantic markup, canvas, CSS3 etc…
  • Debugging – Common tools used for debugging web applications.
  • Performance – Best practices for a fast website.
  • Bootstrap – Front-end framework for the web
  • KnockoutJS – Declarative data-binding framework

Please take a look and let me know what you think: http://roubenmeschian.com/tuts/
The source for this project is available on github.