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
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
April 19, 2022
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
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
July 22, 2021
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
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
June 8, 2021
June 7, 2021
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
April 22, 2021
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
April 12, 2021
April 7, 2021
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
September 20, 2020
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/).
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
This post will show you a simple but effective way using for...of
August 7, 2020
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
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
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
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
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.
February 17, 2020
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