srsly why are you even reading this

Hello Web Rebels
1 month ago
I’ll be speaking at the amazing Web Rebels conference in May. The rest of the speaker lineup has me completely horrified. These are some of the best heads in contemporary Javascript.

#
“There’s food in the kitchen if you want some”
6 months ago
This turn of phrase, which exists both in English and Norwegian (and probably in other languages (I assume this because I’m a privileged white male)), annoys me to no end.

Okay, so we have established that there is food in the kitchen, if I want any. But what about if I don’t want any? Where is the food then? Is the kitchen empty? Yes, I know the difference between if and iff, but it still sounds silly and illogical. Quantum food, Schrödinger’s sandwich.

It’s super common and everyone uses it, even I sometimes, though I try my best to avoid it. The problem is that most alternatives are more wordy and take longer to say (“There’s food in the kitchen, you can have some if you want”). Unambiguity has a price, and the alternative isn’t super appealing either. I guess I’ll just have to live with it.

#
Fongerpronts
7 months ago
Yesterday Apple announced the new iPhones, the 5c and the 5s. The 5s has a fingerprint sensor embedded in the home button, and in light of the recent uncovering of NSAs widespread spying programs, a lot of people are whining on Twitter and elsewhere about how this sensor will harvest users’ fingerprints and send them all to the NSA.

Apple claims that the fingerprint data is stored securely, can only be accessible by the fingerprint sensor and not from software, and will never be sent over the network. If they are lying about this, jailbreakers will be able to break in and access fingerprint data within days of the phone’s release.

Apple must know this — if the fingerprint data is proven to be vulnerable to hackers, or is sent to Apple’s servers without user consent, the PR backlash will be tremendous. I guess we’ll have to wait and see.

#
What’s the shortest javascript snippet for finding the sum of an array?
8 months ago
Here it is:
```
function sum(a) {
    return eval(a.join('+'));
}

console.log(sum([1,2,3,4,5]));
```
(Please don’t do this)

#

Sleep Sort

9 months ago

SleepSort

I present to you my favourite sorting algorithm, sleep sort, implemented in Javascript:

var sleepSort = function(list, callback, extract) {
    if (!extract) {
        extract = function(value) {
            return value;
        };
    }
    var result = [];
    list.forEach(function(value) {
        setTimeout(function() {
            result.push(value);
            if (result.length === list.length) {
                callback(result);
            }
        }, extract(value));
    });
}

sleepSort([3,1,6,8,20,7,91], console.log);

As you can see the time complexity of this algorithm in the base case is something like O(Max(input)+n), which makes it unsuitable for sorting big numbers. It also relies on the accuracy of the timers in your Javascript runtime, so results may vary.

Here it is in 115 bytes:

function(a,c,e,r){r=[];a.forEach(function(v){setTimeout(function(){r.push(v);r.length==a.length&&c(r)},e?e(v):v)})}

How I write simple Angular.js directives
10 months ago
The project I am currently working on uses Angular.js, which is a fantastic framework for making impressive-looking web apps. If you haven’t checked it out, please go do so now, it is really good.

One of the most powerful features of Angular is directives, which let you extend HTML with custom tags and attributes. This lets you develop your app in a much more declarative style, using the power of the DOM for all it is worth.

So, say I want a way of toggling a class name on an element at a specific interval. This is what I want the HTML to look like:
```
<div class-toggler="aaa" toggle-interval="1000"></div>
```
Once I have written the classToggler-directive, this will tell Angular to toggle the class aaa on this element every 1000 milliseconds.

I like to keep things nicely separated, so I’ll do this in three parts. The first part is writing a simple plain vanilla JavaScript function that does the toggling:
```
var classToggler = function(element, className, time) {
    if (!time) {
        time = Math.round(Math.random() * 5000) + 2000;
    }
    element = $(element);
    setInterval(function() {
        element.toggleClass(className);
    }, time);
};
```
Pretty simple. If the desired toggle time is not provided, a random interval between five and seven seconds will be used.

The next thing I do is to wrap the toggling function in a simple jQuery plugin (because why not, right?):
```
$.fn.classToggler = function(className, time) {
    return this.each(function() {
        classToggler(this, className, time);
    });
};
```
Couldn’t be much more straightforward than that.

The final part: Writing the Angular directive itself. That’s actually pretty simple too.
```
Angular.module('MySuperFancyModule').directive('classToggler', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            element.classToggler(attrs.classToggler, attrs.toggleInterval);
        }
    };
});
```
There’s a few things going on here:
- Names are camelCased in the code, but use dashes in the HTML. This can be a bit confusing at first, it is one of the idiosyncrasies of Angular.
- The restrict: 'A' clause means that this directive only can be used as an attribute on an HTML element — it does not define an element of its own.
- The link-function is what makes everything happen. Here it simply triggers the classToggler jQuery plugin on the provided element, fetching the class name and toggle interval from the attrs object, which contains all the element attributes.
And that’s how you write a super simple Angular directive. Directives are super powerful and can be used for much more interesting stuff than this, but at least it’s a taste of how it’s done

#
Super Heavy Album-Openers
10 months ago
Here are, in no particular order, my favourite heavy album openers.

Opeth - Wreath (Deliverance, 2002)

This took my breath away the first time I heard it. Momentous.

Strapping Young Lad - Imperial (Alien, 2005)

Just insane.

High on Fire - Serums of Liao (De Vermis Mysteriis, 2012)

Another great drum intro, and you’re thrown straight into the screaming of a shirtless madman.

Mastodon - The Wolf Is Loose (Blood Mountain, 2006)

I do indeed love me a great drum intro.

The Ocean - Hadean (Precambrian, 2007)

If you haven’t heard The Ocean before, do yourself a favour and check them out. Their newest album, Pelagial, is just stunning.

Meshuggah - Concatenation (Chaosphere, 1998)

The Swedish kings of math metal and eight-string guitars.

#
Wtf is a “befunge”
10 months ago
I recently did a lightning talk at the Web Rebels conference in Oslo about my implementation of Befunge in JavaScript. The talk was very well received, so I thought I’d share parts of it here.

Firstly, the code is on GitHub, and there is also a live playground thing if you want to try it out yourself.

Befunge is an esoteric programming language in the family of Funges, in which every statement exists on a geometric grid, and the order of execution is arbitrary. Befunge is completely stack-based, which means that the only place to store data is on a stack; and deeply reflective, which means that it can read and modify its own code at runtime. If you believe this is annoying to program in, you are completely correct. It is terrible.
```
>              v
v"Hello world!"<
> ,,,,,,,,,,,,@
```
This is a more or less canonical “hello world“. Execution begins at the top left and initially moves rightwards. Each statement consists of just a single character. When the program cursor (for the lack of a better term) hits something that looks like an arrow (<, >, v, ^), it starts moving in that direction. The " symbol toggles string mode, where every subsequent character (until the next ") is pushed on the stack as an ASCII value. The , operator simply pops a value from the stack and outputs its value as an ASCII character. Simple, right? Wikipedia has a handy list of all available instructions.

There are more samples on the playground page. Writing the fizzbuzz code opened doors to dark places in my mind where I would rather not go again so it will be not explained here. (If you want to dive into it, remember to roll for sanity first.)

The inspiration for this thing was Mary Rose Cooks talk at JSConf EU 2012 about developing Isla, a programming language for children. Here she talked for a couple of minutes about multimethods, which was enough to make my fingers itch to write some code. So during the breaks and a couple of the more boring sessions of the conference, I whipped together a tiny multimethod library and started the befunge implementation. Most of it was done in a couple of hours.

Don’t know what a multimethod is? It’s pretty simple! In essence it’s a functional programming equivalent of a switch-statement – basically, a method that can have multiple implementations based on its input. The library itself is really simple at just 35 lines of code – what it can be used for is much more interesting.

The code to handle all the Befunge-stuff should be quite simple and easy to follow. It consists of N main parts:
- Mm.js, the multimethod library.
- parser.js, which takes the input program as a string and returns a nested array containing the code grid.
- interpreter.js, which consists of a single large multimethod that takes the current operator plus the current program environment as arguments, does some stuff based on what the operator is, and returns a modified argument.
- befunge.js, which sets up the program environment, runs the program loop, and provides an external interface.
- browser.js, which is a simple wrapper for running Befunge in a browser and providing input/output.
- node.js, a small example on how to run Befunge from, uh, node.js.
For browser delivery, the program is concatenated and packaged together by the fantastic Browserify by the inimitable Substack.

That’s it. There is no moral or conclusion, the end result is useless but maybe interesting? I don’t know. Play around with it if you like, I find it pretty fun.

#
1 Year Ago
10 months ago
Am I going to become that guy who only blogs about how sorry he is for not blogging more? Well, I hope not. Anyways, here is what has happened to Safari Keyword Search since last I wrote.

When Safari 6 did ship, they included a brand spanking new “beforeSearch”. This event triggers when the text in the URL bar is understood to be a search query, and the raw search text is passed to the event handler. This means that Safari Keyword Search now works perfectly without having to guess whether something is a search, and without having to parse the search text from the URL. Brilliant!

I also took the opportunity to rewrite the whole UI and place the settings on its own page instead of embedded in whichever page you were visiting. The UI code itself is still a horrible mess of ugly spaghetti but it seems to work fine.

#
Safari Keyword Search and Safari 5.2
2 years ago
So I have a modestly popular Safari extension that enables keyword search from the address bar. This extension relies on an event called beforeNavigate, which is triggered whenever a user tries to load a url. This event has been available for extensions since Safari 5.1.

The event is kind of tricky to work with for what I’m trying to do, since it is triggered after Safari has tried to parse whatever text was entered in the address bar into a URL. This means that when a user types g monkey, the event provides the URL http://g%20monkey/, making parsing harder than it should be, especially for the default keywordless search (which is Googles “I am feeling lucky”). In addition the search phrase a user enters cannot contain a colon symbol, as that causes Safari to show an error page before the event is triggered.

These are minor annoyances but work-aroundable. The real problem is Safari 5.2, which unifies the search bar and the address bar into a single text field that is similar to (but much less capable than) the Omnibar in Chrome. What now happens is that anything that doesn’t look like a URL is turned into a web search, before the beforeNavigate event is triggered. That means that the data sent along with the event looks like http://google.com?q=g%20monkey. This could still be parseable by the extension, but it is impossible to know whether the user entered it as a keyword search or actually want to search google for “g monkey”.

Needless to say this regression makes my extension broken and useless in Safari 5.2. I have reported this issue to Apple, and suggested three possible ways to fix it, in order of preference:
1. Implement custom keyword searching from the addres bar in Safari, like other browsers has. This would obviate the need for my extension.
2. Create a new API event that is triggered before the text entered into the address bar is parsed into a URL.
3. Fix the API, so it works like it did in Safari 5.1.
Fingers are crossed.

#

Hello

My name is Arne Martin Aurlien and I write things here sometimes.

I work as a frontend developer at Boost Communications
I write Javascript mostly, also other things
I live in Trondheim, Norway
I have Veronicaa wife
I’m on Twitter
I’m also on GitHub
Send me an am@aurlien.nete-mail

srsly why are you even reading this

Opeth - Wreath (Deliverance, 2002)

Strapping Young Lad - Imperial (Alien, 2005)

High on Fire - Serums of Liao (De Vermis Mysteriis, 2012)

Mastodon - The Wolf Is Loose (Blood Mountain, 2006)

The Ocean - Hadean (Precambrian, 2007)

Meshuggah - Concatenation (Chaosphere, 1998)

Hello