Dustin Davis
Developer, Entrepreneur

When I first learned about the <compose> element I thought I’d use it everywhere. Well, in about 16 months I’ve been using Aurelia full-time, I think I personally have only used it twice, but I’m sure I’ll use it more as we build out more reusable components.

The <compose> tag let’s you dynamically insert custom components. It turns out that most of the time I don’t need this because I know exactly what elements I want to use.

So when does it make sense to use <compose>. Here are the two instances I have used it.

Pattern Library

Our UI/UX team has developed a pattern library with code examples for our team to use. This lets us keep our styles consistent as we develop new pages.

The way we have it set up, each of the pages has a similar design and layout. Each pattern category is in a directory called patterns. There is a directory for each pattern with a similar structure.

So here is an excerpt of app.js:

export class App {
    configureRouter(config, router) {
        config.addPipelineStep('authorize', AuthorizeStep);
        this.router = router;
        config.title = 'Pattern Library';
        config.map([
            {
                route: '',
                name: 'intro',
                moduleId: './patterns/intro/index',
                nav: true,
                title: 'Intro',
            },
            {
                route: 'accordions',
                name: 'accordions',
                moduleId: './patterns/accordions/index',
                nav: true,
                title: 'Accordions',
            },
            ...

So you can see our Accordions section is located in patterns/accordions

Here is the patterns/accordions/index.html component.

<template>
    <require from="../../components/pattern-index"></require>

    <pattern-index title="Accordions" patterns="accordions/patterns" links.bind="links"></pattern-index>
</template>

Notice we are importing a pattern-index component. Here is what that component looks like:

pattern-index.html:

<template>
    <div class="fader-side-bar  fader-side-bar--top"></div>
    <div class="layout__middle__side">
        <div class="layout__middle__side__inner">
            <ul class="nav  nav--stacked">
                <li class="${link.class}" repeat.for="link of links" ><a click.delegate="subNavActivate($index)" href="#${link.href}">${link.title}</a></li>
                <li class="push-bottom-medium"></li>
            </ul>
        </div>
    </div>
    <div class="fader-side-bar  fader-side-bar--bottom"></div>

    <div class="layout__middle__main">
        <h1>${title}</h1>
        <compose view="../patterns/${patterns}.html"></compose>
    </div>
</template>

pattern-index.js

import {bindable, containerless} from 'aurelia-framework';

@containerless
export class PatternIndex {
    @bindable title = 'INCLUDE TITLE ATTRIBUTE';
    @bindable patterns;
    @bindable links;

    subNavActivate(index) {
        const linkCount = this.links.length;

        for (let i = 0; i < linkCount; i += 1) {
            this.links[i].class = '';
        }

        this.links[index].class = 'active';
        return true;
    }
}

So for the purpose of this article, there are really only two things to highlight. Here is where we are calling the pattern-index component:

<pattern-index title="Accordions" patterns="accordions/patterns" links.bind="links"></pattern-index>

Notice we pass in the patterns attribute.

And this is how we use the compose tag in the component:

<compose view="../patterns/${patterns}.html"></compose>

So basically we replacing the <compose> tags with the patterns/accordions/patterns.html component, which looks like this:

<template>
     <require from="./accordion-basic"></require>
     <require from="./accordion-close-others"></require>

    <accordion-basic></accordion-basic>
    <accordion-close-others></accordion-close-others>
</template>

Here is an example of the accordion page:

Accordion Page

Data Table

I won’t go so deep into this one, but basically give you a high level overview.

We have a <data-table> component in our system where you can bind an array of objects and basically print them out in a table. It is a very useful component and we use it in a number of places.

The problem is that sometimes you might want a column that doesn’t have anything to do with your data. For example, we have one table that has a menu of actions for each row of data. This column is only applicable to this particular data array.

screenshot example

So how do we add this in to our table? Here is what our data-cell.html portion of our component looks like:

<template>
    <require from="./record-value"></require>

    <div data-th.bind="col.label" get-class.call="col.getClass(record)" class.bind="cls">
        <compose if.bind="col.view" view.bind="col.view" view-model.bind="col.viewModel" model.bind="{record: record}"></compose>
        <record-value if.bind="!col.view" prop.bind="record[col.key]" record.bind="record" get-value.call="col.getValue(record)" title="${col.getValue(record)}"></record-value>
    </div>
</template>

Standard data in the array will use the <record-value> component, but if we want to we can specify a view and view-model to use for this column and it will be generated in this column.

We could probably refactor this code to have the <compose> render the <record-value> component if a view and view-model are not specified. Then we can remove the if.bind and simply have the <compose> tag there.

Hopefully this has been helpful. Feel free to share a comment in areas where you have found <compose> useful.

Looking back, one of the first issues I ran into in Aurelia is “how do I get my components to talk to each other?”

This could be parent/child components or sibling components.

It turned out the answer was simply “Dependency Injection” (or DI as you might see it referred to). But what exactly is dependency injection?

In the post I’m going to try to demystify it.

Basically, whenever I have data I want shared between components, the answer is to create a separate class and inject this class into each component view-model where I need it.

It is best explained with a simple example. Check out this gist.run, then I’ll explain it.

app.html:

<template>
  <require from="./comp1"></require>
  <require from="./comp2"></require>
  
  <comp1></comp1>
  <comp2></comp2>
</template>

I’m basically including to components, comp1 and comp2 and displaying them on the page. Nothing fancy here.

shared-service.js

export class Shared {
  constructor() {
    this.val = 'Initial value.';
  }
}

This is basically my shared class (or service) that I want to inject into each of my components. You could put all kinds of variables and objects in here to share, but basically we are just going to use val in each of our components.

comp1.js

import {inject} from 'aurelia-framework';

import {Shared} from 'shared-service';

@inject(Shared)
export class Comp1 {
  constructor(shared) {
    this.shared = shared;
  }

  setVal() {
    this.shared.val = 'Component 1 set value';
  }
}

Here is our first component view-model. Notice we are importing inject from aurelia-framework and our Shared class from shared-service.js.

You can then use the @inject decorator, which is an ES2016 feature, to inject this class into your view-model class. Notice you need to set it to a class variable in your constructor. If this pattern looks new to you, don’t worry, you’ll get used to it fast in Aurelia, because you’ll use it everywhere.

If you prefer not to use the decorator for whatever reason, check out this stack overflow example on how to inject with ES5.

comp1.html

<template>
  <require from="./comp1child"></require>

  <div>
    Comp1: ${shared.val}<br>
    <button click.delegate="setVal()">Set Value</button>
  </div><br>

  <comp1child></comp1child>
</template>

Here you can basically see how I’m including a child component and outputting the shared.val value.

If you look through the other components you will notice they pretty much follow the same pattern so there is not much else to explain. Basically our shared class is a singleton that is injected to our component classes.

Bonus: One small thing I’d like to point out is the comp2child component. Notice there is no view model. All we have is comp2child.html with no associated js file.

comp2child.html

<template bindable="val">
  <div>
    Comp2 Child component with no view-model.<br>
    Edit here too: <input type="text" value.bind="val">
  </div>
</template>

We are doing this with the bindable attribute in the <template> tag.

We then pass in the attribute we want to bind when we add the component: <comp2child val.two-way="shared.val"></comp2child>. Notice I’m specifying two-way data binding. If I just used .bind it would default to one-way binding and editing the value in the comp2child component would not propagate back up to the service.

If I were to have a view-model for comp2child what would it look like if I wanted to have a bindable instead of using DI? Something like this:

import {bindable} from 'aurelia-framework';

export class Comp2child {
  @bindable val
}

If you want to observe changes to an array in Aurelia, you can’t simply use the @observable decorator as it won’t recognize mutations to the the array. Instead, you need to use the collectionObserver in the BindingEngine.

Example:

import {BindingEngine, inject} from 'aurelia-framework';

@inject(BindingEngine)
export class App {
    constructor(bindingEngine) {
        this.bindingEngine = bindingEngine;
        this.data = [];
    }
    
    attached() {
      this.subscription = this.bindingEngine.collectionObserver(this.data).subscribe(this.dataChanged);
    }
    
    detached() {
      this.subscription.dispose();
    }

    dataChanged(splices) {
      console.debug('dataChanged', splices);
    }
}

There are some gotchas that you should be aware of though…

In the example above, if you were to replace the value of this.data completely, then your collectionObserver will not work, unless you subscribe again.

If you are always going to replace your array data, then the @observable would work at this point.

As an example, check out this gist.run.

Here is the code for reference:

import {BindingEngine, inject, observable} from 'aurelia-framework';

@inject(BindingEngine)
export class App {
  @observable data2 = [];

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.data = [];
    this.log = [];
  }

  attached() {
    this.observeData();
  }

  observeData() {
    if (this.subscription) {
      this.subscription.dispose();
    }
    this.subscription = this.bindingEngine
      .collectionObserver(this.data)
      .subscribe(splices => {
        this.dataChanged(splices);
      });
  }

  detached() {
    if (this.subscription) {
      this.subscription.dispose();
    }
  }

  dataChanged(splices) {
    console.debug("dataChanged", splices);
    this.log.unshift('data changed ' + new Date());
  }

  data2Changed(newVal) {
    console.debug("data2Changed", newVal);
    this.log.unshift('data2 changed ' + new Date());
  }

  addData() {
    this.data.push(new Date());
    this.data2.push(new Date());
  }

  popData() {
    this.data.pop();
    this.data2.pop();
  }

  spliceData() {
    const rand = Math.floor(Math.random() * this.data.length);
    this.data.splice(rand, 1, 'spliced');
    this.data2.splice(rand, 1, 'spliced');
  }

  replaceData() {
    this.data = ['replaced', 'data', 'completely'];
    this.data2 = ['replaced', 'data', 'completely'];
  }
}

You will notice that anytime we are modifying the array of data (if you click the Add Data, Pop Data, or Splice Data buttons) the dataChanged() function is triggered. The observable data2 variable is not. If you press the Replace Data button you will see that the data2Changed() function is triggered, and the dataChange() function is no longer triggered on the data array changing.

So you may have to come up with a combination of solutions if you want to observe both the array being replaced and the array being modified. Something like this:

import {BindingEngine, inject, observable} from 'aurelia-framework';

@inject(BindingEngine)
export class App {
  @observable data = [];

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.log = [];
  }

  attached() {
    this.observeData();
  }

  observeData() {
    if (this.subscription) {
      this.subscription.dispose();
    }
    this.subscription = this.bindingEngine
      .collectionObserver(this.data)
      .subscribe(splices => {
        this.dataModified(splices);
      });
  }

  detached() {
    if (this.subscription) {
      this.subscription.dispose();
    }
  }

  dataChanged(newVal) {
    this.log.unshift('data changed ' + new Date());
    this.observeData();
  }

  dataModified(splices) {
    this.log.unshift('data modified ' + new Date());
  }
}

See an example running here.

I’ve been using Aurelia for over a year now. We have been working on a new live event dashboard and scheduler, which some big clients are beta testing now.

Yet, I continue to learn new things. Yesterday I learned two little template hacks that I think I will find useful in the future and now, hopefully you will too.

HTML Only Templates

So I figured you could have HTML only templates, but I haven’t really seen the need for them up to this point. Most often you will want a template that has some kind of bindable data. Well, did you know you can add bindables to templates without using a view-model?

I learned this tip from Dwayne Charrington‘s book Aurelia For Real World Applications (see chapter 7).

In your template tag, you can simply add the bindable attribute and pass in a comma separated list of bindable attrubutes.

<template bindable="heading, bodyText">
    <h1>${heading}</h1>
    <p>${bodyText}</p>
</template>

To use this template, you simply require it and pass in your attributes.

<template>
    <require from="./my-element.html"></require>
    <my-element heading="This is the heading" body-text="This is the bodyText"></my-element>
</template>

You can see a working example here.

Replaceable Parts

I talked about HTML only templates first so I could show the replaceable parts trick without the need of a view-model.

Sometimes you need to replace a whole section of content in a component. You can do this in various ways. Often I simply use the <slot> tag or some other method like <compose>.

But I recently learned about replaceable parts from a Pluralsight course by Brian Noyes.

If you want to have a section of your component that is replaceable you can add a template tag with a replaceable attribute and a part attribute. For example (comp.html):

<template>
  <h2>This is a component with replaceable parts.</h2>
  <template replaceable part="repl">This part is replaceable.</template>
</template>

To replace the replaceable template part, you would include a template tag within your custom element component and specify the replace-part attribute. Example:

<template>
  <require from="./comp.html"></require>
  <comp></comp>
  <comp>
    <template replace-part="repl">
      This part is being replaced.
    </template>
  </comp>
  <comp>
    <template replace-part="repl">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </template>
  </comp>
</template>

Checking out a working example here.

Why Replaceable Parts instead of Slots?

From what I was told, replaceable parts was implemented because of limitations with the Shadow DOM slots spec. In most cases, using <slot> is cleaner and follows the Shadow DOM standard. But <slot> does not allow for dynamic content. Slots cannot be added or removed dynamically. So, you can’t place and if binding on a slot, but you can on a replace-part.

I love the idea of Disney Circle, Torch, and Luma where you can get on your phone and pause the internet for certain devices at home.

But Circle being the cheapest, I didn’t really want to shell out $99 for yet another device when I just paid $155 for a new Nighthawk R7000 router and took the time to set up DD-WRT on it so I could put time-based internet access on my kids’ devices. I have OpenDNS for filtering already, so the only thing I was really missing was the internet pause button.

And to be honest, I don’t know exactly how those services work. Can you tie multiple devices to one person or group and pause them all at once? Because that is what I wanted to do.

After playing around with some ideas I think I have found a decent working solution.

Step 1: Create Static Leases

For each device you want to control, you need to create a static IP address. You do this by going to Services -> Services. Then under Static Leases you click the Add button to add a row. Enter the MAC address of your device, a hostname, IP address and client lease time.

I have 3 TV ares in my home: Living Room, Basement, Master Bedroom. I put all the devices in each area in their own IP range. For example:

  • Living Room: 192.168.1.150 ~ 192.168.1.159
    • Samsung TV: 192.168.1.150
    • Apple TV: 192.168.1.151
    • Chromecast: 192.168.1.152
  • Basement: 192.168.1.160 ~ 192.168.1.169
    • Amazon FireTV: 192.168.1.160
    • Roku: 192.168.1.161
    • Wii: 192.168.1.162
  • Master Bedroom: 192.168.1.170 ~ 192.168.1.179
    • HiSense TV: 192.168.1.170
    • Apple TV: 192.168.1.171
    • Chromecast: 192.168.1.172
    • Roku: 192.168.1.173

Finding and entering MAC addresses can be time consuming. If you Status -> LAN you can see the list of clients you have connected to your router along with their IP address. Some Hostnames are not very readable or may just show *. If you click on the MAC address it will give you some information that may help you figure out what the device is that is connecting.

For example, one Hostname might be * and the MAC address starts with 74:C2:46, this link will tell you that the device was made by Amazon Technologies Inc. That might be my FireTV.

If you still are not sure, you can generally go to your various devices and go to the settings options to find your MAC address.

Pro Tip: Also, because the MAC address is a link, it can make it difficult to copy/paste those MAC addresses. I copied the whole table of DHCP Clients and pasted into a text editor. That way I could copy the MAC address easier and also I don’t have to keep switching between tabs in the the dd-wrt interface.

Step 2: Create Access Restrictions

On the dd-wrt control panel, go to Access Restrictions -> WAN Access. Under Access Policy, select an open policy. Give it a name and edit the list of clients.

So, for example, say I select Policy 1 ( ). I name it Living Room TV. I would then click on Edit List of Clients. A new window opens. At the bottom of that screen for IP Range 01 I enter 192.168.1.150 ~ 192.168.1.159 and then click Apply Settings, then click Close.

I set the policy to Deny Everyday, but I leave it Disabled then apply settings.

Now, whenever I want to disable all my living room TVs I can come back to this setting and change the Status to Enable and then click Apply Settings – Boom! No internet to the Living Room TVs.

You can also get creative with these access restrictions. The other night, my 6 year old woke up at 1 AM and decided to turn on the TV. You can put time based access restrictions so that they can’t watch TV during certain hours of the day (or night) and leave these restrictions always on.

Step 3: Enable Access Restrictions from your Phone

The biggest appeal of the hardware I mentioned above is that you can pause the internet from your phone.

If you are connected to your wifi, you can access this web interface from your phone using the same IP you use on your computer (generally 192.168.1.1). But what if you leave the home and put your kids to bed and you arrive at the movie theater with your spouse and you realize there is no way your little angels are going to obey you and leave the TV off and go to bed.

Wouldn’t it be nice to open your phone and disable things remotely?

On your dd-wrt control panel, go to Administration -> Management. Under Web Access enable the HTTPS protocol. Under Remote Access, select Enable and Use HTTPS. Select a Web GUI Port. Default is 8080. You can leave all the other settings. Click Apply Settings

Now you should be able to access your router’s control panel from anywhere if you have a static IP to your home. I have Comcast Business and while I don’t pay for a static IP, I’ve noticed my IP has never changed in all the years I’ve had Comcast.

To get your home’s IP address you can go to myIPaddress.com. So, let’s say your IP address was 174.52.104.111. You would then go to https://174.52.104.111:8080 on your phone to access the control panel (You may want to bookmark this page).

The interface isn’t the greatest from a phone browser there are a few clicks to get there, but the effects are the same, you can pause the internet on certain devices from anywhere!

BTW: There is a dd-wrt app in the iTunes store that you can enter your connection and login details so you don’t have to login via a browser if you prefer.

In our home we have an old iMac for the kids to use. They each have their own login. Each login has a parental control that logs them out after one hour. This has been helpful to prevent fights over who has been on too long and limits their screen time.

The problem I’ve had lately is that we ask them to do homework and chores before getting on the computer, yet they get on anyway.

So I had this idea to change their passwords every day and email the new passwords to my wife and I each morning. This way they we can make sure they have their jobs done before they get on the computer. I know, it sucks to be a nerd’s child.

Here is the python script that makes the magic happen…

#!/usr/bin/env python
import random
import smtplib

from subprocess import call
from email.mime.text import MIMEText


FROM_EMAIL = ''
SMTP_HOST = ''
SMTP_PORT = 587
SMTP_USERNAME = ''
SMTP_PASSWORD = ''
USE_TLS = True
TO = ''
LOGINS = 'child1 child2 child3 etc'.split()
ADMIN_USERNAME = ''
ADMIN_PASSWORD = ''


passwords = {}
for login in LOGINS:
    # get 4 digit random number for the new password
    password = random.randint(1000, 9999)
    command = 'dscl -u {0} -P {1} . -passwd /Users/{2} {3}'.format(
        ADMIN_USERNAME, ADMIN_PASSWORD, login, password)
    call(command.split())
    passwords[login] = password

msg = '';
for key, val in passwords.iteritems():
    msg += '{0}: {1}\n'.format(key.title(), val)
msg = MIMEText(msg)
msg['Subject'] = 'Today\'s passwords';
msg['From'] = FROM_EMAIL
msg['To'] = TO

s = smtplib.SMTP(SMTP_HOST, SMTP_PORT)
s.ehlo()
if USE_TLS:
    s.starttls()
s.login(SMTP_USERNAME, SMTP_PASSWORD)
s.sendmail(FROM_EMAIL, TO.split(), msg.as_string())
s.quit()

If you’d like to use this, just enter all the GLOBAL variables at the top. I named this file daily.py and set it to run at 6 am every day with the following crontab setting:

0 6 * * * python /Users/dustin/daily.py

I set up a free account on Mailjet to use as an SMTP server. Thanks Mailjet.

As soon as I ran the script for the first time, my wife got a Gmail notification in the other room and said, “Thank you!” #winning

As I have been working on a new project in Aurelia the past few weeks, I’ve encountered a number of problems. Solutions come that seem obvious after the fact, but a slow process to get to them.

In this simple tutorial, I show show a simple proof-of-concept I came up with for an accordion resource component. Hopefully this can give a good example of components within components, and dependency injection between them.

If you are not familiar with accordions check out the jQuery UI accordion demo.

Here are the basic requirements for what I want to build:

  • Click on a section title to expand it’s associated content area
  • If you click on another title, close the section that is currently open
  • Open the first section by default. You should never have all sections closed

Let’s start with the desired html markup. I would like to create my accordion like so (app.html):

<accordion>
  <accordion-section title="Section 1">
    Content area 1
  </accordion-section>
  <accordion-section title="Section 2">
    Content area 2
  </accordion-section>
  <accordion-section title="Section 3">
    Content area 3
  </accordion-section>
  <accordion-section title="Section 4">
    Content area 4
  </accordion-section>
</accordion>

So I will need at least two components, accordion and accordion-section.

My accordion template is simple (accordion.html):

<template>
  <div class="accordion">
    <content></content>
  </div>  
</template>

Basically I’m just wrapping this component in a div with the class of “accordion” so I can use this class for CSS. The <content></content> tags basically tell the component to insert whatever markup I put inside my component tag. In this case, it is each of my <accordion-section> tags.

My accordion-section template is also pretty straight forward (accordion-section.html):

<template>
  <h3 click.trigger="showContent()">${title}</h3>
  <div show.bind="isVisible">
    <p>
      <content></content>
    </p>
  </div>
</template>

Notice my bindings here.

  • click.trigger="showContent()": this will make a call to show this associated content
  • ${title}: display the title of this accordion-section
  • show.bind="isVisible": I’ll have a variable to set whether this content section is displayed

Now on to the view models…

The tricky part of this component is that each accordion-section needs to “talk” to the other accordion-sections because when I open one, I need the others to close.

So I’m going to keep track of all the sections in my Accordion view-model and use dependency injection to inject my parent class into each child class.

So my parent class (Accordion) is pretty simple (accordion.js):

export class Accordion {
  constructor() {
    this.sections = [];
  }
}

I’m basically creating an empty array named sections when I instantiate this class. I can then use this array in my AccordionSection view-model class, which looks like this (accordion-section.js):

import {bindable, inject} from 'aurelia-framework';

import {Accordion} from './accordion';


@inject(Accordion)
export class AccordionSection {
  @bindable title;
  
  constructor(accordion) {
    this.accordion = accordion;
  }
  
  attached() {
    this.accordion.sections.push(this);
    this.accordion.sections[0].isVisible = true;
  }
  
  showContent() {
    for (let section of this.accordion.sections) {
      section.isVisible = false;
    }
    this.isVisible = true;
  }
}

What’s going on here?

First, my imports. I’m importing bindable & inject from ‘aurelia-framework’. I’m also importing my Accordion class and injecting it into my AccordionSection class.

I’m making the title variable bindable so that I can read the title attribute set in our html markup.

When the component is attached(), I’m adding this view-model class to the Accordion class sections array. I then set the first item in that array to visible.

In the showContent() method (called on the title click) I first set all the section’s isVisible parameter to false, then set the clicked section isVisible to true.

That’s all there is to this simple component. To see it in action, check out this plunker.

Now go build upon this and add some styles and transitions. That’s not my department. 😉

TL;DR – After analyzing the current state of Angular 1, Angular 2, React/Redux, Aurelia, Ember & Meteor, I’m using Aurelia for my next project.

Since attending ng-conf 2015, and the announcement of Angular 2, I felt 2015 would be the year the internet stood still to wait for Angular 2.

It turns out that wasn’t the case at all. Instead, it seems React became the new hot thing. I haven’t done anything serious in React, I’ve done a few tutorials. It seems pretty straight forward. I know there are people that really like it.

But for whatever reason, I just can’t seem to take the React plunge. I can’t really put my finger on it. Maybe it is because it is not a full framework, but rather just a tool to make components. I haven’t really looked into Flux or Redux either.

Perhaps it is jsx that just feels weird to me. I don’t really mind jsx either. But, one thing that I think would annoy me often enough is to remember to use className instead of class in my elements. And I’m sure className would end up in some of my html where I don’t intend it to be.

As Angular 2 has neared its beta release, I decided to give it a try. I was excited. I REALLY wanted to like it. I even have tickets for ng-conf 2016 for the 3rd year in a row. I think it is fair to say I have drunk the Angular kool-aid.

But the Angular 2 tutorial really left a bad taste in my mouth. I hated the new syntax. It’s difficult to type and hard to grok. For example:

<li *ngFor="#hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

Look at all those new symbols: *, #, [], ()

If I felt uncomfortable with jsx, this makes me more uncomfortable.

As for TypeScript, I’m fine with transpilers. I’ve taken a liking to CoffeeScript. There are a number of things I don’t like about CoffeeScript, but I prefer it over ES5. But again, TypeScript left me feeling frustrated. Want to make JavaScript more verbose and unpleasant? Use TypeScript. (Note: After attending ng-conf and using ES2016 for a while, I may give TypeScript another try at some some point to see if I like strong typing)

So now what?

In my frustration somehow I came across a new framework that was in the works – Aurelia.

I knew nothing of Rob Eisenberg or Durandal or anything else he did. I didn’t know that he used to be on the Angular 2 core team and he left because he didn’t like the direction things were going.

But when I saw the templating syntax, it just made sense. Want to bind to value? value.bind. What if you just one way binding? value.one-way Want to specify two way binding? value.two-way Want to just bind once? value.bind-once What if you want to bind to src of an anchor tag? src.bind

Just carry that pattern where ever you need to.

So that led me down a path of learning more about Aurelia – and I like what I see.

Anothor choice I briefly considered was Ember. I’ve heard good things about ember.js, but I have never looked into it because I’ve often heard it compared to Ruby on Rails. I’ve heard it has a steep learning curve and it is very opinionated. From what I’ve seen of Aurelia, if Ember was like RoR, I would compare Aurelia to Django. You use convention over configuration to save you time and help you manage your project, but if you need to step out of the framework, you can.

Also, one more choice I briefly considered was Meteor. I suppose if I were started a new project from scratch, I would probably go with Meteor as it gives you so much out of the box. But I wouldn’t use Blaze. I would opt for Angular or React for templating. Blaze just doesn’t give you much. But whereas I am starting a new project with a back-end in place and many existing APIs, I think Aurelia is a better choice.

So today at work we spent a couple of hours deliberating the pros and cons of Angular 2, Aurelia and React. We even went so far as to rate various benefits and provide rankings to them such as syntax legibility, learnability, community, etc. Our scores looked something like this:

Angular 2: 487
Aurelia: 649
React: 656

Our data based decision would point us to React. But then we did a straw poll. 7 people voted and these are the results:

Angular 2: 0
Aurelia: 5
React: 2

So the decision has been made. We will be starting two new projects in Aurelia.

 

I just saw WordPress admin is now running on node/react/flux. That is pretty huge. I’ve downloaded their mac desktop app and I’m writing my first post using it.

While I don’t do much PHP development these days, a lot of my day has moved from Python to JavaScript. I’ve always felt that is the way things are going. So this is huge to see WordPress moving this direction. I don’t know what their plans are for WordPress sites, but if they move the whole platform to JavaScript it will really be a death nail to PHP.

Thanks to Matt Berther for this nice little command to create an iso image from a directory in OS X.

hdiutil makehybrid -o ~/image.iso ~/path/to/folder -iso -joliet

Let’s be honest, I’m not going to remember this command in 6 months when I need to run it again. So I created a service. I’ll show you how simple it was.

Open Automator & create a new service

Automator - Service

Add the action to Run Shell Script

Run Shell Script

The service receives selected folders in Finder. Set the shell to /usr/bin/python and pass input as arguments. Add the following 3 lines of python:

import sys
from subprocess import call

call('hdiutil makehybrid -o {0}.iso {0} -iso -joliet'.format(sys.argv[1]), shell=True)

Python Script

Save the service and give it a name such as “Create .iso”

Now you can right-click on a directory to create an iso image.
Create .iso service