What’s the point of releasing open-source code when nobody knows about it? In “Release Notes” I give a round-up of recent open-source activities.

angular-rt-popup (New, github)

A small popover library, similar to what you can find in Bootstrap (it uses the same markup and CSS). Does some things differently compared to angular-bootstrap:

  • Easier markup
  • Better positioning and overflows
  • Correctly positions the arrow next to anchor
angular-rt-popup

 

grunt-git (Updated, github)

  • Support for --depth in clone.
  • Support for --force in push.
  • Multiple file support in archive.

 

angular-gettext (Updated, github, website)

Your favorite translation framework for Angular.JS gets some updates as well:

  • You can now use $count inside a plural string as the count variable. The older syntax still works though. Here’s an example:
  • You can now use the translate filter in combination with other filters:
  • The shared angular-gettext-tools module, which powers the grunt and gulp plugins is now considered stable.

What’s the point of releasing open-source code when nobody knows about it? In “Release Notes” I give a round-up of recent open-source activities.

Lots of small bugfixes left and right this month, but just one big module that’s worth pointing out:

angular-optimistic-cache (New, github)

Usually you have something like this in your Angular.JS application:

 

 

This simple example is a page that will fetch a list of people from the backend and shows it on a page.

Unfortunately, it suffers from the “uncomfortable silence”. Here’s a diagram to explain:

page-load

When you arrive on the page, it’ll first show a blank page. After some time, this gets swapped with the data. Your app feels fast because navigation between screens is instant, but it feels jarring.

This is especially annoying when switching back-and-forth between pages, as it happens every time.

A similar thing happens when going from the list to a detail page:

master-detail

Isn’t it a bit strange that you know the name of the person on which the user clicked, but upon navigation that suddenly gets lost, forcing us to wait until all the info is loaded? Why not start out with showing the name while the rest of the data loads?

The angular-optimistic-cache module is a very lightweight module to add some of that to your application. It’s probably the least intrustive way to avoid uncomfortable silences.

More on Github.

I’ve been doing some HTTP benchmarking on OSX lately, using ab (ApacheBench). After a large volume of requests, I always ended up with connection timeouts. I used to blame my application and mentally filed it as “must investigate”.

I was wrong.

The problem here was OSX, which seems to only have roughly 16000 ports available for connections. A port that was used by a closed connection is only released after 15 seconds. Quick calculation shows that you can only do a sustained rate of 1000 connections per second. Try to do more and you’ll end up with timeouts.

That’s not acceptable for testing pretty much anything that scales.

 

Here’s the workaround: you can control the 15 seconds release delay with sysctl:

There’s probably a good reason why it’s in there, so you might want to revert this value once you are done testing:

 

Alternatively, you could just use Linux if you want to get some real work done.

What’s the point of releasing open-source code when nobody knows about it? In “Release Notes” I give a round-up of recent open-source activities.

Slightly calmer month, nonetheless, here are some things you might enjoy:

 

angular-debounce (New, github)

Tiny debouncing function for Angular.JS. Debouncing is a form of rate-limiting: it prevents rapid-firing of events. You can use this to throttle calls to an autocomplete API: call a function multiple times and it won’t get called more than once during the time interval you specify.

One distinct little feature I added is the ability to flush the debounce. Suppose you are periodically sending the input that’s being entered by a user to the backend. You’d throttle that with debounce, but at the end of the process, you’ll want to immediately send it out, but only if it’s actually needed. The flush method does exactly that.

Second benefit of using an Angular.JS implementation of debounce: it integrates in the event loop. A consequence of that is that the testing framework for E2E tests (Protractor) is aware of the debouncing and it can take it into account.

 

angular-gettext (Updated, website, original announcement)

A couple of small feature additions to angular-gettext, but nothing shocking. I’m planning a bigger update to the documentation website, which will describe most of these.

 

ensure-schema (New, github)

Working with a NoSQL store (like MongoDB) is really refreshing in that it frees you from having to manage database schemas. You really feel this pain when you go back to something like PostgreSQL.

The ensure-schema module is a very early work-in-progress module to lessen some of that pain. You specify a schema in code and the module ensures that your database will be in that state (pretty much what it says on the box).

It supports PostgreSQL and SQLite (for now). One thing I specifically do not try to do is database abstractions: there are other tools for that. This means you’ll have to write specific schemas for each storage type.

There’s a good reason for that: you should pick your storage type based on its strenghts and weaknesses. Once you pick one, there’s no reason to fully use all of its capabilities.

This module is being worked out in the context of the project where I use it, so things could change.

 

Testing with Angular.JS (New, article)

Earlier last month I gave a presentation for the Belgian Angular.JS Meetup group:

ngmeetup-testing.001

The slides from this presentation are now available as an annotated article. You can read it over here.

What’s the point of releasing open-source code when nobody knows about it? In “Release Notes” I give a  round-up of recent open-source activities.

Since this is the first instalment of what will hopefully be a regular thing, I’ll look back a couple months into the past. A long (and not even complete) list of things, mostly related to web technology. I hope you’ll find something useful among it.

 

angular-encode-uri (New, github)

A trivial plugin for doing URI encoding in Angular.JS view, something it oddly doesn’t do out of the box.

 

angular-gettext (Updated, website, original announcement)

The nicest way to do translations in Angular.JS is getting even nicer, with more improved coverage of strings and filetypes, built-in support for asynchronous loading and more flexibility.

But most of all: rock-solid stability. Angular-gettext is now in use for some nice production deployments and it just works.

Highlights:

  • The website is now open-source and on github.
  • There’s an ongoing effort to split the grunt plugins up into the actual grunt bits and a more generic library. There’s also a Gulp plugin coming, so you can use any tooling you want.
  • Functionality for loading translations asynchronously.
  • Now usable without jQuery loaded.
  • Better handling of translation strings in directives.

 

angular-import-scope (New, github)

Angular.JS structures your data in nested scopes. Which is great, except when page structure doesn’t work like that and you need the inner data on a much higher level (say in the navigation). With import-scope, you can import the scope of a lower-level ui-view somewhere higher up.

mockup

 

angular-select2 (New, github)

A select2 plugin for Angular.JS that actually works, with ng-options support.

 

connect-body-rewrite (New, github, DailyJS coverage)

A middleware plugin for Connect.JS that helps  you transform request bodies on the fly, typically on the result of a proxied call. Used in connect-livereload-safe and connect-strip-manifest (see below).

 

connect-livereload-safe (New, github)

A Connect.JS middleware plugin to inject livereload. What’s wrong with connect-livereload? Well, I ran into some freak issues where modifying the DOM during load breaks Angular.JS. This plugin avoids that.

 

connect-strip-manifest (New, github)

Connect.JS middleware to strip the HTML5 app cache manifest. Makes it possible to disable the caching in development, without having weird tricks in your HTML file.

 

grunt-git (Updated, github)

A pile of new git commands supported, with a much improved test suite.

 

grunt-unknown-css (New, github)

Lets you analyze HTML files to figure out which classes don’t exist anymore in the CSS. Good for hunting down obsolete style declarations.

 

grunt-usemin-uglifynew (New, github)

A plugin for grunt-usemin that reuses existing .min.js files. This speeds up compilation of web apps and lets you use the minified builds provided by library authors.

 

json-inspect (New, github)

Get JSON context information out of a string. Lets you build text editors that are aware of the structure of the JSON underneath it.

Suppose you have this:

With json-inspect you can figure out what it means if the cursor is at a given position:

 

mapbox-dist (New, github)

A compiled version of Mapbox.JS, which you can use with Bower.

 

Nested Means (New, github)

A data quantization scale that handles non-uniform distributions gracefully.

Or in human language: a Javascript module that calculates how you can make a meaningful legend for colorizing a map based on long tail data. If you’d use a linear scale, you’d end up with two colors: maximum and minimum. Nested means tries to adjust the legend to show more meaningful data.

nested-means-3

A linear scale would map everything to white and dark-green. Nested means calculates a scale that maps to many colors.

 

node-trackchange (New, github)

An experiment in using Harmony Proxies for tracking changes to objects. Here’s an example:

You can even wrap constructors. This ensures that each created instance automatically has change tracking built-in:

 

pofile (New, github)

A gettext .po parser and serializer, usable in the browser and on the backend. The angular-gettext module is powered by this library.

 

Blog it or it didn’t happen.

In a shocking move, Ubuntu decided to follow the long-strung-out decision of Debian to adopt systemd as their init system. This is a good thing: everyone can now get together and work on one great solution. I applaud them for making this move.

It’s also a good thing for those who depend on systemd for having a fantastic modern deployment environment: soon you’ll be able to depend on systemd everywhere, regardless of the distribution being used.

In this light it seems like a good idea to shamelessly mention the write-up I wrote a while back: Deploying Node.js with systemd. Everything in there is still highly relevant and relying on systemd for deploying Node.JS is still (in my humble opinion) one of the best possible setups.

Good times for Node.JS developers that also need to administer infrastructure.

Recently I’ve had to add translation support to an Angular.JS application. There’s a couple of modules around that can help you with that, but none of them felt right. Either they force you to use key/value mappings (cumbersome) or they have a very painful, broken system for plurals.

I wanted something that is:

  • Trivial to use
  • Doesn’t take any of the nice aspects of Angular.JS away from me.

Enter angular-gettext.
I’ve always been a fan of gettext, which is used extensively in the GNOME project, now there’s an MIT-licensed Angular.JS implementation.

Translating a web application with angular-gettext is as simple as adding an attribute:

<a href="/" translate>Hello {{name}}</a>

This, together with a small library and some Grunt tasks allows you to open your app up to any language you want. Interpolation just keeps working and there’s support for plurals.

There’s lots of documentation on the website, have a look at it if you want to go global: http://angular-gettext.rocketeer.be/

Posted .

Tags:

This was written some time ago, but might still be interesting to release: node-apk-parser.

If you ever tried to extract data from an Android APK file (such as the application name), you’ll have noticed that Google decided to use a very complex binary XML encoding. This format is a major pain in the ass to decode. The node-apk-parser module helps you do exactly that: get as much info out of an APK file, without the pain.

There are some modules available for this, but none handle encoded strings, so they’re generally useless. This module uses the aapt tool from the Android SDK and is thus capable of decoding all the gory details you want.

Unit-tested and battle-tested in production, now available for yours to enjoy:

I love cycling. When you are in a new area, it is really hard to figure out where the good roads are located. Smooth and nice asphalt might be right around the corner, but that is rarely indicated on a map.

The average racing bike has a ride that is hard as a rock so finding a route that’s not filled with potholes and cracks may mean the difference between a relaxing and a hellish afternoon.

Today I found this thing:

raceshape

 

A heat map of Strava rides. Makes finding great roads a breeze. Fantastic.

I’m on Strava too!

Posted .

Tags: