
Johnny
@smpnjn
Johnny · 1 week 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...
















Johnny · 1 week 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...



















Johnny · 1 week 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...
















Johnny · 1 week 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...
















Johnny · 1 week 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...
















Johnny · 1 week 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...

















Johnny · 1 week 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...
















Johnny · 1 week 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...


















Johnny · 1 week 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...


















Johnny · 2 weeks 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...
















Johnny · 2 weeks 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...



















Johnny · 3 weeks 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...


















Johnny · 3 weeks 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...

















Johnny · 3 weeks 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...

















Johnny · 3 weeks 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...
















Johnny · 4 weeks 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...
















Johnny · 1 month 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...
















Johnny · 1 month 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...

















Johnny · 1 month 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...


















Johnny · 1 month 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...


















Johnny · 1 month 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...


















Johnny · 1 month ago
How the TypeScript Readonly Type Works
TypeScript has a number of utility types, which are types specifically created by TypeScript to solve a problem. In this article, let's look at the Readonly type.
TypeScript Readonly Type
As...
















Johnny · 1 month ago
How the TypeScript Record Type Works
TypeScript Records are a great way to ensure consistency when trying to implement more complex types of data. They enforce key values, and allow you to create custom interfaces for the value...
















Johnny · 1 month ago
How the TypeScript Required Type Works
In TypeScript, we sometimes need to enforce that an object has required properties, even if the original type defined some of them as optional. For that, TypeScript has a utility type called...

















Johnny · 1 month ago
How the TypeScript Partial Type Works
The Partial type in TypeScript is a utility type which does the opposite of Required. It sets all properties in a type to optional.
Let's look at how it works. If you're interested in the op...
















Johnny · 1 month ago
How the alias Command works on Linux
We've covered a lot of linux commands, and it's sometimes necessary to write the same command over and over again. On Linux and other Unix like systems, we can use the alias command to avoid...


















Johnny · 1 month ago
Each Logic in Svelte
Previously, I covered how if-else logic works in Svelte. Today, I'll be going over how to use each logic in Svelte, letting us iterate over objects to display their contents.
If you're new t...
















Johnny · 1 month ago
Future Javascript: Types may finally be coming to Javascript
With the promotion of Type Annotations to Proposal Level 1 Stage, Javascript is one step closer to being a more strongly typed language. Let's dive into what the changes will mean for Javasc...
















Johnny · 1 month ago
How if-else Logic works in Svelte
Like other modern frameworks such as Vue and React, Svelte allows for logic within components itself. In this article, we'll look at how if and else statement logic works in Svelte outside o...

















Johnny · 1 month ago
How the find Command works on Linux
The find command on Linux and Unix like systems (i.e. MacOS) is used to find files and directories in a specific directory. It is one of the most useful commands at your disposal when trying...


















Loading More Content