Untracked files in newly cloned Git repo?

It has happend a few times for me: I clone a remote Git repository, and when I do git status to see info one or more untracked files are listed.
It’s quite annoying and I could see the pattern that the filenames of these files has UTF-8 / special characters in them (åäö).

What to do to resolve this?

Do this: git config core.precomposeunicode false and they’re tracked.

Why?

core.precomposeunicode

This option is only used by Mac OS implementation of Git. When core.precomposeunicode=true, 
Git reverts the unicode decomposition of filenames done by Mac OS. 
This is useful when sharing a repository between Mac OS and Linux or Windows. 
(Git for Windows 1.7.10 or higher is needed, or Git under cygwin 1.7). 
When false, file names are handled fully transparent by Git, which is backward compatible with 
older versions of Git.

From http://git-scm.com/docs/git-config

Git - Feature branch model

Whether you use Git with a centralized repository (like Github or Bitbucket) or just a local copy, I would always advice you to use the Feature branch model as your Git workflow.

Here are the key points that describes the Git feature branch workflow:

  • No development happens or are pushed directly to the master branch.
  • Create a new branch, a feature branch, when you start development on a new feature.
  • Feature branches should have descriptive names, like add-printing-stylesheet.
  • When the feature is finished, you merge in into master or create a pull request if you use a central repository and use pull requests / code review.
  • When it’s merged, delete the feature branch. Keep the branches as short lived as possible.

If you follow this you will always have a working master branch and all feature development is isolated from the main codebase until they are finished.

Angular - Bootstrap - Jade - Stylus - CoffeeScript boilerplate webapp with Yeoman

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.

Again: Add Authorization header to AngularJS $http

In my last post I showed how I add an Authorization 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'].

Add Authorization header to AngularJS $http

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

AngularJS: $watch and $timeout

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);

Note to self on updating Wordpress plugins via git-svn

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.

Use your Synology as a local DNS cache

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)?

Make:r - How I did a fishing lure / jerk bait

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.

Angular.JS filter to make url:s in text clickable

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.