• Home
  • Blog
  • Courses
  • JavaScript Type Coercion & Conversion

    We are going to cover some type and also true or false related concepts, which can give you some strange or unexpected results. Being aware of these can help you understand things like why an if statement is not running correctly, and save you a lot of time debugging.

    March 14, 2023

  • Nuxt 3 Route Middleware

    Route middleware is code that we may want to run before navigating to a particular route, you can think of it as an extra stage to pass through before completion. It can be applied to all routes in our app, or on particular routes. Use cases could include checking if a user is logged in before visiting a certain admin/account page, or, checking if a shopping basket contains items inside before visiting the checkout page.

    December 6, 2022

  • Vue 3 Currency Filter With Intl

    This post will look at how we can apply locale-based currency formatting using methods, and also globally available properties. This currency formatting method is just JavaScript so can also be applied in other non-Vue.js project too!

    December 2, 2022

  • Vue 3 Global Properties

    With Vue.js 2 we could add properties globally using Vue.prototype. To replicate something similar in Vue 3, we can use globalProperties. Global properties are easy to add and make simple variable values available across our app.

    December 1, 2022

  • Easy State Management With NUXT 3

    When building apps with NUXT.js or any other framework/library, we often have the need to manage state. In Vue.js or NUXT, state (our app's data) is commonly passed down to child components, and passed up by firing custom events. This works perfectly fine until we have components that are deeply nested, or, we need to share throughout our project. NUXT 3 provides an easy-to-use state management composable to share state, or data, throughout or app.

    November 17, 2022

  • WordPress Missing "Your Homepage Displays" Option

    A commonly used option in WordPress is to set which page will display as the homepage, and which displays the blog posts. This can be set from the dashboards > Settings > Reading. However, there is a case when this option is removed.

    April 19, 2022

  • Convert HTMLCollections To JavaScript Arrays

    In JavaScript, we can use methods such as getElementsByClassName to select multiple elements in the form of a HTMLCollection. A HTMLCollection is an array-like generic group of elements, not an actual array. This means we can not use array methods such as map, forEach etc. This post will show you how to convert this to an array to be able to access array methods.

    March 10, 2022

  • Create a New Array By Extracting Object Values In Javascript

    Arrays of objects can get complex, but we can simplify them by extracting only the object properties we need into a new array.

    February 23, 2022

  • How To Speed Up Movement When a Keyboard Button Is Held Down In JavaScript

    Recently when building a JavaScript-based "Pong" game I had the need to speed up the paddle movement when the user held down the up or down keys. Regular movement was fine with a single press and release action, but when holding down the keys I wanted to double the speed of the paddle movement.

    January 20, 2022

  • How To Easily Add Scripts Into Shopify

    For non-coders, Shopify can be really great to work with. But often there may be a need to add a script into the code directly. Maybe this is a custom script or one you need to add from a third party such as Google fonts, analytics etc.

    December 10, 2021

  • Shopify Dawn Theme- Changing The Default Product Font Size

    The Shopify Dawn theme is a big step forward in terms of how we can create and customise Shopify stores. When I first tried it out one of the things which I noticed immediately was how small the text is for the product listings. The previous Debut theme has an option to directly do this with no code- Customize > Theme Settings > Typography. From here we could set the base size of the text. This option seems to be missing in the new Dawn theme, but there is a simple way to modify the existing code, even without any technical knowledge.

    September 24, 2021

  • Including Tailwind CSS Into a HTML Project

    Tailwind CSS gives us different setup options, depending on what you use to build your project and what features we want to support. This post is going to look at some of the options available, including the CDN link and also the Tailwind CLI, using a regular HTML project

    September 10, 2021

  • Dynamic Inline CSS With Vue.js

    Vue.js is great for giving us the flexibility to add dynamic/conditional CSS to our elements. This post will look at how to automatically update the inline styling using Javascript.

    July 22, 2021

  • Replace Dashes With Spaces In Javascript

    Text strings often need to be formatted on websites. This guide will show you how to remove and replace any text characters from a string using Javascript.

    July 21, 2021

  • Responsive CSS Images Using The image-set() Function

    Responsive images are a big part of web development. Getting it wrong can lead to poor-quality images or slow download times. Thankfully, we now have some great options available. This post will look at how to do it in CSS with the image-set() function.

    July 6, 2021

  • How To Add Shopify Homepage Sections To Any Page

    Shopify has a range of sections or widgets we can use to easily customize the home page. Once we change to a different page though, these additional sections are not available. Wouldn't it be great if we could add these to any page? Well, the good news is we can, and it is pretty straightforward to do!

    June 24, 2021

  • Why Does WordPress Need A Web Server To Run Locally?

    When learning WordPress, it is common for beginners to wonder why we need a web server during development. And why tools such as MAMP, XAMPP, Local etc are needed. This post will show you why a web server and database are essential for WordPress to run.

    June 18, 2021

  • Javascript Promises

    With Javascript, we often have to make asynchronous requests. Making an asynchronous request can take time. Maybe a few milliseconds, maybe a few seconds, minutes, or never complete at all. Ofter when we are talking about this kind of thing, it refers to fetching something from somewhere else, a server, data store, API, or an external website. And a promise is great for handling this outcome.

    June 17, 2021

  • Understanding Javascript Closures

    Closures can be difficult to first understand, but if we keep things simple to begin, they are not too bad. A closure is a way for functions to remember what variables it has access to. Even if the variables are from an "outside" scope, and even if the function is called from a different scope also. If this makes no sense, don't worry. All will be explained...

    June 10, 2021

  • Javascript Function Parameters & Arguments

    When creating Javascript functions, people often confuse parameters and arguments and use them interchangeably. This post will show you the difference between the two.

    June 8, 2021

  • Javascript Basics: Introduction To Arrays, Objects & Functions

    Arrays, Objects and Functions are essential to understand in Javascript. This post will give you a grounding in these 3 Object types, and also take a look at some practical examples too.

    June 7, 2021

  • Javascript: Select Multiple Array Values From The Beginning Or End

    This short post will show you how to easily select one or more values from the beginning, or the end of a Javascript array.

    June 4, 2021

  • Simple Helper Function To Create Javascript Elements

    This post will show you how to create a helper function to take in an element name and contents, append the content to the element, then return the new element.

    May 6, 2021

  • Primitive & Reference Types In Javascript

    We use variables a lot in coding and Javascript to store data. But, if we go a little deeper there is an important concept to understand, and that is the values we store fall into 2 groups, which are primitive and reference type.

    April 22, 2021

  • CSS Style Objects With Javascript

    When we create our own HTML elements, we can add CSS styling to these elements using Javascript. This works but it is a pretty long and repetitive way of doing things, especially if we have many more styles to apply. Also, it is not reusable on other elements either. A solution to this is to create a style object, containing all of the CSS properties and values we need instead.

    April 19, 2021

  • Introduction To Javascript Optional Chaining

    This post is going to look at something called optional chaining, which was introduced to Javascript in ES2020. In Javascript, we often need to access properties inside of an object. And also, we can go deeper by accessing objects inside of objects too. But, what happens when these properties in the chain are not there?

    April 12, 2021

  • Browser Redirecting With Javascript

    Many of us are used to making use of Javascript frameworks or libraries which offer routing packages. These packages often make it easy to redirect the user. But, using regular Javascript & the DOM, we also have some simple ways to do browser redirects too.

    April 7, 2021

  • Javascript append() or appendChild()?

    In Javascript, both the append and appendChild methods will add a single element node to the page, but what is the difference?

    March 4, 2021

  • How To Remove Whitespace Under HTML Images

    When using HTML images, we sometimes see a white line below the image on a web page. This post will show you some ways of fixing this issue using CSS.

    March 3, 2021

  • Changing Art Direction In Web Images

    The HTML picture element has many great uses including switching images based on device width and resolution, but now we are going to look at another great use for the picture element, and this is to change the art direction.

    February 26, 2021

  • Letting The Browser Decide Which Images To Use

    Smaller website images download faster on smaller, mobile devices, but when scaling up to the big screen, can look really stretched and pixelated. And if we start with a big image, it can take too long to download, causing a bad user experience. So, how do we efficiently add images to our websites to suit all screen sizes and devices? Let's take a look at some native methods.

    February 6, 2021

  • How To Find a Page Or Post ID In WordPress

    When using some widgets, plugins, or settings in WordPress, we may need to get the ID for a particular post or page. This post will show you exactly how to do this.

    January 7, 2021

  • In-Depth Vue 3 For Beginners is now LIVE!

    I am proud to finally release my latest comprehensive course, all about Vue 3!

    December 15, 2020

  • Route based CSS with Vue.js

    With Vue.js, we can easily create CSS objects and conditionally render. In this post, I will show you how to also change CSS properties based on the current route.

    November 9, 2020

  • Destructuring v-for loops in Vue.js

    Vue.js provides a useful directive for looping over lists called v-for. And we can also unpack the values for each list item into variables using array destructurinng.

    October 15, 2020

  • Vue.js Computed vs Watchers?

    When first starting off with Vue, it may be confusing why both the computed property and watcher both exist, when they both appear to do a similar thing, of watching for a change, then running some code. But there is some key differences we will discover.

    October 5, 2020

  • Javascript Object Shorthand Property

    A nice little touch which was introduced in Javascript ES6/2015 was the ability to shorten our object syntax if both the property name, and the variable passed in have the same name.

    September 20, 2020

  • Javascript: Find The Difference Between Two Numbers

    Javascript has a Math method called abs() which will return the absolute value of a number. We can use it to also effectively find the difference between 2 given numbers.

    September 10, 2020

  • HTML5 Canvas Image Upload And Download

    Many websites and apps rely on user uploaded images, and also downloading images too. This post is going to show you how to create a simple image upload/download, using the HTML5 Canvas.

    September 8, 2020

  • Deleting Git Branches Locally And Remotely

    When working with Git, we can create branches to work on new features and keep the code separate from the rest of the project. If the branch code does not work out and we want to remove it, or, after merging we can delete the branch.

    September 5, 2020

  • Deploying Static Websites With Netlify

    Once you have a website which you have finished and ready to show the world, a really popular, and easy to get started with option is [Netlify](https://www.netlify.com/). Netlify is a super simple way of deploying a static HTML, CSS & Javascript website, either by linking to GitHub, or using the drag and drop feature.

    September 4, 2020

  • Should I Learn React or Vue.js?

    Should I Learn React or Vue.js? That is the question we all see on social media and forums. Although it may be asked a lot, as a beginner, learning can be tough enough without making the wrong decisions. We don't want to learn something new, only to find out there is no prospects, jobs, or the tech we spend months or years learning is becoming obsolete.

    September 3, 2020

  • Should I Learn Vue 2 Or Wait For Vue 3?

    With the upcoming release of Vue 3, one of the questions I recently had on social media was it it worth learning Vue 2, or do I need to know it before using Vue 3? This is a really good question and one which is understandable when any major version of a language, framework or library is released.

    September 2, 2020

  • Vue.js Props, $emit And Passing Reference Types As Props

    In any component based framework, we will soon have the need to pass data between components. Vue.js is no different and in both version 2 and 3, we do this with props and $emit. We also discover how passing reference type props differs too.

    August 18, 2020

  • Color input triggers mouse events when selecting color

    The HTML input type of color can be a really useful way for users to pick a color of their choice. But today I ran into a very specific issue caused by mouse events causing the color selector to disappear.

    August 13, 2020

  • Javascript: Add Event Listeners To A List Of Elements

    When using Javascript, we can often need to add an event listener to a list of elements. This post will show you a simple but effective way using for...of

    August 7, 2020

  • Learn Javascript By Building Projects (for free!)

    This week, I have just released a free, project based Javascript course. https://fun-javascript-projects.com The course is aimed at beginners, and currently included 6 projects to see how HTML, CSS and Javascript all fit together.

    August 6, 2020

  • Jargon Explained For New Developers

    In the web dev world, we use a lot of jargon and technical words. Sometimes the words make sense, but sometimes as a beginner, a simple explanation is needed. That is the aim of this blog post. To provide a simple "Tweet" sized description to get you going.

    July 15, 2020

  • How To Create A Simple Parallax Style Effect With CSS

    Adding a parallax style effect to our web page can really make it stand out. You may have seen this effect when scrolling on web pages or apps. It basically involves the background, in our case an image, scrolling at a different rate to the rest of the content on top of it.

    July 9, 2020

  • Javascript Numbers: How to Easily Find the Largest or Smallest Values

    Have multiple numbers in Javascript and want to find the largest/smallest? This post will show you how to easily do this!

    June 18, 2020

  • Quick & Easy Vue.js Search Facility

    Adding a search facility to your project can be complex, but only if you need it to be. Sometimes, we just need a simple filter, and return the results. This post is going to show you how to do this in Vue.js, but the same principle can be applied to React or almost anything else.

    June 2, 2020

  • How to add a Gravatar in Vue.js

    Adding a Gravatar (Globally Recognised Avatar) is a nice way to personalise the users experience. It adds a familiar image, which the user uploads, to each site they visit which has it enabled. We are now going to discover how to set it up, and customise for Vue.js apps.

    May 27, 2020

  • Visual Studio Code Extensions You Might Not Know

    Visual Studio Code has exploded in popularity over the last few years. By default, it has lots of features, but we can also download extensions to add almost any type of feature we need. I have used VS Code for a few years now, but there is always something to learn from others. I recently asked on Twitter for everybody's top 3 extensions, hoping to uncover some hidden gems, and I think I did just that.

    May 20, 2020

  • Javascript: Check an array value is included in another array

    Javascript has a huge list of array methods. And it can be confusing to know which ones to use. A common situation is when we have 2 arrays, and want to know if the value of one is included in the other. This post will cover both returning a boolean value and also the matching values.

    May 17, 2020

  • Working From Home or Being at Home?

    With the current work from home trend, it is more important than ever to distinguish between being at home, and working at home. This is not a “10 tips when working from home” kind of post, there is many great ones out there. Instead, I will share some of my experiences which I hope will help others.

    May 13, 2020

  • Tailwind CSS Quickstart (inc project)

    The Tailwind CSS library has been seeing a huge rise in popularity recently, and with good reason. It is quick and easy to get started with, and enables you to create a great looking website or app in a short time.

    May 11, 2020

  • How to revert back to an older NPM package version

    After updating a NPM package, sometimes we can discover the updated version can cause an unexpected bug in our projects. If we are sure it was working before the update, reverting back to the older version may be a good choice until the issues have been resolved.

    April 22, 2020

  • Understanding CSS Margin, Padding and the Box Model

    We can use both margin and padding in our CSS to apply spacing to our elements. If you are still not comfortable what these do exactly, then we are going to take a look in more detail, along with taking a look at the CSS box model, and why it is important to understand.

    April 18, 2020

  • Binding a dynamic value to a href with Vue.js

    Often when starting out with Vue.js, people struggle to insert variables into links to make them dynamic. This guild will show you some techniques to make this work in both Vue and NUXT.

    April 14, 2020

  • How to set up your first web project with Visual Studio Code

    Sometimes as more experienced developers, we can often assume something we do everyday, such as starting a new web project in a code editor, is simple. To some it may be, but this kind of thing can also be a step into the unknown when first starting out.

    April 11, 2020

  • Introduction to HTML5 semantic elements

    HTML5 introduced many new elements for us to use called semantic elements. These semantic elements clearly describe their contents, not only to the browser but other developers looking at your code. But, why were they needed? Well let's take a look...

    March 29, 2020

  • WordPress: How to add blog posts to multiple pages

    In the WordPress dashboard, we have the option to set where we want our blog posts to appear. But what if we wanted blog posts to appear on more than one page? For this example, let's say we want it to be the home page and a blog page too. There is some different approaches we can take, but a simple one is to make use of categories.

    March 16, 2020

  • Introduction to HTTP and the request/response cycle

    When our user interface is communicating with servers or generally requesting information, there are some concepts we need to know to understand what exactly is happening. Even by having just a basic knowledge of these concepts will really help you understand what is going on behind the scenes and really help you as a developer.

    March 5, 2020

  • Control Javascript loading with Async & Defer

    When loading Javascript from a HTML file, we can place the link anywhere in the file, common options are the head section, or down at the bottom of the body. The placement of this link though is important, and can have side effects depending on where you add it.

    March 1, 2020

  • How to connect Mongo Atlas Database to a Keystone CMS project

    Mongo Atlas is a convenient way to set up a mongoDB database, and we connect it to our applications using a connection string. When using the Keystone 5 CMS for the first time, there is no obvious place to add this connection string.

    February 28, 2020

  • NUXT.js: How to include the lang attribute to the html tag

    By default, you may find your NUXT application does not have the language attribute set in the opening HTML element. We are now going to look at how we can include this, and improve accessibility.

    February 27, 2020

  • The Javascript Conditional Operator (ternary)

    The condition operator is a Javascript conditional statement, mainly used to declare what we want to do if a value is true or false. And it can be a quick and simple alternative to using if/else statements.

    February 26, 2020

  • Centre any text over an image: without Flexbox

    When building websites, one of the CSS issues you will undoubtedly come across at some point is to centre text over an image, both horizontally and vertically. This post will show you an easy way to do this without using the CSS Flexbox.

    February 25, 2020

  • Quick and easy local WordPress development with Local by Flywheel

    Setting up a local development environment for WordPress can be a pain. Local by Flywheel makes it really simple, and also has some nice touches too.

    February 24, 2020

  • Using global Vue filters with NUXT

    When starting out with the NUXT framework for vue, you may be wondering where to add global filters. With a regular Vue.js project, we would typically add to it the main.js file. NUXT has a different file/folder structure than a regular Vue.js application, Create-nuxt-app also creates a lot of Javascript files, so where do we add global filters?

    February 17, 2020

  • How to easily sort a Javascript array of objects by property

    The Javascript sort() method is pretty simple to use in it's basic form. But, what if your array contains objects and you want to sort by a certain property? For this we can use the compare function.

    February 16, 2020

  • How to set up a basic HTML page for beginners

    When starting out creating websites. we first need to get to grips with the core structure of a HTML page. HTML pages can get big. Really big for large sites, but they all begin with the same basic structure, which we will look at here.

    February 13, 2020

  • New Beginner Bootstrap 4 Course

    Bootstrap provides you with a toolkit to build almost any type of website or app you can imagine, providing you with a choice of components and helper classes to get you up and running fast. I am pleased to announce my latest course now available, Beginner Bootstrap 4: Hand code beautiful responsive websites fast.

    January 31, 2020

  • Vue.js: Build a Full Stack App: fully updated & re-recorded for 2020

    Great news! I have now finished fully updating my Vue.js: Build a full stack app with Firebase, Vuex & Vue Router course! Technology moves fast and the course needed some updates, along with some additions to the project too.

    January 8, 2020

  • 12 Quick tips when learning to code

    Learning to code can be challenging. Especially fitting it around with everyday life, family, work commitments, children etc. Here is some tips which I hope can help make your learning journey a little easier.

    January 10, 2019