BRANDiD Hackternship. Week One

Batman & Robin. Doing it since 1966.

Holy fucking pig shit Batman! These guys are intense. I’m talking Hurt Locker intense. I have no idea what day it is nor where my line endings are but somehow we’ve managed to finish off two fairly decent pieces of work which are deployable and almost finished a third. Awesome! Arush has really thrown us in at the deep end with trying to learn not just AngularJS and JavaScript but also their codebase. Have I said it’s been intense?

Coming from a background in testing it’s been nice to be on the other side of the keyboard and develop features for the user and try and keep it bug-free. Well, I’m saying that now but ask me again in a month if I give a shit about bugs! I [hopefully] will!

So what have I learnt this week? Sleep is irrelevant. It just gets in the way of learning and developing new shit for the site. Nick is a genius coder and types faster than I can think. Arush is a surprisingly good teacher and certainly knows his shit. Both Arush and Ankush are hard taskmasters.

Techy shit? I’ve learnt you don’t need a backend. Huh? Traditional ‘backend’ servers [App, DB] are history. We retrieve all our data asynchronously from Parse and Firebase, and sync it back in to our client-side app via the use of Promises. [tl;dr JavaScript controls the asynchronous flow of data by saying ‘Yo, I promise I’ll get this for you later’ and then gets on with shit without blocking until we resolve the promise. User is none the wiser. Site is super slick and super quick].

Angular directives are cool! They are reusable DOM elements, with self-contained logic. That means write them once, use them as much as you want, wherever you want.

Check this:

Simple, I know...

In the HTML I’ve put in a <cheddar> and a <jelly> tag. This then puts text on the page. How? Via directives! I’ve told this page [in the html tag] to use my ‘dessertApp’ app. I’ve declared this in the file ‘app.js’. Let’s have a look:

angular.module('dessertApp', [])
.directive('cheddar', function() {
  return {
    restrict: 'E',
    template: 'mmm! Mature...'
  };
})

.directive('jelly', function() {
  return {
    restrict : 'E',
    template : 'wibble wobble'
  };
});

Line 1 – Create a new angular module called ‘dessertApp’. Fairly simple. Next up, create a new directive called ‘cheddar’. We then return some parameters. Restrict tells the directive what we are going to call in our HTML. We’ve used ‘E’ for ‘Element’. This means when we create a new element in our HTML called <cheddar>, angular knows exactly what to do with it. The next parameter, ‘template’ puts in the following bit of code in to our custom cheddar element which is just a simple div with some text in it.

Seems simple right? That’s because they are! However they are far more powerful than just injecting cheesy text on to a page. There other ways to have them in your HTML [class, attribute and even comments], can inject other HTML pages rather than snippets plus they can have there own controllers but all this is for another day.

It’s taken me a while to grasp this but I think I’m getting there. Other cool stuff? Mixpanel for tracking [metrics metrics metrics!]. Hooking in to the Facebook Open Graph API and Dialogs. This is going to be key for growth.

There’s so much more that frankly I don’t remember. This post seems like my brain has just taken a huge shit on the keyboard. I’ll try and be a bit more coherent and perhaps even provide some value in the future. Did I mention it’s been a pretty intense week?

Yo, I’m out like a deaf kid in musical chairs…


			

Your Angular.js directives will break when minified. This is how you write directives #likeaboss

Surprisingly enough, if you write your directive controllers as per the documentation, they will break when minified.
Image
IMO the standard should be to write minification compatible code. The docs do talk about using the minfication-compatible square-brakets [] DI syntax for controllers and such, but not for directive controllers. In fact every directive I’ve ever seen in videos, at meetups or in docs will break when minified.

Be German About Your Frontend (And Ripping Magento’s Face Off)

Just finished my talk at the super high energy #MagentoLive conference in London. The response was really positive (see below), it’s really encouraging to see people impressed with the technical work we’ve put in to BRANDiD.

My presentation is about ripping the frontend off Magento and rebuilding it with more modern technologies like Angular.js, Parse and SASS and explaining all the benefits of working this way. It means we can split frontend teams from backend teams, have an idiotproof upgrade path, lightning fast page load speed and amazing flexibility.

My slides are below. Shout out to Adrian of GPMD for going through my slides with me last night.

Thanks for the kind words: