Heimdal IT

Terminal

As a base of most my operations are the terminal. I've grown customs to having at least one window open with usually 3-8 tabs of various things running.

iTerm 2

From the iTerm homepage is says 'it is a terminal emulator for Mac OSX that does amazing things'.

For a long time I used the built in Terminal for the OSX. But I eventually made the switch, but it's been a long time since I did so I can't remember the exact reason.

No matter which terminal you use, the use of a terminal can make room for tools and productivity you might have missed. Go try it out!

Sublime Text

Everyone needs a text editor. Everyone.

I like lightweight things. And Sublime sure fits that bill. But I've also learned extending it with plugins can make it even more awesome. This can create a fantastic little editor with a lot of functionality that helps in writing and development.

In the screenshot you can see how mine looks at the moment writing Markdown.

GitHub

I (we) use git. And we love it. We might not be the most advanced users of it.

To share our code, collaborate, review, keep it safe and make it easier for deployments I've gone for GitHub. Many alternatives exist but the perks from GitHub is just too nice for me to change.

GitHub is a hosted service that gives you git repositories in the cloud.

Dash

From the homepage: 'Dash is an API Documentation Browser and Code Snippet Manager.'

It has easy and fast search. Saves me from having tabs in my browser with documentation. Keeps documentation up to date. And is fully offline which might not be a big sales point these days but it works well for me when I'm having bad connections.

Node (or Node.js)

Last year or so I've written 90% of the things we have done in node.

Node let's you use javascript to write applications. It's easy to use, works well on multiple platforms and scales well (not that your code necessarily does).

Node says about itself 'Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.'

I will admit that I've not a fan of callbacks that is so popular in javascript these days and are using promises a whole lot.

That is some of the tools I use for development. Wanna hear more? Let us know!

Slack

Slack is a communication platform where you set up different channels and groups. Or as Slack says:

Slack is a platform for team communication: everything in one place, instantly searchable, available wherever you go.

It's sort of like mIRC in the good old days.

We use Slack as our main internal communication plattform. We have set up different webhooks to get notifications from other systems, like GitHub, Zendesk and Uptime Robot.

We also have a #random channel where we post funny links and stuff that are not work related (but safe-for-work of course).

Zendesk

When it comes to handling support tickets we use Zendesk. And we are very pleased with Its functionality and ease of use. We have been using Zendesk for almost a year now. And we specialy like that we can have all our support cases in one system. Zendesk integrates nicely with a bunch of other systems as well so we can defenetly recomend it for anyone doing tech support.

Punche

Our own app for tracking do´s and don´ts. We use it to track things like how much coffee we drink each day or how many workouts we do each week. You can easily add new things that you want to keep a counter for and if we get more users on the app we will add more cool functions to it. Check it out here!

Google Apps for Work

As an increasing number of businesses we are using Google Apps for Work. For those of you that haven't heard of it (where have you been??), it is a full suite of office tools. You get Gmail for handling you e-mails, Calendar for (you guessed it) handling your appointments and meetings, Docs for writing documents, Spreadsheets for crunching numbers and Presentation when you want to show off your products and skills.

Google Apps also includes Forms when you want an easy and fresh way to collect data from people around. Most of the time we use it for invitations for social happenings.

All your files are stored in Disk which has a great and intuitive file manager.

Google Analytics

We have a growing number of web sites in our portfolio, some of them are regular web sites for marketing and others are web based systems like timerocket and Apex.

Common for them all are the need to analyze how the visitors/users use the sites. We use Google Analytics to track all the traffic on all our web sites. We usually pick some KPI´s that we focus on, because Google Analytics have a lot of data in which you can spend hours on analyzing. So we often focus on Sessions, visits and keep an eye on what kind of browser version the users are on. Don't get me wrong, there is a lot of other useful data we get out of Google Analytics, but that might be a blog post of it's own.

timerocket

For tracking our work hours we use our very own web based timetracking system called timerocket. It´s easy to use and has a flexible reporting module.

Notes

At Heimdal IT we use and test different tools for taking notes. At the moment we use 2 different ones:

Google Keep

Google Keep is an easy to use, easy to start writing tool, where you can make notes and list (with automatic checkboxes). You´re notes are presented as cards and you can customize the background color on each note for easy recognizing your different notes. You can also use tags and share notes across Google accounts.

Simplenote

Simplenote is a easy to use no frills note taking app. It has the features that you need to keep working on your notes on different devices. It also has sharing to work together and collaborate. The one drawback of it is that some of the platforms it support does not have a Markdown renderer leaving us with only text notes.

Spotify

And last but not least, we have to have some music. When you need to get into you're "zone" and stay focused on your work there is nothing better then your favorite music. And with Spotify you have a ton of different genres to choose from.

Sometimes you have a need to validate your form elements with a call to your backend or some other service. One example of this is validating if an email is in use or if a subdomain is already taken.

Today we'll show you how to build a custom validator.

The best way to attach input validation in Angular is to create a directive. The documentation is good for learning more about those.

Create a module to hold directive and service.

angular.module('MyApp', []);

The directive is as follows, I'll explain more about it after.

angular.module('MyApp', []) .directive('subdomain', ['$q', 'Subdomain', function ($q, Subdomain) { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$asyncValidators.subdomain = function(modelValue) { // Empty values are okay with us. if (ctrl.$isEmpty(modelValue)) { return $q.when(); } return Subdomain.get({ domain: modelValue }).$promise; }; }, }; }]);

Not that hard. Notice the use of $q. As you can see the form and input directives from Angular support returning a Promise when handling validation.

We add a custom function to (with key: subdomain) to the controller's $asyncValidators. This function will be used by angular to check for validity.

Then we check if input is empty. If it is, we return a resolved Promise. If it's not we do a request to the backend passing in the value from the input element (modelValue) to be sent back.

The backend will return a 200 only if the subdomain is available.

Based on the backend status the promise returned will be resolved (200) or rejected (any error code).

The subdomain service is like this:

angular.module('MyApp', []).factory('Subdomain', ['$resource', function ($resource) { return $resource('/subdomain', {}, {}); }]);

Usage

<input type="text" />

Note: What type of data you expose might pose other problems, letting bots check if emails are in use might lead to bots finding out who your users are and that might not be a good idea. We illustrate an example!

You should also check out our post about Enhancing an existing website using Angular.

Unboxing Dell’s “smart selection” laptop E7450, reveals a dark, slick beauty, that has more to offer than just its looks.

At Heimdal IT we are quite fond of using Angular (AngularJS).

We have multiple products in production (timerocket, punche, Apex) that relies on it. And recently we had a request to help on a website that was being built. The original developer was going on vacation and we had to step up to complete some things. We never shy away from helping!

The site

The site we were charged with helping is a real-estate page for a construction project called “Miljøbyen”. Behind the project is a construction company called Heimdal Bolig (not a coincidence they have a similar name). They are building the biggest residential area in Northern Europe using Passive House standards.

We got the code from the test server it was hosted on (via FTP! shrug, are we still in the 80s?). And got to what I like to call exploration.

It was a Statamic install. More on that in a bit.

It had a lot of content files. One for each entity in a database.

It read data from a API endpoint (JSON), transformed it to yaml, that Statamic would consume (whaaaaat?).

It had some template/theme files. Mostly 1 for each type of page.

It used CodeKit (CodeKit) for pipelining assets. We don’t use CodeKit :(

It has a massive bundle of jQuery plugins (because why create something when 1000s of kilobytes is okay for sliders, right?)

What we needed to build

We built a lot of things for the site (not the design, designers did that) in the end. But at first we were charged with creating a pricing calculator that would show visitors a calculation about how much it would cost to buy and live at each ofthe apartments.

At first we thought it would be easy to extend the original site by manipulating Statamic and it’s templates. But I’ll be honest and tell you now: We gave up. The way things were done and the setup didn’t really provide any flexibility. Or at least not the flexibility we wanted.

We wanted a way to minimally impact the existing code and structure. And we figured this will be a decent job for Angular.

How we did it

The task of the pricing calculator was no match for custom directives in Angular. We added AngularJS as a dependency to the project and added our own little AngularJS app into the mix. Like so:

angular.module('mbApp', []);

Then we created a template (partial) that looks a little like this:

<table class="equation__table"> <tbody> <tr class="equation__table__header"> <td>Finansiering</td> <td> </td> <td>Pr. mnd.</td> </tr> <tr> <td>Pris leilighet kr.</td> <td>{{ ApartmentPrice | number:0 | customFlip }}</td> <td> </td> </tr> <tr class="equation__table__footer"> <td>Bokostnader kr.</td> <td> </td> <td>{{ Total | number:0 | customFlip }}</td> </tr> </tbody> </table>

There we more rows and columns, but you get the idea.

We then extended our little Angular app with a directive and a controller.

angular.module('mbApp', []) .controller('mbPricingCtrl', ['$scope', '$filter', '$location', function ($scope, $filter, $location) { // -- Snipped -- // Just a lot of calculation. // Assign to $scope the values that we need in the template. }]) .directive('mbPricingCalc', function () { return { scope: {}, controller: 'mbPricingCtrl', templateUrl: '/pricingcalc.html', }; });

This gives us a “custom” html tag called “<mb-pricing-calc>” that we can throw around where we want our little price calculator to show up. Still just a small change to the templates, keeping it minimal impact. And it plays nicely with WYSIWYG editors (if they allow insertion of HTML tags).

In the controller we set up some defaults for price, tax and utility prices. One for each apartment size they have (1 bedroom, 2 bedroom, 3 bedroom …). This allowed us to include the directive on the top pages, ex: /2-roms (1 bedroom information page), /2-roms (2 bedroom).

We figured the size/type to use by parsing the URL that the visitor was on. This gives the directive the possibility to be used almost everywhere.

// Figure out what type the visitor is on. var p1 = $location.absUrl().split('/')[3] || ''; var p2 = parseInt(p1.split('-')[0] || '0', 10); // None of the sizes are supported. if ([2, 3, 4].indexOf(p2) === -1) { return; } var Type = Types[p2] || null; // Type wasn't found. if (!Type) { return; }

Finish

We wrote more things of course. But I think this should be enough to show how easy one can extend an existing website with Angular.

You can check out the final result at Miljøbyen

We are thrilled to announce that our app Punche has made it into the Apple App Store. Get it from here. Which means you can get it for iPhones and iPads!

Punche is a app to track your do's and don'ts. Or to track your habits. At Heimdal IT we use it for tracking coffee intake, fruit eating, snacks and more.

What do you want to keep track of?

Apex er en digital verktøykasse for byggebransjen. Navnet Apex betyr “toppen av fjellet” og det symboliserer blant annet at man i Apex får en enklere hverdag gjennom god oversikt over prosjekter, kunder, boliger og ikke minst saksbehandling i prosjekter og for hele bedriften.  Apex er i bunn et saksbehandlings-system for byggebransjen, men det kan fint benyttes også i andre bransjer. Apex inneholder også mulighet for salg av boliger, som gjør at du kan samle all data for dine bygge prosjekter i et verktøy.

Apex er det ultimate verktøyet for å ta din bedrift inn i en digital hverdag.

We have just released our first app into the Google Play Store. Punche is a utility to help you keep track of how many times you have done something.

We use it to track our consumption of fruit, coffee and tobacco (just some of us...). What do you want to keep track of?

We love feedback! So please let us know what you think!

Happy Punch'in!