Angular Conf Melbourne 2018: Conference Recap

It was early morning rush hour on Friday, June 22nd, and the Melbourne winter sun shone on my face. I was attending Angular Conf Australia, being held at South Wharf. Arriving with just enough time to spare, I looked around the conference venue and had a quick chat with some of the participants.

After a slight delay, the conference kicked-off with a quick thanks to sponsors and supporters. In this post I’m going to give you a rundown of what I saw next.

An Introduction to Angular Progressive Web Applications

A couple of weeks ago I attended Angular Conf Australia and did a full-day workshop on Progressive Web Applications. In this post I’ll talk about what I learned. In doing so, I’ll show the basic concepts of progressive web applications and service workers, and demonstrate how service workers work in a real application.

Implementing A/B Tests with Adobe Target & AngularJS Decorators

Web analytics tools are used to understand the behaviour of website visitors, and A/B testing is a technique that uses such tools to optimise a site. The tools facilitate this by giving you a means to measure and analyse site traffic and conversion.

Adobe Target is a real-time metrics-collection and reporting tool that is one of the most widely-used client-side analytics platforms available. In this blog, I’m going to talk about how to create an A/B test using Adobe Target and AngularJS, where the  ‘B’ version is swapped-in using Angular decorators.

Putting together the pieces: Server-side rendering with React Router v4 and Redux

Server-side rendering a React app is a miracle on-par with childbirth and modern air travel.

OK, that opening sentence was a little over-the-top. I apologise to birth mothers and those in the aviation industry.

Let me start again: server-side rendering a React app is…kind of cool.

That said, it can be a little tricky to get started, especially if you’re trying to do it with an existing app.

In this post I’ll explain one way you can implement server-side rendering (SSR) for an app that’s using  React Router v4 and Redux Thunks.

Along the way we’ll discuss the fundamental difference between JavaScript clients and servers, how it forces us to change the way we do routing, and the small “missing-link” that enables us to bridge React Router v4 with Redux thunks.

We’ll build up a simple example to demonstrate. I’m going to assume you’ve got some knowledge of:

  • React
  • Redux
  • React Router v4

However, you are not required to have knowledge of:

  • Childbirth
  • Aeronautics

Let’s do this.

Universal Links – A Few Things to be Prepared for

I recently had the opportunity to work for a client who wanted to develop what they termed “app indexing”. What they meant by this was that they wanted their users to be directed into a specific screen of their iPhone app when they tapped on a particular Google search result. Put differently, they wanted the user to feel as if Google had returned search results specifically for their iPhone app.

They also wanted to be able to send out links via email, SMS or other marketing channels. If the app was installed, opening such a link on their phone would result in the user being taken to the relevant points in the iPhone app. If the app wasn’t installed then they would just be taken to the mobile website.

The way this is achieved is through what Apple refer to as “Universal Links”. In this post I’m going to discuss how we implemented Universal Links at a client of ours, some of the obstacles we faced, and how we overcame those obstacles.

A post Google I/O 2017 conversation with Google Home

OK Google, generate a clickbait title for my Google I/O 2017 blog post

I’ve generated a title, Gareth. What would you like to add next?

OK Google, I’m a bit jet lagged – remind me what I saw at Google I/O 2017

I would love to help, Gareth, but I’m going to need a little more information. Would you like that information in chronological order, or grouped by topic?

Ampersandjs at the beach

Ampersand.js

Ampersand.js was created by the good people at &yet. It is based on Backbone.js, and refers to itself as a ‘non-frameworky framework’. In a world where Javascript frontend frameworks abound, it can be difficult to choose ‘the best’ one for your project. Most of the time you would go with that which was used before, which is the most popular, or which is most familiar. In 2015 I found myself in a position where a series of small, discrete, single-purpose, front-end ‘widgets’ were proposed. The small development team was able to choose what we wanted, and Ampersand.js was selected. In this post I’ll talk about why I like using it for our projects, and what I think makes a good framework in general.

It’s not you, it’s your form

5 tips on form design to improve your relationship with users

Filling in a form online is one of the most important points of interaction a user has with an organisation.

And we interact with them often. We fill in tax forms, grant applications, make online purchases or sign up to dating sites.

Forms can be the first step in a relationship with an organisation, or the final step in a journey to achieve a goal. For example get a grant, a drivers license or a partner in crime. Sometimes not filling them properly can carry unpleasant consequences like an interrogation by immigration officers at the airport, or your profile on OkCupid matching you with the wrong date.💔

“A form [ ] collects information from at least one party, and delivers it to at least one other party, so a product or service can be provided.”~Jessica Enders

The role of a UX designer is to help create easy, fast and productive form experiences. To entice users to fill in forms. As form design expert Jessica Enders states, designers should “create an optimal user experience, such that the needs of both the users and the owner of the form [organisation that owns the form] are met.”  

My Big Fat UX Wedding

Or how to keep Groomzilla away

As a UX designer with a background in Law and Visual Communication, I have been solving problems for a while. Yet, little could prepare me for solving a challenge of a different kind: my very own wedding.

Well, that is what I thought.

My partner is from South Africa. I am Spanish. We met in Dublin, then moved to Melbourne and eventually decided to get married in my hometown in the Canary Islands.

The ‘problemo’? Organise an enjoyable multicultural wedding 10,000km away, without breaking the bank or losing my cool.

Writing safer code with TypeScript strict null checks & type guards

In this article I will show you how to write safer TypeScript code by leveraging a feature called strictNullChecks. It’s quite easy to miss because it’s turned off by default, but can help a lot to produce more robust code. I’ll also briefly introduce another lesser-known feature of the language called type guards.

Some Java full-stack developers (like me) always wanted to have statically typed JavaScript. I remember when starting a new project with GWT and being quite amazed by the possibility of using Java on both sides.

Nowadays, many new languages are trying to be a replacement of JavaScript. TypeScript is one of them. I got my first experience with TypeScript when trying early betas of Angular 2. I quite liked a concept of adding static types to JavaScript. However, I also see developers trying to keep the freedom of JavaScript. Fortunately, TypeScript gives developers flexibility to decide what way they want to go and how they want to mix static vs dynamic types.

To experiment with these tradeoffs, I decided to use TypeScript for a new React/Redux project. The application is a web SPA which is the front end for a typical SAAS. Users can register/login, adding credit cards, managing api keys, see billing information, etc. All the examples in this article will be from that project and have React+Redux context.