As part of the job move, I have also relocated to Austin, TX. It’s been a pretty stressful move, but everything is in it’s place now and I’m back on track running regularly. Hopefully, I will be in great shape prior to the 115F summers here.

I have decided this year I will learn Erlang. I will be somewhat starting over thanks to the SSD failure. Going to a strict functional language is quite interesting. I also end up spending hours and hours just to write 2 lines of code. Erlang is pretty good at doing a lot of amazing things in just two lines of code, but it does take a while to get there.

Octopress has become very difficult to manage, I would have updated this sooner if I was still on Wordpress.

Peace out

Audible is great, especially if your family and girlfriend are a three to five hour drive away depending on Atlanta traffic and if there is a Knoxville/Florida game that weekend. My only beef with listening books instead of reading them is the time involved. Even the slowest readers can get through a book much faster than the artful narrations these Audio books are read as.

I mostly read technical books, so I will talk about it in terms of what I understand. I would call this book a cookbook for effectively communicating your desires to others. For those unaware, a cookbook is the opposite of a technical reference that exhaustively enumerates every facet of a topic. A cookbook tries to come up with an extensive list of problems you may encounter and provides solutions to those problems.

Take for instance a cookbook on kitchen disasters. It may go something like this.

Problem: You burned the cookies. They are dark brown but not black

Solution: Serve the cookies with milk and nobody will notice the difference.

The key part of books is organization. People will buy these books then refer to them over and over, so you want to make it easy for them to find what they are looking for. On this part, the author does an excellent job separating the topics into very descriptive categories, he understands pronouns and being vague are poisonous to Getting More. He has sections for work, getting hired, children, sales, and business situations.

I would also applaud his ability for effectively illustrating techniques for Getting More. The entire book could be shortened to this.

• Don’t assume, listen
• Be incremental
• Role reversal
• Framing
• Trading things of unequal value

The one you may not be familiar with is framing. Let’s say you wish your girlfriend would support you in you exercise routines by participating. From her point of view, she doesn’t like to exercise or to be outdoors. You tell her that running together will help us reach our mutual goals of us spending more quality time together (and you losing some weight).

Let’s say this isn’t enough for her to justify the energy expenditure. You can use framing. Explain to her that her commitment to run with you on a regular basis will show that she is able to keep committments. In return, he will be more likely to commit to her.

If this still isn’t enough, we can use trading things of unequal value. She supports you in your exercise routines, and you support her with some fancy jewelry that she has been wanting.

From this point of view, how could she NOT agree that running together is a mutually beneficial thing?

He has many other methods for when these techniques are not enough, in my opinion they are borderline bribery, taking advantage or plain abuse of skills. He talks extensively to defend those techniques on how they were used, and why they are mutually beneficial. He obviously is naturally very persuasive, and be prepared to have these themes repeated many timesover. Each and every one of us has trouble listening, so repetition is key to learning the topics in the book.

Conclusion

I have unfortunately not used the skills in this book effectively. He will remind you over and over that the keys to Getting More is to practice Getting More. So I endeavour to practice these skills, and serve myself better by Getting More myself.

I started by looking at a Learning WebGL. I 100% recommend this especially if you are unfamiliar with the domain. Why would you keep reading this if you weren’t? If you go through these lessons copy/pasting code, you will think this is simple. However, the first thing I tried was tweaking things.

Who wants a pyramid? I made a triangle cube. Who wants a cube with solid color sides? So, I made a cube with blending (gradients).

The first thing I noticed, you ever heard of perma-death games? One typo, one vertex without a color and the whole thing fails to load. There’s no 1%, 50%, or even 99% working it’s all or nothing. So, much of my time was debugging the tiniest details of my application.

One time, I spent two hours drawing and staring of my 3d object on a piece of paper. It actually didn’t help at all, the real problem was totally unrelated. I think maybe paper helps those people either with super complex or super simple problems. Mine was a problem of misunderstanding so staring at a 3d model on a 2d piece of paper did not help me.

So I will go into the most basic details here. What is WebGL and why is canvas so much better? Let’s say I want to draw a square.

I define my 4 points and tell OpenGL to go draw it. OpenGL says go fly a kite. OpenGL only understands triangles. There are two ways to do this. A triangle for every 3 vertices (gl.TRIANGLES), or one triangle, then every subsequent point forms a new triangle (gl.TRIANGLE_STRIP). Obviously, the second one is ideal as it is far more efficient on the GPU to reuse existing vertices. However, if you use the strip it will treat every new point as the foundation of the next triangle. This can cause significant problems if you want to connect vertex 3 to vertext 7 and 8. You can get some really crazy shapes that made my brain hurt looking at them.

Next post, I will start getting into the code behind Graph 3d and try to justify the few dozen hours I lost working on it.

Today I want to talk a bit about the documentation framework we are now using at work. It’s rather fantastic and based on a python implementation: https://github.com/davebalmer/joDoc. It hasn’t been updated at all this year, but azakus has ported the whole thing to NodeJS!

The idea is quite simple, take markdown based comments in your JavaScript file and throw them into a web page. How hard was that? No complicated syntax, no huge comment blocks to facilitate special formatting. KISS.

So!

What does this thing do, and why should you care?

First off markdown knowledge would be good to know. You have two paths here

I know markdown, but rusty on syntax Try my demo I don’t know markdown give me the Full details

Sample JavaScript file

file.js

1
2
3
4
5
6
7
8
9
10
11

/**
# file.js
Some information about the file.  The h1 above is
## main

Hey what is this, C code?
*/

function main(){
  return 'I am not C code, see ' + 5;
}

So, thanks to the /** part you will get a big h1 tag with ‘file.js’ which also acts as the index. Anywhere you link to [file.js] now links to the html page created for file.js.

There are two forms created, single file where links use hash tags to find documentation, or multi page where each html page is run through a template and an entire page with header links is provided.

Fring features: I have been adding cool features to it which can be found in ‘joapp-experiment’. I’m working with the owner to get these integrated into his repository.

File based configuration

Currently, you must maintain complicated command line scripts to use it. Why must it be so? It’s great to put these in a build tool, but sometimes you want to set it and forget it. So I have implemented via ‘require()’, Node 0.3.0+ I think, to require a separate file. This is cool, because those files can require other files say to provide a dist and a dev version of your docs <3 require().

I made a pull request for this feature on 9/8 and here it is 2 weeks later without even a comment: https://github.com/azakus/jodoc-js/pull/10. It includes a demo since I properly commented jodoeJS itself to dogfood and provide an easy demo for others. There are notes on how to use this in the README.

Serve the docs via NodeJS as a web page

It’s cool that the docs run in NodeJS b/c they are sub second fast. But why do I need to run a build command to get them going? Can’t NodeJS serve to a browser instead? The answer is Yes it can. So I wrote a small web server inside the app. It has no dependencies, so it’s very simple and dumb. I had to add proper mime-types for picky browsers like Chrome.

As the HTML is created, it is sent to the browser by hitting the URL in your browser. It can also serve the files created on disk, but way less cool. Oh did I mention, it will reparse all your source files before doing so? So, if you are actively writing documentation just hit refresh to see your changes. It couldn’t be simpler.

So let’s start out:

1
2
3
4
5

var config = {
  //blur: false
};

!config.blur //Oh noes reports true

The trick here is to detect whether the variable is undefined, then for it’s truthy value. Fixed implementation:

1
2
3
4
5
6
7
8

  if( !config.blur === false ){
  //Won't execute
  }
  config.blur = false;

  if( config.blur === false ){
  //Will execute
  }

Pretty cool huh? Test with if/else structures or you will get errors.

Update: Thanks Toby for that one

The current project I’m working on involves nearly a dozen libraries. There’s a huge difference between those on Github and those hosted else where. For one, the code hosted else where just sits in my lib directory. I make modifications to it and commit to our internal version control system (Perforce). If I want to commit those back it nearly always ends up being an arduous process of building diff files and going through a multi-week issue/communication with an author.

Now flip over to Github, let’s say there’s a minor issue with a particular feature. I open an issue and the author is notified via email. The next day that feature may get fixed. Even if it isn’t, I fork the code base and make my own. That’s how my dashboard is now almost 30 repositories full. I have no qualms getting in there and hacking away at some things. More often than not I learn 10 things for every one I bring to the table. It’s incredibly rewarding and I thank Github for this.

Github provide an amazing service to the world and the betterment of developer kind. I owe much of my working knowledge to Github committing code, reading code, and learning code from them.

My latest projects include in no particular order: Fonttest enumerates the 30+ font’s from the excellent M+ non-web fonts, I’m working on WOFFing, EOTing them via FontSquirrel. This is also my first start at Github Pages, and it is totally amazing as usual. jodoc-js This is a port from the amazing jodoc perl library. It allows standard markdown and scraping of JavaScript of files. I’m working to improve the Table of Contents building and automagic link building. I’m heavily considering starting fresh with a new repository to reduce some of the technical debt.

On a side note, don’t you wish you could EMACS the world? How many times do I ctrl+s, ctrl+b a day in the web browser and end up with some crazy shit going on :(

In integrated graphics mode: use xrandr as so

1

xrandr --output LVDS1 --brightness 0.4

I made a script to use make this a little more automated:

1

xrandr --output LVDS1 --brightness $1

Save it to brightness.sh (no sudo required on my system).

1

./brightness.sh 0.7

I am looking for a new one, preferably one that will not break every couple of days. I will have to go back through all of my posts and update the syntax to this new highlighter.

Don’t use this plugin: SyntaxHighlighter Evolved

My job is not to directly emulate what is going on in Ray’s Post, but to explore ways to do this in just JavaScript no pesky script tags above your raw code. The only tricky part is tracking onkeyup, I refer to http://www.quirksmode.org/js/keys.htmlfor browser compliance.

Here she goes!

1
2
3

<textarea cols="30" rows="2" id="address">Type address here</textarea>
<br/>
<img width="400" height="400" title="Map!" id="map" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(function(){
var base = "http://maps.google.com/maps/api/staticmap?zoom=12" +
    "&size=400x400&maptype=roadmap&sensor=false&center=",
    map = document.getElementById("map"),
    area = document.getElementById("address"),
    virgin = true;

area.onfocus = function(ev){
  if( virgin ){  //Touched for the very first time?
    virgin = false;
    this.value = '';
  }
}
area.onkeyup = function(ev){
  //All sorts of broken things with detecting keycodes,
  //I'm just looking for value
  map.src = this.value.length > 4 ? base + escape(this.value) : '';
}
})();

However, seeing is believing

This should work in all browsers, I don’t have Windows to test this though :)

Fortunately, I found a great use for node js. Our corporate server technology is very behind on REST. So I wanted to build a proxy server to convert their API into a RESTful or as RESTful as possible API.

First step was finding a way to create a HTTP proxy. This can be done with 20 lines of code in Node JS. However, this is pretty ghetto and I want to do this with a nice API and just one line of code, something like proxy( port, domain, request, response ).

I found just that here: https://github.com/nodejitsu/node-http-proxy.

Now, let’s look at some code

1
2
3
4
5
6
7
8

var express = require('express'),
     app = express.createServer(),
     httpProxy = require('http-proxy');

app.get("/iws/*",function(req,res){
    var proxy = new httpProxy.HttpProxy(req,res);
   proxy.proxyRequest(80, 'iws.erdas.com', req, res);
});

This will look for requests on /iws/, I’m using express for easier routing, then proxy those to iws.erdas.com. The requests are automatically sent back to the user.

This isn’t what I set out to do. I wanted to simplify the API, so I looked over at ARCGIS REST services and went from there.

So, I will be taking this:

http://iws.erdas.com/ImageX/imagex.dll?image?cache=true&transparent=true
&fill=ffffff&quality=60&type=jpg&l=2&tx=2&ty=1&ts=256&
layers=/sampleiws/images/geodetic/usademo.ecw&srs=EPSG:4326

and turning it into this:

http://localhost:3000/iws/map/sampleiws/images/geodetic/usademo.ecw/2/2/1/

Now the how:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

app.get(/^\/iws\/map\/?([^?]+)?(.+)?/, function(req,res){
    var proxy = new httpProxy.HttpProxy(req, res),
  captures = req.url.match( /^\/iws\/map\/?([^?]+)?(.+)?/ ),
        layer = ( captures && captures.length > 1 && '/' + captures[1] ) || '',  //bug requires prependend /
  qstring = '',
  tile = [];

    if( /\/\d+\/\d+\/\d+\//.test(layer) ) {

  layer = layer.replace(/\/\d+\/\d+\/\d+\//,function(substr, offset){

      tile = substr.match(/\d+/g);
      return substr.slice( offset, substr.length );
  });

  qstring = ['&l=',
         tile[0],
         '&tx=',
         tile[1],
         '&ty=',
         tile[2],
         '&type=jpg',
         '&fill=ffffff',
         '&transparent=true',
         '&cache=true',
         '&quality=60',
         '&ts=256',
         '&srs=EPSG:4326'
        ].join('');

    } else if( captures && captures.length > 3 ){

  console.log( 'QString: ' );
  //Test qString for url parameters, otherwise we need tile nouns to find the map tile
  qstring = captures[2];


    } else {

  //Fail, what to do
    }

    //get http://iws.erdas.com/ImageX/imagex.dll?image?cache=true&transparent=true&fill=ffffff&quality=60&type=jpg&l=2&tx=2&ty=1&ts=256&layers=/sampleiws/images/geodetic/usademo.ecw&srs=EPSG:4326
    req.url = '/ImageX/imagex.dll?image?layers=' + layer + qstring;
    console.log( req.url );
    proxy.proxyRequest(80, 'iws.erdas.com', req, res);

});

app.listen(3000);

QED

The process is simple. If you followed these instructions previously, you need to uninstall it or NPM will continue to install in /usr/local/bin. If you are starting fresh move onto step 2.

Step 1. Remove old npm/node cd ~/node-previously-installed ./configure make uninstall

Step 2. Install node locally

The following taken from gist

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc . ~/.bashrc mkdir ~/local mkdir ~/node-latest-install cd ~/node-latest-install curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1 ./configure --prefix=~/local make install # ok, fine, this step probably takes more than 30 seconds... curl http://npmjs.org/install.sh | sh

Now you can install useful middleware like express without sudo. npm install express

Happy Noding

On to this new non-plugin… located Here. I noticed BBQ support is missing, I must have forgotten to push that. I’ll get to that on Monday.

NYT has added a cool new feature that this website is calling The Evolution of the Hyperlink. I think this is a great example of hyperbole, anyways I thought it involved some nifty JavaScript and went ahead and wrote it based on jQuery. Their implementation is a bit lame as it only runs when the page initially loads, I stepped it up a notch and used Ben Alman’s excellent BBQ: Back Button and Query Library.

The premise is simple, allow people to generate links to particular sentences in a page without use of any HTML help. So this must work without generating tons of ID’s all over the page.

The process for me was two fold.

1. I needed a way to find the position of sentences in a page which was simpler than initially predicted.
2. I need a way to highlight these sentences.

The second problem seems very simple, parse paragraphs and find sentences within them. I’ll start there. I played around with a few regular expressions. First I simply wrote something that found any text followed by a period. This worked well in my regular expression test site: RegExr but didn’t work at all in JavaScript.

This is what I ended up with and works very well to split any length string finding periods.

1

var sentences = $("p")[0].innerHTML.match( /[^.]/g )

If you’re not familiar with regular expressions, I told the engine to find all text that’s not a period. It will run match on a string and produce an array of sentences.

1
2
3

var p = "This is a great paragraph.  It has many sentences. It is useful for testing";
var s = p.match( /[^.]/g );
//["This is a great paragraph", "It has many sentences", "It is useful for testing"]

You will notice periods aren’t matched. This is inline with NYT’s behavior, so I stuck with it. Since JavaScript doesn’t support positive lookahead, there is no obvious way to catch those pesky periods and I need-ant bother looking for one right now.

Now, to find where sentences are. This is needed so we can scroll to them.

Like many great ideas, I reused someone else’s :D Kir’s JS Cursor Position. The idea is simple create a fake div with the preceding text and determine how big it is. Based on this, we can determine where the sentence in question lives.

With jQuery, this is extremely simple. See this, you need to be using jQuery 1.4 or 1.4.2 something new. I don’t remember the exact version that supports this syntax as it is hard to find examples of this syntax :D.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//page.para = index of paragraph
//page.sent = index of sentence within paragraph

var para = paras.eq( page.para ),
     //Collect all sentences before the necessary one
     sentences = para[0].innerHTML.match( /[^.]+/g ),
     prefixSentences = sentences.slice( 0, page.sent ),
     dummy,
     top = 0;

//Create a dummy div with any text preceding your sentence and
// css properties of that element
//Inspired by: https://github.com/kir/js_cursor_position
dummy = $("<div />",{
    css:{
        position: 'absolute',
        left: '0',
        fontSize: para.css('fontSize'),
        fontFamily: para.css('fontFamily'),
        fontWeight: para.css('fontWeight'),
        fontStyle: para.css('fontStyle'),
  fontVarient: para.css('fontVarient'),
  fontTransform: para.css('fontTransform')
  },
  html: prefixSentences.join('')
    }).appendTo('body');
top = para.offset().top +
     dummy.height() - parseInt( dummy.css('fontSize') ) * 1.2;
     dummy.remove(); //Remove dummy
window.scrollTo(0, top);

Feel free to link directly to the code: sentence-highlighting. I’ll update links and whatnot on Monday. I’ll work to make BBQ support included via progressive enhancement.

Anyways, if you’re like me, you just want to know what jQuery is doing under the covers and what the penalties and benefits of architecting your code in a certain way.

1
2
3
4
5

$.fn.borderize = function( options ){
  return this.each(function(){

  });
}

This is the basic pattern, this is set to the jQuery object and you can use your plugin like so. To access to the underlying dom, you return this.each() and doing so enables chaining.

I see three different areas to attach methods to a plugin, each with their own costs and benefits.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$.borderize = {
  //I don't need access to the dom directly, and I am only
  //initialized once.  I have to be called via global jQuery
  //object.  I do not have access to any closures, so I rely
  //on this manipulation or passing in arguments.
}

$.fn.borderize = function( options ) {
  //I need access to the jQuery collection.  I am initialized
  //once per plugin instance and I can be accessed within
  //the return if need be.  I have access to the closure created
  //by $.fn.borderize

  return this.each(function(){
    //I need access to the direct dom, but not necessarily
    //the original jQuery collection.  I require two closures
    //so I am the least memory efficient of the methods.
    //I am instantiated for every dom targeted by this plugin.

  });
}

Moving on, passing in options and default parameters. I won’t discuss this topic, there’s a lot of documentation on this pattern so I’ll be terse.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$.fn.borderize = function( options ){

    var opts = $.extend({}, options, $.fn.borderize.defaults);

    var wrapDiv = $('<div style="border: solid ' +
          opts.color + ' ' + opts.width + ';" />;');

    this.wrap(wrapDiv);

    return this.each(function(){

    });
};

$.fn.borderize.defaults = {

    color: 'red',
    width: '1px'
};

If you are using basic key/value pairs in your defaults and options, this extending is sufficient. Otherwise, you should look at deep copy option of $.extend in the documentation. You notice, we aren’t putting this code inside this.each, that’s because the jQuery collection being acted on is the context of the plugin. If would be silly to do this.each on the collection, then wrap each item in a jQuery collection just to wrap it.

So that leaves the question, if we are doing something different like providing functionality. Where should we put our code? As best I understand, $.fn.borderize is best if you need access to the jQuery collection and $.borderize is best for when you don’t.

I’ll add two types of methods to this plugin, one is a simple utility function that doesn’t need any sort of context or state information and another that does.

1
2
3
4
5
6
7
8
9

$.borderize = {
  debug: function(msg){
    if( console && console.log ){
      console.log( msg );
    }
  },
  //Number of initialized elements globally
  initialized = 0
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$.fn.borderize = function( options ){

  ...

  var instanceInitialized = 0;

  function initUpdate(){

    instanceInitialized += 1;
    $.borderize.initialized += 1;
  }

  return this.each(function(){
    initUpdate();
  });

This is a silly example, we could just as easily update these values procedurally. It would also be more efficient to update the value via this.length (length of the jQuery collection) rather than as each is initialized.

I’ll post about converting singletons to jQuery plugins. The singleton pattern is one of the most prolific patterns on the internet and being able to wrap that in a jQuery plugin provides a powerful pattern for building jQuery plugins.

The basic idea of a bullseye conceptually is to draw circles on top of each other. Each circle within the next is red or white. The final result looked something like this.

Canvas has some nice features for drawing arcs. You basically access the context of a canvas element, and start drawing paths on it. Filling an arc results in a circle or using stroke results in a circle as a line. This is the same code but with strokes instead of fills.

Lets dive into the code here.

1
2
3
4
5

<html>
  <body>
    <canvas></canvas>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var canvas = document.getElementById("bullseye");
var context = canvas.getContext("2d");
//I had issues with width/height so I manually set these
canvas.width = canvas.height = 50;
//Find the center, this will be used for drawing our arcs
var center = [canvas.width/2, canvas.height/2];

context.beginPath(); //Tell canvas to start registering a path
context.arc( center[0],
  center[1],
  25, //Radius
  0,   //Starting point in radians (right side of a circle)
  Math.PI*2,  //Ending point in radians (same right side of circle)
  true
);
//Now lets draw another circle inside this one
context.arc( center[0],
  center[1],
  18,
  0,
  Math.PI*2,
  true);
//Draw what we have done
context.stroke();

Cool stuff, that was easy why did you spend so long on this? Well if you execute this code, this is what you get. Two circles with a big line between them.

I was looking at the example on the MDC, and simply could not figure out why mine had lines between the circles and theirs didn’t. It did not help that their example was a smiley face, mocking me. Canvas moveto example.

Then I looked closely at their example, and saw that their moveTo was not realigning the center point of the arcs as I originally thought. It was actually moving the path to the edge of one of the new shapes. This prevents a line being drawn from the end point of your initial circle to the start of the next one. I later discovered, you can also just start a new path with beginPath().

So the final code is such:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var canvas = document.getElementById("bullseye");
canvas.width = canvas.height = 50;
drawCircle( canvas, [24,18,12,6], ['red','white','red','white']);
//I could probably just ask for two colors to alternate, eh?

function drawCircle(canvas, radius /* array */, color /* array */){

    var context = canvas.getContext("2d");
    center = [canvas.width/2, canvas.height/2];
    //Sanity check, I don't want to attempt to draw
    // circles that don't have an associated color
    if( radius.length <= color.length ){

  for( var i = 0, length = radius.length; i < length; ++i ){
      //must move to next circle first, or else you get a line between circles
      context.moveTo( radius[i]+center[0], center[0] );
            context.arc(
                center[0],
                center[1],
                radius[i],
                0,
                Math.PI*2,
                false);

      context.fillStyle = color[i];
      context.fill();
  }

    }

}

Now this works, right? Wait, no it doesn’t. You see strokes would work fine, but we are trying to fill our drawn shapes. So a little more work is needed here.

I thought as I draw each arc, the fill would just fill that one path I had drawn. However, fill iterates through the entire context stack and fills each object. So what you end up with is a big circle drawn, then filled, then another circle drawn, and both of those circles filled, etc.

It took a bit of digging, and frankly the w3c document wasn’t a huge help. Basically what we need to do, is draw our shape, fill it, then empty it from the stack. beginPath() does this. Add this to the line prior to context.moveTo and you should be in business.

1
2
3

//must move to next circle first, or else you get a line between circles
context.beginPath();
context.moveTo( radius[i]+center[0], center[0] );

I’ll update this when I find out how to bind a click to this. Even if it takes a div wrapper sigh. I’d like to know which command is more efficient, moveTo or beginPath. I can only imagine moveTo is more efficient, but nothing to back that up at the moment.

This was an interesting topic for me, but really I was taking a break from my ginormous work project and getting a feel for emacs at the same time. I think I will end up with a very oddly shaped left hand if I continue to use emacs, but the fact that everything is available via the keyboard (or maybe home row) is extraordinarily more efficient than eclipse. I fear digging into the JavaScript templates to tweak some of the odd autoformating things it does to my files.

When I wrote this, the World Cup was still going on. I included some of the stadiums in South Africa and a static list of Trending topics on Twitter. The twitter birds may not work as these trending locations can change over time. I didn’t bother to use their trending locations availability service since WOEID to real LAT/LON transation wasn’t readily available when I wrote this, so I had to manually translate all of the WOEIDs when I wrote this. Map Mashup

I should have some exciting topics down the road!

I have slightly tweaked this. You should know some limitations of onMissingMethod(). While external calls, say from a cfm page, will trigger the onMissingMethod calls, internal calls within the CFC will not utilize this behavior.

The behavior I wish to achieve is something like this:

1
2
3

  <cfset object = CreateObject("Component","baseObject") />
  <cfset object.val("Value") />
  <cfoutput>#object.val()#</cfoutput> <!--- Value --->

Inside the CFC is a different story, setting and getting is a little different

1
2
3
4
5
6

...
<cffunction name="GenericFunction">
  <!--- Set some variables --->
  <cfset setValue("var1") = "String1" />
  <cfset value = getValue("var1") /> <!--- Value now set to "String1" --->
</cffunction>

Here’s the Helper functions to make this happen. You can read about advanced version of this very basic getter/setter code at Peter Bell’s Blog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!---
    Author: Drew Wells http://drewwells.net/blog/2010/04/23/coldfusion-generic-getters-setters/
--->

//Handles calls to functions that do not exist
//@MissingMethodName - Name of function being called
//@MissingMethodArguments - Arguments passed to non-existant function
function OnMissingMethod( ){
  if( StructKeyExists( arguments[2], "2" ) ){ //invalid, expected 1 argument

  } else if( StructKeyExists( arguments[2], "1" )  ){ //setter

      setValue( arguments[1], arguments[2][1] );

  } else { //getter

      return getValue( arguments[1] );

  }
}
//Setter method
function setValue(){
  variables.instance[ arguments[1] ] = arguments[2];
}
//Getter method
function getValue(){
  if( StructKeyExists( variables.instance, arguments[1] ) ){
      return variables.instance[ arguments[1] ];
  }
}

Also, I have updated to SES URLs, it was a bit of a challenge. You must update your apache settings, wordpress will take care of the .htaccess file configuration automatically.

To enable the use of .htaccess, you must configure your apache site configuration. This could be default or a specialized file inside the /etc/apache2/sites-available/ directory ie. [code light=”true”]/etc/apache2/sites-available/default[/code]

Go to the directory definition (or add one if it doesn’t exist) and turn on these two options at a mininum.

1
2
3
4

<Directory /var/www/blog>
    Options FollowSymLinks
    AllowOverride FileInfo
  </Directory>

Afterwards, reload your apache configuration. On Ubuntu, this is

1

sudo /etc/init.d/apache2 reload

Piece of cake