Johnny

@smpnjn

1894 Points 32 Followers

91 Posts

0 Answers

Joined February 6th, 2022

Engineer, Product

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Loading More Content