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
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
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
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
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
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
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
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
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
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
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
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
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
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 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
I am proud to finally release my latest comprehensive course, all about Vue 3!
December 15, 2020
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
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
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
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 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
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
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
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? 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
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
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
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
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
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
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
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
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
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
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 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 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
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
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
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
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
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
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
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
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
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
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
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
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 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
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
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
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
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
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
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
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
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