just a quick and dirty piece of code to grab the line number and content from the current line of a text area. haven't tested it outside of firefox and chrome so your mileage may vary.

function getLine(edit){
	var start = 0;
	var lineNumber = 0;
	var content = "";
	if(typeof edit.selectionStart == 'undefined') {return false}
	
	start = edit.selectionStart;
	
	lineNumber = edit.value.substr(0,start).split("\n").length - 1;
	content = edit.value.split("\n")[lineNumber];
	
	return {"lineNumber": lineNumber, "content": content}
}

The rendur editor now uses tabs instead of spaces (since firefox now supports tab-size. sorry chrome/safari/ie) and you can resize from three corners, rather than 1. The resize control is invisible - so just hover over the corners. Also gave it a minor face-lift and removed targeted editing. Did anyone actually use that?

totally unscientific, buuuut if you want a rough idea of which way of doing something is faster....

function bench(fn, iterations){
    
    var start = new Date().getTime();
    for(var i = 0; i < iterations; i ++){
        fn();
    }
    var end  = new Date().getTime();
    return (end-start);

}


var fn1 = function(){ ... }
var fn2 = function(){ ... }

var times = 50000;

alert(bench(fn1,times) + " : " + bench(fn2, times));

On a big enough application, you'll have 5-10 jQuery plugins. if you're lazy loading JS files as necessary, you can't always be certain that the plugins you need are ready to go.

I wrote a quick and dirty method to defer your code till your plugins are ready.

pluginReady = function(plugin){
	if(!jQuery.Deferred){
		return;
	}	
	
	// return a deffered object that will resolve when the plugin is available.
	var pluginDef = jQuery.Deferred(),
		pluginInterval = window.setInterval(function () {
			if (!!jQuery[plugin]) {
				pluginDef.resolve();
		}}, 300),
		
		// give up after 10 seconds
		pluginTimeout = window.setTimeout(function (){
			window.clearInterval(pluginInterval);
		}, 10 * 1000);
	
		jQuery.when(pluginDef).then(function () { 
			window.clearInterval(pluginInterval);
		});
		
		return pluginDef.promise();

};

I was recently tasked with adding formatting to a telephone number input field. I found this great masked input plugin which was fast, slick, and easy to use. Unfortunately, it bricks hard in the android web browser. I believe this is because of the android browser, not the plugin, but I can't be sure. The crux is, i couldn't use it and had to admit defeat, or find a replacement asap. I wrote this quick and dirty input masking function in a couple hours. Its not as smooth, but it works.

css warp

Rendur now includes jQuery so that you may use it when roughing out javascript behavior, and supports indenting a block of text at once. Its still a bit rough, and shift + tab to unindent is not finished yet.

UPDATE: shift + tab now works and selection is persisted. IE folks, once again, get nothing.

What is Rendur? render is a a itty bitty web app which allows you to rough out html/css/javascript quickly. You can see CSS and HTML changes as your type. The javascript sandbox is crude, but effective.

Pages and pages of really great stuff at Joby flickr stream.
[Joby's website]

Im not super in love with it, but this is my latest arts.

Ive been doing some really fun things with javascript lately, but not a lot of new ground worth posting about. I did however stumble upon a clever way removing duplicates from an array. I had a massive array which was 80% duplicates. The standard method which I had been using of two for loops - one nested in the other - was eating too many cycles. The solution was to exploit the map object - which does not allow duplicate keys.

Array.prototype.unique = function(){
    var uniqueArray = [];
    var workMap = {};

    for(var i = 0; i < this.length; i++){workMap[this[i]] = 0}
    for(x in workMap){uniqueArray.push(x)}
    
    return uniqueArray;
}

This reduces the number of iterations from nⁿ to n² which is no small gain when dealing with large arrays!

Amanita muscaria

No big deal. Rendur now has native dropshadows and rounded corners. IE folks get nothing.

I made a lamp shade. how 'bout that?

Remember that game studio I told you about that made my favorite game? They've just announced the next game they're going to be working on. Office Yeti.

One of the things that have always rubbed me the wrong way with regard to javascript libraries is that they often try to shoe horn javascript into a class based model. Javascript was intentionally designed to be a prototype based language. Rather than simply bitching about it, I decided to look into developing a concept of inheritance that was in step with javascript's conceptual roots.

First, a bit of background. The type of OOP you're most likely familiar with is class based. Remember Plato's theory of forms? There is an infinitive, unconjugated, universal concept of horse, and then there is this horse and that horse. This is how class based OOP, works more or less. You have a Horse class, and then instances of Horse. Prototype based OOP is different. It's much more bendy and flexible. Inheritance is achieved by cloning instances of existing objects. So for example, mammal is just an object with a few methods and properties. Human is a clone of mammal but with a postRandomCrapToFacebook() method.

mammal = {
    sound: "",
    eyes:2,
    blood:"warm",
    talk: function(){alert(this.sound)},
    eat: function(){alert("munch munch")},
    sleep: function(){alert("zzzzzzzzz")}
}

pig = ((new function(){}).prototype = mammal);
pig.sound = "oink";
pig.talk();
pig.eat();
pig.sleep();

porky = ((new function(){}).prototype = pig);
porky.sound = "thats all folks";
porky.dance = function(){alert("ta da!")}
porky.talk();
porky.dance();

dog = ((new function(){}).prototype = mammal);
dog.investigate = function(){alert("sniff sniff sniff")};
dog.sound = "BARK BARK!";
dog.investigate();
dog.talk();

yorkie = ((new function(){}).prototype = dog);
yorkie.sound = "barkbarkbarkbarkbark";
yorkie.investigate();
yorkie.talk();
yorkie.sleep();

granted, this is a bit wonky: yorkie = ((new function(){}).prototype = dog);

you'd probably want to create a function that would handle your cloning. Maybe something like this:

function copyOf(sire){
    progeny = function(){};
    progeny.prototype = sire;
    return progeny
}

yorkie = copyOf(dog);

This is neat because you can have complex family trees, stitching functionality from this prototype into the next while each remains a functional object. There are no immovable static forms that merely serve as unalterable templates. I'm aware that many developers are "HORRIFIED and DISGUSTED" by this concept, but its really kind of liberating once you've acclimated to it.

just lots and lots of high quality photos of beautiful motorcycles. bikeexif.com.

Awesome page illustrating some of the different methods of projecting a 3D sphere onto a 2D surface. Check out the youTube clip at the end. http://www.crowded.fr/2009/04/20/la-projection-myriahedrale/

Zebra stripes without stripe classes. Eventually, we'll actually be able to use this stuff......

table {border-top:0px solid;border-bottom:0px;}
td {padding:15px 10px; margin:10px 0px;  border-bottom:3px solid #CC2D82; }
th {border-bottom:3px solid black;padding:20px 10px 0px 10px;text-align:left;}

th:nth-child(2n) {background:#5DB2FC}
th:nth-child(2n+1) {background:#75D1FF}

td:first-child {border-left:3px solid #CC2D82;}
td:last-child {border-right:3px solid #CC2D82;}
tr:nth-child(2n+1) td:nth-child(2n) {background:#FC5DB2}
tr:nth-child(2n+1) td:nth-child(2n+1) {background:#FF75D1}
tr:nth-child(2n) td:nth-child(2n) {background:#E8E8E8}
tr:nth-child(2n) td:nth-child(2n+1) {background:#FFFFFF}
tr:nth-child(2n) td:first-child {border-left:1px solid white;}
tr:nth-child(2n) td:last-child {border-right:1px solid white;}

[update: just realized that this is only working on ff3 on osx so the code is useless to 98% of all people, but I'm leaving it since its still fun. Ive replaced the example with an image so the rest of you can see what you're missing out on]

If you aren't doing anything tonight, you should watch Free Radio. Vh1 @ 11pm, 10pm CT

did a few drawings on postit notes with a 005 felt tip. full size versions here and here.

Finally made the switch to Rendur 2.2
The syntax highlighting is still not as fast and as solid as I like, but its still very usable. Also, rendur 2.1 was broken in FF3 so upgrading was a pressing matter. As always, please provide any feed back or ideas.

Whats new in 2.2

• javascript sandbox


• syntax highlighting for html and css. This is turned off by default (firefox only)


• ability to turn realtime editing and syntax highlighting off.
  (select "Rendur 2.2" tab. When realtime editing is turned off, click the appropriate tab a second time to render your changes)
  


• targeted editing. (firefox only) Click the target (?) to select an element and edit it's content while leaving
  the rest of the documnet untouched. Click any item in the targeted element's ancestry to
  edit that element.
  


• minor layout/interface adjustments

This is Euchambersia, a therapsid [mammal-like reptile] from the late permian. It displays an "absence of postcanine teeth in association with a maxillary pit and grooved caniniform teeth" meaning it likely employed venom to dispatch it's prey. Neat huh! Also, check out the sharovipteryx, a gliding reptile with the flight membrane spread between its BACK legs. madness.

Ive been toying with the idea for a long time - adding syntax highlighting to rendur that is. There were a couple technical challenges standing in the way, but I feel that I've mostly circumvented them. I haven't officially moved rendur to the new version yet - since it still needs more testing, but you can get a feel for it here: rendur with syntax highlighting. Hit me up with feedback. Please. ( I hope it goes without saying that this will not be enabled for IE. Screw IE. Might support safari if i get around to it. )

example of CSS highlighting

I have also added the ability to turn off real time editing as this can be rather processor intensive if you're working on a large page, or with embedded objects. Ive also added the ability to turn off syntax highlighting since slightly older systems can choke on all the cycles it eats. Remember, this is javascript, not native desktop code :)

Keep reading for a technical detail of some of the challenges I had to work around:
First and foremost is adding color to a text area. This is no minor task since emulating a textarea with a div was far more work than I wanted to do, and textareas do not support coloring portions of their contents. I solved this by setting the background to transparent and placing a div behind it with it's innerHTML linkedd to value of the textarea.

Coloring the text, rather than highlighting would have been ideal. I actually toyed with that possibility by means of setting the transparency of the textarea to 50% so the colors of the div below would show through. This had the unfortunate side effect of also making the scroll bars, text selections of text insertion caret semi transparent. I think when rgba() is more widely available, this will be possible.

The other complete pain was keeping the scroll offset of the div linked with that of the textarea. Sounds like it would be easy right? Turns out firefox refuses to fire the onscroll() event. Wtf firefox. (the bug associated with this is marked fixed, but as far as firefox 2 is concerned, it most certainly is not.) This stings me more because I am not used to you letting me down :( The workaround wasn't pretty but it worked. It involved tracking the mouse down/move/up events on the textarea and syncing during each event. This is one of the biggest processor hogs. I will likely rewrite it to delay the sync function call a few milliseconds and cancel any sync calls which are older than the most recent sync call. I then had to trap the mouse wheel scroll but that was surprisingly simple

Just mucking around with javascript, having fun. Javascript fun. Utterly useless - doesn't do a damn thing but entertain for 10-15 seconds.

PS - don't expect it to work in IE. It was fun to write, but not that fun.

In 1971 a small advertisement appeared in the back pages of Scientific American. It read, simply:

Never Be Alone Again.

It has been estimated that some thirty-five people responded to the ad, and another seventeen the following year. However, it cannot be ascertained at this point whether these fifty-two participants comprised the entirety of mail-in replies or merely selected out of a larger pool. In either case, each of the fifty-two respondents received a package approximately six weeks after enclosing twelve dollars in an envelope and sending it to a P.O Box in St. Paul Minnesota. The package contained a simple lightboard, various cables, a 103A modem, and a black button that depressed with a satisfying click. Those given to perusing the advertisements of Scientific American had little trouble connecting the pieces. The lightboard sparkled with an array of small LEDs, in seemingly random formations — the button alone did not seem to have purpose or effect, lying dormant beside the cables. In fifty-two living rooms, puzzled men and women stared at the board, trying to understand the patterns of light. And patterns there were: around 5:00pm, a great number of lights flashed on, so too around 9:00 am. During business hours there was mostly blackness on the board. Late in the night, clusters shone, and in the pre-dawn hours, there were always one or two. Slowly fifty-two souls began to realize that the tiny lights must ignite when other users turned their systems on, that each LED was another person who had seen the St. Paul ad, so was staring intently at the board, who was alone, who was like them. The button presented a mystery — though each one of them experimented with it innumerable times, the lights did not seem to be affected. Through the winter, fifty-two boards glittered in the dark, and fifty-two people watched the other lights, steady, unblinking, silent and anonymous, but somehow comforting.

In St. Paul, Minnesota, Milo Barnes sat at the switchboard of an AT&T public branch exchange. He worked the night shift, connecting jack to jack, watching the lamps light as calls connected, the drone of human conversation in his ears. He was a quiet man, taciturn towards his fellow operators, isolated in his threadbare chair. One of the only black families in his rural hometown, he had never had many friends. His parents had been farmers: onions, greens, root vegetables. Milo had gone to the city after a brief try at college, and found himself enveloped by the warm arms of Ma Bell. He remained introverted and painfully shy, despite being surrounded by a cloud of lively talk every night. In the eighteen months that the 103A modems were active, he never mentioned his thoughts to anyone, was never caught taking them from branch offices, moved through the PBX like a ghost.

In March 1972, the lightboards began to blink. It was not a very great logical jump for Barnes’ enthusiasts to recognize Morse code, and it was, after all, a short and simple message, repeated endlessly.

All’s well that ends well yet

Rose-Marie Gascoigne of New Orleans was the first to answer. She had sat with her lightboard for hours each evening, accompanied by two disinterested tabbies. She said later that her heart had “just plain stopped” when the lights began to flicker on and off. “The whole world just held its breath. I could hear the blood rushing in my head. I knew what to do–what the hell else was that damn button for? It just took me a couple of days to work myself up to it. It was like sending a message to God.”

She reached out to the all but forgotten black button, and tried to remember what she knew of Morse.

She was not the last. Danny McKitterick sent his message from Portland just minutes after Rose-Marie, by all accounts, and in the very small hours of a Minnesota dawn, Milo Barnes sat breathless among his jacks and his lamps as one by one they flashed on and off, a slow and tremulous human server in the days before the whole of the world was networked thus, finishing his line, answering his brief, quiet message, lights in the dark:

Though time seem so adverse and means unfit though time seem so adverse and means unfit though time seem so adverse and means unfit

Over and over, again and again. Milo must have smiled–it is a comfort to think of him smiling. While the other operators worked around him, oblivious, he sent out a new message to each machine that had supplied the coded response he sought, and this one was simpler than the others, more direct, and more frightening.

Pick up the phone at midnight.

As the moon came up in St. Paul, Milo Barnes closed his eyes and slotted a silver jack into place. And another, and another. San Francisco to Cheyenne. Phoenix to Charlotte. Seattle to Sacramento.

New Orleans to Portland.

Milo sat among his lamps and wires, his hands taut, and held his breath.

In Louisiana, Rose-Marie Gascoigne held hers, and put her ear to her receiver.

“Hello?”

The Loneliness Engine | Invisible Games

The super alpha build of the next version of firefox [code name:minefield] is pretty DAMN fast. download minefield.

Have you ever wanted to sort an array in a non-standard way? Have you ever wanted to sort an array of objects by one of the properties common between the objects in the array? Continue reading!

I will move through this topic as if you have no idea how awesome Array.sort() is. If you know some already, you may want to skip a bit.

Say we have an array that looks like this:
["A","a","C","c","B","b"]

When we sort it, we would expect: AaBbCc right? Well, I would anyway. Turns out we get ABCabc. Pretend you REALLY want AaBcCc, or some other non-standard sorting result. You can still use Array.sort()! It turns out that Array.sort() accepts a single argument. The expected argument is a function which will itself accept two arguments. The function should compare the two and then pass back -1, 0, or 1 depending on what you'd like to do. Return a value of 1 or greater if the first value should be first, a value of -1 or less if the second value should be first, or 0 if they are equal. This is allows us to sort an array of numbers (since by default, the sort function will sort numbers alphabetically - meaning 1,2,26,33,4,5,6 etc).

a quick and dirty mock up might look like this:
sortedArray = myArray.sort(function(a,b){return a-b});

awesome! Now we can sort by all manner of arbitrary and senseless rubrics. We could sort an array of strings but their length rather than alphabetically like so:
myArray.sort(function(a,b){return a.length-b.length});

Now, lets say that instead of an array of strings or numbers, we have an array of objects. [{object},{object},{object}] I don't know what would happen if you tried to sort them, but I would have to imagine nothing useful coming out the other end. In order to sort the objects, we need a rubric or a rule. If all the objects share a member value or property, we can use that and write a function like this:

myArray.sort(function(a,b){
     valueA = a.price;
     valueB = b.price;
     if(valueA < valueB){return -1}
     if(valueA > valueB){return 1}
     return 0;
});

Omg this is getting exciting! Can you feel it? All of a sudden, huge arrays of complex objects can be thrown to the native javascript methods rather than writting your own cumbersome sorting functions. The problem I ran into is that if you want to sort your array by multiple dimensions, the sorting methods replicate like leporidae and before long, you've got pages of them (cause you'll need two for each dimension. One to sort ascending, and one to sort descending). Its too bad that Array.sort() wont pass two additional arguments to the sorting function - one for the member property and one for the direction.....

And then there comes a point in every boys life where he finally finds a reason to write a function which returns a function as the output.

i now present - getDynamicSortMethod()

function getDynamicSortMethod(sortProperty, direction){
	var thisMethod = function(a,b){
		var valueA = a[sortProperty];
		var valueB = b[sortProperty];
		if(typeof valueA != "number" && typeof valueA != "object"){
			var valueA = a[sortProperty].toLowerCase();
			var valueB = b[sortProperty].toLowerCase();
		}
		if(direction.toLowerCase() == "up"){
			if (valueA < valueB) {return -1}
			if (valueA > valueB) {return 1}
		}else{
			if (valueA > valueB) {return -1}
			if (valueA < valueB) {return 1}
		}
		return 0;
	}
	return thisMethod;
}

we can then use this function to do all manner of crazy sorting! Assuming we had an array of objects like:

{
	name: "A car",
	price: 40000,
	year: 2008,
	maker: "Tesla",
	otherData: "as needed"
}

We can perform the following sorting operations:
sortedArray = myCarInventory.sort(getDynamicSortMethod("maker","up"));
sortedArray = myCarInventory.sort(getDynamicSortMethod("price","down"));
sortedArray = myCarInventory.sort(getDynamicSortMethod("year","up"));

One morning, one morning, one morning in May,
I spied a young couple, just making their way.
Now, one was a soldier, and a brave one was he,
And the other was a lady, and a fine one was she.

And it’s “Where are you going?” said the soldier, so free.
“I’m going to yon river; it’s flowing for me.
Going down to yon river, and sit by that spring,
And watch the water gliding, hear the nightingale sing.”

And, “May I go with you as you journey along?
If I’m to go with you, I’ll sing you a song.
I’ll sing the old Concordance, and I’ll make my fiddle ring.
Then we’ll watch the water glide and hear the nightingale sing.”

Said the lady to the soldier, “I’m lonesome and blue,
And I think from your actions that you’re lonesome, too.
We’ll just walk together, then we’ll sit by that spring,
And we’ll watch the water glide and hear the nightingale sing.”

Now after they’d been there for an hour or two,
Out from his satchel a violin he drew.
He played the old Concordance; oh, he made that fiddle ring,
Then he'd watch the water glide and hear the nightingale sing.

Said the soldier to the lady, “It’s time I should go.”
“Oh, no,” cried the lady, “Play me just one tune more,
For I had rather hear your fiddle, or just tap a string,
Than to watch the water gliding and hear the nightingale sing.”

So he tuned his old fiddle to a much higher key.
He played the Shamrock of Erin--oh, he played it so free.
He played the Shamrock of Erin, and he made his fiddle ring.
Then they watched the water gliding, hear the nightingale sing.

Said the lady to the soldier, “Will you marry me?”
“Oh, no, my fair lady, this never could be.
I have a wife in Scotland with children twice three,
And that, with the army, is plenty for me.”

“Goodbye,” said the soldier, with a parting caress.
“Tomorrow I must be at the throne of Queen Bess,
But when I come back, it will be to this spring,
Then we’ll watch the water glide and hear the nightingale sing.”

“Goodbye,” said the lady, and she gave him her hand.
“I’ll think of you often in Ireland’s fair land,
For I had rather hear your fiddle, or just tap a string,
Than to watch the water glide and hear the nightingale sing.”
mp3