DEV Community: Vincent Tong

TypeScript: Advanced Types

Vincent Tong — Mon, 15 Aug 2022 00:28:00 +0000

In this blog we're going to deep dive into some of the more advanced built-in types included in TypeScript. If you are new to TypeScript I recommend starting with some of my beginner tutorial blogs:

Type Aliases

In our last lesson we created this TypeScript object:

let contactInfo: {
  name: string,
  phone: number,
  fax?: number
} = {name: 'Vincent', phone: 123_456_7890}

This is great but it poses a few problems for us:

1.If we want to create a new contact info object, we would have to repeat this structure:

2. The other contact info object may have other properties so the shape may vary.

3. The overall structure may be difficult to interpret at a glance.

This is where Type Aliases come in handy to create custom types. To do this, initiate the keyword 'type' followed by the name of your object in Pascal case (first letter in each word uppercased) like so:

type ContactInfo = {
  name: string,
  phone: number,
  fax?: number,
}

Now that we have the structure defined in our alias, we can remove it from our previous object and create a new object with our new custom typing:

let myContactInfo: ContactInfo = {
  name: "Vincent",
  phone: 123_456_7890,
}

Unions

Unions are a fairly simple concept. You can use them to give additional typings to variables or function parameters. This is done with the "|" character:

function addTwo(num: number | string): number{
  return num + 2;
}

Breaking it down, what this function is saying is that it takes one argument that can either be a number, or a string. While the above function can accept either, there is a possibilty that it may not return a number as required (when you add a string to a number, the result is a string).

note: In the previous blog we talked about Code Completion and how it is one of the benefits TypeScript provides us. However, when we use Unions like in this example, the only methods we will be able to see are the methods that are shared by both strings and numbers:

So within our function we can add some conditional logic to clear the air:

function addTwo(num: number | string): number{
  if (typeof num === "number") {
    return num + 2;
  } else {
    return parseInt(num) + 2;
 }
}

This process of using conditional logic to find out the typing of the argument is what is known as Type Narrowing.

And now with inference TypeScript will know that num in the first condition will be a number type and num in the 'else' condition must be a string and therefore, the respective type methods will be made available once again with code completion.

Intersections

The concept of intersections types are similar to unions. However, instead of allowing the value to be passed in to be one type OR the other, it allows the variable to be both types at the same time. Our previous example would not be the best way to show this as an object cannot be both a number AND a string at the same time, but lets try it with some custom typings.

Imagine if we are creating simple video game entity.
For some entities we want them to be able to move only left or right like a goomba in the Mario games!

note this is not necessarily how the actual video game entities were coded but just a visual analogy.

For others we may want them to be able to move up and down like the piranha plant.

our custom types might look something like this:

type LeftAndRight = {
  moveLeft: () => <...>,
  moveRight: () => <...>
}

type UpAndDown = {
 moveUp: () => <...>,
 moveDown:() => <...>
}

But what if we wanted an entity that can go both left & right AND up & down like the flying koopa troopa.

To make a custom type that has the attributes of already existing/custom types that we created, we can use the '&' symbol like so:

type UpDownLeftAndRight = LeftAndRight & UpAndDown;
// and now we can create a variable of that combined type
let flyingKoopaTroopa: UpDownLeftAndRight = {
  moveLeft: () => <...>,
  moveRight: () => <...>,
  moveUp: () => <...>,
  moveDown: () => <...>,
}

Literal Types

We learned that with TypeScript we can assign variables to specific data types like strings. But we can also specify specific strings by assigning the 'type' to the specific string like so:

type CoinFlip = 'heads' | 'tails';
//here we are creating a custom type that can only be of two values

let firstFlip: CoinFlip = 'heads'; //this is ok
let secondFlip: CoinFlip = 'tails'; //this is also ok
let thirdFlip: CoinFlip = 'a crow took it'; //this is not ok

Nullable Types

By default TypeScripts configuration does not allow for null types when assigning variables to specific types. However, if you wish to allow for a variable to be null, you can specify it with the union operator:

let greeting: string | null
//we are saying that greeting can be either a string or null
greeting = null // this is ok
greeting = 'Hello!' // this is also ok
greeting = undefined // error

// if you wish to also specify that greeting can also be undefined, you would need to add another union to include 'undefined' types

Congratulations, you are now an expert on TypeScript types! I hope this post has been informative and will save you plenty of debugging time in the future.

TypeScript: Standard Built-in Types

Vincent Tong — Sun, 07 Aug 2022 23:56:00 +0000

Welcome to my second lesson on TypeScript where we'll go more in depth with the built in 'types' that TypeScript includes. If you are new to TypeScript, you should read my initial TypeScript introduction and setup blog here: https://dev.to/vkton115/easy-start-guide-typescript-3ip4

similarly to how javascript has built in types such as

numbers
strings
booleans
null
undefined
objects
functions

TypeScript introduces some of its own built-in types such as:

any
unknown
never
enum
tuple

Inference:

In the last lesson, we learned that we can initialize variables as specific types like so:

let count: number = 123;

this creates a variable with the type of a number set to the value of 123. Because we specified that it was a number, it cannot be reassigned to a different datatype, like a boolean or a string for example.

However, due to inference, we can also write the same login in our TypeScript file as:

let count = 123;

This will achieve the same result and the same variable will not be able to be reassigned to a different datatype. While this does look similar to typing regular JavaScript, the TypeScript compiler will be sure to catch any incorrect reassignments of the variable. There may be some niche situations in which you'd want the variable created to have flexible value types. In these cases, you'd want to utilize any.

ANY

The any typing can be implemented one of two ways. By declaring a variable without assigning it to an inferred value:

let age;
age = 10;
age = 'ten'; //this will work because age was not given a specified type when declared.

Another way to set a typing to any would be similar to setting it to any other type, like so:

let age: any = 10;
age = 'ten';

However, using the 'any' typing goes against what the main functionality of TypeScript. It's merely kept as an option to allow users the ability to declare free-type variables for specific situations where specific typing may not be important or 'code-breaking'.

ARRAYS

In JavaScript, individual elements in an array can be of different types:

let types = [123, 'strings', true];

To specify what type of values the individual elements should be with TypeScript, the format would look something like this:

let numbers: number[]= [1, 2, 3] // this will work because every value in the array is already a number

let age: number[] = [4, 10, '20'] // this won't work because '20' is a string

With inference, the acceptable element types will be whatever types are already present in the array when assigned

let numbersAndStrings = [1, 2, 3, '4'] // this infers that both numbers and strings can exist in this aray
numbersAndStrings.push('hello') // this will work
numbersAndStrings.push(false) // this will error because booleans were not inferred

similarly to how to set a primitive value to an 'any' type, TypeScript arrays can accept any values by initializing it as an empty array.

let anyType = [];
anyType.push(1) //this works
anyType.push('string') // this also works
anyType.push(false) // this works too

CODE COMPLETION

Before we move onto more built-in types, let's talk about one of the key benefits to using TypeScript: Code Completion.

Given a TypeScript Array like:

let numbers = [1, 2, 3]; //inference makes it so all elements are presumed to be numbers

Because TypeScript should now know what type of data each element in the array is, it knows what methods we should have access to. So if we were to iterate through this array, we will receive a list of methods that can be applied to each element after using dot notation like so:

Having this feature is convenient and is one of the ways TypeScript helps with productivity.

TUPLES

Tuples are essentially fixed length TypeScript arrays in which you can specify the type of data that each element index should be. The syntax for TypeScript tuples are as follows:

let person: [string, number] = ['Vincent', 27];

This does a couple of things for us:

1. Tuples make it so we cannot assign the variable to an array of different size than the defined array length.

let person: [string, number] = ['Vincent', 27, 'male'] // error: target only allows for 2 elements

let person: [string, number] = ['Vincent'] // error: target requires 2 elements;

note: using push/pop/shift/unshift methods seems to allow us to bypass this and add/remove values in the array. The reasons for this is unknown to me but at the moment it seems to be a lapse in TypeScripts functionality.

2. Using Tuples also allows us to set the datatype of specific elements in an array.

let person: [string, number] = ['Vincent', 'twenty-seven'] //error index 1 cannot be a string

It is usually best practice to keep the size of the tuples to a minimum (2 elements is usually recommended similar to key-value pair) as it may get harder to distinguish what each value may represent.

ENUMS

Enums(short for enumerated) are a data type that includes values which are predefined. In TypeScript it is initialized with the keyword 'enum':

enum Alphabet {a, b, c}

By default, the first item in the brace's value is set to 0, and each value following it's value will be incremented by 1 so:
a = 0
b = 1
c = 2

You can specify the value of specific item(s) but note that any follow items values will increment by one by default unless otherwise specified.

enum Alphabet {a, b = 20, c}
console.log(Alphabet.a)// 0
console.log(Alphabet.b)// 20
console.log(Alphabet.c)// 21

let letter: Alphabet = Alphabet.b;
console.log(letter) //20

note: adding const to the beginning of the enum declaration will generate a more optimized and cleaner looking code when you run the compiler.

FUNCTIONS

When it comes to functions, annotating your parameters is important to ensure arguments passed in are of the correct typing:

function count(start: number, incrementer: number){
  return start + incrementer;
}

Here we are declaring a function named count. its parameters, start and incrementer are both assigned to number types and therefore if you tried to pass in a non-number argument to the count function, you will receive an error.

If you wish to set optional parameters in TypeScript there are two ways.
1. Using default values

function count(start: number, incrementer = 1){
  return start + incrementer;
}

count(2) //=> returns 3 (2 + 1)

2. Using '?'

function count(start: number, incrementer?: number){
  return start + (incrementer || 1);
}
count(2) //=> returns 3 (2 + 1);
count (2, 2) //=> returns 4 (2 + 2);

Because incrementer could possibly be undefined, we needed to create a condition to handle that case, hence why we set it to 1.

Also note that due to inference, TypeScript knows that the return value will always be a number type. However, in a function in other cases you may want to specify what type of value your return should be, like this example:

function returnNumber():number{
  return 7;
}//this will work

function returnNumber():number{
  return '7';
}//this won't work

related configs:
noUnusedParameters - when set to true, if a parameter is never used within a function, it will show an error.
noImplicitReturns - when set to true, it will error if a function has a code path that does not explicitly return in a function.
noUnusedLocals - when set to true, it will error if there are any unused variables. This includes variables declared within functions.

OBJECTS

When it comes to JavaScript objects, we're accustomed to being able to add properties with dot/bracket notation like so:

let obj = {};
obj.name = 'Vincent';
obj.age = 27;

console.log(obj) => // {name: Vincent, age, 27}

However, in TypeScript, we need to define the body of the object before we can change its properties as we will not be able to add/change properties that do not match the object that we defined.

let contactInfo: {
name: string,
phone: number,
fax?: number
} = {name: 'Vincent', phone: 123_456_7890}

note: numbers in TypeScript can be split with an underscore(_) to segment it

As you can see, we initially defined the structure and typing of each key's value in the body of the object. The fax is set to optional with the '?' so therefore we do not need to include it when we assign the initial value of the object. Using the '?' is generally not recommended as it can cause unforeseen errors when compiling, however in this case it makes sense as not every person may have a fax machine.

And finally since we defined the types of each key's value, they can be reassigned as long as they are being reassigned to the same datatype.

contactInfo.phone = 987_654_3210 // this is an ok reassignment
contactInfo.phone = "(123)-456-7890" //this won't work because it expects a number and not a string.

CONCLUSION

Thank you for taking the time out to read this TypeScript tutorial. I hope I was able to help you understand the standard built-in types that TypeScript provides. Stay tuned for more information on more advanced types.

Easy Start Guide: TypeScript

Vincent Tong — Sun, 31 Jul 2022 21:29:00 +0000

Before we dive in to TypeScript here are the fundamental concepts you should be familiar with the following JavaScript concepts:

Variables
Arrays/Objects/Functions
Arrow Functions
Destructuring

What is TypeScript?

Created by Microsoft, this programming language overcomes some of the challenges of working with Javascript. It is built ontop of Javascript and therefore all Javascript files are technically a TypeScript file.

On a basic level, TypeScript allows you to set variables so that they can only be assignable to a specific datatype.

You can think of plain vanilla JavaScript is the script that tells us what will happen in the play. TypeScript assigns roles (type classification) to the individual actors (variables that we create) so that they know what part they have to play. And if all goes well, our application will perform wonderfully and we may even get a standing ovation.

Why you SHOULD use it

Type Script grants us some convenient benefits such as:

Static Typing: the ability to set a variable's TYPE and therefore not allow it to be assigned a value of any other type. Some examples of programming languages that use static typing are: C++, C#, Java. Plain Javascript on the other hand, along with Python and Ruby, use Dynamic Typing, meaning that a variable can be reassigned to a variety of different types of data.

//Static Typing (C++/C#/Java)
int number = 5; // This is fine
number = 'abc'; // this will error

//Dynamic Typing (JavaScript, Python, Ruby)
let number = 10; // this works
number = 'a' // this will also work

TypeScript compilation allows for us to find errors in our typescript at compile time as opposed to when we run our application or unit tests.
Shorthand notations
- Features not available or not yet available in plain JavaScript that allows us to write cleaner, more efficient code.
Most code editors nowadays have support for typescript which enables us even more benefits such as:
- Code Completion
- Refactoring

Why you SHOULDN'T use it

Browser's inherently do not know how to read TypeScript. Therefore, a transpile process is required to convert your TypeScript code into a browser-readable JavaScript code. However, this process can become especially tedious if you're only working on small and simple components. Therefore it is not typically recommended to use TypeScript in that situation.

When should you use it?

Simply put, TypeScript's benefits are more apparent when working on medium to large projects and/or with a team of developers to ensure they and yourself don't have any unexpected problems when running your program.

Plain vanilla JavaScript is best when you want to keep your projects simple and finish it in an efficient timeframe.
How to use it

Getting Started with TypeScript

In your code editor's terminal, you'll use your node package manager (or npm) to install typescript globally by running the command:
npm i -g typescript

Once the installation is complete you can verify the installyation by running:
tsc -v and you should receive a response back with the version number.

After verifying that you have type script installed, you can start writing your first TypeScript program by creating a .ts file.

Inside of this new file you can write any JavaScript code and it will be valid TypeScript code.
example:

let age: number = 28;

The syntax is very similar to plain JavaScript but you'll notice a difference with the colon. This denotes the typing of the variable age.
If you were to try to reassign this value to something other than another number you will get an error.

Now that we have a single line of TypeScript code, we can run the command: 'tsc ' in order to run our compiler and transpile our .ts file into a .js file.

You should see the new .js file now and inside of it would look something like this:

var age = 28

As you can see, the code you wrote in TypeScript has now been translated into plain javascript. However, by default the TypeScript compiler will set variables to var instead of let or const. If we wish to change this, we will have to make some configurations to our compiler.

CONFIGURING THE TYPESCRIPT COMPILER

To do this, run 'tsc --init' in your terminal. This will create a tsconfig.json file which you can modify to fit your needs. Below is a snippet of the TypeScript compiler configurations. You do not need to read all of the configurations, but as you can see it is well documented with what each configuration will do.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    // "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

To use a configuration you will just have to uncomment the line you wish to configure. There are a lot of configurations in this file that you don't necessarily need to understand but the more common ones are:

target: You can set this to any ES version (ES2016/ES2017/ES2018...). ES2016 is a very common and most used version so that will likely work best for you in most situations.
rootDir: The configuration that specifies the directory that contains our src files. By default it is set to "./" which represents the current folder.
outDir: This configuration specifies the directory where our transpiled .js files will be sent.
removeComments: If you add this configuration and keep it set to true, any comments you typed in your TypeScript code will not be transpiled in your .js files.
noEmitOnError: This will stop the compiler if there are any errors in our TypeScript code.

After you finish setting up your configuration, you can now run 'tsc' instead of 'tsc ' to transpile ALL .ts files in your application.

There you have it, you should now be set up to start typing in TypeScript! Of course there are many more nuances to this programming language but I hope this was a good read to get you started! Stay tuned for more information in the future!

Getting Deployed with Digital Ocean

Vincent Tong — Sun, 26 Jun 2022 22:42:20 +0000

WHAT IS DEPLOYMENT?

"Application Deployment, also known as Software Deployment, is the process of installing, configuring, updating, and enabling one application or suite of applications that make a software system available for use, like facilitating a certain URL on a server."[1]

There are many providers of deployment service, each with their own benefits and flaws. Deciding which ones are optimal to use for your application will be a huge asset in becoming the best developer you can be. Today we will be talking about one particular deployment service provider: Digital Ocean

ABOUT DIGITAL OCEAN

Digital ocean is a cloud-based deployment service that is geared towards helping developers, startups, and small-medium sized businesses get their projects up and running which is why its the perfect platform to understanding the basics of deployment.

GETTING STARTED

After creating your account on Digital Ocean, you'll be able to create your first project.

After clicking the + New Project button, you will be prompted to provide a name, description, and provide a description for the purpose of your project.

For me, I will be selecting the "Class Project/Educational Purposes" option.

Once your project has been created, you can select what type of product want.

PRODUCTS

Digital Ocean offers a variety of products which include:

Droplets: Linux-based virtual machines (VMs) that run on top of virtualized Hardware[2]. These are essentially an individual server that you can use by itself or part of a larger cloud-based infrastructure.
Kubernetes: a service that automates software development, project scaling, and management. Useful when you have an application that is being deployed across multiple servers. This provides an open source API to orchestrate each of the VMs run based on their available resources and resource requirements.
App: service that allows the user to directly publish code to Digital Ocean's servers. Can build your code directly from your GitHub, GitLab, or public Git repositories and publish the app straight to the cloud. Provides lifecycle management services, such as scaling, push-to-deploy support, DBM (database management) and integration.

There are many more products/services but these are some of the more common ones you'll see as you are just learning about deployment.

COST

Digital ocean provides a large amount of flexibility on pricing depending on your application's resource needs. A full listing on their pricing can be found here: https://www.digitalocean.com/pricing but as this blog is geared towards beginners who want to learn the basics of deployment, we will choose their "most used" product as our example, droplets.

The starting price for the most basic droplet is currently $5/month but can go up depending on you the expected resource requirements of your application. Droplets are a great way to get started because they get your app up, running, and scaled with increased traffic flow.

See the link below for a full, updated listing of their droplet prices. As mentioned it is highly flexible and can cater to your app's specific requirements.
droplet prices

CREATING YOUR DROPLET

Choose Your Distributions System

Choose which distribution system your application is run on and its corresponding version.

Choose a plan

Same step as our pricings section, this is just a verification step to ensure you are selecting the right plan for your project.

Select your DataCenter Region

Digital Ocean hosts servers globally so choose the one that will be closest to where your application will be visited most often to reduce service times.

AUTHENTICATION

You'll want your newly created server to be secure. There are two options: creating an SSH key or a Password. SSH Keys, or Security Shell Keys, don't have password authentication so it's safer against brute force attacks and is usually the recommended option. Hitting the New SSH Key button will provides steps to creating your key.

FINALIZE

Finally, you'll want to determine how many servers you will want to run under the same configurations you've set above and provide the hostname. If you want to host websites, you'll want to choose a hostname that is a fully qualified domain name.

Once you have done so, click the 'Create Droplet' and you are officially finished creating your server! It'll take a minute or two before your droplet is fully deployed so definitely use that time to give yourself a pat on the back.

Your newly created droplet will come with an ip address which you can now include in your application to load it onto the server!

SOURCES

[1] https://www.vmware.com/topics/glossary/content/application-deployment.html#:~:text=Application%20Deployment%2C%20also%20known%20as,certain%20URL%20on%20a%20server.

[2] https://www.digitalocean.com/products/droplets

ES6: Promises

Vincent Tong — Mon, 20 Jun 2022 03:47:55 +0000

What are promises:

With the introduction of ES6 came Promises. They are an object class that represents a value depending on a successful/failed completion of an asynchronous operation.

As the name implies, using promise is akin to making a commitment to performing some operation or providing some value in the future.

There are two possible outcomes to a promise: either it is successful and it resolves or it fails and is rejected.

Why use promises:

similar to using success & error callbacks, but in a much cleaner way.
prevents callback hell (when you have so many nested callbacks, it's hard to keep track of it all). This is done through the use of .then() and .catch(). more on them later.

Syntax:

As briefly mentioned earlier, a promise object takes in a callback function with two parameters: resolve & reject.

const examplePromise = new Promise((resolve, reject) => {

});

Now, within the callback function, you would define what the promise is.

const examplePromise = new Promise((resolve, reject) => {
let grade = 100;

if (grade >= 70) {
 resolve("passed");
} else {
 reject ("failed");
}

});

As you can see, the resolve argument will be called if the condition met is true and the reject will be called if it is false. But what exactly do the resolve and reject do?

.then() & .catch()

This is where .then() and .catch() come into play.

.then() will invoke if the promise resolves/rejects.
.catch() will invoke if the promise rejects.

With our newly created promise, we can invoke & chain these methods like so:

examplePromise
.then((message) => console.log("you " + message))
.catch((message) => console.log("you " + message));

.then() passes in a callback for when the promise resolves and also an optional callback for if the promise rejects.

.catch() only passes in a callback for when the promise rejects.

The callbacks within the .then() & .catch() will pass in the same arguments as the respective resolve and reject calls. As you may have guessed, since our grade was set at 100, it will invoke the resolve, which in turn invokes our .then() to log to the console:

"you passed"

As mentioned before, .then() takes in a resolve callback but can ALSO take a reject callback. does that sound familiar? It's just like a promise. That is because every call to .then() returns a new promise, which is why we can chain multiple .then() calls to it.

Promise Methods

.all() - Promise.all() takes in an iterable amount of promises. Once each of those promises resolves, it will return a single promise that resolves to an array of the results of those inputted promises.[1]

If any of the inputted promises should reject, Promise.all() asynchronously rejects and returns the value of the promise that rejected, regardless of if the other input promises have resolved.

.allSettled() - takes in an iterable amount of promises and will return an array of their outcomes, regardless of whether or not the resolved or rejected.
.any() - takes in an iterable amount of promises and will return a promise that resolves at the first instance of one of the input promises being fulfilled/resolved.
.race() - similar to .any() but will return at the first instance of any of the input promises being resolved or rejected.

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

React Component Lifecycle

Vincent Tong — Sun, 12 Jun 2022 22:23:29 +0000

ReactJS is a javascript library used to build user interfaces.

Understanding the life cycle of a component is fundamental in building user-friendly application.

A react component has 4 major phases: Initializing, Mounting, Updating, & Unmounting.

INITIALIZATION
- The set-up phase where we set the state. It is usually done within the constructor method.

MOUNTING
- The process of placing elements onto the DOM.
- This will be the first time an element will be rendered on a page.

UPDATING
- occurs whenever there is a change to a component's STATE or PROPS.

UNMOUNTING
- As the name implies, this is when a component is REMOVED from the DOM

React Components have methods that, when called, are invoked at certain stages in it's lifecycle. Most of these are optional and for the most part self-explanatory, but serve important functionality.

Lets break it down piece by piece:

INITIALIZATION

constructor() - (optional**) Similar as using constructor in JS classes, constructor is used the same way in React passing in 'props' as an argument. Within the constructor scope is the invocation of super(props). Calling super will allow us access to variables from the parent class while passing in props will allow us to pass data from one component to another [3]

**Although a constructor() call is technically optional, you will usually want to call it for two reasons:

to initialize the local state by assigning an object to this.state
to bind an event handler method to an instance [5]

class Example extends React.Component {
    constructor(props) { 
    super(props);
    this.state = {
     };
}

MOUNTING

getDerivedStateFromProps() - (optional) called before render. Here we can set the state based on the initial props.[1]

componentWillMount() - (optional) called before render. After this method, the component will get mounted.

render() - (required) this method is what actually puts our HTML on the page. Once it is run, you will be able to see your component. When changes are made to the props/state this method will be invoked again to re-render the page.

componentDidMount - (optional) called after render(). can be used to change the state after it has successfully rendered onto the page.

UPDATING

getDerivedStateFromProps() - (optional) same functionality when used in mounting. see above.

shouldComponentUpdate() - (optional) returns a boolean. if set to false, the component will not update when a state/prop is changed. If true or not called, it will allow updates to occur. Essentially, this method makes a re-render optional.

componentWillUpdate() - accepts two arguments: next props and next state. It is called once after shouldComponentUpdate and before a re-render.

getSnapshotBeforeUpdate - (optional) accepts two arguments: previous props, and previous state. It allows the access to any props and stats before the component was updated. If using this method, you are required to have componentDidUpdate() called as well, otherwise there will be bugs on your app.

componentDidUpdate() - (optional) called after a component is updated in the DOM [3].

UNMOUNTING

There's only one method that will run when you wish to unmount your component and that is componentWillUnmount()

componentWillUnmount() - (required) immediately after removing component from DOM, this will invoke. This denotes the end of a component's lifecycle and is required when properly trying to remove a component from the app.

[1] https://www.w3schools.com/react/react_lifecycle.asp
[2] https://www.javatpoint.com/react-constructor#:~:text=The%20constructor%20is%20a%20method,before%20the%20component%20is%20mounted.
[3]https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/
[4] https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/
[5] https://reactjs.org/docs/react-component.html#:~:text=If%20you%20don't%20initialize,props)%20before%20any%20other%20statement.

Encryption Methods

Vincent Tong — Sun, 01 May 2022 23:41:25 +0000

What is Encryption?

Encryption is the process of changing plain-text information into a seemingly random, or noncoherent sequence of characters known as cipher text via the implementation of complex mathematical algorithims. The purpose for which is to safely deliver a message to a recipient without worry of it being intercepted by a third party or even tampered with.

But what's the point of changing the message if the person receiving it won't be able to understand it either?

That's where an Encryption key comes in handy. The purpose of the key can be to both encrypt and/or decrypt a message. This allows for the recipient of the encrypted message to actually understand our message.

The Strength of an encryption key is determined by how well a hacker can guess it through brute force. A four-bit key (2^4) has 16 possible combinations, which means the hacker has a pretty good chance of guessing it right. Today's standard is a 256-bit key, which produces at 78-digit number which will probably take that same hacker much much longer to guess.

Why use Encryption?

While encryption today is widely used today in our world of technology anywhere from sending a simple text message to protecting your financial information, it has a long history dating all the way back as far as 600 BC. In ancient wars, the Spartans would use an item called a Scytale, which is a piece of leather wrapped around a wooden pole. The piece of letter would consist of letters when unwrapped, were meaningless. Only when this leather strip was wrapped around a correctly sized rod, would the true message reveal itself.

Fast forward a little ways down the road in 1918, a German engineer by the name of Arthur Scherbius invented the Enigma machine, which was later integrated by the German military to send coded messages. This device was deemed uncrackable by other nations and was considered one of Germany's strongest weapons as it allowed them to send messages without the need to worry that their enemies would be able to decipher it.

It wasn't until the invention of the bombe machine that Germany's infamous Enigma machine met its match. The bombe machine was a large electro-mechanical device used by British cryptologists like Alan Turing to decipher the Enigma machine's coded messages which ultimately change the tides of war in the Allies' favor during World War II. The Imitation Game, which is a fantastic movie which goes more into detail about this topic. It features Benadryl Cucumberpatch as Alan Turing and explains the functionality of his bombe machine much more in depth. But for simplicity purposes, you can consider the bombe machine as one of the first electronic decryption devices.

This was not intended to be a history lesson, but I just wanted to show you the big scope that encryption has in our lives and the benefits of being able to securely send messages across our data and even across the world. Back then, the main purposes of encryption was to prevent our enemies from knowing our secrets. Well, not much has changed. In the context of using encryption in our daily lives, its to prevent hackers from maliciously using the information we send out.

Types of Encryption

There are 2 main types of Encryption, Symmetric and Asymmetric.

Symmetric

We talked briefly about keys and their importance. A symmetric encryption uses only one key to both encrypt and decrypt electronic data. Both parties must have access to this key so that it can be used to decrypt their messages. This method scrambles data so that it cannot be understood by anyone outside of the entities who do not have the key. Typically, symmetric encryptions are faster and able to efficiently send larger pieces of data, albeit less secure than Asymmetric encryption. This is due to the risk of the key being compromised. If any outside party were to have the key, they could use it maliciously to decrypt messages that were intended to be private.

Asymmetric

While symmetric encryption uses a single key. Asymmetric uses two keys: a public key, and a private key. The public key is shared with all intended recipients of the message while the private key is known only to the generator of the key. The public key is used to encrypt the message while the private key's purpose is to decrypt. Asymmetric encryption is preferred over its symmetric counterpart when security is prioritized over speed and where personal identity verification is required.

End-to-End Encryption (E2EE)

I felt I should also mention this encryption method as it differs slightly from the above. This encryption method can be mistakenly confused with symmetric encryption because it only requires one key. However, where it differs is the fact that the key to decipher is known only between the sender and recipient. The third party that is responsible for sending the encrypted message does not have access to this key, therefore they do not know the contents within it. This is why certain companies who provide end-to-end encryption services can not provide the texts of their customers over to the police.

Notable Encryption Methods

Data Encryption Standard (DES) [Symmetric]
An outdated, but huge step in data encryption, DES was developed in the 1970s as a proposal for its used in protecting sensitive, unclassified electronic government data. It takes a fixed-length (64bit) of text, or its block size, and turns it into a cipher text of identical length. DES then uses a 64 bit key to change the plain text. Technically only 56/64 of the bits are used by the algorithm to make this change, the remaining bits are used for checking parity, or error detecting code. Those 8 remaining bits are discarded afterwards, making the true key length 56 bits. The process for decryption is the same as in encryption, only in reversed order.
Triple Data Encryption Standard (3DES/TDES) [Symmetric]
While the DES was a major milestone in encryption, it's 56bit key is considered short in comparison to its same-era decryption techniques. TDES applies the DES cipher algorithm three times to each data block, which increases the key size of DES without having to create a new block algorithm.
Rijndael/Advanced Encryption Standard (AES) [Symmetric]

Formerly known as Rijndael, this algorithm was selected to become the Advanced Encryption Standard by the National Institute of Standards and Technology in 2000. Officially published in 2001, AES operates on a 128, 192, or 256-bit key depending on how many rounds of transformations occur on the plaintext (10/12/14 rounds respectively). Compared to DES' 56 bit key, this is much more secure. DES operates on the Feistel Cipher Principle, which divides the block into 2 before it transforms plaintext while AES works on a substitution & permutation principle. AES is also faster than DES because it uses a more mathematically efficient algorithm.

Blowfish Cipher [Symmetric]
Designed in 1993, this encryption method is still considered strong to this date as there are no notably effective cryptanalysis methods. It was initially designed by Bruce Schneier to be a general purpose algorithm to replace DES. Similarly to DES, this algorithm uses the Feistel Cipher principle and uses a 64-bit block size. However it's key length can range anywhere from 32 bits up to 448 bits and runs the plain text through 16 rounds of transformations. Due to the block size, it is not recommended to use this encryption technique on files larger than 4GB.
Twofish [Symmetric]
The Twofish algorithm was amongst the top 5 competitors including the aforementioned winner Rijndael to become the Advanced Encryption Standard. It is the successor to the Blowfish method, however the latter is still more widely used due to it being around longer. While blow fish ciphers data blocks of 64 bits, Twofish ciphers data blocks of 128 bits. One of the key factors that this method was not chosen of Rijndael was due to its encryption speed, although it has been noted to be slightly faster when operating with 256 bit keys.
Rivest-Shamir-Adleman (RSA) [Asymmetric]
This method, which derives its name from its designers Ron Rivest, Adi Shamir, and Leonard Adleman, is one of the oldest and widely used algorithms for secure data transmission. As this method is asymmetric, it uses a public encryption key and a private decryption key. The public key is based on two large prime numbers, which are kept secret. Only someone with knowledge of the two prime numbers would be able to successfully decode/decrypt a file. The main reason this method is highly secured is because of the difficulty it takes to factor the produce of the two large secret prime numbers. While secure, this method is also quite slow, making it not suitable to directly encrypt user data. It is more commonly used to transmit shared keys for symmetric-key cryptography.

To Summarize

Understanding data encryption is the first step to keeping your information secure, whether its a private text message or a company email. No matter how you look at it, encryption provides so a lot of protection in the form of:

Authentication: being able to verify a file/message's origins
Nonrepudiation: prevents the message sender from being able to deny sending a message.
Security: prevents unwanted entities from reading your data
Integrity: verifies that the message/file has not been tampered with since it was sent

RESET CSS & Normalize.css

Vincent Tong — Sun, 24 Apr 2022 22:30:44 +0000

If you're like me, adding CSS (cascading style sheets) to your projects is one of the most fun parts of developing a webpage. It's the part of the job that really lets you give your project some color, and bring it to life. However, there are many things about webpage styling that you don't really notice in the beginning.

For example, take this very basic html document I've created:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Vincent's Webpage</title>
    </head>

    <body>
      <main>
        <header>
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
          <h1>H1 Heading</h1>
          <h2>H2 Heading</h2>
        </header>

        <section class="info">
          <p class="description"> paragraph element
        <section class="examples">
          <ul>Example List
            <li>listItem1</li>
            <li>listItem2</li>
            <li>listItem3</li>
          </ul>
          <button>THIS IS A BUTTON</button>
          <input type="checkbox"> THIS IS A CHECKBOX
          <select>
            <option>Select Option 1</option>
            <option>Select Option 2</option>
          </select>
      </main>

    </body>
  </html>

From a quick glance you can see that there are few different html elements incorporated, such has: headers, hyperlinks, paragraphs, list items, buttons, etc.

As you'd expect this is what this very basic webpage would look like:

But ask yourself these questions:

Why are the headers bold?
Why is an H1 heading a different size than an H2?
When you click a hyperlink, why did it turn purple?

We have never added any css styling of our own to these elements and yet here they are, all dressed by themselves with no help from us. They grow up so fast.

Don't let these few unanswered questions haunt you at night. The short and simple answer is: Browser Defaults.

Did you know that different browsers have their own default style settings? It might be hard to tell at first but take a look at this side-by-side comparison between some popular browsers used today.

Some aspects may be more difficult to distinguish amongst browsers such as the hyperlinks and headings. However, this becomes much clearer when we look at certain elements such as the checkbox and the drop down menu items. As you saw, these styles are specific to each individual browser.

Detailed lists of specific browser stylings can be found here:

The purpose for these browser defaults is so that pages are rendered with more uniformity and consistency if we developers don't specify them ourselves. But what if we didn't want our page to incorporate any of the styles that have been preset? Would we have to go in and change/undo every preset style change that the browser set for them? That seems rather excessive. Fortunately for us there are methods which we can use to make that process more efficient. These methods are called CSS Resets.

CSS RESETS

There are a few ways to implement css resets on your page:

The first is the Universal Selector:

Universal Selector - How to Use

In a new css file, we would start this off with an asterisk(*) followed by curly braces {} like so:

*{
}

What this does is target every single element on your page. Typically with this method, we would set the margin and padding to 0 to remove any default user agent styles associated with padding and margin.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Now that we added these styling changes we will need to link it in our initial html document like so:

    <head>
      <title>Vincent's Webpage</title>
      <link rel="stylesheet" href="/styles.css">
    </head>

Now that it's been linked, we can take a look at how this affected our webpage (I will be using chrome for any examples moving forward).

As you can see, all stylings associated with margins and padding have been set to 0. This is a very simple way to reset many styling changes at once.

The main benefit to this method is that it is a very quick and easy way to remove all formatting. The downside is that if your webpage has a lot of content, this reset would apply to many elements on the page which in turn will affect the speed of the website.

A better way to reset your file is to reset your style on each element individually. This way, you're only applying the reset styles when they are needed as opposed to every single element that might exist out there which will result in faster speeds on your site.

ERIC MEYER'S CSS RESET

Eric Meyer's version of CSS Reset is one of most widely used and popular implementations of this technique.

Eric Meyers CSS RESET TEMPLATE

Eric Meyer's Website

Eric Meyer's CSS Reset - How to Use

Eric Meyer's reset template is essentially a "plug-and-play". You can just copy it into a css file and link it to your html doc.

    <head>
      <title>Vincent's Webpage</title>
      <link rel="stylesheet" href="/reset.css">
      <link rel="stylesheet" href="/styles.css">
    </head>

NOTE: It is very important that you place the link before your own style.css link. This is because the page is rendered from top-down, meaning you want to reset your css BEFORE you add your own styling to it.

For the purposes of this example, our previous styles.css has been commented out to show what reset.css will do to our webpage.

From there on, you can design and style the page the way you want.

To summarize CSS Reset, it is an effective way of resetting the styling of HTML elements down to a consistent baseline. This will give the developer a peace of mind knowing that any user's viewing their page via different browsers will not be affected. Performing a css reset is by no means a requirement, but as you go on to develop webpages in the future, it is a great technique to understand in order to save you much time and headaches.

While CSS reset is a good thing to learn, it doesn't come without its own flaws, such as being hard/nearly impossible to debug. It is also non-modular, meaning that there are no section breaks in styles. This is where Normalize.css comes into play.

NORMALIZE.CSS

Normalize.css is a tool developed by Nicolas Gallagher & Jonathan Neal as an alternative to CSS resets.

Nicolas Gallagher

Jonathan Neal

An important distinguishing feature of Normalize.css from CSS resets is that it doesn't aim to completely create a clean slate when it comes to styling, rather it's goal is to maintain a consistent style across different browsers. Instead of resetting all the preset styles, it preserves the useful defaults.

There are many reasons why one would wish to use this tool over a css reset:

Preserved Defaults
To elaborate on what preserved defaults entails, normalize.css keeps you from having to re-style what you've already reset from using a css reset.
Less Clutter
When it comes to your debugging tools, reset css usually has a long inheritence chain that can just be an absolute nightmare to stare at.

Modular Unlike css resets, Normalize.css is modular, meaning that your project is divided into separate sections, making it much easier for you to pick and choose which styles to apply to each of them.
Well Documented This project was created to help teach users how separate browsers render their elements by default. Each section of their code has comments to describe its purpose specific to each browser.

This is just a small snippet to show you what I mean. The repository is very intuitive and helps to provide the user with insight into how it works.

Supported Browsers

Currently, normalize.css supports the following browsers:

Chrome
Edge
Firefox ESR+
Internet Explorer 10+
Safari 8+
Opera

Notable users of Normalize.css

Twitter
TweetDeck
GitHub
SoundCloud
Guardian
Medium
Boostrap

Normalize.css - How to Use

The repository for normalize.css can be found here.

Once forked, you can add the link of your file location to your index.html as we've done previously with our reset.css and styles.css files.

From there, you have two options:

You can modify the preset settings inside of the normalize.css files to your liking.
Leave normalize.css untouched and overwrite those changes in your own .css file. Just be sure to add your .css file under the normalize.css file in your html document.

TO SUMMARIZE

Reset CSS resets all styles that come with a browser's user agent. It can however, be excessive as it may make many unnecessary overwrites in the styling. It can be difficult to identify bugs and it is non-modular. You can create your own reset by using the universal selector reset or you can utilize Eric Meyer's template.

Normalize.css doesn't affect all default stylings. It will instead preserve the useful ones. It corrects bugs and common browser inconsistencies and is well documented and intuitive to use.

IN CONCLUSION

Both CSS Reset and Normalize.css have their benefits. It's not necessarily better to use one over the other but it's essential to understand the differences in order to decide which route you wish to take when designing your webpage. Reset CSS is essentially a clean slate, allowing you freedom to style your page from the ground up whereas Normalize.css helps break it down into sections for more modularity.

Both help to achieve the same goal - to get default stylings out of the way to give you creative freedom to style your page the way you wish to.

Introduction to Zombie.JS

Vincent Tong — Mon, 18 Apr 2022 02:13:15 +0000

Before we talk about zombies, let's talk about skeletons. In particular, the skeleton we will discuss is named DOM.

What is the DOM?
DOM stands for Document Object Model. It is the basis for how a browser represents a webpage. The DOM is technically a type of API (application programming interface) that is inside of your browser.

An easy way to break it down is as so:

Document = file
Can be any type of file. In most cases, when we refer to the DOM we are referring to our html file.
Object = tags/elements
Consists of anything you put inside of the file.
In the context of an html file, this would be the body, html, head, body tags.

Model = layout structure Now that we have all of our elements and tags added to the html, the way we organize those pieces will define our the skeleton of our page!

Enough about skeletons, I know you're only here for the zombies.

Firstly, I would like to introduce you to Assaf Arkin, the developer for zombie.js

https://github.com/assaf/zombie
http://twitter.com/@assaf

If I had to breakdown what zombie.js does in a single sentence I would say that it is a lightweight simulated browser environment typically geared towards efficiently running tests.

What do I mean when I say simulated? Unfortunately, I don't mean to say that Assaf created his own version of the Matrix. However, the functionality of this tool is quite interesting due to the fact that it allows you to test components of your application without ever actually having to open a web browser. Instead, it will let you know if you have any errors in the comfort of your own console.

"If you're going to write an insanely fast, headless browser, how can you not call it Zombie" -Assaf Arkin

In-depth description:

Automated tests can be split into two types: Unit Tests and Integration Tests

Unit tests are tests in which you are only looking at a specific component of your application, like a specific object for example. These are typically used to ensure that they react the way you wanted them to as to not interfere with the functionality of other subsets of your application. Because these tests are on smaller components, their load times are usually not a cause for concern.

Integration Tests are used when you collectively want to see if all your individual components are operating as expected. Because of the complexity of testing these components can scale quite largely, this is where zombie.js comes in handy.

zombie.js allows you to run tests without actually having to open a web browser. Rather, it creates it's own simulated browser and because the HTML pages no longer need to be displayed, it cuts and saves you time from having to render those pages.

The image above is just a small list of actual browser features that zombie.js can imitate. It can simulate anything from new tabs to looking up/deleting cookies.

To SUMMARIZE:
In the software development industry, testing is an integral part in creating any application. The user can utilize zombie.js to create any set of tests that run in a browser-like object and because that browser-object never has to actually render any HTML, the tests will run much faster than they would use any other browser out there. Any changes to your code, whether large or small, will benefit you greatly by running the tests for it through zombie.js.

How to use Functions

Vincent Tong — Fri, 18 Feb 2022 15:49:54 +0000

Declaring Functions:
functions can declared by using the function keyword, followed by the name you wish to give a function, parenthesis, and curly braces like so:
function namedFunction () {}
inside the parenthesis, you can add parameters. the names of these parameters can be anything but they should represent the data that you'd expect someone to input into this function if they were using it. Let's say we were creating a function to find the area of a rectangle, which is length times width. We can add two parameters named len and wid. like so:

function rectangleArea (len, wid){}
now inside your curly braces is where our code will go.

function rectangleArea (len, wid){
return len * wid;
}

And there you have it! We have successfully declared a function.

Anonymous functions:
Functions don't necessarily need names. Instead, we can assign the function to a variable in a method called a function expression. Take our previous example, instead of naming it, we could have instead assigned it to a variable like so:

var area = function(len, wid){
return len * wid
}

Anonymous functions can be useful if you don't need to reference it later on. However, you can still provide a name so that it can be easily called for future uses.

Calling Functions:
Whether or not the function is named, we can still call them in a similar fashion. We just need to enter the name of the function, or the name of the variable if it was declared anonymously, as a keyword followed by the arguments. arguments are what we input in the parenthesis of the function, they take the place of the parameters we discussed earlier and can be any datatype, be it simple (like strings & numbers) or complex (like arrays and objects).

rectangle(3, 4) // calling the rectangle function will return 12
area(5, 4) // calling the function expression will return 20

Function Scope

Now its time to talk about scope- and no, i'm not talking about the mouthwash brand. function scopes define the limits of what can reach the variables inside of a function and also what variables that same function can reach outside of itself. First, you should understand that global scope, which is the window that encompasses all of your code. Any variable declared in the global scope can be accessed within any function or code block.

//global window
var x = 20;

//function within the global window
function logX(){
  //function will try to access x from inside its own scope
  console.log(x) 
}

//calling the function
logX();//  20

In the example above, the function is able to access the variable x, which was defined outside of its own function scope. It is successful because variables defined in the global scope can be accessed from anywhere.

now lets see what happens when we do the opposite- try to access a variable inside a function's scope from the global window.

function logX(){
  //same function but we declared a variable y inside
  var y = 10;
  console.log(x) //=> 20
}

//trying to access the variable y outside of the function scope
console.log(y);// y is not defined

As you can see, we get a reference error: y is not defined. This is because the variable y is inside of a specific function's scope, and therefore can only be accessed within that function.

The image above should demonstrate the boundaries scopes can set. The formatting is very similar to that of a nested russian doll.

What we Learned:

Functions can be declared - with a name or anonymously with a function expression
When calling a function, you can do so by calling the function name or the variable that the function expression is assigned to.
Function scopes define what variables can be accessed and from where

Conclusion:
To summarize, functions are the building blocks of our code. Without them, nothing would get done, literally! Being able to create your own functions and be able to use them anywhere in your code is the first step to becoming a successful programmer.

Functions can become much more complicated, but what we learned today will be a great starting point for understanding future topics. Stay tuned for more to come!