It can be hard making decisions, especially when they affect multiple teams and a large number of developers. What if you get it wrong, what if it's not popular? A mistake could be costly, both financially and for morale. This is all true but what are the hidden costs of delaying a decision and is my expectation true that the cost of being indecisive over long periods of time is far greater.

## How long does it take to make a Proof of Concept

Seriously! I have sat through endless debates over the last few years about whether to go with Tech A or Tech B. These debates go round and round in circles and none of the many people who are often in these meetings will see a good return on the time they have invested.

Don't get me wrong, a few brief round-tables of ideas can be very helpful but once you have some ideas it is much more valuable for everyone concerned to split up and get them first written down, and second thrashed out in a POC.

This way  everyone is a winner, even if a piece of tech is not used, it is very rare that there is a perfect winner and we can probably take learnings from the process.

## Write it down

Writing out the ideas on the table and getting things into diagrams helps to solidify thoughts into more concrete options. People should not be concerned that these architecture diagrams are 100% accurate, they are still more effective in team decision making than a whole lot of words dancing around people's heads in a meeting.

It is very true that a group of people can hear the same words and interpret them in completely different ways. You shouldn't be surprised if you leave a meeting more confused than when you started it if there has been no clarification of the decisions or ideas written down and circulated.

## Too much time is spent in fantasy

My opinion is that we spend way too much time in this fantasy land inside our heads, I don't know why we value these ephemeral meetings with no tangible output. Get ideas out in the open, get them shared, get them explained in such a way that they speak for themselves. I expect that a whole raft of ideas once considered "genius" would come to light as not feasible much sooner. Teams learn quicker this way and that can only be a good thing for innovation.

## Make a decision, get things wrong, get things right

So put your cards on the table, get your hands dirty and make a decision. Sometimes you'll be wrong, sometimes you'll be right but it will be an investment which will grow into a whole lot of value.

Coordinating therapies and progress for a disabled child is extremely hard. Because of this it is even harder for parents and carers to have a holistic view of the child’s needs. Martin and Kev at Theracode have been working on a way to simplify this process over the last few years through an app called [TherapyPal]() and I'm excited to be able to help out on a part-time basis. The aim is to give disabled children carers who are able to work together and understand the big picture.

Martin Georgiev is a good friend of mine, we have worked together on several projects in the past and regularly help each other out these days. Martin saw the need for this type of app through his own experience looking after his son Sasha who has Cerebral Palsy.

## Bringing Therapies Together

Children like Sasha need a number of carers who will each need to keep documentation of the child’s progress. These might include: Occupational Therapy, Speech and Language or Physical Therapy. TherapyPal includes features which support these different types of therapy like storing and recording any physical exercises and keeping track of mood. We want to bring them into a single platform which is focussed on making disabled children succeed.

## Permissions and Safeguarding

TherapyPal has a sophisticated sync system to share the data between parents, carers and therapists along with a robust permission system to ensure the safeguarding of the patient’s information. Through capturing these things we will be helping parents see their child’s progress and at the same time we can connect them with any government or privately funded therapy providers the child might need as they grow.

## What's next?

The app is already in the Android and Apple stores. We are going through trying to tidy up the UX and UI for the screens along with planning for some new features as we respond to feedback from the community.

Take a look on the [TherapyPal]() website.

How do you implement some UI state which
can be changed from different parts of your React application?

In this example I implement a menu which can be toggled using a central UI context. I've built it in such a way that a central Provider component controls how this context will be updated. By doing it this way you will keep your code easy to read and will reduce the complexity of any bugs you encounter in the future.

## I walk through the following:

* converting some functionality in `useState` to context
* creating a React Context
* exposing the React Context as a hook
* creating a Provider component

## The elements of code I go through

The NextJs home page now gets the menu state from the `useUIContext`
hook. This hook can be accessed from any other page or component within
the application.

I have simplified the code in the snippet below. It shows that we
get the `isMenuOpen` property from the `UIContext` object and the
`className` then uses it to set the `block` or `hidden` classes.

```js
import { useUIContext } from "../src/UIContext";

export default function Home() {
  const { isMenuOpen, toggleMenu } = useUIContext()
  // ...
  return (
    // ...
    <aside className={`${isMenuOpen ? 'block' : 'hidden'} ...`}>
    // ...
  )
}
```

We can access the state from our `UIContext` because in this NextJs
application I have wrapped the page component in our `UIContextProvider`.
This is done within the `pages/_app.js` file.

```js
import '../styles/globals.css'
import { UIContextProvider } from '../src/UIContext'

function MyApp({ Component, pageProps }) {
  return (
    <UIContextProvider>
      <Component {...pageProps} />
    </UIContextProvider>
  )
}

export default MyApp
```

The `UIContext.js` file here shows the final result. You can easily
add more properties to the state as well as more functions to manupulate
it in a controlled way.

```js
import { createContext, useContext, useState, useMemo } from 'react'

const UIContext = createContext(null)

export const useUIContext = () => useContext(UIContext)

export const UIContextProvider = ({ children }) => {
  const [state, setState] = useState({
    isMenuOpen: false
  })
  const value = useMemo(() => {
    const toggleMenu = () => setState({
      ...state,
      isMenuOpen: !state.isMenuOpen
    })
    return {
      ...state,
      toggleMenu
    }
  }, [state])

  return (
    <UIContext.Provider value={value}>
      {children}
    </UIContext.Provider>
  )
}
```

I've had a few questions from people recently about how this works so I hope this has been useful to you.  


Since posting some thoughts on [more sustainable technology](/blog/2020/11/03/enviro-creds) I have been made more aware of others who have been working for a number of years now at raising awareness of how our technology choices (and habits) affect everyone. Here are three things I have learnt which you might be able to put into practice now.

## 1 - Turn off Unused Servers Running in the Cloud

It sounds obvious but it's quite likely that if you are running your infrastructure in the cloud, there will be servers which are sitting there not being used. This might be a server which was spun up for testing and never decommissioned or servers running temporary environments for pull requests or old branches.

## 2 - Move Your Compute to Sustainable Region

If you are in the process of deciding on a cloud provider to use, Google and Azure are currently the most sustainable and have to most transparent effort towards their goals.

If you are currently running your applications in AWS then moving them to one of the green regions will mean that they are more sustainable. The AWS green regions are Dublin, Frankfurt, Canada and Oregon.

If you are running in Google or Azure then the good news is that you don't need to do anything. They are already 100% carbon neutral which means that any energy used which comes from non-renewable sources is then purchased from renewable sources elsewhere.

Take a look at this Ethics Whitepaper maintained by Anne Currie and Paul Johnston for more details on what each of these providers are doing and what they have committed to. It also talks about what they still need to do in order to be fully sustainable.

## 3 - Sign the Petition

It makes a big difference when we, the customer, show that sustainability is high on our agenda. We need to encourage all cloud providers towards a meaningful goal. There is a petition on Change.org which you can sign to show your support.

Sustainable Servers by 2024: https://www.change.org/p/sustainable-servers-by-2024

## Going further

Over the last few weeks I have been looking around the internet for resources and information on sustainability in tech. I have included a list below of the public facing pages from some of the main cloud providers.

The State of Data Centre Energy Use
Ethics Whitepaper - The State of Data Centre Energy Use by Paul Johnston & Anne Currie

This whitepaper was originally created in 2018 and has since been updated. It gives a good background to the problem and explains the methods used by each of the major cloud providers. It also grades them based on the information Paul and Anne had available.

Microsoft
https://www.microsoft.com/en-us/sustainability

https://news.microsoft.com/climate/

Google
https://sustainability.google/

Amazon
https://www.aboutamazon.com/sustainability

Cloudflare
https://blog.cloudflare.com/the-climate-and-cloudflare/

Alibaba
https://alibabagroup.com/en/about/sustainability

## Get in touch

I'm still keen to learn more from people who are involved in this. Please get in touch if there are good articles on the subject.


I'm struck by the urgency of the state of the natural world after watching David Attenborough's recent Netflix programs. Without action nothing will happen so I've been trying to think of ways in which we can be more sustainable with our technology choices. I feel focussing on three particular areas can make a significant impact, let's look at why.

## Motivation

We need a planet to live on so let's not screw it up. This quote brings it home.

> We are ultimately bound by and reliant upon, the finite natural world about us

We need a healthy planet to live healthy lives and knowing that we are losing so much of it's diversity and at such a rapid pace has been a great weight on my mind.

## Sustainable Infrastructure

> Anything that can't be done forever is, by definition, un-sustainable

How is the infrastructure we use powered? I'm curious as to how aware we are of this question. How about what happens at the end of life for any of the components we trust our connected world to on a daily basis. I mean, most of us don't actually see these things working let alone have an idea of how fast they are consumed and discarded.

## Energy Efficient Software Architecture

I've seen first hand how different software architectures and software implementations can produce wildly varied resource needs. In the past, throwing money at the problem with bigger and more powerful machines was ok but we all know this is not a sustainable option. Instead we need to be systematically looking at increasing the efficiency of our applications

## Automated Sustainability Monitoring

I know from years of experience building software that whilst a project might start out with the best intentions, without a robust process of monitoring, it all crumbles surprisingly quickly.

So my question is, how can we continuously test how sustainable our technology is. What are the tools and architectures available that give us the data we need. Data which can enable automated checks and allow us to adhere to meaningful and long-term sustainability goals.

## Conclusion

There are a lot of questions here, which (in my view) is a good place to start. There is knowledge to be gained through research and relatively clear problems to solve. If any of this resonates with you, and if you are able to help with any of the above, please get in contact. I would love to hear from you.

I hope we will not miss our opportunity to take action because of the turbulence that surrounds us on a daily basis.

## Credit:
Title photo by Nick Fewings on Unsplash


Hello everyone, this is a professional update giving a bit of background to what I've been involved with recently.

Feel free to get in touch if this is of any interest.

## JAM Stack React and NextJS

JAM stands for JavaScript, APIs, Markup. It is a way of delivering websites which focus on simple HTML files which are enhanced by JavaScript and an API within the browser. I've been working in this format for a few years now, starting at Seccl Technology and then working at Nationwide with an enterprise CMS (Sitecore), Nextjs and the Uniform product.

There are a few key reasons why this architecture is gaining awareness

**Better performance**: because website pages are built prior to them being requested by a user on your website, they can be served immediately. This reduces the time to first byte and provides a much faster experience.

**Higher Security**: there are many attack vectors which are just gone when the primary delivery of HTML pages comes from a set of pre-rendered static files.

**Easier Scaling**: the primary method for scaling static files is by using a CDN which will scale with demand without needing complicated cacheing or autoscaling mechanisms.

**Cheaper**: fewer resources are needed to be constantly online, ready to serve a user's request. This translates into cost savings across your stack.

**Greener, less energy**: this technology can help towards sustainability goals for a company. Fewer resources will mean less energy is required making it easier and more feasible to power your application from green energy sources.

If you are considering moving your existing CMS infrastructure towards this kind of architecture. Get in touch and we can explore your options.

## Mentoring

During my time with Nationwide I was involved in mentoring a number of the developers. Helping them with pair programming and learning sessions. It was great to see a few of them graduate from the grad program into a developer position.

## Kubernetes

Kubernetes is an open source system for automating application deployment and scaling. It allows you to connect together separate services, describe how they work together and scale in different environments. All this through code based configuration.

The project I have been working with Nationwide on for the past year is deployed on their own Kubernetes platform using Open Shift. They have a website connecting to a GraphQL API and a number of microservices. All these are configured using Google Skaffold to deploy into their Kubernetes cluster.

It would be great to hear from you If you are considering migrating an application to Kubernetes or have decided to deploy a new project onto a Kubernetes cluster and you would like help.


This website has been my place for thoughts and experiments, ideas and memories for close to a decade. The first article on here was written in March 2010 when I was building jQuery plugins and working at Aqueduct in London. I'm still going to keep my blog going here but I want to collect up and pull together the more in-depth content on the [Pogo Kid](https://www.pogokid.com) website in a more structured way.

## A Small history

The [blog listing](/blog) reads as a small history of web development over the last decade. The posts on here have been a window on my thoughts at the time. They may not have caused any great waves outside of my little sphere but show the many changes in our day-to-day responsibilities as front-end developers.

The change machine keeps going, I am currently working through the [Certified Kubernetes Administrator](https://training.linuxfoundation.org/certification/certified-kubernetes-administrator-cka/) course to hopefully do the exam by the end of the year. I'm sure there will be a number of articles as I work through the topics.

It's been such a beneficial thing for me to keep writing over the years. I've found that getting things out of my head has helped me understand many of the complexities I have faced. I have definitely started to recognise the significance of this blog on my mental health. I see that times when I haven't been writing there is an increase in my stress levels and a heightened level of anxiety in my day-to-day life.

So much of what is required of me seems to be making sense of a whirlwind of options and opinions. There is much uncertainty around the consequences of these decissions, but making the most of what I can see in front of me has always been the primary goal. Getting those options written down and sufficiently researched (without overloading myself) has made a big difference.

## Transitioning

This last year has been a bit of a transitioning period. Let's rewind a bit to March 2017, I joined a startup called [Seccl Technology](https://seccl.tech) as their Tech Lead, put everything into making that a success and [Pogo Kid](https://www.pogokid.com) was put to the side for a while. The focus was intense as you would expect, no startup I've worked with has been a walk in the park. After I left in June 2019 (Seccl sold not long after), I decided that I needed some sort of separation between my thoughts, hobbies and experiments and the technical research and thought that forms the foundation of Pogo Kid's USP.

I've started to realise more about myself in this period since. I have done a lot of reflecting on how I "tick". I've found that I am a lot more introverted than I previously realised. I'm going to try and use that to my advantage rather than continue to force myself into situations (especially social ones) that leave me burnt out.

## A Blog and More Structured Research

So after consulting with [Pogo Kid](https://www.pogokid.com) for over five years now, this seems as good point as any to diverge this website and make a dedicated one for Pogo Kid. You will see more reflection within the articles on here and there will be more long-form research within the content on Pogo Kid.

I am looking forward to the new freedom that comes from this in the years to come.


---

Photo by [eberhard grossgasteiger on Unsplash](https://unsplash.com/@eberhardgross)


Deploying JAMstack within an enterprise company comes with many
complications due to it's scale. There is not only the large
number of pages to contend with, there are often restrictions
imposed on how we can deliver the solution.

This was the case at
[Nationwide Building Society](https://www.nationwide.co.uk/)
where we delivered a new platform and a new JAMstack website. It
was great to be able to talk about our experience at
[Uniform](https://uniform.dev)'s JAMstack for Sitecore virtual
conference. [Rich James](https://richjames.tech/) and I went
through our experience on Nationwide's journey to Enterprise
JAMstack.

You can find the video here:

<Figure imageSrc={'/content/2021/jamstack-for-sitecore.webp'}
        caption="Enterprise JAMstack for Sitecore"
        href="https://vimeo.com/489264275/415b1aeb99"
        width={1920}
        height={1003}/>

We also took part in the panel discussion at the end which was
really interesting:

<Figure imageSrc={'/content/2021/jamstack-for-sitecore-panel.webp'}
        caption="JAMstack for Sitecore Panel"
        href="https://vimeo.com/489292656/9b413387e4"
        width={1920}
        height={1003}/>

If you are investigating the JAMstack architecture for a Sitecore
solution then take a look at [Uniform for Sitecore](https://uniform.dev/uniform-for-sitecore).



One of the big challenges I have found going into a management role is finding ways to help the people in my team develop their skills and their career.

I have done some research and have collated some of my favourite examples.

## Design Goals

I want all of these goals to conform to the SMART criteria.

### S - Specific

These goals must be clear and well defined. We all need to understand when the goal is achieved.

### M - Measurable

I need to be able to pull some sort of metric from the goal which is not ambiguous.

### A - Agreed Upon

I want to remain in-line with our agile priciples of personal ownership and that should include goals.

### R - Realistic

Our primary aim is to see this person succeed! So the goal must be achievable in the allotted time.

### T - Time Based

There must be a point in time when we can review and assess whether this goal has been completed.

## Goal Categories

### Technical Skills

#### Code Kata

Complete X number of code katas each month.

**Goal completion**: 

 - Document the problem and your solution such that it can be referenced.

#### Answer Questions on a Technical Forum

Answer X number of questions on Stack Overflow each month.

**Goal completion**:

 - Document which ones you have answered.

#### Read Blogs

Read X number of blog posts on a particular subject each week.

**Goal completion**: 

 - An article of your own on the subject
 - A lightning talk (10 minutes) to the team
 
#### Proof of concept

Write a proof of concept to solve an area on the current team's challenge board. Complete this goal by:

**Goal completion**: 

 - Demo the proof of concept to the team
 
#### Bus Factor -1

Ask a developer from another team to teach you an area of our codebase you have never touched.

**Goal completion**: 

 - A lightning talk (10 minutes) to the team on that feature
 
#### Coverage

Increase the code coverage on a module by X%.

**Goal completion**: 

 - Methods increased by X%
 - Conditionals increased by X%
 
#### Documentation

Take X number of badly (or wrongly) documented README.md files and document them correctly.

**Goal completion**: 

 - Show X number of documented README on github.

### Soft Skills

#### Mentoring

Log X hours of time mentoring another developer each week.

**Goal completion**: 

 - A log showing the length of time, the other developer and the general skills you covered
 
#### Interviewer

Help us hire the next ace engineer by doing X number of stage 1 telephone interviews for the next hire.

**Goal completion**: 

 - Document the people you interviewed on the telephone
 
#### Company Blogger

Write a well researched article for the company blog on a feature we have just released or that is on the roadmap.

**Goal completion**: 

 - Published blog article

## References

I have taken inspiration from the following places:

 - [Can you give examples of SMART goals for a software engineer - Quora](https://www.quora.com/Can-you-give-examples-of-SMART-goals-for-a-software-engineer)
 - [SMART Goals - Project Smart](https://www.projectsmart.co.uk/smart-goals.php)
 
 ---
 
 Photo by [Ray Hennessy on Unsplash](https://unsplash.com/@rayhennessy)


In this post I want to go beyond React and Redux and explore ways in which we can improve the readability of our code by creating a rich domain of types that describe the data better.


## Using Type Aliases to Build a Rich Description of the Domain

The point of the rich domain is to enhance the underlying types in such a way that it adds further semantic meaning. Secondly to provide more certainty to what data is being passed around

In this post we'll be looking at a few kinds of data which are ambiguous when described as a primitive type. We'll then explore some examples of how we can add more semantic meaning along with some guidelines to help prevent some of the problems you might find.

## Dates

Let's start by looking at dates. Dates are a good example of a piece of data which can be described in many forms and stored in multiple ways.

A date could be passed around in memory as a JavaScript `Date` object, you often see dates saved using a library like `Moment` which enhance the date object. If it has been stored as a result of an api call it could be in a serialised format like a `string` or a `number`. If it was a `string` it is more than likely going to be in an ISO format.

Seeing a variable typed as a `Date` or a `Moment` is often sufficient. However, let's consider the serialized types of `string` and `number` which don't convey any "rich" meaning.

### Dates as Strings

Describing a `dateOfBirth` as a `string` is ok, but you gain a lot more meaning from describing it as a `ISODateString`.

Here are three examples of a string type, they will all compile if you interchange the values but the types communicate more about what kind of string is expected.

```typescript
type ISODateString = string
type ISODateTimeString = string

const birthName: string
const dateOfBirth: ISODateString = '2018-01-01'
const created: ISODateTimeString = '2018-01-01T10:00Z'
```

### Dates as Numbers

Describing a `dateOfBirth` as a `number` is also ok for the compiler, but you gain a lot more meaning for the developer by describing it as `MillisecondsDateNumber` or `SecondsDateNumber`. These are two real-world ways in which numbers are used to describe a date.

```typescript
type MillisecondsDateNumber = number
type SecondsDateNumber = number

const age: number = 39
// 01 Jan 1980
const dateOfBirth: SecondsDateNumber = 315532800
// 01 Jan 2019
const created: MillisecondsDateNumber = 1546300800000 
```

## Looking at IDs

IDs are another example of values that come in all shapes and sizes. Giving them more semantics really helps developers understand the data they are working with.

### IDs as Strings

Describing an `id` field as a string would be accurate for a whole range of identifiers but there is a very big difference between a user id of `davetayls`, a JIRA id of `PU-1234`, a UUID of `ab39ae77-c1cd-4490-a114-eb9776c2f321` or a MondoDb ObjectId of `507f1f77bcf86cd799439011`

```typescript
type UserIdString = string
type JiraIdString = string
type UUIDString = string
type ObjectIdString = string

const id: UserIdString = 'davetayls'
const id: JiraIdString = 'PU-1234'
const id: UUIDString = 'ab39ae77-c1cd-4490-a114-eb9776c2f321`'
const id: ObjectIdString = '507f1f77bcf86cd799439011'
```

## Guidelines for Naming Rich Types

There are some gotchas with these but following these good practices for naming rich types will help prevent them.

### Masked primitive type

It is easy to mask the underlying primitive type such that it actually loses semantic meaning and makes the type harder to understand.

To make sure this doesn't happen, always include the primitive name with the rich name. For example, you should append "String" or "Number" at the end of the name.

The type `UserId` is quite ambiguous but `UserIdString` is not.

## Roundup

I have found a rich domain of types to be a real boost to developer understanding of the data they are working with and I would whole-heartedly recommend you make use of them within your codebase.



Thanks to everyone who came to the Bath Digital Festival lunchtime events.
It was really nice to be given the opportunity to speak and then to be able
to talk with so many of you afterwards.

Here are the slides:


## This is what I covered

  * What have we achieved at Seccl?
  * What are the pinch points?
  * Who is this for?
  
## What is Serverless Framework

 - Infrastructure as code
 - Simplified deployment of separate functions
 - Provider agnostic

## What have we achieved

Seccl is a startup in Bath pioneering a new breed
of digital services for wealth management

* Node.js, TypeScript, React, Express APIs
* Serverless Framework on AWS
* APIs, pubsub, queues, functions, static websites, cdn
* ## 90% of our infrastructure (and rising) is controlled by code!

## Here's the rub! There has been pain

 - Deployment is needed to fully test end-to-end and that can slow things down
 - Our workflow is heavily unit test focused so this helps but when
   it gets to testing the integration in our dev environments you do have
   to deploy.
 - The offline capabilities aren't a silver bullet, when you start to link
   functions together you could still have some functions running in the cloud
   and some locally

### What about lambda?

 - we use aws and so that means lambda
 - building compiled code to run in a different architecture
 - Cold start when you run lamda inside a VPC is really painful (up to 9 secs)
 - When it goes wrong, your head can explode as to where to start looking
 - Sometimes it's completely out of your ability to fix
 
# Who is this for

## 👍

  - For any application logic which can be easily spun up, and then powered down
  - It works really well for APIs which talk to a database or other APIs
  - It works great for a micro-service like architecture
  - For teams with little devops specialist skills
  
## 💩

 - You can't be afraid of a learning-curve
 - You can't work with a full framework like Rails
 - For someone who wants a silver bullet and a holiday in Hawaii
 
# Roundup

 - 💪 Infrastructure as Code
 - 💪 Replica environments
 - 😱 Everything is separated. It's different complexity
 - 😱 Slow cold starts
 - 💪 No maintaining hardware
 - 💪 Serverless plugins to fill the gaps
 - Tooling is improving at a rapid rate



I've been looking at the possibilities of a simple middleware pipeline script. So far I've implemented a version of the Chain of Responsibility pattern. I've also been looking at using the same builder to work with promises. Here is what I've found.


## Fetching some data from an API

So for this example I will define a few interfaces defining the data I am working with.

The context for each middleware function is going to be an object with a request and a response. This means that the middleware can work with either during each step.

```typescript
interface IContext {
  req: IRequest
  res: IResponse
}
```

The request for my example is a simple get by id.

```typescript
// Data needed for the request
interface IRequest {
  data: { id: string }
}
```

Then the response can contain the data from the server or an error.

```typescript
// The format of the api response
interface IResponse {
  data?: IData
  error?: Error
}

// The Person data
interface IData {
  id: string
  name: string
  age: number
}
```

## The middleware

Now let's write some middleware. The first middleware makes the request to the api based on the data inside the `IRequest` object. I have mocked the data for my example code where 'helen' is 20 years old and 'bob' is 16.

The second piece of middleware will check the response for the person's age. If they are under 18 it add an error to the response.

Notice that in each example we are immediately passing the result of `promise.then` to the `next(...)` in the pipeline. This is because we don't have access to the asynchronous value during synchronous running of this middleware function. Each step is still clean and focused building up a set of reusable middleware for different purposes.

```typescript
const fetchFromServer: TMiddleware<{}, Promise<IContext>> =
  (env, next) => promise =>
    next(
      promise.then((ctx) => {
        return env.get(`/person/${ctx.req.data.id}`)
      })
    )

const mustBeAdult: TMiddleware<any, Promise<IContext>> =
  (env, next) => promise =>
    next(
      promise.then((ctx) => {
        if (ctx.res && ctx.res.data && ctx.res.data.age < 18) {
          return {
            ...ctx,
            res: {
              error: new Error('Must be an adult')
            }
          }
        } else {
          return ctx
        }
      })
    )
```

## The pipeline

I then need to create the person fetcher pipeline builder which looks the same as my previous example.

```typescript
const buildPersonDataFetcher = buildMiddleware(
  fetchFromServer,
  mustBeAdult
)
```

## Customised fetchPerson

The fetch environment here would likely have methods for getting the base url of the api or even a generic `get()`, `post()` etc implementation. I've applied the environment to a new variable here but it could be passed in at each `fetchPerson` call.

```typescript
const fetchEnvironment = {
  get: (url) => apiPromise
  post: (url, data) => apiPromise
}
const fetchPersonWithEnvironment =
  buildPersonDataFetcher(fetchEnvironment)
```

This is where things become a bit different. I want my `fetchPerson` function to just take the request. I also want it to throw any response error so that it get's fed through to the `.catch` of the resulting promise.

```typescript
export const fetchPerson = (req: IRequest) => {
  const context = Promise.resolve({ req, res: {} })
  return fetchPersonWithEnvironment(context)
    .then((ctx) => {
      if (ctx.res.error) {
        throw ctx.res.error
      } else {
        return ctx.res
      }
    })
}
```

## Using the new promise based pipeline

Here is the result of our promise based middleware. The request for Helen succeeds because she is over 18 and the request for Bob errors.

```typescript
it('should successfully fetch helen', function () {
  return fetchPerson({ data: { id: 'helen' } })
    .then((res) => {
      equal(res.data!.name, 'Helen')
      equal(res.data!.age, 20)
    })
})

it('should fail with bob', function () {
  return fetchPerson({ data: { id: 'bob' } })
    .then(() => {
      throw new Error('should not run')
    })
    .catch((err) => {
      equal(err.message, 'Must be an adult')
    })
})
```

The only thing I am now questioning is why this might be better than just using functions which are designed to be given to a `promise.then` function. If they all expected the same `IContext` type I could achieve the same results.

I'm thinking that middleware is specifically useful when you are building a library which needs the ability to be extended and customised for different contexts. It would be useful when the consumer of the library was able to inject their own middleware for debugging, logging or custom data manipulation.

I still want to expand on this with functional types, `Either` and `TaskEither`.



Out of curiosity, I've been experimenting with what you can do with a simple and generic middleware builder. I've been surprised at how powerful it can be with such a small amount of code.



## A simple but powerful function

I did a lot of reading, and gained a fair amount of inspiration from researching various implementations of the [Chain of Responsibility](https://sourcemaking.com/design_patterns/chain_of_responsibility) pattern along with diving into the [express.js](https://github.com/expressjs) and [redux](https://github.com/reduxjs) codebases.

It has essentially boiled down to using `reduceRight` on an array of functions. The following code has simplified types to make it easier to read but shows the concept.

```typescript
const buildMiddleware =
  <Env, Context>(...middlewares: Array<TMiddleware<Env, Context>>) =>
    (env: Env) =>
      (req: Context): Context => {
        const runFinal = (context: any) => context
        const chain = middlewares
          .reduceRight(
            (next: any, middleware) => middleware(env, next),
            runFinal
          )
        return chain(req)
      }
```

With this simple function I can build a wide range of middleware handlers.

## Chain of Responsibility Pipeline

The first one I tried was a simple synchronous, chain of responsibility pipeline. Here's a few examples of middleware which keep adding to a string.

```typescript
// First middleware
const sweets = (env, next) => context => {
  context += ` ate ${env.numberOfSweets()} sweets`
  return next(context)
}

// Second middleware
const enjoyed = (env, next) => context => {
  if (env.didEnjoy()) {
    context += ' and enjoyed it.'
  } else {
    context += ' and stuck tongue out.'
  }
  return next(context)
}

// We can stop the middleware chain
// and return early if needed
const early = (env, next) => context => {
  if (env.isTakingPart()) {
    return next(context)
  } else {
    return context + ' did not want to take part'
  }
}
```

To use them you build the pipeline, then you can apply a shared environment, and finally pass a context through it.

```typescript
// Add the middleware to form the pipeline
const buildSweetsSentenceWith = buildMiddleware(
  early,
  sweets,
  enjoyed
)

// Apply the environment to the pipeline
const getSweetsSentence = buildSweetsSentenceWith({
  isTakingPart: () => true,
  didEnjoy: () => true,
  numberOfSweets: () => 20
})

//
console.log(getSweetsSentence('Barney'))
// => 'Barney ate 20 sweets and enjoyed it.'
```

I'd expect the environment would tend to be more dynamic to the context, and I'd also expect the context to be an object with most of the data needed for the middleware. This as an experiment shows a lot of potential for such a simple script.

## Next article, I look at using Promises

In the next post, I'll look at using the same code to build a Promise based pipeline. With promises we will be able to use the same pattern for asychronous tasks. I will then show how you can use it with `Either` and `TaskEither`.

You can find the full working code and tests in the [exploring-fp-ts github repo](https://github.com/davetayls/exploring-fp-ts-series/tree/master/src/middleware)

## ... A more involved example

If you can't wait for more on this, here is another example of a synchronous pipeline which has a bit more going on. It's probably closer to real-world usage.

Here we are running calculations with an object of data as the context. I'm delegating the responsibility of calculating the number of each size bank note for an atm.

```typescript
import { buildMiddleware, TMiddleware } from './middleware'

const env = {
  getBalance: () => 500
}

interface IChainOfResponsibility {
  name: string
  ones: number
  tens?: number
  twenties?: number
  hundreds?: number
  hasEnoughMoney?: string
}

const hasEnoughMoney: TMiddleware<typeof env, IChainOfResponsibility> =
  (env, next) => atm => {
    const result = {
      ...atm,
      hasEnoughMoney: atm.ones < env.getBalance() ? 'Yes!' : 'No'
    }
    return next(result)
  }

const hundreds: TMiddleware<typeof env, IChainOfResponsibility> =
  (env, next) => atm => {
    const ones = atm.ones % 100
    const result = {
      ...atm,
      hundreds: (atm.ones - ones) / 100,
      ones
    }
    return next(result)
  }

const twenties: TMiddleware<typeof env, IChainOfResponsibility> =
  (env, next) => atm => {
    const ones = atm.ones % 20
    const result = {
      ...atm,
      twenties: (atm.ones - ones) / 20,
      ones
    }
    return next(result)
  }

const tens: TMiddleware<typeof env, IChainOfResponsibility> =
  (env, next) => atm => {
    const ones = atm.ones % 10
    const result = {
      ...atm,
      tens: (atm.ones - ones) / 10,
      ones
    }
    return next(result)
  }

export const handleRequestPipeline =
  buildMiddleware(hasEnoughMoney, hundreds, twenties, tens)
export const chainOfResponsibility = handleRequestPipeline(env)

chainOfResponsibility({ name: 'Mary', ones: 1335 })

// => result is
// {
//  name: 'Mary',
//  hasEnoughMoney: 'No',
//  ones: 5,
//  tens: 1,
//  twenties: 1,
//  hundreds: 13
// }
```

---

Cover photo by [Gerrie van der Walt
](https://unsplash.com/@gitfo)


## Note: This article is based on `fp-ts` version 1
For guides on how to use version 2 please refer to the [`fp-ts` website](https://gcanti.github.io/fp-ts/)

In any codebase there are several paths which can fail. Like I discovered with [handling nullable values](/blog/2018/05/20/fp-ts-01-working-with-nullable-values) I want to flow through the code and deal with errors gracefully and in a logical manor. Too many times have I found I've written a tangle of if statements and try / catch blocks which make reading a logical set of instructions hard.

To work with errors I found a good place to start was to use the [`Either` type](https://gcanti.github.io/fp-ts/Either.html). It represents a value which could be one of two possible types, either the type we specify first (the one on the `Left`) or the type we specify second (the one on the `Right`). Something like this:

```typescript
Either<Error, IPerson>
```

I found that if a function creates an error directly then it should return an `Either`. Here is an example of how I might display some information based on a number of steps. Any of these steps could error but I can handle any of the error cases within the `fold` at the end.

```typescript
import { fromNullable } from 'fp-ts/lib/Either'
getRecurringPayment(person)
  .chain((payment) => calculateAmount(payment))
  .chain((amount) => affordability(amount))
  .fold(
    (err) => {
      console.log(
        'Something went wrong',
        err
      )
    },
    (affordability) => {
      console.log(
        'Affordability rating',
        affordability
      )
    }
  )
```

The `fold` here provides a way of taking the current value out of the type it is in. An `Either` could have two possible states and so we provide it a function to handle each of them.

## Common Error Structure

I've found that it reduces a lot of complexity–and therefore good practice–to standardise a common error structure early. Once you have this in place every error passed around our system conforms to a known structure.

I call this error structure `IError` and use a simple method for extending the built in JavaScript `Error` to conform to it.

I'm also very aware that JavaScript can throw pretty much anything as an error. So any error that is caught will need to be checked, unless I resolve it to the common error structure previously designed.

With this in mind I have a `resolveCommonError` function which can be given anything but will always return an `IError`. The type signature would look like this:

```typescript
resolveCommonError: (err: any) => IError
```

For the remainder of this article I will refer to errors as `IError` because of this.

## Try / Catch

I found that I often don't want to return an `Either`. Our code also needs to integrate with outside libraries which don't use `fp-ts`. In both of these cases I need some way of gracefully catching any resulting error and converting it to an `Either`.

In these cases I use the `tryCatch` function. It will catch any errors and allow you to resolve them.

```typescript
import { tryCatch } from 'fp-ts/lib/Either'
getListOfPeople()
  .chain((people) =>
    // Get first person in list
    tryCatch(() => head(people), resolveCommonError)
  )
  .map((person) => person.favouriteNumbers)
  .chain((favouriteNumbers) => {
    // Get first number
    return tryCatch(() => head(favouriteNumbers), resolveCommonError)
  })
  .fold(
    (err) => {
      console.log(
        'An error I can rely on',
        err
      )
    },
    (first) => {
      console.log(
        'The first item is',
        first
      )
    }
  )
```

## Working with lots of potential errors

I want to transform each value within an array of which any could produce an error. We looked at a similar thing with the `Option` type and you can do the same things when working with `Either`.

I'll take a similar idea, I want to pass every name in an array through my nice name converter. There is a potential for errors to happen during this conversion so I'll wrap the function which converts each name with `tryCatch`.

I'll need to use `traverse`, remember it does two things:

1. You give it a function to process each item and return an `Either`
2. It converts this new array of `Either`s to an `Either` holding an array of values.

```typescript
// We start with an array of strings
[string, string, string]

// 1. We then have an array of Either
=> [Either, Either, Either]

// 2. We end up with our resulting array of
// strings inside an Either
=> Either<IError, [string, string, string]>
```

When an error occurs I want to stop processing the names and fallback to a default which for simplicity I've chosen `['Not all names were nice']`. Here is what that would look like.

```typescript
const niceNameCheck = (name: string) => {
  if (/dude/i.test(name)) {
    return 'Nice name'
  } else {
    throw new Error('Bad name')
  }
}

const names = [
  'Bob Smith',
  'Andy Hedge'
]

const niceNameDude = (name: string) =>
  tryCatch(() => niceNameCheck(name), resolveCommonError)

const result = traverse(either)(names, niceNameDude)
  .getOrElse(['Not all names were nice'])

deepEqual(result, ['Not all names were nice'])
```

Sometimes, I'm not concerned about the error and just want to provide a default if an error occurs. To solve this I used the same `.alt()` pattern I used for `Option` in the previous article.

```typescript
const names = [
  'Dude Smith',
  'Andy Hedge'
]

const niceNameDude = (name: string) =>
  tryCatch(() => niceNameCheck(name), resolveCommonError)
    .alt(right('Be a dude'))

const result = traverse(either)(names, niceNameDude)
  .getOrElse([])

deepEqual(result, ['Nice name', 'Be a dude'])
```

I have found that it is a lot easier to visualise working with lots of data in this way. It allows me to reason about a single item and then apply that reasoning to all in a very similar fashion.

## View some code examples

I'm continuing to experiment with different patterns for functional–and in this case Monadic–error handling. You can take a look at some example code in the companion [exploring-fp-ts-series](https://github.com/davetayls/exploring-fp-ts-series/tree/master/src/02-handling-errors) Github repo

There are a few things I've not looked into as part of this article but they can wait for another day.

---

Cover Photo by [Johannes Plenio](https://unsplash.com/@jplenio) on Unsplash



## Note: This article is based on `fp-ts` version 1
For guides on how to use version 2 please refer to the [`fp-ts` website](https://gcanti.github.io/fp-ts/)

It's such a pain dealing with values which could be `null` or `undefined`. I like to get
rid of the potential for them as much as possible when designing interfaces but there is
no escaping it sometimes. I hate it even more when you have a set of them, which you need
to check before moving on.


To help, the `fp-ts` library comes with the
[`Option` type](https://gcanti.github.io/fp-ts/Option.html). It represents a value which
might not be there, it is optional.

For a trivial example, what if we want the first name from a full name that might not
exist.

```typescript
import { fromNullable } from 'fp-ts/lib/Option'
const firstName =
  fromNullable(getPotentiallyNullFullName())
    .map((name) => name.split(' ')[0])
    .getOrElse('No name')
```

The nice thing about using this `Option` type is that once you have wrapped up the value the `map` function will only be called if it is there. Once I started going down this route, I found that I had functions which returned `Option`s instead of the result. The above code turned into something like this:

```typescript
import { fromNullable } from 'fp-ts/lib/Option'

const getFirstName = (name: string | null) =>
  fromNullable(name)
    .map((name) => name.split(' ')[0])

const firstName =
  getFirstName(getPotentiallyNullFullName())
    .getOrElse('No name')
```

## Chaining

The next hurdle I found was dealing with nested nullable values. Either if I needed to go deep into an object or working with the result of another function.

If I was returning a new nullable value, the `mapNullable` function did the job.

```typescript
const firstName =
  fromNullable(getPotentiallyNullPerson())
    .mapNullable((person) => person.name)
    .map((name) => name.split(' ')[0])
    .getOrElse('No name')
```

Here the person or the name could be null (or undefined) and the `mapNullable` function will keep the flow going.

When I wanted to use one of my helper functions which returned an `Option` then `chain` merges the resulting `Option` in to the current one.

```typescript
const getFirstName = (name: string | null) =>
  fromNullable(name)
    .map((name) => name.split(' ')[0])

const firstName =
  fromNullable(getPotentiallyNullPerson())
    .chain((person) => getFirstName(person.name)
    .getOrElse('No name')
```

## Lots of optional values

I then needed to deal with an array of optional values and work on the results. If I
loaded a set of nullable full names and wanted to pull out the first names then I would go
about it using `alt` and `traverse`.

The `alt` method on `Option` allows you to provide a default value without "unboxing" it.
The difference between `alt` and `getOrElse` is the output. If you have an `Option<string>` then
`alt` still returns an `Option<string>` whereas `getOrElse` will return a `string` (the
value inside).

An `Option` type can be in one of two forms. A `Some` type to represent there is a value
and a `None` for when you have a `null | undefined`. The `some` function is a shorthand
to returning an `Option` with a value you know is not nullable.

```typescript
const getFirstNameWithDefault =
  (name: string | null | undefined) =>
    getFirstName(name)
      .alt(some('No name'))
```

`traverse` is a functional pattern which will convert an array of values to an `Option`
(or another boxed type) with an array of values inside. I have to give it a function which
 maps each value to an `Option`.

If I wanted this to be all or nothing then I would use my `getFirstName` function. If any
of the names in the array are nullable then it would run the "or else" path.

If I use `getFirstNameWithDefault` then it will always return a list of names with the
default used for the nullable values. This is because of the `.alt` added on the `Option`.


So here is the code put together.

```typescript
import { option } from 'fp-ts/lib/Option'
import { traverse } from 'fp-ts/lib/Array'

// Here are my names
const names = [
  'Esther Pierce',
  'Charis Star',
  null,
  'Tobias Big',
  undefined
]
// We can use `alt` with the `getFirstName`
// function to provide a default
const getFirstNameWithDefault =
  (name: string | null | undefined) =>
    getFirstName(name)
      .alt(some('No name'))

// `traverse` over each and provide a default
const result =
  traverse(option)(names, getFirstNameWithDefault)
    .getOrElse([])

// result is
['Esther', 'Charis', 'No name', 'Tobias', 'No name']
```

## What I've learnt is to

 - Use `Option` when you're not sure if a value is defined or to set it to some default
 - Return `Option`s from functions and then connect them together so that you only need to deal with the `null | undefined` case at the end of your logic
 - Dealing with a list of potentially empty values then becomes pretty simple

Next up, follow me to the next article where I'm looking at [Handling Error Cases](/blog/2018/06/09/fp-ts-02-handling-error-cases).

## View some code examples

You can take a look at some example code in the companion [exploring-fp-ts-series](https://github.com/davetayls/exploring-fp-ts-series/tree/master/src/01-nullable-values) Github repo

---

Cover Photo by [Jason Ortego](https://unsplash.com/@jasonortego) on Unsplash


We're using a lot more functional programming styles and pattens in our codebase. Part of getting better at using these patterns is knowing the tools available. Most of our codebase is TypeScript so we have chosen the fantastic [fp-ts](https://github.com/gcanti/fp-ts) library.

I'm still maturing my fp understanding as well as exploring how it all works with `fp-ts` so I'll gradually build a series around our journey. I'll start with three of the most common use-cases our team needs to get their head around: [handling nullable values](/blog/2018/05/20/fp-ts-01-working-with-nullable-values), errors and async functions. I will try and expand on this in time.

Alongside this we've been reading [Professor Frisby's Mostly Adequate Guide to Functional Programming](https://legacy.gitbook.com/book/mostly-adequate/mostly-adequate-guide/details) along with his [video series introducing composable functional javascript](https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript). It has been helping us navigate several new concepts and ways of thinking.


So let's make a start by heading over to [Working with Nullable Values](/blog/2018/05/20/fp-ts-01-working-with-nullable-values).

---

Cover Photo by [Tuce](https://unsplash.com/@dsamps) on Unsplash



Our fantastic team at Seccl are steaming ahead, we’re building products which will change what people expect from financial services and the companies who look after their finances.

Security is a top priority for us. Finding the right mechanism and balance of checks is really important to give our client’s the best experience while using any of our services.

What are the different ways we can keep access to personal information through our user interfaces secure whilst still giving our users a great customer experience?

Here, my fictional user Beth experiences a few concerns

## Regular quick access

Beth wants to log in each day, just checking progress. It takes less than a minute and as long as we are happy it’s definitely Beth logging in we want it to be as easy as possible.

Unfortunately, the common ways to ensure we are talking to Beth involve putting barriers in the way and adding precious time to her experience which needs to be quick.

Should a malicious person have access to this information they would gain personal information about Beth’s finances, however they would not be able to cause any damage to them directly. Additional authentication processes are put in place to prevent this from happening.

## Changing personal data

Beth should have the ability to amend and update her own personal information. We will provide Beth with her own personal Profile page and allow her to amend her data. The changes will require additional authentication and this will give Beth comfort that her data cannot be amended by anyone but her.

## Buying or Selling

There will be less frequent occasions when Beth wants to buy or sell some of her investments. Beth will be reassured that once she has made her choice there is a second level of authentication which we use to verify we are getting her consent.

Should a malicious person get access to buy or sell they could cause damage to Beth’s hard-earned savings.

## Withdrawal

Beth has decided to buy a new car and needs to withdraw some money from her savings. She will be asked to confirm her choice via a two-factor authentication method.

In our plans she will also confirm by re-entering her password. Our APIs would require a different token for this kind of operation.

## Protecting against things out of our control

There are many things out of our control which we are also considering.

 - Loss of a device where the client has logged in
 - Travel and use of public wifi
 - Malicious attempts to access login details
 - Prohibit the use of common Passwords
 - Provide information about Password security

We’re taking security and privacy seriously …

There’s still much to get through, but we are taking our client’s security and privacy seriously. We’re not afraid of the hard things, searching for great ways to stay safe and secure whilst still delivering a great experience.


Planning out a large application can be a very daunting prospect, especially when it comes to considering all the ways in which it will be used. At [Seccl](https://seccl.tech), we break down our user interfaces and applications so that we are not just considering the pages.

We look at the ways people will journey through our applications; we then break it down to the ways someone might interact with a part of each journey; finally we look further into the individual pieces that you see on the screen.

I always come back to something which has confirmed itself to me continuously over the years. Big things are always made up of lots of small interconnecting pieces. So to realise a big idea like we have at [Seccl](https://seccl.tech), we must start with these small things. We’ve got to ground ourselves in the real life of our products — our end customers are trying to achieve something! Whether it is saving for your future, making the most of new investment opportunities around globe or using your financial experience to provide these services for others. We are dedicated to taking away the technical complexity of providing financial services.

So what does this look like on the ground? Day-to-day we are thinking of common ways of interacting with our service. We then name these and define them as a pattern.

Examples of patterns might be:

* Entering an amount to invest
* Viewing the growth on an account

These patterns combine stand-alone pieces of the screen with interactions over time.

We think of common pieces within the screen as components. Examples of components might be a Button, Heading, Account Summary Box or an Investments Summary Table.

These components will range in their complexity. Some will be very simple while others will glue together many other components to form something new. This structure was named [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) by Brad Frost. He describes in great detail how we are bringing together an art and a science. We are developing “thoughtful design systems, rather than creating simple collections of pages”.

Approaching our products in this way enables us to place patterns around the site where they make most sense to the person using it. It is easier to keep fresh, easier to maintain and easier to ensure the best experience for those who use our services day-to-day.

As an industry, our approach to building these experiences is maturing. At [Seccl](https://seccl.tech), applying strong foundations to our code will mean that scale doesn't bring the same level of complexities I have often seen in my experience working with enterprises around the world.


Thanks to everyone who came to the South West React Meetup, I walked through my series on using React and Redux
with TypeScript. Here are the slides.


[Rocketmakers](http://www.rocketmakers.com/#/) recorded the talks and put them up on SoundCloud.



Take a look through the series which this talk was based on. Feedback is gratefully received.




It was great to give a swift tour of Progressive Web Apps for the lovely people at BathCamp last thursday. Here are the slides and an outline of what we went through.


## A few things have changed

### We now know ...

 1. Most people only install apps when they buy their phone
 2. Most people only use common apps and no other
 3. The web platform has now got APIs for previously native-only features


## Let's consider a few situations

### The train journey

 - Content doesn't know about network service
 - Speed
 - Intermittent
 - Offline

### I use this every day

Home screen visibility and easy access is important

 - Engagement
 - Visibility
 - Convenience

### Mobile Data is Expensive, Money and Time

Download on WiFi, experience offline

 - Other Countries, £££ Expensive Data
 - ⏰ 2G Connections still exist
 
## Secure

 - Progressive Web Apps can only be run and installed over a secure connection
 - Service workers work like a proxy and can completely change the response to any request
 - This makes sure that any service worker that gets installed hasn't been tampered with
 
## App Shell

 - The structural elements of the application
 - Doesn't include content
 
## Service Workers

 - Control how requests are routed. Sit between browser and server.
 - They don't rely on the website being open, you can define what events wake it up
 - Push messages can wake up a service worker
 - Limited to scope dictated by the folder the file is in
 - Can be added without affecting unsupported browsers

```javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then(function() {
      console.log('Service Worker Registered');
    });
}
```

```javascript
var cacheName = 'myApp-v1';
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    });
  );
});
```

```javascript
var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js'
];
```

```javascript
self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
```

## Manifest

 - Control how app appears to the user on the phone
 - Control how the app launches
 - Android will automatically detect a PWA and notify the user they can add it to their home screen

### Link to the manifest

```html
<link rel="manifest" href="/manifest.json" >
```

### An example manifest

```json
{
  "name": "Superhero",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "Wear a cape, change the world",
  "icons": [{
    "src": "images/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }]
}
```

## Best of the Web, and best of apps

 - Reliability: Integral code installed on the device
 - Speed: Fast Startup, customisable cacheing and offline
 - User Engagement: Traditionally native app features like push notifications and GPS
 - Integrated: Shows on the home screen and loading as a full-screen app
 
## Support

Take a look at these resources to help you get going.

### Udacity Progressive Web Apps Course

![udacity](https://davetayls.me/presentations/2017/progressive-web-apps/udacity.png)

[Udacity Web Apps Course](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811)
 
### npm `pw-precache` module
 
```bash
  npm i -g pw-precache
  ```



We're on the home-straight with this series. Today we'll have a brief look over the help you get when refactoring TypeScript code, then we'll finish off another week with using type aliases to build a rich domain for your application.


One of the big gains of using a strongly typed language comes when you want to refactor your code. Refactoring should be one of those things which developers do regularly as a codebase matures and grows. Working with TypeScript in the way in which I've been describing means that we have enough information for it to let you know all the places in your codebase will need to be updated as a result of a change. In fact if it is within the same codebase, it is often possible the tools can do it for you.

## The Language Service

Let's start with a little background. TypeScript ships with the Language Service, this is a long-running api which any code editor can use to enhance it's coding experience. It holds information on the current project based on settings in your `tsconfig.json` file. This means it understands all the connections between files and types within your code.

Your editor has the ability to use features like **statement completion**, **type signature information** on a particular function, class or variable.

Most useful to what we are looking at today, it also provides **details of errors** across your codebase and basic refactoring help for **renaming**.

## Notes on Editors and IDEs

TypeScript is very well supported across the current common editors and IDEs. An overview of the support can be found on the [TypeScript Editor Support Wiki](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support). Instead of going into detail on each editor, I wanted to highlight that your path to using TypeScript with what you already know and love is more than likely a non-issue.

I use and ❤️ WebStorm which includes the TypeScript services out of the box. All of the screenshots used in this article are taken from that. I have seen very similar tool windows in other editors.

## Breaking changes within your project

In the next section we'll take a look at what happens in a small project. I've created a simple project which includes a single reducer. This reducer is used to change the current player we're checking stats for within an imaginary game.

We've got the necessary components talked about in previous articles like:

```typescript
// Our Application State Tree
interface IAppState {
  playerTurn: number;
  stats: IStats;
  totalsMessage: string;
}

// Our positive action
type ChangePlayerAction = IAction<number>;

// Some Current Stats
interface IStats {
  roomA: number;
  roomB: number;
}

// Players for us to show stats for
interface IPlayer {
  name: string;
}
```

And we have a couple of simple reducer functions which:

1. Updates the `playerTurn`.
2. Updates the totals message to tell us an overview of the stats

```typescript
export function changePlayerReducer(
  state: IAppState,
  action: ChangePlayerAction
): IAppState {
  return {
    ...state,
    playerTurn: action.payload
  }
}

export function calculateTotalsReducer(
  state: IAppState,
  action: ChangePlayerAction
): IAppState {
  const { playerTurn, stats } = state;
  const player = getPlayer(playerTurn);
  return {
    ...state,
    totalsMessage: `Player ${player.name} has ${stats.roomA + stats.roomB} score across all rooms`
  };
}
```

We have the data for a couple of players in the memory. We'll need this to display the player's name.

```typescript
const PLAYERS: { [key:number]: IPlayer } = {
  1: { name: 'Fred' },
  2: { name: 'Bob' }
};
```

We now realise that it would be better to refactor this code. Instead of just holding the player number in the state, we need to hold an object with the player's id.

When we convert our playerTurn from a simple number to an object, we get an error when we call `getPlayer` with the `playerTurn` from the state.

![Refactor our playerTurn to include id](/content/2017/07-react-refactoring-player-turn.gif)

We also get an error for our reducer because our action is supplying a number.

![Refactor our playerTurn to include id](/content/2017/07-react-refactoring-player-turn-state.png)

Let's take a moment to break this error stack down into it's lines.

There's an error because the object type in quotes does not match `IAppState`.

```bash
index.ts(51,3): error TS2322: Type '{ playerTurn: number | undefined; stats: IStats; totalsMessage: string; }' is not assignable to type 'IAppState'.
```

The object does not match `IAppState` because of the `playerTurn` property.

```bash
  Types of property 'playerTurn' are incompatible.
```

The `playerTurn` property doesn't match because you're trying to set it to `number | undefined` when `IAppState` wants an `IPlayerTurnState`.

```bash
    Type 'number | undefined' is not assignable to type 'IPlayerTurnState'.
      Type 'undefined' is not assignable to type 'IPlayerTurnState'.
```

We fix the reducer ...

```typescript
export function changePlayerReducer(
  state: IAppState,
  action: ChangePlayerAction
): IAppState {
  return {
    ...state,
    playerTurn: { id: action.payload || 0 }
  }
}
```

And we fix the `getPlayer` call ...

![Refactor our playerTurn to include id](/content/2017/07-react-refactoring-player-turn-fix.gif)

And all is well with the world 🌅

## Packages and Dependencies

In a similar way, when you update node_modules and there are breaking changes defined within the dependency's types you will get errors like we saw with the reducer. This can be painful, especially if something has been changed at a lower level and you need to track down the actual property which needs to be fixed. But at least you have an idea of what to update in your code.

## TypeScript understands the connections

So to round off this article, we've looked at what happens when you make changes within your project. We've gone through an error example and broken down how to track down the needed fix. Being able to understand these errors will make working with TypeScript a lot less painful. You can take a look at the [simple project used in this article](https://github.com/davetayls/power-of-typescript-react) if you want to see a basic TypeScript project setup.

Next I'll be exploring how you can use types and aliases to build a [rich application domain](/blog/2019/01/25/the-power-of-typescript-for-react-6-rich-domain). A simple set of ideas which can make a big impact on understanding and sharing code within a team.


Hello again, I hope you're finding this series helpful. We're taking the time to look at different facets of working with React where TypeScript can make a real impact. At [Seccl](https://seccl.tech) we love using [TypeScript](https://www.typescriptlang.org/) and I've been using it for several years now. Adopting it has been one of the best decisions I have made.

We've covered a fair amount so far so feel free to catch up with each post below.


# Reducers and the State Tree

Where do we start with this one. I've been excited to get to this article because this is one of the areas where TypeScript kicks ass in many ways. We can use it not only to improve the stability of our code through type helpers but I find it is also useful when planning our application and then a form of self documentation as well.

To keep this useful and concise I'll go through an example of planning the application state tree, then we'll look at using [Mapped Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types) to use the same state interfaces when writing reducers.

## Entities

Even with a small amount of relational data, it it useful to hold it in a **normalised state** within the state tree. This is discussed in the [Redux docs](http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html) where a structure is suggested which we will build on top of. 

We'll call this area of our state tree `entities` as described in this documentation *and* because this is what normalised items are commonly referred to. Before we go any further, lets consider what the **very top level** of our state interface might look like.

```typescript
interface IAppState {
  authentication: IAuthenticationState;
  entities: IEntitiesState;
}
```

And now we can start planning our `IEntitiesState`. This will be a key-value object where the key is the *name* of the entity and the value is an object holding various pieces of information about each. 

Let's define the next level then.

```typescript
interface IEntitiesState {
  [entityName:string]: IEntityState;
  
  // You can define specific entities
  // if you know of them
  posts: IEntityState;
  comments: IEntityState;
  authors: IEntityState;
}
```

Nice one 🚀, we're starting to be able to picture how our data will be held within the app. We have planned to hold posts, comments and authors at the moment.

Now it's time to define exactly **how each entity will hold the data**. We'll make it inline with the docs but there is **one piece of information we don't have** at this point. See if you can work out what it is from the interface definition below.

```typescript
interface IEntityState<E> {
  byId: { [id: string]: E };
  all: string[];
}
```

You've probably worked it out 😎 – our interface cannot know the properties of the entity itself. We've added a generic `<E>` so that **it can be defined at the point it is known**. Let's update our `IEntitiesState` to cater for this.

```typescript
interface IEntitiesState {
  // If the entity is unknown then it's
  // properties could be anything!
  [entityName:string]: IEntityState<any>;
  
  // For our known entity we can define that the
  // properties will be those defined in the
  // `IPost` interface
  posts: IEntityState<IPost>;
  comments: IEntityState<IComment>;
  authors: IEntityState<IAuthor>;
}
```

Let's unpack what we are gaining here from all this. With these definitions TypeScript is able to give us a lot of help and stability. Let's think over the following code. 

```typescript
let posts = state.entities.posts;
```

 - TypeScript knows you will have the ability to drill down into the specific post properties. Properties like `title` (specified on `IPost`).
 - TypeScript knows that you can access the title of a specific post using `posts.byId[id].title`.
 - Our `IEntitiesState` will give us a form of documentation so that other developers can see that we might be dealing with entities for `posts`, `comments` and `authors`.
 - It doesn't stop there though, any reducers which should return data related to the posts entity are now part of this well defined contract. Should our properties for `IPost` change, TypeScript will tell us all the places which will need to be updated. 

## Mapping related Types

🙈 We've come to a problem! As we start to build our reducers we very quickly realise this could lead to a lot of duplication. We now have our lovely `IAppState` but we need to pass an object of **reducers** to `combineReducers`. These reducers **return the value** of each state rather than being the state itself.

Ok, that's a lot to wrap your head around so let's compare the two type signatures.

Here the state object itself holds the data.

```typescript
interface IAppState {
  authentication: IAuthenticationState;
  // ...
}
```

Whilst our object passed to combine reducers is a function which

 1. takes that same state (and an action)
 2. returns a state of the same shape
 
The type signature looks something like this.

```typescript
interface ICombineReducers {
  authentication: (state: IAuthenticationState, action: IAnyAction) => IAuthenticationState;
  // ...
}
```

Surely, we don't have to define a whole new interface for something which is so clearly linked. Err, no we don't, thankfully!

TypeScript has a powerful feature called [Mapped Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types). It will enable us to do this. Here's how you can use your existing `IAppState` interface with a few lines of code.

```typescript
type ReducersOn<T> = {
  // For each property P in the object T
  // convert the type to a function where
  // the first parameter takes state of the same type T[P]
  // and returns the same type T[P]
  [P in keyof T]: (state: T[P], action: IAnyAction) => T[P];
};

// And then we can declare our root state object
const rootState: ReducersOn<IAppState> = {
  authentication: authenticationReducer,
  // ...
}
```

This is such a powerful technique and can be used in a few places. Other common usages are already built into the TypeScript definitions. `Partial<T>` is a good example which makes all properties optional and would be used for things like `this.setState({ notAllProps: 'abc' })`.

## The Pieces of State Shape and Mapped Types
So today we're continuing to discover more about planning and defining our state as an interface. How this will lead to code which will enable you to scale and trust that you have not leaked breaking changes.

We have also seen that with [Mapped Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types), it doesn't necessarily mean we have to write lots and lots of type definitions for different circumstances.

Next Monday we'll explore [refactoring](/blog/2017/07/18/the-power-of-typescript-for-react-05-refactoring) and how TypeScript takes away a lot of the fear JavaScript can bring around improving code organisation.


Hello again, another monday another chance to explore the Power of TypeScript. We're taking a journey through ways TypeScript can help create robust and scalable apps. At [Seccl](https://seccl.tech) we love using [TypeScript](https://www.typescriptlang.org/) and I've been using it for several years now. Adopting it has been one of the best decisions I have made.


# Actions

Let's talk about actions, action creators and how reducers interact with them. Actions are a really helpful way to create separation between the different layers of an application, because they are not tightly coupled each layer can be built and tested in pieces. It does bring it's challenges however, whilst the code is loosely coupled, all areas of the code which interact with the action need to have the same expectation of it's structure.

At [Seccl](https://seccl.tech) all our actions follow the same basic structure and TypeScript allows us to define what that is by using an `interface`. Here is the `IGenericAction` interface that we use currently.

```typescript
// We have an action with customisable payload and meta
export interface IGenericAction<P, M> {

  // Our type is a const string
  type: string;
  
  // The payload can be anything but will be 
  // specified for a particular action within
  // the app
  payload?: P;
  
  // The meta property can be used to send
  // further information along with the action
  // often used by redux middleware
  meta?: M;
  
  // This is a flag to tell if the payload
  // is an error
  error?: boolean;
}
```

This generic action is usually needed in one of three flavours so we also define these to make the code more readable. We'll look at some concrete examples of each below but first let's quickly look at their interface definitions.

## A positive action

The first flavour is the most obvious. A regular action which holds some sort of data in it's payload.

```typescript
export interface IAction<P> extends IGenericAction<P, undefined> {}
```

Here we are creating a shorthand to defining an action where the payload is unknown and the meta is undefined. You will see the angled brackets a lot in TypeScript. In this format it is called [Generics](http://www.typescriptlang.org/docs/handbook/generics.html) where we are able to define what we know of an object and allow the rest to be defined elsewhere. Here the payload is generic and could be anything.

## An Error

The next is an error action. All our errors conform to the `IError` interface so in this case the payload will be an `IError` and the meta can be specified if needed.

```typescript
export interface IErrorAction<M> extends IGenericAction<IError, M> {}
```

All the errors in our app are passed around in a common structure. This allows us to let them flow through many layers of our application and be used for different purposes or be displayed in different ways depending on what is most appropriate.

## An unknown action

The last flavour is the any flavour, to be used when we don't know what we got! Often seen in slice reducers where all actions get passed through.

```typescript
export interface IAnyAction extends IGenericAction<any, any> {}
```

Sometimes, the action we are passed could be any of the above so we've defined this action as having `any` payload and `any` meta (`<any, any>`). We'll see these any actions used in the next section.

## In the wild

So now that we know the flavours, let's look at an example of our action interface in the wild. Our application requires the user to log in with their username and password. What we will create is an interface which describes the `payload` called `IAuthenticateCredentials` and an action creator which builds the action.

```typescript
export interface IAuthenticateCredentials {
  username: string;
  password: string;
}
```

Our action creator takes `username` and `password` parameters and builds an action with them in the payload. The resulting action type should be `IAction<IAuthenticateCredentials>`.
 
 This means that **the payload must match the definition of `IAuthenticateCredentials`**. If it doesn't TypeScript will let you know so that you can fix it.

We'll tighten this up a little further by using a `type` which can be shared between the action creator and the reducer.

```typescript
type AuthenticateCredentialsAction = IAction<IAuthenticateCredentials>;
```

And then here is what the action creator will look like.

```typescript
export const authenticateCredentials =
  (username: string, password: string): AuthenticateCredentialsAction => ({
    type: AUTHENTICATE_CREDENTIALS,
    payload: {
      username,
      password
    }
  });
```

So we have our action creator, we also need to corresponding reducer to do something with that action. Our top level `authenticateReducer` could be passed any type of action. Our expectation is that **all actions** will go through each top level reducer. Here we can use our `IAnyAction` as a shortcut for writing `IGenericAction<any, any>`.

You can see that we also have a case function which **is only used** when the **action matches** our `AUTHENTICATE_CREDENTIALS` constant. We know that the action type will be `AuthenticateCredentialsAction` at this point and so we can specify that as the `action` parameter type.

```typescript
export interface IAuthenticationState {
  authenticating: boolean;
}
export function authenticateReducer(state: IAuthenticationState, action: IAnyAction) {
  switch (action.type) {
    case AUTHENTICATE_CREDENTIALS: return credentials(state, action);
    default: return state;
  }
}
export function credentials(state: IAuthenticationState, action: AuthenticateCredentialsAction) {
  const {payload} = action;
  return {
    ...state,
    authenticating: payload.username
  };
}
```

Almost there! Let's just dig a little deeper to finish off today.

## Following the flow of types

Let's look closer at this line within `authenticateReducer`.

```typescript
case AUTHENTICATE_CREDENTIALS: return credentials(state, action);
```

TypeScript knows that `action` is an `IAnyAction` but it allows us to pass it to the `credentials` function which is expecting an `AuthenticateCredentialsAction`. Let's compare these two interfaces as pure objects and hopefully we'll see why.

1. The `IAnyAction` definition looks like this:

    ```typescript
    interface {
      type: string;
      payload: any;
      meta: any;
      error?: boolean;
    }
    ```

2. `AuthenticateCredentialsAction` is a `type` alias of `IAction<IAuthenticateCredentials>`.

3. `IAction<IAuthenticateCredentials>` definition looks like this:

    ```typescript
    interface {
      type: string;
      payload: IAuthenticateCredentials;
      meta: undefined;
      error?: boolean;
    }
    ```

Follow these steps and you'll see how these are compatible:

- the only differences are the `payload` and the `meta` properties.
- `any` type is compatible with *any* type
- so `any -> undefined` is compatible
- so `any -> IAuthenticateCredentials` is compatible

This is a simplified way of how TypeScript looks at these two definitions.

## We've looked through Generics and Type Aliases

We've covered quite a lot in this instalment. We've looked at Generics – a way to allow customisation on top of known properties – and Type Aliases – allowing us to define a type to be shared between areas of our code. Hopefully you are getting the picture that all these contracts between pieces of code will allow TypeScript to keep builds robust and scale well. Join me next Monday when I'll be [looking at reducers](/blog/2017/07/03/the-power-of-typescript-for-react-04-reducers).





Welcome back to our Power of TypeScript series. We're taking a journey through ways TypeScript can help create robust and scalable apps. At [Seccl](https://seccl.tech) we love using [TypeScript](https://www.typescriptlang.org/) and I've been using it for several years now. Adopting it has been one of the best decisions I have made.


# Connected or Stateful Components

We looked at how adding some simple TypeScript interfaces can help you build and refactor Pure React Components. Today we'll look at the common usage of Redux with React. We'll see how we can help keep the code robust and I'll highlight another nice side-effect of adding these types.

## Joining interface definitions for Props and Dispatch

So let's move on with our `Person` component and connect it to a Redux store. There's a small chage to the way we declare the component's props to make the separation clearer for the way `react-redux` separates regular props and dispatch functions.

We need to separate the props and dispatch definitions so that we can reference them separately elsewhere. Let's do that first and we can discuss how to use them afterwards.

```typescript
export interface IPersonProps {
  name: string;
  age: number;
  skills?: string[];
}

// Our event related functions are
// moved into this separate dispatch
// interface
export interface IPersonDispatch {
  onSelecedSkill?: (skill: string) => any;
}
```

Extending from `React.Component` still needs a single interface type for it's props. Fortunately TypeScript allows us to easily combine the two interfaces using the `&` symbol. This is called an [Intresection Type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) so let's use that to inform the component of it's props.

```typescript
export class Person
  extends React.Component<IPersonProps & IPersonDispatch, IPersonState> {
}
```

## Tightening generic functions

We now have the interfaces we need to use `connect` from `react-redux` . The `connect` function takes two parameters. The first is a **function which is passed the current state** – this **expects an object of props back** to assign to the underlying component. It's type signature looks like this.

```typescript
type propsFn = (state: IAppState) => object;`
```

The second parameter takes a function which is passed the `dispatch` function needed to dispatch actions to the reducers at a later date. It also expects an **object to be returned** which will be added to the components props. It's type signature looks like this.

```typescript
type dispatchFn = (dispatch: (action: Action) => any) => object;`
```

We're missing some needed tightening of the screws here because **it's not just any object** that is needed for this **particular component**. But we've now got the necessary parts to be able to let TypeScript help us out with this.

So let's connect our `Person` component and tighten those type signatures to not only expect an `object` but to expect an object that conforms to our interfaces.

```typescript
import {connect} from 'react-redux';
import {
  IPersonProps,
  IPersonDispatch,
  Person
} from './components/Person';

// type definition is:
// MapStateToProps<Props, OwnProps, AppState>
const mapStateToProps: MapStateToProps<IPersonProps, {}, IAppState> =
  (state) => ({,
    age: state.currentPerson.age,
    skills: state.currentPerson.skills
  })

// type definition is:
// MapStateToDispatch<Dispatch, OwnProps>
const mapDispatchToProps: MapDispatchToProps<IPersonDispatch, {}> =
  (dispatch) => ({
    onSelecedSkill: (skill) => {
      dispatch(selectedSkill(skill))
    }
  })

export const PersonWithState = connect(
  mapStateToProps,
  mapDispatchToProps
)(Person);
```

Now TypeScript will make sure that we have included all the correct props and dispatch functions. Now when you need to refactor or add new features this connect usage will need to be changed as well. TypeScript will give you a list of all the places within your code which need to be updated.

## Foundations of a rich domain are emerging

Another nice side-effect which is starting to emerge is that of a detailed domain. Because we are explicitly having to declare what the props, dispatch events and state objects look like – our code is becoming a lot easier to understand, follow and read. This practice is a form of documentation which will serve you and your team well as you scale your codebase or return to old features in a few months.


## Props, Dispatch and Intersection Types

So, a bit of a roundup of this week's dive into connected components. We've looked at separating interfaces for our component props and dispatch functions. This has enabled us to build these up separately as part of the redux `connect` functionality but stitch them back together using Intersection Types and the `&`.

We'll continue next Monday [looking at *Actions*](/blog/2017/06/26/the-power-of-typescript-for-react-03-actions). I hope this has been useful, I look forward to seeing you then!





Here we go! One of the first things you often build with React are the components. Let's take a look at how TypeScript can enable us to create components which describe their usage.


# Component Props and State Interfaces


## Pure or Presentational Components

Starting with [pure components](/blog/2016/06/21/pure-components), we can declare what a component's props and state should equal. By doing this we can also describe whether a prop is optional or not. TypeScript will help you when using these props to make sure you have catered for the `undefined` state.

Let's start with a person component. I've added comments through this file to explain what is happening.

```typescript
// Person.tsx

import React from 'react';

// We define what our components props are
// in an interface. This means that whenever
// We use this component in another file TypeScript
// will verify that all the required props are given.
export interface IPersonProps {
  
  // these first props are required
  name: string;
  age: number;
  
  // the question mark here tells
  // the compiler that the skills
  // array is optional
  skills?: string[];
  
  // We can define a function to be
  // called when an event happens
  // within the component.
  onSelectedSkill?: (skill: string) => any;
}

// We can also define what the component's state looks like.
// This will add type checking to code inside the component that
// uses `this.state`
export interface IPersonState {
  highlightedSkill: string;
}

// Here we can define our component which extends from React.Component.
// The Props and state types are specified here.
export class Person extends React.Component<IPersonProps, IPersonState> {
  render() {
    return (
      <section>
        <h2>My name is {this.props.name}</h2>
        <h3>I am {this.props.age} years old</h3>
        <h4>My Skills are:</h4>
        {this.getSkills()}
      </section>
    );
  }
  getSkills() {
    if (this.props.skills && this.props.skills.length) {
      const skills = this.props.skills
        .map((skill: string, i: number) => (<li key={i}>{skill}</li>));
      return <ul>{skills}</ul>;
    }
  }
}
```

## Covering all bases

I'd like to highlight an area where TypeScript will help you here that isn't immediately obvious.

Let's look at the `getSkills` logic. The first line does a check to see if we have any skills, and then also checks the length. We have specified that the `skills` prop is optional which means that it could be `undefined`. However it would be easy enough to forget this and miss out the check. The code would look like this,

```typescript
if (this.props.skills.length) {
  // ...
};
```

TypeScript will give the error: 

```
Object is possibly 'undefined'.
(property) IPersonProps.skills: string[] | undefined
```

## Stateless functions

Another pattern we see for writing pure components is to define them as a stateless function. If we are to write our components in this way we would use the same props interface but write the component using the following arrow function syntax.

```typescript
const Person = (props: IPersonProps) => (
  <section>
    <h2>My name is {this.props.name}</h2>
    <h3>I am {this.props.age} years old</h3>
  </section>
);
```

So hopefully you are getting a sense of how these contracts can help you build more robust and scalable JavaScript. In this first installment we've looked at building [pure components](/blog/2016/06/21/pure-components) and how defining an `interface` for our props can give TypeScript the power to tell you when you've not catered for all the edge cases.

Next week I'll be looking a [Connected (or Stateful) Components](/blog/2017/06/17/the-power-of-typescript-for-react-02-connected-components) and how we can use `interface`s to make sure we are mapping our app's state to what the component needs in its props. See you then.





Hey everyone, welcome to Power of TypeScript Series, thanks for being here and I hope you find it useful.
I'm working on keeping each article short enough to read in about 10 to 15 minutes but packed with enough 
information to help working with these two fantastic technologies. If you notice any mistakes or ways in which
these articles can be improved please let me know by [raising an issue](https://github.com/davetayls/davetayls.github.com).

At [Seccl](https://seccl.tech) we love using [TypeScript](https://www.typescriptlang.org/) to build JavaScript applications. I've been using
it for several years now. Adopting it has been one of the best decisions I have made and it pains me when
I see negative sentiment to what is a very powerful tool. I thought I would put together some explorations,
using it in different situations. 

Working with TypeScript can really enhance your productivity building applications in the React ecosystem.
The React community is very focussed on small components, this architectural pattern is great for scaling and
sharing code but it does mean we need to think about how these components fit together and keep the contracts
between them so that we can rely on the stability of the system as a whole. TypeScript can be one way to help with this.
    
NB. Before we go any further I want to note that the power I show in this article relies on TypeScript to have
all the strict options on.

```json
{
  "compilerOptions": {
    "strict": "true"
  }
}
```




Outside of reading over the concepts of functional programming I have never had the opportunity to really dig deep and get to know the theories, patterns and quirks. There has been a lot of talk in the JavaScript community about using functional programming ideas but I've decided to put JavaScript to the side for the moment because, whilst it can be used very easily to do functional programming, it isn't a functional programming language. It's also easy to fall back into habits when something is very familiar.

So I'm using F# to learn how to do functional programming properly.

So far I've found Scott Wlaschin's website [fsharpforfunandprofit.com](https://fsharpforfunandprofit.com/) an amazing resource for getting started. His [Thinking Functionally](https://fsharpforfunandprofit.com/series/thinking-functionally.html) series has helped me solidify many of the ideas in my mind.

I've also started to do some F# katas on codewars.com to test what is actually going in.

Here are a few things which have been really useful

 - [Professor Frisby's Mostly Adequate Guide to Functional Programming](https://drboolean.gitbooks.io/mostly-adequate-guide/)
 - [Functional Design Patterns Video](https://vimeo.com/113588389)
 - [Thinking Functionally Series](https://fsharpforfunandprofit.com/series/thinking-functionally.html)
 - [Simple F# Katas on Codewars](https://www.codewars.com/kata/search/fsharp?q=&r%5B%5D=-8)
 - [F# Online Editor](https://glot.io/new/fsharp)
 - [Monads and Gonads talk by Douglas Crockford](https://www.youtube.com/watch?v=b0EF0VTs9Dc)
 - [Functional Programming In JavaScript — With Practical Examples (Part 1)](https://medium.freecodecamp.com/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276)
 - [Functional Programming In JavaScript — With Practical Examples (Part 2)](https://medium.freecodecamp.com/functional-programming-in-js-with-practical-examples-part-2-429d2e8ccc9e)
 
 These are the areas I want to get clearer in my mind
 
  - Designing functional composition and partial application
  - Monads, I kind of get what they are but still it's a bit hazy how to make the most of them when designing code
  - Structuring an application
  - Usage as a module
  
  At some point I will be wanting to use these concepts with JavaScript and have found these resources:
  
   - [Professor Frisby Introduces Composable Functional JavaScript - Egghead Course](https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript)
   - [Fable - F# to JS Compiler](http://fable.io/)
   - Tom Harding's posts:
       - http://www.tomharding.me/2017/03/03/fantas-eel-and-specification/
       - http://www.tomharding.me/2017/03/08/fantas-eel-and-specification-2/
       - http://www.tomharding.me/2017/03/09/fantas-eel-and-specification-3/
       - http://www.tomharding.me/2017/04/09/fantas-eel-and-specification-3.5/
       - http://www.tomharding.me/2017/03/13/fantas-eel-and-specification-4/
       - http://www.tomharding.me/2017/03/21/fantas-eel-and-specification-5/
       - http://www.tomharding.me/2017/03/27/fantas-eel-and-specification-6/
       - http://www.tomharding.me/2017/04/03/fantas-eel-and-specification-7/
       - http://www.tomharding.me/2017/04/10/fantas-eel-and-specification-8/
       - http://www.tomharding.me/2017/04/17/fantas-eel-and-specification-9/
       - http://www.tomharding.me/2017/04/24/fantas-eel-and-specification-10/
       
       
  


What have I learnt from last year. 2016 held so much, it had many highs and lows from seeing the teams mature and grow at Arrow and the fun of the Jaguar app build to the long period of uncertainty during April as to where to go next after deciding to move on from GigStamp. 

## Don't give up

If there's been a theme through much of this year it has been "don't give up". Finding the strength inside to persevere when it's not clear what the right direction is has been hard. You've got to keep going, hold on to whatever is strong inside because you make it out in the end. 

GigStamp was one of my great passions over the last three years. I had invested several thousand pounds of time and money but most of all I believed in the potential. So it was hard for me when I realised that without resource you can't realise potential. I had given up most of my Christmas to getting some new features out and was in the process of setting up all the legal stuff around getting a company sorted when I just ran out of steam and felt that unless something drastic happened we wouldn't be able to get to where we wanted to go. After some hard discussions with Gordon I left the project in the most stable place I could and tried to look to new things.

## Mentoring at Arrow

In April, I was struggling through a period where my contacts were needing something very different to what I was offering. I didn't want to compromise and just take anything, I have seen the value that I can bring to teams. Still, I used the time to read about business and it helped me a lot to make sense of what was going on at GigStamp. 

I was given the prviliege at Arrow to continue working with their growing team and their growing technology needs. I found some struggles within the frontend team around technologies. I often find disagreements and hard line ideals make people just fight their corners without looking at the bigger picture. But we got these sorted and were all able to move forward onto bigger and better things.

The next few months were to be a really positive time of getting to know the new team members, working closely with Martin and continuing some of the groundwork I had put in place before I left in November. Working across such a large timezone difference was always going to be hard but I feel like we made the most of it gaining time in the mornings for me to take the kids to school and have coffee with Esther. I also moved office to home to make things easier with seeing kids and the evening routines. I started working from the Guild Hub in Bath which has been such a great decision. I have made some good friends from being in Bath and it has opened some doors as well.

{% include figure.html
   caption="Martin Georgiev and Dave Taylor on the plane"
   src="/content/2016-10-08 14.24.57.jpg"
   %}

My second trip to Denver came in October when Martin was able to join me. There was a good bunch of us out there and I had the opportunity to get to know Dan R, Kevin Wilde and Kush a lot better. Martin and I ran a few workshops and we were able to discuss several ideas.

<figure>
  <img src="/content/2016-10-09 14.48.59-1.jpg" />
  <figcaption>
    Out across the Rockies from Bear Peak Colorado
  </figcaption>
</figure>

<figure>
  <img src="/content/2016-12-16 18.04.15.jpg" />
  <figcaption>
    Dave Taylor, Daniel Arauz, Rosie Lee, Jon Hemstreet, Charlie
  </figcaption>
</figure>

My Final trip in December was a fun one. I went alone which gave me lots of time to do little things like read, be quiet and reflect. It was seriously cold for someone like me a Brit who was born in the Philippines who likes the weather to not have extremes and be relatively changeable. The day flying back a lot of planes were grounded because it was -20℃.

<figure>
  <img src="/content/2016-12-15 07.47.59.jpg" />
  <figcaption>
    Frozen Pond at the park near my hotel in Denver
  </figcaption>
</figure>

## Growing little people

<figure>
  <img src="/content/2016-05-14 14.13.20-2.jpg" />
  <figcaption>
    Picnics at the den
  </figcaption>
</figure>

I've loved watching Charis and Tobi continue to become more of who they are. Their characters are blooming and are both so much fun to have around. Having kids is the best thing to keep your head on the ground. We've discovered some great dens this year, on the fields and in the woods around us. I'm very proud of them both, their creativity, their fun, their unique interests and their ability to light up the room.

<figure>
  <img src="/content/2016-10-23 14.17.09.jpg" />
  <figcaption>
    Diggerland, they let Charis and Tobi loose on the diggers!
  </figcaption>
</figure>

## A year of the people

In many ways this year has been about the people. Whether that has been honouring friends even when we see differently, working alongside more junior developers and seeing them grow in confidence (and later take over), seeing my kids grow and the rewards of family time. I have spent a lot of quality time with Martin, Kate, Sasha, Gabbie and Florrie because of my overnight stays in London, we have become close friends. Finally after moving offices to The Guild Coworking Hub in Bath I have not only made new friends but have had the opportunity to help set up the [Bath JS](http://bathjs.club) group which has put me in touch with a new community of people living and working around Bath.

<figure>
  <img src="/content/2016-12-09 22.46.31.jpg" />
  <figcaption>
    Charis’ note which was found on my pillow the day before I left for Denver. It now lives in my book.
  </figcaption>
</figure>


A couple of weeks ago I embarked on my third trip to Denver to see our Arrow team over there. It’s always a very full but productive time visiting the guys there and this trip especially so.

As both Martin and I would be there at the same time we took the opportunity to organise a few team-wide sessions across the week.

<figure>
  <img alt="Dave Taylor in the Arrow office Denver" src="https://cdn-images-1.medium.com/max/1200/1*xpgErJD7NWZ7_zAj2g4_EA.jpeg" />
  <figcaption>Dave Taylor in the Arrow office Denver</figcaption>
</figure>

We set-up 3 presentations and 4 open Q&A sessions. This was a great opportunity for the developers to highlight or get answers to areas they weren’t sure about and for Martin and I to have some insight into where the pain points might be working on the Arrow platform.

The team in Denver is continuing to grow rapidly and it was nice to finally meet face-to-face with some of the new people who have started since May. We’ve got a wide range of technical abilities across the team and so along with the presentations and Q&A sessions I was able to spend some quality pair-programming time. We looked more deeply into the reasons we structure our codebase and we discussed various options for how to build the features in their current sprint.

In the last couple of months 2 new teams have been created to build sections of the website. So as the platform is growing we looked at how the codebase will scale alongside the scaling of development teams.

It’s great seeing the developers frontend skills continue to improve, I’m thinking a lot about how we encourage those new skills to be transferred between people. Giving confidence to the once junior developers to share and support new people as they join the team and get to understand the codebase.

It’s nice to be back home in the beautiful Bath (UK) now but I’m glad to have these times. It is showing me that despite all the technological improvements that bring co-located teams closer together, it’s still not a substitute for meeting face-to-face.



You will see the term "model" used a lot when looking at JavaScript applications that deal with data. But what is a model and how do they help us architect (or structure) code to be more predictable and scaleable.

A model is a set of properties that together hold the information we need to understand a single item. An example of one of these items might be a person or an address. We could model a person by holding details of the properties: *name*, *age* and *date of birth*. We could model an address by holding details of the properties: *street*, *city*, *country*, *postal code*. The properties we choose will be dependent on what information our application needs. 

Once we have a structure it helps us to refer to particular pieces of data. We could talk about a `Person` and know we are referring to an item with a name, age and a date of birth. In the same way they help us talk about the data that gets passed around our system.

## A look at two types of model

Modelling is used in various forms but when dealing with web applications you will tend to see it two specific areas: data models and view models.

### Data Models

Data Models here are properties for data stored in a database and tend to be retrieved from a [Web API](https://en.wikipedia.org/wiki/Application_programming_interface#Web_APIs). A `Person` or an `Address` model would be an entitity model.

Our `Person` model properties might be:

    name: string
    age: number
    avatarUrl: string
    dateOfBirth: Date
    
Our `Address` model properties might be:

    street: string
    city: string
    country: string
    postalCode: string
    
You can see that there could be other pieces of information attached to either of these models, but these will be all we need to satisfy the requirements of our application.

### View Models

View Models are properties which are specifically put together to provide the information in the correct format for the user interface. The properties in a View Model are often taken from various Data Models.

![Contact Card](https://docs.google.com/drawings/d/13cMk_ZHjdjNHxC1-2ZcAlCCzi_MtvC75PuqyFTumMQ4/pub?w=200&h=200)

We might show a person's details in a card which would need the following information:

    personName: string
    personAge: number
    personAvatarUrl: string
    addressCity: string
    addressCountry: string
    
You can see here that we can build this View Model by taking properties from a `Person` and an `Address` model. This is likely where they will come from in our code. We could also build this View Model by manually setting each property to a value. This gives us ways in which we can test our user interface without having data like a person or an address coming from elsewhere.
 
##  Encouraging separation

When models are used in this way we form a loose tie between what we need to show on screen and what we are holding in the database. This is important because of a number or reasons.

### It allows us to adapt to changing requirements

If we are building our View Model from data coming from a Web API we can adapt where the data comes from if the Web API needs to send us data in a different format. If the `country` property was renamed to `countryCode` then we would just need to update the code to set the `addressCountry` from `countryCode`. The contact card code wouldn't need to change. This becomes important if the contact card has been used in many places within our application based on different Data Models.

### It allows us to swap out new features based on the same underlying information

Alternatively if we wanted to test a new contact card for a few of our users to see if they found it more useful then you can base both contact cards on the same underlying View Model and the Data Models don't have to change.

### It allows us to test the pieces of our application without being dependent on the other parts being finished or even present

Having this separation allows us to create multiple contact cards with specific properties and ensure our application can handle these scenarios. Here are a few examples:

Would the user interface break if:

 - the name was longer than 50 characters?
 - the age was 1 digit instead of 2

We can create and visualise these scenarios without depending on the server to have them in a database.

##  Defining data requirements

Here are a few thoughts to consider when planning out these models:

 - Don't include properties just because you might use them in the future
 - Keep models as simple as possible
 - Try and keep View Models as flat as possible. What I mean by this is instead of having: `Person.address.city` and `Person.address.country` flatten it to separate properties on the View Model like `Person.addressCity` and `Person.addressCountry` this helps prevent complex data structures which can make using these models harder to picture in your head

## Conclusion

A model is a way of us defining the properties we need to sufficiently describe data within our applications.

Planning exactly what data is needed in the form of models is an important skill to master. Deciding effectively on what information is needed, in what format and where to place the separation will be important to maintaining a complex web application.

Models can be quite a broad concept and the more you build web applications the more you will see this practice of defining a set of properties to be used within parts of your application. Creating loosly coupled "gates" between areas of your application (like the data from a Web API and the data needed for a piece of the interface) is a powerful way of allowing web applications to scale and be adapted easily as new features are added or requirements change.

## References

 - <https://en.wikipedia.org/wiki/Problem_domain>
 - <https://blog.codinghorror.com/understanding-model-view-controller/>
 - <https://en.wikipedia.org/wiki/Data_modeling>
 - <https://en.wikipedia.org/wiki/Application_programming_interface#Web_API>



## What is Reactive Programming and Why is it helpful

One of the hardest problems to solve in programming is handling changes over time. This is because changes can come from multiple places, are unknown and will not always come in the same sequence. Even so, we still need to base logic on what is currently known and so we often find that managing these changes result in a very complex system.

We're going to look at how Reactive programming is one solution to this problem. We're going to focus on how it might be useful for user interfaces even though these concepts can–and are–applied to other situations. 

This idea brings together a few patterns (which we will look closer at) including streams and data flows. They allow the system to react to changes within the data instantly, update the user interface to reflect them and do so in a performant and less complex way.

The code can therefor:

1. Base programming logic on what is known at the given moment.
2. Have a clear sense of who can change what data
3. Be told when data has changed and it is safe and performant to update

We're going to base our examples on a common illustration of this which can be seen in modern spreadsheets where the value of a cell is the result of the values in other cells. 

For example:

Cell `A2`'s value might be `=B2 + C2`

Now whenever the value in `B2` or `C2` changes we will see the result automatically updated in `A2`.

## Streams

Following the spreadsheet example let's consider a scenario where someone needs to alter a simple calculation and send someone the result. 

The values in the cells begin with: `B2` = 1 and `C2` = 1.  The cell in `B2` is changed to 5 and after a few more seconds `C2` changes to 2. Finally the value in `A2` is copied and the spreadsheet is deleted because it is no longer needed.

We can picture the changes with a diagram like this. Here the `---` line shows time passing, the cell name signifies a change at that point in time and the `|` the point at which the spreadsheet is deleted. Notice that cell `A2` will change twice, once for each of the other cell changes.

```
-------B2--------|->
-------------C2--|->
-------A2----A2--|->
```

Imagine if the values were changed several times. The diagram could look more like this:

```
-------B2----------B2------|->
-----------C2--C2------C2--|->
-------A2--A2--A2--A2--A2--|->
```

Each of these lines are called streams. The streams here are an **ongoing sequence of changes or data over time**. Streams will send new data to anything listening for it whenever it has data to send. In this example the data that is sent signifies a change to the value of the cell and so a replacement of existing data, but when programming with streams new data can also be added to old data.

## Flows

Let's look again at our last example of the three streams and consider our original logic within cell `A2`.

```
-------B2----------B2------|->
-----------C2--C2------C2--|->
-------A2--A2--A2--A2--A2--|->
```

The value of `A2` was the result of adding the values of `B2` and `C2`. We can see that A2 changes whenever either of the other cells change but how? At the moment we haven't shown the connection between the changes within one stream and the resulting change to `A2`.

Whenever we get notified of new data from the `B2` stream, we need to do pass that data through a series of steps to reach `A2`'s new value. These steps are called a data flow.

Let's presume the value of 'C2' is always `5` and just look at the `B2` changes and picture this flow.

```
-------B2----------B2------|->
       |           |
    (data=1)    (data=5)
       |           |
    [1+5=5]     [5+5=10]
       |           |
-------A2----------A2------|->
```

The data flow above includes a couple of simple steps:

1. Add the new value of `B2` to the value of `C2`
2. Set the result as the value of `A2`

So a Data Flow **takes a piece of data as an input at the beginning, transforms it through a series of steps to produce and output a new result**.

## Data Manipulating and Customising through Data Flows

Data flows become more useful when you either need to change the input or only include part of it. With the next examples I want to briefly consider a couple things we can do with an Array of values.

In each example below data will flow through the steps only when it has changed. This means that we don't have to add more logic to check this.

### Changing each value in a list with `map`

Imagine the value of each cell was the number of packs of a product we had in stock and we wanted to know total number of products instead. We could multiply the number of packs (`value`) by our standard number of items in a pack.

    var itemsInAPack = 20;
    allCellsValues()
      .map((cell) => cell.value * itemsInAPack)
      .subscribe((cellTotalProductsList) => {
        // update the user interface from this list of totals
      });

### Only dealing with some items with `filter`

Following on from the `map` example, imagine you only want cells where there is no stock. For this we can use `filter`.

    allCellsValues()
      .filter((cell) => cell.value === 0)
      .subscribe((cellsWithNoStock) => {
        // We will now have a list of cells with no stock.
        // We can update the user interface to show which
        // products are out of stock.
      });

### Combining steps to create a flow

You would often combine these steps.

    var itemsInAPack = 20;
    var overStockedAmount = 20;
    allCellsValues()
      .filter((cell) => cell.value > overStockedAmount)
      .map((cell) => cell.value * itemsInAPack)
      .subscribe((overStockNumberOfProducts) => {
        // Update the user interface to show a list of product totals for
        // products with too much stock
      });

## Recap

We've shown here how the system reacts to changes within the data instantly, sending details of how it has changed so that we can update the user interface and do so in a performant and less complex way.

The user interface can display what is known at the given moment and doesn't have to worry about how data has changed. It'll be told when data has changed and it is safe and performant to update.

## JavaScript and RxJs

For programming with JavaScript (whether you are using it in the browser or with Node.js) the [RxJs](http://reactivex.io) library has a powerful set of utilities to enable you to implement Reactive Programming as part of your application architecture.

The JavaScript examples above follow this library's implementation of the design pattern and they have comprehensive documentation.

## Resources

If you want to read further here are some other resources.

 - <https://en.wikipedia.org/wiki/Reactive_programming>
 - <http://reactivex.io>
 - <https://xgrommx.github.io/rx-book>
 - <https://en.wikipedia.org/wiki/Stream_processing>
 - <https://en.wikipedia.org/wiki/Dataflow>





We have seen the huge benefits of pure functions for creating high quality and testable JavaScript. I’ve been applying the same understanding to UI components for a while now and am seeing these same benefits. It’s useful to take a look at what makes a “pure component” and how we can change the way we build websites to realise these benefits.

A “pure function” is a function that satisfies two conditions:

1.	The outcome is always the same given that the input is the same
2.	Evaluation of the result does not cause any external side effects

These two restrictions are simple but very powerful. Let’s consider how they might impact the building of frontend code.

 - They allow us to have concrete expectations given a particular set of values. This means we can test them more thoroughly
 - We can build these components in isolation which helps when scaling the team or outsourcing development
 - We can easily test our expectations in a theoretical world or state. This means that we can test the same component as it changes based on user input or choices
 - We can generate as many instances of a component, place it into a browser knowing that it won’t affect the functionality of anything else running at the same time
 - We can easily build or render components in parallel. This gives us new possibilities as apps scale. Workers are going to become more and more common as the complexity and the load on the browser increases. Pure Components allow parallelism from the start
 - Tools that test pixel changes across releases can be used to a greater degree of accuracy reducing visual regressions! This is one of the hardest things to get right for any large website

Given these benefits you are right to be asking where do we begin? For this we must form a close relationship between the UX, Design and Build stages of the project. I’ve been pleased to see that this kind of thinking is becoming more and more prevalent from the planning stages so you might find that this is easier than you think.


We need to start with this simple 5 step process:

## Focus on Small Pieces of UI

![](/content/2016-06-pure-01-spall-pieces-of-ui.jpg)

Clients like to visualize the journey so naturally full page mock-ups will be needed to make sure the overall experience is right. 

The mistake comes when you allow the client to stay in this mentality and not help them understand the big picture: building consistent elements that will be used across the site. When we take the client through the designs we should be showing them the pieces that make up the page they see in front of them. In turn this practice will help the UX and design team to be disciplined in the way they put the pages together.

Let’s take a person’s profile badge as a simple example. You might get a design laid out a little like this

![](/content/2016-06-pure-example-design.jpg)

 - This badge might appear on an article the person has written. 
 - It might also appear in a listing of people who have written articles.
 - It might appear as a “featured person” on a landing page

The badge doesn’t necessarily need to be the exact same size, it could fit to a container and be responsive.

## Decide and Document Small Variations or State Changes

![](/content/2016-06-pure-02-variations.jpg)

Once the site has been split into small pieces, you will be able to see where improvements can be made to consistency. You will start to see these benefits already. It will reduce the amount of duplication by finding similar pieces of UI and combining them into fewer variations. By having fewer variations your assets will be lighter and you will find that your website will perform better. 

At this stage you should decide on each component’s variations and document their behavior. We identified in the previous step that the site was displaying a person’s profile information. Now we are going to consider how it might vary slightly. We look across the requirements and then design and document these variations in it’s state:

![](/content/2016-06-pure-example-design-variations.jpg)

1. Person is offline (design might show greyed out dot and a status message might say “offline”)
2. Person is online (design might show a green dot and a status message might say “online”)
3. Person is an expert (design might show a star icon)
4. A compact version which could be used in a grid
5. Large variation where the person’s picture stands out more (this might be useful on landing pages)

The trick here is not to make a component have too many variations. The rule of thumb is that it should perform a single core role much like the Single Responsibility Principle describes for programming.

## Build the Component in Isolation

![](/content/2016-06-pure-03-develop-in-isolation.jpg)

We’re now ready to build. There is often a real struggle with Agile builds because they expect the work to be nicely sliced up into sprints. Often in the past I have been presented with a few pages to complete in a sprint. This way of working has hardly ever been successful because of all the dependencies that go into a full page. Building components in isolation fits into this process beautifully, it is much easier to predict and much easier to see progress. Also as we have seen with Test Driven Development, focusing on a simpler task and getting it right is more productive and less prone to errors.

Set out the structure of your project so that these components are separated. I recommend keeping related assets inside the same folder. A structure like this is usually a safe place to start from:

    /MyProject
        /components
            /ProfileBadge
                ProfileBadgeComponent.(hbs,jsx,cshtml,erb...)
            /HeroBanner
            /CookieBar

Next it’s a case of writing the code needed to build the internal elements of this component. This might be a case of html inside a templating system or JavaScript views/components in the browser. 

Here is a simple example using JSX to illustrate the idea.

    function ProfileBadge(props) {  
      let chatButton;
      if (props.isOnline) {  
        chatButton = (<a className="ProfileBadge__chatButton" href="{props.profileChatUrl}">{props.onlineButtonText}</a>);
      } else {
        chatButton = (<span className="ProfileBadge__chatButton">{props.offlineButtonText}</span>);
      }
      return (
        <section className="ProfileBadge {(props.isOnline ? 'ProfileBadge--isOnline': '')}">
          <div className="ProfileBadge__avatar">
            <img src="{props.avatarSrc}" />
          </div>
          <span class="ProfileBadge__statusIndicator"></span>
          <h1 className="ProfileBadge__profileName">{props.profileName}</h1>
          <p className="ProfileBadge__description">{props.description}</p>  
          <chatButton />
        </section>  
      );
    }

Take this template and based on the variations we documented in the previous step, send the data each needs and display them all on a single page. So to clarify, you'll have a single pure component template and 5 examples on this page.

At this point you will want to complete the styling and any dynamic interactions.

## Test Expectations For Each Variation or State Change

![](/content/2016-06-pure-04-test-expectations.jpg)

Here’s the part which often gets nicely forgotten because it’s hard testing UI.  Having pure components however, components which are predictable, components where you can have clear expectations and control make this process so much simpler. This is a big topic, but here is a suggestion to make a start.

We should now have a page which includes all the variations in different for each component. You can use these pages as part of your manual checks to make sure nothing is being broken. 

When you are confident enough you can then include them in visual test suites. Given a particular browser width these pages should not see any pixel change between releases (unless expected of course). I recommend looking at [PhantomCSS](https://github.com/Huddle/PhantomCSS) to help you with this process.

Whatever path you take, the point here is that because of the path we have taken we now have a set of pages which should conform to a pre-defined set of expectations.

## Include in Your Site

![](/content/2016-06-pure-05-integrate-into-site.jpg)

Your final job is to glue the components together with an underlying state. If this is a server-side component render the HTML inside containers (often grids) within the larger page structure. If you’re building a dynamic app then it’s more likely to be a case of appending a root element into a containing element within the DOM.

You will at times need to update the component as a result of changes in your data. Depending on the technology stack and how this component will be used this could mean rendering the appropriate HTML or if it is part of a dynamic app it’s usually more performant to manipulate the specific elements that change in the DOM, filling each component with the information it is allowed to hold and telling it which variation is currently needed.

Here is a simple example of how this might look:
    
    function getProductPage() {  
      return (
        <PageHeader />
        <div className="row">
          <div className="col-6">
            <ProfileBadge 
              isOnline={false}
              avatarSrc="/images/avatar.jpg"
              profileName="Bob"
              description="A great conversationalist"
              offlineButtonText="offline"
            />
          </div>
          <div className="col-6">
            <ProductInfo ...productInfoData />
          </div>
        </div>    
      );
    }

I’ve deliberately been slightly vague here because. It’s often easy to use current trends to demonstrate these concepts. These steps however have time and time again proven to work across numerous technology stacks, even if the exact methods have changed. 

---

In my time as a developer and a frontend architect I want to learn and solidify the techniques that don’t change, the ones that often underpin all of the frameworks that come and go. This has helped me embrace an ever changing landscape and not shy away from it due to exhaustion.

Take these 5 steps, look at how they fit into your team’s processes. You’ll be on your way to a more maintainable and testable codebase.


I’ve started as a technical lead and mentor to a team of developers co-located in the US and London. The company is a Fortune 500 company who are clearly investing in tech and have a hunger for innovation–so I’m really excited about being involved and where this team will go!

There are some clear challenges here. The biggest will be working with co-located teams whilst being based in Bath. On the face of it, this separation might seem counter-productive, however I am reserving judgement till a later date as I’m starting to see some big advantages as well. Let’s consider a couple now.

## Lack of Communication Skills are more Apparent
The two teams, separated by several thousand miles and a 7 hour timezone difference need to work effectively together. This will only happen if there is a good relationship and communication between them. This kind of communication is more than a set of regular meetings. It’s a relationship and a sense of teamwork which operates at a micro level. It’s a skill which takes discipline, and no small amount of courage.

I am finding myself in the position where a team member’s communication with me will be an indicative of how they communicate with other members in a different location. It’s an opportunity for me to encourage and nurture the discipline of working closely and to help reduce some of the fears that surround approaching people one has never met face-to-face or spoken to before.

## It’s easy to mistake regular interaction with valuable interaction

Let’s ask a hard question: How much progress do we really make when someone next to us can show us the way every time we arrive at the same problem?

It’s real progress when something takes 10 minutes (*2 people = 20minutes, not considering ramp-down-up-time) to complete where otherwise it would have consumed an hour. However if you don’t take this opportunity to learn–and you repeat this a few times because it is “easier”–we have not gained anything. In fact we’ll probably have a frustrated helper who can’t focus because of interruptions.

With this in mind I am actively looking at how people are progressing through screen-share sessions and code reviews. Having the separation gives me more control over how I allocate my time to these. It is allowing me to plan how both myself and the company can invest in skills–and ultimately productivity, quality and innovation.

---

Having said all this, there are some really hard things about being separated by space and time.

## Interactions
I often want the opportunity of witnessing how the team interacts with each other, in and out of the office. I try to visit London fairly regularly and will visit the team in the US for a week every so often. This helps me build up this awareness of people working together and being “team”–even so–it is still an area which is hard, and finding other ways is important and something I am focussing on.

## Out of Sight, Out of Mind
The other hard thing is it’s natural for “out of sight, out of mind” to happen. This tends to be with those I am not in regular contact with and have a number of their own priorities and responsibilities. This is a good illustration of how important it is to have the courage to build good relationships and be aware of how other things are progressing.

---

I have great expectations that this team will go from strength to strength. We already have some key members with the skill, drive and creativity to move the project forward. These are “good times” as one of my team-mates often says!



Build Stuff and have fun doing it … that pretty much sums up much of my childhood. Looking back, it is the times when I have been creating that have made me the most empowered and motivated. A life of simply being a consumer fills me with dread. It is what we add to this world which gives us our achievements and much fulfilment.

## Having fun is in your control

I was born and grew up in (and near) a simple fishing town called Tabaco on the south of the main island (Luzon) in the Philippines. We didn’t have a lot, what we did have was significantly more than most of the people around us but what we all had was imagination.

I remember watching the kids cartoons and wanting to act them out. One of my favourites was Thundercats, when we played I felt like I could do anything. I felt like a superhero.

We’d often visit the toy section in the town’s department store and I would see the plastic swords, I would pick them up and imagine I was Lion-o with the Sword of Omens. Returning home without a toy sword wouldn’t stop me. I’ve carved a few swords out of pieces of spare wood, tied pieces of bamboo together with string, used branches off a tree, it didn’t matter I’d find something, almost anything to be MY sword. I feel proud that our circumstances taught us to be inventive, we learned that the fun was in OUR control and that we could make it out of whatever was around us.

## It’s only complex when you don’t know how to break it up

![](https://cdn-images-1.medium.com/max/1600/1*EqfQ-1Fm89UUmZCDyxMGfg.jpeg)

When I was 8 years old, I joined my brother in Manilla. We lived with a number of other kids in a dorm while my parents were working back in Tabaco. One of my favourite memories from this period was watching the over-night security guard build these little huts. I was struck by how intricate and beautiful they were. I never thought I could build something like that. It wasn’t until I was shown that I realised how complicated things are made from simple small steps. When you understand the construction, it gives you the confidence to go further.

## Adventure is out THERE

![](https://cdn-images-1.medium.com/max/1600/1*MbP2UXvpVQbaBxYCroKtAA.jpeg)

For me being able to ride a bike was like the Black Pearl was to Jack Sparrow. We used to go out as a group of kids for hours on end exploring around where our dorm house was. It’s amazing what we found.

One day we met a goat farmer who used to herd his goats on the few small fields near the house. He was an older man who lived a very simple life but taught us a lot about his world and the lives of others we would otherwise struggle to understand.

Another time we found an old abandoned ice-cream van. The mere fact that we could peer in through the side window meant our imagination was sparked. We were determined to see what was inside. We tried the door but it was locked and not going to budge. The window was small and also shut tight. We weren’t defeated, we persevered and were rewarded when we found an open hatch underneath which led into the old, disused compartment inside. I’ve not forgotten the sense of achievement, it was amazing. It has meant I’m now a sucker for a challenge, I want to WIN and have fun in the process.

We used to venture out pretty far, I have kids myself and in many ways it scares me the freedom we were given. Nonetheless one of the most magical discoveries was to be found after a longer ride. A cluster of old disused water towers. They were rusting and had huge cracks running down the sides leading small gaps. I little effort and these were levered open to allow us to camp out for a while inside these giant cylinders. We often returned to play in and around these reminders of time long gone.

The riches of “out there” are enormous. The untapped connections, lessons and fun that is waiting will unlock your inner sense of discovery. And now I look for these opportunities every day, in the people I work with, in small conversations and wherever I might go.

---

It’s experiences like these which form the basis of my mission to see every frontend developer live inspired and creative. Every developer has a child’s passion inside of them, imagine the opportunities in front of us if we can unlock it.



[Read this article on medium](https://medium.com/@davetayls/terminator-genisys-movie-and-poster-creator-f6649f7dba4f#.s7r89969v)

Last year saw a new Terminator movie where we saw John Connor send Kyle Reese back to 1984 to protect his mother. [Play Nicely](http://playnicely.co.uk/project/terminate-your-selfie), an interactive marketing agency based in Bristol went on a worldwide tour with a Kinect and a booth giving passers by the ability to turn into a “personalised liquid metal T-1000”. They followed this tour and the release of the movie with a browser based experience which allowed anyone to take a selfie and see a personalised video of them turning into a T-800.

![terminator poster](https://cdn-images-1.medium.com/max/1200/1*bhM7Ok8oQhVDSdIsNIKIMg.jpeg)

Play Nicely and I have worked together in the past a few times on HTML5 apps and browser based experiences doing image manipulation and customisation so I was excited to be able to join them on the browser build.

The app took the user through a few steps:
1. They chose a poster or video
2. Take a selfie using a built in camera or select a photo from Facebook
3. Align their face to a template
S4. hare or download their personalised image

The app worked as a responsive HTML5 website across mobile devices, tablets and desktop computers.

Ok, I admit testing on this project was a little more fun than your usual CMS! It’s pretty funny to see what comes out when you map the 3D face vertices to the wrong part of the image. It’s exciting working with the Play Nicely team, the breadth of skill across the different technologies is very seldom found under one roof and they are passionate about squeezing every ounce of creativity out of each project which is refreshing.

![live in 25 countries, at it's peak 1000 videos per hour](https://cdn-images-1.medium.com/max/1600/1*ujZ7S2J255N2nM6Uy8g-TQ.jpeg)

We’ve been able to apply the same core code to a few projects now and I’m sure simple fan engagement campaigns like this will continue to be popular. If you’re interested in doing something similar take a look at their microsite about the technique and what you can do at [reface.io](http://reface.io/).



[Read this article on medium](https://medium.com/we-are-here/a-thought-on-collectives-gigging-groups-92f12bd4093b#.pwoienrbt)

I’m a big fan of creating stories from what we achieve and what we experience. Over the last few months I’ve been trying to come up with different ways we can build achievements in to GigStamp.

Once we’ve finished the current round of work on allowing you to take photos to put into your GigStamp we will be rolling out the first of our more community features called “Collectives”. Collectives will be a way of us music fans to rally together. Are your mates trying to get to all gigs on a tour for your favourite artist? Do you have a regular group who get out regularly?

I’m excited to see how we can make these stories and experiences you are building together even more memorable, within a scrapbook, maybe bringing a bit of healthy competitive fun to the group?

What if Collectives could compete against each other for distance travelled or the number of times one of you has seen an artist. It’s interesting to see how some fans already using status messages within the app to track the number of gigs they’ve been to. Maybe we can bake this in, and give you more.

![](https://cdn-images-1.medium.com/max/800/1*H50ZhM5swoCqYzH1nZ6teA.jpeg)

> GigStampers are counting … can we bake this in?

Our little community of GigStampers are quite something, I can’t believe the number of gigs you get to. I’m dreaming up new ways of celebrating it, and collecting the fun.



[Read this article on medium](https://medium.com/@davetayls/image-pooling-for-the-win-49d47c40e572#.kv3d11jsr)

I’ve recently been working with a luxury car brand on some HTML5 goodness and it’s reminded me to write about a very useful technique used a lot in game programming but often forgotten about when building creative websites and apps.

When you have a number of large images which need to be rapidly switched between or drawn you will very quickly see memory usage going through the roof. We were seeing around 900MiB of memory being eaten up in a second. The first optimisation is to make sure the images are of an appropriate size. In our case the images within the content were being displayed at 394px wide but were originally 1536px wide.

To do this work without eating up all the memory you’ll need create an image pool. This is a fixed pool of image instances which can be re-used.

## Resource throttling

This technique throttles the resource needs by preventing to many images being loaded in to the memory at one time

## Why not just throttle with no pool?

Pooling provides a more optimal usage of the resources. Circumventing the create/cleanup process of your image resources means that you are not hit by the garbage cleanup freeze.

## ---

What might this caching and pooling look like in code? Well, it’s pretty simple, here is an example (TypeScript).

    export class ImagePool {
        constructor(poolSize = 10) {
            this.available = [];
            this.queue = [];
            for (let i=0;i<poolSize;i+=1) {
                this.available.push(new Image());
            }
        }
    
        available:HTMLImageElement[];
        queue:((img:HTMLImageElement) => void)[];
    
        pop(callback:(img:HTMLImageElement) => void):void {
            this.queue.push(callback);
            this.next();
        }
    
        push(img:HTMLImageElement):void {
            if (!img) return;
            img.src = '';
            this.available.push(img);
            this.next();
        }
    
        remove():void {
            this.available = null;
            this.queue = null;
        }
    
        private next():void {
            if (this.available.length && this.queue.length) {
                let callback = this.queue.shift();
                callback(this.available.pop());
                this.next();
            }
        }
    }

To use this code it’s a simple case of requesting an image from the stack pop, then pushing it back once you’re finished with it.

    // We create a new instance
    const imagePool = new ImagePool();
    // Request an image
    imagePool.pop((img) => {
        // Load the image
        img.addEventListener('load', loaded);
        img.src = 'mysrc.jpg';
        function loaded():void {
            // do some work then release the image
            img.removeEventListener('load', loaded);
            imagePool.push(img);
        }
    });

After implementing this technique and managing the pool size we brought down the memory usage from ~900MiB to ~90MiB #WIN



I’ve found myself asking a question regularly during projects, from the very early days when I didn’t know what I wanted with my work till these days when I often mentor and lead other developers.

> “Do you trust me?”

It’s funny how it’s meaning can be so different depending on the situation we find ourselves in, and yet the impact of it’s answer consistently empowering … or productively destroying.

I remember a time while at Aqueduct when we were solidifying the Frontend team. For over a year I had been juggling the demands of managing an array of freelancers and I had finally got the opportunity to hire someone to join me and form a team. I trawled through reams of CVs and websites, I interviewed several candidates to find the person who would fit.

There were a few very capable candidates, but what surprised me was that I started looking less at qualifications the more met people. Then in came someone who had less experience and less exposure but had a lot of heart. I knew I could trust this guy, and that he might also trust me. Roll on a couple of years and any lack of experience was forgotten about. He was able to take on the team when I left and help it grow even further.

If we build an environment of trust, it is empowering. Without it most of our effort is spent convincing people rather than doing the work and making progress.

Trust can be messy. Actually the reality that I’ve found is that there’s always an amount of “mess” whether you embrace it or sweep it under the carpet. The difference is that you allow yourselves to see it. Embracing the existence of mistakes, the openness of failure also sends a strong message. It says that “we won’t sweep things under the carpet” what you see from the outside is a true reflection of what is going on and that is very refreshing.

So let’s build a team environment that empowers and makes progress. If you are a junior don’t undervalue your interpersonal qualities. Finally, do yourself a favour, allow yourself to see the mess and make the most of it.



[Read this article on medium](https://medium.com/@davetayls/boa-vantage-points-app-the-react-native-redux-challenge-6aa591c71d03)

I begun this week with a challenge. I’ve got a bit of time between contracts and have been wanting to get my teeth into React Native so I gave myself the task to build and release an app to the AppStore in 5 days.

I live in a beautiful town just outside Bath called Bradford on Avon. One of the things I love most about living here is that it holds so many secret vantage points and views across the town and surrounding country-side. I will often wander out and take a different route in to work in the morning and stumble upon something new.

So I decided to make a little app celebrating these gems around the town. I’ve called it BoA Vantage Point.

Two and a half days in and I’m impressed what I have achieved using React Native. Internally I’ve used Redux for the central store and have built on top of the core view components which come with the library.

## The list screen

This is a simple grid of the various points I’ve collated so far, I have a list of the places I need to get to and have been given suggestions of more that I haven’t yet discovered.

## The vantage point screen

This is a scrollable view showing the large image, some information about how you can go and see the town from this point and a small map thumbnail allowing you to go and view the exact location on the large map.

## The map screen

Each vantage point can be viewed on a large map, but you are also able to see them all on the map to get an idea of where they are around the town.

I’ve got two more days to get this polished off and submitted to the AppStore.



[Read this article on medium](https://medium.com/@davetayls/is-it-anonymous-65646d61304a)

ES6 or ES2015 … has been changing the way we write JavaScript as it slowly becomes more and more popular and easier to integrate in to our existing workflows. It has brought some much needed improvements to enable us to write better code and make use of long-standing conventions.

We’ve made strides in the past to encourage the naming of functions in our code so that should they appear in the stack trace of an error you are given help to understand it. I was therefor worried when I started seeing this convention used a lot:

    const mapStateToProps = (state) => {
      return {
        todos: getVisibleTodos(state.todos, state.visibilityFilter)
      }
    }

This has been lifted directly from the Redux docs (which are really thorough and well written). Coming from CoffeeScript, my understanding of this is that it would create the following anonymous JavaScript function.

    var mapStateToProps = function(state) {
      return {
        todos: getVisibleTodos(state.todos, state.visibilityFilter)
      }
    }

In this example should an error occur inside mapStateToProps you will get a very unhelpful stack trace because the JavaScript engine hasn’t got the information it needs to help you out.

However my fears were quashed when on close inspection of the output that Babel gives you, it has noticed that this variable has been assigned a function and names it accordingly.

    var mapStateToProps = function mapStateToProps(state) {
     return {
       todos: getVisibleTodos(state.todos, state.visibilityFilter)
     };
    };

Panic over, nice one guys.

Now lets look at what TypeScript gives you for the same piece of code:

    var mapStateToProps = function (state) {
     return {
       todos: getVisibleTodos(state.todos, state.visibilityFilter)
     };
    };

Nooooooooooo!! I ❤ you TypeScript but my heart is broken seeing this, it just makes sense to pass the name over to aid our debugging sanity.

This shows that it’s worth understanding the implications of the way we use the tools at our disposal. These tools give us amazing power but a strong understanding of what they generate is important.



This [article is also on medium](https://medium.com/@davetayls/i-first-got-started-building-with-react-over-a-year-ago-when-i-was-on-the-labs-team-at-sainsbury-s-fe2279276c4b)

I first got started building with React over a year ago when I was on the labs team at Sainsbury’s. I have to admit when React first came to my attention I dismissed it as another fad because I thought JSX was the point. Whilst I saw some benefits I couldn’t see a game changer in that alone. However a few months after, whilst reading more I realised that the actual game changer with React was the virtual DOM and the immutable approach.

Over my career, I’ve primarily focussed on enterprise CMS builds but at the time I was heavily involved in more creative tech, building on top of WebGL and Canvas, experimenting with games and Leap Motion. It was because of this experience that I could grasp the significance of maintaining a single state which was then used to “render the scene”. This is a game changer because there are so many applications to the underlying separation of:

1. Application State
2. using this to build a UI State which is so often a tree like structure
3. which then can be used to paint or pass that job on to the relevant framework to display

I was super excited about this but at the time it was hard to convince people to risk it with new and non-battle-tested technology.

Fast forward to now and I’ve spent the last couple of days pouring over the React conf 2016 videos, reading about how React is now being used to build applications from websites to smartphones to virtual reality. Because of the core design choices here I’m sure we are going to see much of the segmentation of roles and skills being brought together. We will see smaller tight-knit teams building high quality products. I’m excited to be getting the opportunity to venture back in to this world and see what we can build.



Last year I had the pleasure to work as a UI Lead for [The BIO Agency](http://www.thebioagency.com/) and
[Arrow Electronics](https://www.arrow.com). I joined the project a few months in to help the existing 8 Frontend developers
and fair few other team members across their disciplines with FE code architecture and in turn support Arrow's growing team in Denver, Colorado.

We had a great relationship with the team at Arrow. I had never heard of them before, so it was interesting to hear that
many of the electronic products we use day to day have probably had parts supplied by them.

![Arrow homepage](/content/2016-01-arrow-home.jpg)

Here's a little about Arrow from their [About Arrow](https://www.arrow.com/en/about-arrow/overview) page:

> Arrow Electronics is a global provider of products, services and solutions to industrial and commercial users of electronic components and enterprise computing solutions, with 2014 sales of $22.8 billion. Arrow serves as a supply channel partner for over 100,000 original equipment manufacturers, contract manufacturers and commercial customers through a global network of more than 460 locations in 56 countries.

The main CMS was built on Sitecore connecting with numerous third party apis, bringing them under one centralised source
of truth for the products and services Arrow offers.

![Arrow stats](https://cdn-images-1.medium.com/max/1600/1*w8maFuPUaCUxU3ofAZ6W_g.jpeg)

## Responsive, with support for ie8

The current site showed a large proportion of engineers still using ie8 but we didn't want that to restrict the site from
appealing to what is an obvious trend towards access from smaller devices.

![Arrow homepage](/content/2016-01-arrow-responsive.jpg)

## Hidden gems

There were some hidden creative gems. One of which I was lucky enough to be able to program myself in the form of some "tron lines" to take the users through a tour of the key
pieces of functionality.

![Arrow tour](/content/2016-01-arrow-tour.gif)

## A trip to Arrow in Denver

It was great to meet the team in Denver and work with them for a couple of weeks last year. Colorado, is a really
beautify place but it was touch being away from my family for so long.

![Colorado](/content/2016-01-colorado.jpg)


## UI Tech Stack

The Frontend tech stack is getting a little ridiculous these days, the struggle was to keep it small but invariably
there was a fair few pieces to it. However as a general overview our tech stack included:

### Node.js

We built most of the ui using a standalone Express server with customisable mocks for API calls. This meant the
Frontend developers didn't have the dependency on Sitecore which is restricted to Windows and is VERY slow for UI
development.

### All the Grunts

Grunt was used for all the Frontend automation

### Browserify, Babel, SCSS etc

We ended up with 2 bundles for browserify and SCSS. One for a custom UiKit which could be used in arrow.com but also in external sites, 
and another for the custom arrow.com code.

Go take a look for yourself on <https://www.arrow.com>.



BUGS ... I feel like I've said a dirty word. Don't talk about it, it'll only depress you. But they're not that big a deal, it's just a part of development, we should just get on, persevere and clean them out. We probably waste more energy worrying about them than we would dealing with them sooner rather than later.

In a larger team, this can be heightened when the bugs are as a result of someone else's code. We become even more resistant to digging in to resolve them. We even see them as blockers to us completing our own tasks. This is crazy, are we not a team, we've got the same end goal.

Pull Requests are great, we love Pair Programming these things make us feel warm and fuzzy inside because we are getting to know the codebase better, there's shared understanding of the code. But I bet you you'll learn more about the codebase by fixing someone else's bug.

We all make mistakes, we all miss things, but we're part of a team and teams that work together have the most fun and produce the best work.

Thank you QA, I don't have to stress about missing the things you find and can just get it sorted.



I have been doing a lot of refactoring recently on some common libraries used across multiple projects. One of the big things I’ve been finding is that these libraries should not create or initialise state. A good example of this is common configuration.

At first it seemed fine to create singleton objects within the library but as the library was used across more varied projects it become clear that these singleton objects needed to be extended to fit the needs of the application.

Also if you are working with [Node.js](https://davetayls.me/blog/category/nodejs/) then these singleton objects can quickly make managing nested dependencies complicated. This is especially apparent when multiple modules depend on the same library.

I now expose a `configure` method on the library which is used to pass in all the needed state from the application. It is proving to be a much cleaner approach.


It was great to hear that the new responsive [Econsultancy website](https://econsultancy.com/)
went live at the end of last year. I had a great time working with their
team who were all top technical and creative guys.

![responsive screenshots](/content/2015-01-econsultancy-responsive.jpg)

I particularly enjoyed their use of the [Github workflow](https://guides.github.com/introduction/flow/index.html)
 which was great at ironing out issues and sharing the code knowledge.

The ui tech stack for this project included Sass with Inuit, Angular and we built
 a lot of the initial mockups using the Assemble static site generator.



Over the last couple of days for some reason I decided to use earphones rather than
my usual headphones when I needed to concentrate and wanted to listen to some music.

It is such a small subtle change but I've been amazed at how it has released more
creativity and free thinking. Why is that?

I've been discussing this with [Stuart Harris](https://twitter.com/stuarte) who
works from my office as a health, wellness and performance coach. An interesting guy
to have these kinds of discussions with.

He suggested that our attention capability is activated by a change. The brain
picks up on things that are unexpected or different visually, auditory
or in the temperature around us. When we get used to the norm we end up paying
attention to what is different instead.

This simple change has probably brought out different aspects of the music I listen
to regularly. This on one level could be distracting because it could be too
stimulating. However it seems that instead it is just stimulating enough that it
has improved my "awakeness" and in turn given me focus.

Throughout my life I have naturally tended to make small changes regularly,
maybe this was instilled at an early age when I moved about so much, and between different
cultures when I lived in rural Philippines and then in Manilla and in an American
boarding school. So although I have put down more roots as I have grown older it
seems that subconsciously I have noticed benefits from small changes and naturally
I enjoy making them.

In my article [Five key principles for better web development](http://www.creativebloq.com/principles-web-development-8134177)
in .net online magazine I touched on the lifecycle of creativity. I was exploring
the idea that creations have to die for creativity to survive. It feels like
at an even more micro level life-cycles in behaviours are also really beneficial.

This article on [Why do small changes have a big impact](http://thesmallchangeproject.com/2014/04/why-do-small-changes-have-big-impact/)
has some reasons which resonate with me and they are:

 - You're used to doing so many things without any attention in the first place
 - You haven't taken the time to compare what *is* working verses what *isn't*
 - Because *everyting* in your life is connected!

Making these small changes, seeing a life-cycle in many areas of your life means
that you are analysing without really knowing it, you realise what things need
your attention when you stop doing them.

Everything is connected.



We use [CoffeeScript](http://coffeescript.org/) extensively in the [GigStamp](http://www.gigstamp.com) codebase at the moment. Initially we used watchers to compile the coffee-script in to JavaScript and then the app would run on the compiled code. But as the code has grown in to several node modules it became awkward to be watching and compiling the various separate parts so we started running it directly.

This however has brought up a few complexities as we are running transpiled code. Debugging the code has been one of those complexities.

To be able to do step by step debugging we need to do two things.

## Debugger process in node

First turn on the nodejs debugger through the `coffee` executable.

    $ coffee --nodejs --debug ./server/app.coffee
    debugger listening on port 5858

This will fire up the debugger process on port 5858.

## Node Inspector

Next you can use [node-inspector](https://github.com/node-inspector/node-inspector) to connect to that debugger port to allow you to step through the **transpiled JavaScript** code.

If you're already familiar with general node.js practice this is a pretty simple process.

    $ npm install -g node-inspector

Then we can use the `node-debug` command to fire up the dev tools. Because we have already started the CoffeeScript process previously we can just run it without any arguments.

    $ node-debug

## Source Maps

The final piece of the puzzle is a nice to have. The ability to use source maps so that you can debug the original. This current setup doesn't give you that even if you pass the `--map` arg to the `coffee` command so that's something I'd be interested if anyone could find out.

## With grunt-nodemon

We use this setup within our [Grunt](http://gruntjs.com/) workflow using the [grunt-nodemon](https://github.com/ChrisWren/grunt-nodemon) plugin.

It's not immediately obvious how to send this config through but here is what worked in the end.

    nodemon:
      dev:
        script: './coffee/app.coffee'
        options:
          nodeArgs: ['--nodejs', '--debug']
          ignore: [
            'node_modules/**'
            'public/**'
          ]
          ext: 'js,coffee'
          watch: ['./coffee']



As we are building modular components there will inevitably come a time when
relationships between components will become needed. Specifically changing the
style of a child component when it is inside a parent component.

Traditionally we would be forced to write CSS code similar to this:

    .Team {
      border: 1px solid #ccc;
    }

    .Person {
      background: #ccc;
      margin: 10px;
    }

    .Team .Person {
      margin: 5px;
    }

Here we are reducing margin on the `Person` component when it is inside the `Team`
component.

The problem comes as this scales and you start building hard relationships
between components where a component's style is actually dictated inside another
component's CSS files.

To solve this you can maintain each state of the component as
modifiers and then use extending within a pre-processor. Let's do this for the
simple example above.

First let's create a new `Person` state called `Person--small`.

    .Person {
      background: #ccc;
      margin: 10px;
    }

    .Person--small {
      margin: 5px;
    }

Then we need to trigger this modifier when it is inside the `Team` component.
This example is using the [reworkcss](http://github.com/reworkcss) framework.

    .Team .Person {
      extend: .Person--small;
    }

Now we have loosely coupled the two components and have kept control of each
state the `Person` component can be in within the `Person` CSS itself.



We have just got back from an amazing weekend at [Camden Crawl](http://thecamdencrawl.com/), an amazing urban festival with lots of great up-and-coming new artists gigging in pubs and clubs around Camden, London. Urban festivals are where I think [GigStamp](http://gigstamp.com) really shines, we created some bespoke artwork for festival's gigs which came with a great ticket-like share post to user's twitter and facebook streams.

![CC14 GigGtamp share](/content/2014-06-cc14-share.jpg)

With awareness and activity starting to build inside the app I’ve started the process of building stats and charts in to GigStamp. I'm excited as we start to imagine what the user, artist and venue pages might have on them and also what tools we can give people to be able to promote themselves and see how well they are doing.

Here is a quick brain dump of the sort of information I would like to get out of the data at the moment:

 - GigStamps count by day
 - Venue GigStamps count by day
 - Artist GigStamps count by day

It would then be nice to start making this personal and be able to slice the data based on a user to give me:

 - A user’s GigStamps count by day
 - A user’s tally of GigStamps at all the different Venues they have been at
 - A user’s count of GigStamps for all the different Artists they have seen

To be able to get this data out of GigStamp’s [MongoDB](http://mongodb.org) database I will need to use it’s [aggregation framework](http://docs.mongodb.org/manual/aggregation/).

## The first goal - GigStamps count by day

The goal is to produce an api end point which will give the following structure.

    {
      date_from: "2014-06-01T00:00:00.000Z",
      date_to: "2014-06-23T23:59:59.999Z",	
      results: [
        {
          day: "2014-06-21",
          total: 1234
        },
        {
          day: "2014-06-20",
          total: 1234
        },
        ...
      ]
    }


### Dates to days

The first task is to convert a `GigStamp`’s `eventDate` which includes the start time of the gig in to a day so that it can be grouped. I stumbled across a [StackOverflow answer](http://stackoverflow.com/a/15940554/138733) and an [article of tricks](http://www.kamsky.org/stupid-tricks-with-mongodb/stupid-date-tricks-with-aggregation-framework) which have helped me.

We would need to create a match so that we restrict the results to a particular time frame. First I check to see if any dates have been passed in via the query string and then create a `Date` object for `dateFrom` and `dateTo`.

    {
      $match: {
        eventDate: {
          $gt: dateFrom,
          $lt: dateTo
        }
      }
    }

Then we need extract the `$dayOfMonth`, `$month` and `$year`

    { 
      $project: {
        year: {
          $year: "$eventDate"
        }, 
        month: {
          $month: "$eventDate" 
        }, 
        day: {
          $dayOfMonth: "$eventDate"
        }
      } 
    }


Then group the result, keeping a count of the matches.

    {
      $group: {
        _id: {
          year: "$year",
          month: "$month", 
          day: "$day"
        },
        count: { $sum: 1 } 
      } 
    }

And finally sort it so that we see the most recent first. What we are saying here is sort by `year` descending (`-1`, ie: 2014, 2013, 2012), then sort by `month` then finally by `day`. 

    {
      $sort: {
        "_id.year": -1,
        "_id.month": -1,
        "_id.day": -1
      }
    }
    
This will return a dataset that looks close to the goal.

    [{
      _id: {
        year: 2014,
        month: 6,
        day: 21 
      },
      count: 1234
    }]

So I just do a map of the data in JavaScript to concatenate the `Number` year, month and day fields.

    results.map(function(result){
      return {
        day: [
          result._id.year,
          result._id.month,
          result._id.day
        ].join('-'),
        count: result.count
      };
    });
    
## Next

So now that we have the basic concept of working with the `GigStamp` data it'll be pretty simple to apply the same thinking to produce the other endpoints.

## If you're an artist, what would you like to see?

Are you an artist or managing one? I'd love to get your thoughts on what sort of information you would find interesting.


There is a lot of talk about components in the UI space. I’m currently working with [Econsultancy](http://econsultancy) on building a library of components for use in their website. Just to be clear, I’m not talking about the [WebComponents](http://webcomponents.org/) spec here.

## A bit of history
I first started experimenting with the concept of components when I built the [Lloyd’s of London](http://lloyds.com) website back in 2009. I designed the concept of `modules`, `components` and `layouts` which could specify nested __elements__ and could have slight variations which I called types.

The tough part to building components on the web has always been a way of managing modular blocks of code and their dependencies. In recent years a few advancements have become widely used to make this much easier.

### AMD
The Asynchronous Module Definition spearheaded by [Require.js](http://requirejs.org/) has enabled us to build JavaScript modules and focus on their specific functionality and their dependencies.

### BEM
Then the [BEM](http://bem.info/method/definitions/) definition became widely popular defining blocks, elements and modifiers and allowing a syntax which was commonly known to help keep CSS modular.

## The Last Stronghold
With these becoming standard ways of working with JavaScript and CSS the last stronghold which proves to be a very hard one to crack is working with markup, or more precisely templating. Don’t get me wrong we have some amazing options for templating frameworks in different languages, it’s pulling it all together on the server, and in the browser that’s the problem. I’ve worked with Java, .Net and Ruby teams in the past and we always hit this same problem, our chosen templating engines don’t work both on the server and in JavaScript. After some research actually our options for cross platform templates are extremely limited.

### But why is this important?
There are a couple of key reasons I’m battling with this. 

Firstly I don’t want to see websites becoming JavaScript apps but increasingly the expectation is for them to feel dynamic. With this in mind we often need to write markup templates while rendering components on the server and then rendering them dynamically on the client. This isn’t particularly DRY and is so easily prone to templates getting out of sync. I can see it so clearly when the front-end developers work on a separate component library and the server side devs integrate markup for use in the initial rendering of pages.

Secondly, to be able to properly separate concerns of a component (being HTML/CSS/JS) and it’s inclusion in to a website we need to be able to build them in isolation. This often means that the front-end developers are using [Node.js](http://nodejs.org) to maintain a catalog of these components. 

I’m coming to the conclusion that ideally these catalog sites should just use the same server side language as the main website. It feels like a defeat to my ideal. I’m a firm believer that if you want the best out of someone, you allow them to use the tools which they are comfortable with. Then the tools don’t get in the way. However there seems to be so many hoops to jump through, created when different server technologies are in play. This doesn’t change the fact that we still need to be able to maintain templates that work for dynamic components in the browser … aghhh this feels like a total mess and I’ve almost resigned myself to maintaining 2 markup templates for each component. At least we can keep them in the same place and be maintained by the front-end developer not passed on to someone who isn’t specialised.

## Full Stack
I’ve been working with a few projects where the whole stack is based around JavaScript with [Node.js](http://nodejs.org) on the server and HTML5 in the browser. It’s exciting seeing the interest in building websites this way. Having that continuity does remove many of the barriers I’ve battled with over the last 10 years and there are some really great frameworks arising in to this space (often built on top of [Express.js](http://expressjs.com/)) like [Kracken](http://krakenjs.com/), [Sails](http://sailsjs.org), [Meteor](https://www.meteor.com/). It doesn’t mean you can suddenly put a UI dev in a Node.js cap and tell him to get on with it because it’s still a very different skill but there are a lot more transferrable skills when your team works like this and thinking with JavaScript comes naturally.

## At least there’s a plan
Ok, so this leave’s me kind’a satisfied, that even if I can’t always have the ideal I would like to see these important things:

 - The front-end developers are the ones who do the markup, everywhere
 - We work with a set of components which can have moving parts (i.e. modifiers)
 - We work through the restrictions for a long-term gain of good maintainability and valuable documentation


It was exciting to find out last week that the [National Theatre App](https://itunes.apple.com/gb/app/50-years-national-theatre/id720763482?mt=8) I built with [Play Nicely](http://playnicely.com) has won the [Educational Multimedia Award](http://bufvc.ac.uk/events/learningonscreen/winners-2014) from the [British Universities Film & Video Council](http://bufvc.ac.uk/).

![ipad](https://davetayls.me/content/2014-02-theyear-nt.jpg)

Here are a couple of screenshots from the app which was built with HTML5, Backbone.js and a Cordova native wrapper.



I've been using Promises and Deferreds pretty extensively for a while now and I thought I would put down some of my thoughts on when they work better than events and when they don't.

## Promises are good for a seemingly sequential set of tasks

If the task I am coding has an obvious beginning and end with a set of tasks to complete along the way then the code looks so much cleaner with promises.

Here is an example of an event based approach

    var user = new User();
    var comments = new CommentCollection();
    user.on('sync', function(){
        comments.userId = user.id;
        comments.fetch()
    });
    comments.on('sync', function(){
        // => do something
    });
    function errorHappened(){
        console.log('Could not get comments');
    }
    user.on('error', errorHappened);
    comments.on('error', errorHappened);
    user.fetch()

For something that is quite sequential the code is very confusing because it jumps around a lot.

Your other option of course is callbacks.

    var user = new User();
    var comments = new CommentCollection();
    function errorHappened(){
      console.log('Could not get comments');
    }
    user.fetch({
      error: errorHappened,
      success: function(){
        comments.userId = user.id;
        comments.fetch({
          error: errorHappened,
          success: function(){
            // => do something
          }
        });
      }
    });
    
Whilst this looks a bit more sequential, it can very quickly lead you into callback hell with nesting several levels deep.

Using promises in this example makes the code more readable and more concise.

    var user = new User();
    var comments = new CommentCollection();
    user.fetch()
    .then(function(){
      comments.userId = user.id;
      return comments.fetch()
    })
    .then(function(){
      // => do something
    })
    .fail(function(){
      console.log('Could not get comments');
    })
    .done();
    
Now if anything in the chain fails we can catch the error in a single place. **If you bind your functions to each instance** this can look really concise.

    var user = new User();
    var comments = new CommentCollection();
    user.fetch()
    .then(function(){
      comments.userId = user.id;
      return comments.fetch()
    })
    .then(comments.sortByDate)
    .then(comments.findLinks)
    .then(function(){
      // => do something
    })
    .fail(function(){
      console.log('Could not get comments');
    })
    .done();
    

## Events are good when there are multiple outcomes

When there could be several multiple outcomes it can get quite messy with promises. Branching off inside `.then` statements depending on the result of the last async operation can start to become as nested as the callbacks before.

Also, if an event can happen even after the initial sequence has completed you can't go back.

    var comment = new Comment();
    comment.like()
    .then(function(result){
        if (result === 'not allowed'){
          // => show not allowed
          return false
        } else if (result === 'checking'){
          // => show we need to check
          return waitForChecking()
        } else if (result === 'liked'){
          // => you liked it
          return true
        }
    })
    .then(function(isLiked){
      if (isLiked){
        // => definitely liked
      } else {
        // => definitely not liked
      }
    })
    .done();

As you can see from the code above if the result comes back that further checks have to be made before we know if a comment is liked then we are stuck in the promise sequence.

Alternatively it might be cleaner with events.

    var comment = new Comment();
    comment.on('not_allowed', function(){
      // => you're not allowed
    });
    comment.on('checking', function(){
      // => we're still checking
    });
    comment.on('liked', function(){
      // => definitely liked
    });
    comment.like()
    
The benefit of this is that if something should happen later to cause the outcome to change. The event would trigger and we already have the code in place to alter ui or do something about it.

## They don't have to be used exclusively

It's great when you can use them together. In fact I've found they live quite nicely side-by-side. A function can run an async task and return a promise.

The async task could fire events with progress or various results and the promise could resolve when the whole task is completed.


OK, so new year as kinda gone but so much happened last year I guess it has spilled over in to 2014.

## The Big Move

The start of the was dominated by my family's preparations for [moving](/blog/2013/05/27/out-of-the-big-smoke) over to [Bradford-on-Avon](http://en.wikipedia.org/wiki/Bradford_on_Avon) in Wiltshire.

This picture was taken one morning on my regular walk down to my office in the town centre. Slightly nicer commute than Streatham to London commuter train :o)

![tobi](/content/2014-02-theyear-boa.jpg)

We were very excited about the move with only one main worry in my mind and that was that it would be a bit sleepy for us. On the contrary it seems it's quite a happening place. I've met some really great people and been involved in some fun creative and techy meet-ups.

It is quite a drastic change to London but it's ok, we haven't changed too much ... Tobi's love of chocolate cake is still going strong

![tobi](/content/2014-02-theyear-tobi.jpg)

## Projects

I've been involved in some really great projects in 2013 for the likes of [Premier Inn](http://www.premierinn.com/), [Colgate](http://www.colgate.co.uk), [National Theatre](http://www.nationaltheatre.org.uk/), [Jaguar](http://www.jaguar.com) and [Land Rover](http://www.landrover.com).

### HTML5 native apps

The National Theatre project was especially interesting, working with the amazing team at [Play Nicely](http://playnicely.co.uk/content/national-theatre-timeline-app) we built this media heavy iPad app using [Cordova](http://cordova.io) which is a cross platform HTML5 native app wrapper. 

![NT50@50](/content/2014-02-theyear-nt.jpg)

### Writing
I was also able to finish my [article for .net magazine's](/blog/2013/08/13/five-key-principles-netmagazine/) opinion column in August.

### 3D in the browser

![united studios live](/content/2013-08-unitedlivespray.png)

I enjoyed working with [United Studios Live](http://unitedstudioslive.com) and later [Aqueduct](http://aqueduct.co.uk) on their music visualiser projects. I built two very different [3D audio visualisers](/blog/2013/08/15/flight-of-the-audio-visualator-bristol-skillswap/) utilising [Three.js](http://threejs.org/) and the new WebGL/HTML5 Audio browser capabilities.

### HTML5 MV* and Node.js

I have spent a so much time in 2013 working with client-side MV* frameworks (especially [Backbone.js](http://backbonejs.org)) and [Node.js](http://nodejs.org) on the server. Being able to use these technologies together to build API's, websites and native apps has been very exciting and I really want to do more of it in 2014.

## Giving back

This year has seen a little bit of a turning of the tides. I have been so blessed in the past with people mentoring me and teaching me how to progress in my career. Now I've begun reinvesting. I had the pleasure of having [Robin Stanley](http://boffnoff.me) with [me for a week's work experience](/blog/2013/12/20/always-a-student/) in October and have had the privilege of being able to run a [JavaScript workshop](/blog/2013/09/16/southvillejs-leap-motion/) and three meetup talks at [AKQA](/blog/2013/03/25/adventures-in-html5-games-akqa-anoraks), [Bristol Skillswap](/blog/2013/08/15/flight-of-the-audio-visualator-bristol-skillswap) and [Bristech](/blog/2014/01/10/html5-bomber-game-bristech).

## GigStamp

October saw the start of a new side project of mine [GigStamp](/blog/2014/02/18/gigstamp-the-checkin-app-for-music-fans/) which is the check-in app for music fans. It's a little different to the other check-in apps out there because you get a something a little more personal back in the form of personally selected artwork stamping your checkin.

Here are some screen shots to give you a feel.

![gigstamp screens](/content/2014-02-gigstamp-screens.png)

And here's an example of what a stamp could look like:

![gigstamp example stamp](/content/2014-02-gigstamp-stamp.png)

You can sign up to our [mailing list](http://www.gigstamp.com) to get news on it's release or follow [@gigstamp](http://twitter.com/gigstamp) on twitter or [Facebook](https://www.facebook.com/pages/Gig-Stamp/199840576863136).

## What I'm looking for in 2014

It's been a great start to the year already with loads happening. I'm keen to invest more in the new clients I picked up last year. Working remotely has been a change and I've really valued meeting new people who are passionate about producing great work. I'm also excited about doing more mentoring, training and am hoping GigStamp will continue to be a great source of creative freedom to play with.





I feel like I've been in my little hole for months now ... oh yeah it has been, since October! I've been beavering away in my evenings building a simple idea: 

> I'm a music fan, how can I collect and remember the gigs I've been to?

Together with [Gordon Duncan](http://www.apb-pr.co.uk/) who came up with the original idea I have been building [GigStamp](http://gigstamp.com).

## The check-in app for music fans

The app is really very simple on the surface. It finds you at a gig, you choose some stamp artwork, add a message and boom ... you have your stamp.

![share](/content/2014-02-gigstamp-stamp.png)

## Collection

I wanted this to feel like the digital equivalent of collecting your gig tickets. Seeing the collection screen I hope will be a place to bring back memories of going out and seeing a great band.

![screens](/content/2014-02-gigstamp-screens.png)

Maybe in the future we'll be able to create posters of people's GigStamps for a festival or a particular year.

## Artwork

We've teamed up with a few designers and photographers to create an initial few sets of generic stamps. It's been great to work with [David Hampshire](https://www.behance.net/DavidHampshire), [Ben Powell](http://www.rootcreations.co.uk/) and [Nik Jones](http://www.helloimnik.co.uk/).

## Sharing

Each time you collect a GigStamp it is automatically saved either in to a Facebook photo album or posted to a twitter account. Here is an example of one of stamps created from a Fun Lovin' Criminals gig in London.

![share](/content/2014-02-gigstamp-facebook.png)

Even through our testing period, it's been really exciting to see how these simple images can create conversation and become something which sparks a memory.

## Tech

I built the app with a [Node.js](http://nodejs.org) server and an HTML5 wrapper app using [Cordova](http://cordova.apache.org/). I'll blog a bit more some other time about some of my experiences trying to get a complete HTML5 based stack working.

## Where is it going

We have based the gig results from the API at [Songkick](http://www.songkick.com/) which will mean that we will instantly be able to allow GigStamps to be created internationally. We're now working with some regular giggers on the final tweaks before I submit the app initially to the Apple app store, and then hopefully soon after to the Google Play store.

You can sign up to the [GigStamp mailing list](http://gigstamp.com) to be notified when the app is available.



It was great meeting everyone last night at the [Bristech](http://briste.ch) meetup. It was my first attempt at doing a live coding session. It was a steep learning curve but I was encouraged to chat to a few people who have been inspired to build a game themselves.

## The game and some code
So I did build the game beforehand and have put up the code to the game on Github under [http://github.com/davetayls/bomber](http://github.com/davetayls/bomber).

You can also play the game online at [https://davetayls.me/bomber](https://davetayls.me/bomber).

I've written a few posts previously which might help someone who want's to give this a go:

 - [Adventures in HTML5 Games](/blog/2013/03/25/adventures-in-html5-games-akqa-anoraks)
 - 2d games love sprites and I've written a post [looking closer at sprites on canvas](/blog/2013/02/11/drawing-sprites-with-canvas).

These posts cover a lot of the basic concepts so I won't cover those again, but instead let's look at this particular game and some updates I've made because of it.

## Canvas Preloading
I have added an image preloader step in to this game, which I'll need to incorporate in to my other games as Canvas throws a wobbly if you try and draw an image on to it which hasn't already been loaded.

It was pretty simple to write. In the images helper file I have two methods. The first is a `getImage` method which will return a cached `Image` object and also create it if it doesn't already exist for a particular url. It also can take a callback which gets fired once the image is ready.

    images: {},
    getImage: function (src, cb){
      var img = this.images[src];
      if (img && cb){
        cb.call(img);
        return img;
      } else {
        img = new Image();
        img.onload = cb;
        img.src = src;
        this.images[src] = img;
        return img;
      }
    }

The second is a wrapper around this which will go over an array of image urls and fire a callback once they are all ready. You would then call it and pass in the game's `init` function:

    images.preload(urls, init);
    function init(){
      // set up the game 
    }

## Animated `Sprite`
I have now updated my handy `Sprite` object to allow for sprites to be animated. You can find the `Sprite` code inside the `ui/helpers/images.js` file. The key difference is that you can specify the number of frames between sprite switching and it will just loop through the various positions on the sprite sheet you have specified.

    var spr = new Sprite(
      img, 100, 100,
      [[0,0], [50, 0], [100, 0]]
    );
    spr.animate = 8; // switch every 8 frames

{% include figure.html
   caption="The Police Cells at The Island (Bristol)"
   src="https://davetayls.me/content/2014-01-bristech.jpg"
   %}

## The Plane
Each of the objects in this game have pretty simple characteristics. The plane is a good place to start. I tend to create a constructor for each object so that I can potentially create multiple instances of it.

All the plane needs to do is move forward, and drop bombs so it will need properties to support that e.g.

    speed: 3, // pixels per frame
    x: 0, // starting location
    y: 0
    
### Step
I then have a `step` function and a `draw` function in each of the objects to handle their own characteristics. For the plane we just need to move it forward and also tell each bomb to `step()` as well.

    step: function(){
      this.x+=this.speed;
      this.bombs.forEach(stepObj);
    }

You'll notice that I've declared a global function called `stepObj`. In a small game like this I'm not too bothered about that but you'd probably want to encapsulate it better in a larger game. It simply will call an object's `step()` method.

    function stepObj(obj){
      obj.step();
    }

### Draw
The plane's `draw` function will use our `this.flying` [`Sprite` instance](/blog/2013/02/11/drawing-sprites-with-canvas) and also tell each of the bombs to draw.

    draw: function(){
      this.flying.draw(Math.floor(this.x), this.y);
      this.bombs.forEach(drawObj);
    }

Notice that I am flooring the `x` value to allow the `speed` property to be less than 1.

### Dropping a bomb
When we want to drop a bomb we need to tell the `Plane` to `dropBomb()`. This is simply a case of `push`ing a `new Bomb` instance on the the `this.bombs` array. Remember the `draw` method will happen after this and will tell each bomb to draw itself.

## Detecting a hit
Once we've created our `Bomb` and our `Battleship` objects much in the same way we need to be able to check whether any of the `Bomb`s have actually hit any of the `Battleship`s.

### isHit
I've decided to break this work up in to two jobs. The first is within the `Battleship` to tell whether a particular `x` and `y` coordinate makes a hit. To be able to do this we need to know a few things about the ship so I'll create the appropriate methods on the object: `left`, `top` and `right`. We can then do a couple of simple checks.

    isHit: function(x, y){
      if (y > this.top()){
        if (x > this.left() && x < this.right()){
          this.damage = true;
        }
      }
      return this.damage;
    }

### `map`, `reduce` and `checkHit`
Then within the main game loop I've added the functionality to pull out all the `Bomb`s from any `Player`'s `Plane` and pass each of their coordinates through to our `Battleship`'s `checkHit` function.

The map/reduce line look like this:

    players.map(getBombs).reduce(flatten).forEach(checkHit);

So map will take one array and pass in each item to a function and create a **new** array from what that function returns.

    function getBombs(player){
      return player.plane.bombs
    }

So now we should have an array... of an array of `Bomb`s because each `Player`s bombs property is an array.

We want just a single array so we `flatten` it using `Array`'s `reduce` method. The reduce method took me a while to get my head around. But once you do it's pretty useful. It will take an array and pass each item in to a function you specify. The `previous` property will be whatever came out of the previous time the function was run and the `current` property is the current item in the array.

The result will be whatever is returned from the function after calling it on the last item in the array.

    function flatten(previous, current, i, arr){
      if (typeof previous === 'undefined'){
        previous = [];
      }
      return previous.concat(current);
    }

We can then go through each `Bomb` and `checkHit`

    function checkHit(bomb){
      ships.forEach(function(ship){
        ship.isHit(bomb.x, bomb.y);
      });
    }

## Going further
There's obviously a lot more we could go in to but to stop this becoming too lengthy hopefully that should give an overview of the key parts of this game. Take a look through the code *(there's not much of it)* and fire me a tweet if you have any questions.

 - code: [http://github.com/davetayls/bomber](http://github.com/davetayls/bomber).
 - play the game online at [https://davetayls.me/bomber](https://davetayls.me/bomber).
 
Fixes and pull requests are always welcome :o)

## Thoughts for next time
Here are a few things I have taken away from the experience.

### 1. Start with a blank slate
I thought it would be easier to build something beforehand and then work from the same code but with key sections stripped out.

What I found was that I spent most of the time trying to remember what I had coded previously instead of just thinking about the task at hand.

### 2. Much simpler expectations
It was great to have built a complete version of the game beforehand. I would do that again, but for the actual presentation next time I'll just draw boxes on the screen and focus on the gameplay.

I felt there were too many little helpers in there to speed my coding up that probably just added confusion.

Also with a 30 minute talk you actually only get 20 minutes to code and I spent a lot of that talking about the existing concepts rather than coding.


It was great to be have [Robin Stanley](http://boffnoff.me) join me at the end of October. He joined us in our little office for a weeks work experience. I have never had a student work with me before so it was a bit of a leap in to unknown territory but I had a few thoughts as to how I could help him.

If I think back to what has helped me most in the past, I think of particular projects or problems which I had to work out. For me learning through real-life tasks has been the most effective way.

From an initial conversation It occurred to me how much I take for granted the gradual experience I have gained over many years. I guess, because I'm always learning, I still view myself as a student. I often feel very inadequate when I'm learning new things, and I remember the pressure I felt under when I was just starting out. You feel like you have to get everything right but even in building a regular website there are so many different skills you need to draw on, it's impossible to make the grade.

I love the passion we have in the web community, I don't think there is another industry like ours. We have certainly got it good. But like any other craft we need to be able to get it wrong to move forward. It really bugs me when I see comments on twitter and other networks slating other developers (I've done it myself), there should always be space for constructive critisism but let's not shoot before listening.

One of the things having Robin that week has taught me is that learning and discovering is one of the integral pieces to being a developer. It's a continual adventure...



If you are building a lot of html templates using [Handlebars](http://handlebarsjs.com/) then here is a walk through of slimming them down using [Require.js](http://requirejs.org), [require handlebars plugin](https://github.com/SlexAxton/require-handlebars-plugin) and Handlebars helper system.

A really good use case for this is building forms. Say you wanted to keep a common className and structure across all your app. You might start with a simple form like this one:

```handlebars
<form role="form">
  <fieldset>
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input class="form-control" type="text" id="name" />
    </div>
    <div class="form-group form-group--email">
      <label for="email" class="control-label">Email</label>
      <input class="form-control" type="email" id="email" />
    </div>
    <input type="submit" />
  </fieldset>
</form>
```
    
The first thing we could do would be to create reusable helpers which will build the `label` and `input` elements.

## Cheeky little helpers
It's great starting small as it allows you to be quite granular when using helpers within your templates. You can always build helpers which utilise other helpers.

Let's build a simple `label` helper:

      define(function(require){
      
        // register our dependencies
        var Handlebars = require('handlebars');
        
        // create a label helper
        Handlebars.registerHelper(
          'input_label',
          // we'll make context be the text
          function(context, options){
            // we'll send in the id as an attribute
            id = options.hash.id;
            return '<label for="'+ id +'" class="control-label">'+ context +'</label>';
          }
        );
        
      });

Now after this simple helper and maybe a similar one for the input we can change the template to:

```handlebars
<pre><code>&lt;form role=&quot;form&quot;&gt;<br/>  &lt;fieldset&gt;<br/>    &lt;div class=&quot;form-group&quot;&gt;<br/>      &#123;&#123;{input_label 'Name' id='name'}}}<br/>      &#123;&#123;{input_text my_var id='name'}}}<br/>    &lt;/div&gt;<br/>    &lt;div class=&quot;form-group form-group--email&quot;&gt;<br/>      &#123;&#123;{input_label 'Email' id='email'}}}<br/>      &#123;&#123;{input_email my_date id='email'}}}<br/>    &lt;/div&gt;<br/>    &lt;input type=&quot;submit&quot; /&gt;<br/>  &lt;/fieldset&gt;<br/>&lt;/form&gt;<br/></code></pre>
```

Already it's looking better and we've saved ourselves a lot of refactoring should we need to change class names or add another attribute to the `input` element across all email inputs.

## Helping helpers
Now we could take this one step further by encapsulating both label and input in a helper saving us the need to repeat the id. Also it's not too pretty having html embedded in the JavaScript so lets also use the power of Require.js and the Handlebars plugin to *really* simply use another template inside.

      define(function(require){
      
        // register our dependencies
        var Handlebars = require('handlebars');
        
        // template helpers
        var group_text = require('hbs!templates/group_text');
        
        // create previous helpers
        // ...
        
        // create a group helper
        Handlebars.registerHelper(
          'group_text',
          function(context, options){
            // create a simple link to the value
            // so we can just pass the options
            // as data
            options.value = context;
            return group_text(options);
          }
        );
        
        // create other group helpers
        // ...
        
      });

Then within our `group_text.hbs` file we can not only place the surrounding markup but we can also use the helpers we've created previously.

```handlebars
<pre><code>&lt;div class=&quot;form-group&quot;&gt;<br/>  &#123;&#123;{input_label hash.label id=hash.id}}}<br/>  &#123;&#123;{input_text value id=hash.id}}}<br/>&lt;/div&gt;</code></pre>
```

And let's look at our resulting form template.

```handlebars
<pre><code>&lt;form role=&quot;form&quot;&gt;<br/>  &lt;fieldset&gt;<br/>    &#123;&#123;{group_text my_var label='Name' id='name'}}}<br/>    &#123;&#123;{group_email my_date label='Email' id='email}}}<br/>    &lt;input type=&quot;submit&quot; /&gt;<br/>  &lt;/fieldset&gt;<br/>&lt;/form&gt;<br/></code></pre>
```

Soooo much neater!! Much easier to maintain across all the forms within your app.





I've been working a lot with [Backbone Marionette](http://marionettejs.com/) recently. It's a really powerful framework for [Backbone.js](http://backbonejs.org).

Today I have been working on displaying a table of model values with the ability to add new items to the collection they are in. It made sense to use [Marionette's CollectionView](https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md) to manage the individual views for each model. It also conveniently will watch the collection for any add events and append a new view in to the DOM.

This is all good but it took me a while checking the sorting of the collection to realise: whilst Backbone was inserting the new model at the *correct* point in the collection; CollectionView's `appendHtml` method only ever appended to the end of the parent DOM element.

After a bit of a think and a search I have come up with the following code to implement the full functionality:

    Marionette.CollectionView.extend({
        appendHtml: function(collectionView, itemView, index) {
          var childAtIndex;
          
          // could just quickly
          // use prepend
          if (index === 0) {
            return collectionView.$el
              .prepend(itemView.el);
            
          } else {
          
            // see if there is already
            // a child at the index
            childAtIndex = collectionView.$el
              .children().eq(index);
            if (childAtIndex.length) {
                return childAtIndex
                  .before(itemView.el);
            } else {
                return collectionView.$el
                  .append(itemView.el);
            }
          }
        }
    });

They've obviously kept the default implementation very simple for a reason but if you need this sort of functionality for a particular type of CollectionView then hope this helps.


Here's a quick tip for doing some simple performance measuring in Javascript. If you want to see how long a particular job takes you can use the new performance api like so:

## Mark a starting point

    window.performance.mark('custom_name')

## End and measure

Once the job has completed you can tell the performance api to create a measurement between the current time and the mark you ceated earlier.

    window.performance.measure('custom_measure', 'custom_name')

## Grab the details

You can then get all the measurement information.

    window.performance.getEntriesByName('custom_measure')

here is an example of the output

![perf output](/content/2013-09-perf-output.png)





What do you get when you mix a few [Leap Motion](http://leapmotion.com) devices, a few eager developers and space invaders? 

We found out at the recent [Southville JS Workshop](http://www.meetup.com/SouthvilleJS/events/130960852/) in Bristol. I have been excited about getting involved and I think we had a great workshop to finish the weekend off with some light-hearted fun.

Here are some of the key aspects we went through to program a simple Space Invaders controller using the Leap Motion.

## Leap with JS

Leap Motion JavaScript support has two main components.

1. WebSocket server (JSON-formatted messages)
2. JavaScript client library, Leap.js

## Coordinate System

The Leap's coordinate system provides X,Y,Z axis which is known as a [Cartesian coordinate system](http://en.wikipedia.org/wiki/Cartesian_coordinate_system).

![axes](/content/2013-09-leap_axes.png)

The units that are given to you through the api are in real-world millimetres.

## Frame Loop

In a minute we'll go through some of the information you get from the leap when you hook in to it's api. To give you a little context lets first look at what code you might write to access the data.

First you will need the [leap.js](http://js.leapmotion.com/) script in your page.

    <script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>
    
You can use it directly from the Leap Motion site or include it in your own project. The library hides a lot of the complexity of connecting to the web socket server and provides you with a frame loop you can hook in to. The frame loop will run up to 60 frames per second but can vary depending on the machine.

Here is an example of providing a callback function which gets the frame data.

    Leap.loop(function(frame){
        // frame.hands
        // frame.fingers
        // frame.tools
    });

The frame data provides arrays of object types which could be present during that frame.

## Gestures and Taps

The Leap also provides helpful gesture recognition which you need to turn on. For each gesture observed, the Leap adds a Gesture object to the frame. You can get these Gesture objects from the Frame `gestures` list.

    Leap.loop({ enableGestures: true }, function(frame){
        // frame.gestures
    });

 - Circle — A single finger tracing a circle.
 - Swipe — A linear movement of the hand.
 - Key Tap — A tapping movement by a finger as if tapping a keyboard key.
 - Screen Tap — A tapping movement by the finger as if tapping a vertical computer screen.
 
## Hand Sphere

The leap data provides some hidden gems. One of those details an the size of an invisible ball should it fit in the palm of the hand. It's worth having a dig through the documentation and the `frame` object the comes back in dev-tools.

![hand sphere](/content/2013-09-leap_hand_ball.png)

 - `sphereCenter` — The center of a sphere fit to the curvature of the hand (as if it were holding a ball).
 - `sphereRadius` — The radius of a sphere fit to the curvature of the hand. The radius changes with the shape of the hand.

## A Simple Controller

We built a very simple controller for my [multiplayer Space Invaders game](https://github.com/davetayls/space-invaders). The rules were simple:

 - If the hand is more than 40mm to the left we move the ship left
 - If the hand is more than 40mm to the right we move the ship right
 - If there is 2 or more fingers in view then we tell the ship to shoot

Let's first look at the function which would output that logic given the right parameters. The game's web-socket server is expecting a space separated string like `"left space"` or `"right"`. So our `getCurrentKeys` function could look like this.

    function getCurrentKeys(xPos, fingers){
        var k = [];

        // if our hand is over 40mm to the left
        if (xPos < -40){
            k.push('left');
        }

        // if our hand is over 40mm to the right
        if (xPos > 40){
            k.push('right');
        }

        // if our hand has more than 1 finger visible
        if (fingers > 1){
            k.push('space');
        }

        // return space separated current keys
        return k.join(' ');
    }

OK, so how do we get the `xPos` to pass in to this function?

The Leap's coordinate system gives us an `Array` with values for `[X,Y,Z]` and once we know there is a hand in view we can get it's `palmPosition`.

        Leap.loop(function(frame){

            // ... other game functionality
        
            // check if there are any hands in view
            if (frame.hands.length){
                // save the current xPos now that we know
                // we have a hand in view
                xPos = frame.hands[0].palmPosition[0];
            }        
            
            // ... other game functionality
            
        });

And how might we get the number of fingers?

        Leap.loop(function(frame){

            // ... other game functionality
        
            // our dummy controller tells the game to
            // shoot if there is more than 1 finger visible
            var fingers = frame.fingers.length;
                        
            // ... other game functionality
            
        });

You can take a look at the [full controller code](https://github.com/davetayls/space-invaders/blob/gh-pages/multiplayer/public/controller-leap-motion.js).

## Resources

Here are some helpful links to get you going:

### Leap Motion
 - Website <https://www.leapmotion.com/>
 - SDK <https://developer.leapmotion.com/downloads>
 - Developers area <https://developer.leapmotion.com/>
 - Leap JS <https://github.com/leapmotion/leapjs>
 
### Simple Space Invaders Game

I have set up a simple space invaders game which includes a multiplayer version and a simple leap controller using leap.js

[https://github.com/davetayls/space-invaders](https://github.com/davetayls/space-invaders)

## Enjoy!

ps. thanks [Katja Durrani](http://blog.kdurrani.co.uk/2013/09/11/SouthvilleJS-JavaScript-workshop/) for letting me use the space invaders pic





It was great to be able to present at [Bristol Skillswap](http://bristolskillswap.org/) last week. I'm new to the west and am really excited about getting involved in the community here.

I took a flight through my recent journey with [United Studios Live](http://unitedstudioslive.com) and the 3d Audio Visualizer built in to their new website.

## A whole new world of sound

The Web Audio API has given us loads of great new toys to play with inside the browser.

We can:

 - Analyse sound
 - Generate sound
 - Manipulate sound

So I really want to excite people to give it a go.

## The Stack

The `AudioContext` is much like a guitar effects
board where each "effect" on the board can connect to the next

![connect](https://davetayls.me/presentations/2013/flightoftheaudiovisualator/connect.png)

## Creating waves with Oscillators

First we need a context, then our Oscillator can be created out of the context.

We then just need to connect up the wires
to our end destination (speakers).

    var context = new AudioContext();
    var oscillator = context.createOscillator();
    oscillator.connect(context.destination);

Using the `type` property we have 4 options.

![oscillator types](https://davetayls.me/presentations/2013/flightoftheaudiovisualator/waves.jpg)

*[Learn more about this in Stuart Memo excellent article](http://stuartmemo.com/making-sine-square-sawtooth-and-triangle-waves/)*

    oscillator.type = 0; // Sine
    oscillator.type = 1; // Square
    oscillator.type = 2; // Triangle
    oscillator.type = 3; // Sawtooth

Ok, so you can then set the frequency of the wave.

    oscillator.frequency.value = 440; // A

[Hear these in action](https://davetayls.me/presentations/2013/flightoftheaudiovisualator/code-examples/oscillator.html)


## The Analyser

The core of our site was analysing the audio frequencies This is how we reacted to the frequenices

 - Listen for average and max volume over particular
   frequencies
 - If low frequency band is above a trigger level
   extra visual boost is applied
 - Size of the dots corresponds to levels at each
   band
 - State of last band saved to give history through
   the cube
 - We also use perlin noise function to gradually
   cycle through colours

## Getting the frequencies from the context

The analyser splits up the signal into frequency buckets

    analyser = context.createAnalyser();
    analyser.smoothingTimeConstant=0.3;
    analyser.fftSize=1024;

We can use a JavaScriptNode to process the audio after a number of frames have been sampled

    javascriptNode.onaudioprocess = function(){
      var frequencies
        = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(frequencies);
    }

Take a look at [this great article](http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound) by Jos Dirksen taking you through the process of creating a spectogram step by step.

## The Playground

Building the [United Studios Live](http://unitedstudioslive.com) website was a great playground.

We started just mapping the audio spectrum to a row of dots and moving the row along a column each frame to get a sense of history and movement.

![United Live Spray](/content/2013-08-audiovis2.png)

We then wanted to find something a bit of dynamic from the audio and so incorporated a bass trigger which caused that frame's dots to dramatically gain in size and also change colour.

It kinda looked like a crazy tentacle type thing. It was pretty cool but was drifting away from the brand's cube.

![United Live Spray](/content/2013-08-spiderthing1.png)
![United Live Spray](/content/2013-08-spiderthing2.png)

We finally incorporated what we had found back in to a cube and found it quite mesmerizing zooming in and out, spinning the cube around.

So we took note of the camera position and angle at different places around the cube which were especially beautiful.

Using those x,y and z coordinates gradually flew the camera between them interpolating the values of each axis over time using a cubic spline function (illustrated below).

{% include iframeWithLink.html
   src="https://davetayls.me/teststation/creative-js/grapher/interpolation.html"
   caption="Interpolating the values of each axis over time using a cubic spline function" %}

There were some beautiful discoveries

![United Live Spray](/content/2013-08-unitedlivespray.png)
![United Live Spray](/content/2013-08-rain.png)
![United Live Spray](/content/2013-08-closeup.png)

We added some finishing touches. Drag and drop an mp3 to visualize it and random flights to allow it to continually move.

## What are people creating?

People are doing some great things with this. Here are a few things I have come across:

 - Synths
 - Drum machines
 - Games
 - Instruments
 - Songs

and more and more

We've got so many tools to be creative in the browser!

## Some great resources

So give this a go and send me some links of what you've done. Here are some links I found really useful.

- <http://stuartmemo.com>
- <http://stuartmemo.com/making-sine-square-sawtooth-and-triangle-waves/>
- <http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound>
- <http://www.html5rocks.com/en/tutorials/webaudio/intro/>
- <http://www.html5rocks.com/en/tutorials/getusermedia/intro/>

## Slides


{% include slides.html
   src="https://davetayls.me/presentations/2013/flightoftheaudiovisualator/" %}
   



NB. This is an article I wrote a while back for .net magazine which seems to have disappeared when they transitioned to Creative Bloq

Every creative discipline has their own set of good practices and principles. They have evolved over time and are generally born out of common challenges that people in each industry face. I think there are many things we can learn from each other across the disciplines.

I have had the opportunity to work with some extremely clever people spanning several creative disciplines.

Here are five key principles that have transformed the way I approach my work

## 1. Everything has a life cycle

I remember a few years back, when I began working on my first enterprise project, it was a massive learning curve for me. Despite many set-backs over the course of the project, when it went live I was so proud of this thing of beauty I had created.

I had my monthly check-ups with the site to see how people were using it. It was thriving in it’s infancy. It was full of articles being read and commented on.

Slowly new features begun to be requested as people wanted more. These were exciting times and my emotional attachment to this child of mine had grown strong.

Then one day I read the words many creatives fear — words of woe — “Our **NEW** website has gone live”. The season was over.

I bet this relationship could be carbon copied a thousand times, and this is how it should be. What I have learnt to do is give each part of the life-cycle the respect it deserves.

Developers use the acronym CRUD (Create, Read, Update, Delete) to refer to the four basic functions of a piece of information.

Let’s apply it in a broader sense.

 - When you are creating, remember you are not simply creating something to go live. You are creating something to live, and breath and grow. Allow for change and embrace it. Remember quickly isn’t always quicker.
 - When reading, take the opportunity to feel good about what is now in front of you, which a few months ago was probably nothing but a pie-in-the-sky dream.
 - Hopefully you would have taken some time at the beginning and put enough thought and care into the creating that updating becomes just a continuation. Remember this might not be you doing the work. Create so the next developer will love you.
 - Don’t be afraid to delete a project if it’s had it’s season, even when you are emotionally attached. It’s for the greater good, creations have to die for creativity to survive.

## 2. Some things are broken, and some things are complicated

I have this theory, dangerous I know…but my dad was a chemist for a couple of years so I’ll presume that gives me the qualifications. Every time I come across another CMS my theory is reinforced.

Here it is:

### The 10 step lifecycle of a CMS

1. A lowly developer curses at his screen whilst implementing a “badly thought out feature” in an “even worse architected CMS than the last one”
2. Said lowly developer makes the bold claim “I could do this so much better” whilst realising all his colleagues are either laughing at his rage or tweeting about it.
3. Lowly developer (now Lead Architect) builds new CMS
4. CMS is hailed to be revolutionary as it is simple and easy to use
5. Lead Architect is thanked but asked if he could include a small feature.
6. Lead Architect is thanked but asked if he could include a small feature.
7. Lead Architect is thanked but asked if he could include a small feature.
8. Lead Architect is thanked but asked if he could include a small feature.
9. Lead Architect is told this new feature is suddenly more important than the last one.
10. A lowly developer curses at his screen whilst implementing a badly thought out “feature” in an “even worse architected CMS than the last one”

At the end of the day, CMSs are hard, and yes someone, one day will prove to be the exception (I bet you’re thinking it’s you??) but my point here is **some things are broken, and some things are complicated** it’s worth deciphering this before potentially going down that rabbit hole.

I know as a person who likes to build things that I am very susceptible to wanting to do things myself. This in fact is one of the hardest hurdles for me to overcome, partly because of the challenge but also partly because there is an amount of fear to overcome when trying to contribute to someone else’s project. Especially when it’s quite mature.

Here are some useful questions I am trying to ask myself:

 - Has someone attempted this before?
 - If I’m fixing something, how can I verify original problem has been resolved
 - What time do I need before I will see some real value

If the answers to these questions show that it makes sense to get involved then I need to just jump in at the deep-end.

## 3. Stop repeating yourself (a lot)

I am a self confessed fanatic when it comes to frameworks and plugging them together to find elegant architectural systems. When you read about this you hear some particular techie terms used a lot. There are a couple which I battle with on a regular basis, because while the concept is simple to grasp the implementation isn’t always so black and white.

The issue I find is on one hand I see a lot of code being factory generated and gradually turning in to a muddy puddle of stuff that does stuff. On the other side of the spectrum people like me have a tendency to keep endless catalogs of proverbial snippets which are never re-used. Whichever side of this spectrum you lean towards, our battle is to find where the value is.

The DRY (Don’t Repeat Yourself) SRP (Single Responsibility Principle) make us think about the significance of the piece of the work we are producing at any one time.

 - How does this fit in to the bigger picture
 - What is it’s key purpose
 - What is it’s relationship with the other pieces of the puzzle
 - How can it be built so that it encourages an open relationship to potential future uses

I really wish at this point that I could merge the two acronyms to create DAMP, but that would be a pretty lame word to rally behind. However injecting a little pragmatism and experience has helped me get closer to the elegant solutions I have been after. But how do you gain the experience to be able to apply an appropriate amount of pragmatism? I resort to a mixture of:

 - practice
 - reading
 - failing and getting back up
 - talking with people better than you
 - practice

And finally the glue which has helped me to bind the things I am learning together is to keep a blog. It doesn’t have to be eloquent, write about the things you are finding out, how you solved a problem, how you implemented a feature.

I have recommended keeping a blog to people in my team time and time again. I don’t think I can overstate the significance of writing down your thoughts. There are so many benefits but here are a few:

1. You can (and will) use it as a reference in the future
2. The physical act of putting down in words helps to solidify the key aspects of what you need to remember
3. It will occasionally encourage conversation with people who read it which again helps you to retain the knowledge and potentially spark further development

So always keep in mind the immediate context of what you’re building alongside how it fits in with the bigger picture and it’s potential. Build jigsaw pieces not mud pools.

## 4. Explain yourself

I was having a discussion with a couple of ex colleagues about the rubber duck technique. It’s a method of helping you debug a piece of code by explaining it line-by-line to a rubber duck. It’s surprisingly effective at revealing mistakes and improving the quality of your work, and not only for coding. Why does this work? Well there seems to be some strange veil that gets lifted from your eyes and intuition when you have to teach someone (or something) else your thinking processes.

There seems to be some self protection system built in to us which keeps us from showing others our work for fear that we’re getting it wrong. It’s good to find out you’re getting things wrong, maybe think of it in another way. There are better ways out there to be discovered.

So explain yourself, to objects and people. Use objects when you’re trying to debug something in front of you, explain yourself to colleagues when you’re designing a concept. Do short presentations to your contemporaries after a project. And I really encourage you to pluck up the courage to do longer presentations at local meetups. It’s a scary thought but its a great way to solidify your understanding on a subject and potentially be made aware of glaring issues you couldn’t see, “wood for the trees” an’ all that.

## 5. Keep things Simple

> “Climbing a mountain is all about the small victories, before you know it you’ll reach the top”

That has been one of the most important things I have learnt. My output and it’s quality has gone up.

A good friend once said to me

> “they ask if it’s possible, but there’s nothing you can’t do. It’s just a matter of time and patience”

Always **start with something** and make it something small. But start.

You’re going to need patience at times. Learn to spot the red flags and don’t be afraid to cut your losses and strip back. Nothing is ever completely wasted.

 - Know your current focus
 - Start and Finish
 - Explaining something simple is … um simpler

If you can’t describe (even to yourself) the value of your current task in an elevator pitch (30 secs) then you either need to break things down or it might be leading you down a dark hole.

This is one to seriously invest in, I would recommend a couple of books to start off:

 - [The Accidental Creative](http://www.accidentalcreative.com/book/)
 - [Steal Like an Artist](http://austinkleon.com/steal/)

## Conclusion

I’ve gained so much by just thinking through and exploring these in much more detail myself. There are so many subtleties which we pick up as we explore and we experience.
I’ll leave you with the reminder that principles are only effective when held in balance with each other. I hope this will encourage you in how you approach your creative and life projects.


I have started a small [collection of JavaScript Euclidean Vector
classes](https://github.com/davetayls/js-vector-classes). These are
commonly used in creative programming. I wanted a quick way of adding
Vectors in to any project that may need them so they're installable
from [bower](http://bower.io) and have a basic set of methods available.

## Set up

Currently there is 2 dimensional and 3 dimensional Vectors available.
Add references to the files to your project.

### Bower
You can install these as a bower dependency

    $ bower install js-vector-classes --save

### RequireJs

This can be used as a [RequireJs](http://requirejs.org) dependency.
The Vector files will return the JavaScript constructor class. You
will just need to point the module name to the corrent location of
each file.

    require(['Vec2'], function(Vec2){
        var velocity = new Vec2(10, 5);
    });

## Usage

You can start using this vector by creating a new instance:

    var v        = new Vec2(1, 5),
        velocity = new Vec2(10, 5),
        location = new Vec2(250, 100)
    ;

You can set the properties again using

    v.set(x, y)

### Maths

You have the following methods available to you.

    // Maths
    v.plus(Vec2)
    v.minus(Vec2)
    v.mult(Vec2) // multiply
    v.div(Vec2)  // divide
    v.mod(Vec2)  // modulus

    // helpers
    v.inv()      // invert

#### New Instances
Each of these also have a version which returns a new instance just
change the first letter to be uppercase.

    v.Plus(Vec2)
    v.Minus(Vec2)
    // => etc

### Helpers

You also have a few helper functions

#### copy(Vec2)
This copies the properties of another vector in to the current
vector.

#### clone()
This returns a new instance of the current vector with cloned values

#### equals(Vec2)
This will return true if the properties of the two vectors are equal

#### distance(Vec2)
This will return the distance between two vectors.

## Contributing
Feel free to send pull requests and I'll review them as soon as I can.


On starting a new project recently I started making notes on the kind of questions I would want to ask myself at the beginning of every project. I started writing them down and making notes around each one but the article has become a little large so I'm going to do a series instead.

## JavaScript Code Quality and JsHint

I'm going to start off looking at JavaScript, in fact more specifically for this article JsHint.

Going in to a build is a mine-field. Requirements, specifications, current trends and new technologies, it's no wonder a lot of projects only begin to consider code quality and maintainability half way through a build. However integrating a few tools and habits in to the workflow of a project right at the beginning will mean that it can be easier to maintain a good quality of code.

## JsHint

[JsHint](http://www.jshint.com/) is a community-driven tool to detect errors in JavaScript code and enforce your team's coding conventions. It is a fork of [Douglas Crockford's](http://www.crockford.com/) [JsLint](http://www.jslint.com/) that has softened some of the more personal expectations and made it more configurable.

## 1. Add a .jshintrc file in to the root of your project.

This can then be used by editors and automation and is a much more convenient place to configure the expectations of JavaScript code. Here is an example file:

    {
      "strict": true,
      "browser": true,

      "eqeqeq": true,
      "immed": true,
      "newcap": true,

      "maxparams": 4,
      "maxdepth": 4,
      "maxstatements": 15,
      "maxcomplexity": 6

    }

A complete list of options can be found in the [JsHint Docs](http://www.jshint.com/docs/)

This configuration can then be used by `jshint` when checking your code.

## 2. Use the `max...` options from the beginning

JsHint includes a few really useful options to help you write code which is easy to follow. I would recommend these are used from the beginning.

### `maxparams`
This option lets you set the max number of formal parameters allowed per function. You really should go for an key/value object if there are more than **3 or 4 parameters**. The key thing here is to prevent yourself getting in to the boolean trap of seeing functions like this:

        myFunc(true, true, false, 'yes', false, true);

This is extremely hard to follow unless you know the code inside out.

### `maxdepth`
This option lets you control how nested you want your blocks to be. Again I would tend to limit this to **3 or 4** as code starts to get pretty confusing after that.

### `maxstatements`
This option lets you set the max number of statements allowed per function. It's a way of preventing monolithic functions that go on forever. It's good practice for the entire function to be visible on the screen while developing. You'll need to find what suits you but anything from **8-15** should be reasonable.

### `maxcomplexity`
This option lets you control cyclomatic complexity throughout your code. Cyclomatic complexity measures the number of linearly independent paths through a program's source code. Read more about [cyclomatic complexity on Wikipedia](http://en.wikipedia.org/wiki/Cyclomatic_complexity). I have found a value of **6** gives a good balance of separation and being pragmatic.

For further reading [Elijah Manor has got a more in depth write up of these](http://www.elijahmanor.com/2012/09/control-complexity-of-your-javascript.html).

## 3. Integrating checks in to your workflow

You have a few options for doing the checks on your code.

### Inside your editor

![jshint inside sublime text](/content/2013-07-01-jscodequality-ide.jpg)

A lot of editors include baked in support or support via a plugin which will highlight errors as you develop. The integration will be different for each and [there are some links to various install instructions on the jshint website](http://www.jshint.com/install/#plugins)

### Using the command-line tools

It's really simple to get started using JSHint on the command line. It only relies on you having installed [Node.js](http://nodejs.org) which is [pretty painless if you haven't](https://vimeo.com/52219969).

To install it globally use npm from the command line

    $ npm install jshint -g

After that you should be able to point it at a JavaScript file and get a result

    $ jshint myfile.js

If your `myfile.js` is in a child (or same) directory of your `.jshintrc` file which we created earlier `jshint` will use that file as your configuration options.

More options are available on the [JSHint docs](http://www.jshint.com/docs/)

### Using grunt

[Grunt](http://gruntjs.com/) is a JavaScript task runner. JSHint can be included in the automation flow. Errors can fail a build or be flagged for later.

You include it in your project (which should be [already set up to use grunt](http://gruntjs.com/getting-started)) with the following npm command.

    npm install grunt-contrib-jshint --save-dev

And to utilise the `.jshintrc` file which we created earlier make sure they are both in the root of your project and include a jshint configuration section in your `Gruntfile.js` similar to:

    // Project configuration.
    grunt.initConfig({
      jshint: {
        options : {
          jshintrc : '.jshintrc'
        },
        all: [
          'Gruntfile.js',
          'scripts/**/*.js',
          'test/**/*.js'
        ]
      }
    });

More options and examples can be found on the [grunt-contrib-jshint](https://github.com/gruntjs/grunt-contrib-jshint) project page.





I've been doing a fair amount of creative and 3d programming recently.
One major drawback of using something like WebGL at the moment is that
it isn't natively supported on many mobile devices and falling back to
something like the Three.js canvas 2d renderer is very slow.

So I've been playing around with using CSS 3D transforms to see what
you can achieve. Here's an example of a simple scene showing boxes being
dropped on to a plane **(Click the window to drop them)**.

<iframe src="https://davetayls.me/teststation/css3/boxes/physics.html" width="100%" height="500">
    <a href="https://davetayls.me/teststation/css3/boxes/physics.html">View it</a>
</iframe>

I was able to use [Cannon.js](http://schteppe.github.io/cannon.js/)
for the physics engine. Unfortunately the phone couldn't cope with the
physics as well so [here is a simple version which runs well on a
phone](https://davetayls.me/teststation/css3/boxes/simple.html)

## Building

[David Desandro](http://desandro.com/) has done a really good intro to
[3D transforms](http://desandro.github.io/3dtransforms/) if you haven't
taken a look yet.

### The Box / Cube

I managed to simplify the markup down to a container and a couple of
inner elements.

    <div class="box">
      <i class="front"></i>
      <i class="back"></i>
    </div>

The main box has a fixed height and starts in the middle of the page
so that `translate3d(0,0,0)` is the center of the page.

    .box {
      display: block;
      width: 14px;
      height: 14px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -7px;
      margin-top: -7px;
      transform-style: preserve-3d;
    }

I created the extra sides of the cube from the `:before` and `:after`
selectors instead of using more elements. You can do this as long as you
don't need to apply CSS `transitions` to them which we don't in this
case.

    .box i:before,
    .box i:after,
    .box i {
      display: block;
      background: #999;
      width: 14px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d; }

    .box i:after,
    .box i:before {
      content: ""; }

It then rotates and translates the individual faces to form the sides
of the cube.

    .box .front {
      transform: rotateX(90deg) translateZ(7px); }
      .box .front:before {
        transform: translateZ(-14px); }
      .box .front:after {
        transform:
          rotateY(90deg)
          translateZ(7px)
          translateX(7px); }

    .box i.back {
      transform: rotateY(0deg) translateZ(7px);
      background: #aaa; }
      .box i.back:before {
        transform: translateZ(-14px);
        background: #ccc; }
      .box i.back:after {
        transform:
          rotateY(90deg)
          translateZ(-7px)
          translateX(7px);
        background: #bbb; }

We now have a reusable box to add to our scene.

## Applying some physics

The next task is to apply the [Cannon.js physics engine](http://schteppe.github.io/cannon.js/) to our boxes.
It has an API reminiscent of [Three.js](http://threejs.org) as it has
been inspired by it. All the examples on the homepage are using
Three.js but it can be used independently.

First we set up our world and specify how much gravity it has.

    var world = new CANNON.World();
    world.gravity.set(0,0,-90.82);
    world.broadphase = new CANNON.NaiveBroadphase();

We then can place a plane to act as the ground and cause the boxes to
bounce and eventually come to rest on it.

    var groundShape = new CANNON.Plane();
    var groundMat   = new CANNON.Material();
    var groundBody = new CANNON.RigidBody(0,groundShape, groundMat);
    world.add(groundBody);

Then during the creation of the a box we define a new shape and describe
how it's material will react when it comes in to contact with the
ground material.

    var shape = new CANNON.Box(new CANNON.Vec3(10,10,6));
    var mat   = new CANNON.Material();
    this.body = new CANNON.RigidBody(0.1, shape, mat);
    this.body.linearDamping = 0.1;
    world.add(this.body);

Defining a `CANNON.ContactMaterial` sets up the relationship where we
pass in the two materials, then how much friction the surface has and
finally the restitution which affects how bouncy it is.

    var mat_ground = new CANNON.ContactMaterial(groundMat, mat, 0.5, 0.2);
    world.addContactMaterial(mat_ground);

## Frames

Finally in the animation loop we tell the world to calculate positions
at it's next step.

    world.step(1.0/60.0);

... we update the positions of all the boxes and update the relevant CSS
properties on the box.

    Box.prototype = {
      render: function(){
        var pos = 'translate3d('+ [
              this.body.position.x,
              this.body.position.z*-1,
              this.body.position.y
          ].join('px,') +'px)',
          rot = 'rotate3d('+ [
              this.body.quaternion.x,
              this.body.quaternion.y,
              this.body.quaternion.z
              ].join(',') +', '+ this.body.quaternion.w +'rad)'
        ;
        this.el.style[Modernizr.prefixed('transform')] = pos +' '+ rot;
      }
    };

Notice that in the CSS coordinate system the Z axis goes from font to back
whereas CANNON seems to expect the Z axis to go up to down. This means
that I use the body's Z position (reversed) in the CSS Y axis.

## That's about it

Take a look at the [code if you want to see the specifics](https://github.com/davetayls/teststation/tree/gh-pages/css3/boxes). This is the
first time I've used Cannon.js so I welcome any corrections.


I have recently moved house and family away from London. It's been a mixed experience leaving behind the on-the-doorstep opportunities of London and searching for new ways to be part of the web community. I've had a few big decisions to make, and in the process have met some really great people.

## Pogo Kid
I decided that I couldn't just let Pogo Kid go for the safety of a permanent role. I was sad to have to turn down a couple of really great opportunities but am excited about what I might be able to build. So I am now based just outside of Bath, England and working from a shared creative space in town.

## Pogo Kid Creative Soil
One of my long-standing dreams is to be able to build a centre of innovation focusing on browser technologies. A place where there are people from different areas of web development whether it's agency or SAAS products, or even small offsite development teams that want to be part of an innovative group of people.

It'll be a while in the making but I am starting a new tradition to give 10 days of free development time away each year to an innovative idea. A bit like an extended hack day. This year I am working with a production agency in London on some exciting visual experiments running in the browser. I'll blog about it again when we have something out.

I would also like to keep a small number of spaces available for post grads or people new to the industry. These would be people who show a natural ability to push boundaries or provide elegant solutions to wider problems. These slots could cover work space and maybe even part fund living costs to enable them to spend 6 months to a year investing in new ideas.

I'm really passionate about inspiring creativity and innovation whether that's with the teams I work with remotely or whether that's part of a bigger future. If this resonates with you, if you're building something or dreaming something...let's have a chat.


I have been working with Canvas 2D and WebGL recently and have been
using Maths I never expected to see again once I left school. One
thing that has been really useful when turning mathematical functions
in to something visual is to see a graph representation of the values.

I have created a [simple graphing playground](/teststation/creative-
js/grapher/2d.html) to test out these functions and compare them to
each other. You can see below the difference between the `sin`, `cos`
and `tan` functions alongside the `ImprovedNoise` generator built in
to Three.js.

{% include iframeWithLink.html
   src="https://davetayls.me/teststation/creative-js/grapher/2d.html"
   caption="Comparing sin, cos, tan and ImprovedNoise" %}

Go ahead and play with the code to the right. **Hit Ctrl+Enter to
update**.

## Noise
I have been reading about [Perlin
Noise](http://freespace.virgin.net/hugo.elias/models/m_perlin.htm) and
how it is used for generating random landscapes and clouds. It's
coming in very handy with a very visual project I am working on at the
moment. What's really important with this slightly predictable noise
generation is that you can seed it with a number (or more) and it will
always return the same result given the same input.

 - [Making a simple HTML5 racer game](/blog/2012/11/27/making-a-simple-html5-racing-game/)
 - [Adding a track and colliding with it](/blog/2013/02/19/adding-a-track-and-colliding-with-it/)
 - [Adventures in HTML5 Games](/blog/2013/03/25/adventures-in-html5-games-akqa-anoraks)

I had the pleasure of presenting at [AKQA](http://www.akqa.com/) Anoraks in London on thursday. It was a great packed evening. I gave a talk on my adventure over the last few months of building my simple [Space Invaders game](https://davetayls.me/space-invaders). Even though it's a pretty simple game I have learnt enough to talk about it or half an hour.

![anoraks people](https://lh4.googleusercontent.com/-41LCbfiIjmU/UVDIvVBkddI/AAAAAAAAvlM/AxRwbv7X2Ds/s640/adventures-html5-dev-anoraks.png)

## Key Points

I broke the process down in to 3 key concepts:

## Frame

I think of this like a controller. It's made up of at least two timing loops, the first for game logic, and the second for drawing.

Timing loops for the game logic are created and you want to assess the current state of your game and react to input as close to 60 frames per second as possible. For this we will want to use a self calling function triggered by `setTimeout`. You may be thinking why not `requestAnimationFrame`? It'll become clearer as we look at what `requestAnimationFrame` is designed for and some of the conflicting functionality with what you want to do with a logic frame.

It might look similar to this:

    function logicFrame(){
      // update players position,
      // listen for collisions etc

      // process the game logic at a target of 60fps
      setTimeout(logicFrame, 1000/60);
    }

Timing loops are also needed for the drawing. They work in a very similar way, in fact so similar that I made the initial mistake of using a single loop encompassing both.

It might look similar to this:

    function drawFrame(){
      // kick ass circles and squares

      window.requestAnimationFrame(drawFrame);
    }

The key difference here is the fact that we are using a fairly new JavaScript API `requestAnimationFrame`. The browser vendors saw that `setTimeout` was being used for animation loops and thought "Why don't we optimise that". So they built this API in which the browser can optimise concurrent animations in to a single reflow and repaint cycle. It also synchronises with the screen's refresh rate to reduce the jitter which can be seen when the `setTimeout` trigger just misses the screen refresh and skips a frame.


It also includes optimisations which are designed to increase battery life which mean that the frame will not trigger when the tab is not visible. This is the main reason we need separate logic and draw timing cycles.

 - [Paul Irish has written a good article on `requestAnimationFrame`](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) which is worth a read.
 - [Article on Creative JS](http://creativejs.com/resources/requestanimationframe/)
 - [Nicholas Zakas article](http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/)

## Step

The second key concept is the step, which I imagine as a commander. It's essentially the code which happens during each frame. Taking the interactions and applying time based logic like moving a ship or firing a bullet.

The objects used are much the same as you would see in any other model, they have properties and they can perform actions. Here is an overview of the `Ship` object.

    function Ship(){...}
    Ship.prototype = {

      // we need to be able to position it
      x:0, y:0, w:28, h:16

      // it needs to do stuff
      shoot: function(){...}
      jumpLeft: function(){...}
      jumpRight: function(){...}

      // we need to see it
      draw: function(){
        this.sprite.draw(0, this.x, this.y);
      }
    };

As you can see, it needs state to know where it is currently positioned but it can also perform actions like `shoot` and `jumpLeft`. All we are doing during this step is updating state across all the different objects on our stage.

### Collisions

Collisions were the biggest learning curve and can be an utter headache. It's a massive subject but here are a few gems which aren't immediately obvious.

#### Trig
The option I ended up using in the Space Invaders game was to simply use a bit of [Trigonometry](http://en.wikipedia.org/wiki/Trigonometry). In the logic frame I knew the x/y coordinates of the bullet and I knew the x/y coordinates of the Invader so I simply measured the distance and set `isHit` if it was less than a certain amount.

![](https://docs.google.com/drawings/d/1SlVMmUN8FjEpX67vEpvCW4AVc6HFgWwp99_-4L_DwKo/pub?w=960&amp;h=720)

Here's a simplified version of the code (notice the `checkHit` function):

    function Invader(){...}
    Invader.prototype = {

      // we need to be able to position it
      x:0, y:0, w:28, h:16,

      // how eeeeeeevil is this invader?
      isHit: false, // not at all if it's hit
      points: 10,   // more points for tougher invaders

      // it needs to do stuff
      checkHit: function(x, y){
        if (distance(this.x, this.y, x, y) &lt; 10){
          this.isHit = true; // KAPOOOOOWWWWW
        }
      },

      // we need to see it
      draw: function(){
        this.sprite.draw(0, this.x, this.y);
      }
    };

#### Grid

![stage grid collision detection](https://docs.google.com/drawings/d/1OHkoghVJxjO-TcI9wjoUp_iihbz4jAb5I0gyTrNKQWA/pub?w=960&amp;amp;h=720)

Another option is to split your stage up in to a grid and only allow a single object to fill each square. When objects move they will always be moved to a particular coordinate within this grid. If there is already an object within that box then you get a hit.

#### Hit Map

![html5 racer hit map](https://lh5.googleusercontent.com/-Dn1NqmUcy7k/USKXMsE08jI/AAAAAAAAuvA/VlfdV8B2No0/s800/racer-hit-detect.png)

I've already written about [using a hit map with canvas](/blog/2013/02/19/adding-a-track-and-colliding-with-it/) in my recent [article on a simple HTML5 Racer](/blog/2013/02/19/adding-a-track-and-colliding-with-it/) so take a look for more info on this.

There are obviously more options to you, this subject is pretty massive but hopefully this provides a good starting point to thinking about collisions.


## Draw

The biggest mindset switch comes when you start thinking of the draw step much like a still life painter. All it is doing is taking a snapshot of time looking though all the objects on stage and painting their current state on to the canvas. The main difference is that this refreshes rapidly (hopefully at around 60fps) and so becomes alive.

Here are a few canvas basics.

Add the canvas element to the stage

    <canvas id="canvas" width="500" height="500"></canvas>

Use the 2d context for this style of game

    var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d')
    ;

Then with that context you can do some drawing

    context.clearRect(0, 0, w, h);
    context.fillStyle = '#000';
    context.fillRect(0,0,w,h);

2d games love sprites and I've written a post [looking closer at sprites on canvas](/blog/2013/02/11/drawing-sprites-with-canvas).


## Slides

You can take a look at [the slides](https://davetayls.me/presentations/2013/adventure-game-dev-html5-canvas/index.html#/).

## Your challenge

This is very much a work in progress but I hope it inspires you to give it a go. Give me a shout if you want chat things through or need to tell me (graciously) that I've got something horribly wrong.


I began building a very [simple HTML5 racer game][2] back in November. It was my first exploration in to doing simple games with HTML5 and canvas.

It has lay dormant for a while, I'm going to take it another step further and put the car on a track in this article and inflict some speed drag when the car is not on the track.

In this series:

 - [Making a simple HTML5 racer game][2]
 - [Adding a track and colliding with it][3]
 - [Adventures in HTML5 Games](/blog/2013/03/25/adventures-in-html5-games-akqa-anoraks)

## A track

So open up your fave image package and draw a track. I searched for the [Silverstone Circuit](http://www.silverstone.co.uk/) and simplified it a bit. I ended up with this:

![racer track](https://lh4.googleusercontent.com/-v-tCYbVUXPg/USIyyOtZFjI/AAAAAAAAuuw/hyGo5KziCaM/s800/racer-track.png)

Once you have your track you need to draw the track under the car so I modified the game's `draw` function (within racer.js) with the appropriate `drawImage` call.

    // reference the track image
    var track = new Image();
    track.src = "track.png";
    ...

    function draw (car) {
        context.clearRect(0,0,ctxW,ctxH);
        // draw the image on the canvas context
        context.drawImage(track, 0, 0);
        ...
    }

You then just need to place the car at the starting line.

## Hit mapper image

I picked up a trick from [Thibaut Despoulain](http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html) where he used an outline image of the track where the colour at a certain pixel coordinate represented the drag on the vehicle.

It's easiest to explain with an example. Below we have part of the track with the hit map image overlaid. I have also added in two red points which we will use to check whether the car is on the edge of the track.

![hit detect image](https://lh5.googleusercontent.com/-Dn1NqmUcy7k/USKXMsE08jI/AAAAAAAAuvA/VlfdV8B2No0/s800/racer-hit-detect.png)

What we want to achieve is to check the pixel data of the hit map at the x/y coordinates of each red dot. If the pixel is white, we do nothing. But if the pixel is black then we apply drag to the car.

You can probably imagine that this technique could become quite sophisticated with varying shades of grey, and potentially utilising the RGB values of the data for different purposes.

### isHit function

Let's keep this simple for the sake of this example and just write a function which tells us if a particular x/y coordinates is over a black pixel.

We can then use [`getImageData`][0] function to query the image data of the hit map.

    var myImageData = context.getImageData(left, top, width, height);

We need the image to have been drawn to a canvas already and we can't really use the canvas we already have for the game. Fortunately we don't need a canvas element which is in the DOM, so we can just generate one on the fly for this purpose.

Here is an example HitMap class which can be used for each hit map you may need.

    function HitMap(img){
      var self = this;
      this.img = img;

      // only do the drawing once the
      // image has downloaded
      if (img.complete){
        this.draw();
      } else {
        img.onload = function(){
          self.draw();
        };
      }
    }
    HitMap.prototype = {
      draw: function(){
        // first create the canvas
        this.canvas = document.createElement('canvas');
        this.canvas.width = this.img.width;
        this.canvas.height = this.img.height;
        this.context = this.canvas.getContext('2d');
        // draw the image on it
        this.context.drawImage(this.img, 0, 0);
      },
      isHit: function(x, y){
        if (this.context){
          // get the pixel RGBA values
          var pixel = this.context.getImageData(x, y, 1, 1);
          if (pixel){
            // we consider a hit if the Red
            // value is 0
            return pixel.data[0] === 0;
          } else {
            return false;
          }
        }
      }
    };

You would use it like this:

    var hit = new HitMap(trackHit);

    // later
    hit.isHit(200, 200) // => true / false

## Making the hits affect the car

I think I will round this off with a peek in to how this could be used with the car object. I'll do another post investigating this.

The car can be set up with a few collision points at key places (front, back, left, right). We could then check if any of them are hit and apply the needed affect on the cars speed and direction.

    // collisions
    if (car.collisions.left.isHit(hit)){
      car.steerRight();
      car.decelerate();
    }
    if (car.collisions.right.isHit(hit)){
      car.steerLeft();
      car.decelerate();
    }
    if (car.collisions.top.isHit(hit)){
      car.decelerate();
    }
    if (car.collisions.bottom.isHit(hit)){
      car.decelerate();
    }

## Test it out

The latest version can be found on <https://davetayls.me/html5racer/> and you can take a look at the code on the [Part02 tag][1]


[0]: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas#Getting_the_pixel_data_for_a_context
[1]:https://github.com/davetayls/html5racer/tree/Part02
[2]:/blog/2012/11/27/making-a-simple-html5-racing-game/
[3]:/blog/2013/02/19/adding-a-track-and-colliding-with-it/



One of the first articles I wrote on this blog back in May 2010 was about [how useful sprites are and how to use them with CSS](/blog/2010/05/01/using-sprites-block-sliding-doors-inline-flow/). It's can be an absolute headache to implement simple spriting with CSS. Thankfully drawing sprites is implemented natively within the canvas api.

## Getting ready
Before I go in to specifics of drawing on a canvas all of these examples expect a 2D context to be available. I won't repeat this for each example so here is a quick example of how to get it.

### A bit of HTML
    <canvas id="canvas" width="500" height="500"></canvas>

### Create the 2d Canvas Context
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d')
    ;

## Drawing an image

We'll use an image sprite sheet I have been using to build a [simple Space Invaders game](https://davetayls.me/space-invaders/).

    var img = new Image();
    img.src = 'https://davetayls.me/space-invaders/sprites.png';

Next we can use the 2d context's `drawImage` function to pick out and draw the sprite. You can condense this but I'll separate it out so that it's easier to follow.

So first we are going to need dimensions and positions:

    var spriteWidth  = 350,
        spriteHeight = 170,
        pixelsLeft   = 170,
        pixelsTop    = 10,

        // Where are we going to draw
        // the sprite on the canvas
        canvasPosX   = 20,
        canvasPosY   = 20
    ;

    context.drawImage(img,
        pixelsLeft,
        pixelsTop,
        spriteWidth,
        spriteHeight,
        canvasPosX,
        canvasPosY,
        spriteWidth,
        spriteHeight
    );

See the [result here](http://jsbin.com/iqijex/1/edit).

## Create Reusable Sprite Objects

As I found recently, you will start to write the same code over and over again with sprites so you'll want to wrap the common code in to a reusable object.

Here's a Sprite class which will allow you to specify several sprite positions and then draw a particular one just giving the location on the canvas.

    function Sprite(img, width, height, positions){
      this.img = img;
      this.width = width;
      this.height = height;
      this.positions = positions;
    }
    Sprite.prototype = {
      draw: function(position, x, y){
          var pos = this.positions[position];
          context.drawImage(
            this.img,
            pos[0],
            pos[1],
            this.width,
            this.height,
            x, y,
            this.width,
            this.height
          );
        }
    };

This is how you would use it:

    var sprite = new Sprite(img, 32, 16, [
        // specify a few sprite locations
        [10, 523],  // green
        [131, 523], // pink
        [191, 523]  // hit
    ]);
    sprite.draw(0, 10, 200);
    sprite.draw(1, 50, 200);
    sprite.draw(2, 90, 200);

And [here is the finished example](http://jsbin.com/iqijex/2/edit)

I hope this has demystified the common sprite technique within canvas.



Another year is starting to blur in my memory and so it is befitting to reminisce and get down all the crazy fun things which have happened this year.

## All Change

Esther and I had decided to do a [leadership, character and identity](http://som.catchthefire.com/) course over in Toronto, Canada and so the year began with winding down at [Aqueduct](http://www.aqueduct.co.uk). It was [sad to leave the team](/blog/2012/03/14/aqueduct-a-place-on-the-edge) there who have become close friends.

It was a close call because 2 weeks before our flight, after a long search and two false starts we hadn't found someone to live with us in Toronto and watch the kids while we were in lessons. Of course we only wanted the best, our amazing kiddies are very much our priority and if we couldn't find someone who would love them as well as look after them then it would be better to call the whole thing off. But we trusted that this was the right thing to do and sure enough in a few days we were introduced to the lovely Brittany who had been hoping for an opportunity like this. It was amazing how it all worked out.

![Brittany and the Taylors](https://lh3.googleusercontent.com/-s6qzJUyJ9Ow/UPO_Xzlc6fI/AAAAAAAAujM/ASU0qXwLXvk/s800/.jpg)

We spent 4 months in Toronto (next to the airport) in a pretty full-on environment, living with 70 other people in shared accommodation. We then spent a month travelling: a week near the [Niagara Escarpment](http://en.wikipedia.org/wiki/Niagara_Escarpment) in a town called [Milton](http://en.wikipedia.org/wiki/Milton,_Ontario) (with Brittany's amazing family); then a week over in [Montreal](http://en.wikipedia.org/wiki/Montreal) and then three weeks in Denmark on a little island called [Bornholm](http://en.wikipedia.org/wiki/Bornholm).

> Don't let your gift take you where your character can't keep you!
> [James Levesque](http://twitter.com/james_lavesque)

Even if the teaching hadn't taught about character, shared living certainly helped us grow. We made some great friends and have some great experiences to look back on. I was able to do some speaking and writing on some of the big areas which I am passionate about like [passion](/blog/2012/07/01/find-me-a-passionate-team/) and honour.

We were fortunate to listen to some amazing people, with amazing life experiences.

## Pogo Kid

![Pogo Kid](https://lh5.googleusercontent.com/-D1X9vUSprTM/UPPJrdmEA1I/AAAAAAAAujs/G_uIHgVvKZY/s800/pogokid.jpg)

I managed to do some freelancing while in Canada but coming back to England in August saw the start of [Pogo Kid](http://pogokid.com) my new company set up to enable me to continue freelancing and contracting.

Loads of people have asked me why I decided to start my own company and I've boiled it down to three main reasons:

 1. I've always loved investing in people's potential. I want to give back
 2. Meet and learn from new people by stepping outside my comfort zones
 3. Flexibility as my family are looking at moving to Bath next year

It has only been a few months and so I am still on a steep learning curve for running the business side. I have already met some amazing people and worked with teams all over the world.

Take a look at my [work with me](https://davetayls.me/workwithme/) page if you think I would fit well with an up-and coming project. I love working with [passionate teams](/blog/2012/07/01/find-me-a-passionate-team/).

## New Technologies and Learning
Even with a five month gap I have been able to be involved in some fun projects this year. I have worked with
[The RFU Six Nations](http://www.rfu.com),
[The Football League](http://gettothegame.football-league.co.uk/),
[Sitecore](http://www.sitecore.net),
[Adam Ball](http://adamballonline.com/),
[ClearPeople](http://www.clearpeople.com/),
[United Studios](http://www.unitedstudios.com/)
and a few others I cannot mention.

I have worked on a whole range of technologies and frameworks. 2011 has been no different to previous years in that there is always new things to learn and new ways to develop. This year I have focussed on [Node.js](http://nodejs.org), [Express](http://expressjs.com/), [Backbone](http://documentcloud.github.com/backbone/), responsive sites, [TDD](http://en.wikipedia.org/wiki/Test-driven_development), [Grunt](http://gruntjs.com/).

## What am I looking for in 2013

I am becoming more daring in my old age, looking to take my dreams and see them become a reality so this year I am allowing myself the freedom to dream big and [allowing myself to be vulnerable as I try new things](http://devdaddies.github.com).

I am excited about settling down in [Bath, England](http://en.wikipedia.org/wiki/Bath,_Somerset) with the family, seeking out a place to be creative and new people who will continue to push me and inspire me.

I started doing some speaking and workshops last year amongst friends but I want to be a bit braver and speak at an open meet-up. I've come to the realisation that it's ok if I don't know everything to be able to speak, in fact it can be a great learning experience and a good testing ground for my ideas.

I finally want to expand my experience of programming languages and work with people using Ruby, Java, Python etc...I am excited to already be doing some backbone work alongside a Rails app, working with [Matt O'Riordan](http://mattheworiordan.com/) on [easyBacklog](http://easybacklog.com).

So here's to the new year. I feel so privileged to be able to know so many amazing people and be involved in so much fun life things :)


## Facelift
[The RFU](http://www.rfu.com) revisited the WE ARE campaign and brought a lighter face lift for the [RBS 6 Nations](http://www.rbs6nations.com/) in February last year.

## Kinetic and our old Social Friends

![video content](https://lh4.googleusercontent.com/-rjoCz3Sk3Gc/T0khIEoa1PI/AAAAAAAAkr4/LQ6WAP1EipQ/s640/Screen%2520shot%25202012-02-25%2520at%252017.56.04.png)

This site featured the previous kinetic timeline surfacing a mash-up of content from within [rfu.com](http://www.rfu.com) (including articles and videos) along with content from their social streams on [twitter](http://twitter.com) and [Facebook](http://facebook.com).

## New Fixtures
It also included brand new fixtures tables showing a combination of old scores and up and coming games for the tournament.

![fixtures and results](https://lh5.googleusercontent.com/-9OltICGLpbk/T0khIitpYCI/AAAAAAAAksM/i-JZksDRkzw/s640/Screen%2520shot%25202012-02-25%2520at%252017.56.46.png)

## Polish
It was great to polish up some of the loose ends from the WE ARE campaign and see this site come to life again.



I needed a way of applying velocity and drag to a new UI I am putting together, much like the one I built in to [jQuery.kinetic](https://davetayls.me/jquery.kinetic).
So I have pulled it out in to a simple reusable object.

I have called it [Velocitr](https://github.com/davetayls/velocitr#readme) and it's [source is on Github](https://github.com/davetayls/velocitr).

Usage
--

    // create an instance
    var v = new Velocitr();
    // set starting point
    v.move(30, true);
    // move
    v.move(50);
    // get velocity
    assert(v.velocity).equals(20);
    // apply drag
    v.drag = 0.9 // => default
    v.decelerate()
    assert(v.velocity).equals(18);

### Chaining

    var v = new Velocitr();
    v.move(30, true)
     .move(60)
     .decelerate();
    assert(v.velocity).equals(27);

Tests
--
It comes with a suite of tests which are written with the help of [QUnit](http://qunitjs.com) and [Pavlov](https://github.com/mmonteleone/pavlov) and can be found in the `test/` folder.

I have written a few QUnit tests but this is the first time I used [Pavlov](https://github.com/mmonteleone/pavlov) and I much prefer the syntax.

Here's a little taster.

    pavlov.specify('Velocitr', function(){

      describe('velocitr', function(){

        it('should cap the velocity', function(){
          var v = new Velocitr();
          v.set(30);
          assert(v.velocity).equals(30);
          v.set(100);
          assert(v.velocity).equals(40);
          v.set(-100);
          assert(v.velocity).equals(-40);
        });
        it('should create positive velocity when moved forward', function(){
          var v = new Velocitr();
          v.move(30);
          assert(v.velocity).equals(30);
          v.move(-30, true);
          v.move(-10);
          assert(v.velocity).equals(20);
        });
        it('should be able to chain', function(){
          var v = new Velocitr();
          v.move(30, true)
              .move(60)
              .decelerate();
          assert(v.velocity).equals(27);
        });

      });

    });

## Enjoy
I thought this might be useful for others wanting a similar functionality.


I needed to add automated tests to jQuery.kinetic
--

I released [jQuery.kinetic](https://davetayls.me/jquery.kinetic), a while ago. It's a simple jQuery plugin which adds smooth scrolling and decelleration to containers.

I built a series of manual test pages to make sure that subsequent releases didn't break the functionality but with recent requests for updates I decided to investigate writing some automated tests to catch potential issues quicker.

The issue with writing automated tests for this plugin is the fact that it's functionality is based on mouse and touch drag movements.

Selenium and SauceLabs
--

I began by writing some selenium tests using [node](http://nodejs.org)'s assert library and [wd](https://npmjs.org/package/wd) connecting to a locally running selenium server; managed to immitate the dragging movements using Selenium Web Driver's `buttonDown`, `moveTo` and `buttonUp` commands.

    function dragOverElement(driver, elementId, cb){

        // check element exists
        driver.elementByIdOrNull(elementId,
            function(err, element){

        // place mouse inside element
        driver.moveTo(element, 300, 300, function(err){

        // mouse buttonDown
        driver.buttonDown(function(){

        // move (drag) mouse
        driver.moveTo(element, 10, 10, function(err){

        // release to perform drag action
        driver.buttonUp(function(err){

        // check kinetics internal settings
        // to see if the movement has created velocity
        driver.eval('$("#'+ elementId +'").data("kinetic-settings").velocity', function(err, velocity){

            // return result
            cb(driver, err, velocity);

        }); }); }); }); }); });
    }

Working really nicely, I decided to see if I could integrate the tests with the excellent [Sauce Labs](https://saucelabs.com/). The tests integrated well with the help of the [sauce-node-demo](https://github.com/jlipps/sauce-node-demo) project on [Github](http://github.com) and the related [screen cast](http://youtu.be/Dzplh1tAwIg). And it was then I hit a brick wall. These mouse interactions did not work accross all the desktop browsers and *very importantly* the mobile devices which this plugin is especially used for.

Grunt's built in Server, qUnit Runner in PhantomJs
--

After stabalising my emotional state and peeling my head off the table I looked at alternative ways of checking that the functionality of the plugin worked as expected across all these devices.

[qUnit](http://qunitjs.com/) soothed my soul, mocking the events generated by the interactions `mousedown`, `mousemove`, `mouseup`, `touchstart`, `touchmove` and `touchend`.

This looks a little like this:

    var mdEvent = $.Event('mousedown'),
        mmEvent = $.Event('mousemove'),
        muEvent = $.Event('mouseup');

    $.extend(mdevent, {
        target: target,
        clientx: from[0],
        clienty: from[1]
    });
    $.extend(mmEvent, {
        target: target,
        clientX: to[0],
        clientY: to[1]
    });

    $el
        .trigger(mdEvent)
        .trigger(mmEvent)
        .trigger(muEvent);


If you need to simulate a gradual drag then you would need to trigger multiple `mousemove` events but this is all I needed to get a velocity within the kinetic window.

Once I had written the tests to cover the core functionality I could then use some really useful in-built features of [Grunt.js](http://gruntjs.com).

My default grunt task lints the JavaScript, starts an internal static server, then runs the qUnit tests through PhantomJs. I get feedback from all these steps within a few seconds which means I actually run them constantly because it's not a pain in the rear.

Travis CI integration
--

If you haven't taken a look at [Travis CI](http://travis-ci.org) yet I really recommend you do. They provide CI in the cloud for open-source projects as well as their pro service. It's easy to set up a hook from a [Github](http://github.com) project so that it runs automated tests on push.


### Travis build status

They also provide a useful status image to show the project's current build status.

[![Build Status](https://secure.travis-ci.org/davetayls/jquery.kinetic.png)](http://travis-ci.org/davetayls/jquery.kinetic)

*if this image is red feel free to [tweet me](https://twitter.com/davetayls)*

### Set up

The set up was pretty straight forward, you include the grunt dependency in your package.json and specify what command `npm test` should perform.

You also need a `.travis.yml` file in the root of your project which tells Travis what platform to run the tests on.

### package.json

    "devDependencies": {
        "grunt": "0.3.x",
        ...
    },
    "scripts": {
        "test": "grunt --verbose"
    }


### .travis.yml

    language: node_js
    node_js:
      - 0.8

### Issues

There is only one issue at the moment, that is that the PhantomJs runner occassionaly times out for no reason. But [this looks to be resolved in the next major release of Grunt](https://github.com/gruntjs/grunt/issues/219).

What Next
--

I finally need to hook up these tests with Selenium to check the qUnit results so that I can get them back in to Sauce Labs and check the qUnit results across all the supported desktop and mobile browsers.

p.s. I love Sauce Labs, what an amazing service!


If you want to open the result of a form submission in to a new window you can without having to go via the server. This is how you would do it using Javascript.

Say we have a form like the following:

	<form class="windowForm" action="/your/post/page" method="post">
		<input  type="text" name="name"
				value="Dave Taylor" />
		<input type="submit" value="Send" />
	</form>

Ordinarily when submitted this will send the current page to the action location of the form. However there are times when you might want to post the form in to a new window are an `iframe` within the page (say inside a dialog).

### Dynamically open a new window and attach it as the forms target

The way you would do this is to set the `target` attribute of the form to match the name of the iframe or window. Here is [the MDN `window.open` specification](https://developer.mozilla.org/en-US/docs/DOM/window.open).

	$('.windowForm').submit(function(e){
		// specify a unique target name
		var target = 'windowFormTarget';

		// open a new window and name it
		window.open('', target, 'width=500,height=300');

		// set the target of the form to be
		// the window name
		this.setAttribute('target', target);

		// allow the form to be submitted normally
	});

And that's pretty much it. The target attribute of a form is a little less well known than the `target` attribute on a link.

Here's the [code on jsBin](http://jsbin.com/itubak/1/edit)


I've been wanting to try my hand at doing some game development for a while and I finally managed to make a start.

I decided to make a simple driving game using HTML5. I began doing a bit of a search for tutorials which build a simple top view racing game but didn't stumble upon any for HTML5. I did find [a flash tutorial](http://www.emanueleferonato.com/2007/05/15/create-a-flash-racing-game-tutorial/) which I have used as a starting point.

In this series:

 - [Making a simple HTML5 racer game](/blog/2012/11/27/making-a-simple-html5-racing-game/)
 - [Adding a track and colliding with it](/blog/2013/02/19/adding-a-track-and-colliding-with-it/)
 - [Adventures in HTML5 Games](/blog/2013/03/25/adventures-in-html5-games-akqa-anoraks)

You can see the latest version on github (<https://github.com/davetayls/html5racer>).

I grabbed a top view sprite of a car and started to build the code.

![html5 top view racer](https://lh4.googleusercontent.com/-gN4Z6GZyw0I/UBh0dE3XkYI/AAAAAAAArOQ/sLmurCojpWg/s800/Screen%2520Shot%25202012-07-22%2520at%252013.51.57.png)

The basic files
--

I have kept this really simple, so there is just one HTML file and CSS file and then I am adding links to individual JavaScript files manually.

NB. I'm not going to cover the basics of clearing the canvas and triggering another animation timeout as that would make this article unnecessarily long and there is plenty of information out there. You can also take a look through the code on github as it's pretty simple.

### The HTML file looks like this:

    <!doctype html>
    <html>
      <head>
        <title>Simple Racer</title>
        <link href="racer.css" rel="stylesheet">
        <style type="text/css">
          canvas { border: solid 1px #ccc; }
        </style>
      </head>
      <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <div>
          Player: x <span id="px">0</span> y <span id="py"></span>
        </div>
        <script src="jquery.js"></script>
        <script src="helpers.js"></script>
        <script src="car.js"></script>
        <script src="racer.js"></script>
      </body>
    </html>


### helpers.js

The helpers file includes some useful helper methods for working with canvas. One of the really helpful functions which I have picked up from a [Creative Js article](http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/) is the `drawRotatedImage` function.

    var TO_RADIANS = Math.PI/180;
    function drawRotatedImage(image, x, y, angle) {

        // save the current co-ordinate system
        // before we screw with it
        context.save();

        // move to the middle of where
        // we want to draw our image
        context.translate(x, y);

        // rotate around that point, converting our
        // angle from degrees to radians
        context.rotate(angle * TO_RADIANS);

        // draw it up and to the left by half the width
        // and height of the image
        context.drawImage(image, -(image.width/2), -(image.height/2));

        // and restore the co-ords to
        // how they were when we began
        context.restore();
    }

This function is used to draw the car image on to the canvas at a particular angle.


Movement
--

I didn't want my car to accelerate and turn in a linear fasion so I altered the acceleration code to use multiplication instead of simple addition and subtraction.

My `Car` object held all the properties needed to determine the state of how the car is moving.

	Car.prototype = {
		x: 0,              // position
		y: 0,
		code: 'player',    // allow players in future
		acceleration: 1.2,
		rotationStep: 5,   // how fast to turn
		rotation: 115,     // current angle facing
		speed: 0,
		speedDecay: 0.97,
		maxSpeed: 7,
		backSpeed: 1.1
	}

I also separated out the instructions for accelerating, decelerating and turning from the keyboard event listeners so that I can hook it up to other devices later.

Where Next
--

I'm now looking in to how to do collision detection, which is proving to be a bit of a brain freeze.

I'll also add an online playable version at some point.




I stumbled on this frustrating iOS5 bug where adding Google maps to a page made elements disappear.

Replicating the bug
--

This bug appears in iOS 5.1 where the size of a negative text-indent value is greater than -9999px

You can [view the bug live](https://davetayls.me/teststation/bugs/ios5/google-maps-text-indent.html).

In this example it causes the header content to disappear. I have stripped away CSS till this basic example
is left to replecate the bug.

    .container {
        position: relative;
        z-index: 100;
    }
        .indent {
            display: block;
            text-indent:-999999px;
        }
        .map {
            background-color:Gray;
            height:213px;
            width:220px;
        }


Here's the markup

    <div class="container">
        <h1>This will disappear when we load the map in iOS 5.1</h1>
        <a class="indent" href="/search">Search</a>
    </div>
    <div id="map_canvas" class="map"></div>

Now as soon as you initialise the map the whole `.container` element will dissappear!

Fix
--

There are a few other reasons not to use the negative text-indent for image replacement
in CSS so the best solution is to change the method you are using to the one in [HTML5
boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css).

    .ir {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        /* IE 6/7 fallback */
        *text-indent: -9999px;
    }

    .ir:before {
        content: "";
        display: block;
        width: 0;
        height: 100%;
    }


If you definitely want to use the negative text-indent then you just need to make sure
the value doesn't exceed -9999 (eg -99999px). So lob off one of the 9s and you should
see the hidden elements again.

One of the last projects I completed before going away to [Toronto](http://www.toronto.ca) in March 2012 I was a [responsive web site and app](/blog/category/responsivedesign/) for an annual [Sitecore](http://www.sitecore.net) event called [Digital Trendspot](http://www.sitecore.net/events/TrendspotUK/). This was a great project to be involved with as it used some features like *Geo Location* and *CSS Media Queries* to create a web site which could also be used as an app for the event's attendees on the day.

Showcase
--

Here is a short showcase video to give you an idea of how the app looked and responded to it's surroundings.

<iframe src="http://player.vimeo.com/video/51468900" width="500" height="281" frameborder="0" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true">vimeo</iframe>

You can [Watch it on Vimeo](http://vimeo.com/51468900)

Geo Location: Take me to the venue
--

As with all these new features I needed to consider how that feature would be used in the case that it didn't exist in the user's browser and then enhance the experience for the browsers that did.

For the Geo Location functionality the markup started as a simple link to the correct details of the venue on Google maps. The JavaScript then used the same location and updated the link with the users current lat-long so that it would also give directions.

I opted to use a very simple "as the crow flies" distance calculation which just takes two lat-long coordinates and calculates the distance between them. If I had a little more time I would have liked to query the Google directions api and see if I could get a more precise distance from that.

Web App
--

I built this site so that it could be embedded in to a web app framework like [Phone Gap](http://phonegap.com). It also allowed the ability to be run full screen from the home screen on Apple devices.

Improvements and Conclusion
--

Other improvements I would have liked to build in would have been to allow most of the features to be available offline as the attendees were travelling to the venue (ie via the underground). This would have been relatively straight forward with HTML5's offline manifest.

I am excited as the browsers in mobile and tablet devices become faster but as for now I personally notice the performance boost by using a native app. Having said that I was quite surprised at how responsive this app was. For something not very complex an HTML5 web app seems to be pretty viable.

I'd love to hear your thoughts, I'm always looking to improve. Leave a message below or I'm [@davetayls on twitter](https://twitter.com/intent/tweet?url=/blog/2012/10/19/sitecore-trendspot-responsive-web-site-and-app/&via=davetayls)



Have you ever come across the term "Catastrophic Backtracking" in relation to regular expressions? Well I came face-to-face with it's fury the other day while researching a bug in an old CMS module which I was trying my best to fix.

It started out with an *outrageous* claim from a QA tester that he could crash Chrome by typing in a large number of characters in to a text box. I tested it out and to my surprise the problem was worse than he realised and it all stemmed from a particular regular expression being used to validate an email address. It looked like this:

    ^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$

Looks pretty harmless?? But combine it with a test like so:

    /^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$/.test('dddddddddddddddddddddddddddddddddddddddd');

Whoooop browser bye bye. In fact you could simplify it to the following test as we found on the [stackoverflow thread](http://stackoverflow.com/questions/12803859/regexp-and-string-combination-crashes-chrome):

    /(d+)*A/.test('dddddddddddddddddddddddddddddddddddddddd');

So what's going on here? Well for the full explanation provided by [Tim](http://stackoverflow.com/users/20670/tim-pietzcker) take a look at [the answer](http://stackoverflow.com/a/12809054/138733), but to give you a quick summary. `(d+)*` in essence can be fulfilled by the following matches (each group separated by spaces):

    ddddd
    dddd d
    ddd dd
    dd ddd
    d dddd
    ddd d d
    dd d dd
    d d ddd
    dd dd d
    d dd dd
    d ddd d
    d d d dd
    d d dd d
    d dd d d
    dd d d d
    d d d d d

This essentially means that there are an exponential number of possibilities dependant on the length of the string, and at a character length of only 40 you have a possible 549,755,813,888 combinations which takes time to go through and causes the browser to hang.

So keep an eye out for the following combinations in your regular expressions where d can be a single character or (more likely) the result of another block:

    (d+)*
    (d*)*
    (d+)+

Read more [information on Catastrophic Backtracking](http://www.regular-expressions.info/catastrophic.html).

*Sidenote*: As a lot of people made quite clear in the discussion on Stack Overflow, it isn't recommended to use a regular expression to test the full email. It is much safer and efficient to break it up in to it's sections and validate each individually.



I am working on a rewrite of [markdown writer](http://markdown-writer.herokuapp.com), my playground for working with [backbone.js](http://backbonejs.org) and HTML5 offline capabilities. There are a few new features which I am building in to what is currently a very basic app.

One of them is enabling you to log in using [Github](http://github.com) and save your offline articles to a [Gist](http://gist.github.com). To do this I have had to connect with Github using [OAuth2](http://oauth.net/).

Create a Github Application
--

![Github Application Settings](https://lh6.googleusercontent.com/-3QP5zBkGjWw/UHH2vcZLW6I/AAAAAAAArao/Vgd7q7Dbgbk/s800/Screen%2520Shot%25202012-10-07%2520at%252022.08.31.png)

You can set up a Github application by clicking on the Register new application button on your [applications settings](https://github.com/settings/applications) page.

EveryAuth and Express
--

I researched several options for implementing OAuth and eventually settled on using [EveryAuth](http://everyauth.com/#other-modules/github-oauth) because it integrates well in to [ExpressJs](http://expressjs.com) which is what I am using as a platform to run this application.

![Github Application Page](https://lh5.googleusercontent.com/-MRR8bYu_20Q/UHH2vbka-RI/AAAAAAAAras/HHZQqmBNj78/s800/Screen%2520Shot%25202012-10-07%2520at%252022.11.56.png)

There has been a lot to understand as I haven't looked at OAuth before, but I found [Github's developer guide](http://developer.github.com/v3/oauth/) a good place to start. I'm not going to go in to the specifics now but here are the key ingredients to integrating with express.

### Require and Set up everyauth


    var everyauth = require('everyauth')
    ;

    everyauth.debug = true;
    everyauth.github
      .appId("APP_ID")
      .appSecret("APP_SECRET")
      .entryPath('/auth/github')
      .callbackPath('/auth/github/callback')
      .scope('gist')
      .findOrCreateUser( function (sess, accessToken, accessTokenExtra, ghUser) {
          // user functionality
      })
      .redirectPath('/');

### Include the middleware

    // Configuration
    app.configure(function(){
        ...

        app.use(express.session({ secret: 'your secret here' }));
        app.use(everyauth.middleware());

        ...
    });


Local Development on OSX Mountain Lion
--

![Enable Application](https://lh6.googleusercontent.com/-9Qpv28Q_fPQ/UHH2vfVPbXI/AAAAAAAArak/OWmE3BUVvVo/s800/Screen%2520Shot%25202012-10-07%2520at%252021.06.15.png)

I hit a wall when I had authorised the app on Github and it sent the code back to the callback url specified on the Applications page. You can specify [`redirect_uri` parameter](http://developer.github.com/v3/oauth/#redirect-urls) but as the spec points out, you are limited to redirecting to urls on the same domain (or https/http unlike the usual same domain policy).

    CALLBACK: http://foo.com

    GOOD: https://foo.com
    GOOD: http://foo.com/bar
    BAD:  http://foo.com:8080
    BAD:  http://oauth.foo.com:8080
    BAD:  http://bar.com

If you try the error you get looks something like this: `http://markdown-writer.herokuapp.com/auth/github/callback?error=redirect_uri_mismatch`.

I updated the callback url within the application on Github to use `localhost:3001` (also using the port I am running my node process on). This seems to do the trick for now but once this goes live this setting will need to stay pointing at the live site I expect.

### Reverse Proxy
The solution on my machine was to set up a reverse proxy through Apache. I can temporarily map the live url to my local machine and point it at my local running node.js application.

#### NB Enable Virtual Hosts for recent Mountain Lion updated macs
If you have recently updated to Mountain Lion you might need to re-enable the vhosts Include on line #477 of your `/private/etc/apache2/httpd.conf`

    # Virtual hosts
    Include /private/etc/apache2/extra/httpd-vhosts.conf

#### Add a new VirtualHost config
As pointed out in [this useful article](http://thatextramile.be/blog/2012/01/hosting-a-node-js-site-through-apache) your apache needs to to have the [`mod_proxy`](http://httpd.apache.org/docs/2.2/mod/mod_proxy.html), and [`mod_proxy_http`](http://httpd.apache.org/docs/2.2/mod/mod_proxy_http.html) modules loaded. If you are using Mountain Lion these are loaded ☺ and you should be able to just continue.

Add a similar VirtualHost config to your `httpd-vhosts.conf` file

    <VirtualHost *:80>
        ServerAdmin dave@the-taylors.org
        ServerName markdown-writer.herokuapp.com
        ServerAlias markdown-writer.herokuapp.com

        ProxyRequests off

        <Proxy *>
            Order deny,allow
            Allow from all
        </Proxy>

        <Location />
            ProxyPass http://localhost:3000/
            ProxyPassReverse http://localhost:3000/
        </Location>
    </VirtualHost>

#### Restart Apache
Do a restart of your local Apache server (requires to be run as root)

    $ sudo apachectl restart

#### Update Hosts file
Edit your `/etc/hosts` file and point your live url to your local machine.

    127.0.0.1       markdown-writer.herokuapp.com


#### Test Application
And then as long as your local node app is running you should be able to visit the url specified in the VirtualHost config.


Still a Work in Progress
--

I'm still working on this so I'll try and post further steps once I have sussed out the full journey. It's exciting how accessible it is to be able to achieve something like this.

Please, please, please let me know if there is an easier way of doing this!


I attended the second [#anoraks](https://twitter.com/#!/search/%23anoraks) talk last Thursday at AKQA in London. It was great to hear [@denodell](http://twitter.com/denodell) speak on responsive design. He did a really great job looking back at the past and some creative ideas for the future.

One thing which caught my attention was how he covered the topics of supporting older versions of IE. We're in an intermediate stage with media queries where there are still a significant number of users out there who are on browsers which don&rsquo;t support them.

Dennis covered a couple of valid options and I want to highlight a third which has worked really well for the responsive projects I have been involved with over the last 8 months.

With all these options you need to approach the build mobile first and not want to use jerky JavaScript polyfills.

## Mobile version for IE 6/7/8

    <link rel="stylesheet" href="core.css" />

The first option is to just serve the mobile site to any browser that doesn't support media queries.

### When this could be an option:

 - Analytics show a very small amount of users on those browsers
 - Client is completely aware and happy because of the time savings you may gain from this approach.
 - If the responsive nature of the site is so complex that the other two options aren't feasible

### Issues

 - You could be excluding a good number users from seeing important relevant content.
 - It may be very hard to persuade a client who currently uses IE8

## Mobile version with IE specific stylesheet

    <link rel="stylesheet" href="core.css" />

    
    

This is when you serve the mobile first designs alongside a single style sheet loaded by IE using special comments. This takes the mobile site and makes small tweaks to use more of the width of a desktop screen.

### When to consider this

 - If you are pretty happy with serving the mobile version but just want to make a few minor changes so that IE 6/7/8 fit the desktop a little btter


### Issues

 - You'll have more maintenance for the IE specific style sheet which has bit me in the past. So you don't want a lot in this stylesheet.
 - You could be duplicating work and code.


## Apply media queries incrementally

    <link rel="stylesheet" href="core.css" />

    <link rel="stylesheet" href="minw768.css" media="print, screen and (min-width:768px)" />
    <link rel="stylesheet" href="minw990.css" media="print, screen and (min-width:990px)" />

    
    

I code the css mobile first and then apply css for incrementing sizes according to a minimum width. We put those styles in separate style sheets with the appropriate media queries attached to the link tag.

Because IE 6/7/8 don't understand media queries we reference them inside a special comment without the media queries.

Because the styles are incremental, when we have them all in the page for IE 6/7/8 you always get the desktop version of the site.

### Considerations

 - When you need to support and serve a full desktop site to older versions of IE
 - You can have quite complicated media queries being used as long as they work incrementally.
 - You can also add media queries inside the files which you don't want to affect desktop sizes. e.g. `max-width:480px` etc

### Issues

 - You've got to remember to use styles incrementally
 - You often need to be overriding styles already set

## Conclusion

I hope this gives a few ideas for implementing responsive designs. I am really enjoying building sites that work across devices. As always any questions or comments are welcome of course.


I have been away from permanent developer work on a 5 month course focusing on _character_, _leadership_ and _identity_ and have been impacted so much by the experience.

I've really missed the people I used to work with over at [Aqueduct](http://www.aqueduct.co.uk), they're flippin amazing. It has me thinking: I want to always surround myself with passionate people. Our personal lives affect the standard of work we produce and the level of creativity we put in to our daily routines. Here are a few things I am learning.

Invest
---
Unfortunately in today's culture you're often fighting an uphill battle. The constant change in what is considered a "necessity" people are approaching life and it's values within a culture of impermanence. This impermanence is killing people's passion. Fewer and fewer things are seen as worth investing in.

I say, buck the common trend. Make decisions about what you want to stick to and _develop_.

> When you invest, you value.

When you value, you engage yourself. When you engage, you become passionate. Ask yourself: what am I investing in?

Success
---
We are fed a lot of confusing messages. Things should be done for us and yet our apparent worth to society is based on our _success_ or _acheivements_.

Whether it's the cleaning at the office or the "app for that" mindset. It's so frustrating that people can be so afraid of responsibility and risk in the small things and on the flip side we punish ourselves when we fail at being perfectly successful.

Check yourself. This is just breeding an internal culture of blame. It's a crap way to live, it's a passion killer lets face it.

How about success being based on the person you are becoming? Get that sorted and the labels of success will take care of themselves.

Cultivate a healthy thought life
---
Only 10% of happiness is based on our external circumstances. 90% is internal and yet we neglect many of the things which will spawn happiness: challenge; risk; newness; even a level of stress is important for us to be happy and to be passionate people.

Learn something new. Don't just stick to things which are similar to your current interests but be bold and learn about something you know little or nothing about.

Aim for a healthy thought life as it will effect the rest of your life.

> Your level of passion correlates to
> your willingness to embrace
> risk, challenge and newness.

Momentum
---
In order to have impact you have to have momentum. Momentum is the product of both velocity and mass.

This means that you can expend a lot of energy but see little impact because you are not digesting and applying what you are investing in. Alternatively you could be going for such a massive goal that you lose the willingness to achieve it and have no velocity.

Combine the two in the right amounts and you will be cultivating a passion for what you are doing. Passion is not an emotion driven thing so expect to put in the effort. But _it is worthwhile_.

Don't kid yourself, you never stay still. If you're not growing then you are dying. You're either advancing or retreating, expanding or contracting. This isn't a momentary concept but a accumulation of how you fill your time.

Obstacles to having passion
---

![obstacles](https://lh3.googleusercontent.com/-MPGAlY_PAP4/T_CoT6TTDwI/AAAAAAAAqw4/2MWTiBxDz2s/s800/skitched-20120623-212611.jpg)

There are two main obstacles.

**Face your fear of the unknown**. In fact overcoming fear can be a major passion inducing victory.

The other thing you need to watch out for is **the desire to be too comfortable**. Don't get me wrong: there is nothing wrong with being comfortable and even slowing right down when you need to rejuvenate.

Keep in mind what I've said previously. If you're not advancing then you will be retreating so you could find yourself in a bit of a rut if you sit for too long. You'll know when you've got the rest you need, think of it like breathing.

> It's not about the destination,<br />
> it's about the journey

When you are doing something you are passionate about the most important thing isn't the destination or the goal. It's the journey. Goals are great, but don't forget to enjoy the process of achieving them.

Here is what I feel it boils down to. I'm looking for these three things in my life.

- Intention
- Momentum
- Rest and Play (like breathing)

I'm now getting ready to be back at full time work doing web development (or something of the sort) and I'm looking to find a passionate team to get involved with. It's going to be great.



We had this elephant in the closet issue while working on a project about a year ago. We were serving the website using a regular http connection but switching to a secure https connection. The login and registration process worked beautifully as we began the build supporting the organic non-javascript journey.

## dem dialogs

We hit the issue as we began to build the dialogs. We quickly realised that the user would need to log in using a secure page on a dialog from within a non-secure parent page. These two pages would also need to communicate to make the user experience smooth and clear. We researched various ways of talking cross domains but found the browsers we needed to support weren't consistent enough.

Fortunately as the majority of the site was to be secure anyway we opted to serve the site completely from https but I hated being beaten.

## victory

Being a stubborn perfectionist I was determined to find a way to get this to work and I got the opportunity last month.

## iFrame Messaging

The key behind this technique is that pages on the same domain and protocol can communicate with each other as long as they have access to each others window. There are various ways this could work but this is how I suggest you start.

### 1. Parent page

Your parent page should expose a public function which will provide the functionality you want to use.

    window.myPublicFunction = function(message){
        console.log(message);
    };

Remember if you're writing any values in to the page you need to escape the value to protect against any potential cross-site scripting vulnerabilities.

### 2. Script Interface

On the same domain as your parent page you will need a page which simply includes a single script reference.

> Watch out for potential cross-site scripting vulnerabilities.

This page will be called for every message you want transmitted across domains/protocols to the top window. You would call it passing it a `key` and a `value` query string value.

For example, say you wanted to pass log messages you could call the page like: `http://mysite.com/xinterface.html?key=LOG&value=message`.

#### xinterface.html

This is what the html page would look like.

    <script src="xinterface.js"></script>

#### xinterface.js

The script would use a secure regular expression to pull out the values you want from the url. And then call an appropriate function in the top window.

    // use a strict regular expression for security
    var query = /key=([A-Z]*)(&value=([a-z|A-Z]*))?/.exec(location.search),
        key   = query[1],
        value = escape(query[3]);

    // check if the url is valid
    if (query && key) {

        // call the public function
        if (key === 'LOG') {
            window.top.myPublicFunction(value);
        }
    }

### 3. The Dialog Page

The final piece of the puzzle is the secure page itself. You will have an iframe positioned so that it is used for the dialog content and it will be showing the secure page (eg: https://mysecuresite.com/dialog.html).

Now whenever you want to communicate you just inject an invisible iframe within the page with the appropriate url.

You could wrap it in a function:

    var body = document.getElementsByTagName('body')[0],
        xinterfaceUrl = 'http://mysite.com/xinterface.html';

    function communicate(key, value){
        var src = xinterfaceUrl +'?key='+ key +'&value=' + value,
            iframe = document.createElement('iframe');
        iframe.src = src;
        iframe.style.display = 'none';
        body.appendChild(iframe);
    }

## Feedback

As always, one of the reasons I blog about these things is to validate the thinking so If there is something I'm missing let me know. Hope this is useful.

### NB. The Future of Cross Domain or Protocol Communication

As the older browsers die out there are new ways of [giving permission for specific domains to communicate between each other](http://www.caniuse.com/#search=domain) but that is for another post.


I have just finished my time at [Aqueduct](http://www.aqueduct.co.uk) after two and a half years leading the front-end work there.

I leave very satisfied, after feeling like we've come a long way in that time and the path ahead for those guys is looking pretty exciting.

This small agency I joined has grown (and grown up) quite significantly over my time there. This has been credit to a number of people. For the dev team ask any of the developers that have gone through the agency over the last few years and they will all tell of how inspirational [Guillaume](http://twitter.com/theg) is as a person and how he has built a dev team which is now fueling itself to do great work. He's a good one for quotes and this was a gem recently:

> We go all out for success knowing that we will sometime fail.
> But what we don't want is to sit in the middle

I've often taken as one of my own mottos "You've got to fail to succeed", in fact in my view if you're not failing then you're not taking enough risks and aren't pushing boundaries. [Aqueduct](http://www.aqueduct.co.uk) gave me the freedom to take risks and in the [Agile](http://en.wikipedia.org/wiki/Agile_software_development) way tought me how to fail fast so that you can rectify and learn from your mistakes.

Highlights
--

![Lloyd's of London](https://lh6.googleusercontent.com/-gsGQV_JjXsw/T2Dcw0iWgdI/AAAAAAAAlmM/Wnyfo6Jiakg/s640/lloyds.jpg)

I was thrown in at the deep-end with not one but 2 projects each of which were larger than I had done before. I learnt so much during the [Lloyd's of London](http://www.lloyds.com) and [British Red Cross](http://www.redcross.org.uk) projects, partly from late night researching, tweaking and fine tuning but also learning from the brilliant teams around me especially from [Martin](http://twitter.com/marto83), [Arnold](http://twitter.com/arnoldzokas) and [Simon](http://www.linkedin.com/in/nimblelotus) at the time.

![FA Just Play](https://lh3.googleusercontent.com/-0fmaC5PZ7O0/T0kfmb8gH5I/AAAAAAAAkrM/wsQRS_FYCus/s800/justplay.jpg)

Recently I have also had the privilege to work closely with [Tristan](http://twitter.com/tristanpeters) on a [campaign site](http://justplay.thefa.com) for [The FA](http://www.thefa.com) which picked up the [first award](/blog/2011/11/24/fa-just-play-wins-category-sitecore-site-of-year/) attributed to one of my projects. This was a great close collaboration on many fronts and I have a lot of respect for designers who are creative with technology and are open to be inspired by us techie people. He was able to mould it in to a great site we are all proud of.

![RFU Six Nations](https://lh3.googleusercontent.com/-d_NqQPxdurY/T0khHtVrLdI/AAAAAAAAkrw/WnoTxwz88ok/s640/Screen%2520shot%25202012-02-25%2520at%252017.55.50.png)

Finally we have recently been involved in some really great work for the [RFU](http://www.rfu.com). We inherited their current site and have been gradually cleaning up and optimising the site along with doing some fun front-end heavy stuff for the World Cup and currently the Six Nations.

Team
--

The best thing about working at [Aqueduct](http://www.aqueduct.co.uk) was the team, I was really fortunate to be able to work closely with both the developers and designers.

![Steve](https://lh4.googleusercontent.com/-1Mw9ryTBWSE/T2EveTPdyhI/AAAAAAAAlmU/RWafKSKnscE/s400/2012%252019%253A54%253A21.jpg)

It was also great to be directly involved in recruiting and building the front-end team. [Steve](http://twitter.com/stevezol) joined me on a permanent basis in January 2011 and together we have been able to see the fruits of sticking to standards and continuously pushing our capabilities.

It is a real strength that people from all corners of the agency are empowered to bring value to the agency. And this is encouraged from the very top.

## Byez

And so as I take my family on a short adventure over the next five months, I'm sad to leave all that is bubbling in this great agency but look forward to continuing a relationship with them and recommend anyone who want's to "make cool things" to check them out.

I have just finished a project for [Adam Ball](http://www.adamballonline.com) who is an artist based in London. This has been a real challenge and has made me push boundaries in to new territory.

## Responsive Design, Responsive Images
The main area has been with serving appropriate image sizes according to the device. I have previously talked about my [responsive images jQuery plugin](/blog/2012/01/29/jquery-lazyloader-organic-responsive-images/) which is a good stop gap for getting this to work across the current browser landscape. I have liked working with responsive images in this way because it is a much more organic solution than the ones I have seen elsewhere. It'll be great when we've got something natively to handle this sort of thing.


![Blackberry Simulators](https://lh6.googleusercontent.com/-SGzig07yJsI/TzkEOTBXHTI/AAAAAAAAkWw/dWYGEvPlDSo/s400/blackberry-simulators.PNG)

Installing Blackberry Simulators is a bit of a nightmare. Here are some findings to make the process a little smoother.

## Install Java JDK IMPORTANT

 - IMPORTANT: Use the Sun JDK, not any other distribution.  
 - IMPORTANT: Install JDK 1.6 or higher, 
 - IMPORTANT: Install the 32-bit version even if you are running a 64bit Machine.

## Set up JAVA environment

 - Create a JAVA_HOME environment variable.
    - Open System Properties -> Advanced -> Environment Variables
    - Create a new system variable
    - Variable name: `JAVA_HOME`
    - Example value: `C:\Program Files (x86)\Java\jdk1.6.0_21`
    - Add `%JAVA_HOME%\bin` directory to the PATH system variable

 - Add Java bin to PATH
    - Open System Properties -> Advanced -> Environment Variables 
    - Under system variables, select PATH and append `;%JAVA_HOME%\bin`
    - e.g. `%SystemRoot%\system32;%SystemRoot%;%JAVA_HOME%\bin`


## Verify that Java is installed.

 - Open a new command window:
 - Start > Run, type in "cmd", and click OK.
 - Check Java Version

        C:\>java -version
        java version "1.6.0_21"
        Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
        Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)

## Install Blackberry Email and MDS Services

 - Go to: <https://swdownloads.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477>
 - Choose Blackberry Email and MDS Services from the dropdown
 - Click "Next"
 - Download the latest bundle
 - Install by running the executable

## Install Blackberry OS Device Simulators

 - Go to: <https://swdownloads.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477>
 - Choose a Device Simulator for the version of the OS you want to test
 - Click "Next"
 - Download the latest bundle
 - Install by running the executable

## Start the MDS and Simulator

 - Open the Start Menu and run
   All Programs > Research In Motion > Blackberry Email and MDS Services > MDS

 - Open the Start Menu at

    All Programs > Research In Motion

 - You should have a simulators folder for the device you installed previously

 - Run it

## Disable Graphics Acceleration

 - As the simulator is starting I have found it smoother to disable graphics acceleration
 - View > Graphics Acceleration > Off

## Connect to WIFI

 - Use "Manage Connections" to turn off the Mobile Network
 - You might be prompted to run a connection wizard when you start up the phone
 - Use it to connect to the Default WIFI network
 - If you don't then click the Blackberry button and open "Manage Connections" and run "Set up Wi-Fi Network"

## Browse the Internet

 - You should finally be able to open the browser and use the internet


## References
<http://wiki.phonegap.com/w/page/31930982/Getting%20Started%20with%20PhoneGap%20BlackBerry%20WebWorks>



I'm often a bit of a purist, but as I age, I'm realising more and more the [history of the web](http://1997.webhistory.org/www.lists/www-talk.1993q1/index.html), much like most other histories is a pretty messy pit of layers laid on top of layers. After reading [this revolutionary email from the birth of the img tag](http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html), I'm reminded we're just working on the next layer so it's probably going to be messy ;).

I have been reading this evening over people's thoughts about how we tackle [responsible responsive images](http://adactio.com/journal/4997/) and there seems to be no perfect method. In fact many of the [methods currently being seen](http://www.cloudfour.com/responsive-imgs-part-2/) have major gotchas. It just feels like we are far from getting a stable way of providing responsive images using the `img` tag.

There have been a few [interesting discussions about how this could play out in the future](http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/) but like a lot of people I want to have a go at doing something NOW! So taking the pragmatic view that [done is better than perfect](http://lifehacker.com/5864004/the-done-manifesto-lays-out-13-ground-rules-for-getting-to-done) I have developed a simple tool to add to many other options out there which fitted well for what I was trying to achieve.

## The essense of the idea

The essence of this idea is that if the image being used is an essential part of the content then it needs to be discoverable BUT does it really need to be represented by an `img` tag? Instead could it be linked to like most other content? That would then eleviate the need for all this hackery and achieve the following:

 - A discoverable bit of content
 - The ability to reference find and crawl the source organically
 - The ability to enhance this piece of content depending on many device factors
 - No loading a small and a large image in desktop environments
 - The potential to not serve an image at all in environments which are completely text based

But I have found these areas to be tricky:

 - When needing the piece of content to be a link itself (you can't nest links)

## What does it look like?


Usage
---

With the following markup

    <div id="#lazy">
        <a href="myimage.jpg">my image</a>
    </div>

You run the plugin on the links

    $('#lazy a').lazyLoader();

Examples
---

    <a href="myimage.jpg">my image</a>

converts to

    <img src="myimage.jpg" alt="my image" />

and with data attribute:

    <a href="mypage.html" data-img="myimage.jpg">my image</a>

converts to

    <img src="myimage.jpg" alt="my image" />


Responsive images
---

If you want to dynamically load images dependent on the screen dimensions then
you can use the following.

    <a href="myimage.jpg"
       data-img768="myimage-768.jpg"
       data-img990="myimage-990.jpg"
    >my image</a>

js:

    $('a').lazyLoader({
        steps: [768,990] // this must be sorted correctly
    });

Or it also supports dynamic urls so you don't need all those data attributes.

    <a href="myimage.jpg">my image</a>

js:

    $('a').lazyLoader({
        img: function(url, windowWidth) {
            if (windowWidth >= 768){
                return url.replace(/.(jpg|gif|png)$/i, '-mega.$1');
            } else {
                return url;
            }
        },
        steps: [768,990]
    });

This function appends "-mega" on to the end of the url if the windowWidth is
greater than or equal to 768.

    <img src="myimage-mega.jpg" alt="my image" />

## To Conclude

Now I'm very sure that there are people who are far more intelectual than me that will pick this to pieces. Well.. I'm interested in how this sits with them. It's certainly going to be field tested and I wonder how my view on it will evolve as I put it to the test. I just thought this might a) be the right tool for a niche b) spark some thoughts outside the common paths which are being followed.

[View a demo](https://davetayls.me/jquery.lazyLoader/), [View the source](https://github.com/davetayls/jquery.lazyLoader)


Time to grovel, my gift to dan this morning was to erase all his hard work!! CRAP!!!!

Let me explain, Dan wanted to do a git commit but was confused when the files
weren't appearing in the repository on Github. The reason for this was that he
thought that 

    $ git commit –am “message”

would also add any files that weren't already in the index and it doesn't. All
it does is add currently tracked files in to the staging area and commit them so
you don't have to run 2 commands.

For any new files you have to run:

    $ git add <files>
    $ git commit –am “message”

WHAT WENT WRONG
--- 

So we did a

    $ git add .

Which adds all the untracked files in to the staging area ready to be committed
to the repository. Then we realised that there were files in there that we
didn't want to commit.

So in an attempt to move the files out of the staging area I rather stupidly (I
blame it on um…kids sleep?? Cogh cogh)

    $ git reset --hard 

instead of doing:

    $ git reset HEAD *

The rather unwelcome outcome being that all those uncommitted changes were lost!

Needless to say you will find me under my desk grieving the loss I have caused.

SORRY DAN. Beer on me.




I have put together some highlights from the year's work. Mainly for my
memorabilia. It's been a fun year.


I did a lunchtime session on some Git basics last week. It is clearly a different mindset which takes a bit of time to adapt to. But it's worth the effort, the popularity of Github, now sitting at over a million users should be a good indication that there's a few treasures awaiting.

Here are a couple of books which will hopefully be useful to grow your git knowledge.

Pro Git Book
---
The [Pro Git book](http://progit.org/book/) can be read online or downloaded for free on various eReader formats. You can also get the paper copy from Amazon.

The Git Community Book
---
[The community book](http://book.git-scm.com/) is another downloadable book maintained on github.





I have just had an issue where form validation will pass for the following postcode:

```ec1r 5ar <script>alert("hi")</script>```

The only reason being the fact that there is a valid post code at the beginning. I was using a very slightly adapted regular expression found on the [Wikipedia Postcodes article](http://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom#Validation) which was:

```(GIR 0AA|[A-PR-UWYZ]([0-9][0-9A-HJKPS-UW]?|[A-HK-Y][0-9][0-9ABEHMNPRV-Y]?)[ ]?[0-9][ABD-HJLNP-UW-Z]{2})```

So getting my regex hat on. I had the issue that it cannot allow anything after the validated postcode, but also I expect that it would similarly allow junk before the valid postcode. The whole thing is wrapped in matching brackets so all I needed to do was add the _begins with_ (`^`) and _ends with_ (`$`) simbols to fix the test with the following regex:


```
var rege = /^(GIR 0AA|[A-PR-UWYZ]([0-9][0-9A-HJKPS-UW]?|[A-HK-Y][0-9][0-9ABEHMNPRV-Y]?)[ ]?[0-9][ABD-HJLNP-UW-Z]{2})$/i;```

```console.log(rege.test('ec1r 5ar <script>alert("hi")</script>'))```

And this test fails, whoop!




I have been getting frustrated with the readability of the article body text within Google Reader. It's just a bit too small and I find it much easier to read serif fonts for large sections of text. I also adjusted the line-height to improve legibility. 

So I have created a user stylesheet with <http://userstyles.org> which changes the body text to something a bit better.

![google reader styles](https://lh6.googleusercontent.com/-5uqoRnkuJPg/TwbGQtP12AI/AAAAAAAAj8I/fffpdHvSeWQ/s512/googlereaderstyles.PNG)

Install [Stylish extension for Chrome](https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe) to be able to use this and then head over to <http://userstyles.org/styles/58926/google-reader-serif-article-body> and you can enable this style on your google reader.




Aaarg! I found this before and didn't make a note. That'll teach me. If you want to set custom environment variables for a particular php site running on apache then you can add them in using `SetEnv` where you specify the VirtualHost details. I use the http-vhosts.conf file on my macbook.

Here's an example:

    
    <VirtualHost *:80>
        ServerAdmin webmaster@dummy-host2.example.com
        DocumentRoot "/path/httpd"
        ServerName mysite.local
        ServerAlias mysite.local
        SetEnv VARNAME myvariable
    </VirtualHost>
    

now I shouldn't forget it again


I've been taking a look over all that has happened this year as it seems to have disappeared in a bit of a haze and there have been a few great things that I would like to remember 2011 for.


Projects and Work
--

At the beginning of the year I was running the front-end work on my own at Aqueduct. It was great to get [Steve](http://twitter.com/stevezol) on board on the 17th of Jan (one of the best decisions of the year).

We've enjoyed successes, mainly in our own little sphere but sometimes peeking out with [The FA's Just Play website winning it's category](/blog/2011/11/24/fa-just-play-wins-category-sitecore-site-of-year/) in the Sitecore site of the year.

The FA treated us to tickets to see England V Sweeden, it was great seeing the bill boards advertising the Just Play website. This was pretty significant for me as it was my first experience of a football match, and a good experience it was, especially because we watched this queue from the FA bar whilst sipping free beer.

![people leaving the match](https://lh6.googleusercontent.com/-8M21uEEVMW4/TwDU3ogrUnI/AAAAAAAAj7k/oPgg9oNwU4s/s512/photo%2525203.jpg)

### A few highlights for me
 - August and September brought the Rugby world cup and the [RFU](http://www.rfu.com) We Are campaign.
 - [jQuery Kinetic](https://davetayls.me/jquery.kinetic) a simple plugin which adds smooth drag scrolling with gradual deceleration to containers
 - I converted to using VIM for my IDE, a massive initial learning curve but I'm now enjoying the benefits
 - [RequireJs](http://requirejs.org) has revolutionised the way I build JavaScript
 - [Appia](https://github.com/aqueduct/Appia) has changed the way we deliver front-end builds
 - Progressive Design and Responsive layouts gain the attention they deserve
 - This was the year mindsets have been shifted away from print based ideas to progressive enhancements across browsers.
 - I've been privileged to work with some great clients and projects this year including [The FA](http://www.thefa.com), [The RFU](http://www.rfu.com), [ManCity FC](http://www.mcfc.co.uk), [Lloyd's of London](http://www.lloyds.com)
 - I was gutted not to be at the inaugural Aqueduct Awards at the end of the year but was well chuffed that [Tristan](http://twitter.com/tristanpeters) and I received the award for best collaboration.


Family (extended)
--

My family has been growing up quickly and my kids celebrated both their birthdays with an amazing cake baked by the brilliant [Esther's Bakery](https://www.facebook.com/esthersbakery).

![the ark](https://lh6.googleusercontent.com/-KxFfpH-Exkw/TwC-D19yPRI/AAAAAAAAj6s/OTxV71bUKBM/s512/2011%25252017%25253A40%25253A40.jpg)

Esther and I enjoyed a great discovery, a [tea house in a tree house](http://fannysfarmshop.co.uk/id1.html).
![tea in a treehouse](https://lh6.googleusercontent.com/-GdLEemTML1E/TwDLk5emnFI/AAAAAAAAj68/zmSsdSfNJKs/s512/treehouse.jpg)

We were privileged to become God parents for the third time.

On the same day that Aqueduct moved to their new office, we moved house. I am now living with the in-laws in Streatham.

I got to visit a fire station much to the delight of the bunch of kids that came with us (the children enjoyed it too).

It was a great to see such an amazing response to [Andy](http://twitter.com/andy67mac)'s marathon run as we built a mini-site to show his progress and raise money for [Support Sasha](http://www.supportsasha.com/).

### Travel

In June we were really honoured to be given someone's flat for a couple of weeks when we visited Becca and her in-laws in the beautiful city of Montreal, Canada.

![beautiful chinese garden in Montreal](https://lh4.googleusercontent.com/-_mbLXjG0bjk/TwDQVC87z6I/AAAAAAAAj7c/WCQoen25N14/s512/2011-07-02%25252018.39.37.jpg)

and then we went back for a holiday to one of our favourite spots, [an amazing farm house on the site of a ruined abbey](http://www.llanthonycourt.co.uk/) in Wales.

![jumping in the stream](https://lh3.googleusercontent.com/-fFD04Sn-fQ0/TwFdNlIXlrI/AAAAAAAAj7w/UkDNLcGIwTI/s512/302370_10150974541725093_719430092_21869170_1573076616_n.jpeg)

2012
---

2011 has been a really great year. 2012 is the start of new chapters and adventures both personally and professionally. I'm looking forward to being stretched and growing in character.

I want to continue to discover new avenues for being creative both technically, and maybe even through speaking and engaging with people I'm yet to meet. One of the hopes close to my heart is to find some way of investing this back in to a community who haven't had quite the same opportunities.

Here's to the new year. To my family and all I've worked alongside this year,
it's been a pleasure.

I have just created a simple jQuery plugin to add the opposite functionality to the jQuery.param function. It will turn a set of url parameters back in to an object. Here's the usage at the moment.


    it("should get basic query string vars from full url", function() {
        expect(jQuery.unparam('https://davetayls.me/?foo=one&bar=two'))
        .toEqual({
            foo: "one",
            bar: "two"
        });
    });
    it("should get basic query string vars from just query params", function() {
        expect(jQuery.unparam('foo=one&bar=two'))
        .toEqual({
            foo: "one",
            bar: "two"
        });
    });


You can get hold of it on the [Github repo](https://github.com/davetayls/jquery.unparam)



![html5 for web designers](https://lh3.googleusercontent.com/-JaBD7Z9CiWE/TtzLg2AvleI/AAAAAAAAjzs/8GBJEETMD1Y/s512/42.png)

I've just finished reading [Html5 for web designers](http://www.abookapart.com/products/html5-for-web-designers) by [Jeremy Keith](http://adactio.com/) and would really recommend it. It's not too big, I managed to finish it in 4 train journeys and I'm a slug when it comes to reading speed.

If you subscribe to [Jeremy's journal](http://adactio.com/journal/) you'll be familiar with his very laid back and personal writing style, injecting a welcome amount of wit to break up the reading.

I wasn't quite aware of the relationship between the [W3C](http://w3.org) and the [WHATWG](http://www.whatwg.org/). It's very interesting to see how the HTML5 spec is being put together. And now I actually understand what they are talking about when they refer to "paving the cowpaths". It essentially is the mindset that if something already exists and it's use is widespread then make it part of the spec (event if there is a better solution) and outline exactly how we should be using it consistently. The more I think over this the more I like it, "If it ain't broke, don't fix it" as Jeremy puts it.

## A few highlights have got to be:

### Web Forms 2.0

There are several new features which Jeremy goes in to, I've been looking at a few of these previously but it's great seeing them side by side.

#### New input types

These all fall back to text inputs for older browsers.

    <label for="email">Email address</label> <input id="email" name="email" type="email"> 
    <label for="website">Website</label><input id="website" name="website" type="url">
    <label for="phone">Telephone</label><input id="phone" name="phone" type="tel">

#### Validation and Error Handling

There is built in support for validating form input client side. For example:

    <label for="pass">Your password</label>
    <input id="pass" name="pass" type="password" required>


### Structure

Being able to write more modular markup with each structural `element` having it's own heading scope like so:

    <h1>My Website</h1>
    <section>
        <h1>My section title</h1>
        <p>My section content</p>
    </section>

My current struggle with this one is the trade off between cross-browser support, performance and accessibility. These tags are great but they aren't supported properly in older IE's without Javascript. We can get around this by adding div tags inside them but then on large pages the performance with be hit because of the number of DOM nodes. However they are really great for accessibility and semantics.

## The best thing is this:

You can just swap your current doctype without a worry and start using this stuff!
    
    <!DOCTYPE html>

## Go read

You can find out more on the [Book apart website](http://www.abookapart.com/)




Today was the [Fifth International Blue Beanie Day](http://www.zeldman.com/bbd/) and so in my support of web standards I sported the blue beanie courtesy of [Francis Gilbert](http://twitter.com/frangilbert).

![my and my blue beanie](https://lh6.googleusercontent.com/-OxcAR6iiIf4/Ttapie7adtI/AAAAAAAAjys/SKixWJyweF8/s512/photo.jpg)

174 people  have put their pic up on the [Flickr group](http://www.flickr.com/groups/bluebeanieday2011/) and changed their social avatar all to show we ♥ web standards and we're actively adhering to best practices for standardised, accessible, universal web design.

![tweet](https://lh5.googleusercontent.com/-48kzRb3j0xs/TtarVg9MUaI/AAAAAAAAjy0/Repglwi_E_g/s512/Screen%252520shot%2525202011-11-30%252520at%25252022.16.22.png)

I'm all for making the web available for all. There is still far to go, especially as the landscape is ever changing. I was reading the other day how fast the mobile web is expanding due to the take-up of devices being used in asia and africa. Often people will have a web-enabled mobile device before a computer. I've seen some criticism of the mobile first approach,  how it isn't cost effective for companies. I'm in the middle of a couple of projects at the moment where for a small increase in the budget of the project they are making their site so much quicker and more accessible for the mobile web. I have to admit it is a steep learning curve, especially when it comes to interactive features being turned on and off at different sizes but this definitely feels like the way forward, and we'll gradually get the tools and build the code we need to make the process smoother.

## edit: 1st Dec

I've just read this again and I went off on a bit of a tangent at the end
there! What I meant to do was show the stooges I work with.

### [Francis the wrestler](http://twitter.com/frangilbert)
![francis gilbert wearing a Beanie](https://lh3.googleusercontent.com/-wsOSdooLM0Q/TtYNhHtAA-I/AAAAAAAAjx8/0ljeJUiuy1Q/s512/photo%2525205.jpg)

### [Steve](http://twitter.com/stevezol)
![stephen zsolnai](https://lh6.googleusercontent.com/-OATh_nePF98/TtYNhcRingI/AAAAAAAAjyA/TqQ8bTJewWM/s512/photo%2525203.jpg)

### [Ian Jones](http://twitter.com/darkhorseian)
![ian jones](https://lh3.googleusercontent.com/-JelCCDP6RQc/TtYNhkBGIGI/AAAAAAAAjyM/FQg0bnsbVuM/s512/photo1.jpg)

haha, fun times!



Last night was the yearly [Sitecore site of the year](http://www.sitecore.net/Customers/SiteOfTheYear.aspx) awards and our team at [Aqueduct](http://aqueduct.co.uk) won our category for the [FA Just Play](http://justplay.thefa.com) website. Here is [Dan](http://twitter.com/dan_rachele) the back-end lead with Nick Meldrum

![picking up sitecore award](http://a.yfrog.com/img610/2971/vk6zs.jpg)

Needless to say we're well chuffed, it was a great project and great to be working with [The FA](http://thefa.com)





It's always nice to start another responsive project, each a little more daring than the last. I'm still in the infant stages with these projects as I find that I'm lacking some good tools to make the process easier. I've created a a simple [responsive device browser](https://davetayls.me/devicebrowser) which simply gives an at a glance impression of how a responsive site will look at the various screen widths.

I'm finding one of the biggest challenges is catering for the user to be able to resize the browser window once it has been loaded. One may think that this isn't likely to happen very often. Especially not to the extent where it starts off less than 480 and increases to above 768. This is exactly what happened on my last project where someone's browser settings opened certain links in a new window which happened to be tiny. They then realised they wanted it larger and maximised the window to find that most of the functionality hadn't been initialised because the JavaScript turned on only the small touch device functionality on load.

A good plugin to help with this has been written by [XOXCO](http://xoxco.com) and can be [found on github](https://github.com/xoxco/breakpoints), it even throttles the rate at which events fire for screen resize although, I personally would have still hooked in to the resize event to save checking in an interval.





Bandwagons come and go, when looking back there are so many which fall in to the category "forget/can't believe I jumped on" but with the rise of [require js](http://requirejs.org) and other module loaders using the [commonjs](http://commonjs.org) [Asynchronous Module Definition](http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) I think this is one bandwagon everyone should be considering seriously.

In my position at the [digital agency](http://www.aqueduct.co.uk) I work for, I've been considering the ever widening landscape of client expectations from new forms of UX on devices, locations and interactions within social circles. More and more is being requested and without modularising these features in to well tested silos the time needed to satisfy clients hunger could potentially sky rocket.

One of the things I love most about being a front-end developer is the way our community collaborates. I'm a big fan of open-source contributions and I try to release anything I think could be useful. We are in exciting times with services like [GitHub](http://github.com/davetayls) and [BitBucket](https://bitbucket.org/davetayls) providing the platform to share and enhance others code. What we are often lacking is the skill and experience to build modular code which can be easily plugged in to each others projects.

Practice with Kata
-----
One way of improving your modular programming skills is by doing [Katas](http://en.wikipedia.org/wiki/Kata_(programming)) which is exercise based on the Japanese concept of [Kata](http://en.wikipedia.org/wiki/Kata_(martial_arts)) solving small problems with repetition to hone your skill. Here are a few [katas to get you going](http://codekata.pragprog.com/codekata/).

With Power Comes Responsibility
-----
One of my pet hates is seeing bad use of a great plugin. Whether the developer/designer has spent no energy considering the UX or whether code has just been pasted in to a page with no thought for who will be maintaining the badly architected spaghetti mess. I despair when I open a web page in an older browser and the javascript is flogging it as if it were the latest Chrome. With all these great new opportunities lets not lose sight of the what makes the internet great, the ease of accessing great content.



Dave Taylor, Software Engineer

Current Interests

Past Interests

Recent

Create a Global UI State with React Context

Talks

TypeScript for React