site icon

Hi, I’m Chris

I am a web developer teaching
regular people how to code

~ Welcome to my blog ~

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.

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.

Learn Javascript By Building Projects (for free!)

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

The Javascript Ternary operator

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

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.

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?

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.

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.

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.