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.)