Javascript

Procedural Smiles - Animating SVG with pure JavaScript

I recently needed to be able to generate a simple face image, with the face being able to scale from happy to sad. (Why I needed to do this is a long story!) This gave me the opportunity to have a play with SVG, which is something I've not done in a while and always wished I could spend more time with. You can see the result below, move the slider to see the smile animate:
Read more

Tips and Tricks for Beautifully Simple Mobile App CI

In this article I'm going to demonstrate some simple tips and tricks which will help you build and maintain beautifully simple mobile build pipelines. These techniques can be applied to different mobile app technologies and integrated into almost any build system: Each tip is demonstrated in the sample apps in the dwmkerr/beautifully-simple-app-ci repo. The Challenges of Mobile App CI Tip 1 - Embrace Makefiles for Consistency Tip 2 - Control Version Numbers with a ‘Touch’ Command Tip 3 - Control App Icons with a ‘Label’ Command Tip 4 - Support Configurable App Ids Tip 5 - Document, Document, Document Conclusion The Challenges of Mobile App CI Conceptually, a mobile app CI pipeline is pretty simple:
Read more

Effective Node.js Debugging

If you are interested in improving your Node.js debugging skills, then check out my talk at the recent JSChannel 2016 conference in Bangalore: Comments and observations are always welcome!

Moving from React + Redux to Angular 2

I've just finished working on a very large project written in React and Redux. The whole team were new to both and we loved them. I'm going to share my experiences of experimenting in Angular 2 with you, from the point of view of someone who needs a pretty compelling reason to move away from my JSX and reducers. The Journey So Far Let me highlight a few key moments in my UI development experiences, to give a bit of context to my ramblings.
Read more

Learn Docker by building a Microservice

If you are looking to get your hands dirty and learn all about Docker, then look no further! In this article I'm going to show you how Docker works, what all the fuss is about, and how Docker can help with a basic development task - building a microservice. We'll use a simple Node.js service with a MySQL backend as an example, going from code running locally to containers running a microservice and database.
Read more

Getting Started with React & ES6

Feeling like having a go with Facebook's hugely popular React framework but not sure where to start? In this post I'm going to build a simple React application from scratch - using ECMAScript 6. We'll put together the bare minimum skeleton of a site and keep the folder structure free of noise and clutter so that you can focus on the app code and not the tooling! The simple app we'll build is at github.
Read more

The Best Module System for AngularJS Applications

I was working on a small and simple application built with AngularJS the other day. As with most applications like this, I start with a single JavaScript file caled app.js and no module system. In the past I've used RequireJS with AngularJS. It's an awful mistake. It leads to a big jump in complexity with no benefts. Angular apps don't work well with AMDs, so really your are using RequireJS to combine files into one big file.
Read more

Fixing Memory Leaks in AngularJS and other JavaScript Applications

Dealing with memory leaks in JavaScript applications can be a complex process. In this article I'm going to show you how to identify whether you have memory leaks, analyse them and ultimately resolve them. I'm using an AngularJS application to demonstrate the concepts and approaches, but much of this material applies to any JavaScript application. Understanding Memory Leaks What is a Memory Leak? Why is a Memory Leak Bad?
Read more

The Only AngularJS Modal Service You'll Ever Need

If you need modals in an AngularJS application, look no further. I'll show you how to use the Angular Modal Service to add Bootstrap Modals or your own custom modals to your application. See it in a fiddle or check out a full set of samples online. Contents [Using the Angular Modal Service](#UsingTheAngular ModalService) A Quick Example Design Goals How It Works Wrapping Up Using the Angular Modal Service Here's how you can use the Angular Modal Service to add a bootstrap modal to your application.
Read more

AngularJS Promises - The Definitive Guide

Promises are a core feature of AngularJS - whether you understand them or not, if you use AngularJS you've almost certainly been using them for a while. In this post I'm going to explain what promises are, how they work, where they're used and finally how to use them effectively. Once we've got the core understanding of promises, we'll look at some more advanced functionality - chaining and resolving promises when routing.
Read more