Solving real-world problems with quality web applications
I'm a software developer who specialises in creating large-scale JavaScript applications, using modern web standards.
Sencha Cafe - How to Build an Email Client with Ext JS
I delivered a 7 part webinar series about building a cross-platform Ext JS email client, along with 3 other webinars on open tooling and testing. You can watch all of the videos on YouTube
Chrome Dev Tools Tips
I challenged myself to tweet tips about Chrome Dev Tools every day for 30 days - I've collected them all together in this post.
How to Batch Process Promises with PromisePool
Scraping over 24,000 web pages in parallel was never going to work! This article discusses how I used batching to execute them slowly.
How to Scrape a Website with Cheerio
My recent side-project scrapes another website for its data. This article shows you how easy that is to do with the Cheerio library.
Launching the Birthday Number Ones Website
Launching a small side-project that tells you every number one song on your birthday
Disable Source Maps in Production Vue.js App Builds
We generally don't want to include a source map for our production builds as it exposes our unminified code to the world. Here's how to disabled them in Vue.js apps.
Apply CSS to Sub-Components of a Scoped Component
When composing a Vue.js interface of lots of sub-components we often want to make a few small styling tweaks to those sub-components without making changes to that component directly - either because we can't cos it's a 3rd party component, or because we don't want that change to apply everywhere. This article describes how we get around this problem!
Adding Extra Parameters to Vue.js Event Handlers
Sometimes we need to add extra parameters to an event handler to pass additional info into it depending on the context. This article shows you how!
Defining Vue.js Router Routes with Regular Expressions
Vue Router routes can have parameters which use regular expressions to help validate their values and clear up any ambiguity between similar routes. This article talks through how we add them and why they're useful!
Conditionally Showing Elements Based on a Vue.js Slot being Populated
I came across a situation recently where I wanted to change the markup in a component if a particular slot was being used. This article shows how we can use the `$slots` property to do just that.
10 Ways to Debug your JavaScript
Since the humble beginnings of littering your code with alert('here') statements, debugging JavaScript has come a long way. Today I run down 10 different ways to debug your JavaScript code.
Renaming Destructured Variables
For whatever reason, we sometimes can't use the object's key as a variable name when destructuring. We can easily rename it and use one that suits. Find out how here.
Giving Destructured Variables Default Values
Some objects might be missing certain properties which can cause us issues. We can solve it by specifying a default value for that destructured variable so we always have a value.
Making Accessible Icon Buttons
We often create buttons with no text and just an icon but these are inaccessible to screenreader users. This article shows how to add alternative text for screenreaders while maintaining your UI.
Destructuring Variables in Vue.js Loops
Vue.js allows us to destructure objects within the v-for loop attribute, making our code even neater. Find out how here!
Making a Chart.js Chart Accessible
Most charts are fairly inaccessible due to their graphical nature and we should provide an alternative way for users of assistive technologies to consume the same data. This article shows how to do just that.
How to load a model with a custom ID Property
Today I Learned - A quick look at how to use a model's static load method when you have a custom ID property defined.
Handling image load errors in Ext JS universal apps
Unfortunately, for whatever reason, images sometimes fail to load, either because the image is completely missing, the connection failed or the URL is wrong. We never want to see that horrible broken image on our pages so this tutorial describes how we can avoid it by extending the Ext.Img class.
Speed Up Development with Live Update and Fashion
Ext JS 6 and Sencha Cmd 6's Live Update feature means we can streamline our app theming workflow even further and have our changes reflected in the browser even faster. This article shows you how to use it!
Ext JS 6: Key Concepts Explained
With the early-access release of the Ext JS 6 framework coming out, it's starting to get played with by Ext JS and Sencha Touch developers. This article explained some of the key concepts in the latest evolution of the Ext JS framework.
Increase Productivity with JetBrains IntelliJ's Live Templates
IntelliJ has a lot of powerful features that help improve our overall development workflow. One feature that I use everyday is Live Templates. This article will discuss how to use Live Templates to speed up your development and stop you getting RSI.
Sencha Best Practices Email Course Launched
I'm excited to announce the launch of my new email course - Best Practices for Improving your Sencha Apps - which delivers 7 lessons to your inbox on how to improve your Ext JS and Sencha Touch apps.
Ext JS and Sencha Touch: The Merge
This week saw the announcement of the sessions running at SenchaCon 2015, which includes a big announcement about the future of the Sencha product landscape - "the merge".
Picking Colours With Chrome Developer Tools
Extracting colours from webpages has never been easier with the functionality baked right into Chrome Developer Tools. This short article shows you how.
Application Flow with Domain-Specific Events in Sencha Applications
This article is going to discuss how we can approach controlling application flow in Sencha Touch and Ext JS applications using domain-specific events rather than relying solely on standard framework events. By following this technique you will make your applications more flexible, reusable and allow refactoring to be done with less impact.
Emulating Devices with Chrome Developer Tools
Chrome Developer Tools have now added a "Device Mode" which gives us a whole host of possibilities for testing our sites in an emulated setup of real devices, along with allowing us to spoof things like user-agents, GPS coordinates and accelerometer stats. In this post we'll introduce Device Mode and explain its main features and how to use them.