Phil.

$HIDE_POST_ON_HOMEPAGE$ Overview In this blog post, we will explore how to recognize shapes in a web application using JavaScript, with the help of the Phaser.js framework. We will dive into the architecture of the solution and explain how the recognition algorithm is used to efficiently recognize drawn shapes. Architecture Play Sorry, your browser doesn't support embedded videos. (() = { const autoplay = "autoplay" === 'autoplay'; const loop = "...

When it comes to decorating, I’m about as useful as a flashlight in broad daylight 🔦! Play Sorry, your browser doesn't support embedded videos. (() = { const autoplay = "autoplay" === 'autoplay'; const loop = "loop" === 'loop'; const playbackRate = parseFloat("1") || 1; const replayButtonText = "Replay"; const videoId = "video-1"; const video = document.getElementById(videoId); const videoControls = document.getElementById("video-controls-1"); const playButton = document.getElementById("play-1"); const videoWorks = !...

Overview 🗒️ A quick post to share out my very own Visual Studio Code Extension Pack, Angular Enterprise! Angular Enterprise This is an extension is aimed at Angular developers looking to develop enterprise-grade applications with ease. Check it out on the VSCode Marketplace. This extension pack will continue evolve over time to include the latest and greatest but also come preconfigured with the best settings to allow you and your team to hit the ground running....

The Scenario 🖼️ So you’ve successfully released a dozen popular JavaScript games over the past few years and just as you’re about to kick back, enjoy the weekend and let the revenue flow in, a new Tweet appears in your feed. Not great news to hear on a Friday. Okay, I’ll just check how many of my games are affected… main .post-content { overflow: hidden !important; } 😲😲😲😰😰 No need to panic....

Setting the Scene 🖼️ It’s Friday evening, the sun is shining 🌞, you’ve just deployed the latest UI changes to production. Just as you’re about to put those feet up and order that takeaway… Those shrieking voices coming from all angles 😨; " The website isn't loading! " " The screen is completely blank!! " " We can't see anything!! " Clearly, something is amiss here. Let’s check the build…...

Disclaimer Web scraping is a grey area - be sure to research the legality of the source you intend to scrape! Setup ⚙️ Prerequisite Presuming you have Node.js installed let’s jump right in and create the endpoint! (If you don’t head over to https://nodejs.org/en/) 5 Minutes is ambitious so let’s get moving! Setting up our server Fire up a terminal and type the code below to get a default package....

Overview 🗒️ Growing up I was an avid fan of the Final Fantasy game series. Particularly Final Fantasy 7 through 10. Each game in the series contains an in-depth story, hours of gameplay, and some mini-games. One mini-game introduced during Final Fantasy 8 was a card game known as Triple Triad. Released in 1999, Final Fantasy 8 was a single-player game and so too was Triple Triad, the included card game....

Overview 📄 With ES2020 being finalised there have been some great new additions. I wanted to take a look at two of my most used ES2020 features and what makes them great. So let’s jump right in! Nullish Coalescing ❔❔ Nullish coalescing is a logical operator that will return its right-hand statement when the left is null or undefined. Think logical || but explicitly for null or undefined values. Consider the code below using the logical ||...

Overview This weekend I had a bit of time to recreate a prototype of Flappy Bird in Phaser. This was my first time really using Phaser to build and deploy a small game. The project utilised webpack and also used TypeScript (something not often used at this time within the Phaser community). Keep an eye out for some more Phaser content in the future! Preview 🎮 Try it out below using space, click or tapping to fly....

Overview 📄 Dragging and dropping has never been easier! Lets make use of the Component Development Kit (CDK) along with Angular 7+ to make some draggable divs in less than a minute! CDK setup ⚙️ Make sure you are on at least V7 of Angular. You can check this by running ng version from your chosen CLI (if you have the Angular CLI installed globally). Start by creating a new project....