Angular form input redundancy

I love angular for the simplicity offered by the two-way binding between form inputs and displayed values. It also has pretty good mechanisms for validating and sanitizing data.

But I hate angular for how it treats the HTML markup as a second class citizen. You have to pollute your markup with all sorts of attributes, and it ends up with a great deal more logic than it should.

Angular is good for making complex forms, so you'll write quite a bit of them. You'll end up with some very long views, with a great deal of redundancy. This is not DRY at all, and it leaves a bad taste in my mouth.

Let's take a sample form :

<form name="subscription" novalidate>
  <label for="firstName">
  <input type="text" name="firstName" id="firstName" ng-model="firstName" ng-required>

  <label for="lastName">
  <input type="text" name="lastName" id="lastName" ng-model="lastName">

  <button type="submit">Submit</button>
</form>

Give them a name

Every input field should have a name attribute. Otherwise you won't know which input holds which value once submitted to your backend. Even if you're not submitting the form in the usual web 1.0 way but using fancy-ajaxy-asynchronous-SPA mechanisms, you're still basically sending a list of key/value to your backend.

Adding some validation

Let's say I need the firstName to be required. Good thing I'm using Angular, I only have to add the ng-required attribute and I'm done.

Well... not quite. You'll also have to add a novalidate to the parent form otherwise the browser default validation mechanism might interfere.

You'll also need to add a name to the form. And make sure that neither the form name nor the input name include any dash (-), otherwise it might silently fail.

So what about accessibility ?

For accessibility reasons, you have to bind your labels to the corresponding input elements. For radio and checkbox element you can get away with wrapping the actual input inside the label, but for text element the for attribute on the label must be used.

The value of the for on the label must be equal to the value of the id on the input. That's too bad we have to use an id, it would have been so much easier if we could simply reuse the name field. But no, let's repeat ourselves and add an id field.

How do I access my data ?

Now that you have a form and Angular, you'll want to access the data right ? There are two ways you can access data from your form in your Controller.

If you give a name to a form, you can access it in the scope simply by referencing it by name. In our example, you now have access to $scope.subscription on the Controller. I don't really like Angular defining objects in my $scope from something defined in the view. It might overwrite another object with the same name I defined in my controller.

Anyway, you can then access informations about the form from this object. It contains keys for each input fields (using their name attribute), which in turn holds informations about their validation ($valid, $invalid, $dirty, $pristine) and the value it holds ($modelValue and $viewValue).

I don't really like tapping into this object either as it seems too low level into Angular own plumbing system.

The other way, the recommended one, is to manually define with which value each input is bound, using the ng-model attribute. You'll usually re-use the same name you already used for name and id (unless you want to be really confusing).

Copy/Paste nightmare

As you've seen, this absolutely does not follow the DRY principle. Angular, contrary to Ember, is not a Convention over Configuration framework, and we can clearly see this weakness here.

This gets worse when you have to add new fields to your form. You won't rewrite them from scratch, so you'll use copy/paste and expose yourself to errors. If you forgot to change one name, id or ng-model you might create weird bugs, hard to find, because their root cause is inside your 300 lines long view file.

A solution ?

I haven't found a satisfying solution to this problem as of today. The only one I can think of could be a macro in your IDE to auto-generate input fields with the right name written in name, id and ng-model. But this is hardly a portable solution. The other one would be to create a metadirective that automatically adds the correct value in the correct attribute. But writing directives that adds other directives is complex and I'm not sure if it will not simply hide the complexity away and make it even harder to debug.

Life important lessons

I just came accross the last issue of Hacker Monthly. There was an article by Derek Sivers, about the Meaning of Life. It is actually the transcript from a video of one of his talks. I highly recommend you click that link and read the text.

It made me realise that there are things that may seem obvious in retrospect, but that we often forgot in the heat of the action of living. Here are a small list of those that resonate with me.

Be future focus. Try to do things to make life easier for the future you. Learn new skills, put some money aside, prepare for when you'll be older and would like things to be easy.

Try to get in "the zone" as much as you can. We call "the zone" that moment when you're focused on what you do and everything is nor too easy, nor too hard. You have the feeling that everything goes well, you know what you're doing, you know where you're heading, and you know why you're doing it. Avoid work that gets you away from the zone, and look out for those that gets you in that state of mind.

Remember that our brain has had billion of years to evolve. From bacterias to fish, to monkeys, to us. The new parts of our brain, the one that differenciate us from other animals are the one about prediction, language and logic. But the old ones are all about fear, gut feeling and instinct. Our old brain has been here forever, the new one is still in beta. Even a $5 machine can beat as at Math. But no machine is yet able to have instinct or gut feeling. Trust the part of your brain that has been in production since the dawn of time.

Choose what is important over what is urgent. Important is learning new skills, keeping in good shape, giving undistracted attention to the one you love. Urgent are emails, text messages, tweets. It begs for being done right now, but won't give you much after. Important things won't yield results in a forthnight, but they will last forever.

Change routine often. In a few years, when you'll look back at your past, you won't remember the simple days. You'll remember the changes, the moment you took important decisions. Changing job, moving away from you appartment, going abroad. Change course often, change routine and break monotony. You'll have more, better, memories.

And don't let others tell you what your good or bad at. No-one is ever good at anything the first time. You have to try, fail, work, practice and succeed. No more "I'm not good at math" or "I'm naturally good at that". Everything can be learned given enough time and practice.

This are all important lessons that one should not forget.

UTF-8 encoding for nginx

I just realised that my very own website wasn't correctly returning UTF-8 in its Content-Type response headers.

As my new server is only one ssh command away, I could easily log in and edit my nginx config. I also added a security measure of not exposing the nginx version I'm using.

# Set default encoding as utf-8
charset utf-8;
# Do not expose nginx version in headers
server_tokens off;

AnkiDroid

A colleague of mine, which is as interested in life hacking and getting more of the human brain as I am, showed me an Android application named AnkiDroid.

This is technique to easily memorize list of things. The kind of thing you might need to know by heart but never took the time to actually learn. Like countries and capitals, the bones of the human body, HTTP codes, vim motions, anything.

The idea is to present you each day with a list of 20 things to remember, represented as cards. It will first show you the front of the card (a country name for example), and you'll have to guess the matching capital. When you think you know it, you can reveal the answer by flipping the card.

You then press Yes or No, depending if you found the correct answer or not. You then go to the next card. If you were wrong on a card, it will pop up again soon in the deck. The more often you are wrong on a card, the more often it will pop until you memorize it. On the other hand, if you were right, you won't be asked this same card until tomorrow, and if you are still correct tomorrow, it will wait 3 days before asking, then 7, a month, and so on and so on.

Things you already know won't pollute the list of cards, but things you're not totally sure about will come up regularly and you'll then remember it just by the repetition of it.

In the end it makes a very addictive game, and I learned a lot of things in no time. I'm doing about 20mn of it every morning, while commuting, and I'm now able to place on a map much more countries than before.

You can even create your own decks easily, and learn whataver you want. I wish an app like that existed when I was still studying, it would have made things much much easier to remember.

Migrating to Jekyll

You might have noticed that the skin of the website changed. Actually, I've updated pretty much every aspect of the stack underneath.

This was a cakePHP blog, it is now a static site generated through Jekyll. This was a custom skin, this is now heavily based on Hyde. This was versioned using Mercurial, and is now using Git (and the source code is available on GitHub). And finally, it was hosted on a shared host on Dreamhost and is now served by a private ks-3.

No more mysql database for the posts, everything is now simple markdown files. This is much more easier to commit and backup, and it is also much more easier for me to write posts, as I only need a text editor.

I had to create an nginx config file to handle all the redirects from the previous urls. At first I thought of hosting it on GitHub Pages, but as my Jekyll install is quite personalized (tags, archives, etc) I needed more flexibility, so in the end I build the website locally and rsync the output to the server.

One of the main features missing from this new version is the ability to leave comments. I'm working on it.