Html5

Progressive Web Apps ⚡️ talk

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

Terminator Genisys Movie And Poster Creator

Read this article on medium

Last year saw a new Terminator movie where we saw John Connor send Kyle Reese back to 1984 to protect his mother. Play Nicely, 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.

Image Pooling for the Win

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.

GigStamp the checkin app for music fans

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 who came up with the original idea I have been building GigStamp.

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.

Building an HTML5 Bomber game - Bristech

It was great meeting everyone last night at the Bristech 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.

Inserting a model at correct index in Marionette.CollectionView appendHtml

I’ve been working a lot with Backbone Marionette recently. It’s a really powerful framework for Backbone.js.

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

Measuring performance between high resolution timers

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.

Leap Motion workshop at Southville JS Bristol

What do you get when you mix a few Leap Motion devices, a few eager developers and space invaders?

We found out at the recent Southville JS Workshop 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.

Flight of the Audio Visualator - Bristol Skillswap

It was great to be able to present at Bristol Skillswap 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 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.

Presenting Adventures in HTML5 Games, AKQA Anoraks

In this series:

• Making a simple HTML5 racer game
• Adding a track and colliding with it
• Adventures in HTML5 Games

I had the pleasure of presenting at AKQA 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. Even though it’s a pretty simple game I have learnt enough to talk about it or half an hour.