Thoughts were had

All posts

Form validation with rcSubmit and bootstrap

I have long been annoyed with doing form validations in Angular, it just never felt right. I’d manually link every input to a form with some convoluted ng-class conditions, not to mention track form state in controllers and polluting the scopes with loading indicators.

I just recently found an excellent writeup on using the new ngMessages module in Angular >=v1.3.0.beta.8 have your error messages prioritized and easily customized. This made me rethink and rewrite the way I use forms.

Which brought me back to rcSubmit and the source. With rcSubmit the state tracking and loading indicators are handled for us, but spamming my forms with

<div ng-class="{has-error: rc.form.needsAttention(form.field)}">

feels too repetitive.

If we make a few assumptions on form structure this can easily be avoided with a few directives.

Read more

Posted in Programming Angular, Validation 0 Comments

Global stylus variables with grunt-stylus

Stylus is a CSS preprocessor that enables the definition of various helpers in the form of mixins and variables for configuration.

You should already know the awesome nib stylus extensions. You might even have some helpers yourself, that you want to be accessible in all your stylus files. Perhaps even included by default, saving your the trouble of writing

@import 'nib';
@import '../my/helpers';

In all your files. Dont worry, grunt-stylus has you covered.

Read more

Posted in Programming Grunt 0 Comments

Shared configurations with grunt-template

At Mojn we needed a way to write a reduced version of our server-side environment as an angular module, as well as generate a shared color configuration in our stylus and script files.

I stumbled upon grunt-template while browsing through npmjs looking for interesting tasks. Grunt-template is a simple task designed to pass any data you provide into an underscore template file, and write the result to another file. That’s perfect! Now let’s write some templates and configure grunt-template.</section>

Read more

Posted in Programming Grunt 0 Comments