CSV Escapes

Today I learned that if you are exporting the results of a SQL query to a .csv file to open in Excel, and certain fields may contain newlines, the correct way to make it import correctly is to ensure that your escape character is ".  It took much experimenting to realize this. The more you know.

In honor of pie day, a function that will approximate pi more and more the larger positive number you give it. Note that it will exceed your stack before it gets very far. wink emoticon This is my stalling-before-bedtime attempt to implement 4/1 - 4/3 + 4/5 - 4/7 + etc.

var pie = function(x) { 
    x = (x%2==0) ? x+1 : x ;
    if (x < 2) { 
        return 4; 
    } else { 
        return pie(x-2) + (1- (2*(((x-1)/2)%2))) * (4/x); 
    }
}

In my current instance of Chrome, in the dev console, I can enter up to pie(35859), which returns 3.1415368811414246.

Adventures in Angular

I’ve been getting to know Angular.js a little bit. It’s very cool so far, but it also hurts my head just a bit. I’ll get there. I love the way it allows binding model data to presentation so you don’t have to do any extra coding to get them to reflect each other. I love the ease it gives to iterating over data to put it into the DOM. I’m not sure I’m entirely a fan of the quantity of tags it introduces into your HTML.

I successfully set up a navigation bar using partials. This lets you have a main html page with, say, a header and footer in place, and your navigation. But instead of having your navigation links go to other html files, you name your pages and link to them with a preceeding # sign, for example:

...

<nav>
  <ul>
    <li><a href="#/page1">Page 1</a></li>
    <li><a href="#/page2">Page 2</a></li>
  </ul>
</nav>
...
<div ng-view></div>
...

ng-view provides the magic: the "partial" html files will be loaded into this location in the page when the links are clicked. Then, in your Angular app.js file, include something like:

...

var thisApp = angular.module('thisApp', [
  'ngRoute'
]);

thisApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/page1', {
        templateUrl: 'partials/page-1.html',
        controller: 'aCtrl'
      }).
      when('/page2', {
        templateUrl: 'partials/page-2.html',
        controller: 'aCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

The confusing square braces that encompass most of the .config() function are there to protect the code from minification. The process will replace variable names which can break Angular. So the variables names are first included in the list, and finally the function that takes them all as arguments. I’m not used to that yet. Anyway, once you get into the $routeProvider’s .when() function, you just include the link name that shows up after the # in the html, and an object including the URL of the partial that will fill in the ng-view section and the name of a controller (defined elsewhere)—the controller will set up any information that partial area needs.

So far so good: but then I tried to add a jQuery "dataTable" to my partial. Now, dataTables work by the table being all set up, and then calling ".dataTable()" on the jQuery object that returns it - but Angular does a lot of manipulating the DOM on its own, and doesn't provide an obvious "onPageLoad" to hook into. So if the table is being *built by Angular*, it's hard to call a function on it! So I ended up replacing it with a more Angular option, an ng-table.

Counting Inversions

Several weeks ago now, I implemented an algorithm in Python to count the number of inversions in an array of arbitrarily ordered numbers. My implementation was based on the pseudo-code presented by Tim Roughgarden of Stanford University.

The main function divides the array into two halfs. It then calls itself on the first half, and on the second, in each case getting back a sorted array and the number of inversions found. Then, it merges the two halves back together, getting any further inversions.

In the example pseudo-code, the merge step used two indices to move through the two halves being merged, incrementing them as their numbers were placed in the merged array.  I elected to instead simply .pop(0) the number off the front of the halves, and .append() it to the result. Then I didn't need to have a loop counter, but could instead simply test that the two halves were not empty.

This worked well enough, and I believe the code was fairly clear. It counted the inversions in a list of 100,000 numbers in 1.74 seconds.

Although that was good enough to get the results, it isn’t the best use of a Python list. Since lists are, under the hood, arrays, popping from the front results in the rest of the list having to be shifted. And there were a lot of shifts going on. To relieve some of that shifting, I altered the merge to first .reverse() the two halves, and then pop off then tail instead of the head.  This reduced the runtime on the same list to .52 seconds: an almost 70% improvement in speed.

I suspected we could do better still with a dequeue - since they’re optimized for popping and appending, and then I wouldn't need the confusion of the reverses.  I substituted with dequeues throughout, and went back to left pops.  My run-time was then .5 seconds. Not much savings! That surprised me.

A Week of Learning

I’ve shifted into high gear in computer programming, and with that I’ve decided to start recording what I'm learning.  Two weeks ago, I had worked with enough HTML, CSS, and Javascript to do well on my Intro to Web Development final. This week, I've added the following.

jQuery

My first step in this ramp-up was an attempt to write a little to-do list web application, that was completely local.  List items were able to be added (as is, I hope, semantically appropriate!) as unordered list items. I achieved persistence with HTML5 local storage. Since I hadn’t tried such a thing before, and local storage only permits key-value pairs, I started off with an entry of users.tasks:listlength, and then a set of entries: users.task.1:firstTask, etc.
I then set about to improve it by making use of jQuery.  I’d heard of it, but never attempted it before.  The “core” move is the $() function - passed any combination of HTML tags and CSS selectors, it returns a list of DOM elements which can then be operated on as a group. The operations that can be performed on these elements is also a bit more streamlined than in raw Javascript, and “getter” and “setter” methods are usually distinguished only by the fact that setters have arguments passed.  So, sections of the page may be shown or hidden with a $( "#id" ).toggleClass( "visible" ) (having previously defined ".visible" in my css).  It also typically allows the results to be chained, so I added new list items like this:

$( "#taskList" ).append (
    $( "<li/>" ).append (
        $( "<input type='checkbox'>" )
            .click( function (e) {
                $(e.currentTarget).next().toggleClass( "struckthrough" );
            })
    ).append(
        $( "<span>" + newTaskValue + "</span>" )
    )
);

Find the taskList, add a list item (which is made by adding a checkbox (with a function to strike the text through with completed) and a span, to hold the new task.)
It also permits the main higher-order functions map, filter, reduce, etc. to be performed on the objects it returns.  In the meantime I realized that there is a JSON object that converts objects to and from Strings, so to save my list I now found all list items: $( "li" ), and mapped the results to a array of [task, completed?] pairs, converted the whole array to JSON, and stored it in the local storage.

Sublime Text 2

For a very long time, my go to text editor has been the default on Linux Mint: gedit.  It covers the basics, and probably quite a bit more, although I haven’t by any means pushed it to the edge.  I’ve also begun trying to learn some vi - which I really like, so far.
But at the IGDA Global Game Jam this year, I was on a computer lab computer running windows - with Sublime Text 2 installed. So that’s what I used!  I can’t yet say I’m hooked, but I do like it. For HTML the auto-complete feature is pretty nice: simply type a tag name - even with a class or id attached, like div.my_class - press tab, and the tag is created along with a matching closing tag. Lines are automatically indented to the current level, and it's easy to comment or uncomment the line you’re on.  Another neat feature is the ability to multiply cursors, if you want to type the same thing at several locations. (You can find our game here.)

SMACCS

I became acquainted with this guide for keeping your CSS organized, and it has that “I should have thought of that!” sort of cleanness and simplicity.  I haven’t written enough CSS the past couple weeks to put it to use yet, but I plan to as soon as I have the opportunity.

underscore.js

underscore.js provides a lot of handy functional programming functions (all as elements of the _ object, just as jQuery uses the $ object.)  A lot of the functions are now present in most browsers’ implementations of Javascript, but _.js provides them even where they aren’t. Many of the functions are those you’d expect: map, reduce, filter; but a couple I found immediate use for are _.pluck() which takes an array of objects and a key, and returns an array of values from the objects that match the key, and _.uniq() which takes an array and returns that Array with all duplicates removed.

Bootstrap

Bootstrap is a framework for making responsive, mobile-first websites. I’m not all the way there yet in understanding it, but it primarily involves applying its particularly classes to your document’s HTML.  The results seem to look very nice, but I am not totally happy with the state it leaves my HTML in.  Certain items quickly have 3 or more classes applied (one to make it a navigation bar, one to make it a button bar, one to make it inverted) and it seems to require quite a few extra <div>s scattered about that don’t add anything semantic to the document.


So that’s where I am now. Comfortable pressing forward in jQuery and underscore, ready to go trying to apply some SMACCS, leary of Bootstrap - but still learning, and letting the War of the Editors rage inside.  (I also just downloaded Light Table to give it a try.)