
In this blog post, I am going to demonstrate how you can set up an [AWS Amplify app](https://docs.amplify.aws/) with a Route53-managed domain using Terraform.

To get started we will need to set up an AWS Amplify app using the [aws_amplify_app](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/amplify_app) Terraform module.

## Creating The Amplify App

```hcl
resource "aws_amplify_app" "my_amplify_app" {
	name = "My_Amplify_App"
	description = "App Description"
	repository = "<REPO_URL>"
	access_token = "<MyGithubAccessToken>"
}
```

**Let's break this down;**

1. We are creating an Amplify app called `My_Amplify_App`.
2. The app has a description of `App Description` which is useful when viewing the AWS Console.
3. We are providing the URL of the GitHub repository and an access token for our Github Account. Amplify requires access to our GitHub repository because AWS manages the build and deployment of our project.

## Amplify Branches

Next, we will need to create a branch for our Amplify app. This can be done using the [aws_amplify_branch](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/amplify_branch) Terraform module.

```hcl
resource "aws_amplify_branch" "my_master_branch" {
	app_id = aws_amplify_app.my_amplify_app.id
	branch_name = "master"
	stage = "PRODUCTION"
	enable_auto_build = true
	enable_pull_request_preview = true
}
```

**Let's break this down;**

1. Amplify branches require an app_id. We can get the app id of our Amplify app using the `aws_amplify_app.my_amplify_app.id` output.
2. We are setting the branch_name to `"master"`. This creates a master branch within Amplify which maps to the master branch in git.
3. Setting `stage` to `"PRODUCTION"` describes the current branch as our production stage.
4. `enable_auto_build` set to true means that anytime a commit is made to the git branch, a new deployment will be triggered.
5. `enable_pull_request_preview` set to true means that when a pull request is open against the branch, a preview deployment will be triggered.

## Domain Association

Finally, we want to associate our domain with our Amplify app using the [aws_amplify_domain_association](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/amplify_domain_association) Terraform module. This step requires verifying we own the domain name which we'll discuss a little further down.

```hcl
resource "aws_amplify_domain_association" "my_app_domain" {
	app_id = aws_amplify_app.my_amplify_app.id
	domain_name = "https://mintuz.com"
	wait_for_verification = false

	sub_domain {
		branch_name = aws_amplify_branch.my_master_branch.branch_name
		prefix = ""
	}
}
```

**Let's break this down;**

1. We are associating the domain "https://mintuz.com" with the master branch on Amplify.
2. `wait_for_verification` is set to `false` because in Terraform there is a circular dependency. The output from this module provides us with a `certificate_verification_dns_record` which we can use to set up the CNAME verification record but it only outputs once the module has completed.

## Configuring Route 53.

```hcl
resource "aws_route53_record" "design_record" {
  zone_id = aws_route53_zone.my_zone.zone_id
  name    = "https://mintuz.com"
  type    = "CNAME"
  ttl     = 300
  records = [aws_amplify_app.my_amplify_app.default_domain]
}
```

We are creating a Route 53 CNAME record using the [aws_route53_record](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/route53_record) Terraform module that points the domain "https://mintuz.com" to the default Amplify domain name.

Next, we will need to verify our ownership of the domain using the same [aws_route53_record](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/route53_record) Terraform module.

```hcl
resource "aws_route53_record" "design_cname_record" {
  zone_id = aws_route53_zone.my_zone.zone_id
  name    = split(" CNAME ", aws_amplify_domain_association.my_app_domain.certificate_verification_dns_record)[0]
  type    = "CNAME"
  ttl     = 300
  records = [split(" CNAME ", aws_amplify_domain_association.my_app_domain.certificate_verification_dns_record)[1]]
}
```

1. The `certificate_verification_dns_record` is a string with the format `record_name CNAME record_value` and is an output value from the [aws_amplify_domain_association](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/amplify_domain_association) Terraform module.
2. We can split the `certificate_verification_dns_record` and use its parts to form the name and value for the Route 53 record.

## Third Party Domain Provider.

If you are using a third-party domain provider, you can copy the output from `certificate_verification_dns_record` and manually add a CNAME record. `certificate_verification_dns_record` is a string in the format `<record_name> CNAME <record_value>`.

You will also need a CNAME with the record name set to your domain name and the record value set to your Amplify default domain.


How you can set up an AWS Amplify app with a Route53-managed domain using Terraform.

Configuring AWS Amplify with Terraform


WWDC22 brings a lot of welcome improvements to SwiftUI and in this blog post I will talk about improvements to the Navigation API. Starting with SwiftUI 4, the [NavigationView](https://developer.apple.com/documentation/swiftui/navigationview) has been deprecated across the following Platforms:

- iOS
- iPadOS
- MacOS
- Mac Catalyst
- tvOS
- watchOS

Instead, SwiftUI 4 provides a couple of different views depending on your use case.

- [NavigationStack](https://developer.apple.com/documentation/swiftui/navigationstack)
- [NavigationSplitView](https://developer.apple.com/documentation/swiftui/navigationsplitview)

### NavigationStack

> A view that displays a root view and enables you to present additional views over the root view.

This view has been designed to be a direct replacement for the NavigationView and by default can be used in the same way just by replacing `NavigationView` with `NavigationStack`.

```swift
struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink {
                Text("MyCustomView")
            } label: {
                Text("Navigation Item 1")
            }
            .navigationTitle("Navigation Title")
        }
    }
}
```

`NavigationStack` provides us with alternative ways to manage the navigation within our apps allowing us to deep-link and programmatically update our navigation stacks.

```swift
struct ContentView: View {
    var todos: [Todo] = [
        Todo(id: UUID(), name: "Watch WWDC22 Videos"),
        Todo(id: UUID(), name: "Write WWDC22 Articles")
    ]
    var body: some View {
        NavigationStack {
            List(todos) { todo in
                NavigationLink(todo.name, value: todo)
            }
            .navigationDestination(for: Todo.self) { todo in
                Text("\(todo.name)")
                    .navigationTitle(todo.name)
            }
        }
    }
}
```

The `NavigationLink` now has a new initialiser that binds a `value` to a `NavigationLink`. SwiftUI 4 also provides a `navigationDestination` view modifier that allows us to provide a detail view for the bound value. This decouples the navigation destination from the navigation link.

If you have done any web development you will know every web page is based on a route. With iOS 16, Apple has created a similar model providing us the ablity to progmatically set the route path.

To enable this route based functionality, You can call the `NavigationStack` initialiser with a binding to an array (stack) of values.

By altering the array, the navigation will update automatically.

```swift
struct ContentView: View {
    var todos: [Todo] = [
        Todo(id: UUID(), name: "Watch WWDC Videos"),
        Todo(id: UUID(), name: "Write WWDC Articles")
    ]

    @State var currentPath: [Todo] = []

    var body: some View {
        NavigationStack(path: $currentPath) {
            List {
                ForEach(todos) { todo in
                    NavigationLink(todo.name, value: todo)
                }
            }
            .navigationTitle("Todolist")
            .navigationDestination(for: Todo.self) { todo in
                Text("\(todo.name)")
                    .navigationTitle(todo.name)
            }
        }
        .onOpenURL {
            currentPath.append(
                contentsOf: [
                    Todo(id: UUID(), name: "Deeplink Parent Video"),
                    Todo(id: UUID(), name: "Deeplink Child View")
                ]
            )
        }
    }
}
```

### NavigationSplitView

> A view that presents views in two or three columns, where selections in leading columns control presentations in subsequent columns.

What is great with the `NavigationSplitView` is on smaller screen sizes, it will behave exactly like the `NavigationStack` which is useful when targetting multiple platforms like iOS and iPadOS.

```swift
struct ContentView: View {
    var rooms: [String] = ["Living Room", "Kitchen", "Dining Room", "Bedroom"]
    @State private var room: String?

    var body: some View {
        NavigationSplitView {
            List(rooms, id: \.self, selection: $room) { room in
                Text(room)
            }
        } detail: {
            Text(room ?? "Please Select A Room")
        }
    }
}
```

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


WWDC22 brings a lot of welcome improvements to SwiftUI and in this blog post I will talk about improvements to the Navigation API.

SwiftUI 4 New Navigation API


Hello, I am a developer on the Editor Team at Moonpig and we are currently working on replacing our 7 year old editor tool. If you aren't familiar with what we do at Moonpig, we provide customers the ability to purchase and personalise cards or gifts for loved ones. The editor tool is part of the core user journey with most customers at some point visiting the editor to personalise a gift or card.

The new editor will be based on new technology, have better performance and meet accessibility standards, something that has caused difficulty for some of our customers in the past. We want Moonpig to be inclusive so that anyone can create and send cards and gifts to their loved ones.

We have been re-platforming for the last year at Moonpig and my team is responsible for re-platforming the editor tool. We decided we would rebuild the editor rather than port the current editor to the new platform. It is part of the core user journey and is currently one of our biggest drop-off points for customers. With the original editor, 20% of customers dropped off or did not proceed to purchase.

Over time it has become more difficult to iterate with requirements outgrowing the original architecture and with the original team gone. At Moonpig we now use React exclusively on the web but the original editor was built using Angular 1, a technology most developers have long forgotten or moved away from.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

The original editor also made use of `<canvas>`. Canvas is an HTML element that can be used to draw graphics via JavaScript and the output is a Raster image. We know from the current editor that Canvas can be quite challenging in some circumstances such as calculating line breaks and isn't accessible because the browser cannot interact with the elements within the canvas element.

It is also not suitable for printing which means we have one rendering engine for the website and one rendering engine for printing which can lead to differences between preview on the web and the physical product printed.

### Choosing SVG

Our new editor makes use of SVG and this comes with several advantages over Canvas. In this blog post, I want to talk about one of those advantages which is accessibility.

The editor surface renders as one SVG, we do this because it allows us to manipulate the viewBox for navigation, swipe gestures and zooming in on individual elements within a card.

SVGs are typically treated as images in which alt text is used to describe the image, this means individual elements within the SVG are not accessible by default.

We have to take additional steps within the SVG to describe the content of the SVG to the browser. We can do this because SVGs are written using XML-based markup similar to how HTML is written. This means the browser can access those elements via the DOM to provide keyboard and screen reader navigation.

![Editor Surface](/editor_surface.png)

Typically on webpages you create headings to provide structure so content is easily digestible. We wanted to do something similar within the editor where each page of the product has its own heading. The heading for each page describes what page you are on and how many elements exist within that page. Without headings, screen-readers would see a list of editable elements but not have the context to inform the user what page those elements belong to.

![Inside Right Page](/inside_right_page.png)

One feature of SVG we leverage is the ability to embed HTML content so that we can enable headings for each page. SVGs provide an element called `<foreignObject>` that allows us to embed HTML content directly within the SVG. We use this element to render an offscreen `<h2>` tag providing screen readers hints to describe what page is currently being edited. The headings also describe how many elements exist within that page.

Originally we made use of aria-labels for each page region but we decided on the `<foreignObject>` approach because when a user decides to change the page within the navigation toolbar, we update the `document.activeElement` to the page `<h2>` element so that they can jump straight to the page they want to edit.

```html
<foreignObject>
  <span>
    <h2 tabindex="-1" aria-hidden="false">
      Inside Bottom. 3 editable elements on this page.
    </h2>
  </span>
</foreignObject>
```

### Editing Text Elements

One feature we are particularly proud of, is the idea that a user should see a visual representation of the product when they are entering text or updating the styles of a text field. This is useful for users who may have a cognitive disability where memory function is affected. It means a user can remember what a card looks like without having to change the page and lose focus of the current undergoing task.

We require parts of the SVG to be focusable so that the user can interact with the product they are editing. This is usually possible within a standard HTML document by using `<button>` elements. Unfortunately, SVGs do not support `<button>` elements but they can use `<a>` elements within the body of the SVG. We use `<a>` for all of our interactive elements and apply an `aria-role=button` to signal to the browser that these elements are in fact buttons and not external links.

We made text editing possible by using foreignObject and inserting a `<div>` as a child with the contentEditable attribute applied to that element. We chose this approach because it gives us more control over styling than a normal `<input>` field.

The styling options make use of a library called [**@reach/tabs**](https://reach.tech/tabs/)**.** This library handles keyboard and screen reader navigation for tab-based user interfaces. We decided on using a tab ui pattern because we didn't want to overwhelm the user with too many options in one view.

![Tab styling options](/tab_styling_options.png)

When developing the text styling options, we wanted to provide keyboard navigation that would not hinder the navigation between different text elements. A text element may have multiple style options and it would require too much effort for a user to navigate through all the available options.

To get around this problem we render the style options elsewhere within the DOM and place a `<button>` between each text field that is only visible when the button has focus. This allows a user to move their focus to the style options or skip over the style button to the next text field.

![Text element skip link](/text_element_skip_link.png)

Some text elements also have a maximum character limit and we display how many characters are left.

![Visual indicator, number of characters left](/visual_indicator.gif)

For screenreader users we wanted to alert a user once they've reached the maximum character limit, we do this by making use of aria-live set to assertive and update the messaging once the limit has been reached.

```html
<div aria-live="assertive">Maximum character limit of 10 reached</div>
```

### Summary

SVGs are very powerful and can be used for more than just static images. They provide helpful APIs and elements to make content interactive and accessible within the browser.

We have only just begun this journey of rebuilding the editor and whilst we have made good progress on accessibility, it is an on-going effort and we will always strive to do what's best for our customers.

You can find out more about how we automate accessibility testing [here](https://medium.com/moonpigtech/how-we-automate-accessibility-testing-at-moonpig-89a0ae0db0f5).

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


I talk about SVG accessibility on the Editor Team at Moonpig

Building an accessible editor at Moonpig


Disclaimer, I am not a medical professional, physiotherapist or fitness guru. If you have issues, please see a doctor or physiotherapist. This blog post is based purely on my experience with health and fitness over the last 3 years and should not be taken as a medical advice.

Over the last 3 years I have suffered from neck, shoulder and upper back problems. I went to sleep one day in 2016 and woke up the following day with persistent pain in my upper body.

Before talking about what I'm doing to solve my pain problems, it's probably worth talking about how I got here, in the first place.

For most of my teenage years I was either at school sat down in a class room or sat in front of a computer either playing video games or learning to code. As a child I was not fully aware of what my body was telling me and ignoring the signs for 18 years led to where I am today.

Everyone is aware of what technical debt is but this is a type of debt I have incurred over the last 18 years, I ignored my body and now I am paying the price physically.

Take a moment and think about how you are sat right now or stood if you are commuting. Are you slouching? Are you leaning on one side? Is your head pushed forward? Are your legs crossed? All these things are bad for your body and over time they could lead to long term health issues.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

## Steps you can take to pay off the physical debt.

It's not all bad news though, it is possible to pay off this physical debt as I have been for the last 3 years, I'm not there yet but certain lifestyle changes can drastically improve your health.

This is a common suggestion but I think it's worth mentioning. Move at work, if you're sat down for 8 hours at a time, your body is going to get stiff, your muscles are going to tighten and as a result your range of motion is going to decrease. Every hour walk around the office for 5 minutes and do some light stretches.

At lunch, rather than sit in front of a computer reading Reddit or Dev.to, get out of the office and go for a walk, Not only are you moving for physical health but it may actually aid in mental health as well. It's also a good time to socialise with your colleagues and get to know them on a personal level.

Buy a foam roller, they are cheap and the idea is tight muscles and knots can be released by using a foam roller.

This one may not be possible for you but it is the one I've had most success with, join a gym. By sitting down all day, you'll have some muscles that are over developed and overly active and some muscles that are weak and under active. This causes your posture to change over time and as a result, the correct posture may be more effort to hold for a long period of time.

I have a personal trainer and he explained the body is like a chain, you may have shoulder and neck problems but the root cause may actually be your legs. Take a look at Anterior Pelvic Tilt, this may be causing you problems in your back but it starts in your legs.

import { SideProject } from "../components/SideProject";

<SideProject
  theme="workoutplan"
  title="Workout Plan Bot"
  projectUrl="https://workoutplan.app"
>
  <p>
    If you want to start exercising I have built a free workout app called{" "}
    <a href="https://workoutplan.app">Workout Plan Bot</a> built natively using
    Swift & SwiftUI and was later enhanced to include SharePlay support.
  </p>
</SideProject>

## Conclusion

Thanks for reading, I hope you've found it insightful and can start applying this to your lifestyle, honestly I wish I listened to my parents when I was younger but I guess that's the price you pay for not looking after your body.

### Some exercise suggestions

Some exercises that I do at the gym;

- Pull Ups
- Face Pulls
- Lat Pull Downs
- Rear delt flies
- Bench Rows
- Deadlifts

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Physical Debt


Hello in this blog post I want to talk about a problem I have recently had within the BBC Live team and how we solved it. To begin with I should probably give you a little bit of context to the problem.

I joined the BBC Homepage team at the end of 2014, at the same time ReactJS was really gaining traction within the web development community and people were releasing reusable components through npm. Awesome I thought... All these free components to use for my own use, I wonder if I could do something similar within the BBC because we have a [Promo](http://www.bbc.co.uk/gel/guidelines/promos) design pattern which is used all over the BBC implemented by different teams in different languages.

![promo](/promo.png)

This obviously leads to loads of code duplication and the same bugs/challenges will occur.

## Old Approach

The first iteration of the promo component I worked on was tightly coupled to the homepage codebase. The homepage codebase is comprised of several different modules, for example we have a top stories module and a tv radio module. Both modules make use of the promo design pattern. However the data for each module is passed down and it's the modules responsibility to build the DOM for the Promo.

https://gist.github.com/mintuz/5f756c3e63767a5d8ab69ee36ec6ef63#file-top-down-approach-jsx The problem with this approach is that it's not very configurable and if the UX guys fancy changing the visual look of one of the promos, maybe for an important event or if it's a breaking news item then it means passing more data into the module and having a bunch of conditionals to add custom CSS classes and we might need to change the markup slightly as well.

This approach works well for the homepage because it's not got many promo variants so it doesn't need granular control over a promos DOM structure and CSS classes. This isn't to say the homepage isn't complicated but there wasn't a need to over engineer a solution that would work for multiple use cases.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

## Problem

So fast forward to 2016 and I am now apart of the BBC Live team which is responsible for Live Pages, Live Guide and Live Promo products. Each product makes use of the promo design pattern but the use cases are slightly different. The Live Page is mainly concerned with the 4th promo variant in the mock up above and the Live Promo uses the same variant but at smaller screen sizes, the content overlays the image and gains a transparent gradient. There are loads of similarities between both promo styles so we needed a way to share code so we didn't end up duplicating code.

## Solution - How to make composable React components

By the time we reached this problem, I had been playing around with React Native and had gotten used to the idea of using [this.props.children](https://facebook.github.io/react/tips/children-props-type.html) to make components composable. It allows you to nest components as you would with DOM elements and allows each component to handle it's own use cases, preventing one component doing everything.

Another benefit of building components like this is that we can make each element within the promo a separate npm package making it reusable and useful by itself. If we use the this.props.children property correctly it also allows us to cut down on our dependency tree bringing in all our dependencies at the same point and not having components requiring components.

Variant 4 may look a little something like this in the code using this approach.

https://gist.github.com/mintuz/5f756c3e63767a5d8ab69ee36ec6ef63#file-composable-approach-1-jsx The same promo may look a little something like this if we want the content to overlay the image at a certain breakpoint. The great thing about this.props.children is it allows us to nest DOM elements and custom components, so you can add bits of code which are specific to your use case.

https://gist.github.com/mintuz/5f756c3e63767a5d8ab69ee36ec6ef63#file-composable-approach-2-jsx So these two examples use a lot of the promo elements available to us but what about when we have no image or we don't care about tags. Suddenly we've created variant 1 (No image)

https://gist.github.com/mintuz/5f756c3e63767a5d8ab69ee36ec6ef63#file-composable-approach-basic-jsx I hope this has demonstrated how powerful this.props.children can be and how it can help you build UI elements that are reusable and flexible enough to allow you to compose components and different variants of a component.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Composable React Components


I had a great time at React Europe Conf 2016 and thought I would share some of my opinions and things that stood out from the conference.

## GraphQL <del>vs</del> and Falcor

I've heard of both these frameworks for retrieving data from the server but I've never really understood the benefits by just viewing the documentation. After seeing both these frameworks I can honestly see the advantages of using both. Having the ability to retrieve data from the server without specifying a REST endpoint is amazing, it allows you to scale your data model easily.

The talk by Jafar Husain "Falcor: One Model Everywhere" demonstrated the way Falcor does it really well. He also gives credit to GraphQL saying both frameworks have a place in the ecosystem and picking the best one is subjective to your requirements. My take from his talk is that Falcor is better for smaller applications where the data model is known and that you should use GraphQL where the model may change and need to scale.

Falcor is less prescriptive, has fewer concepts and a smaller file size < 50%. It takes a segment of the model you defined and returns it from the data source. I have a few questions around how this works with a real database because the demo was using a JSON file but it's something I am going to investigate, now I've seen it in action.

![CkBxU1nVEAAP8Ld](/CkBxU1nVEAAP8Ld.jpeg)

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

The talk by Laney Kuenzel and Lee Byron named "GraphQL Future" was a nice insight into the ways Facebook use GraphQL and what they have planned for it in the future. They talk a little bit about the different experiments they are running with GraphQL and working on the BBC LIVE product I can really see how the directive @live in GraphQL will change the future of real time updates in applications. For their demo's they also used [graphiql](https://github.com/graphql/graphiql) which looks really cool for testing out your graphQL queries.

Both talks were really well executed and two of the best talks at React Europe Conf 2016.

## Carte Blanche

The Evolution of React UI Development by Max Stoiber and Nik Graf stole the show for me. With the announcement of [carte-blanche](https://github.com/carteb/carte-blanche) , a tool to help you see components individually, explore them in different states, and quickly develop them confidently will really change my development workflow. Honestly check this out, having a dependency tree with loads of components is a pain when you want to quickly develop, it may mean you have to npm link your dependency tree but with carte-blanche that's no longer necessary.

## A Deep dive into things...

Oh my god, these talks! The subjects were around the inner workings of React Native and Flow and how they've been optimised. Most developers probably don't care about this and to be honest shouldn't care. It may have been just me but this much information at a conference can be overwhelming. I think the picture below demonstrates how intense it got. Talks should be composed of quick and snappy bit's of information which can easily be digested. Then again I may be just stupid because people on Twitter seemed to have enjoy the talks.

I am however going to re-watch these talks to make sure it wasn't just the long day that caused me to feel overwhelmed. I'm sure there's some value in these talks I just couldn't see it on the day.

![CkAejpiUYAEvOOg](/CkAejpiUYAEvOOg.jpeg)

## Redux Analytics

Before this talk I didn't really think about how much of a pain it is to set up analytics in an application but my general approach was to hook into some sort of event such as a click event and then send some data from the client to the server. Bertrand Karerangabo and Evan Schultz demonstrated a neat way of using redux middleware to track analytics without much configuration. Because Redux uses a single store and provides a single location for state changes, their middleware hooks into the redux event loop and its from there we can learn a lot about a user and what current state the application is in. So simple but so powerful that until this point I had overlooked the possibilities of using Redux for analytics.

## Lightning Talks

Phil Holden, you were a beast. demonstrating [redux-swarmlog](https://github.com/philholden/redux-swarmlog). A super simple way of writing distributed Redux applications. The [Redux](https://github.com/reactjs/redux) action log is persisted in an IndexDB and synced with other peers via a [WebRTC Swarm](https://github.com/mafintosh/webrtc-swarm) using [Swarmlog](https://github.com/substack/swarmlog). (honestly didn't just copy and paste that from the README file :P)

Ken Wheeler demonstrated [Victory](https://github.com/FormidableLabs/victory), a cross platform charting library. I've been looking for a charting library for a while and this will definitely be used in my new application I am writing in React Native.

## Conclusion

I had an amazing time at React Europe 2016 and certainly recommend going next year if you can. Lots of insight, Lots of swag and great atmosphere. Now it's time to play with all these new toys. I'm looking at you [carte-blanche](https://github.com/carteb/carte-blanche)

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


React Europe Conf 2016


For the last year I have been doing 5 hours worth of commuting 5 days a week since changing my job and I'm finally at the point where I can finally cut down my journey to a more sane 40 minutes.

Some days have been a struggle, some days have been pleasant, here are some things you can do to make your commute more pleasant.

## Don't rely on the transport service.

Transport systems will simply fuck up. If you follow me on Twitter or know me in real life you'll know this is my biggest complaint. A certain northern rail company in the UK constantly failed to meet my needs and I had to find alternative routes home.

What I'm trying to say is, always have a back up plan. Quite often my main route to and from work had delays so I had to have alternative routes home. These routes aren't always advertised on websites / apps so a little bit of research will be required on your part.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

## Tell everyone

Tell your co-workers, friends and family that you are doing a long commute every day. They'll be more understanding if you are late or grumpy. Too many things can happen on your commute and things are bound to piss you off or go wrong.

## Prepare for weather

Weather is so unpredictable in the UK and because of the amount of distance between my home and work location, the weather can be completely different.

I personally don't like hoods so I also rock an umbrella for those rainy days. I also Pack a spare set of clothes in my bag, an extra pair of socks is always a good idea. Wearing damp clothes all day isn't fun for you or others (imagine a wet dog smell in the office).

For those hot days I would also recommend travel clothes and work clothes so you don't have smelly clothes by the time you get to your destination. Also a water bottle is an essential.

## Timebox your commute.

I can't stress this point enough! If you imagine one massive commute, it's going to feel like it's taking forever. Cut it down into sections and for each section do something different. Which brings me onto my next point.

## Do something

Don't waste the time. If you go to sleep or simply listen to music, you are wasting a large chunk of the day which could be productive. Read blog posts, plan your day or develop. Whatever you do, make sure its productive.

## Conclusion

If you can avoid a long commute, avoid it. I think one of the things that made it easier for me is I always knew it was short term. If its long term, I salute you because it will be a strain mentally and physically.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Dealing with a long commute


So I've been wearing my new Apple Watch 42mm stainless steel edition with a classic leather buckle for the last week and so far I am loving it from a users perspective. From a developers point of view some improvements are needed but because it's early days I have high hopes. Let's begin.

![Apple Watch in case](/2015-06-08-18.54.24.jpg)

## Looks

I love it, as with most apple devices designed by Jony Ive, he's outdone himself and with support from Marc Newson, this watch feels and looks amazing. I'm not a fan of bulky watches or metal straps so I went for 42mm stainless steel classic leather buckle. The 38mm looked too small and I imagine it would be difficult to use, the 42mm even if it is slightly bigger isn't too bulky for me and I recommend trying both on, before you buy one as I was set on getting the 38mm before trying the 42mm on.

![2015-06-08 19.05.14](/2015-06-08-19.05.14.jpg)

As for the screen, the glare from the sun can be an issue whilst wearing sun glasses. I've also read somewhere that the issue is less with the sport edition but I can't comment on that myself.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

## Security

A nice security feature on the Apple Watch is that if you take the watch off and you have the passcode enabled it will automatically lock. A subtle but useful feature.

However security stops there. If you take the Apple Watch off and it gets stolen or someone manages to take your watch off without you realising, consider it lost. There is no way of tracking it as it is dependent on the phone. I guess Apple made this decision because putting WiFi/GPS directly onto the watch would drain the battery considerably.

Also maybe not security related but you can also ping your iPhone directly from your phone. I've already used this feature twice since misplacing my phone.

## Battery

Which brings me onto the battery life which is better than expected. With 18 hours expected battery life I wasn't having high hopes but it turns out my Apple Watch battery lasts 1.5 days and that's with moderate use. I know some people will still snigger at this, claiming traditional watches last years but lets be honest, its not a smart watch is it?

My iPhone 6 battery life is however taking a bruising. Before I had my apple watch I was having problems with my battery. I use it a lot because of my daily commuting taking up 5 hours of my life so my battery used to die at 6pm. With the apple watch it's dying around 3pm whilst I'm still working and just before I set off. Luckily I work around several mobile devices and people with cables so I can give it a boost but this is a killer at the moment. I presume this is because the Apple Watch is constantly sending data back to the iPhone and requesting data directly from the phone.

## Third party apps

Other reviews of the Apple Watch tend to be very negative and I think it's partly due to them focusing on third party apps. Third party apps don't feel polished and because they are essentially beemed up to the Apple Watch, their can be lag whilst opening the app. I think this will get addressed in a later Watch OS revision and with native apps coming, the experience is only going to get better.

I also think it's going to solve issues with the dependency on the iPhone. Personally this isn't an issue for me because I always have my phone but I understand the need for some users wanting to be detached from their iPhone. As for third party apps themselves, I'm using; Gero, trainline, Seven, Nike+, BBC News, Slack and Instagram. All of which I use daily and enjoy.

I think it's also worth noting that the built-in Message app is brilliant. Siri is amazing and I see myself interacting with Siri more often for sending texts. The voice detection is far superior on the Watch than the phone.

## Taptic Engine

This is one of the best features of the Apple Watch. I love getting taptic feedback when I have a notification or when something needs my attention. Apple have been very clever and each type of action has a different taptic feedback. For example a notification has a different feedback to an alarm going off. I believe their are 8 different types of feedback and after a while the user is going to know the remember each one.

I look forward to getting access to the taptic engine as a developer in WatchOS 2.0. Which brings me onto my next point…

## WatchOS Development API

**For non-developer users you can skip this section.** This is a major disappointment for me, the API simply sucks. It is essentially an extension of the extension API. It's very limiting and it's for this reason, some of the third party apps are lacking and not feeling polished. Also from a development point of view the simulator kept crashing, meaning I was having to upload the app to my iPhone each time. This became very time consuming and frustrating.

## Conclusion

I am enjoying my Apple Watch and yes native apps are needed (but coming) to resolve some of the sluggish UI. The battery life is better than expected and security needs improving. Built-in apps are brilliant and I believe third party apps will get better as Apple become more open about developing on the Apple Watch. I look forward to future iterations of the OS and hope Apple don't go down the route of crippling devices every few years with later iterations of the OS like they have done with previous generations of iPhones and iPads.

I recommend buying an Apple Watch if you want a nice looking watch with more than just `telling the time functionality`.  The Apple Watch is not a replacement for your iPhone, its an enhancement to being constantly connected. If you are looking for a replacement device to your iPhone, don't buy one. They both compliment each other.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


A developers view on the Apple Watch


To give you a bit of background, I have been working on an iOS application for a while now and I've got the majority of it written using Node.js for the backend and Swift for the actual app.

Now onto the problem that I encountered, originally I was going to create the UI using the native API but if you have done any iOS development you will know how much of a pain this can be, and how much it can slow you down. So I looked for alternatives.

I know Cordova exists but I didn't want to cut out the ability to write native code and the plugin system used in Cordova just wasn't up to scratch. It can also suffer from performance issues which I will discuss below.

I then watched the conference Facebook hosted about [React Native](https://code.facebook.com/videos/786462671439502/react-js-conf-2015-keynote-introducing-react-native-/) and I was/still am excited for this to be released but after a month of waiting I couldn't wait any longer. I will probably port over to using React Native once it is released, being a massive JavaScript developer and a fan of React.JS, the ability to render native UI components seems to good of an opportunity to miss.

So I looked to create my own Hybrid iOS application using swift for the bulk of my application and render any views with a cheeky UIWebView and pass data through. The problem with this is, a UIWebView has performance limitations because it does not have access to the Nitro JIT JavaScript engine present in the stock Safari app. Not having access to certain features meant my app would not feel like a native application and that just wasn't acceptable. I wanted to provide a high quality app to all my users.

I then remembered the WWDC2014 talk that introduced the WKWebView component. This little gem changes everything about how we should build hybrid applications. It has performance equivalent to Safari and hybrid apps will receive a notable performance increase just by switching to the new API.

WKWebView has a refined API making it easier to bridge data between native code and JavaScript. Their are a few bugs worth noting though. First of all, you have to programmatically implement it, It is not supported using the StoryBoard. Secondly it cannot load a HTML file using .**loadRequest(url) **you have to load a HTML String, these issues have both been raised with Apple and hopefully they will get fixed in a later release.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Hybrid iOS development isn't over yet


I'm writing this post to remind me in the future how awesome my 2014 was and for a kick in the bum to make my 2015 as equally awesome.

## Career

Probably the most obvious achievements can be noticed within my career. Not only did I help deliver several new websites at Forepoint for some high profile clients, I also landed myself a job at the BBC working within the content discovery department as a web developer.

I am loving every second of it (apart from the 2.5hr journey each way until I relocate).

Each day something new is learnt which I felt at the beginning of the year I was not doing and was becoming a bit stale.

I also got some time in the summer to rewrite my personal website which showcases some previous projects I've worked on and allows me to effectively post blogs. I guess I see this as an achievement because your own website tends to get overlooked whilst you are busy working on other projects.

## Development

Becoming a better developer is always one of my top priorities and 2014 was a good year to let me expand my knowledge.

I started developing iOS apps with Swift, the new language from Apple whilst still using Objective-C for some of my legacy projects. I currently have a few apps in development using Swift and I am hoping towards the middle of 2015 to launch these apps.

I rebuilt my digital ocean server using Ansible after researching Chef and Puppet. Ansible just makes life easier and with Vagrant allows my development environment and my production environment to be exactly the same. I know you can do this with chef and puppet but ansible just worked without any agents and no fuss.

2014 was also the year I stopped relying on jQuery for frontend JavaScript development and started to use React. Its still early days but loving it at the moment.

Since starting at the BBC, I have been learning TDD and BDD. Whilst I still have a long way to go I believe I am making good progress learning the testing frameworks and what to test and why to test certain things.

I also started developing Flexdd, a modular frontend framework giving you sensible defaults and allowing you to easily configure it to your liking. It also includes javascript goodies like sliders and faders. I aim for version 1.0 of Flexdd to be released sometime in 2015 probably towards the middle.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

## Personal life

2014 marked the year that myself and Chloe had been together a year and was the first time we had a holiday together. It may be a small thing and it may not even matter that we went on holiday together but it proved to me that I love her :)

Since leaving university I've let my organisational skills slip and 2014 was the year I finally got my act together again. I am officially a list man now, I've got a list for everything and Chloe doesn't realise it, but I've got her using a Kanban board ^\_\_^ so I guess that's an achievement.

If you are reading this and you know me personally, you'll know I'm not overly confident and hate speaking out or doing presentations, well 2014 was the year where I gained some confidence and did a presentation. I'll be putting myself into more uncomfortable situations in 2015.

Being a developer means sitting down for 7+ hours a day looking at a screen and whilst at the moment it might not be causing me problems I thought it would be a good idea to start looking after myself more. In the summer I managed to run 7 miles a day and recently started going to the gym. I plan to carry this on in 2015 and beyond.

## Conclusion

My 2014 was amazing and I'm hoping my 2015 will be as good with exciting new challenges like moving to manchester with Chloe, releasing a couple of apps and continuing to hit my personal goals.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


My 2014


Let me start by saying not every codebase I have worked on have had the issues I'm about to talk about and some projects were executed extremely well. This blog post is more of a general rant to the web community as a whole.

Why is it that CSS is not treated as a first class citizen in projects? We spend hours optimising backend code and javascript frontend code but CSS is put to the side if it works and left for the next developer to pick up and fight with.

CSS should be planned from the very start of development, from architecture planning to the naming of classes. However this is not the case and is left until the end, with no thought of the implications when doing X. I've seen comments like "if it works why does it matter" and "it's just CSS" and "ugh CSS is hard".

Hopefully I am going to give a counter argument for each one of those points and actually change peoples attitudes towards CSS.

## if it works why does it matter

I have worked on a project in the past that “just worked” but a major bit of development needed to happen which meant some of the CSS needed refactoring. It had a bunch of hacks in it that worked fine for that specific scenario but as soon as we started altering properties, the code fell on its arse. It probably wasn't the developers fault these hacks were put in place. He or she had a deadline to meet and I am assuming these hacks were for a quick fix.

The problem however is that they did not think about the implications for future developers, our deadline was met but we had to cut out certain features because we spent a lot of the time fixing code that was previously written. If time was spent planning the CSS those hacks probably wouldn't have existed, their code would have been cleaner and our time wouldn't have been wasted refactoring the code. So if the code isn't as great as it could be but works, it matters because it saves the next developer losing their hair over a crappy hack.

## CSS is hard

Now onto the other point that “CSS is hard”. CSS isn't hard at all, we as developers make it harder by over complicating things and introducing things which at first seem like a good idea but actually turn out to be a massive pain to fix. If you find it hard, thats fine ask for help but don't make it harder for yourself by over complicating it. keep things simple.

## It's just CSS

The last issue i'd like to raise is the “It's just CSS”, this to me is screaming you are a arrogant b\*\*\*ard and you don't think its important. Yea great your backend code wizardry can process an excel spreadsheet in a millisecond and cook me a pop tart but if the browser is dancing round drunkenly trying to render the page you decided to hack together then your hard work is gone to waste right? If you don't like CSS because “Its just CSS” then don't do it, let someone else do it because they will do a better job of it than you. There are things I don't like about development and I try to avoid those tasks, not because I can't do it but because I don't like doing them so I feel as if my effort would not be as high causing my quality of work to decrease.

Hopefully I've not pissed anyone of with this rant but I thought this needed to be said. CSS is a first class citizen so start treating it like one.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


CSS First


I decided to alter my web server setup after realising a standard Apache 2 install comes with too much overhead whilst serving out static content. At the same time I thought it would be a good opportunity to look into different methods of serving web applications written in ruby, primarily Rails and Sinatra. Originally my web server was running Apache2 with libapache2-mod-php5 and mysql. Nothing special about it, infact it was pretty basic. For serving out ruby applications I used [mod_passenger](https://www.phusionpassenger.com/) developed by Phusion.

## **Benchmark**

using Apache benchmark for 5 seconds and sending 100 requests my old setup had a mean average of 0.40 requests per second across 10 tests. After altering my setup to what will be discussed further on in this blog post, the mean average requests per second were increased to 8.97. That is a drastic increase and you can really tell the difference especially with loading large images.

## **The New Setup**

I have setup my web server to use Apache 2 and Puma with Nginx as a reverse proxy listening on port 80. This allows you to serve out ruby based applications and PHP based websites driven by content management systems such as Wordpress.

### Setting up Nginx with Apache 2

Lets get started, First we will setup Nginx to be the Reverse Proxy in front of Apache 2, I am using Ubuntu 12.04 so I use aptitude as my package manager.

```bash
$ sudo apt-get install nginx
```

The first thing to do is alter your default site configuration located in** /etc/nginx/sites-availble/** to look like the configuration below. This is used to serve out PHP based websites mainly running Wordpress. Thanks to [@iceicetimmy](http://www.applicious.co/2013/06/upgraded-to-nginx/) for providing the basis of this config. [work] I have made a few alterations for my scenario such as adding default to the listen directive, doing this forces the server block to run as the default configuration. Without it, the Puma server block further down would override it causing every website to redirect to your ruby applications. I also removed the **rewrite ^(.\*) $scheme** line because it simply breaks.

```
server {

        listen 80 default;
    index index.php;
        rewrite /wp-admin$ $scheme://$host$uri/ permanent;

        location = /favicon.ico {
                log_not_found off;
                access_log off;
        }

        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }

        location ~ /\. {
                deny all;
        }

        location ~* /(?:uploads|files)/.*\.php$ {
                deny all;
        }

        location / {

            proxy_pass http://127.0.0.1:8080;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_set_header Host $host;

    }

}
```

The next step is to configure Apache 2 to listen on port 8080 instead of the standard 80. Change **/etc/apache2/ports.conf** to look similar to this.

```
# If you just change the port or add more ports here, you will likely also
# have to change the VirtualHost statement in
# /etc/apache2/sites-enabled/000-default
# This is also true if you have upgraded from before 2.2.9-3 (i.e. from
# Debian etch). See /usr/share/doc/apache2.2-common/NEWS.Debian.gz and
# README.Debian.gz

NameVirtualHost 127.0.0.1:8080
Listen 8080

# If you add NameVirtualHost *:443 here, you will also have to change
# the VirtualHost statement in /etc/apache2/sites-available/default-ssl
# to
# Server Name Indication for SSL named virtual hosts is currently not
# supported by MSIE on Windows XP.
Listen 443
```

Within your **/etc/apache2/apache2.conf** towards the bottom of the configuration file add

```
NameVirtualHost *:8080
```

For each virtual host you need to alter your VirtualHost directives to listen on **127.0.0.1:8080** Do a quick restart of the Apache2 and the Nginx Services so the changes take effect.

```bash
$ sudo /etc/init.d/apache2 restart
$ sudo nginx -s reload
```

Hopefully things are still working, if your browser is getting stuck in a redirect loop, try restarting your browser as it caches the Headers.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />

### Setting Up Puma

```bash
$ gem install puma
```

The next thing to do is create a site configuration file in Nginx which will redirect requests to the Puma process. Place it in the **/etc/nginx/sites-available/** directory and create a symbolic link in the **/etc/nginx/sites-enabled** directory.

```bash
$ sudo touch /etc/nginx/sites-available/rails-app.com
$ ln -s /etc/nginx/sites-available/rails-app.com /etc/nginx/sites-enabled/rails-app.com
```

Copy the configuration file below into the file we just created

```
upstream rails-app.com { server 127.0.0.1:9292; }

server {

    listen 80;

    server_name rails-app.com www.rails-app.com;
    try_files $uri/index.html $uri @rails-app.com;

    location @rails-app.com {

        proxy_redirect off;
        proxy_pass http://rails-app.com;
        proxy_set_header Host rails-app.com;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

}
```

Navigate to the root of where your Rails/Sinatra application will be based and run the following command, This command essentially runs Puma as a daemon and forces it to bind to 127.0.0.1:9292. It also creates a .pid file to make it easier to restart after you make changes to your web application.

```bash
RAILS_ENV=production bundle exec puma -e production -b tcp://127.0.0.1:9292 -d --pidfile /var/run/puma.pid
```

Restart Nginx so the changes occur and that should be it, everything should be working, with PHP based websites and Ruby based websites getting served through Nginx. Pretty cool huh? To restart the Puma process run the following command

```bash
kill -s SIGUSR2 `cat /var/run/puma.pid`
```


Nginx Reverse Proxy with Apache 2 and Puma


Let me start by saying Wordpress is an **extremely secure platform** and is in fact exploited due to poorly written 3rd party plugins and uneducated Wordpress users. This is a brief overview of the things you can do to detect issues with your Wordpress site and how to secure it.

There is a large spread attack happening across the Internet aimed towards Wordpress at the moment (14/04/2013). The series of online attacks designed to break into poorly-secured **WordPress** blogs is fuelling the growth of an unusually powerful botnet currently made up of more than 90,000 Web servers. This attack is using a typical **brute force attack against passwords**.

Every attack against a computer system starts with reconnaissance which is the gathering of as much information as possible against the target. In terms of **Wordpress security**, Information from the Whois database and data exposed fron the website itself is extremely useful.

Tools like [wp-scan](http://wpscan.org/) allow you to find out what plugins are running on the Wordpress installation and the names of the users on that system. With this information you have already lost half the battle. I urge you to download and install wp-scan. It's simple to use but extremely powerful. It alerts you of any vulnerable plugins and if this occurs, you should instantly disable those plugins. The chances are it will also display one or more usernames, if you have your username as admin, please open a new tab, login to your Wordpress site and rename your admin user then come back and carry on reading.

If an attacker has a good password dictionary and you have a weak password, congratulations your website could be hacked. For password requirements you should read the [security requirements](http://en.support.wordpress.com/selecting-a-strong-password/) specified on the WordPress website. You should also [restrict access](http://codex.wordpress.org/Hardening_WordPress) to the wp-admin section of your website to only allow access from specific IP addresses. If you want to go to extreme lengths you can also take advantage of a[ third-party plugin from Duo Security](https://www.duosecurity.com/product), which enables one-time login codes sent via text message.

Now the way this attack works is from scanning domains for information such as strings like wp-content and wp-admin. If the bot finds a website with these strings present, it will simply spam the wp-login.php page with requests using the usernames found from tools like wp-scan and a password dictionary possibly using words from the website itself.

Tools like [xHydra](http://www.thc.org/thc-hydra/) allow such attacks to be carried out. **wp-scan and xHyrdra together are bad news for Wordpress sites. **To help reduce the risk of these tools, I urge you to download the wp-security plugin. You can configure the plugin to block an IP address from accessing your website if that IP address has multiple incorrect login attempts. It also allows you to rename the wp-content and wp-admin parts of the URL.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Securing Wordpress


![WEP Security](/Untitled.png)

Recently I have noticed several WEP based wireless networks around my area with the majority of them using BT Home Hubs. This angers me, it has been known for several years WEP is insecure and allows young kids with basic knowledge of computing to hack your network. Here is why...

Two main versions of WEP exist, a 64bit key version and a 128bit key version. There is also a 256bit key but not all vendors support this version. All versions use an Initialisation vector of 24bits leaving a 40bit key, a 104bit key or a 232bit key.

WEP works by the wireless client sending an authentication request to the access point, the AP then responds with an authentication response including a challenge text in plain format. The wireless client then encrypts the challenge text with the WEP key and transmits the encrypted data to the AP, the AP then decrypts the encrypted message and if the transmitted message text matches the challenge text of the AP authentication is successful otherwise access is denied.

WEP can be cracked, by using freely available tools such as **aircrack-ng**. One of the main weaknesses of WEP is that the key used for authentication is also used for encrypting data on the wireless network. The same encryption key is used for each frame sent across the wireless link. By sniffing packets on the wireless network, it is possible to work out the key, which encrypted the data, and once this is known, it will also be possible to be authorised on the wireless network since it uses the same key.

WEP uses RC4 as its encryption algorithm. It is a stream cipher and is weak because of the initialization vector length. The initialization vector is used to randomize the key, which is then used to encrypt the data. With a stream cipher the key used to encrypt traffic should never be used twice but because the IV is short, there is a possibility that an IV collision will occur.  24bits are used for the IV which gives you a possible 16.7 million possibilities, on a network with large amounts of traffic, this value can be met very quickly therefore the IV values will have to be reused.

The IV values are also sent in clear text making it much easier to determine the key if the IV is used multiple times.

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Why WEP Sucks


![2013-01-24 09.31.19](/2013-01-24-09.31.19.jpg)

I should have written this blog post a week ago but with how busy I am currently, I have not had time.

A week ago I had the privilege of attending the New Adventures in Web Design Conference with [Forepoint](http://www.forepoint.co.uk), This was my first ever conference and hopefully not my last. If you cannot be bothered to read the rest of this post, Let me sum up the conference in one word. Inspiring.

It was an interesting angle on how I perceive Web Development, as the conference is aimed more towards designers I got to hear problems designers encounter all the time. The theme of the day seemed to revolve heavily around process, about the way that we work and it highlighted some key problems with how I currently work.

I enjoyed all the talks. A couple of talks I found particularly useful were the talks by **Jessica Hische** and **Wayne Hemingway. **What I learnt from Jessica is that I should be Procrastiworking to stay motivated and get the tasks done. Wayne spoke about taking risks and how that can have a positive outcome on business.

**Seb** was probably my favourite speaker and was a great start to the afternoon. He certainly got everybody out of their food comas. His talk was pure genius with live coding on a Commodore 64 and then demonstrated some JavaScript Prettyness. Seb had the whole hall laughing. I found his talk the most inspiring and I really want to get dirty with pixel particle work.

I should also probably mention that the Forepoint bowling team (including [Richard Eskins](https://twitter.com/eskins)) won the bowling night hosted by [Erskine](http://erskinedesign.com/).

![252707_10151203693456487_1694166284_n (1)](/252707_10151203693456487_1694166284_n-1.jpg)

Here are some pictures, enjoy.

![cupcakes](/cupcakes.png)

![me](/me.png)

![goodies](/goodies.png)

![firstones](/firstones.png)

![cup](/cup.png)

![andrew](/andrew.png)

import { NewsletterWidget } from "../components/NewsletterWidget";

<NewsletterWidget />


Go to Adam Bulmer's Homepage

Blog

Hello there 👋

Latest Tweet

Featured Article