Skip to main content

· 2 min read

Docker is a powerful platform designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. This means that the application will run on any other machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

Here's a breakdown of the key aspects of Docker:

1. Containers

Containers are at the heart of Docker. They are lightweight, standalone, executable packages that include everything needed to run a piece of software, including the code, runtime environment, libraries, environment variables, and configuration files. Containers are isolated from each other and the host system, but they share the host OS kernel, making them more efficient and smaller in size than traditional virtual machines.

2. Images

A Docker container is built from a Docker image. These images are the building blocks of containers. An image is essentially a snapshot of a container, capturing its specific configuration. Docker images are often created by combining and modifying standard images downloaded from public repositories such as Docker Hub.

3. Docker Hub

Docker Hub is a service provided by Docker for finding and sharing container images with your team. It is a huge library of over 100,000 applications packaged in containers and ready to be used.

4. Dockerfile

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Using docker build users can create an automated build that executes several command-line instructions in succession.

5. Portability

Since Docker containers can run on any Docker host, on any platform, and in any cloud, the portability and ease of deployment are huge advantages. This makes it easy for developers to develop on their laptops and be assured that their applications will run identically in any other environment.

6. Microservices

Docker is ideal for microservices architecture. You can build each component or module of your application in a separate container. This not only keeps the development organized but also allows each service to scale independently.

· 3 min read

Welcome to the world of algorithmic problem-solving with JavaScript! Whether you're a beginner or an experienced developer, mastering the fundamental syntax is crucial for tackling coding challenges effectively. In this guide, we'll explore key JavaScript syntax topics that are commonly used in algorithmic problem-solving.

1. Variables and Data Types

Understanding how to declare variables using let, const, and var, and grasping the basics of data types like strings, numbers, and booleans lays a solid foundation for your coding journey.

let age = 25;
const name = "John";
var isStudent = true;

2. Arrays and Strings

Arrays and strings are essential data structures. Learn how to manipulate arrays using methods like push(), pop(), shift(), and work with string methods such as charAt(), substring(), and indexOf().

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);
let greeting = "Hello, World!";
console.log(greeting.substring(0, 5)); // Output: Hello

3. Control Flow

Mastering control flow constructs such as if, else if, and else, as well as loops like for and while, is crucial for making decisions and iterating through data.

let score = 85;

if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}

4. Functions

Functions are the building blocks of JavaScript. Learn to define functions using the function keyword, handle parameters, and use return statements effectively.

function add(a, b) {
return a + b;
}

let result = add(3, 7);
console.log(result); // Output: 10

5. Objects

Objects are powerful in JavaScript. Create and manipulate objects, access their properties, and use methods.

let person = {
name: "Alice",
age: 30,
greet: function() {
console.log("Hello, " + this.name + "!");
}
};

person.greet(); // Output: Hello, Alice!

(Continue with other topics...)

This guide provides a snapshot of essential JavaScript syntax for algorithmic problem-solving. Stay tuned for more in-depth explanations and examples in upcoming articles. Happy coding! 🚀

More

Get the maximum of an array

spread syntax:

const arr = [1, 2, 3];
const max = Math.max(...arr);

Get Last Element in an Array

The slice() method returns specific elements from an array, as a new array object. This method selects the elements starting at the given start index and ends at the given end index excluding the element at the end index. The slice() method does not modify the existing array. Providing one index value returns the element at that position & a negative index value calculates the index from the end of the array.

Clear an array (empty Array)

  1. By modifying the length property If the modified length is smaller than the original length, excess values will be removed.

    const array = [1, 2, 3]
    array.length = 2

    console.log(array)
    // [1, 2]

    Because the new length is smaller than the original, the excess value (3, in this case) is removed.

    If the new length is larger than the original length, the array will be filled with undefined values to make up for the new length.

    So set the length to 0, the array will be empty.

    const array = [1, 2, 3]
    array.length = 0

    console.log(array)
    // []
  2. Or reassign a new value (an empty array) to a variable that initially has a non-empty array assigned to it.

· 2 min read

Customized rendering refers to the ability to create and control the appearance and behavior of components in a way that goes beyond the default or standard rendering provided by a library or framework. Customized rendering is a powerful concept that allows you to tailor your application to specific needs and design considerations.

· 2 min read

In computer science language, "expression," "predicate," and "statement" are terms often used to describe different constructs in programming languages. Here's a brief explanation of each:

Expression:

An expression is a combination of values, variables, operators, and function calls that can be evaluated to produce a single value. Expressions can be simple, like a literal value or a variable, or complex, involving arithmetic or logical operations. Examples: 5 + 3, x * y, isReady && hasPermission, Math.sqrt(16).

Predicate:

A predicate is **a specific type of expression ** that evaluates to either true or false (also produce a single value). Predicates are commonly used in conditional statements and loops to make decisions based on whether a condition is true or false. Examples: x > 0 (evaluates to true or false based on whether x is greater than 0), isReady && hasPermission, name === "John".

Statement:

A statement is a complete instruction that performs a specific action. Unlike expressions, statements don't necessarily produce a value. They are executed for their side effects. Examples: variable declarations (let x = 5;), control flow statements (if, else, for, while), function declarations (function myFunction() ).

an expression is a combination of values and operators that evaluates to a single value, a predicate is a specific type of expression that evaluates to true or false, and a statement is a complete instruction that performs an action. In many programming languages, expressions can be used as part of statements, and predicates are often used to control the flow of statements.

· 2 min read

State Hooks

  • useState: declares a state variable tthat we can update directly.
  • useReducer: declares a state variable with the update logic inside a reducer function.

Context Hooks

Context lets a component receive information from distant parents without passing it as props.

  • useContext: reads and subscribes to a content.

Ref Hooks

Refs let a component hold soe information that isn't used for rendering, like a DOM node or timeout ID. Refs are an "escape hatch" from the react paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.

  • useRef: declares a ref. We can hold any value in it, but most often it's used to hold a DOM node.

Effect Hooks

Effects let a component connect to and synchronize with external systems. This includes dealing with network, browser DOM, animationm widgets written using a different UI library, and other non-React code.

Effects are an “escape hatch” from the React paradigm. Don’t use Effects to orchestrate the data flow of your application. If you’re not interacting with an external system, you might not need an Effect.

  • useEffect: connects a component to an external system.
  • useLayoutEffect: fires before the browser repaints the screen.
  • useInsertionEffect: fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.

Performance Hooks

A common way to optimize re-renderinng performance is to skip uneccessary work.

  • useMemo: lets you cache the result of an expensive calculation.
  • useCallback: lets you cache a function definition before passing it down to an optimized component.
  • useTransition: lets you mark a state transition as non-blocking and allow other updates to interrupt it.
  • useDeferredValue: lets you defer updating a non-critical part of the UI and let parts update first.

Resource Hooks

Resources can be accessed by a component without having them as a part of their state.

  • use: lets you read the value of a resource like a Promise or context.

Other Hooks

Commonly useful to library authors.

  • useDefaultValue
  • useId
  • useSyncExternalStore

· One min read
  • Amazon S3 can be used to store and retrieve any type of data. By default all Amazon S3 resources are private. Only the resource owner can optionally grant access permissions to others by writting an access policy.

  • Amazon EC2 uses public key cryptography to encrypt and decript login information. Public key cruptography uses a public key to encrypt a piece of data, and then the recipient uses their private key to decrypt the data. The public and private keys are known as a key pair.

A virtual private cloud (VPC) is a virtusl network dedicated to an AWS account. While a VPC resides in an AWS Region, a subnet must reside within a single Availability Zone.

  • Change the Amazon EC2 instance type:

We must stop your Amazon EBS-backed instance before we can change its instance type. Plan for downtime while our instance is stopped. Stopping the instance and changing its instance type might take a variable amount of time depending on our application's startup scripts.

· One min read

slug: heap-application title: Applications of Heap tags: [data structure, heap]

leetcode natively supports JS PQs, including a Min one.

github datastructures - priority queue

github leetcode - environment for the programming languages

Use the Heap data structure to obtain Top K’s largest or smallest elements.

Solution of the Top K largest elements:

  1. Construct a Max Heap.
  2. Add all elements into the Max Heap.
  3. Traversing and deleting the top element, and store the value into the result arry T.
  4. Repeat step 3 until we have removed the K largest elements.

Solution of the Top K smalllest elements

  1. Construct a Min Heap
  2. Add all elements into the Min Heap
  3. Traversing and deleing the top element, and store the value into the result array T.
  4. Repeat step 3 until we have removed the K smallest elements.

Time Complexity: O(KlogN + N) Space complexity: O(N)

· 2 min read

JS reference

Map.prototype.entries() VS Object.entries()

Object.entries() The Object.entries() static method returns an array of a given object's own enumerable string-keyed property key-value pairs.

The entries() method of Map instances returns a new map iterator object that contains the [key, value] pairs for each element in this map in insertion order.

Methods of creating Array

1. By using constructor function

Create a new Array object.

let colors = new Array();

when there is only a single number parameter provided, an array is created with its length property set to that number.

const arrayOfOne = new Array("2"); // Not the number 2 but the string "2"

Any constructor with multiple parameters, a new Array with the given elements is created.

2. By using array literal

let colors = ["red", "blue"]

let values = [1,2] // [1,2]

let values = [1] // [1]

3. By using Array.from()

The Array.from() static method creates a new, shallow-copied Array instance from an iterable (e.g.,Map and Set) or array-like (objects with a length property and indexed elements) object.

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

The mapFn function is called with the following arguments:

element The current element being processed in the array.
index The index of the current element being processed in the array.

Expamples

  • Array from a String

    Array.from("foo");
    // [ "f", "o", "o" ]
  • Array from a Set

    const m = new Set() .add(1)
    .add(2)
    .add(3)
    .add(4);
    console.log(Array.from(m)); // [1, 2, 3, 4]
  • Array from a Map

    const s = new Map() .set(1, 2)
    .set(3, 4);
    console.log(Array.from(s)); // [[1, 2], [3, 4]]
  • Array from an array-liked object

    arguments object

    function getArgsArray() {
    return Array.from(arguments);
    }
    console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]

    customized object

    const arrayLikeObject = {
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    length: 4
    };
    console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]