Sorry about all the buzzwords in the title but it really describes what this note-to-self post is about.

How to create a boilerplate web app using AngularJS as framework, Bootstrap as HTML/CSS base, Jade as HTML replacement, Stylus as CSS replacement, and CoffeeScript as a Javascript replacement/generator/transpiler. All using Grunt as the glue that keeps everything together.

Npm and Bower makes sure all dependencies are in place. And Karma for the testing.

To create the scaffolding I use a tool named Yeoman that has all these generators that installs all tolls you need, configures Grunt, npm and Bower and generates a basic app file structure so you can jump straight into the code.

Lots of tools and replacements/generators/transpiler languages and there certainly are better or faster ones out there, but these makes me comfortable and I can get to work in 2 min.

Anyway, this is how I do it:

npm install --global yo bower grunt-cli
npm install --global generator-angular-jade-stylus

mkdir newapp && cd $_
yo angular-jade-stylus --coffee --jade --stylus newapp

Run npm cache clean and repeat the last line if it fails.

Answer yes to all questions.

Run grunt serve and point your browser to localhost:9000 unless it does so for you.

Bam, done.

Thank you Yeoman.

In my last post I showed how I add an Authorisation header to outgoing $http calls in AngularJS. I’ve changed the way I do it, this which I think is easier to read.

angular.module('app')
  .factory('RequestInterceptor', [
    'AuthDataService'
    (AuthDataService) ->
      interceptor = 
        request: (config) ->
          header = AuthDataService.getAuthData()
          if header then config.headers['Authorization'] = "Basic #{header}"
          config
      interceptor
])

angular.module('app').config(['$httpProvider', ($httpProvider) ->
  $httpProvider.interceptors.push 'RequestInterceptor'
])

The AuthDataService is the same as in my last post, but without the the setting of $http.defaults.headers.common['Authorization'].

I recently had to add an Authorization header to all $http requests in an AngularJS app.

Here’s how I did it in Coffeescript.

#AuthData.coffee

angular.module('app')
.factory 'AuthDataService', [
  'localStorageService'
  '$base64'
  '$http'
  (localStorageService, $base64, $http) ->
    current_auth_data = localStorageService.get('authorization_token')
    if current_auth_data
      $http.defaults.headers.common['Authorization'] = "Basic #{current_auth_data}"

    return {
      setAuthData: (authdata) ->
        return unless authdata
        encoded = $base64.encode(authdata)
        localStorageService.set('authorization_token', encoded)
        $http.defaults.headers.common['Authorization'] = "Basic #{encoded}"
      clearAuthData: ->
        localStorageService.remove('authorization_token')
        $http.defaults.headers.common['Authorization'] = ''
      getAuthData: ->
        return localStorageService.get('authorization_token')
    }
]

Upon initialization it checks if there’s a authorization_token saved in your local storage. If there is, set it as a Authorization header on $http.

Whenever you set or clear the auth data, the header for $http changes as well.

EDIT: I’ve written another post about how to add Authorization header to AngularJS $http

In an old post called Create a nested array recursively in Javascript I wrote how to go from

[
    {id: 1, title: 'hello', parent: 0},
    {id: 2, title: 'hello', parent: 0},
    {id: 3, title: 'hello', parent: 1},
    {id: 4, title: 'hello', parent: 3},
    {id: 5, title: 'hello', parent: 4},
    {id: 6, title: 'hello', parent: 4},
    {id: 7, title: 'hello', parent: 3},
    {id: 8, title: 'hello', parent: 2}
]

As you might know, AngularJS has an event loop, called $digest, that checks and updates all bindings and values.

You can have a DOM element only show when a scope variable has a certain value, like this:

<div ng-show="show_div">Text in div</div>

Whenever the $digest runs, it checks if $scope.show_div is true and if it is, the div is shown. If not true, the div is hidden.

That means that in your controller you can toggle the visibility of the div by simply setting $scope.show_div = true/false. However, if you do this on mouseover an element or change the value very frequently some other way the $digest might not have had the time to finish it’s loop and the div won’t toggle as it should.

That’s where $timeout comes in. It’s a wrapper for javascript’s setTimeout with the addition that it triggers a $digest loop at the end meaning that anything you changed will be updated as it should.

So instead of $scope.show_div = true and then $scope.show_div = false you do:

$timeout(function() { $scope.show_div = true; }, 0);
//and
$timeout(function() { $scope.show_div = false; }, 0);

I forked tpires/neo4j to make a Docker image for Neo4j that has version tags so I very easily can start a Neo4j instance to make API calls to.

Wow, this is pretty cool, I just passed the 5000 downloaded mark for my Two Factor Auth for Wordpress plugin.

(but I see that there’s something wrong with the changelog for v4.4. I really don’t like WP Plugin repository and readme parsing. This is not the first time.)

As of today I start working with the team @ Neo Technology on a part of their Graph Database Neo4j.

I’ll be responsible to make their fantastic Neo4j Browser even better by adding more features and make it what the customers want.

This will be great!

(graphs)-[:ARE]->(everywhere)

I host my Two Factor Auth Wordpress Plugin on Github and I run git svn locally to be able to sync the Github git repo with the Wordpress plugins SVN repo.

But, it’s a bit of a hassle and I don’t update the plugin often enough to remember what step to take.

The assumption is that you’ve followed this guide to setup you local repo with svn and git remotes.

1

Write code in local git feature branches as usual. Push the finished code to Githubs master branch and add a git tag.

2

Create a new local git branch (or use a clean old one) and merge local master branch (remember to squash all commits!) into this one. It has to have a straight history.

3

Run git svn rebase the see that the history matches with the remote Worpress svn repo.

4

Run git svn dcommit --username yourusername to push the code to Wordpress svn repo. Remember that you have to change all the tags in your readme.txt and you main plugin file to match the new release version.

5

Run git svn tag x.x to copy trunk and create a new remote tag/release from it.

It is totally unnecessary to have all your computers, iPad’s and iPhone’s ask your router to resolve domain names to an external DNS server whenever you click a link or enter a domain name.

Why not have something that sits on your local network and forwards unknown DNS requests and then saves the cache so the next time that request would take ≈ 1 ms instead of ≈ 50 ms (or ever more if you use your ISP’s DNS service)?

This is going to be a odd post in contrast to all other posts I’ve written. I like to make things, it doesn’t matter if it’s software or hardware. Recently I started to fish again after a few years on hold.

This time I wanted to fish for pike with a method called jerk bait fishing. These baits/lures does not have their own movement pattern like most lures has. These baits you have to jerk to get them moving in a, for the fish, compelling way. So it’s one step back to a more manual way of fishing.

To be able to jerk efficiently you have to have a really stiff and short pole (pun intended) and a non elastic wire.

What’s nice with these baits is that you quite easily can make your own since they don’t have to move by them selves in a specific way.

This is a simple filter I made for Angular.JS to make url’s in text clickable. Make sure you place the content and filter in the ng-bind-html attribute of the HTML element. Otherwise the HTML won’t be parsed.

E.g. <p ng-bind-html="comment.body | parseUrl"></p>

Here’s the parseUrl filter:

angular.module('filters', [])
.filter('parseUrl', function() {
    var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim
    var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim

    return function(text) {        
        if(text.match(urls)) {
            text = text.replace(urls, "<a href=\"$1\" target=\"_blank\">$1</a>")
        }
        if(text.match(emails)) {
            text = text.replace(emails, "<a href=\"mailto:$1\">$1</a>")
        }

        return text       
    }
})

Also, make sure you inject filters in your main module / app.

I’ve used the excellent Charles to intercept connections, but this new app seems quite nice!

A nice resource to check what elements and API:s the different browsers supports.

Yesterday I updated my Docker image docker-wordpress-nginx-ssh github so it adds memcached and the superb Wordpress plugin WP-FFPC to Wordpress.

This makes NGiNX serve cached pages straight from memcached without going into PHP and Wordpress. It’s amazingly fast (try to reload this page you’re on now).

One thing though, you have to login and press the “Save” button on the settings page of WP-FFPC to activate it. But that’s all there’s to it, all NGiNX settings are already there.

To try it, just type docker pull oskarhane/docker-wordpress-nginx-ssh or to start a container straight away: sudo docker run -p 80 -p 22 -d -t oskarhane/docker-wordpress-nginx-ssh