Even an old topic as it is today, it is still worth revisiting…

Photo by Fabian Blank on Unsplash

If you use JavaScript across the fullstack, you must had one time, if not all the time, run into some errors relating to the module system, either it’s CommonJS or ESM or even AMD. This blog gives you a run down of all the different module systems. Note that discussion of the history of module system is not in focus today.

Revealing Module Pattern

This is the first and foremost system before anything else. It leverages that JavaScript scopes work at the function level so the pattern uses function to encapsulate private objects.


Optional vs. Default value vs. Undefined; Null vs. Undefined; Never vs. Void; Any vs. Unknown

Photo by Raychan on Unsplash

In this blog, we will go through some basic and advanced types comparison in TypeScript which will help you better type in the code.

Optional vs. Default value vs. Undefined

If you first know about TypeScript, it’s easy to get confused about the following options :

  • Parameter is optional: x?: number
  • Parameter has a default value: x = 123
  • Parameter has a union type with undefined: x: undefined | number

Let’s go through them one by one:

1. With optional parameter, the type will be undefined if param omitted:function f1(x?: number) { return x }
// type ======>
// function f1(x?: …


Quick start on Partial, Required, Readonly, Record, Pick, Omit, Exclude, Extract, Parameters, etc.

Photo by Akira on Unsplash

Partial<T>

— — Make all properties of a type optional.

class StateStore<T> {
constructor(public current: T) { }
update(next: Partial<T>) {
this.current = { ...this.current, ...next };
}
}
const state = new StateStore({ x: 0, y: 0 });
state.update({ y: 123 });
console.log(state.current); // { x: 0, y: 123 }

Required<T>

— — Make all the members of a type required.

type Example = {
a?: string,
b?: number,
}

const example: Required<Example> = { a: "a" }
// Property 'b' is missing in type '{ a: string; }' but required in type 'Required<Example>'.

Readonly<T>

— — Make all properties of a…


A quick walkthrough of key concepts of TypeScript Function and Class

Photo by Zoe Nicolaou on Unsplash

Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Function

====> Function Expressionfunction greeter(fn: (a: string) => void) {
fn("Hello, World");
}
function printToConsole(s: string) {
console.log(s);
}
greeter(printToConsole);====> Type Aliastype GreetFunction = (a: string) => void;function greeter(fn: GreetFunction) {
// ...
}
====> Call signature (for functions with additional properties) Note compared to a function type expression - use : between the parameter list and the return type rather than =>.type DescribableFunction = {
description: string; // additional properties
(a: string): void;
};
function doSomething(fn: DescribableFunction) {…

A walkthrough of concepts such as Object literal, Generics, Index signature, etc. Consumed alongside the TypeScript Handbook

Photo by Darya Jumelya on Unsplash

Without further ado, let’s jump in! Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Concepts that can be confusing

Object literal types

// explicit type
type Point = {
x: number;
y: number;
};
// anonymous function pointToString(pt: {x: number, y: number}) {
return `(${pt.x}, ${pt.y})`;
}

Type Aliases vs. Interface

type…


Photo by Numeroo77 on Unsplash

Note that some examples are extracted from the TypeScript Handbook, and all tributes should go to it.

Why need narrowing

Let’s say we have a union type, TypeScript will only allow you to do things with the union if the thing is valid for every member of the union due to contextual typing:

function printId(id: number | string) {console.log(id.toUpperCase());
// Property 'toUpperCase' does not exist on type 'string | number'.

The solution is to narrow the union with code, the same as in JavaScript with if else statement. …


Photo by Aldebaran S on Unsplash

Today I need to set up my connection to Redshift and need to use SSH (I got confused!). So just thinking it will be good to provide some basic information for anyone who needs to connect to a remote server and run commands on it.

Ssh Protocol

The SSH protocol ( Secure Shell) is a method for secure remote login. It is a secure alternative to the non-protected login protocols (such as telnet, rlogin) and insecure file transfer methods (such as FTP).

Secure Shell, or Secure Socket Shell, is a protocol which allows client to connect securely to a remote server. …


Photo by Chaman Raj on Unsplash

Not long ago, my friend’s company (let’s say amazingCorp )conducted a Pen test against the whole codebase and identified a few security vulnerabilities. One of them being adding samesite attribute to all cookies if it’s absent.(e.g. mostamazingCorp.com cannot make cross-domain requests to API.amazingCorp.com) . To be more specific, he wants:

Given I am on a non amazingCorp domain e.g mostamazingCorp.com
When I am making an http get or post request to api.amazingCorp.com
Then I should not be able to complete the request
Given I am on a amazingCorp subdomain e.g login.amazingCorp.com When I am making an http get or post…

Photo by John Tecuceanu on Unsplash

Not long ago, I was tasked to assess our current Content Security Policy (CSP) and find out ways to improve it. It took me longer than I thought, as I need to familiarise myself with the terminologies and protocols before go into implementation detail.

What is CSP?

Content-Security-Policy(CSP) is the name of a HTTP response header (or as meta tag) that browsers use to safeguard your site.


Learn about Descriptor Protocol, Data vs. Non-data descriptor, look-up chain, mechanism behind functions, and the __getattribute__that empowers the descriptors at the back

Photo by Joseph Gonzalez on Unsplash

Descriptor is any object which defines the methods __get__(), __set__(), or __delete__(). When a class attribute is a descriptor, its special binding behaviour is triggered upon attribute lookup. Normally, using a.b to get, set or delete an attribute looks up the object named b in the class dictionary for a, but if b is a descriptor, the respective descriptor method gets called.

__get__(self, obj, type=None) -> object
__set__(self, obj, value) -> None
__delete__(self, obj) -> None
  • If an object defines __set__() or __delete__(), it is a…

E.Y.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store