+### When to Use Each
+
+**Use Infinite Scroll when:**
+
+- You want to **load content continuously** without pagination
+- **Natural scrolling** is important
+- The list is **not extremely long** (e.g., under 1,000 items)
+
+**Use Virtual Scroll when:**
+
+- The list is **very long** (thousands of items)
+- You need to **reduce the number of DOM elements** to avoid lag
+- Performance optimization is critical for your use case
diff --git a/posts/js-es6.mdx b/posts/js-es6.mdx
new file mode 100644
index 0000000..5f5f616
--- /dev/null
+++ b/posts/js-es6.mdx
@@ -0,0 +1,446 @@
+---
+title: ES6 (ECMAScript 2015) - "A Single Step" in JavaScript
+description: This is our first blog post. Really cool
+date: 2025-03-06
+tags: ['code', 'blog']
+published: true
+image: '/images/es6.png'
+---
+
+In an era where technologies change rapidly, choosing the right technology to learn is crucial for
+beginners. Currently, many people choose to learn JavaScript. Why? Simply because it is "easier to
+approach🤔" than other programming languages and is suitable for those pursuing web development.
+
+JavaScript (JS) is a high-level programming language primarily used for writing web pages. In the
+past, it was only used to run web pages and was executed by the engine in each browser. Nowadays, JS
+is supported for writing server-side programs and can even be used for Mobile, Desktop, Machine
+Learning, etc.
+
+## ES6 Best Practices:
+
+JS may seem easy to approach, but its behavior has caused many developers headaches when debugging
+programs, especially in versions prior to ES5. Since the release of ES6 (ECMAScript 2015),
+developers' lives have become much "easier." Below are some of the best practices of ES6:
+
+### Let & Const
+
+Instead of using var or hoisting, which makes runtime debugging difficult, we can now distinguish
+between variables and constants in JS. let allows us to declare variables and reuse them without
+declaring another variable. const allows us to declare a fixed value that cannot be changed,
+ensuring stability.
+
+#### 1.1. Illustration of using let syntax.
+
+```jsx
+1 let a = 20
+2 a = 21
+3 console.log(a)
+
+=> Console 21
+```
+
+#### 1.2. Illustration of using const syntax.
+
+```jsx
+1 const a = 20
+2 a = 21
+3 console.log(a)
+
+=> Console
+Can not assign to "a" because it is a constant script.js? 3:0
+```
+
+### Template Literals
+
+Also known as template strings, this syntax helps us concatenate strings with variables in a more
+explicit and concise way.
+
+#### 2.1. Illustration of template literals.
+
+### Arrow Functions
+
+A new syntax for declaring functions, making code shorter and more concise, and especially not bound
+by this, making the function's scope more stable.
+
+#### 3.1. Illustration of arrow functions.
+
+```jsx
+// concise syntax
+const fun1 = () => 1 + 2
+console.log(fun1())
+// No Binding this
+const fun2 = () => {
+ console.log(this)
+}
+fun2.call({ id: 3 })
+```
+
+### Destructuring Assignment
+
+A syntax for extracting elements from an object instead of indirectly accessing them through the
+object, making our code more concise and avoiding the need to declare multiple variables to access
+each element inside the object.
+
+#### 4.1. Illustration of destructuring assignment.
+
+```jsx
+1 // Destructuring object
+2 const obj = {id:1, ip: '127.0.0.1'}
+3 const {id, ip} = obj
+4 console.log(id,ip)
+5
+6 // Destructuring array
+7 const arr = [2,4,6,8]
+8 const [e1, e2, e3, e4] = arr
+9 console.log(e1,e2,e3,e4)
+
+=> Console
+127.0.0.1
+2 4 6 8
+```
+
+### Default Parameters
+
+We can declare default values for function arguments when parameters are not passed, ensuring that
+arguments always have a value.
+
+```jsx
+1 funtion a(arg = 'hello world'){
+2 console.log(arg)
+3 }
+
+=> Console
+hello world
+```
+
+### Spread Operator
+
+A syntax used to merge values into an object or to spread an object into function parameters.
+Additionally, it can be used to concatenate objects or arrays.
+
+#### 6.1. Illustration of the spread operator spreading an array into function parameters.
+
+```jsx
+1 funtion func(arg1, arg2, arg3){
+2 console.log(arg1, arg2, arg3)
+3 }
+4 const arr = [1,2,3]
+5 func(...arr)
+
+=> Console
+1 2 3
+```
+
+#### 6.2. Merging adjacent values in destructuring assignment.
+
+```jsx
+1 // Destructuring array
+2 const a = [1, 2, 3, 4]
+3 const [e1, ...arr2] = arr
+4 console.log(arr2)
+5
+6 // Destructuring object
+7 const obj = {block:true, role: 'admin', id:1}
+8 const [block, ...newObj] = obj
+9 console.log(newObj)
+
+=> Console
+>(3) [2, 3, 4]
+>(2) {role: 'admin', id:1}
+```
+
+#### 6.3. Illustration of concatenating objects or arrays.
+
+```jsx
+1 // Aray concatenation
+2 const a1 = [1, 2, 3, 4]
+3 const a2 = [5, 6, 7, 8]
+4 const a3 = [...a1, ...a2]
+5 console.log(a3)
+6 //Object concatenation
+7 const o1 = {id: 1}
+8 const o2 ={address: '72 Làng Tăng Phú'}
+9 const o3 = {...o1, ...o2}
+10 console.log(o3)
+=> Console
+>(8) [1, 2, 3, 4, 5, 6, 7, 8]
+>(2) {id: 1, address: "Làng Tăng Phú"}
+```
+
+### Function Rest Parameters
+
+Contrary to the spread operator, which spreads array values into parameters, rest parameters merge
+parameters into an array, allowing quick selection of adjacent arguments instead of listing all
+needed arguments. The array created by parameters can contain unspecified values from a variadic
+function.
+
+#### 7.1. Illustration of rest parameters.
+
+```jsx
+1 funtion func(...args) {
+2 console.log(args)
+3 }
+4
+5 func(1,2,3)
+6
+=> Console
+>(3) [1, 2, 3]
+```
+
+### Classes
+
+An improvement that makes writing OOP programs more explicit compared to using functions as before.
+
+#### 8.1. Illustration of classes.
+
+```jsx
+1 class Car {
+2 contructor(){
+3 this.driver = 'Phi'
+4 }
+5 isActive(){
+6 return true
+7 }
+8 }
+9
+10 const car = new Car()
+11 console.log(car.driver, car.isActive())
+=> Console
+Phi true
+```
+
+### Promises
+
+An object representing the success or failure of an asynchronous function. It represents a value
+that may not necessarily be known when the promise is created. It allows us to link handlers to the
+success or failure of an asynchronous action. This allows asynchronous methods to return values like
+synchronous methods: instead of immediately returning the final value, the asynchronous method
+returns a promise that will provide the value at some point in the future. Additionally, it helps us
+know the status of the function (pending, resolved, rejected) and is used to resolve callback hell.
+
+#### 9.1. Illustration of callback hell.
+
+```jsx
+1 let i = 0;
+2
+3 const cbHell = () => {
+4 i++;
+5 return async1(() => {
+6 i++;
+7 return async2(() => {
+8 i++;
+9 return async3(() => {
+10 i++;
+11 return async4(() => {
+12 i++;
+13 return async5(() => {
+14 i++;
+15 return async6(() => {
+16 return i;
+17 });
+18 });
+19 });
+20 });
+21 });
+22 });
+23 };
+
+console.log(cbHell()()()()()()());
+
+```
+
+#### 9.2. Illustration of resolving callback hell with promises.
+
+```jsx
+1 let i = 0
+2 const p = 0 () => {
+3 return new Promise((rs, rj) => rs())
+4 .then(() => i++)
+5 .then(() => i++)
+6 .then(() => i++)
+7 .then(() => i++)
+8 .then(() => i++)
+9 .then(() => i++)
+10 .then(() => console.log(i))
+11 }
+12 p()
+```
+
+##
+
+### ES7 to ES14 Features
+
+JS has also released many new ES versions, with the latest being ES16. I will list some features of
+ES7 and above for your reference.
+
+#### ES7:
+
+1.1. Exponentiation Operator (**): Provides a concise syntax for exponentiation. Example: 2 ** 3
+returns 8.
+
+1.2. Array.prototype.includes Method: Allows checking if an array contains a specific element.
+Example: [1, 2, 3].includes(2) returns true.
+
+#### ES8:
+
+2.1. Async/Await: Provides syntax for handling asynchronous operations sequentially, making code
+more readable and maintainable.
+
+2.2. Object.entries and Object.values Methods: Returns an array containing [key, value] pairs or
+just the values of an object.
+
+2.3. String Padding (padStart, padEnd): Adds characters to the beginning or end of a string to
+achieve the desired length.
+
+2.4. Trailing Commas in Function Parameter Lists: Allows adding a comma at the end of the parameter
+list, making it easier to add or remove parameters in future edits.
+
+#### ES9:
+
+3.1. Asynchronous Iteration (for await...of): Allows iterating over async iterable objects.
+
+3.2. Rest/Spread Properties for Objects: Easily copy or combine objects.
+
+3.3. Promise.prototype.finally Method: Called when a promise is resolved or rejected, allowing
+cleanup operations.
+
+3.4. Regular Expression (RegExp) Improvements: Adds features like s (dotAll) flag, lookbehind
+assertions, and Unicode property escapes.
+
+#### ES10:
+
+4.1. Array.prototype.flat and Array.prototype.flatMap Methods: Flattens multi-dimensional arrays and
+combines map with flat.
+
+4.2. Object.fromEntries Method: Converts an array of [key, value] pairs into an object.
+
+4.3. String.prototype.trimStart and String.prototype.trimEnd Methods: Removes whitespace from the
+beginning or end of a string.
+
+4.4. Optional Catch Binding: Allows omitting the error variable declaration in the catch block.
+
+4.5. Function.prototype.toString Improvement: Returns the exact source code of the function.
+
+4.6. BigInt Support: A new data type for large integer values.
+
+4.7. Access to Symbol Description.
+
+4.8. Object to JSON Conversion Support.
+
+#### ES11:
+
+5.1. Nullish Coalescing Operator (??): Returns the right-hand operand if the left-hand operand is
+null or undefined, otherwise returns the left-hand operand.
+
+5.2. Ensures Array.prototype.sort() stability.
+
+5.3. Optional Chaining (?.): Accesses properties of an object without causing an error if the object
+is null or undefined.
+
+5.4. BigInt: A new data type for representing large integers beyond the Number limit.
+
+5.5. Promise.allSettled: Returns a promise when all promises are settled, regardless of success or
+failure.
+
+5.6. globalThis: Provides a unified way to access the global object in all environments.
+
+5.7. String.prototype.matchAll(): Returns an iterator for all matches in a string.
+
+5.8. import.meta: Provides metadata about the current module.
+
+#### ES12:
+
+6.1. Logical Assignment Operators (&&=, ||=, ??=): Combines logical operators with assignment.
+
+6.2. Promise.any(): Returns the value of the first fulfilled promise in an array of promises.
+
+6.3. WeakRefs: Allows referencing objects without preventing garbage collection.
+
+6.4. String.prototype.replaceAll(): Replaces all occurrences of a substring in a string.
+
+6.5. Numeric Separators (\_): Makes large numbers easier to read by using underscores.
+
+6.6. Object.hasOwn(): Checks if an object owns a specific property (more reliable than
+hasOwnProperty()).
+
+6.7. Array.prototype.sort() Improvement: Number sorting now works more accurately without custom
+comparators.
+
+#### ES13:
+
+7.1. Array.at(): Allows accessing array elements using negative indices.
+
+7.2. Top-Level await: Allows using await at the top level in a module without an async function.
+
+7.3. WeakRefs with FinalizationRegistry: Manages resources and cleans up when objects are garbage
+collected.
+
+7.4. Error.cause: Adds a cause property to errors for better error handling.
+
+7.5. Object.hasOwn(): Checks if an object directly owns a property (not inherited).
+
+7.6. copyWithin() Improvement: Enhances the copyWithin() method for more efficient array element
+copying.
+
+#### ES14:
+
+8.1. Array.prototype.toSorted(): Returns a sorted copy of an array without modifying the original.
+
+8.2. Array.prototype.toReversed(): Returns a reversed copy of an array without modifying the
+original.
+
+8.3. Array.prototype.toSpliced(): Returns a modified copy of an array with added/removed elements
+without modifying the original.
+
+8.4. Symbol.prototype.description: A new property that returns the description of a symbol.
+
+8.5. RegExp Improvement: Enhances regex capabilities with flags like d for dotall mode.
+
+8.6. Stack Trace Improvement in Error Handling: Provides more detailed and accurate stack trace
+information, including in async functions.
+
+8.7. Object.hasOwn() Improvement: A more reliable and preferred method for checking an object's
+properties.
+
+## Backward Compatibility and Solutions:
+
+#### 1. Backward Compatibility:
+
+ES6 (ECMAScript 2015) introduced many new features like let/const, arrow functions, classes,
+template literals, modules, etc. However, some older browsers and older versions of Safari, Edge,
+Firefox, and Chrome do not fully support ES6. This leads to some issues:
+
+- ES6 code may not run on older browsers. Users encounter errors when accessing the web.
+- Some new ES6 APIs are missing in older environments. For example: Promise, Map, Set,
+ Array.prototype.includes() do not exist.
+- Cannot use import/export modules on older browsers. ES6 Modules (import / export) are not
+ supported in some older environments.
+- Older versions of Node.js do not fully support ES6. Before Node.js v12, some ES6 features required
+ special configuration or Babel to transpile.
+
+#### 2. Solutions with Polyfill and Transpile:
+
+2.1. What is a Polyfill? When to Use Polyfill?
+
+- Polyfills are code snippets that add missing ES6 APIs or features to older browsers using ES5.
+- Use when: Older browsers lack an API or method but can still execute ES5 JavaScript.
+- Promise is missing in older browsers. Use core-js to add it.
+- fetch() is missing in older browsers. Use whatwg-fetch.
+- Object.assign() is missing in older browsers. Use core-js polyfill.
+
+ 2.2. What is Transpile? When to Use Transpile?
+
+- Transpile is the process of converting ES6+ code into ES5 so that older browsers can understand
+ it.
+- Use when: ES6 code has new syntax that older browsers do not understand, e.g., let/const, arrow
+ functions, classes, import/export, async/await.
+- Transpile does not add missing APIs (use Polyfill for that).
+- Example: Configure transpile with Babel.
+
+These are just some of the most important best practices of ES6. We don't need to seek out advanced
+technologies or know many programming languages to fall into the situation of "knowing everything
+but actually knowing nothing." The most important thing is to specialize in a particular technology,
+and I hope this article helps you understand JS more deeply. I want to "master" JS, and so do you
+😉.
+
+**Note:** Use examples of ES5's disadvantages to compare with ES6.
diff --git a/posts/kubernetes-docker.mdx b/posts/kubernetes-docker.mdx
new file mode 100644
index 0000000..85b1bd7
--- /dev/null
+++ b/posts/kubernetes-docker.mdx
@@ -0,0 +1,236 @@
+---
+title: Kubernetes (K8s) and Docker - Container Orchestration Simplified
+description:
+ An introduction to Kubernetes and Docker, exploring containerization and orchestration for modern
+ applications.
+date: 2025-03-06
+tags: ['docker', 'kubernetes', 'containerization']
+published: true
+image: '/images/k8s.png'
+---
+
+### Kubernetes (K8s) and Docker
+
+Kubernetes (K8s) is an open-source system designed to manage containerized applications. You can
+think of a container as a small box that contains everything necessary for an application to run,
+including source code, libraries, and configurations.
+
+K8s manages these containers, ensuring they run smoothly, remain available, and can scale
+efficiently. It not only launches containers but also monitors them, auto-heals when failures occur,
+and optimizes resources to avoid waste.
+
+#### Real-World Example:
+
+Imagine running an e-commerce website. On regular days, traffic is stable, requiring minimal
+resources. However, during peak times like Black Friday or New Year, traffic surges dramatically.
+Without a smart management system, your servers might crash, causing downtime and lost customers.
+
+K8s makes handling this easy by automatically scaling up the number of containers running your
+application to meet increased demand. Once the peak period ends, it scales back down, reducing
+operational costs without manual intervention.
+
+Another great feature of K8s is its ability to handle failures. If a running container crashes, K8s
+automatically spins up a new one, ensuring your service remains uninterrupted. Additionally, it
+allows for seamless application updates, rolling out changes gradually to ensure stability before
+applying them across the system.
+
+Because of these benefits, K8s is widely used by companies like:
+
+- **Google**: Manages services like Gmail, Maps, and YouTube with K8s.
+- **Spotify**: Uses K8s to manage thousands of microservices.
+
+#### Kubernetes vs. Docker
+
+Kubernetes and Docker are closely related but serve different purposes in containerized application
+management. They are not the same, nor are they direct replacements for each other.
+
+To put it simply:
+
+- **Docker** is a tool for creating and running containers.
+- **Kubernetes** is a tool for managing how those containers run, scale, and communicate.
+
+#### How They Work Together:
+
+Docker is the most popular platform for building and running containers. It allows developers to
+package applications along with all dependencies, ensuring consistency across development and
+production environments.
+
+However, Docker alone becomes inefficient when managing a large number of containers. When you have
+tens, hundreds, or even thousands of containers, manual management becomes impractical.
+
+This is where Kubernetes comes in. Kubernetes is designed to manage and orchestrate Docker
+containers efficiently across multiple machines. If you have an application running on 100
+containers, K8s ensures they are evenly distributed across servers, remain available, and restart
+automatically upon failure.
+
+Kubernetes is not limited to Docker—it also supports other container runtimes like **Containerd**
+and **CRI-O**. This means K8s is flexible and not tied to a single container technology.
+
+While Kubernetes and Docker can be used separately, they complement each other perfectly. Docker
+provides the foundation (containers), while Kubernetes orchestrates their deployment and management.
+If you're running a small application, Docker alone may suffice. But as your app scales, Kubernetes
+becomes indispensable.
+
+---
+
+### Pass by Value vs. Pass by Reference
+
+#### Pass by Value
+
+When passing by value, a copy of the variable's value is passed into the function. Any changes
+inside the function do not affect the original variable.
+
+In JavaScript/TypeScript, primitive data types such as **number, string, boolean** are passed by
+value.
+
+Example:
+
+```jsx
+let a = 5
+function changeValue(x) {
+ x = 10
+}
+changeValue(a)
+console.log(a) // Output: 5 (remains unchanged)
+```
+
+#### Pass by Reference
+
+When passing by reference, a reference (memory address) to the original variable is passed. Any
+modifications inside the function affect the original variable.
+
+Objects like **Array, Object, and Function** are passed by reference in JavaScript/TypeScript.
+
+Example:
+
+```jsx
+function modifyObject(obj: { value: number }) {
+ obj.value = 10;
+ console.log("Inside the function:", obj.value);
+}
+
+let myObj = { value: 5 };
+modifyObject(myObj);
+console.log("Outside the function:", myObj.value); // Changed to 10
+```
+
+| Feature | Pass by Value | Pass by Reference |
+| --------------- | --------------------------------- | -------------------------------------- |
+| Data Passed | Copy of value | Memory reference |
+| Data Type | Primitives (number, string, etc.) | Objects (Array, Function, Object) |
+| External Impact | No effect | Can be modified |
+| Performance | Faster | May be slower due to memory management |
+
+#### Key Considerations in JavaScript/TypeScript
+
+Even though objects are passed by reference, reassigning a new object does not affect the original
+one.
+
+Example:
+
+```jsx
+function replaceObject(obj: { value: number }) {
+ obj = { value: 20 }; // Assign a new object
+ console.log("Inside the function:", obj.value);
+}
+
+let originalObj = { value: 5 };
+replaceObject(originalObj);
+console.log("Outside the function:", originalObj.value); // Still 5, not changed
+```
+
+### Memory Management in JavaScript/TypeScript
+
+#### Stack vs. Heap
+
+JavaScript manages memory in two main areas:
+
+- **Stack**: Stores primitive values (number, string, boolean, etc.). Data in the stack is
+ fixed-size and follows a **Last In, First Out (LIFO)** model.
+- **Heap**: Stores complex data types (Object, Array, Function). The heap allows dynamic memory
+ allocation.
+
+#### Memory Storage:
+
+**Pass by Value (Stack):**
+
+```typescript
+function modifyValue(x: number) {
+ x = 10 // Change x inside the function
+ console.log('Inside the function:', x)
+}
+
+let a = 5
+modifyValue(a)
+console.log('Outside the function:', a) // a is still 5
+```
+
+How to save memory?:
+
+```jsx
+Stack:
+| a: 5 |
+| x: 5 | -> x = 10 (copied, does not affect a)
+```
+
+**Pass by Reference (Heap):**
+
+```jsx
+function modifyObject(obj: { value: number }) {
+ obj.value = 10; // Modify the property inside the object
+ console.log("Inside the function:", obj.value);
+}
+
+let myObj = { value: 5 };
+modifyObject(myObj);
+console.log("Outside the function:", myObj.value); // Changed to 10
+```
+
+How to save memory?:
+
+```jsx
+| myObj | --> Heap: { value: 5 }
+| obj | --> (references the same memory location)
+
+Heap: { value: 10 } (same address)
+
+```
+
+#### Garbage Collection
+
+JavaScript uses **Garbage Collection (GC)** with the **Mark-and-Sweep** algorithm to free up memory.
+
+**Process:**
+
+1. **Marking**: Identifies objects still in use.
+2. **Sweeping**: Removes unused objects from memory.
+
+Example of memory cleanup:
+
+```jsx
+let obj = { name: 'Alice' }
+obj = null // Original object is now eligible for garbage collection
+```
+
+#### Avoiding Memory Leaks
+
+Memory leaks occur when objects are still referenced but no longer needed. To prevent leaks:
+
+- Use **let/const** instead of global variables.
+- Set unused variables to `null` when no longer needed.
+- Use WeakMap and WeakSet for objects with limited lifespan.
+
+```jsx
+let cache: any = {};
+function storeData() {
+ let data = new Array(1000000).fill("test");
+ cache["data"] = data, //Memory will not be freed, cache wallet holds reference
+}
+storeData();
+```
+
+How to fix it:
+
+```jsx
+cache['data'] = null
+```
diff --git a/posts/mathematics-formulas.mdx b/posts/mathematics-formulas.mdx
new file mode 100644
index 0000000..7da550d
--- /dev/null
+++ b/posts/mathematics-formulas.mdx
@@ -0,0 +1,90 @@
+---
+title: 'Mathematics and Formulas in Computer Science'
+description:
+ 'A collection of important mathematical formulas in computer science and programming, presented
+ using KaTeX.'
+date: 2025-06-07
+tags: ['mathematics', 'formulas', 'computer science']
+published: true
+image: '/images/math.png'
+---
+
+# Mathematics and Formulas in Computer Science
+
+### Linear Algebra
+
+#### Matrices and Determinants
+
+- **Matrix Multiplication**: $$(AB)_{ij} = \sum_{k=1}^{n} A_{ik}B_{kj}$$
+
+- **2x2 Determinant**: $$\begin{vmatrix} a & b \\ c & d \end{vmatrix} = ad - bc$$
+
+#### Eigenvalues and Eigenvectors
+
+For a matrix $A$, a non-zero vector $\mathbf{v}$ is an eigenvector if:
+$$A\mathbf{v} = \lambda\mathbf{v}$$
+
+### Calculus
+
+#### Basic Derivatives
+
+- $$\frac{d}{dx}x^n = nx^{n-1}$$
+- $$\frac{d}{dx}e^x = e^x$$
+- $$\frac{d}{dx}\ln(x) = \frac{1}{x}$$
+
+#### Integrals
+
+- $$\int x^n dx = \frac{x^{n+1}}{n+1} + C \quad (n \neq -1)$$
+- $$\int e^x dx = e^x + C$$
+- $$\int \frac{1}{x} dx = \ln|x| + C$$
+
+### Probability and Statistics
+
+#### Probability Formulas
+
+- **Conditional Probability**: $$P(A|B) = \frac{P(A \cap B)}{P(B)}$$
+- **Bayes' Theorem**: $$P(A|B) = \frac{P(B|A)P(A)}{P(B)}$$
+
+#### Probability Distributions
+
+- **Normal Distribution**:
+ $$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$$
+
+### Graph Theory
+
+#### Euler's Formula for Planar Graphs
+
+$$V - E + F = 2$$
+
+Where:
+
+- $V$: number of vertices
+- $E$: number of edges
+- $F$: number of faces
+
+### Cryptography
+
+#### RSA Encryption
+
+1. Choose two large prime numbers $p$ and $q$
+2. Calculate $n = p \times q$
+3. Calculate $\phi(n) = (p-1)(q-1)$
+4. Choose $e$ such that $1 < e < \phi(n)$ and $\gcd(e, \phi(n)) = 1$
+5. Find $d$ such that $d \times e \equiv 1 \pmod{\phi(n)}$
+
+Public key: $(e, n)$ Private key: $(d, n)$
+
+### Artificial Intelligence
+
+#### Sigmoid Activation Function
+
+$$\sigma(x) = \frac{1}{1 + e^{-x}}$$
+
+#### Cross-Entropy Loss Function
+
+$$L = -\frac{1}{N}\sum_{i=1}^{N} [y_i \log(\hat{y}_i) + (1-y_i)\log(1-\hat{y}_i)]$$
+
+### Conclusion
+
+Mathematical formulas form the foundation of computer science and programming. Understanding these
+concepts is crucial for developing algorithms and solving complex problems in the field.
diff --git a/posts/memory-garbage-js.mdx b/posts/memory-garbage-js.mdx
new file mode 100644
index 0000000..00b5ccb
--- /dev/null
+++ b/posts/memory-garbage-js.mdx
@@ -0,0 +1,158 @@
+---
+title: Memory Management & Garbage Collection in JavaScript
+description: Learn how JavaScript manages memory and how Garbage Collection works to optimize performance.
+date: 2024-03-06
+tags: ['javascript', 'memory-management', 'garbage-collection']
+published: true
+image: '/images/memory.png'
+---
+
+When learning a programming language, people usually start with basic concepts like variables,
+functions, data types, loops, etc., then move on to execution syntax, and finally tackle advanced
+topics specific to that language. In JavaScript (JS), these advanced topics include asynchronous
+programming, closures, the `this` keyword, and more. However, based on my personal observation,
+there's an equally important topic that is rarely discussed: **how JavaScript manages memory**.
+
+This article will briefly cover the concepts and mechanisms of memory management in JavaScript.
+
+---
+
+### What is Memory Management?
+
+In my opinion, memory management is the process of ensuring that an application uses only the
+resources it needs, avoiding waste that could negatively impact performance.
+
+Fortunately, JavaScript has an automatic **Garbage Collection (GC)** system, which means developers
+don't need to manually allocate and free memory like in languages such as C/C++. However, this
+automation often leads to the misconception that memory management doesn't require attention.
+Understanding how JavaScript manages memory is essential for optimizing application performance and
+avoiding memory leaks.
+
+---
+
+### How Does JavaScript Manage Memory?
+
+JavaScript manages memory in the following sequence:
+
+1. **Memory Allocation**: When a variable, object, or function is created, JavaScript allocates the
+ necessary memory.
+2. **Memory Usage**: Variables and objects are accessed and used in the program.
+3. **Memory Release**: When an object is no longer referenced, JavaScript reclaims its memory to
+ avoid resource waste ⇒ This is where **Garbage Collection (GC)** comes into play.
+
+---
+
+### Garbage Collection
+
+Garbage Collection operates based on specific algorithms:
+
+### 1. Reference-counting GC (Deprecated)
+
+This algorithm scans memory, checks which objects are still referenced, and automatically removes
+those that are no longer in use.
+
+```jsx
+let x = {
+ a: {
+ b: 2,
+ },
+}
+// Create 2 objects: x and a
+
+let y = x
+// y references x
+
+x = 1
+// The first object is now only referenced by y
+
+let z = y.a
+// This object now has 2 references: one as a property,
+// the other as the 'z' variable.
+
+y = 'mozila'
+// The originally referenced object now has zero references ⇒ garbage-collected
+
+z = null
+// The 'a' property now has zero references ⇒ garbage-collected
+```
+
+#### Limitations:
+
+```jsx
+function f() {
+ const x = {}
+ const y = {}
+ x.a = y // x references y
+ y.a = x // y references x
+
+ return 'azerty'
+}
+
+f()
+// Tạo ra vòng tham chiếu, thuật toán đếm tham chiếu không thể xử lý
+// dẫn đến rò rỉ bộ nhớ
+```
+
+#### 2. Mark-and-Sweep
+
+This algorithm works by starting from the global window object and traversing down the object graph.
+Any object that cannot be reached from the global object is marked as unreachable and subsequently
+removed.
+
+**Key Points:**
+
+**Global variables are not released:** Global variables persist throughout the application's
+lifecycle, occupying memory even when they are no longer needed. ⇒ Avoid declaring unnecessary
+global variables, set them to null after use, or import them from another file (GC can detect and
+handle this).
+
+**Event Listeners are not removed:** Event listeners attached to a DOM element can retain references
+to that element even after it is removed from the DOM, leading to memory leaks. ⇒ Always remove
+event listeners when they are no longer needed.
+
+**Uncleared DOM references:** Storing references to deleted DOM elements prevents their memory from
+being released. ⇒ Use remove() (removes the reference entirely) instead of removeChild() (only
+removes the element from the DOM).
+
+**Uncleared Timers and Intervals:** Functions like setInterval() can continue running even when no
+longer needed, causing memory leaks if not cleared. ⇒ Use clearInterval() when the timer is no
+longer needed.
+
+---
+
+### Memory Management in ReactJS
+
+In ReactJS, developers don't need to worry about manually removing event listeners for element
+events. Unlike vanilla JavaScript, React does not attach events directly to elements like
+`
+
+
+ )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3d4fe68..08afee0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,7 @@
import type { Metadata } from 'next'
import { Inter, Roboto_Slab } from 'next/font/google'
-import Footer from '@/layout/footer'
-import Header from '@/layout/header'
+import { ClientLayoutWrapper } from '@/components/client-layout-wrapper'
import '@/styles/index.css'
const inter = Inter({
@@ -20,6 +19,12 @@ const robotoSlab = Roboto_Slab({
export const metadata: Metadata = {
title: 'Nongdandev',
description: 'Technology solutions for modern agriculture',
+ icons: {
+ icon: '/favicon-new.ico',
+ },
+ metadataBase: new URL(
+ process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+ ),
}
export default function RootLayout({
@@ -28,13 +33,11 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
-
+
-
- {children}
-
+ {children}
)
diff --git a/src/app/tags/[tag]/page.tsx b/src/app/tags/[tag]/page.tsx
new file mode 100644
index 0000000..d2aa0d5
--- /dev/null
+++ b/src/app/tags/[tag]/page.tsx
@@ -0,0 +1,94 @@
+import { posts } from '#velite'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { slug } from 'github-slugger'
+import { Metadata } from 'next'
+
+import { PostItem } from '@/components/post-item'
+import { Tag } from '@/components/tag'
+import { getAllTags, getPostsByTagSlug, sortTagsByCount } from '@/lib/utils'
+
+interface TagPageProps {
+ params: Promise<{
+ tag: string
+ }>
+}
+
+export async function generateMetadata({
+ params,
+}: TagPageProps): Promise {
+ const { tag } = await params
+
+ return {
+ description: `Topics I have written about ${tag}`,
+ }
+}
+
+export const generateStaticParams = () => {
+ const tags = getAllTags(posts)
+ const paths = Object.keys(tags).map(tag => ({ tag: slug(tag) }))
+ return paths
+}
+export default async function TagPage({ params }: TagPageProps) {
+ const { tag } = await params
+ const title = tag.split('-').join(' ')
+
+ const allPosts = getPostsByTagSlug(posts, tag)
+ const displayPosts = allPosts.filter(post => post.published)
+ const tags = getAllTags(posts)
+ const sortedTags = sortTagsByCount(tags)
+
+ return (
+