I have found it super easy to add [Uniform Canvas](https://uniform.dev/) to a bare-bones NextJs app. I thought I would show you what it takes to go from Zero to Hero with a very basic setup. This will then give a good foundation to add more things on top.

I found in the bundle analysis that I was loading the CMS editor components into the _app chunk unnecessarily. I have been able to remove a lot of the JavaScript used but not all. Still, this has made a big impact to the chunk size as well as the performance scores. 

The Lighthouse report says that the page is only using 1/3 of the JavaScript within the main _app file. Before I start making assumptions about what components or features need to be lazy loaded from the main app I need to do some analysis on the bundle.

Let's remind ourselves of the previous report after I removed Youtube.

Looking at the lighthouse report it shows that there is a lot of unused JavaScript on the homepage. A large proportion of this is coming from YouTube because I have a video embedded and then it also looks like I am only using 1/3 of the JavaScript in my application source code.

It's time to do a review of my site performance. I'm taking a look through my lighthouse scores across the two key site sections. This will be the homepage and blog articles.

My scores have definitely slipped since I last checked so I thought this would be a good chance to write about the process of fixing and improving them. Let's see how close to 100 across the board I can get.

Over the last year we have seen the rise of Languages like Rust running in the browser through the use of [Web Assembly (or WASM)](). It's also creeping into the Frontend Developer's Toolkit's through tools like the [Speedy Web Compiler (SWC)](https://swc.rs) which has been said to provide [NextJs version 12]() with "\~3x faster Fast Refresh and \~5x faster builds".

With the significant advantages of using languages which compile to WASM, providing the benefits of speed and more efficient compute it feels necessary to ask myself the question:

> Will JavaScript Become My Second Language

A language which connects the dots and passes messages between faster and more efficient WebAssembly packages.

[Uniform]() have just launched its new platform and a big part of that is Canvas. Canvas is a way to orchestrate the modern stack of micro-services and SaaS into a website or multiple websites. 

It gives the software developer power to control the tech stack while at the same time giving a marketer or content designer the power to control what is eventually presented to the user.

EVERYONE has power 💪 what can go wrong 😁 I've been taking a look.

TypeScript has been around for several years now and over that time has gone from something people scoffed at to an integral part of many open source projects and frameworks. This has been great for me, I really like using TypeScript and it's increasing popularity has made the day-to-day usage has become easier and even more fun!

I have been using Firebase again recently to build a simple app for Esther who is a Piano teacher. I've not used it for several years and things have definitely come a long way. The ability to use serverless functions is really exciting.

I am based in England and so I am using the `europe-west2` region to deploy my functions but when I tried to call the function from my browser code I got a CORS error.

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.

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.

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


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.


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.


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


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.


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.


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.

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.


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:


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.


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.


## 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/)


## 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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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).


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.

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. 


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.


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.


## What is Reactive Programming and Why is it helpful


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.


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!


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.


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


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


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


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.


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


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


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)


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.


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.


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.


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.


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.


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.


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.


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.


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.


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/).


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.


OK, so new year as kinda gone but so much happened last year I guess it has spilled over in to 2014.


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: 


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.


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


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).


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:


What do you get when you mix a few [Leap Motion](http://leapmotion.com) devices, a few eager developers and space invaders? 


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.


NB. This is an article I wrote a while back for .net magazine which seems to have disappeared when they transitioned to Creative Bloq

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.


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.


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.


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.


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


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.


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.


## 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.


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 needed to add automated tests to jQuery.kinetic
--

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.


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 stumbled on this frustrating iOS5 bug where adding Google maps to a page made elements disappear.


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.


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.


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.


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.


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.


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.


![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>




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!



Dave Taylor, Software Engineer

Current Interests

Past Interests

Recent

Create a Global UI State with React Context

Talks

TypeScript for React