Underscore JS and Word Frequency!

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. 

I decided to put it to the test in a small example of counting the number of words in a passage of text. To demonstrate how easy this is with Underscore I put together this little jsfiddle.

Here’s the code :

//get the paragraph of text
var text = $("#text");

//remove any punctuation and replace with whitespace
var removePunctuation = text.text().replace(/[!,?.":;]/g, ' ');
//split the string by whitespace to create the word 
// array
var split = removePunctuation.split(" ");

//_Underscore to chain a series of functions
//to reduce the word array to a {word,frequency}
var res =
_.chain(split).without('', ' ')
              .groupBy(function(word) { return word;})
              .sortBy( function(word)  {  return word.length;})
              .value();

OR/M's don't half cost!!!

This article is reason enough to stick with a custom Business/DAL Layer, OR/M’s frequently spell “trouble”!

Imperative or Functional style you choose, I know what I like!

Imperative

foreach (ListItem li in ddl.Items)
{
    string[] s = li.Text.Split(new char[] { ':' },                 
                               StringSplitOptions.RemoveEmptyEntries);
     if (s.Length == 1)
     {
        li.Text = String.Format("{0}:(0)", li.Text); 
     }
}

LINQ

ddl.Items.Cast<ListItem>()
         .Where<ListItem>(li => li.Text.Split(new char[] { ':' }, 
                          StringSplitOptions.RemoveEmptyEntries).Count() == 1)
         .ToList()
         .ForEach(li => { li.Text = String.Format("{0}:(0)", li.Text); });

Knockout, Amplify, ImageFlow and the Flickr API using Cloud9 IDE and Github

Recently I had reason to stumble upon a cool javascript library for doing Cover Flow a la Apple!

The end result can be seen here with a good browser :-) 

http://shaydoc.github.com/imageflow/index.html

Use your arrow keys to circle around the images, cool isn’t it!

Source code is here!

I had been looking at two implementations of cover flow using javascript:

A Jquery cover flow demo :

http://www.codeproject.com/Articles/298106/jQuery-Cover-Flow-like-iTunes

and this library ( a more complete implementation )

http://imageflow.finnrudolph.de/

For my demo I choose to use imageflow as this appeared the most comprehensive solution.

So, my demo task was to see if I could build a simple integration with flickr and imageflow. To implement this I decided to test drive Cloud9 IDE and its integration with Github.

I recommend checking out Cloud9 IDE, its a really interesting project and when combined with Github gives a great solution for developing and collaborating totally on the cloud.

So here’s the code :

Behaviour.js

//Web Service Definitions
amplify.request.define("flickr-api", "ajax", {
    url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=vintage&format=json",
    dataType: "jsonp"
});

function jsonFlickrFeed(data) {
    
    //Get the Data and update the DOM 
    // using knockout.js and the knockout.mapping.js plugin is a sinch :-) 
    var viewModel;
    viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);

    //Load Image Flow
    var domReady = function (handler) { domReadyEvent.add(handler); };
    domReadyEvent.init();
    var instanceOne = new ImageFlow();
    instanceOne.init({ ImageFlowID: 'myImageFlow' });
   
}

$(document).ready(function () {
    //Using Jquery
    (function ($) {
        //GET SOME IMAGES
        amplify.request("flickr-api");
    })(jQuery);

});

Html 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>ImageFlow</title>
  <meta name="robots" content="index, follow, noarchive" />
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <!-- This includes the ImageFlow CSS and JavaScript -->
  <link rel="stylesheet" href="css/imageflow.packed.css" type="text/css" />
  <script type="text/javascript" src="js/libs/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="js/libs/imageflow.js"></script>
  <script type="text/javascript" src="js/libs/amplify.min.js"></script>
  <script type="text/javascript" src="js/libs/knockout-2.0.0.js"></script>
  <script type="text/javascript" src="js/libs/knockout.mapping-min.js"></script>
  <script type="text/javascript" src="js/app/behaviour.js"></script>
 </head>
 <body>    
  <!-- This is all the XHTML ImageFlow needs -->
  <!-- binding a list of images with knockout.js is so easy --> 
<div id="myImageFlow" class="imageflow" data-bind='foreach: items'>
      <img data-bind='attr: { src: media.m }'   /> 
  </div>
 </body>
</html>

OO JS in 15mins or Less

beardedocto:

Properties, methods, and the elusive this oh my what’s a developer to do? Read this guide to writing elegant object oriented (OO) JavaScript I respond!

Learning to write elegant JavaScript is important to your career as a developer. With the advent of technologies such as Node.js you can now write JavaScript on the server side, likewise you can even use JavaScript to query a persistent data store like MongoDB.

So let’s get started writing some OO JS. If you have any questions or I missed something please leave me a message in the comments.

Read More

Source: beardedocto

Mondrian - Sans Titre in HTML/CSS

My CSS Tribute to Piet Mondrian