Johnny · 17 hours ago

How to disable text selection in CSS

On a web page, we typically should not disable text selection, but there are a few cases where having it enabled can take away from the user experience. Normally, we do not want to take away...

1

Johnny · 6 days ago

How to convert a String to a Number in TypeScript

TypeScript is a strongly typed language, which means we have to give things a little more thought when converting between them. Fortunately, converting a string to a number is pretty easy in...

7

Johnny · 6 days ago

How Intrinsic Type Manipulations work in TypeScript

Did you know that TypeScript comes with a bunch of built in string manipulator types? That means we can easily transform a string type into uppercase, lowercase, or capitalized versions of i...

2

Johnny · 6 days ago

How to send events from a child to parent in Svelte

Svelte events are the way we add interactivity to components in Svelte. A common issue with Svelte events is adding arguments to functions called within them. For example, suppose we have a...

2

Johnny · 6 days ago

How to make a Symbolic Link on Linux

Symbolic links are a link on Linux systems which point another file or folder. It means that navigating to one of these files may run a file that exists somewhere else, or it may bring you t...

2

Johnny · 6 days ago

How to get the Full URL in Express on Node.js

In Express running on Node.js, we have access to the request object, and also we can send a response back to the user via the response object. However, we don't have access to a simple way o...

3

Johnny · 6 days ago

Creating a Reusable Tab Component in Vue

One of the most frequently used UX elements on the web, or on personal devices are tabs. In this guide, let's look at how you can make a reusable tabs component using the Vue Composition API...

3

Johnny · 6 days ago

Making your own Express Middleware

Express is a common way to display static routes to a user. It is even more commonly used to create APIs for Node.JS. In Express, it's easy to define a URL, and what will happen at that URL....

2

Johnny · 6 days ago

How Template Literal Types work in TypeScript

Template Literals are common in Javascript: they let us easily combine variables and strings in Javascript. TypeScript also introduces the concept of Template Literal Types, where we can enf...

2

Johnny · 1 month ago

How to make Git forget a tracked file now in .gitignore

When we track a file in git, it can sometimes get cached and remain tracked, even if we add it to our .gitignore file. This is simply because .gitignore prevents files from being added to Gi...

1

Johnny · 1 month ago

A Guide to Events in Vue

As with any framework, Vue lets us add reactivity to our applications and websites through events. The great thing about Vue events is they mimic vanilla Javascript, so all the events you're...

5

Johnny · 1 month ago

How the TypeScript ReturnType Type works

The ReturnType in TypeScript is a utility type which is quite similar to the Parameters Type. It let's you take the return output of a function, and construct a type based off it. The Return...

1

Johnny · 1 month ago

Getting Started with Events in Svelte

Events in Svelte are quite intuitive and easy to use. In this guide, we'll look at how to get started with Svelte events. It is assumed you have a good understanding of Javascript for this g...

1

Johnny · 1 month ago

How to pass arguments to events like on:click in Svelte

Svelte events are the way we add interactivity to components in Svelte. A common issue with Svelte events is adding arguments to functions called within them. For example, suppose we have a...

1

Johnny · 1 month ago

How to give Props Default Values in Vue

When we use components in Vue, we often use properties or props to pass custom pieces of data down to the child component. For example, we can tell our child component that for this version...

2

Johnny · 1 month ago

How to add a Blank Directory to your Git Repository

Sometimes in Git, we want to preserve a directory for use within a repository, but keep it empty of files. There are many reasons why you'd want to do this, but perhaps either the folder is...

1

Johnny · 1 month ago

A Guide on How to use Emit in Vue

In Vue, data is typically passed from parent components, to their children in a uni-directional fashion. This is transferred with props, which are the properties or attributes we give to com...

4

Johnny · 1 month ago

The Difference Between the Composition API and Options API in Vue

Up until Vue 2, there was one way to create components in Vue. With Vue 3, a new methodology was introduced called the Composition API. Now, if we want to make a component in Vue, we have tw...

4

Johnny · 1 month ago

How to Watch for Nested Changes in Vue

Vue is a reactive language, meaning when the data changes, we can automatically have that represent itself in the HTML. To help us with this, we can use watchers in vue to watch for a change...

1

Johnny · 1 month ago

Vue Lifecycle Hooks

Like other frameworks, Vue has a number of lifecycle hooks which allow us to attach code to specific events that occur while a Vue application is being created or used - for example, when th...

8

Johnny · 1 month ago

Check if an Object Contains all Keys in Array in Javascript

Sometimes in Javascript we have an object which we need to conform to a specific set of keys. This is possible through type enforcement in TypeScript, but if we want to do certain things if...

5

Johnny · 1 month ago

How the TypeScript NonNullable Type Works

The NonNullable type is a utility type in TypeScript which creates a new type, whilst removing all null or undefined elements. It lets us take existing types, and modify them so they are mor...

3

Johnny · 1 month ago

How the TypeScript Parameters Type Works

The TypeScript Parameters Type is used take the parameters or arguments of a function and create a new type based off them. It is quite useful when we know that the input of a Function confo...

3

Johnny · 1 month ago

How to Rename Files in Linux and MacOS Terminal

Renaming files is something that occurs frequently, and in Linux on terminal, there are many ways to rename files. Let's look at some of the main ways you can rename your files on Linux and...

1

Johnny · 2 months ago

How the TypeScript Pick Type works

The TypeScript Pick type is a utility type which is used to create a new custom Type, based off an already existing one. It is the opposite of the Omit Type. Let's look at how it works. Cust...

1

Johnny · 2 months ago

How the TypeScript Omit Type works

TypeScript provides a number of utility types which are used to solve a particular problem that using types in Javascript creates. One very useful utility type used in TypeScript is the Omit...

1

Johnny · 2 months ago

Future Javascript: New Array Methods Coming soon

In previous articles, I've covered that Javascript stores objects and arrays in heap storage. That means that an array is created once, and then any updates to it in the future will update t...

4

Johnny · 2 months ago

Future CSS: A first look at when and else statements

In CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select a devices based on numerous conditions, such as screen size, pixel density...

5

Johnny · 2 months ago

How the TypeScript Exclude Type Works

In TypeScript, the Exclude utility type lets us exclude certain members from an already defined union type. That means we can take an existing type, and remove items from it for specific sit...

4

Johnny · 2 months ago

How the TypeScript Extract Type Works

The Extract utility type lets us check a union type for a specific members, and returns a new type based on what is left over. It's quite similar in format to the Exclude type. Let's find ou...