DEV Community: Joy Lee 🌻

Husky and lint-staged: Keeping Code Consistent

Joy Lee 🌻 — Thu, 11 Jul 2024 05:29:21 +0000

When a team works on a software project together, it's important for everyone's code to be neat and easy to understand. But sometimes, different computers and ways of working can make the code messy. Tools like husky and lint-staged can help fix this problem by checking the code automatically before it's added to the project.

What is lint-staged?

lint-staged is a tool that checks your code for mistakes and fixes them when it's staged in git. By using lint-staged, it helps keep your code clean and consistent.

Installation

1 . Install lint-staged as a development dependency:

npm install --save-dev lint-staged

2 . Configure lint-staged in your package.json file to run eslint and prettier on js and ts files.

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix --max-warnings=0", // both errors and warnings must be fixed
    // "eslint --fix" // errors must be fixed but warnings can be ignored
    "prettier --write"
  ]
}

3 . Run lint-staged on staged files using the following command:

npx lint-staged

What is husky?

husky is a tool that manages git hooks, automatically running scripts before each git commit. This setup ensures that lint-staged checks your code before it's committed. It helps you maintain code quality by catching issues before they're finalized.

Installation

1 . Install husky and initialize it:

# husky init (create .husky folder)
npx husky-init && npm install

# husky - Git hooks install
npx husky install

2 . Check if prepare command is added in your package.json

"scripts": {
    "prepare": "husky install"
},

3 . Edit .husky > pre-commit file with the following to run lint-staged before each commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

How It Works

Stage your code changes.
husky triggers the pre-commit hook.
The pre-commit hook executes lint-staged.
lint-staged runs eslint and prettier checks on staged files.
If errors or warnings are found, the commit is prevented with an error message.

ESLint and Prettier: A Guide to Cleaner Code

Joy Lee 🌻 — Mon, 01 Jul 2024 14:51:19 +0000

ESLint

ESLint is a tool that helps find and fix problems in JavaScript/TypeScript code. Using ESLint can help you write better and consistent code, which is especially useful when working in a team.

What is Lint? Linting is when a tool analyzes your code to find errors and style issues.

ESLint Example

Example 1 : Keeping consistent code style (quotes, indentation, semicolons, etc.)

const obj = {
  firstname: "Joy", // Error : for using double quotes
  lastname: "Lee",
}

Example 2 : Catching syntax errors

const x = 10
x = 5 // Error: const variable can't be reassigned

Example 3 : Warning for unused variables

function add(a, b) {
  const result = a + b // warning: 'result' is assigned but never used
  return a + b
}

Example 4 : Optimizing code

if (isAvailable === true) {..} // ❌
if (isAvailable) {..} // ⭕️

Example 5: Checking React prop-types

// Warning: 'name' prop is not specified
export const MyComponent = ({ name }) => {
  return <div>Hello, {name}</div>
}

Installing ESLint

npm init @eslint/config

To run ESLint, add the following to the scripts section in package.json, then run npm run lint in the terminal.

"scripts": {
  // ...
  "lint": "eslint .",
  "lint:fix": "eslint --fix ."
}

ESLint Config File

You can configure ESLint rules using a config file. Until ESLint version 7, .eslintrc was used for config, but from version 8, you use eslint.config.js

(reference : https://github.com/jsx-eslint/eslint-plugin-react#configuration)

// eslint.config.mjs
import globals from "globals"
import pluginJs from "@eslint/js"
import tseslint from "typescript-eslint"
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"
import { fixupConfigRules } from "@eslint/compat"

export default [
  // Apply settings to all JavaScript, TypeScript, and JSX/TSX files
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  {
    languageOptions: {
      parserOptions: {
        // Set parser options for parsing JSX
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2021,
        sourceType: "module",
      },
      globals: globals.browser, // Add browser global variables
    },
  },

  pluginJs.configs.recommended, // Apply basic ESLint rules
  ...tseslint.configs.recommended, // Apply TypeScript rules
  ...fixupConfigRules(pluginReactConfig), // Apply React rules

  {
    settings: {
      // Automatically detect React version
      react: { version: "detect" },
    },
  },
  {
    // Additional custom rules
    rules: {
      "no-console": "warn", // Warn when using console.log
      "no-unused-vars": "warn", // Warn for unused variables
      "react/prop-types": "off", // Disable React prop-types
      "@typescript-eslint/no-unused-vars": ["warn"],
      // Warn for unused TypeScript variables
    },
  },
]

Prettier

Prettier is a tool that formats your code according to a set style. It is often used with ESLint to fix errors and improve code quality, and Prettier to automatically format the code for readability and consistency.

Installing Prettier

npm i prettier --save-dev

Prettier Config

Create a .prettierrc file and add the following rules:

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80,
  "endOfLine": "auto"
}

Combining ESLint and Prettier

Differences Between ESLint and Prettier

ESLint: Mainly used to improve code quality and prevent errors. It checks for syntax errors, potential bugs, and style issues.
Prettier: Automatically formats code according to style rules like indentation, spaces, and quotes.

Preventing ESLint and Prettier Conflicts

ESLint and Prettier can have conflicting rules about style. To prevent this, add the following plugins:

eslint-config-prettier: Adds Prettier as an ESLint plugin. It makes Prettier errors show up as ESLint errors.
eslint-plugin-prettier: Disables ESLint rules that conflict with Prettier.

Installing Plugins

npm i -D eslint-config-prettier eslint-plugin-prettier @types/eslint-config-prettier

Adding Prettier to ESLint Config

Add Prettier settings to eslint.config.js. Make sure Prettier rules are at the end !

// eslint.config.mjs
import globals from "globals"
import pluginJs from "@eslint/js"
import tseslint from "typescript-eslint"
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"
import { fixupConfigRules } from "@eslint/compat"

// 👋 Import prettier plugins
import prettierConfig from "eslint-config-prettier" 
import pluginPrettier from "eslint-plugin-prettier"


export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  {
    languageOptions: {
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 2021,
        sourceType: "module",
      },
      globals: globals.browser,
    },
  },

  pluginJs.configs.recommended,
  ...tseslint.configs.recommended, 
  ...fixupConfigRules(pluginReactConfig),

  {
    plugins: {
      prettier: pluginPrettier, // 👋 Add prettier plugin
    },
  },
  {
    settings: {
      react: { version: "detect" },
    },
  },
  {
    // Additional custom rules
    rules: {
      "no-console": "warn", 
      "no-unused-vars": "warn", 
      "react/prop-types": "off",
      "@typescript-eslint/no-unused-vars": ["warn"],

      // 👋 Add prettier rules at the bottom
      ...prettierConfig.rules, // Merge Prettier and ESLint rules
      "prettier/prettier": "error", // Show Prettier errors as ESLint errors
    },
  },
]

Setting Up VSCode Formatter

Install 'Prettier - Code formatter' extension in VSCode.
Go to VSCode settings, search for 'Default Formatter,' and select 'Prettier - Code formatter.'
Search for formatOnSave in VSCode settings and check the box. This ensures Prettier formats your code every time you save a file.

Conclusion

Using ESLint and Prettier together can improve the quality and readability of your code. ESLint helps catch errors and enforce code quality, while Prettier ensures your code is consistently formatted. Setting them up is easy and can save you a lot of time and hassle in the long run.

Happy coding!

Exploring How Your Browser Displays Websites!

Joy Lee 🌻 — Fri, 28 Jun 2024 22:23:31 +0000

Browser Rendering

Have you ever wondered what happens when you type a URL into your browser? Let me break down the browser rendering process into simple, easy-to-understand steps! From requesting HTML files to painting the final pixels on your screen, you'll see each stage that transforms code into a visual experience.

1. Address Input

The client sends a request to the server via the URL.

2. Download HTML File

The server generates a response based on the requested URL, which could be HTML, JSON, or other file types. Here, the browser first downloads the HTML file.

3. Download CSS, JS

During HTML parsing, CSS, JS, and other modules are downloaded.

4. Network Connection Limit (HTTP 1.1)

Each browser has a limit on how many modules it can download from a single domain simultaneously.

Most browsers can download up to 6 modules per domain concurrently under HTTP 1.1. HTTP2 has different constraints and allows more than 6 concurrent requests. To circumvent this limit, developers use domain sharding by downloading modules from multiple subdomains.

5. Create DOM Tree, CSSOM Tree

After downloading HTML and CSS files, the browser parses them to create the DOM tree and CSSOM tree.

6. Create Render Tree

Based on the DOM and CSSOM trees, the browser constructs the Render tree, which consists of objects to be displayed on the screen. Nodes with display: none are excluded from the Render tree.

7. Layout

Using the Render tree, the browser calculates the position and size of each DOM object in the layout process.

8. Paint

Finally, the browser paints elements on the screen based on the layout.

9. Execute JS

JavaScript files are downloaded and executed by the JavaScript engine. Repeated code is compiled by the JIT compiler. More details on the JIT compiler's operation can be found here.

Only after JavaScript execution does the intended content appear on the browser screen.

CSR, SSR, and Progressive Rendering in Javascript

Joy Lee 🌻 — Sat, 19 Feb 2022 07:27:15 +0000

💻 Client Side Rendering (CSR)

CSR refers to rendering web pages directly in the web browser using JavaScript. All logic, data fetching, templating, and routing are handled on the client (browser) side.

How it Works

Client ➡ Server: Notifies site access.
Server ➡ Client: Sends index.html Initial access results in receiving an empty HTML with no content, leading to a blank screen.

<html>
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

Client ➡ Server: Requests JavaScript file.
Server ➡ Client: Sends app.js file (large size, long initial load time).Includes JavaScript logic, frameworks, and libraries needed to run.

Advantages

Fast subsequent re-rendering after initial load.
Reduced server data requests.

Disadvantages

Long initial loading time (Time To View).
Poor SEO due to empty initial HTML.

📲 Server Side Rendering (SSR)

SSR fetches all necessary data on the server side and sends fully rendered HTML to the client upon site access. This results in fast loading and efficient SEO. SSR does not depend on client device specifications, allowing HTML construction on high-performance servers.

How it Works

Client ➡ Server: Notifies site access.
Server ➡ Client: Sends index.html.
Server fetches required data and sends well-structured HTML during loading.
Client ➡ Server: Requests JavaScript file.
Server ➡ Client: Sends app.js.

Advantages

Optimized for Search Engine Optimization (SEO).
Fast initial page view.

Disadvantages

Page flickering on navigation.
Increased server load due to server rendering.
Potential functionality issues until full JavaScript load.

📱 Progressive Rendering

A form of Server Side Rendering where high-priority HTML content is initially rendered and painted on the client side. This approach ensures quick display of crucial content followed by less critical content.

How it Works

HTML request.
Initial high-priority HTML rendering
client painting.
Subsequent HTML rendering
client painting.

REFERENCE
https://blog.naver.com/jasonrewriter/222220034926
Youtube DreamCoding https://www.youtube.com/watch?v=iZ9csAfU5Os&t=277s

JavaScript Module Systems : CommonJS vs ES Modules

Joy Lee 🌻 — Thu, 03 Feb 2022 14:33:36 +0000

JavaScript Module Systems

JavaScript modules are essential for organizing and reusing code effectively in modern web development. They allow us to encapsulate code into separate files, improving maintainability and reducing global scope pollution. In this guide, we'll explore two popular module systems: CommonJS and ES Modules (ESM).

Before Using Modules

Originally, JavaScript files were included in HTML using <script> tags, which could lead to issues like order dependency and global variable conflicts.

Example:

<script src="./src/main.js"></script>
<script src="./src/animation.js"></script>
<script src="./src/banner.js"></script>

This approach loads each file sequentially and exposes all variables globally, potentially causing naming conflicts.

Using Modules

Modern JavaScript supports a module system that allows us to import and export functionalities between files seamlessly.

Example:

<script type="module" src="./src/main.js"></script>

With modules, only one <script> tag is needed to access all modularized JavaScript files.

CommonJS Modules

CommonJS was originally designed for server-side JavaScript (Node.js) and addresses the lack of built-in module support in early JavaScript versions.

Key Features:

module.exports and exports: Used to export variables, functions, or objects from a module.
require(): Used to import modules.
Example:

// main.js
const name = "Joy";
const age = 28;

module.exports = { name, age };

// result.js
const { name, age } = require("./main.js");

In CommonJS, module.exports is used to export values, which are then imported using require() in another file.

ES Modules (ESM)

ES Modules (ESM) are now the standard for JavaScript modules, providing benefits like asynchronous loading, better performance, and more intuitive syntax.

Key Features:

import and export: Used to export and import modules.
default exports: Allows exporting a single value as the default export.
Example:

// main.js
export const name = "Joy";
export const age = 28;

export default function fullName(lastName) {
  return name + " " + lastName;
}

// result.js
import fullName, { name, age } from "./main.js";

In ES Modules, export is used to export variables, functions, or classes, while import is used to bring them into another module. The default keyword allows a fallback export.

Conclusion

JavaScript modules are important for structuring code in large applications, enhancing code organization, and reducing namespace pollution. Whether using CommonJS or ES Modules, understanding modules is essential for modern JavaScript developers.

By adopting modules, developers can create more modular and maintainable codebases, improving collaboration and scalability in web development projects.

Start modularizing your JavaScript code today to experience these benefits firsthand!

[JS] JavaScript Scope: Global, Local and Block Scopes

Joy Lee 🌻 — Wed, 26 Jan 2022 14:00:37 +0000

Scope is a concept that refers to where values and functions can be accessed.

Various scopes include:

Global scope (a value/function in the global scope can be used anywhere in the entire program)
File or module scope (the value/function can only be accessed from within the file)
Function scope (only visible within the function),
Code block scope (only visible within a { ... } block)

Global Variables

// Variable declared globally
const color = 'blue';
function printColor() {
  console.log(color);
}
printColor(); // Prints: blue

JavaScript variables that are declared outside of blocks or functions can exist in the global scope, which means they are accessible throughout a program. Variables declared outside of smaller block or function scopes are accessible inside those smaller scopes.

Note: It is best practice to keep global variables to a minimum.

Block Scoped Variables

const isLoggedIn = true;
if (isLoggedIn == true) {
  const statusMessage = 'User is logged in.';
}
console.log(statusMessage);
// Uncaught ReferenceError: statusMessage is not defined

const and let are block scoped variables, meaning they are only accessible in their block or nested blocks. In the given code block, trying to print the statusMessage using the console.log() method will result in a ReferenceError. It is accessible only inside that if block.

Block scope is a powerful tool in JavaScript, since it allows us to define variables with precision, and not pollute the global namespace. If a variable does not need to exist outside a block— it shouldn’t!

Scope Pollution

Scope pollution is when we have too many global variables that exist in the global namespace, or when we reuse variables across different scopes. Scope pollution makes it difficult to keep track of our different variables and sets us up for potential accidents.

let num = 50;
const logNum = () => {
  num = 100; // Take note of this line of code
  console.log(num);
};
logNum(); // Prints 100
console.log(num); // Prints 100

Even though the reassignment is allowed and we won’t get an error, if we decided to use num later, we’ll unknowingly use the new value of num.

[JS] In-Depth Guide to JavaScript Functions and Their Uses

Joy Lee 🌻 — Wed, 26 Jan 2022 11:55:03 +0000

Reference
Codecademy. Retrieved from https://www.codecademy.com/

Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, you must define it somewhere in the scope where you wish to call it.

Function Declaration

Function declarations are used to create named functions. These functions can be called using their declared name. Function declarations are built from:

The function keyword.
The function name.
An optional list of parameters separated by commas enclosed by a set of parentheses ().
A function body enclosed in a set of curly braces {}.

function add(num1, num2) {
  return num1 + num2;
}

Calling Functions

Functions can be called, or executed, elsewhere in code using parentheses following the function name. When a function is called, the code inside its function body runs. Arguments are values passed into a function when it is called.

// Defining the function
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function
sum(2, 4); // 6

Parameters and Arguments

Inputs to functions are known as parameters when a function is declared or defined. Parameters allow functions to accept input(s) and perform a task using the input(s). We use parameters as placeholders for information that will be passed to the function when it is called. It is possible to define a function without parameters.

When calling a function that has parameters, we specify the values in the parentheses that follow the function name. The values that are passed to the function when it is called are called arguments. Arguments can be passed to the function as values or variables.

`return` Keyword

Functions return (pass back) values using the return keyword. return ends function execution and returns the specified value to the location where it was called. A common mistake is to forget the return keyword, in which case the function will return undefined by default.

// With return
function sum(num1, num2) {
  return num1 + num2;
}

// Without return, so the function doesn't output the sum
function sum(num1, num2) {
  num1 + num2;
}

Function Expressions

Function expressions create functions inside an expression instead of as a function declaration. They can be anonymous and/or assigned to a variable. Unlike function declarations, function expressions are not hoisted so they cannot be called before they are defined.

Anonymous Functions

Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}

Arrow Functions (ES6)

Arrow function expressions were introduced in ES6. These expressions are clean and concise. The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body.

There are several variations of arrow functions:

Arrow functions with a single parameter do not require () around the parameter list.
Arrow functions with a single expression can use the concise function body which returns the result of the expression without the return keyword.

// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { 
  return firstParam + secondParam; 
}; 
console.log(sum(2,5)); // Prints: 7 

// Arrow function with no arguments 
const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // Prints: hello

// Arrow functions with a single argument 
const checkWeight = weight => { 
  console.log(`Baggage weight : ${weight} kilograms.`); 
}; 
checkWeight(25); // Prints: Baggage weight : 25 kilograms.


// Concise arrow functions
const multiply = (a, b) => a * b; 
console.log(multiply(2, 30)); // Prints: 60

Default Parameters

One of the features added in ES6 is the ability to use default parameters. Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function or if the argument is undefined when called.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

[JS] Understanding Javascript Conditional Statements

Joy Lee 🌻 — Tue, 25 Jan 2022 02:59:34 +0000

Reference
Codecademy. Retrieved from https://www.codecademy.com/

`if` Statement

An if statement accepts an expression with a set of parentheses:

If the expression evaluates to a truthy value, then the code within its code body executes.
If the expression evaluates to a falsy value, its code body will not execute.

const isMailSent = true;

if (isMailSent) {
  console.log('Mail sent to recipient');
}

`else` Statement

An else block can be added to an if block or series of if-else if blocks. The else block will be executed only if the if condition fails.

const isTaskCompleted = false;

if (isTaskCompleted) {
  console.log('Task completed');
} else {
  console.log('Task incomplete');
}

`else if` Clause

After an initial if block, else if blocks can each check an additional condition. An optional else block can be added after the else if block(s) to run by default if none of the conditionals evaluated to truthy.

const size = 10;

if (size > 100) {
  console.log('Big');
} else if (size > 20) {
  console.log('Medium');
} else if (size > 4) {
  console.log('Small');
} else {
  console.log('Tiny');
}
// Print: Small

`switch` Statement

The switch statements provide a means of checking an expression against multiple case clauses. If a case matches, the code inside that clause is executed.

The case clause should finish with a break keyword. If no case matches but a default clause is included, the code inside default will be executed.

Note: If break is omitted from the block of a case, the switch statement will continue to check against case values until a break is encountered or the flow is broken.

const food = 'salad';

switch (food) {
  case 'oyster':
    console.log('The taste of the sea 🦪');
    break;
  case 'pizza':
    console.log('A delicious pie 🍕');
    break;
  default:
    console.log('Enjoy your meal');
}

// Prints: Enjoy your meal

Comparison Operators

Comparison operators are used to comparing two values and return true or false depending on the validity of the comparison:

=== strict equal
!== strict not equal
> greater than
>= greater than or equal
< less than
<= less than or equal

1 > 3       // false
3 > 1       // true
250 >= 250  // true
1 === 1     // true
1 === 2     // false
1 === '1'   // false

Logical Operator

&&

The logical AND operator && checks two values and returns a boolean. If both values are truthy, then it returns true. If one, or both, of the values is falsy, then it returns false.

true && true;      // true
1 > 2 && 2 > 1;    // false
true && false;     // false
4 === 4 && 3 > 1;  // true

||

The logical OR operator || checks two values and returns a boolean. If one or both values are truthy, it returns true. If both values are falsy, it returns false.

true || false;        // true
10 > 5 || 10 > 20;    // true
false || false;       // false
10 > 100 || 10 > 20;  // false

The logical NOT operator ! can be used to do one of the following:

Invert a Boolean value.
Invert the truthiness of non-Boolean values.

let lateToWork = true;
let oppositeValue = !lateToWork;

console.log(oppositeValue); 
// Prints: false

Truthy and Falsy

In JavaScript, values evaluate to true or false when evaluated as Booleans.

Values that evaluate to true are known as truthy
Values that evaluate to false are known as falsy

Falsy values include false, 0, empty strings, null undefined, and NaN. All other values are truthy.

Ternary Operator

The ternary operator allows for a compact syntax in the case of binary (choosing between two choices) decisions. It accepts a condition followed by a ? operator, and then two expressions separated by a :. If the condition evaluates to truthy, the first expression is executed, otherwise, the second expression is executed.

let price = 10.5;
let day = "Monday";

day === "Monday" ? price -= 1.5 : price += 1.5;

[JS] Understanding JavaScript Variables and Assignment Operators

Joy Lee 🌻 — Tue, 25 Jan 2022 02:46:30 +0000

Reference
Codecademy. Retrieved from https://www.codecademy.com/

A variable is a container for data that is stored in computer memory. It is referenced by a descriptive name that a programmer can call to assign a specific value and retrieve it.

let name = "Tammy";
const found = false;
var age = 3;
console.log(name, found, age);
// Tammy, false, 3

To declare a variable in JavaScript, any of these three keywords can be used along with a variable name:

var is used in pre-ES6 versions of JavaScript.
let is the preferred way to declare a variable when it can be reassigned.
const is the preferred way to declare a variable with a constant value.

`let` Keyword

let creates a local variable in JavaScript & can be re-assigned. Initialization during the declaration of a let variable is optional. A let variable will contain undefined if nothing is assigned to it.

let count; 
console.log(count); // Prints: undefined
count = 10;
console.log(count); // Prints: 10

`const` Keyword

A constant variable can be declared using the keyword const. It must have an assignment. Any attempt of re-assigning a const variable will result in JavaScript runtime error.

const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.

Assignment Operators

An assignment operator assigns a value to its left operand based on the value of its right operand. Here are some of them:

+= addition assignment
-= subtraction assignment
*= multiplication assignment
/= division assignment

let number = 100;

// Both statements will add 10
number = number + 10;
number += 10;

console.log(number); 
// Prints: 120

String Interpolation

String interpolation is the process of evaluating string literals containing one or more placeholders (expressions, variables, etc).

It can be performed using template literals: text ${expression} text.

let age = 7;

// String concatenation
'Tommy is ' + age + ' years old.';

// String interpolation
`Tommy is ${age} years old.`;

[JS] Deep Dive into Javascript 🔥

Joy Lee 🌻 — Mon, 24 Jan 2022 15:18:25 +0000

Reference
Codecademy. Retrieved from https://www.codecademy.com/

JavaScript is an object-oriented programming language that powers the dynamic behavior on most websites. Alongside HTML and CSS, it is a core technology that makes the web run.

Console

The console.log() method is used to log or print messages to the console. It can also be used to print objects and other info.

console.log('Hi there!');
// Prints: Hi there!

Comments

In JavaScript, single-line comments are created with two consecutive forward slashes //.

// I'm a Single Line Comment

And multi-line comments are created by surrounding the lines with /* at the beginning and */ at the end. Comments are good ways for a variety of reasons like explaining a code block or indicating some hints, etc.

/*  
I'm
Multiple
Line
Comment
*/

Data Types

Data types are the classifications we give to the different kinds of data that we use in programming. In JavaScript, there are seven fundamental data types:

Number: Any number, including numbers with decimals (the set of all integers and floating point numbers) : 4, 8, 1516, 23.42.

let amount = 6;
let price = 4.99;

String: They are any grouping of characters (letters, spaces, numbers, or symbols) surrounded by single quotes '...' or double quotes "...".

let single = 'Wheres my bandit hat?';
let double = "Wheres my bandit hat?";

Boolean: This data type only has two possible values— either true or false (without quotes). It’s helpful to think of booleans as on and off switches or as the answers to a “yes” or “no” question.

let lateToWork = true;

Null: This data type represents the intentional absence of a value, and is represented by the keyword null (without quotes).

let x = null;

Undefined: This data type is lack of defined value. Variables that are declared but not initialized to a value will have the value undefined.

var a;
console.log(a); 
// Prints: undefined

Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding. No need to worry about these for now.
Object: Collections of related data.

Arithmetic Operators

JavaScript supports arithmetic operators for:

+ addition
- subtraction
* multiplication
/ division
% modulo

// Addition
5 + 5
// Subtraction
10 - 5
// Multiplication
5 * 10
// Division
10 / 5
// Modulo
10 % 5

String Concatenation

In JavaScript, multiple strings can be concatenated together using the + operator. In the example, multiple strings and variables containing string values have been concatenated. After execution of the code block, the displayText variable will contain the concatenated string.

let service = 'credit card';
let month = 'May 30th'; 
let displayText = 'Your ' + service  + ' bill is due on ' +  month + '.';
console.log(displayText);
// Prints: Your credit card bill is due on May 30th.

Properties

When you introduce a new piece of data into a JavaScript program, the browser saves it as an instance of the data type. Every string instance has a property called length that stores the number of characters in that string.

let message = 'good nite';
console.log(message.length);
// Prints: 9

console.log('howdy'.length);
// Prints: 5

Libraries

Libraries contain methods that can be called by appending the library name with a period ., the method name, and a set of parentheses.

Math.random();
// ☝️ Math is the library

Methods

Methods return information about an object, and are called by appending an instance with a period ., the method name, and parentheses. You can find a list of built-in string methods in the JavaScript documentation. Developers use documentation as a reference tool. It describes JavaScript’s keywords, methods, and syntax.

The Math.random() function returns a floating-point, random number in the range from 0 (inclusive) up to but not including 1.

console.log(Math.random());
// Prints: 0 - 0.9

The Math.floor() function returns the largest integer less than or equal to the given number.

console.log(Math.floor(5.95)); 
// Prints: 5

NodeJS: A Powerful Tool for Web Development

Joy Lee 🌻 — Sun, 14 Nov 2021 00:32:16 +0000

JavaScript is a popular front-end language for making dynamic web pages in web browsers. But using JavaScript only in the browser can be limiting in web development. That’s why NodeJS is helpful.

What is NodeJS?

Node.js : A JavaScript runtime environment built outside the web browser.

To create a complete web service, you need both front-end and back-end development. This means making sure the web browser and the web server talk to each other smoothly. But for front-end developers, learning a new language for the server side can be hard. NodeJS, with its built-in HTTP server library, makes it possible to use JavaScript outside the browser. With NodeJS, you can create web services using only JavaScript.

** NodeJS is good for apps that need real-time data processing and frequent I/O operations, like Single Page Applications (SPA). But it’s not recommended for CPU-intensive applications.

✔ npm

npm : Node Package Manager(Modules)

npm is a package management tool that comes with NodeJS. These packages, also called modules, help you install various libraries needed for development, like webpack, Create React App (CRA), and react.

ex) npm install webpack

You can use the npm init command to create an initial package.json file and set up your project. Packages downloaded with npm are recorded in package.json.

Disadvantage

It takes up a lot of space because it installs packages directly on the local computer.
When a new version of a package comes out, you have to update it manually.

✔ npx

npx : Node Package Runner

npx is a package management tool introduced with npm version 5.2.0 and later. If you have downloaded npm version 5.2.0 or higher, npx is automatically installed and helps to use npm more conveniently.

ex) npx install webpack

Advantages

Packages are not stored directly on the computer; they are installed temporarily (no storage space is used).
Always use the latest updated packages.

How npx Works

By default, it checks if the package to be executed is in an executable path (e.g., checks if the package is installed in the project).
If it exists, it executes it.
If not, npx installs and executes the latest version of the package.

✔ Yarn

Yarn is a package manager similar to npm. The main difference is that it is not installed automatically with Node.js but requires a separate command for installation. When using Yarn, downloaded packages are recorded in a file called yarn.lock, ensuring that the same packages are installed on all devices.

Installation of Yarn: npm install -g yarn

# Using npm
npm install <package>
npm uninstall <package>

# Using Yarn
yarn add <package>
yarn remove <package>

Advantages

Speed and reliability are similar to npm, but Yarn emphasizes better security and dependency management.
Ensures consistent versions across all environments, reducing version conflicts and bugs caused by them.

The Easiest Concept Between a ‘Library’ and a ‘Framework’

Joy Lee 🌻 — Wed, 21 Oct 2020 15:47:23 +0000

What is the difference between a library and a framework?

If you have experienced in Software Development Industry, you may have wondered or heard this question at least once. It's also commonly asked on the programming job interview and I find many people struggling with this question. So I want to share how to answer the question in the easiest possible way.

0. Definition

What is a Library?
It's a set of code that was previously written, that can be called upon when building your own code.

What is a Framework?
It's a supporting structure where your own code defines the "meat" of the operations by filling out the structure.

1. The 1st Analogy

It is still hard to clearly understand the differences with these definition if you are a beginner. Then let's take a look at an analogy to approach them closer. You have now become a construction worker and you're assigned to build a house.

Tools (a hammer, a nail gun, etc) are your "Library"
You could build the house without any tools but if you want to make your work easier, you would use 'the set of tools'. It can be used anywhere as much as you want when needed.

The foundation of the house is your "Framework"
If there is a given foundation of the house, you must follow the regulations. Otherwise, the house cannot be built in proper way. The foundation dictates how your project will be structured.

2. The 2nd Analogy

Here is another analogy that would help you to understand more clearly.

Your home is your "Library"
There are a less number of rules. You can just throw your T-shirt and place your bag anywhere. You may have to follow some rules but most of them are built by you. You can do it whatever you feel like.

Your school is your "Framework"
There are a large number of rules . You have your own uniform and your seat is fixed that you cannot place your stuff randomly. You are only allowed to do certain things.

3. The Relation

Now you have an idea of what a library and a framework is. However, there is one more significant difference between two terms. It's called 'Inversion of Control'

Who is controlling whom?
Our code flows a little bit different on a library and a framework. When we use a library, we are in charge of the flow of the application. We are the ones choosing when and where to call the library. On the other hand, when we use a framework, the framework is in charge of the flow. The framework itself is making calls toward our code.

4. Examples

Last but not least, let's check out the major libraries and frameworks below.

Popular Libraries
jQuery, Lodash, React, Redux

Popular Frameworks
Rails, Angular, Django, Express

5. Conclusion

Finally, we are able to describe the difference in one sentence.

Q : What is the difference between a library and a framework?
A : You call a library as it's a simple tool whereas a framework calls you as it's a restrictive foundation.

Reference ::: Nomad Coder. Difference between Library and Framework. Youtube Jun 17, 2020_ Codecademy. What are Libraries and Frameworks?. Youtube. Jun 5, 2019. __ Hitesh Choudhary. What is the difference between a Library and a Framework. Youtube. Mar 13, 2018!_

DEV Community: Joy Lee 🌻

Husky and lint-staged: Keeping Code Consistent

What is lint-staged?

Installation

What is husky?

Installation

How It Works

ESLint and Prettier: A Guide to Cleaner Code

ESLint

ESLint Example

Installing ESLint

ESLint Config File

Prettier

Installing Prettier

Prettier Config

Combining ESLint and Prettier

Differences Between ESLint and Prettier

Preventing ESLint and Prettier Conflicts

Adding Prettier to ESLint Config

Setting Up VSCode Formatter

Conclusion

Exploring How Your Browser Displays Websites!

Browser Rendering

1. Address Input

2. Download HTML File

3. Download CSS, JS

4. Network Connection Limit (HTTP 1.1)

5. Create DOM Tree, CSSOM Tree

6. Create Render Tree

7. Layout

8. Paint

9. Execute JS

CSR, SSR, and Progressive Rendering in Javascript

💻 Client Side Rendering (CSR)

How it Works

Advantages

Disadvantages

📲 Server Side Rendering (SSR)

How it Works

Advantages

Disadvantages

📱 Progressive Rendering

How it Works

JavaScript Module Systems : CommonJS vs ES Modules

JavaScript Module Systems

Before Using Modules

Using Modules

CommonJS Modules

Key Features:

ES Modules (ESM)

Key Features:

Conclusion

[JS] JavaScript Scope: Global, Local and Block Scopes

Global Variables

Block Scoped Variables

Scope Pollution

[JS] In-Depth Guide to JavaScript Functions and Their Uses

Function Declaration

Calling Functions

Parameters and Arguments

return Keyword

Function Expressions

Anonymous Functions

Arrow Functions (ES6)

Default Parameters

[JS] Understanding Javascript Conditional Statements

if Statement

else Statement

else if Clause

switch Statement

Comparison Operators

Logical Operator

Truthy and Falsy

Ternary Operator

[JS] Understanding JavaScript Variables and Assignment Operators

let Keyword

const Keyword

Assignment Operators

String Interpolation

[JS] Deep Dive into Javascript 🔥

`return` Keyword

`if` Statement

`else` Statement

`else if` Clause

`switch` Statement

`let` Keyword

`const` Keyword