Mikael's blog

A developers seventh time trying to maintain a blog

chevron_left 2011 chevron_right

December

Wednesday 21

The Gift of Source Code

I'm not sure if anyone is interested in my source code for this blog, but since I've already posted some bits and pieces of it from time to time, I thought, why not release it all? If your browser has a width of more than 720 pixels, you will see a new button in the menu labeled "Source code". Feel free to browse, and enjoy! DISCLAIMER: Not all of my code is that pretty and I've been meaning to refactor some of it. In other news, I'm leaving for the west coast tomorrow morning, so this might be my last post this year. It all really boils down to how tired I will be after playing with all my lovely nephews and nieces all weekend. Merry Christmas and Happy New Year!
Saturday 17

Feeding the crowds

For a while now I've been trying to decide between ATOM and RSS for by blog feed, and yesterday one of our company's owners asked me for a feed to my blog so that he could consume it at our new company web site. I've finally decided to create an ATOM feed and if anyone has any problems consuming it, please contact me and I will try to fix it. For now it's not a full feed. Each entry contains the same amount of text as the archive listings since I've yet to figure out what to do about all the source code that's in my blog posts. The source code formatting relies heavily upon CSS and I'm not even sure that I want my full posts in the feed. Until I've made up my mind it will work mainly as a way of getting notified of new posts without having to visit the web site.
Tuesday 13

Santa Lucia

The time left before my holiday leave is running out fast and I've got a ton of stuff to do at work. To top it all off, this entire week is filled with urgent stuff to do, when I do manage to get myself home in decent time. I apologize in advance for the lack of posts this week. I hope to get back up to speed soon.
Friday 9

A Tiny Bug

I've been using (and still am in production) an old JavaScript function called `parseInt` when parsing my DateTimes for comments and posts. For some reason it showed some weird behavior today. I noticed a comment that was written on December 0. I looked it up in the database and it turns out it was actually written on December 8. Now the 8 should have been parsed from the DateTime `2011-11-08 ...` into the string `"08"` and then I assumed `parseInt` should have gotten rid of that extra 0 for me. I found my problem in the `parseInt` documentation over at w3schools. > The parseInt() function parses a string and returns an integer. > > The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string sh
Wednesday 7

Client-side JavaScript Initialization

Yesterday I started using the [BundleController](http://lofjard.se/post/automatic-minification-and-bundling-with-nodejs) with my JavaScript files on the client-side. I also deployed my [ViewManager](http://lofjard.se/post/handling-views-in-nodejs) so that all my views now uses the bundled and minified JavaScript file produced when I start (or restart) my Node.js server. This meant that all my JavaScript was being run on every page in the blog, and while it isn't that much JavaScript yet I still wanted to improve on it. I decided to make use of some closure magic and built something like this: ````js if (typeof(BlogPageFunctions) == 'undefined') { BlogPageFunctions = {}; } BlogPageFunctions.admin = function () { // query some objects with jQuery here, // bind up some events etc.
Tuesday 6

Architecture in JavaScript - Closures

Today is Tuesday, which for me means I've held another tutorial at work. Today it was less hands-on and more of me just talking and showing examples on the projector using the wonderful [jsfiddle](http://jsfiddle.net/) JavaScript quick-hack-tool. My talk today was mostly about closures, so I thought I should write something here on the subject as well. I find that it's not that easy to explain closures using just words, but if I were to try it would go something like this. * A closure is a functions variable scope that still exists after the function has executed. * A closure only exist as long as something else has a reference to something that needs it. * A closure is created when an outer function has inner functions. If you have no idea what I meant with any of that, then I hope th
Sunday 4

Broken Archive

Turns out I broke the archive yesterday when there were suddenly two months to render posts for. It was a simple array indexing problem and now it's up and running again.
Saturday 3

Handling Views in node.js

This weekend, my wife and daughter have been away up north, visiting my in-laws. I thought this would be a great opportunity for me to buffer up on some blog posts, but it seems like my inspiration mostly left with them. Last Tuesday at my weekly tutorial at work we did a bit of work with jQuery and Mustache. On my blog I use Mustache, not only on the client side, but on the server side as well. As I enjoy using the MVC pattern, I have tried to implement it to the best of my extent. ## First things first Mustache is a light weight templating engine with emphasis on simplicity. It's been implemented for a lot of languages and one of them is JavaScript. In Mustache, a template looks like this: ````html Hello, my name is {{name}}! ```` In my case the templates involve a lot of HTML, bu

November

Tuesday 29

Automatic Minification and Bundling with node.js

Scott Guthrie recently wrote about the new [minification and bundling](http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx) process that has been built for ASP.Net 4.5. I read his blog post, liked what I read and then I though of doing the same thing for my blog. I've been looking at minification programs for a while but I've put it off so far because I didn't want to add another step to my manual deployment process. Now I'm thinking I don't have to have another step. I could do it "automagically". ## The BundleController ````js /***************************************** * Bundle Controller ***************************************** * Author: mikael.lofjard@gmail.com * Website: http://lofjard.se * License: MIT Licen

Architecture in JavaScript - Inheritance

There's been a lot of debate over the years about whether JavaScript is an object-oriented language or not. Most of these discussions seem to pan out into arguments over inheritance. JavaScript, by design, lends itself well to inheritance through extension. However, JavaScript can support lots of different types of inheritance. I'm going to talk about a few of them today. Consider the following code: ````js function Car() { this.color = "Blue"; this.brand = "unknown"; } function Ford() { var o = new Car(); for(var i in o) { this[i] = o[i]; } this.brand = "Ford"; } var myCar = new Car(); var myFord = new Ford(); ```` The `myCar` object would have the properties `color` and `brand`. The `Ford()` constructor method creates inheritance by creating a `Car` and copying a
Sunday 27

The Logarithmic Tag Cloud

A few days ago I sat down and tagged all my posts. Last night I decided to write a tag cloud. ## The first try I started out with a simple linear scale: ````js var countDiff = maxCount - minCount; var sizeDiff = maxSize - minSize; if (countDiff == 0) countDiff = 1; // no divide by zero for (var i in doc) { var weight = (doc[i].value - minCount) / countDiff; var size = minSize + Math.round(sizeDiff * weight); model.tags.push( { tag: doc[i].key, size: size , count: doc[i].value } ); } ```` * `maxCount` - The highest occurance of any tag. * `minCount` - The lowest occurance of any tag. * `maxSize` - The biggest allowed font size. * `minSize` - The smallest allowed font size. * `doc[i].key` - The name of the current tag. * `doc[i].value` - The occurance of the current tag. It rende

Oh Crap: Redux

The commenting system had stopped working again. Christ, I really need to pay more attention to it. It's probably been down since at least Thursday. On the other hand, I managed to remove my old CouchDB views without crashing the server. I can keep telling myself that something worked out the way it should.

Refresh

I've done a fair bit of CSS and HTML work today, so you might need to hit F5 and refresh your cache if the site looks weird. =)
Saturday 26

Cleaning up

I'm starting to have quite a few views in CouchDB and I've done my best to name them in a logical way so that I can easily see what they do by reading their names. Today I created a couple of new views and I decided that I needed to rename some old ones for clarity. Just when I was about to hit 'Save' on one of my design documents I felt a cold shiver going down my spine. I stopped and thought about it for a second and I realized that I don't have a separate database for my development environment, nor do I want to have one. This made me take a different strategy. At the moment I have a lot of views that does the same thing but are named differently. That's because I created new views, with better names, instead of removing the old ones. I will remove the old ones after I'm done making su
Friday 25

A Simple Routing Solution with Node.js

A few days ago I wrote about [not reinventing the wheel](http://lofjard.se/post/why-node-static-is-a-good-idea). Today I'm going to talk about the opposite. If you're building an 'enterprise' grade application, reinventing the wheel is almost always the wrong thing to do. This blog however is something I do just for fun, and reinventing the wheel can sometimes be the best way to learn how stuff works. It's one of the reasons [Ayende](http://ayende.com/blog) had for writing [yet another document database](http://ravendb.net/), and it's the reason why I decided to write my own routing engine. Sure enough I could have used the very popular [Express](http://expressjs.com/) framework, but where's the fun in that? ## What I wanted As you might know, I work almost exclusively with the .Net st
Thursday 24

Hope

I was very happy when I saw [this](https://plus.google.com/100275307499530023476/posts/hVw7ykmsvrx) the other day. I knew it was bound to happen, but for it to happen so soon was a nice surprise. Hopefully the ROM for the Galaxy Tab 8.9 won't be far behind. Samsung recently hired the founder of CyanogenMod, Steve Kondik, and since Samsung tends to take some time releasing their own ROMs, this seems like a nice way to speed things up at least for rooted Samsung device owners. I'm really looking forward to using client certificates on my tablet. Someone also managed to cram <abbr title="Ice Cream Sandwich">ICS</abbr> onto his G1 today. Now that's impressive. This bodes well for my not-as-aging-as-a-G1 HTC Desire. It will be interesting to see if it can run Android 4.0 in any usable way.

Node.js Development Server Strategy

When I started building this blog my server was the production environment and my laptop was the development environment. This all changed when I added the database and started doing more UNIX specific stuff such as path resolving and such. So from then until yesterday my production environment was also my development environment. Not the best strategy I admit. Yesterday when I rewrote the architecture I also decided that I needed to set up a separate node.js instance as a development environment on the server. The first problem I had to solve was configuration. My configuration was scattered all over the code base so I moved it all into `index.js` which is the file I execute with node when I start the server. I also did not want to have to change my configuration before I deploy (copy)

Architecture in Javascript - Modules

About a week ago I wrote about [turning client side JavaScript into CommonJS modules](http://lofjard.se/post/the-power-of-commonjs). The scoping of variables in CommonJS makes this easy, but what if we wanted to do it the other way around? In CommonJS, modules are scoped by file and all public methods and properties must be propagated through the <code>exports</code> object. ````js var foo = 'foo'; function bar() { return foo; } exports.bar = bar; ```` In the above example the `foo` property is private to the CommonJS module and can only be read from the outside by the public method `bar()`. If we were to include this JavaScript file on the client however, the property `foo` and the method `bar()` would both exist in the same scope as all other JavaScript files. What we need is to

Stupid admin

Sometimes I go to bed at night with an open ssh session running the server in the foreground. If that times out, so does the server. I really need to pay more attention to what I'm doing. Sorry about the down-time... \*ashamed\*

Overhaulin'

Tomorrow (actually today when I write this) my daughters day care is closed and I get to spend the day with her at home. That meant that I could stay up late tonight and do some work on the blog. The last few days I've felt that the file sizes were beginning to get out of hand. This easily happens when you're writing JavaScript since it's kind of a cowboy language. I love that I am able to twist and bend the language to my will, but the same thing that makes JavaScript so powerful can also be its worst enemy. It's way to easy to loose control of yourself and before you know it you end up with a 1000-lines-of-code monster file and your head starts spinning every time you want to make a change to it. So today I rewrote the blog. Not all of the logic, but basically all of the architectural
Tuesday 22

Why node-static is a good idea

If you are using node.js as a web server (as I am) and you want to serve up static files there are a lot of ways you can go about doing that. I'm going to talk about 3 of them. ## The bad path: Serving them yourself It's really easy to do this for a proof of concept. Node.js has an easy to use `fs` library for reading and writing files to the file system. In order to serve up some HTML page you just parse the request URL, retrieve the file using `fs.readFile(...)` and then write the file to the response stream. I did this for the small server I use at my Tuesday tutorials at work. The problem we faced last Tuesday was that our web site would not load properly in IE9 without resorting to "compatibility mode". At the time I didn't have time to look into it (as I was tutoring) so I did it

Node TCP Client

A few weeks ago I bought an [iTach IP2IR](http://www.globalcache.com/products/itach/ip2irspecs/) from a company called Global Caché. Combined with an iPhone app called iRule it lets me use my iPhone to control my home theater equipment. This has been an awesome experience. No more fighting over remotes since my wife has the same app on her phone, and when our daughter wakes up on the weekends we can turn the TV on in the living room without leaving the bed and thus buy our selfs a couple of minutes more snooze time. The thing that makes Global Caché more awesome than most hardware companies is that they publish their API specs on their web site, and it's a really nice, simple ASCII based TCP API. The API is really what made me choose this product over similar options. Since the API work
Sunday 20

Programming Flu

This weekend I've been at home with some kind of wierd illness. At first I thought it was <del datetime="2011-11-21T15:55+01:00">angina</del> <ins datetime="2011-11-21T15:55+01:00">bacterial tonsillitis</ins> since that's what my daughter came down with right before I left for &Oslash;redev. But now I'm thinking it's something viral. Not in the Internet pretty-pictures-of-kittens way but an actual virus. I've been having some fever but it hasn't been that serious and my throat has been really soar, but it never really took of the way my daughters <del datetime="2011-11-21T15:55+01:00">angina</del> <ins datetime="2011-11-21T15:55+01:00">tonsillitis</ins> did. However, I've been totally knocked down by it. I spend half the day in bed and the other half knocked out on the couch. So far it d
Friday 18

Oh Crap!

I just realized that comments had stopped working. I had forgotten to upload the new JavaScript file with the SyntaxHighlighter code removed after I implemented it server-side. Silly me. Comments are now working again.

WiFi Channel 13 and Android 2.x

A friend of mine told me about how a program called [inSSIDer](http://www.metageek.net/products/inssider/) helped him get better performance from his wireless network at home. A few days ago I decided to try it out. inSSIDer is this nifty little profiling tool that allows you to see visually all the wireless networks in your vicinity, what their signal strengths are and what channels they're occupying. It turns out I have a 14(!) networks interfering with mine. The best way to minimize interference is of course to use another channel. The problem is that 802.11g/n networks use approx. 20 MHz of bandwith and the 13 channels allowed (only 11 in the States/Canada) are spaced only 5 MHz apart. 802.11b networks used approx. 30 MHz of bandwidth which in turn made room for only 3 non-overlapp

Client Certificates on Android

Today I stayed at home with a seriously soar throat and a mild but annoying headache. Unable to sleep through the day I set upon myself the task of creating an administration interface for the blog. One of the reasons I had for building my own blog engine was to make it easy for me to post from my Android tablet. It's been pretty easy to write new posts on my computer at home using the CouchDB administration interface, but I don't want that exposed to the Internet. I thought for a while about building a classic username/password login with sessions and all the usual stuff but to do that I wanted to have it transfer credentials over HTTPS. That meant creating SSL keys and self-signing a certificate. No problem there since my server runs Linux and all. But when reading up on TLS/SSL and se
Wednesday 16

The power of CommonJS

A few days ago when I was putting my posts into CouchDB, instead of relying on a static HTML file, I also implemented templating with [Mustache](http://mustache.github.com/). Mustache is small, easy to use and has almost no advanced features. It's power lies in the vast amount of implementations it has for different platforms but most of the power comes from one single implementation; the JavaScript implementation. There's nothing really special about the JavaScript implementation except that it is written in JavaScript and is intended to run in the web browser. The implication of having this implementation however is that you can now use the same template files on both the server side and client side. That was a big win for me so I decided to use it. There is also, on [their website](ht
Tuesday 15

SplitCode v0.1 - A success story

Socket.io almost makes it to easy. Here's my early early alpha code. Works like a charm. Server code (for node.js): ````js var io = require("socket.io").listen(1338); io.sockets.on('connection', function (client) { client.on('codeChanged', function(code) { client.broadcast.emit('changeCode', code); }); client.on('scrolled', function(position) { client.broadcast.emit('scroll', position); }); }); ```` Master.html: ````html <!doctype html> <html> <head> <meta charset="utf-8" /> <title>SplitCode Master</title> <script src="socket.io.min.js"></script> </head> <body> <textarea id="mastertext" onKeyUp="maybesend();" wrap="off"></textarea> <script> var master = document.getElementById("mastertext"); var socket = io.connect('192.168.0.15:1338'); var th =

Coding on stage

I held a tutorial on HTML5 today at work and my preparations led me to think about coding while doing a presentation. This was done a lot at &Oslash;redev, but everyone did it in the same two ways. Either you duplicate your screen and let your attendees see everything that goes on on your desktop, or you extend your desktop, keeping your notes on the computer screen and your code on the projector. The problem with the first option is that you need to have your notes on paper. The problem with the second option is the strain it puts on your neck when you have to look at the projector while coding and at the same time facing the attendees. What I wanted was a window on my desktop that I could write code in and another window on the extended projector screen that would show the code in real
Monday 14

Double linked paging in CouchDB

Yesterday I said that I would look into paging, as my post count had reached 10+, so that's what I did today. Paging in CouchDB isn't all that straight forward for a bunch of reasons that I'll try to explain. Firstly, to be able to query anything in Couch you need a View. A Couch View is basically a really fast hash of your documents that is constructed with a little piece of javascript (like everything in Couch). In my case it looks like this: ````js function(doc) { if(doc.type === "blogpost" && doc.published) { emit(doc.dateTime, doc); } } ```` The execution of this code is what makes Couch so fast for reads. The magic can be read about [here](http://couchdb.apache.org/docs/overview.html) and if you're interested in how Couch maintains its indexes, then it's a good read. It

Somewhat backwards compatible

I got the chance to see my blog through the eyes of Internet Explorer 8 today, and boy was that something to behold. There was no styling what so ever. It looked like the internet pre 1995. This site uses HTML5 and CSS3 and that is fine for most modern web browsers. Even those that has no support for HTML5 renders ok, mostly due to the fact that they ignore the tags they dont recognize and just renders them as they would any `<div>`-tag. But not dear Internet Explorer. Internet Explorer < 9 just ignores the tags and doesn't style what it doesn't know. Awesome! Good thing then that a couple of guys realized that you could trick IE into rendering unknown tags by creating them with javascript. ````js document.createElement("mysuperspecialtag"); ```` The above piece of javascript is all th
Sunday 13

The Archive

While looking at my [Google Analytics](http://www.google.com/analytics/) statistics I noticed that my empty archive page had almost as many hits as the front page. And so, with little to loose, I set out to create a dynamic [archive](http://lofjard.se/archive). Now I don't even have paging on my front page yet, but since this is my 10th post I really should make that my next priority.

Notes from &Oslash;redev

As you know, I went to the &Oslash;redev conference in Malm&ouml;, Sweden last week. It was a great conference and I saw a lot of great speakers talk on a lot of great topics. The first two days of &Oslash;redev were "workshop" days. On monday we had a full day workshop with [Greg Young](http://codebetter.com/gregyoung/) teaching us the ins and outs of [CQRS](http://cqrs.wordpress.com/). The prerequisite to this workshop was a 6.5 hour long [video](http://cqrs.wordpress.com/video/). Between that and the 8 hour long workshop there was a lot of learning going on on the topic of CQRS, Event Sourcing and DDD in general. I always enjoy watching Greg speak because he's very passionate about everything he does and that always gets me going. Tuesday was NServiceBus day. [Andreas &Ouml;hlund](htt
Saturday 12

Bring in the spammers!

And the blogger said; "Let there be comments!", and he saw that it was good. I just finished a first 'draft' of a commenting system. Please don't abuse it.

Running on Couch

I'm home from &Oslash;redev and I just couldn't resist using some of my new found inspiration to get some work done on the blog. Apache is no more! The blog now runs fully on node.js and I even got around to putting all my static blog posts into CouchDB and it is now read from disk (or cache most likely) and then templated with Mustache to form my blog. This means that I can finally have unique links for each blog post which should make it a bit easier for me to promote my updates. As I currently don't have any way of writing posts on the site, I use the CouchDB admin interface. This I feel will probably change some time in the future, but for now it works for me.
Saturday 5

&Oslash;redev 2011

Last year me and some of my work mates decided to go to the [&Oslash;redev](http://ordedev.org/2011) conference in Malm&ouml;, Sweden. It turned out to be both educational and a lot of fun, so naturally I'm going this year as well. &Oslash;redev is a 5 day conference starting on November 7 so I'll be there for the better part of next week. We decided to do a four day visit (as we did last year) and go home on thursday evening. When we registered (almost as soon as one could) there wasn't a whole lot of things that we were interested in on the schedule for friday but a few weeks ago they put in a Windows 8-track on that day and now I'm sorry that I'm going to miss it. My family on the other hand might appreciate having me home, or at least I hope they will. I will try to write some post
Friday 4

Experimental server is up

I've put up a node test server running on port 1337 (it was already forwarded to my server for reasons forgotten by me) and I configured [node-static](https://github.com/cloudhead/node-static) to take care of all my static files. If you want give it a go, head to http://www.lofjard.se:1337 (EDIT: not available anymore) and have a look at an exact copy of this site running on another web server. Setting up node-static turned out to be pretty simple. Example stolen from node-static's GitHub page: ````js var static = require('node-static'); // // Create a node-static server instance to serve the './public' folder // var file = new(static.Server)('./public'); require('http').createServer(function (request, response) { request.addListener('end', function () { // // Serve files!

Trying to fix SyntaxHighlighter on mobile browsers

I recently incorporated the [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) by Alex Gorbatchev so that I can easily show code examples in a nice way. The default configuration seems to have a few quirks when it comes to working on mobile devices. Not all of them are SyntaxHighlighters fault to be fair, but here's some of the things I've had to deel with. #### Broken font fallback stack The default font fallback stack in SyntaxHighlighter looks like this: ````css font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; ```` Consolas is the new pretty font used in Visual Studio 2010 and it is my personal favourite for displaying source code, but it only exists on Windows Vista+. Well that shouldn't be a problem since there is
Thursday 3

Responsive Web Design

Responsive web design is the new rage in HTML. As much as I dislike buzzwords, this one is actually something worth thinking about. [Scott Hanselman](http://www.hanselman.com/blog/LearningAboutProgressiveEnhancementSupportingMobileBrowsersWithCSS3MediaQueries.aspx) wrote a blog post on the subject a while back and [James Fuller](http://www.jblotus.com/2011/06/21/protect-your-career-with-these-5-web-development-technologies/) has it at #5 on his top 5 list of things you need to learn right now. If you don't have a smartphone of your own to try your site out on you can make use of Google's [GoMo](http://www.howtogomo.com/en/#test-your-site) project which can render what your site will look like on an Android phone. As of this post I've done my share of responsive web design for this site

The magic that makes it all happen

If you're reading this blog I expect you to have a somewhat technical side to your personality and thus I assume you have a pretty up-to-date browser. This blog is made with HTML5 and CSS3 and at the moment I have not done any work at all to make it cross browser compatible. I have Chrome 15 (my current default browser), IE 9, Firefox 7 and Opera 11.52 installed on my machine and it works in all of them (except the "border-radius" attribute which doesn't work on images in Opera). Somewhere down the line I might incorporate some fixes for older browsers but unless you're stuck at work, in a government company running Windows XP and IE 8, please upgrade your browser. The rest of the world wide web is just out there waiting for you to experince it in a better way! So what kind of stuff a
Wednesday 2

That time of the year

I once again have come to realize that I've ignored my blog, yet again, for an extended amount of time. When this happens my usual response is to delete all my old posts, change the layout and start over. This time, however, I thought about, for a while, why all my previous blogging atempts have failed and came to the conclusion that I don't really like any of the blog engines that I have used in the past. Mostly I think because they've made it quite cumbersome to blog "on-the-go". So this time around I decided to do things differently. What you're looking at right now is (at the time of writing this) a static html page being server to you by an Apache web server running on an old laptop in my closet. This however is about to change. In the coming weeks I'm going to write a new blog

Sorry, sharing is not available as a feature in your browser.

You can share the link to the page if you want!

URL