I tend to stay away from more complex version control commands and workflows, as they often create more problems than they solve, especially if not everybody on board ‘gets it’. Rebasing with git however always felt natural to me: you get pull in changes from a remote and you reapply your own on top of that, instead of producing extra merge commits.

Here’s a visual explanation of what happens when you use git --rebase, especially when pulling from a different branch. Short version: don’t do it, unless you hate your colleagues. When pulling from the same branch as the one you are working on it is fine however (or if you know you are the only one working on your branch).

Here’s a trick I’m using to easily define reusable components over multiple files, contained within a specific module (which will function as a collection of components).

First, know that calling angular.module('MyModule') references an existing module, whereas angular.module('MyModule', []) always creates a new one (overwriting the old one)! So this poses the question: Where do we create the generic module? The answer is: either you include a javascript file that does this, or you do it manually for each app.

For example, let’s define an MainApp module and a GenericComponents module, with components spread across files. Here’s one way to do that:

read on

Forms in angular are pretty straightforward once you know how to read its state. So let’s look at a collection of tricks and put together and complete working Bootstrap 3 form with fabulous form validation.

In this form:

  1. No validation while initially filling the form
  2. On submit: validate form and keep updating fields as they change
  3. Red and green colors indicate the user’s progress
  4. Once submitted invalid form, the submit button becomes available only once the form is valid
  5. Bootstrap 3 form style, including help text and custom tailored alerts for validation messages

read on

Here’s a neat little trick I discovered that let’s you do wildcard expression checks for an input value:

Wildcard expression validation that marks input valid / invalid

read on

The thing with directives, controllers, scope, link and compile is: they all share keywords and concepts. This puts so much trees in front of the forest, that until you’re clear on the individual underlying concepts you have no hope of understanding the abstractions made on top of it. And so it took me a long time to understand how I can make directives/controllers share state, even if they’re not nested.

That last part is important, because in essence, you can’t share data unless you also share an ancestor. The only exception to this is if you’re using decoupled communication through events and eventlisteners.

The example we’re not doing today

Ok, let’s dive into today’s problem we’re not solving: A form with several inputs, and each one have a tooltip, except the tooltip should be displayed on a specific location, the same for all inputs. Like an information box… in fact it’s not a tooltip at all.

simple inputform with text hint

read on

It took me awhile to figure it out, but I figured out how to run the liquibase logging through slf4j/log4j/logback etc, for Liquibase 3.0.8. There’s an easy way and a hard way. The easy way is just the hard way pre-packaged as a jar for you. You’ll understand.

The easy way

Drop in a jar called liquibase-slf4j, by Matt Bertolini, and configure its class logging through slf4j instead. In my case I’m using slf4j-log4j12 on top of that so I configure everything log4j style (make sure you have log4j on your classpath!).

read on

16-05-2015: The code of this post was turned into a GitHub project called angular-logger


Let’s start by prepending timestamp and class name

Recently I’ve been on the lookout for a way to configure Angular’s logging module. Specifically, I wanted its output prepended with a date and a context string, say a ‘class’ name or name of the controller doing the logging.

Something like this (example from java):
"2013-12-23 19:44:39,619 INFO [java.sql.DatabaseMetaData]: Table not found: Employees"

Also, if we enable per-class loggers, how can we mute logging for certain classes?

What I found was a rather… extensive a solution utilizing Angular’s built in support for decorators. Ofcourse, the fact it actually works is great and it’s a nice insight into some advanced javascript and Angular concepts (I especially found the requirejs / angular combo of interest), but I think it can be much much simpler.

read on

As I was again trying to remember how to sort a list of objects in Java bases on multiple keys, I had the luminous idea to finally write it down.

We have a list of pizza’s, and I want them sorted according to size, number of toppings and furthermore by name. This means that there will be groups ordered by size and within those groups the pizza’s are ordered into groups by number of toppings and in those groups the pizza’s are ordered by name.

We want to end up with a list like this:

  1. Pizza’s 34cm:
  2. Anchovy (34cm, tomato, cheese, Anchovies)
  3. Prosciutto (34cm, tomato, cheese and ham)
  4. Chicken Special (34cm, tomato, cheese, chicken and turkey pieces)
  5. Vulcano (34cm, tomato, cheese, mushrooms and ham)
  6. Peperone (34cm, tomato, cheese, mushrooms, ham, capsicum, chili peppers and onions)
  7. Pizza’s 30cm:
  8. Anchovy (30cm, tomato, cheese, Anchovies)
  9. Prosciutto (30cm, tomato, cheese and ham)
  10. Chicken Special (30cm, tomato, cheese, chicken and turkey pieces)
  11. Vulcano (30cm, tomato, cheese, mushrooms and ham)
  12. Peperone (30cm, tomato, cheese, mushrooms, ham, capsicum, chili peppers and onions)
  13. Pizza’s 26cm:
  14. Anchovy (26cm, tomato, cheese, Anchovies)
  15. Prosciutto (26cm, tomato, cheese and ham)
  16. Chicken Special (26cm, tomato, cheese, chicken and turkey pieces)
  17. Vulcano (26cm, tomato, cheese, mushrooms and ham)
  18. Peperone (26cm, tomato, cheese, mushrooms, ham, capsicum, chili peppers and onions)

read on