Dustin Davis
Developer, Entrepreneur

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.

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 Meteor 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

I\’ve been using django-helpdesk for my support software on my Django powered site. It works well enough, but I didn\’t really like it.

I started looking around for \”better\” support tools. I actually found an article that tried to rank 76 support tools! Everything I tried I didn\’t really love.

Then one day I as I was listening to a MicroConf from HIten Shah, in the Q&A someone asked him about support and he said he still prefers to use Gmail.

That settled it for me. Here are the reasons why I prefer to use Gmail for customer support.

It is how customers prefer to communicate

I hate using support ticket systems. They are all slightly different and all annoying. They are even more annoying when not integrated well and I have to create a new account just for the support system and knowledge base. I prefer to just email support. So, I assume most of my customers prefer the same.

Canned Responses

I\’ve heard a lot of people use canned responses, but I prefer aText. It has more features (labels, cursor placement) and its faster.

You can also add lots of extra shortcuts you can use while communicating with your customers. Shortcuts could include sub canned responses and links.

For example, I could type eb.faq.banks which would then automatically change to a url to the FAQ page on banks for Envelope Budget.

Add Forms to your App to Give Yourself More Context

Creating a form in your SaaS app for customers to use to send you a support email has a few benefits. You can add text to the subject line or in the body of the email to make things even easier. Here are some examples:

  • Username: If you use usernames you can append this to the message so you don\’t have to look it up manually.
  • Category: Sometimes you will see help desk software have you select a category. You could do the same and prepend it to your subject line. Then create a Gmail filter to auto assign it to the matching label.
  • Priority: Likewise if you want priorities you could do something similar and star the email that comes in.
  • Link to customer profile You could append a link to the customers profile so you can go right to it and learn more about the customer if applicable. Alternatively, you could just append all the info you need in the ticket.

Here are the items I like to see for each customer when they contact me:

  1. Username
  2. Plan type
  3. Date Joined

You can get more information about your customers

Reparative can give you more details about your customer. I often find myself relating better to customers when I know more about them. For example, if I see a link to their twitter or LinkedIn profile and see they are also a programmer, I can be more technical and use a bit more bevity in technical responses.

Context & History

One of my favorite features when gmail was first released was how it group replied & forwarded conversation. This is really handy.

Often customers will open an old email and reply to it when they have a new question. I have no problem with this. In fact, I prefer it because then I can see our past conversations as well and have some context when working with the customer.

Undo Send

Ever hit the send button and then immediately thought, \”oh wait, I forgot something!\” It happens occasionally. Undo send give you about 10 seconds to change your mind after hitting send.

GrexIt

I recently came across this tool that looks helpful when working with others in support. As I grow I may look into it. But as a one man support team, it is just not needed right now. At least I know there are tools to help me in the future.

Stars & Labels

Right now, my support volume is so low I maintain inbox zero with ease. I know that will not always be the case and I\’ll want a way to prioritize. Having multiple stars and labels will help keep me organized.

Mailbox & Boomerang

I often use the Mailbox app on my mac or iPhone, or Boomerang in Gmail to archive message and have them return to my inbox and a certain time.

Sometimes when a but report comes in I tell a person I will get back to them when it is fixed. I can then boomerang it for when I think it should be fix. When it shows up in the inbox again I can reply and let them know it is fixed, or remember to hurry and fix the bug so I can reply!

Stats

I heard someone share their first response time for support tickets. I thought, \”I wish I had a way to track this.\” Wouldn\’t you know, there already is. Check out Gmail Meter. It actually has this stat and builds it for you – along with other interest email stats. And, like Gmail, its free.

Mobile

I don\’t need a special app on my iPhone or iPad. I can use the default mail client or the Gmail app (or Mailbox or a myriad of other apps I\’m sure).

Chat

Sometimes a customer may also use Gmail and may be online. You can quickly pull up a Google Hangouts or chat session with them.

Offline Mode

Want to go to lunch and answer all your support emails? You don\’t have wifi or tethering? Just use Gmail\’s offline mode to read and reply to all your emails and have them all synced and sent when you get back online.

I love collecting t-shirts at programming conference. So far I’ve gotten some good ones at ng-conf. Here are the eight shirts I added to my wardrobe. Counting down to my favorite.

06-IMG_4420

8. CDK Global

These guys were awesome to put a t-shirt in every swag bag so you didn’t have to go ask for it. Unfortunately it is my least favorite because it is black. Two words, beard dandruff.

07-IMG_4421

7. ng-conf

This is the shirt everyone got in their swag bad. It is a nice simple design. I like the shirt fabric much better than last years. This is year the shirt is white print on gray shirt. It’s a nice minimalistic design that I like, but I feel like a race car driver with all the logos not the back of the shirt. But hey, thanks to the ng-conf sponsors!

1-IMG_4426

6. Domo (T-Shirt)

A nice soft t-shirt. Gray with Domo logo on the front and Domo careers xml markup on the back.

02-IMG_4416

5. Capital One Tech

I had the choice of red or blue. I kind of wish I went with red since I have a few other blue shirts. This has a nice simple logo, again with a nice soft fabric.

03-IMG_4417

4. AirPair

This was the only light colored shirt I saw so it stands out a bit more. Great fabric with two color print. Their was a catch to get this shirt – you had to sign up on their website. But that wasn’t a problem because I would have anyway. They have an interesting service where I can get paid to mentor someone on the things I have expertise in. Or, I could find a mentor to help me out with a project.

05-IMG_4419

3. Firebase

Nice soft blue t-shirt. I love that this was designed custom for this event with the year on it. I like the snowflake in the background of the Angular logo – giving it a touch of Salt Lake City. I also got a nice yellow beanie with the Firebase logo.

04-IMG_4418

2. Domo (Soccer shirt)

This has to have been the most expensive shirt being handed out at the conference. Many people would probably put this shirt #1 on the list. But I’m not a soccer fan. Had it been a baseball jersey, easily #1 on this list!

01-IMG_4415

1. Ionic Framework

I got this same shirt last year and I wore it all the time. I love the minimal and interesting logo. Unfortunately I left it in a condo in St. George a few months ago when we took a family trip to hike Zion National Park. I found out about this shirt on twitter and found Mike Hartington and he hooked me up with a new shirt.

Note:
There were other t-shirts being handed out of course, but I didn’t get one either because I didn’t know about it, or it didn’t look like something I’d wear (black shirt with colorful bubbles all over it, for example)

Yesterday I attended the advanced workshop at ng-conf. I thought I\’d share some of the highlights.

There were four rooms for the advanced workshops. We stayed in the same room while the instructors rotated.

AngularJS Animation

Our first session was on AngularJS Animation by Lukas Ruebbelke. I\’ll be honest, I\’ve been spoiled by being able to work with great designers the past 5 years or so, so I haven\’t kept up on design & CSS. So that said, I\’ve relied on them to do all the amazing UX animations & such.

So this was all new to me and it was great to see the magic behind CSS transitions and how to make them work with angular. We did have some issues with wifi so it took a little longer to get started that we had hoped.

Lukas had some great demos setup up for us to play around with. I had the most fun with this example adding a jack-in-the-box transition effect to the images.

Advanced Directives

Our second session was on advanced directives by Joe Maddalone. This was my favorite session due to the topic, the content, and the hands on examples.

I know I don\’t use directives enough in AngularJS. It was great to see some of the advanced features in directives.

It was interesting to see how to build a directive to loop through data as an alternative to ng-repeat. I especially enjoyed learning about transclude: \'element\'. I admit it was a little hard to grasp, so I may have to go over it again and play around with it more.

Lunch

Lunch was provided and catered by the Little America Hotel. It was amazing as their food always is. I just wanted to give a shout out, that\’s all.

Angular Formly

Our third session was on Angular Formly by Kent C. Dodds.

I have to admit, I really hate writing forms. In fact, over 10 years ago I wrote sort of mini language to create forms. I would parse it with Perl to generate html for forms.

One feature I really love in Django is their forms implementation.

I haven\’t really had to work with forms for several months, so I haven\’t felt that pain, but I would say that if I were to create any type of form with more than 3 or 4 fields, or if I had an app with multiple forms, I would most likely use Formly.

Firmly basically lets you code out your forms in JavaScript. I limits the amount of coding you have to do and gives you consistent looking forms with many great features to do everything you need to get done.

Protractor

Our last session was on Protractor by Ben Clickinbeard.

Protractor is basically an end to end testing framework for Angular apps.

I apologize to Ben, but I kind of checked out of this session and went back to learning about animation and css transitions.

It had nothing to do with the presenter, but rather the topic. I spend 7 years in QA and I find testing a boring subject overall. I know some companies are all about test driven development, but I\’m not a fan so this whole topic just had me disinterested.

Summary

Overall it was a great day to step out of the home office and spend the day learning new things – and I did learn a lot of new things. Good job Egghead.io team for the presentations.

Lego inspired
  1. Type text in Legothick font
  2. Highlight text and select Object -> Expand
  3. Select the Live Paint Bucket tool by pressing K
  4. Select white as the background color. With the text object highlighted, click inside each letter to fill it with white.
  5. With the text selected, select Object -> Path -> Offset Path…. Turn on preview and select the level of offset you want.
  6. With the offset path selected (it is selected by default, but if you happen to deselect, you may need to right click on the object and select Ungroup), choose yellow for the background color and no stroke.

I recently needed to update the SSL certificate on EnvelopeBudget.com. Below are the notes I took in the process for when I need to do it again in 5 years.

Step 1

Purchase an SSL certificate. I bought a cheap one from namecheap.com.

Step 2

Create CSR (certificate signing request)

openssl req -newkey rsa:2048 -nodes -keyout envelopebudget.com.key -out envelopebudget.com.csr

Then print it out and copy it to your clipboard.

cat envelopebudget.csr

Paste CSR into the namecheap admin area

Wait for approval email… submit approval.

SSL cert will be emailed to you in zip file \”envelopebudget_com.zip\”

Step 3

Upload the zip file to your server using scp.

scp envelopebudget_com.zip envelope@envelopebudget.com:~

Unzip the file on your server.

unzip envelopebudget_com.zip

Concatenate the primary certificates.

cat envelopebudget_com.crt COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt AddTrustExternalCARoot.crt >> ssl-bundle.crt

Move all certs to /etc/ssl/localcerts.

    sudo mkdir /etc/ssl/localcerts
    sudo mv *.crt *.key *.csr *.zip /etc/ssl/localcerts

Make sure the following is in nginx. (See Setting up a Django Server with PostgreSQL, Nginx, Celery & RabbitMQ)

    ssl on;
    ssl_certificate /etc/ssl/localcerts/ssl-bundle.crt;
    ssl_certificate_key /etc/ssl/localcerts/envelopebudget.com.key;
    ssl_protocols        SSLv3 TLSv1 TLSv1.1 TLSv1.2;

Restart nginx.

Essentialism

I completed the audio book Essentialism: The Disciplined Pursuit of Less by Greg McKeown. I had read some good reviews on how it has changed some people lives such as Stu McLarin, Michael Hyatt and Pat Flynn.

I don\’t know that is was as life changing for me as it was for them. Yes the book resonated with me and there were some good ideas in there, but nothing seemed revolutionary. In fact, it almost felt like stuff I had been taught my whole life, but backed up and supported by research and stories and given a new term: \”essentialism\”.

I guess I feel like I have a good balance in life as it is. I think I unconsciously made many essentialism type decisions after I was diagnosed with GIST cancer. In fact, I made a major job change last summer in order to take leave the face-paced world of a startup where I was in-line to be the CTO in order to take on a less stressful job where I could work from home and spend less time commuting and more time with my family.

I don\’t feel like I have a major problem of taking on too much or doing non-essential tasks. In fact, I often feel like there is more I should be doing. So, yes, there are many ways I can improve, but none of them are major life altering decisions. I just need to focus on the essential things I need to do in order to reach my goals. Setting goals regularly is one of those things I should be doing more of.

One interesting aspect of the book that made me do a \”Wait, what?\” was when the author said he likes to read classic literature first thing in the morning. He mentioned a number of books he liked to read and two of them he included were the Bible and the Book of Mormon. I didn\’t realize the author was LDS. I have to admit, that once I realized that, I did pay a little more attention as I am also a Mormon. I guess I have a little bias in me.

One question I have is can wealth really be achieved by practicing essentialism? It seemed to me that many of the stories in the book where of wealthy people turning to essentialism in order to cope with the ever increasing demands upon their time.

Is there a season of hustle to get to the top, then a turn to essentialism to stay there without burning out? Or, can you practice essentialism from the beginning and attain a level of financial success much faster? I think people often realize that once they have more than enough money, money does not buy happiness. Once money is no longer a motivation they turn to essentialism to find happiness.

I don\’t know if that question was completely answered for me. I\’d be curious to hear more thoughts on this.

I would like to read or listen to this book again in about a year to see if it has had much effect on me and to re-evaluate where I am.