Visual Testing With Cypress

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

June 27, 2021 · 5 min · Phil

Web scraping to create an api in 3 minutes!

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

March 5, 2021 · 3 min · Phil

Remaking Triple Triad

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

January 3, 2021 · 4 min · Phil

My most used features in ES2020

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

April 12, 2020 · 2 min · Phil

Flappy Bird POC using Phaser

Overview With no prior game development experience, I created a small POC of Flappy Bird in under 10 minutes using Phaser. The project utilised webpack and also used TypeScript (something not often used at this time within the Phaser community). Preview 🎮 Try it out below using space, click or tapping to fly. Sorry your browser does not support loading Flappy Bird.

June 5, 2019 · 1 min · Phil

Drag and drop in Angular

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

February 1, 2019 · 1 min · Phil

Use of the :host selector

The :host selector can be used to target custom components from within a css environment. Let’s have a look! 👁️‍🗨️ Given you have a custom component such as; <album></album> In your css you may want to style the album element from within it’s inline stylesheet. This is where the :host selector comes in handy. Consider the below usage to add 10 pixels of margin to the album element. :host { margin: 10px; }

January 9, 2019 · 1 min · Phil

ng add

Overview 📄 The Angular CLI recently introduced a new command in version 6.0.0, ng add. At a glance, it looks like an alternative to npm install but let us take a look and see how the two approaches differ. Deeper look at ng add 👁️‍🗨️ In short, ng add will use your package manager to download the specified dependency, just as you would using npm install. Once downloaded the CLI will call an installation script which usually contains instructions on how to configure the project with the new dependency....

January 5, 2019 · 1 min · Phil