Claus Witt dot Com

Fighting Procrastination by Changing Hosts-file with Cron

Mon, 18 Mar 2013 12:30:00 PDT

Recently Simon Hørup Eskildsen posted a tweet or two about his new hostfile setup. The tweets were following by him posting his hosts-file as a gist. At work Jesper Rasmussen took the idea and solved it a bit smarter - so that you can have your pie and eat it too. (You can have host-file mappings, without the need to maintain them in two files).

The solution is quite simple. You have your regular hosts file, containing the usual mapping of domains to (quite possibly) localhost. Then you have one hosts file containing all the remapping of services, that you need to abstain yourself from using. Two small scripts either copy the original hosts file, and concats the focus files to them, or just symlinks the original hosts file. This way, any changes to the hosts file is always included.

The idea in both Simons and Jespers approach is to have cron switch the hosts files at apropriate times, to ensure that you cannot procrastinate, when you should be working.

My own solution consists of not two, but three hosts files. And a crontab with a lot of entries. The idea is to have a five minute window every half hour where you can procrastinate all you want, and 25 minutes of uninteruptable focus-work. You might recognize this from the Pomodoro Technique. On top of that there a rule setup so that I can only use my webmail clients half an hour four times a day (at 10, at 13 at 16 and at 21) - in these periods there are no procrastination-allowance - the pomodoro break should be used to get away from the desk!

My cron looks like this:

And my hosts.focus looks like this:

And finally my hosts.email looks like this:

The scripts called in the crontab can be found (alongside everything else here) in my dotfiles.

Tmux Helper for Copying Settings

Mon, 28 Jan 2013 13:40:00 PST

Usually when I code, I use only terminal tools. This usually means that each project has its own tmux-session and that I use vim as my editor there. I manage my projects with tmuxinator, and have previously blogged about how I use little mapping in zsh to get autocomletion for projects.

The only problem with this setup, is that I very often start new small projects, and I never create the tmuxinator configuration first. This means that I open a new tmux session manually, and change the title, and manually add windows as needed. At some point though, if the project is a keeper, I would like the setup in tmuxinator as well.

Turns out, this is not easy. In an ideal world, I just want each window created with current dir, and a command. However you cannot (or rather, I cannot) get the current dir for each window. You can get the initial directory of the session, thats it. And you can get the window names, and a initial command of each pane. However since all my windows are created manually, all initial commands are just zsh, not very helpful.

I decided to write a little tool to do most of the work.

This tool will take a tmux session, and save it as a yaml file in tmuxinators configration directory - and include all windows. I then manually have to make sure all directories are correct, and that the correct initial command is correct for each window. But it’s still better than doing it all from scratch.

New Stuff in my Dotfiles

Mon, 28 Jan 2013 13:40:00 PST

There has been many many changes to my dotfiles repo today. Most of the updates has been related to my vim settings and plugins.

I have installed a couple of new plugins:

UltiSnips

I hated SnipMate. I hated it so much, that I never used it (on purpose anyway). But since it was installed, sometimes a snippet expanded when I did not want it. I hated it!

UltiSnips is the answer to my snippet prayers in vim. The provided default snippets are good, and it has been made easy to make new snippets. Just call the method UltiSnipsEdit and it opens a snippet file mathcing the filetype of your current file, and then (of course) there is a snippet (called snip) to create a new snippet.

One very nice thing with UltiSnips is that you can define a snippet to only be used in the beginning of a line, and thus let the normal autocomplete take over on the rest of the line. (I find this very useful)

EasyMotion

Sometimes navigating with motions in vim is a bit complex. Easymotion helps with that. With easymotion you can do a more advanced version of a simple motion. If you do a simple motion (w,b,f,t and so forth) prefixed with Leader Leader - you will get up to 26 marks that you can jump to. Check out the github page for a better explanation - or even better, try the plugin out.

Ruby Refactoring

I have seen several of Gary Bernhardts screencasts at http://www.destroyallsoftware.com the last couple of days. And one of the things I kept thinking he did very very fast in vim was a refactoring where he did inlining of a temporary variable. I found - what I think - he uses for that. And I love the mappings. Take a look here.

Command-T

I have had command-t installed once before - but never knew how much I was missing out, before I saw (yet again) Gary use it in a screencast, where he had several mappings for it, that made the plugin prefilter the output for a given path. Now it was suddenly much much more useful. Take a look at the screencast here, and see the mappings he has published here.

And I have removed a git plugin (had two installed, and Fugitive seems superior).

Testing Backbone Apps with Jasmine

Sun, 02 Dec 2012 02:09:00 PST

At Arnsbo Media we write more and more backbone based frontend applications for various parts of our business. Lately we (or at least I) have become more and more obsessed with test driven development, and we have a need for doing even more testing of our frontend applications.

What to test

The biggest problem with people who take a deep dive into test driven development is, in my opinion, that they use too much effort on testing obvious working stuff, and to little on testing their brittle assumptions. In other words, they tend to test that a framework method does as documented, instead of focusing on your own code.

What not to test

In backbone, don’t test default operations of the classes. Dont test that if your set the url of a collection, and call fetch, that the url will get a GET-request. However if you override the url-function, or the fetch function - that should be tested. Don’t test that a model.set saves data, and that model.get can retrieve it again. However do test changes to the parse function. In the same vein do not test that a view contains this.el and this.collection when el and collection are sent through the constructor. But do test that your special rendering loop gets executed as you expect, and test that your events are triggered correctly when the view is attached to the dom, and that they are not tested when it is not attached.

How to test

We use jasmine. In most of our projects we also use requirejs and write most frontend code in coffeescript, and in our latest project we use yeoman as a build tool. In this project we use grunt-jasmine-runner to handle the loading of jasmine tests, and running them through yeoman test. This runner runs the tests in a phantomjs instance, and gives us the result on the command line, instead of the need to start a browser, and running the tests there.

First we add the grunt-jasmine-runner package as a npmTask in the gruntfile.

grunt.loadNpmTasks('grunt-jasmine-runner');

Then we configure it.

jasmine : {
  amd: true,
  specs : 'app/scripts/specs/**/*Spec.js',
  helpers : [
    //Place all dependencies here (jquery, backbone and all that)
  ],
  timeout : 10000,
  junit : {
    output : 'junit/'
  },
  phantomjs : {
    'ignore-ssl-errors' : true
  }
},

Finally we setup the test command to run coffee compiler and then all the tests.

grunt.registerTask('test', 'coffee jasmine');

Jasmine tests using require.js and CoffeeScript

In my opinion jasmine tests are much more readable in coffeescript. And by having all parts of our application in amd modules, it is easy for us, to only load the part of the application a specific test needs.

This is an actual test from one of our latest applications.

define ['helpers/RuntimeFactory'], (RuntimeFactory) ->
  describe "Basic operations", ->
    factory = new RuntimeFactory
    it "returns the runtime instance", ->
      require ['helpers/Registry/Runtime'], (runtime) ->
        expect(factory.getRuntime()).toEqual(runtime)
    it "has set the mainNavigationPanes value", ->
      expect(factory.getRuntime().has('mainNavigationPanes')).toBeTruthy()
    it "has set the appRouter", ->
      expect(factory.getRuntime().has('appRouter')).toBeTruthy()
    it "has set the approuter to an instance of Backbone router", ->
      expect(factory.getRuntime().get('appRouter') instanceof Backbone.Router).toBeTruthy()

The runtime factory module creates a runtime, and sets some default data on it. These tests are made to ensure that the runtime factory returns an instance of the correct module, and that the default values needed for our application to work has been set correctly.

I have three posts about this topic comming in the comming weeks. You could call it my advent calendar. They are “Testing Backbone Collections”, “Testing Backbone Models”, and “Testing Backbone Views”.

High Performance Batch Processing in Javascript

Mon, 26 Nov 2012 01:03:00 PST

One of my favourite books on Javascript Performance is High Performance JavaScript (Build Faster Web Application Interfaces) by Nicholas Zakas. The ideas in this post are influenced by that book. Read it!

When doing expensive operations in javascript, it can block the UI from rendering. The reason behind this is that all code in the browser runs in one thread, and as a result, only one thing can happen at a time. There are several ways to circumvent this - one could be using WebWorkers. Another way is to split the expensive task in to smaller chunks, and use setTimeout to ensure that the ui can be updated as well.

How much you should batch together, and how long you should wait between batches depends on your use case. Both the amount of work to be done, and how dynamic your UI is (e.g. eventhandlers and animations) will influence how you solve this problem.

I have created a small utility that can be used to batch operations together. I call it ListProcessor.js. The idea is that you create an instance of it, providing a list of input (an array). You may also decide on the timeout (defaults to 100 ms) and items per batch (default to 1).

Per default the items in the array are shifted of (meaning it changes the original array), by setting the copyInsteadOfReference parameter to true, you can prevent that.

When you are ready to process the list, you call run. Run takes two arguments, the processor (the function that receives each item, and does something to them), and a callback, that is called when run finishes.

Example:

list = new ListProcessor([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], 1000, 3);
list.run(function(item){console.log(item)}, function(){console.log('finished')});

This will do three console.log calls every second.

Code Kata List

Sun, 18 Nov 2012 13:12:00 PST

In The Clean Coder: A Code of Conduct for Professional Programmers (Robert C. Martin Series) Uncle Bob writes about the importance of doing deliberate practice. One of his methods is to do a Code Kata in the beginning of the work day, and one at the end.

I like this idea, and have decided to compile a list of code katas that can be used for this. The list is currently just links to the katas at their sources. Some of the Katas in this list are harder than others. Most are from the Ruby community. I encourage you to try several of them, and try them using different programming languages, different techniques and with different interfaces.

Top Javscript Libraries from Premium Bootstrap Themes

Tue, 06 Nov 2012 02:25:00 PST

It happened again today. An awesome theme based on Bootstrap landed on hacker news.

The theme looked so nice, that I almost ended up buying the damn thing (for a measly $18) even though I have absolutely nothing use it for at the moment.

However looking at the source reminded me of some of the other nice themes I have seen earlier this year, based on bootstrap. And a lot of them include a large list of javascript files, primarily in the form of jquery-plugins.

I decided to list a few of the ones that I have found in one or more of the themes out there.

Beautiful forms with Uniformjs

Uniform masks form elements with custom controls, that are easily stylable. This ensures that your forms look the same in every browser. Take a look at http://uniformjs.com

Growl like notifications with Gritter

If you’re making web applications for users that are used to desktop applications, you will eventually find yourself in need of a notification widget that looks good. Gritter looks and behaves exactly like Growl on the mac.

Star ratings with Raty

If a Web 2.0 site/app does not have up/down votes, it will almost always have star ratings. The easiest way to get that integrated in your app, is using raty.

Inline graphs with Sparklines

Some times you dont want a large graph to show you a snapshot of some metric. For some information having the graph inline in the text to which it relates is preferable. Sparklines will let you embed charts within the text. Oh, and the charts can be updated in realtime, if needed.

Knobs with jQuery.Knob

These knobs are just beautiful. They are awesome for showing (or allow editing of) a range.

Full sized calendar with FullCalendar

If your app does integrates with calendars in anyway, showing calendar like data in an actually calendar widget instead if in a list, is always best. The Fullcalendar jQuery plugin does exactly that. It has built in month, week and day view, as well as handling events from external datasources.

Zsh Helpers for Rebasing and Merging

Wed, 24 Oct 2012 11:09:00 PDT

I while back I posted a couple of my zsh snippets for working with git. Today however I read about a post about how to keep your feature branch up to date. I liked the little snippet, however we do not always use the master branch as the basis for feature branches. And we do not always use origin as the name for our remote. And on top of that, we do not always merge from the main branch, sometimes we rebase it - so that our feature branch is placed on the head of the branch it was based on.

This means we need a more flexible helper. I decided creating two though. One for rebasing, and one for merging.

There are a couple of steps to creating these snippets.

Save the current branch
Handle (optional) user input
Checkout main branch
Pull from the remote
Checkout the saved (current) branch
Merge (or rebase) with the main branch.

The only difference in the commands are the subcommand for git in the last step.

remain() { CURRENTBRANCH=$(git symbolic-ref HEAD | cut -d'/' -f3) if (( $# == 0 )) then REMOTE='origin' BRANCH='master' fi if (( $# == 1 )) then REMOTE='origin' BRANCH=$1 fi if (( $# > 1 )) then REMOTE=$1 BRANCH=$2 fi git checkout $BRANCH && git pull $REMOTE $BRANCH && git checkout $CURRENTBRANCH && git rebase $BRANCH } memain() { CURRENTBRANCH=$(git symbolic-ref HEAD | cut -d'/' -f3) if (( $# == 0 )) then REMOTE='origin' BRANCH='master' fi if (( $# == 1 )) then REMOTE='origin' BRANCH=$1 fi if (( $# > 1 )) then REMOTE=$1 BRANCH=$2 fi git checkout $BRANCH && git pull $REMOTE $BRANCH && git checkout $CURRENTBRANCH && git merge $BRANCH }

Canvas Demo of Game of Life

Sun, 14 Oct 2012 15:00:00 PDT

Last wednesday we held a meetup at AarhusJs and one of the talks were about the lessons the team behind Virtual Manager had learned while creating their new (yet to be released) football visualiser.

Their solution based on canvas, and I was intrigued. I have not looked into canvas (or any other browser based graphics/animation) in quite some while, and wondered how the state of were at the moment.

And I must say, a lot have changed in the last few years. To challenge my self to do something “real” with the canvas tag, I decided to take CreateJs for a spin. I quickly decided that the project should be very small, and that I would have to complete it in about an hour.

I created a very naïve implementation of Conways Game of Life. The demo is located at http://clauswitt.com/demos/code/gameoflife/gameOfLife.html. The two main parts of the “game” are the “business rules” of the game i.e. which positions should light up and which should not, based on the previous generation, and the rendering part of the game.

<html> <head> <title></title> <script src="gameOfLife.js"></script> <script src="components/EaselJS/lib/easeljs-0.5.0.min.js"></script> <script> var stageWidth = 640; var stageHeight = 480; var sizeDivision = 10; var stage; var gol; function init() { canvas = document.getElementById("canvas"); canvas.width = stageWidth = document.width; canvas.height = stageHeight = document.height; //new stage stage = new createjs.Stage(canvas); gol = new GameOfLife(stageWidth/sizeDivision, stageHeight/sizeDivision, 100, 100); var board = gol.getBoard(); var color = 0; for(var i=0;i<stageWidth/sizeDivision;i++) { for(var j=0;j<stageHeight/sizeDivision;j++) { if(board[i][j]==0) continue; shape1 = new createjs.Shape(); shape1.graphics.beginFill("#f00"); shape1.graphics.drawRect(i*sizeDivision,j*sizeDivision,sizeDivision,sizeDivision); stage.addChild(shape1); } } //draw to the canvas stage.update(); var cb = function(board) { stage.clear(); stage.removeAllChildren(); for(var i=0;i<stageWidth/sizeDivision;i++) { for(var j=0;j<stageHeight/sizeDivision;j++) { if(board[i][j]==0) continue; shape1 = new createjs.Shape(); shape1.graphics.beginFill("#f00"); shape1.graphics.drawRect(i*sizeDivision,j*sizeDivision,sizeDivision,sizeDivision); stage.addChild(shape1); } } stage.update(); }; gol.run(cb); } </script> </head> <body onload="init()"> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>

Tmuxinator Zsh Completion

Tue, 02 Oct 2012 15:00:00 PDT

I am a bit weird with my editor choice. I use three different text/code editors. I usually use PhpStorm for large projects in PHP, since the more intelligent code completion is a time saver for large changes in PHP, when the codebase is 248753 lines of PHP code. But for everything else including minor bugfixes and features I use either Sublime Text 2 or vim.

When writing code in vim, I usually open a complete project in tmux and have a lot of panes, one with vim, one with a terminal, one watching changes (through either grunt or yeoman for instance), one logged in to the db, one starting a server, and perhaps several panes connected to the production environment via ssh.

Earlier I managed these settings with my own quickly hacked tool called jtmux, which I wrote because I couldn’t find a tool that matched my needs. (I know what you think, my search skills are lacking). Well, I eventually found tmuxinator.

I needed some completion of the mux command however. This was of course (yet again) quite easy with the awesome zsh plugin structure.

This will autocomplete tmuxinator settings from the files in ~/.tmuxinator

A zsh Function to Automate Issue id in Commit Messages

Thu, 27 Sep 2012 15:00:00 PDT

At Arnsbo Media we usually create a new branch when working on an issue from Jira. And we name the branch after the issue id, meaning that the branch, is always prefixed with the issue id from Jira, and then some meaningful name after that.

This makes it easy to identify which issue a branch relates to. However to make issues auto update with code changes, and to make our automatic deploy mail a meaningful message to Product Owners with a link to the deployed issue, we need to make all relevant commits reference the issue id as well.

We do this by adding “#Refs PROJECT-123” in the commit message.

However since the issue id is already part of the branch name - in a predictable way - and since we all use zsh as our shell. We created a little zsh function to prefix commit messages with the issue id.

The function is called ci for commit issue.

Using New Relic with FLOW3

Tue, 25 Sep 2012 15:00:00 PDT

At Arnsbo Media we use FLOW3 for several projects. For most of those we use New Relic for application monitoring. This enables gives us great introspection in to the performance and errors on each application.

However using this with a PHP Framework that is not natively supported all requests show up in New Relic as index.php - which is not very convenient for performance tuning or bug squashing.

I have created a quick little implementation of a package with an aspect that weaves into each controllers processRequest method. This method has access to the request object, and thus will be able to extract relevant information about either the url used, or the combination of controller and action name.

We decided to make the transaction name configurable where a template can be set for the name can be set for both web- and cli-requests.

At the time of writing this we use urls as transaction name for web requests, but may change this to controllername:actionname as per recommandations from New Relic.

The new relic package for flow3 can be found here.

Defensive Programming using Assertions in JavaScript

Tue, 04 Sep 2012 15:00:00 PDT

Several years ago I read Steve McConnell’s awesome book Code Complete: A Practical Handbook of Software Construction, Second Edition. Chapter 8 of the book is about defensive programming strategies, and one of those is to use assertions to ensure that variables and parameters match the assumptions we have about the input, and to throw an exception (or fail in some other way) when that is not the case.

Assertions are mostly just input checks. However consider these two snippets of Javascript testing the same conditions for a functions parameters.

Even though the code is almost just as long, the second version is much easier to read, since the checks are named in a way that shows why they are there.

I have created a npm package called affirm - find it on github to see how it is implemented.

Quick Prototyping with Berliner in Node

Sun, 26 Aug 2012 15:00:00 PDT

About an hour ago I found a like (probably on hacker news or twitter) to yet another Sinatra like node library called Berliner. I have played around with it since then, and I find it awesome. It is very easy to understand, easy to use, and has all the best features from Sinatra, without copying each and every feature.

I have created a quick little demo app, which shows how to easily put your routes in separate files, and have a central settings file. When cloning the project, remember to call npm install, and then run the app by running

coffee app.coffee

Create routes in the routes folder, and this code will automatically pick up the routes on application startup.

Routes are defined in a modules initialize method which receives app (the berliner app) and db (the orm connection). An example route - a get request for / - is included, it just redirects to the index.html file which is located in the public folder.

Kill All Processes Matching a Pattern

Thu, 02 Aug 2012 15:00:00 PDT

Sometimes you just have to kill something. Today I needed to kill several (about 20) hanging ruby processes. But since I am too lazy to go through a list from

  ps -A |grep ruby 

and kill everything manually. I used some (probably just as much) time to create a simple little command to the same thing.

  kill -9 `ps -A |grep ruby |grep -v "grep" | awk  -F" " '{ print $1 }'`

The command kills all processes that contain the word ruby, except ones that contain the word grep (to ensure that this process will run). Then it pipes that through awk to get only the characters until the first space, since ps -A gives us a list which starts with the process-id which is what we need to feed to the kill command.

Quick zsh Alias for Opening a Project in Sublime Text

Tue, 31 Jul 2012 15:00:00 PDT

I use both vim and Sublime Text (with vintage mode). For most projects I have a sublime-project file. E.g. this one is my standard project file for rails apps with ember frontend:

Since I am a console-aholic, I created a quick alias to open current directory as a project in Sublime Text. The alias is quite simple:

Getting Recommandations in CoffeeScript

Sun, 29 Jul 2012 15:00:00 PDT

Having read the awesome book Programming Collective Intelligence some time ago, a wondered today how easy it would be to implement the two recommendation algorithms - Eucledian Distance and Pearson Correlation Score - in CoffeeScript. Since it is mostly rather simple math - using some simple Math.pow and Math.sqrt - CoffeeScript seemed simple for the job.

I have created a quick class to show how to create some simple recommendations. It is in a gist at github.

Example of use:

Creating Scoped Keybindings for Snippets in Sublime Text

Sun, 22 Jul 2012 15:00:00 PDT

If you want to learn how to do very advanced stuff in sublime text, you should take a look at the settings files for it, and try to learn something new from that.

One very awesome thing that I use a lot, is to create scoped keybindings that insert a specific snippet, or do some specific action depending on the current file.

One example is that I want ctrl+command+L to insert a link in a file, however how that link is inserted differs on file type, and context (is something currently selected or not).

As an example of scoped keybindings, take a look at the following snippet, directly from the default keybindings in Sublime Text.

This snippets surrounds a selected text with quotes, if the following criteria are met:

The Auto Match setting is set to true
Selection is empty
Following text is a tab, a space, a ), a ] a } a > or the end of the line.
Preceding text is a non-alphanumeric character
and the eol_selector is not equal to a string.quoted.double… Whatever that means…?

There exists a snippet almost identical to this one, whose scope is that selection is non empty.

The problem I want solved is that I want all my prettyfy commands (currently I have a pretty print json, and pretty print html command installed) to have the same keybinding, and then let the scope decide which command to run.

In this extract from my personal sublime-keymap you can see two keybindings with the exact same keys, however each has it’s own specific context in which it works. One works in text.html (and thus in all html subtypes), and one works with source.json. Now it will be easy for me to add new prettifiers at a later stage, to the same keybinding, and just change the context/scope of the binding.

And finally we get to the snippets. Here we are using the command insert_snippet, and sending it the snippet as the only parameter, and using ${0:$SELECTION} as insert point for the selection (if any).

Now I get the correct link in both scopes.

Managing Flow3 Project Packages with flopro

Thu, 19 Jul 2012 15:00:00 PDT

At work we currently have two FLOW3 based projects, and both of them have a lot of packages. I have been in need of a sort of package management like Composer or npm for FLOW3 - but it seems not to be ready yet. I needed something easy to implement, and easy to manage - with as few dependencies as possible.

At work we also use javascript, node and npm extensively. And I have found that having a simple json file in the root of a given flow based project, and having that file under version control, could be a basis of a simple tool to either clone or update a package from version control based on wether it exists or not.

I have created such a tool and called it flopro (FLOw3 PROject). The tools needs a file called .flow3.json in the root of the flow3 installation, and this json file has an array of packages with their names, their repo location, and their type (Framework or Application). Then you can call flopro from anywhere in the flow3 tree structure, and get the latest version of all packages, that should be in the install.

On top of that I have created a flopro-generate command (installed automatically when installing flopro). This command can generate the configuration file in the correct location, based on your currently cloned packages. Beware though, that no error checking exists at the moment - and the Packages/Application folder needs to be hold only FLOW3 packages - that have a git remote called origin.

Using JSON.parse and JSON.stringify to Clone Objects

Tue, 17 Jul 2012 15:00:00 PDT

Yesterday I read David Walsh’s post about object cloning in javascript. The method he showed was pretty much the one that is in Dojo Toolkit.

However one of the commenters mentioned that you could use JSON.parse and JSON.stringify in combination to clone an object. And indeed that works just fine.

I decided to test the two solutions on jsperf. The results are, for my very limited number of tests in the latest versions of Firefox, Chrome and Safari, that the JSON version is about 2 times faster than the Dojo way.

Beware though. This solution is only valid for modern browsers with native JSON support. (Internet Explorer 8+, Firefox 3.1+, Safari 4+, Chrome 3+, and Opera 10.5+ support native JSON parsing.)