How to add encryption (https) to your JavaScript application

I hadn’t given too much thought to encrypting the traffic to my applications, until developing for 3rd party services like Facebook Messenger or using service workers require your server to use https.

For a full stack JavaScript application we need to setup encrypt on both the front-end and the back-end.

Front-End Encryption

I’m serving my files (fonts, HTML, JS) over Apache on Ubuntu 16.04 on DigitalOcean.

Today I setup encryption for chiangmaimovies.com I already had setup the Virtual Host for this domain. To add encryption I followed this guide to Secure Apache with Let’s Encrypt.

It was as simple as..

apt-get update

apt-get install python-letsencrypt-apache

letsencrypt --apache -d chiangmaimovies.com

I then answered a prompt on choosing to get all traffic redirected to https. And that’s it!

Server Side Encryption

I’m using Node.js as my backend server.

So first I needed to generate the security files for the server. This is done by typing

letsencrypt certonly --standalone -d golightlyplus.com -d www.golightlyplus.com

Then my Node.js code needed to be updated to include these files. Here is a stripped down version of my code…

And that’s it! You can view a sample response from my server response by going to https://golightlyplus.com:3003/maya-mall

 

Any thoughts or comments, please ask below. :)

How to reduce bank fees as a traveller

As a traveller, using banks can become a headache with all the fees they add to withdraw money from an overseas ATM or when buying things online in another country with our debit or credit cards. After being charged AU$30 for doing a cash withdrawal and buying something online, I started researching exactly how much I am being charged by banks. I am not affiliated with any financial institution or service. This is just an attempt to find a better solution to the incessant payments to banks.

 

Banks

Commonwealth bank (Australia)

3% to use your card to buy things overseas. E.g. Buying a $800 ticket online means I’ll pay Commonwealth $24 in addition to that ticket price.

AU$5 + 3% to withdraw cash from an ATM. So if I withdraw the equivalent of AU$300, I pay Commonwealth bank AU$14.

If I want to send money overseas, Commonwealth will charge me AU$22. This is actually completely misleading. See the reference to TransferWise below.

Kiwibank (New Zealand)

Drawing from an overseas ATM, Kiwibank charges a flat fee of NZ$6. If I buy something online, they will charge me 1.85% of the transaction amount. (Details here)

To receive an international transfer, Kiwibank charges NZ$12.

Lloyds Bank (UK)

When using an overseas ATM, Lloyds Bank charge 4.5% of the transaction amount. And to buy things online in a currency other than pounds, they will charge you 2.99%. (Details here)

 

Online Solutions

PayPal (Australia)

To send money to a friend or family costs 0.5% – 3.3%, depending on the country (ref)

When withdrawing money from your PayPal account to your bank account, PayPal also place a currency conversion fee. E.g. I want to withdraw US$500 to my Aus account that it is linked to. Today PayPal converts that to AU$688.26 The actual exchange rate now though “500 US Dollar equals 704.97 Australian Dollar”. So PayPal would make AU$16.71 for me converting to AU$ and withdrawing to my account.

TransferWise

So while banks say they charge you only say $20 to transfer an amount internationally, that’s not actually the truth at all. It turns out they seem to alter the exchange rate, so that what you get is not an accurate reflection of the actual exchange rate.

E.g. Let’s say I want to send AU$5000 to New Zealand. The exchange rate at this moment shows this to be the equivalent of NZ$5482.60. According to Commonwealth bank’s exchange rate, they are going to send NZ5227.50 to my New Zealand account. Which means they are actually keeping NZ$255.10 in addition to their $22 bank fee. So astronomically more. It rings of a scam actually.

TransferWise uses the real exchange rate, thus saving you potentially hundreds of dollars. Using the above example using TransferWise I receive NZ$5,438.92. Thus TransferWise’s fee in this case is NZ$43.68. Which is significantly less than the banks.

Their website: https://transferwise.com/

 

Personal Summary

It looks like when using a bank card overseas, using my Kiwibank card is going to save me money.

As a close second, it might save me money to transfer money to a friend via PayPal and get them to give me the cash.

And to send large amounts to different countries, TransferWise seems like a great option.

I had a chat with a guy who works in foreign exchange. The best solution is really to have someone else with the same 2 currencies you want to convert between, and do an exchange with them via local bank accounts.

Frontend Developer’s Support Group

I’m looking at starting a support group for frontend devs. You know who you are.. you live and breathe HTML5, CSS3 and JS.

A lot of us work on our own (I think) particularly if we’re freelancers.

There are already some great resources for tech support like stackoverflow.com But these can be a cold/impersonal even though they do serve their purpose for sure.

So I’m looking for a more generalised and personalised support group:

  • Where it feels safe to ask “stupid questions”. As we all know there are so many frontend technologies, and we all have varying levels of skills in each one. So part of the function of this group will be tech mentoring and supporting each other. Or even just knowing which resource to point someone to is helpful.
  • A group to share struggles and wins with.. like how to deal with a difficult boss or “hey, I just got a new contract!”
  • A group of people to just connect with during the day.. a virtual team.
  • A group to get feedback from for our current projects.
  • To make it more personal, I’m thinking of maybe a monthly catchup on Google Hangouts. And possible in-person meetups.
  • You can live anywhere in the world.
  • You speak English fluently.

This group will probably work best smallish.. less than 10.

Possibly using #slack to communicate generally on. But being a more tight-knit group, we’ll probably have each other’s Skype id’s and have some voice chats with each other over the week to bounce ideas around or get more 1-on-1 support.

I’m just looking for feedback at this stage and an expression of interest from anyone who loves frontend dev and wants more of a team feeling. Where we actually support each other. My other job is as a coach and counsellor, so I’ll bring that area of expertise to the group too.

It’ll be free to join. There’ll be some level of commitment to connecting so relationships are formed; I’m not interested in dropins.

So please comment below or email me direct from the contact form.

How to display a WordPress feed in an AngularJS app

I have a landing page where I wanted to show my latest articles from a WordPress blog I have.

It turns out it’s not that hard to do.

First I created a factory to get my WordPress feeds

Then use this factory from some controller

Then use this data in a view like this

And that’s it! Pretty simple :)

Working demo at the bottom of this page.

Use Autoprefixer to add vendor prefixes to your CSS

The latest CSS properties are getting implemented in browsers before they become standardised. Which is great for us developers in that we can start using the latest CSS3 features quicker than not. But to use these latest implementations, we need to add vendor prefixes to our CSS rules, specific to those browser vendors (e.g. for Chrome and Firefox).

For example, to make sure the animation property works across all browsers, we would need to write out something like…

h2 {
-webkit-animation: example 5s linear 2s infinite alternate;
        animation: example 5s linear 2s infinite alternate;
}

This can be tedious to work out which CSS properties need to be vendor prefixed, and then to actually duplicate each of those properties with a vendor prefix.

My first stab at solving this was to write my own Sass mixins that I could use to preprocess my CSS.

Then I discovered Bourbon which is a library of mixins that includes mixins to add vendor prefixes for specific CSS properties. I prefer to go with well maintained and well supported libraries than essentially re-writing that code, so I opted to use them.

And then I read Bourbon is deprecating their support in generating the vendor prefixes. And that’s when I discovered Autoprefixer.

Autoprefixer is a postprocessor.

For the above two previous methods (using Sass or Bourbon) we need to know which CSS properties need to have vendor prefixes added to them. In the case of Autoprefixer, all I now need to do now, is just write my CSS, then pipe that CSS through Autoprefixer using a build tool like Gulp. Autoprefixer will then automagically add the vendor prefixes onto the CSS properties that need them.

A snippet of one of my gulpfile.json files using autoprefixer looks like this

So much simpler! And we’re done.

My interview process with Toptal

Toptal connects top freelance developers with various companies.

So I was keen. More freelance work sounded good to me. The interview process was fairly intense.

Stage 1 involved chatting with some guy who asked relatively general questions. Pretty sure the main objective was to assess my English level.

Stage 2 was an automated online test on Codility. There were 3 questions. The first one was relatively straight forward, but the second one on negabinary stumped me. I went blank.. maybe due to the time pressure. I had 90mins to complete the test. Of course afterwards I worked out how to do it by implementing an AngularJS app that converted any decimal number to negabinary. You can see a working demo here. It’ll even display how the calculation was made. Source code on GitHub. Essentially implemented using an AngularJS filter.

 

The 3rd stage was to do live coding examples while being watched by another developer via Skype screenshare. Something about being watched unnerved me. I didn’t get through the first task which I had 20 mins to do. So my application was rejected. It was a fairly simple jQuery task on adding and removing elements. Again, I sat down and worked it out soon after my interviewer left. My final solution is on JSFiddle here.

Apparently I can re-apply in a month!

Hope that helps someone out there :)