Understanding the performance impact of using popular random UUID (v4) as primary key in SQL databases

The Price of Utilizing Random UUID on Database Performance


## Backstory

During my previous university semester, while working on my final project—a basic live attendance tool with React and Firebase. I recall receiving feedback from a project evaluator who expressed dissatisfaction with my database indexing using UUIDv4. This critique was due to specific technical issues. After some years, I recently came across a video by Hussein Nasser [video](https://www.youtube.com/watch?v=OAOQ7U0XAi0), where he explained the problems associated with UUIDv4, shedding light on the concerns raised during my project evaluation.

[![Hussein Nasser Thumbnail](https://img.youtube.com/vi/OAOQ7U0XAi0/0.jpg)](https://www.youtube.com/watch?v=OAOQ7U0XAi0)

## What are UUIDs?

UUIDs, or Universally Unique Identifiers, are 128-bit identifiers used to uniquely identify information in computer systems without requiring a centralized authority. They consist of 32 hexadecimal digits typically displayed in five groups (8-4-4-4-12) separated by hyphens.

In databases, UUIDs are frequently used as primary keys due to their inherent uniqueness. Unlike incrementing integers, which might cause conflicts in distributed systems or when merging data from various sources, UUIDs offer a reliable solution. Their generation algorithms consider factors like the current timestamp, random numbers, and unique system or network identifiers, ensuring a near-zero probability of collision between identifiers, thus preserving data integrity.

The different versions of UUIDs (1 to 5) use various algorithms and sources to generate unique identifiers:

  - Version 1 (Time-based): Generated from the current timestamp and the MAC address of the network interface. This version ensures that UUIDs are time-ordered and are based on the host that generates them.
  - Version 2 (DCE Security): Similar to Version 1 but using POSIX UID/GID values.
  - Version 3 (Name-based, MD5): Generated using a namespace and an MD5 hash of the name to create the UUID. This version ensures uniqueness based on the namespace and the name.
  - Version 4 (Random): Generated using random or pseudo-random numbers. It does not include meaningful information such as timestamps or MAC addresses but ensures randomness and a higher probability of uniqueness.
  - Version 5 (Name-based, SHA-1): Similar to Version 3 but using the more secure SHA-1 hash algorithm for creating the UUID.

Each version has its specific use cases and considerations regarding uniqueness, generation method, and security. The choice of UUID version in a particular application or system depends on the specific requirements for uniqueness, ordering, and security measures.

## The popular UUIDv4 (and it's problem)

From all version of UUID one rise above all, UUIDv4 is popular among the other to be used as primary key in databases due to its high probability of uniqueness derived from randomness. It doesn't rely on specific system details or time, making it easily generated across platforms while maintaining data security and privacy. Its simplicity, strong uniqueness, and ease of implementation make it a popular choice for ensuring distinct primary keys in database systems, but this come with a price.

To comprehend the influence of using UUIDv4 values as the primary key, it's crucial to examine how InnoDB organizes data. InnoDB arranges a table's rows within the primary key's b-tree, referred to as a clustered index in database terminology. This index automatically arranges rows based on the primary key.

When a new row with a randomly generated primary key value is inserted, InnoDB undertakes a sequence of actions. It locates the page where the row should reside, retrieves it into the buffer pool if not already present, inserts the row, and eventually writes the page back to disk. In scenarios with entirely random values and extensive tables, all b-tree leaf pages are susceptible to receiving the new row, resulting in no specific 'hot pages.' Inserting rows that don't follow the primary key order leads to page splits, reducing the filling factor.

For tables much larger than the buffer pool, inserting a row will likely require reading a table page from the disk. Consequently, the page in the buffer pool where the new row is inserted becomes 'dirty.' The probability of this page receiving a second row before requiring flushing to disk is minimal. Typically, each insert operation results in two I/O operations – one read and one write. This primary impact significantly affects the I/O rate and acts as a significant scalability limitation.

## UUID V7 and ULID

UUIDv7 and ULID aim to address some of the challenges posed by UUIDv4:
  - UUIDv7: This version of UUID is proposed to introduce a sortable feature based on time. Unlike UUIDv4, which is purely random, UUIDv7 incorporates a time-based element to generate identifiers, thereby allowing for chronological ordering. By introducing time into the UUID generation process, it aims to improve the sorting and indexing capabilities, potentially resolving the issues related to randomness seen in UUIDv4.
  - ULID (Universally Unique Lexicographically Sortable Identifier): ULID is a different approach to identifier generation. It combines randomness with a time component to create identifiers that are both unique and sortable. ULIDs offer the advantages of being roughly time sortable while maintaining a high level of randomness, making them suitable for scenarios where ordered data retrieval is essential.

Both UUIDv7 and ULID attempt to mitigate the problems caused by the randomness of UUIDv4 by incorporating elements of time or lexicographic sorting. These improvements aim to enhance the efficiency of sorting, indexing, and querying in databases, particularly in situations where ordered data presentation or querying based on creation time is necessary.


## Real Use Case (Shopify ULID Case)

In Jul 28, 2022, Shopify engineering publish an article about "Building Resilient Payment Systems", where they explain how they use ULID (Universally Unique Lexicographically Sortable Identifiers) as idempotency key, they claim to improve database write operation speed by 50% using ULID.
You can read it here, [shopify.engineering/building-resilient-payment-systems](https://shopify.engineering/building-resilient-payment-systems)

**You can find me on**

Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://github.com/melvnl](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


the price of utilizing random uuid on database performance

Would you like the ability to communicate privately with a fellow engineer using an encrypted method, reminiscent of how Nazi operators communicated during World War II(this sounds cool imo)? If so, this article may be of interest to you.

Steganography - The Art of Concealing Messages


## Backstory

When I was an intern in a certain financial startup, one of my seniors talked about how he utilize certain cryptography library (in nodejs), to detect and prevent user from submiting a malicious image which called Steganography, A the practice of hiding information within other data (usually images). The problem arise when the information being hidden is a malicious script that can break or steal your application data when submited from a FORM to your application server. In this short we will briefly talk about this Steganography thing with a simple example written in Python.

## Steganography History

TL:DR. Steganography, the ancient art of hidden communication, has a rich and intriguing history that spans centuries. Its roots can be traced back to ancient Greece, where Herodotus wrote of a message concealed within a slave's shaven head. In the Renaissance era, artists like Leonardo da Vinci used steganography to hide their scientific notes within their paintings, combining art and science in a fascinating way. During World War II, both the Allies and Axis powers employed steganographic techniques to transmit covert messages and sensitive information, often using seemingly innocuous items like playing cards or postage stamps. With the digital age came a new era of steganography, where information is hidden within digital files like images and audio, making it a powerful tool for espionage, privacy, and cybercrime.

![flow](/static/images/blogs/18.png)

## Example

Let's start with a picture. This is the original image:

![Winter](/static/images/blogs/steganography/winter.png)

This is the modified image with the hidden message:

![Winter LSB](/static/images/blogs/steganography/winter-encoded.png)

But wait, they look exactly the same, right? That is good, it means the changes made in the image were not perceptible by human eyes.

If you want to understand better how the LSB (Least Significant Bit) works check the following explanation.

## Steganography Impacts

Here's a list of both positive and negative implementations of steganography in engineering:

Positive Implementations:

1. Data Protection: Steganography can be used to hide sensitive information within digital files, providing an extra layer of security and confidentiality. For example, embedding confidential messages within image files can help protect them from unauthorized access.
2. Copyright Protection: Steganography can be employed to embed copyright or ownership information within media files, such as images or videos, to deter intellectual property theft and piracy.
3. Digital Watermarking: It can be used for embedding watermarks into images, audio, or video files to verify their authenticity and prevent unauthorized use or distribution.
4. Secure Communication: Steganography can facilitate secure communication, especially in situations where encryption may raise suspicion. By hiding messages within innocuous files, it can help users exchange information covertly.

Negative Implementations:

1. Cybercrime: Steganography is sometimes used for malicious purposes, enabling cybercriminals to conceal malware, such as viruses or ransomware, within seemingly harmless files to bypass security measures and infect target systems.
2. Espionage: State actors and espionage groups may employ steganography to hide sensitive information in digital files to avoid detection during data exfiltration or covert communication, potentially posing national security risks.
3. Privacy Invasion: Some individuals may misuse steganography to secretly embed tracking or spyware in multimedia content, compromising the privacy and security of unsuspecting users.
4. Terrorist Activities: Terrorist organizations may use steganography to hide messages, plans, or recruitment materials within digital media files, making it challenging for authorities to detect and prevent potential threats.

It's important to emphasize that while steganography has legitimate and constructive applications, it can also be exploited for nefarious purposes. Software engineers and security professionals play a crucial role in both harnessing its positive potential and defending against its negative implications by developing tools and techniques for detection and prevention.

## Steganography Technique

The Least Significant Bit (LSB) steganography is one of the simplest and most common techniques used to hide information within digital images.It refers to pixels. Grayscale image pixels are broken into eight bits, and the last bit, the eighth one, is called the Least Significant Bit. Hackers use this bit to embed malicious code because the overall pixel value will be reduced by only one, and the human eye can’t detect the difference in the image. So, no one is even aware that anything is amiss, and that the image is carrying something dangerous within.

In this particular blog I would like to show you the implementation of steganorgraphy in *Hiding secret messages within a normal image (probably a meme?) as secret way of communicating with your friends (also could be used for copyright protection)*, will be implemented using Python with LSB technique.

## How Least Significant Bit (LSB) Works

To understand how LSB works you need to understand first how a pixel works.

A pixel color is defined by 3 channels: **R**ed, **G**reen, **B**lue, also known as RGB.

Each channel can have a value in a range between 0 and 255. The higher the value of a channel, the more intense its color.

|       |  R  |  G  |  B  |
|-------|---|---|---|
| black |  0  |  0  |  0  |
| red   | 255 |  0  |  0  |
| green |  0  | 255 |  0  |
| blue  |  0  |  0  | 255 |
| white | 255 | 255 | 255 |


You can use any combination of those channels to generate the color you want.

#### Binary

Each channel of a pixel needs 1 byte, which means, 8 bits, that is, 8 1s and 0s.

Let's check an example of a blue pixel:

|         |    R     |    G     |    B     |
| ------- | :------: | :------: | :------: |
| integer |    0     |    0     |   255    |
| binary  | 00000000 | 00000000 | 11111111 |

It will result in a blue pixel, but what will happen if we change the value of the blue channel from 255 to 254?

|         |    R     |    G     |    B     |
| ------- | :------: | :------: | :------: |
| decimal |    0     |    0     |   254    |
| binary  | 00000000 | 00000000 | 11111110 |

We just change a single bit of the pixel, the last one (the **L**east **S**ignificant **B**it). Let's check the colors:

![RGB 1](/static/images/blogs/steganography/rgb-1.png)

The two blue colors are pretty similar. Even if they're joined we won't be able to see the difference:

![RGB 2](/static/images/blogs/steganography/rgb-2.png)


We can make this change on the 3 channels, it means that we can store 3 bits per pixel and the final image will look much similar to the original one.

### ASCII Table

To encode the message, we get the respective decimal value from the [ASCII table](http://www.asciitable.com/). Check the following example:

If we want to encode a single letter "a", the decimal value for this letter according to the table is 97, in binary: **01100001**.

How we can store 3 bits per pixel, only changing the last bit, we'll need 3 pixels to encode the 'a' in our image.

The first pixel will store **0 1 1**, on the lasts bits of each RGB channel, the second will store **0 0 0**, and the third will store **0 1** (the blue channel will not be needed for this one).

Joining the last bits of these pixels we'll have: **01100001**, converting this binary to decimal will result in 97, which is "a" according to the ASCII table.

## Let the code talks

```python
import argparse
from stegano import lsb
from PIL import Image

def encode_lsb(image_path, secret_message, output_path):
    img = Image.open(image_path)
    secret = lsb.hide(img, secret_message)

    secret.save(output_path)

    print(f"Process complete. Encoded image saved to {output_path}")

def decode_lsb(encoded_image_path):
    secret = lsb.reveal(Image.open(encoded_image_path))

    return secret

def main():
    parser = argparse.ArgumentParser(description="Encode or decode messages using LSB steganography.")
    parser.add_argument("-e", "--encode", action="store_true", help="Encode a message")
    parser.add_argument("-d", "--decode", action="store_true", help="Decode a message")
    parser.add_argument("-i", "--input", required=True, help="Input image path")
    parser.add_argument("-o", "--output", required=True, help="Output image path")
    parser.add_argument("-m", "--message", help="Message to encode")

    args = parser.parse_args()

    if args.encode:
        if not args.message:
            parser.error("You must provide a message to encode.")
        encode_lsb(args.input, args.message, args.output)
    elif args.decode:
        decoded_message = decode_lsb(args.input)
        print("Decoded Message:", decoded_message)
    else:
        parser.error("You must specify either -e (encode) or -d (decode).")

if __name__ == "__main__":
    main()

```

or even you can directly use stegano library as a command line

```python
$ stegano-lsb hide -i "image path" -m "Secret Message" -o "image path output"
$ stegano-lsb reveal -i "image path output"
Secret Message
```

### Notice
 If possible, consider using PNG images for steganography, as PNG uses lossless compression and is generally more suitable for hiding information without introducing noticeable artifacts.
(As a matter of fact, when I first tried the script, the JPEG file failed.)

**You can find me on**

Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://github.com/melvnl](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


steganography the art of concealing messages

Did you know that the 'noreferrer' attributes play a pivotal role in web security? In this blog, we'll delve into the 'noreferrer' attributes, explaining their significance in protecting privacy and preventing tabnabbing attacks.

Tabnabbing Attack 101


## Backstory

Have you ever employed an anchor element `<a>` to create a hyperlink, be it an external or internal link, and found yourself desiring to make the link open in a new tab whenever a user clicks on it? If you use eslint or any other code syntax formatting plugin, you may have encountered a warning similar to the one shown in the image below.

![jsx-no-target-blank-img](/static/images/blogs/tabnabbing/jsx-no-target-blank-img.png)

It says "having an anchor element with target="_blank" behaviour prone to security risk in older web browsers if we dont include `rel=noreferrer` keyword. What security risk are we encountering here? In this short blog we will talk about a security attack called "Tabnabbing".

## Tabnabbing in Nutshell (Theory)

Tabnabbing attacks take advantage of the common habit of keeping numerous tabs open, even though we often focus on just a few of them while leaving the rest unattended. When you navigate to a new webpage using an HTML anchor link that lacks the `rel="noreferrer"` attribute, a newly opened phishing tab can discreetly run malicious scripts aimed at the previously neglected tab. The potential consequences are quite severe; consider a scenario where the neglected tab is an e-commerce site. In this case, the phishing tab could execute a script that replaces the original e-commerce source code with a convincing authentication page. Unsuspecting users might then unwittingly re-enter their credentials, inadvertently providing the attacker with their login information.

![flow](/static/images/blogs/tabnabbing/flow.png)

1. User clicks the malicious link on the your legitimate website, which opens malicious website in the new tab\
2. Malicious website (opened in the new tab) execute script that forces the previous website (Legitimate Website) to redirect to a Fake Website\
3. The Fake Website could look like a legitimate credentials page login, and prompts victim to enter authentication credentials\

## Tabnabbing in Nutshell (Let's code this)

Let the code talk for itslef!

Below is an example written in plain HTML

### Legitimate website code
```js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Legitimate Website</title>
</head>
<body>
<a href=”somemalicioussite.com” target=”_blank”>Click me, I'm innocent</a>
</body>
</html>
```

### Malicious website code
```js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Malicious Website</title>
</head>
<body>
<script>
if (window.opener) {
    window.opener.location = "https://fakauth.com";
}
</script>
</body>
</html>
```

### Window.opener???

The Window interface's opener property returns a reference to the window that opened the window, either with open(), or by navigating a link with a `target` attribute.

In other words, if window A opens window B, B.opener returns A.

See [Official Web API Docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener) for more information.

Hence, in the malicious website script, the website check if there is a reference to a parent window, and if it's true, the site will run a code that change the url of the parent(previous) tab to a malicious one.

## How It can be Harmful?

Just Imagine your site is an ecommerce site that store user privacy including credit cards number, etc. An attacker can set up a fake login page that closely resembles your e-commerce site's login page. When a user switches back to their seemingly legitimate e-commerce tab and sees the login prompt, they might enter their credentials, thinking it's a normal part of their session. The attacker then captures these credentials, gaining unauthorized access to the user's account.

## Prevention

As per 2021, most modern web browser including chrome treate link as `noreferrer` by default. See this documentation link -> [chromestatus](https://chromestatus.com/feature/6140064063029248)

While simply adding `rel="noreferrer"` in your code would make sure the security in older web browser as well.

**You can find me on**

Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://github.com/melvnl](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


tabnabbing attack 101

Harnessing the power of .bashrc (for Bash users) or .zshrc (for Zsh users) aliases to create shortcut commands for your mundane tasks

Simplified Your Mundane Engineering Workflow with Aliases


No matter how often you use the shell or terminal, sometimes you may encounter commands that are too long than necessary. Typing out such commands can become time-consuming and inefficient, especially if you regularly use the command. By harnessing the power of .bashrc (for Bash users) or .zshrc (for Zsh users) aliases to create shortcut commands for navigating the file system or managing SSH connections. In this blog post, we'll explore the benefits of using aliases and provide some practical examples to get you started.

A recent experience underscored the significance of leveraging shell aliases for streamlining daily tasks and enhancing professional efficiency. Not long ago, I found myself tasked with implementing critical changes on our staging server, with both peers and senior colleagues observing my actions. In this pivotal moment, I encountered a situation that highlighted the potential of aliases to simplify complex procedures and mitigate the risk of unintended delays.

The challenge arose when I momentarily blanked on the SSH command required to establish a connection to a specific IP server. Given the numerous SSH commands in my repertoire, this lapse was not uncommon. However, in a professional context where time is of the essence and the expectations of peers and superiors are high, such lapses can lead to unnecessary delays and even embarrassment.

Reflecting on this experience, it became evident that a proactive approach to creating and utilizing aliases within my shell configuration files could have been invaluable. These aliases, when thoughtfully defined and tailored to my workflow, could have provided quick and intuitive shortcuts for executing frequently used commands, such as SSH connections. By employing aliases, I could have seamlessly accessed the necessary server, eliminating the need to sift through a mental catalog of commands and ensuring a smoother workflow for myself and my colleagues.

# What are Aliases?

Aliases are custom shortcuts or abbreviations for longer and more complex commands. They can save you time and typing effort by allowing you to execute frequently used commands with just a few keystrokes. Aliases are defined in your shell's configuration file, such as `.bashrc` or `.zshrc`, and are loaded every time you start a new terminal session.

# Editing Your Configuration File

Before we dive into creating aliases, let's take a moment to ensure you know how to edit your configuration file. You can use any text editor you prefer, such as nano, vim, or gedit. Here's how you can open your `.bashrc` or `.zshrc` for editing:

For Bash users:

```bash
vim ~/.bashrc
```

For MacOS users:

```bash
vim ~/.zshrc
```


# Example: Creating File System Navigation Aliases

Have you ever found yourself frequently navigating to specific directories deep within your file system? Creating aliases for these paths can save you time. For example, you can add the following aliases to your configuration file:

```bash
alias openproject='cd ~/Documents/projects/parent-project-folder/project-folder/sub-project-folder/your-targeted-folder'
```

Now, instead of typing cd ~/Documents/projects/parent-project-folder/project-folder/sub-project-folder/your-targeted-folder, or doing one cd at a time then type "ls" since you forgot the directory list 🫠, you can just type "openproject" or whatever short command that you can custom directly inside the `.zshrc`

# Quick Parent Directory Navigation:

Another useful alias is one that takes you up one level in the directory hierarchy. You can add the following alias:
```bash
alias ..='cd ..'
```

# Another example: Simplifying SSH Connections

Managing SSH connections can be made more efficient with aliases as well. Here are some examples:

1. SSH to Remote Servers:

Do you frequently SSH into specific remote servers which you can't remember since you have more than two or three remote servers? Create aliases like this:
```bash
alias myserver='ssh user@the-ip-address'
```
Now, you can simply type 'myserver' to initiate an SSH connection.


2. SCP File Transfer:
Simplify file transfers with SCP using aliases:
```bash
alias scpfile='scp user@myserver.example.com:/path/to/source/file /path/to/destination'
```

Using scpfile will copy a file from your local machine to a remote server or vice versa.

# Applying Changes
After adding your aliases to your .bashrc or .zshrc file, save the changes and exit your text editor. To apply these changes immediately, you can either restart your terminal or use the source command:

```bash
source ~/.bashrc  # For Bash users
source ~/.zshrc  # For Zsh users
```

# Conclusion
Customizing your shell with aliases can greatly streamline your daily tasks. Whether it's simplifying file system navigation or managing SSH connections, aliases offer a convenient way to save time and reduce typing. Don't hesitate to experiment with more aliases to suit your specific needs and make your engineering workflow even more efficient. Happy engineering!


simplified your mundane engineering workflow with aliases

Are your passwords truly safe? Discover the sneaky world of dictionary attacks – cybercriminals' favorite shortcut to your digital life. Uncover their tactics and arm yourself with expert tips to keep your accounts locked down. Your security is a click away!

The Hidden Danger of Dictionary Attack


In the realm of cybersecurity, engineers constantly battle against a barrage of threats aimed at compromising the integrity of digital systems. One such threat that engineers grapple with is the **dictionary attack**. In this post, we'll dive deep into the technical aspects of dictionary attacks, their methodologies, and the strategies engineers use to defend against them.

## What is a Dictionary Attack

A dictionary attack is a type of cyberattack in which an attacker systematically tries to gain unauthorized access to a user's account or system by trying out a vast number of potential passwords. Unlike brute-force attacks that try every possible combination of characters, dictionary attacks focus on trying a list of commonly used passwords, words from dictionaries, or variations thereof.

The process involves using automated software or scripts to iterate through a list of passwords, which can include common words, phrases, names, and terms found in dictionaries, as well as variations like adding numbers or special characters to the end of words. The goal is to match one of these potential passwords to the actual password used by the target user.

Dictionary attacks take advantage of the fact that many users still use weak and easily guessable passwords, often derived from familiar words or personal information. By leveraging a targeted list of potential passwords, attackers can increase their chances of successfully cracking accounts with minimal effort and time.

## Anatomy of a Dictionary Attack

At its core, a dictionary attack is a type of **password-cracking** attack that takes advantage of human nature's tendency to choose simple and common passwords. Unlike brute-force attacks that exhaustively try every possible combination, dictionary attacks focus on a targeted approach. Here's how it typically unfolds:

1. **Gathering Password Candidates:** Attackers compile a list of potential passwords, often using dictionaries containing common words, phrases, and variations. These lists can also include personal information about the target, like birthdays or pet names.

2. **Automated Trial and Error:** Using automated scripts or tools, attackers systematically try each password candidate from the list against the target account or system.

3. **Success or Failure:** If the target's password matches one of the candidates, the attacker gains unauthorized access. If not, they might refine their list and try again.

## Real Case Example of Dictionary Attack

### Password Protected PDF

Companies often utilize password protection for sensitive PDF documents like salary statements or credit card statements, which they send individually to recipients on a monthly basis. These documents are secured with a specific password format. Often, you'll notice a recurring pattern in these passwords – they tend to be a combination of the company's initials and a date, or they might consist of a date merged with the last four digits of the corresponding credit card number. Surprisingly, this predictable pattern makes it relatively easy for individuals, sometimes even those with malicious intent, to decipher the password, especially if they somehow manage to gain unauthorized access to the protected document.

Here is a short explaination regarding how it work to crack the pass protected PDF:
Basically all that you need to have is 4 script:
- Script to get list of all of the dates in ddmmyyyy format since predefined dates that you desired
- Script to get list of all possible 4 digits start from 0000 to 9999
- Script to generate the combinations of all of the dates and 4 digits that you just generate (yes, this will resulted in a higher CPU usage for a temporary time and a large txt that store all of the list, possibly 2-3GB)
- Script that manipulate pdf (ex: pikepdf in python) and try all of the listed combinations to open the PDF.

I have created all of the script in my private github repository, but quite hesistant to make it public and include it here, but all of the script can be done with ChatGPT so, have fun I guess? 😂

![test](https://i.ibb.co/hybkjPz/message-Image-1693190174076.jpg)

## The Engineering Challenge

Engineers face the complex task of devising robust mechanisms to defend against dictionary attacks. Here are some key engineering considerations:

- **Hashing Algorithms:** To protect user passwords, engineers employ strong cryptographic hashing algorithms. These algorithms convert passwords into fixed-length hash values, making it extremely challenging for attackers to reverse-engineer the original password. (This is one the most common modern solution to handle Rainbow Table attack, which is a more advanced and complex form of password hacking rather than brute forcing all of the possible password)

- **Salting:** Adding an extra layer of defense, engineers use a technique called salting. A unique salt value is added to each password before hashing, ensuring that even if two users have the same password, their hashed values will differ. (As for the example I provided, add a salt to the password protected file that is hard to "predict" can add extra layer of security for a password protected document)

- **Password Policies:** Engineers play a pivotal role in implementing and enforcing password policies. These policies can require users to create passwords with a mix of character types, minimum length, and no usage of common dictionary words.

- **Account Lockouts and Delays:** Engineers often incorporate mechanisms that lock out accounts temporarily after a certain number of failed login attempts. Additionally, introducing time delays between login attempts can thwart rapid dictionary attacks.

## Conclusion

In the intricate dance between hackers and engineers, the dictionary attack is a formidable move in the attacker's playbook. However, engineers armed with cryptographic expertise and a deep understanding of human behavior continue to innovate and bolster their defenses. By implementing advanced hashing, salting, and smart user authentication strategies, engineers work tirelessly to fortify systems and keep users' digital lives safe from the clutches of these relentless attacks. As for a non engineer, please do not use your birtdate at any sort of form as your password 🙏


**You can find me on**

Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://github.com/melvnl](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


the hidden danger of dictionary attack

Brief comparison between React Query and Redux as state management after using react-query for six months

State Management in React Applications - Choosing the Right Tool for Seamless Development


# Section 1: Introduction

State management plays a crucial role in React applications as it involves managing and synchronizing data across different components. As applications grow in complexity, the need for efficient state management becomes evident. Developers face the challenge of choosing the right tool that can handle state effectively, ensuring data consistency, performance, and maintainability. With various options available, such as Redux, React Query, MobX, and context API, developers must carefully consider factors like scalability, ease of use, developer experience, community support, and integration with other libraries. Selecting the appropriate state management tool is essential to maintain a well-organized and manageable codebase while providing a smooth and responsive user experience.

# Section 2: Challenges in State Management

*  React Query vs Redux: Simplifying State Management

When it comes to state management in React applications, developers often face the challenge of choosing the right tool. Redux has been a popular choice for many years, but React Query has emerged as a powerful alternative. One of the key differentiators between React Query and Redux lies in their approach to handling callbacks and loading states.

* Redux: Manual Callback Handling

Redux is a predictable state container that relies on a unidirectional data flow. While Redux provides a solid foundation for managing application state, it requires developers to write additional code to handle callbacks, loading states, and error handling.

When making an asynchronous request in Redux, developers typically dispatch an action that triggers an API call. They must manually handle the success and error cases in separate reducer functions. Additionally, they need to manage loading states by introducing additional state variables and dispatching loading actions.

This manual process of handling callbacks and loading states can be time-consuming and prone to error. Developers must write boilerplate code and ensure consistency across different parts of the application. This complexity can hinder productivity and increase the learning curve for new team members.

### Example

    import { useState, useEffect, useCallback, useRef } from "react";
    import { useSelector, useDispatch } from "react-redux";

    const useUser = () => {
      const [fetched, setFetched] = useState(false);
      const [loading, setLoading] = useState(false);
      const [error, setError] = useState("");

      const mounted = useRef();

      const userProfile = useSelector((state) => state.users.data);

      const {
        user: { getUser },
      } = useDispatch();

      // user's sid not yet fetched
      const isUserNotYetFetched = userProfile.length === 0;

      const fetchData = useCallback(async () => {
        if (mounted.current) {
          setLoading(true);
          setError("");
        }

        const onError = (message) => {
          if (mounted.current) setError(message);
        };

        await Promise.all([getUser({ onError })]);

        if (mounted.current) setLoading(false);
      }, [getUser]);

      const clearError = useCallback(() => setError(""), []);

      useEffect(() => {
        mounted.current = true;

        return () => {
          mounted.current = false;
        };
      }, []);

      useEffect(() => {
        // fetch data if USER not yet fetched
        if (isUserNotYetFetched && !fetched) {
          fetchData();

          if (mounted.current) setFetched(true);
        }
      }, [fetchData, isUserNotYetFetched, fetched]);

      return {
        loading,
        error,
        isUserNotYetFetched,
        userProfile,
        refetch: fetchData,
        clearError,
        setError,
      };
    };

    export default useUser;


* React Query: Simplified Callback Handling

React Query takes a different approach by simplifying the management of callbacks and loading states. It provides a built-in mechanism to handle common asynchronous scenarios through its `useQuery` and `useMutation` hooks.

When using React Query, developers can define an API endpoint or mutation and provide an asynchronous function as the request handler. React Query automatically handles loading states, error handling, and success scenarios without the need for manual intervention.

The `useQuery` hook automatically handles the loading state by providing an `isLoading` boolean flag. This flag indicates whether the query is in progress, eliminating the need to manage loading states manually.

React Query also simplifies error handling by providing an `onError` callback. Developers can specify a function that is called when an error occurs during the query. This allows for centralized error handling logic and promotes code reuse across different parts of the application.

Similarly, React Query provides an `onSuccess` callback that is triggered when the query is successful. This callback enables developers to update the UI or perform additional actions based on the query result.

By providing these built-in features, React Query significantly reduces boilerplate code and promotes a more streamlined development process. Developers can focus on writing the core logic of their application without worrying about handling callbacks and loading states manually.

### Example

    import { getAllUsers } from "api/user";
    import { AxiosError } from "axios";
    import { useEffect, useState } from "react";
    import { useMutation } from "react-query";

    const useUser = () => {
      const [data, setData] = useState([]);
      const [fetched, setFetched] = useState(false);

      const { mutate, isLoading } = useMutation(() => getAllUsers(), {
        onSuccess(data) {
          setData(data);
        },
        onError(err: AxiosError) {
          console.log(err);
        },
      });

      useEffect(() => {
        mutate();
        setFetched(true);
      }, [mutate]);

      return {
        userData: data,
        refethUserData: mutate,
        isLoading,
      };
    };

    export default useUser;

---
**NOTE**

Notice that redux require more lines which leads to more effort to be done.

---

* Additional Benefits of React Query

In addition to simplified callback handling, React Query offers several other benefits that make it a compelling choice for state management in React applications:

### Automatic Cache Management

React Query comes with a powerful caching system that automatically stores and manages the data returned from API calls. This caching mechanism helps optimize performance and reduces the need for redundant API requests. Developers can easily configure caching options and control how data is invalidated and refreshed.

### Real-Time Data Updates

React Query supports real-time data updates through its subscription system. Developers can subscribe to changes in the underlying data source and automatically update the UI when new data becomes available. This real-time functionality is particularly useful for applications that require live updates, such as chat applications or collaborative tools.

### Query Deduplication and Fetch Policy

React Query intelligently deduplicates identical queries, meaning that if multiple components request the same data simultaneously, React Query sends a single request to the server and shares the result across all components. This reduces network traffic and improves performance.

React Query also provides various fetch policies that developers can configure to control how data is fetched and cached. Options such as cache-first, network-first, cache-only, and more offer flexibility in optimizing data fetching strategies.

### Integration with React Ecosystem

React Query seamlessly integrates with the React ecosystem, making it a natural fit for React applications. It works well with React's component

# Section 3: Conclusion

So, after reading all of the explanation above, does that mean React Query is the new replacement for redux as state management and vice versa?
The answer is **NO**, here is why

it is clear that React Query and Redux serve different purposes.

React Query is a specialized library that primarily focuses on providing an API cache. It excels in this specific task and requires less code to implement. Its main strength lies in efficiently managing and caching API data.

On the other hand, Redux is a powerful state management library that offers a wide range of tools for managing various types of application state. It allows you to store and manage almost anything, but you need to write the logic yourself. With Redux, you have the flexibility to handle complex state management scenarios beyond just caching API data.

It is worth mentioning that you can actually use React Query and Redux together in your application. React Query can handle the API caching aspect, while the rest of your global state can be managed by Redux. This allows you to leverage the strengths of both libraries in different areas of your application.

Additionally, it's worth noting that Redux Toolkit, the official Redux package, introduced an API cache abstraction called RTK Query starting from version 1.6. RTK Query offers similar features to React Query but with some differences in concepts. If you're interested, it's worth exploring RTK Query as an alternative to React Query.

In summary, while React Query and Redux have overlapping functionalities, they serve different purposes. React Query specializes in API caching, while Redux provides a broader set of tools for managing application state. They can be used together, and you may also want to consider exploring RTK Query as an alternative to React Query.

---
**NOTE**

It is worth to mention that you can also use React Query as API cache while using react context as a simple state management, most of the time the scale of the app that you working on doesn't need Redux as the state management to begin with.

---

![Banner](/static/images/blogs/react-query/redux-overkill.png)


react query vs redux

Do you know that over 20 countries in the world read and write from right to left, such as Arabic, Hebrew, Persian, and Urdu? Without proper support, web applications designed for these languages can be confusing and difficult to read. That's why it's essential to consider Right-to-Left (RTL) support when building web applications.

Implement RTL Support in Web Application


## Overview

Do you know that over 20 countries in the world read and write from right to left, such as Arabic, Hebrew, Persian, and Urdu? Without proper support, web applications designed for these languages can be confusing and difficult to read. That's why it's essential to consider Right-to-Left (RTL) support when building web applications.

I have the opportunity to work on a learning management system project abroad that needs to able their user to choose a variety of languages including several languages that are being read from right to left.

Thankfully, with the help of Tailwind CSS, implementing RTL support in your web applications is easier than you might think. Tailwind CSS provides pre-defined classes and features that make it easy to create responsive and customizable user interfaces that support RTL languages. we'll explore how to implement RTL support in web applications, particularly with Tailwind CSS and React/Nextjs.

![RTL Example](https://rtlstyling.com/img/rtl-intro-1.png)

## What is TailwindCSS

Having been using this for years, using this for years, Tailwind CSS is a popular utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces. It supports RTL layouts out of the box, making it an ideal choice for building web applications with RTL languages.

## Prerequisite

Enabling RTL support means that you need to implement multiple languages support first for your web applications. Basic knowledge of Internationalization(i18n) is required to implement RTL support.

## Enabling RTL Support

So after you have created a multi-language website that can change the language of the content by switching the locale from the Navigation section, you need to do one more thing. Languages like Arabic needs RTL support. The content should be aligned from Right To Left.

So let us implement the RTL in our React-based app. HTML has built-in support for RTL. The below code will align the content from Right To Left.

    <html dir="rtl" lang="ar">
    </html>

### Define Languages that require RTL

Create an array that consists of all languages that need right-to-left support

    export const RTLLanguages = ['ur', 'ar', 'he']

ur stands for Urdu, ar stands for Arabic (standard), and he stands for Hebrew.

### Dynamic HTML direction

Here is the implementation in _document.js that is a custom document in Next.js that can update <html> and <body> tags, implementation in other javascript based library/frameworks should be similar

    import Document, {
        Html,
        Head,
        Main,
        NextScript,
        DocumentContext,
    } from "next/document";
    import React from "react";
    import { RTLLanguages } from "constants/languages";

    class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps, locale: ctx?.locale || "en" };
    }

    render() {
        return (
            <Html
                dir={RTLLanguages.includes(this.props.locale || "en") ? "rtl" : "ltr"}
                lang={this.props.locale}>
                <Head></Head>
                <body>
                <Main />
                <NextScript />
                </body>
            </Html>
        );
        }
    }

This will enable the RTL feature in our Next.js app. But only after refreshing the page, we can see the difference. To overcome this issue, we can use the **useEffect** hook. The below code will inject the dir and lang attributes to the <html> tag if there is a change in browser locale.

    //_app.ts
    import "../styles/globals.css";
    import React, { useEffect } from "react";
    import { appWithTranslation } from "next-i18next";
    import { useRouter } from "next/router";
    import { QueryClient, QueryClientProvider } from "react-query";
    import { GlobalStateProvider } from "context/GlobalStateProvider";
    import { RTLLanguages } from "constants/languages";

    function MyApp({ Component, pageProps }: any): React.ReactElement {
    const { locale = "en" } = useRouter();
    const queryClient = new QueryClient();

    useEffect(() => {
        const dir = RTLLanguages.includes(locale) ? "rtl" : "ltr";
        document?.querySelector("html")?.setAttribute("dir", dir);
        document?.querySelector("html")?.setAttribute("lang", locale);
    }, [locale]);

    return (
        <QueryClientProvider client={queryClient}>
        <GlobalStateProvider>
            <Component {...pageProps} />
        </GlobalStateProvider>
        </QueryClientProvider>
    );
    }


### Styling

You might notice, that right-to-left will change the direction of your web application, everything will be reversed or started from the right side of your screen. Several contents in your web application might look messy since you style the web app from the left side (let's say you define a margin-right, padding-right, etc, all of this style implementation won't look appropriate from the right side of your screen). In TailwindCSS this problem is already tackled by Tailwind Team. I personally use TailwindCSS v3.3.2 (by the time I write this blog, it is still part of the experimental feature) which already has built-in support for RTL languages. There is also a third-party plugin designed for Tailwind CSS v2 called [tailwindcss-rtl](https://github.com/20lives/tailwindcss-rtl), which is forward-compatible and stable.

For Tailwind v3 you can read [https://tailwindcss.com/blog/tailwindcss-v3#rtl-and-ltr-modifiers](https://tailwindcss.com/blog/tailwindcss-v3#rtl-and-ltr-modifiers), for v2 you can read [tailwindcss-rtl](https://github.com/20lives/tailwindcss-rtl)

### Best Practices
this [article](https://m2.material.io/design/usability/bidirectionality.html) from material design blog is sufficient as a handbook for best practices implementation in bidirectionality in both web and mobile app. Go check them out!

**You can find me on**\
Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://www.linkedin.com/in/melvin-liu/](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


implement rtl support in web application

Image loading can be detrimental to a great user experience, and can even negatively impact user behaviors. Placeholders are a great option to improve perceived load times and offer a better user experience when a connection or site is slow to load images.

Improve User Experience and Web Performance with Blurhash Algorithm


## Overview

We'll concentrate on one of these picture optimization techniques in this article: employing image placeholders. We'll show you how to use the BlurHash Algorithm method to make image placeholders in particular.

## What is Image Placeholder

Page speed and user experience can be significantly impacted by having too many images in your app or by having images that are very huge and load slowly. In fact, one of the biggest factors in how quickly your program runs is definitely the use of graphics.

We can utilize placeholders for some of the images in an app instead of reducing the overall amount of images to lower the initial load of image files.

A placeholder image for an image is a fake image that the browser can load initially to serve as the real image while waiting for the real image to download. Because placeholders have a far smaller file size than the actual image they represent, they help improve page speed. Moreover, image placeholders might stop layout changes on websites.

## What is BlurHash

By using the BlurHash algorithm to create a blurred version of the image, we can build a more aesthetically pleasing design for the image placeholder.

The procedure entails creating a string of characters that encode an erroneous representation of the image, the quantity of characters generated is based on the image quality.

You can provide the BlurHash string directly into the HTML of your website and have it decoded into the blurred image without having to search for and download an image file.

Your webpage will be more aesthetically pleasing and will load more quickly if you use this BlurHash string as an image placeholder.

## How does BlurHash work?

![BlurHash Example](https://www.bram.us/wordpress/wp-content/uploads/2020/12/blurhas-example.png)
*Illustration from bram.us*

BlurHash applies a simple [DCT transform](https://en.wikipedia.org/wiki/Discrete_cosine_transform) to the image data, keeping only the first few components, and then encodes these components using a base 83 encoding, with a JSON, HTML and shell-safe character set. The DC component, which represents the average colour of the image, is stored exactly as an sRGB value, for easy use without implementing the full algorithm. The AC components are encoded lossily.

### Structure of the BlurHash String

Here follows an example of a BlurHash string, with the different parts labelled:

    Example: LlMF%n00%#MwS|WCWEM{R*bbWBbH
    Legend:  12333344....................

1. **Number of components, 1 digit.**

   For a BlurHash with `nx` components along the X axis and `ny` components along the Y axis, this is equal to `(nx - 1) + (ny - 1) * 9`.

2. **Maximum AC component value, 1 digit.**

   All AC components are scaled by this value. It represents a floating-point value of `(max + 1) / 166`.

3. **Average colour. 4 digits.**

   The average colour of the image in sRGB space, encoded as a 24-bit RGB value, with R in the most significant position. This value can
   be used directly if you only want the average colour rather than the full DCT-encoded image.

4. **AC components, 2 digits each, `nx * ny - 1` components in total.**

   The AC components of the DCT transform, ordered by increasing X first, then Y. They  are encoded as three values for `R`, `G` and `B`,
   each between 0 and 18. They are combined together as `R * 19^2 + G * 19 + B`, for a total range of 0 to 6859.

   Each value represents a floating-point value between -1 and 1. 0-8 represent negative values, 9 represents zero, and 10-18
   represent positive values. Positive values are encoded as `((X - 9) / 9) ^ 2`, while negative
   values are encoded as `-((9 - X) / 9 ) ^ 2`. `^` represents exponentiation. This value is then multiplied by the maximum AC
   component value, field 2 above.

### Base 83 Encoding

A custom base 83 encoding is used. Values are encoded individually, using 1 to 4 digits, and concatenated together. Multiple-digit
values are encoded in big-endian order, with the most significant digit first.

The character used set is

    0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~

### Discrete Cosine Transform

To decode a single pixel of output, you loop over the DCT components and calculate a weighted sum of cosine functions. In
pseudocode, for a normalised pixel position `x`, `y`, with each coordinate ranging from 0 to 1, and components `Cij` ,
you calculate the following for each of R, G and B:

    foreach j in 0 ... ny - 1
        foreach i in 0 ... nx - 1
            value = value + Cij * cos(x * i * pi) * cos(y * j * pi)

The `C00` component is the DC component, while the others are the AC components. The DC component must first be converted
from sRGB to linear RGB space. AC components are already linear.

Once the R, G and B values have been calculated, they must be converted from linear to your output colourspace, usually sRGB.

## Blurhash Implementation in Next.js


For dynamic images in a Next.js app, add the placeholder attribute with 'blur' as value, and you’ll also have to use the blurDataUrl attribute. This attribute takes in the image’s data URL decoded from the encoded blurhash string.

    import Image from "next/image";

    …

    const featuredWorks = [
        ...,
        {
          img: "/static/images/projects/featured/buka.png",
          imgBlur:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAmKADAAQAAAABAAAAmwAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAmwCYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACQkJCQkJEAkJEBYQEBAWHhYWFhYeJh4eHh4eJi4mJiYmJiYuLi4uLi4uLjc3Nzc3N0BAQEBASEhISEhISEhISP/bAEMBCwwMEhESHxERH0szKjNLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS//dAAQACv/aAAwDAQACEQMRAD8AxqaaM00msD6EY1V2qZjUDGmQyu9VXqy5qq5pmMiq9VXqy5qq9BhIhNNpSabms2ZjxUoqEVKKkCUU8VGKeDVIY+kpM0VSEwpKM03NUiGFFJRVEn//0MHNMJpm6mlqxPfuDGoWNKzVCzUGbZG5qq5qVzVZzTMpMgc1Wc1K5qs5oMZEZNJmmk03NQ0ZNkwNSA1XBqQGpaGmWAaeDUANPBpoLk2aTNMzRmrQmx2aTNMzSZq0Q2PzSZpmaTNOxNz/0eT3U0tUG+ml6yse1zEpaoWamF6hZ6ZDYrNVZ2pWeqztTMmxrtVV2p7tVVmpMykwLUm6oS1N3Ucpi5FoNUgaqYepA9JxBSLganhqqB6cHqUiuYtbqN1V99Jvq0iXIn3Um6oC9ML1oomTmWN1G6q2+jearlJ5z//S8/8AMppkql5tIZamx6fMWi9RM9VjLUTS07EuROz1Wd6jaSq7PRYzch7vVdmppbNMoSOeU+wtJRRTMgpckUlFADw5p281FRSsO5NvNG81DS1SESbqN1R0VaJsSbqN1R0Uwsf/0/HfOpDKapZozVaG3tWWzLUZkqCkpXJdRkhemEk0lFIhybCiiigQUUUUAFFFFABRRRQAUUUUAFLSUU7gLRSUU7gf/9Tw6iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//1fDqKdtNJg0DsxKKXFJQIKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9bxzy6Ty6v7KaUpXO7lM8pTClaBSomSi5LgigVptW2SoWWmYSp9iGilIxSUGQUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//1/M9tNK1YxSEVmenYqlaiZatkVEwpktFNlquy1eYVXcVSM2ikwqKrLCoGFUc00MooopGYUUUUAFFLRQAlFOooAbRTqKAG0UtFAH/0PPcU0in001keqRkVCwqc1E1MlldhVdxVlqrvVIzZUcVA1WHqu1WjnmR0lLSUGAUUUUALTqSnUhCUUtFIQlFLSUAJRS0UDP/2Q==",
          title: "Bukalapak",
        },
      ];

    <Image
        src={featuredWorks[0].img}
        quality={100}
        alt={featuredWorks[0].title}
        placeholder="blur"
        blurDataURL={featuredWorks[0].imgBlur
        width="608"
        height="620"
        }
    />

I personally use [https://blurred.dev](https://blurred.dev) a BlurHash data url generator. But if you need more customization or you need to run the blurhash encode and decode process on your web production state you can take a look at the documentation [here](https://github.com/woltapp/blurhash/tree/master/TypeScript).

**Reference:**
[https://github.com/woltapp/blurhash](https://github.com/woltapp/blurhash/blob/master/Algorithm.md)

**You can find me on**\
Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://www.linkedin.com/in/melvin-liu/](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


improve user experience and web performance with blurhash algorithm

Who says we won't use data structure in day to day job as a software engineer? here's how Dijkstra Algorithm help hundreds of train passengers in Jakarta.

Jakarta Railway Route Shortest Path with Dijkstra Algorithm


## Overview

Have you ever heard the statement "Leetcode is Overrated" or "You probably won't ever use all those complex algorithms and data structures that you learn in those boring lectures"?

![Are ya hired son?](/static/images/blogs/dijkstra/are-ya-hired-son.png)
![Tweet meme](/static/images/blogs/dijkstra/tweet-meme.jpeg)

My previous experience proves that knowing at least some basic data structure will help your career quite a lot. In this article, I'll elaborate on it!

## The App Goal

The app's name is [Comute App](https://www.comuteapp.com), a navigation app that mainly focuses on helping deaf people commute by Train in Jakarta, Indonesia area. The app's main function is to
track user location -> generate shortest path route that contains the list of the station that user need to pass -> notify them on certain station (usually transit and end station)
![Comute demo](/static/images/blogs/dijkstra/example.png)
To achieve the station route most of the time people will look into an API such as Google Maps API or OpenStreetMap, the main problem with them is that:
- it requires network
- probably not free and not cheap either

Hence, I found a **workaround** which is to calculate the shortest path ourselves using **Dijkstra algorithm.**

## Dijsktra Algorithm

### Purpose and Use Cases

With Dijkstra's Algorithm, you can find the shortest path between nodes in a graph. Particularly, you can **find the shortest path from a node (called the "source node") to all other nodes in the graph,** producing a shortest-path tree.

This algorithm is used in GPS devices to find the shortest path between the current location and the destination. It has broad applications in industry, especially in domains that require modeling networks.

### History

This algorithm was created and published by Dr. Edsger W. Dijkstra, a brilliant Dutch computer scientist, and software engineer.

In 1959, he published a 3-page article titled "A note on two problems in connexion with graphs" where he explained his new algorithm.

![Dijkstra](https://www.freecodecamp.org/news/content/images/2020/09/image-112.png)

Dr. Edsger Dijkstra at ETH Zurich in 1994 (image by Andreas F. Borchert)
During an interview in 2001, Dr. Dijkstra revealed how and why he designed the algorithm:

>What’s the shortest way to travel from Rotterdam to Groningen? It is the algorithm for the
shortest path, which I designed in about 20 minutes. One morning I was shopping in Amsterdam with
my young fiancée, and tired, we sat down on the café terrace to drink a cup of coffee and I was
just thinking about whether I could do this, and I then designed the algorithm for the shortest path. As I said, it was a 20-minute invention. In fact, it was published in 1959, three years later. The publication is still quite nice. One of the reasons that it is so nice was that I designed it without pencil and paper. Without pencil and paper you are almost forced to avoid all >avoidable complexities. Eventually that algorithm became, to my great amazement, one of the cornerstones of my fame

### Basic Concept

Graphs are data structures used to represent "connections" between pairs of elements.

- These elements are called **nodes**. They represent real-life objects, persons, or entities.
- The connections between nodes are called **edges**.

This is a graphical representation of a graph:
![Graph](https://www.freecodecamp.org/news/content/images/2020/06/image-123.png)

Nodes are represented with colored circles and edges are represented with lines that connect these circles.

**Real case graph example:**

![Real Graph](https://www.freecodecamp.org/news/content/images/2020/06/image-121.png)

💡 Tip: Two nodes are connected if there is an edge between them.

### Easy Explanation

In a summarized way, the algorithm…

1. Take a boolean array spt[] and initialize all the elements to 0 (0 = unvisited, 1 = visited).
2. Create an array v[], which holds the distance of the nodes from starting node and initialize it to infinity.
3. Starts at the node that we give as a parameter and it will return the shortest path between this node and all the other nodes (or vertexes) in the graph.
4. It calculates the shortest distance from each node to the source and saves this value if it finds a shorter path that the path that it had saved before. It calculates the distance between a node and the origin node, if this distance is less than it has been saved before, the new minimum distance will be the new distance.
5. Once Dijkstra’s algorithm has found the shortest path between the origin node and another node, it marks the node as visited (if it didn’t do it the algorithm could enter into an infinite loop).
6. Steps 4 and 5 are repeated until all the nodes are visited. This way, we have visited all the nodes and we’ve saved the shortest path possible to reach each node.

### Time Complexity

Dijkstra’s Algorithm Complexity can be vary depending on the implementation, but normaly it is O(n²) being n the number of vertexes. And the space complexity O(n).

**Reference:**\
[https://www.freecodecamp.org/news/dijkstras-shortest-path-algorithm-visual-introduction/](https://www.freecodecamp.org/news/dijkstras-shortest-path-algorithm-visual-introduction/)



**You can find me on**\
Twitter: [https://twitter.com/mlven23](https://twitter.com/mlven23)\
GitHub: [https://github.com/melvnl](https://github.com/melvnl)\
LinkedIn: [https://www.linkedin.com/in/melvin-liu/](https://www.linkedin.com/in/melvin-liu/)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


jakarta railway route shortest path with dijkstra algorithm

How to get user current region/country location with Geolocation API in javascript.

Get User Current Region With Geolocation API


### Problem

A few weeks ago, one of my clients required me to implement geolocation detection on their site. They want to show different content and store user form submission to a different API endpoint depending on their location (ex: if a user is currently in the Singapore region, the site will show Singapore content only & POST the user form submission data to the Singapore endpoint). In this article I'll show different cases of handling this kind of feature.


### Geolocation

Officially modern browsers already exposed their own native official geolocation feature (read this [https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)), BUT ,since it is quite a hassle to set it up in the project, I found a great alternative which is [https://geolocation-db.com/](https://geolocation-db.com/json/) that only require an API call

### Geolocation-DB
---
**_NOTE:_**

ℹ️  If you open the home URL it will show 502 Bad Gateway, insted open https://geolocation-db.com/json/

---

https://geolocation-db.com/json/ will result in this :

``` javascript
{
  "country_code":"ID",
  "country_name":"Indonesia",
  "city":"Denpasar",
  "postal":null,
  "latitude": "coordinate",
  "longitude": "coordinate",
  "IPv4":"IP Address",
  "state":"Bali"
}
```

### Usage

Since I will be using Javascript with axios, here is the function that I wrote to GET the endpoint result

``` javascript
// getLocation.js
import axios from "axios";

export const getLocation = async () => {
  const API_URL = `https://geolocation-db.com/json/`;
  const response = await axios.get(API_URL);

  return response.data;
};
```

To check whether the function/API works, you can utilize your favorite VPN 😏. You can manipulate it into a standalone library or include it in the component/customize it as a react hook (maybe useLocation hooks or something)

If you have any question feel free to ask in the comment section below ⬇️


get user current region with geolocation api

Alert Your Loves One With A Single Button


# Problem

Let says, one day you decided/have to meet a new person , a complete stranger you have no information about. If you are lucky enough, you will come back home in one piece, but who knows ? your new acquintance might have a bad intention towards you, and at that moment you wish you had a preparation before, such as sending an alert message and your current location to people who you trust as a precaution if anything happen to you.

![Among UsWallpaper](https://d1lss44hh2trtw.cloudfront.net/assets/editorial/2020/09/among-us-steam-release-trailer-0-2-screenshot.png)

# Meet Soteria

![Banner](/static/images/blogs/soteria/banner.jpg)

Soteria (In Greek mythology, Soteria is the goddess of safety and salvation, deliverance, and preservation from harm) , this app send alert message and maps location to desired WhatsApp number

# Design

I learned a lot from this process especially in auto layouting component in Figma, Below is the design of the app that I have done. I want to thank Eric Angelo for the suggestion in my design process. If you guys have any suggestion and comments for the design, feel free to a comment in the comment section below!

![Design](/static/images/blogs/soteria/design.png)

# Code

There are 3 main things that I learned while making the app:
- How Swift UI works (previously using UI Kit)
- CoreLocation & MapKit
- Reverse geocoding

### CoreLocation & MapKit


Get user current latitude and longitude position
```swift
import SwiftUI
import CoreLocation
import MapKit

struct HomeView: View {
    @State private var showingAlert = false
    @ObservedObject var locationManager = LocationManager()

    var userLatitude: Double {
        return  locationManager.lastLocation?.coordinate.latitude ?? 0
    }

    var userLongitude: Double {
        return  locationManager.lastLocation?.coordinate.longitude ?? 0
    }
```

Convert latitude and longitude to an address using reverse geocode

```swift
func getAddressFromLatLon(Latitude: Double, Longitude: Double, completionHandler: @escaping CompletionHandler) {
        var center : CLLocationCoordinate2D = CLLocationCoordinate2D()

        let ceo: CLGeocoder = CLGeocoder()
        center.latitude = Latitude
        center.longitude = Longitude

        let loc: CLLocation = CLLocation(latitude:center.latitude, longitude: center.longitude)

        ceo.reverseGeocodeLocation(loc, completionHandler:
            {(placemarks, error) in
                if (error != nil)
                {
                    print("reverse geodcode fail: \(error!.localizedDescription)")
                }
                let pm = placemarks! as [CLPlacemark]

                if pm.count > 0 {
                    let pm = placemarks![0]
                    var addressString : String = ""
                    if pm.subLocality != nil {
                        addressString = addressString + pm.subLocality! + ", "
                    }
                    if pm.thoroughfare != nil {
                        addressString = addressString + pm.thoroughfare! + ", "
                    }
                    if pm.locality != nil {
                        addressString = addressString + pm.locality! + ", "
                    }
                    if pm.country != nil {
                        addressString = addressString + pm.country! + ", "
                    }
                    if pm.postalCode != nil {
                        addressString = addressString + pm.postalCode! + " "
                    }

                    completionHandler(true, addressString)
              }
        })
    }
```

Call the function and do something if the function is successfully called
```swift
getAddressFromLatLon(Latitude: userLatitude, Longitude: userLongitude){ (success, addressString) in
            if success {
                ....
        }
```

Since I want to send a message to a WhatsApp number that contain text and an google maps url, hence above code look like this.

```swift
getAddressFromLatLon(Latitude: userLatitude, Longitude: userLongitude){ (success, addressString) in
           if success {
                // get saved phoneNumber in user default
                let phoneNumber = UserDefaults.standard.string(forKey: "phoneNumber") ?? "0"

                if (phoneNumber == "0")
                {
                    showingAlert = !showingAlert
                }

                else{

                    let targetAddress = addressString.replacingOccurrences(of: " ", with: "%20")

                    let gmapUrl = "https://maps.google.com/?q=\(userLatitude),\(userLongitude)"

                    if let url = URL(string: "https://api.whatsapp.com/send/?phone=\( phoneNumber)&text=Help!%20Sender%20Sedang%20Dalam%20Masalah!%20Koordinate%20di%20Alamat%20di%20\(targetAddress)%20\(gmapUrl)&type=phone_number&app_absent=0"),

                            UIApplication.shared.canOpenURL(url) {
                               UIApplication.shared.open(url, options: [:])
                            }
                }
            }

        }
```

 UIApplication.shared.canOpenURL(url) is an instance method that returns a Boolean value that indicates whether an app is available to handle a URL scheme, in this case, it's WhatsApp.

# Demo

Check the demonstration video
[https://youtube.com/shorts/PNHZ9oppUDA](https://youtube.com/shorts/PNHZ9oppUDA)


alert your loves one with a single button

How to create and publish your own NPM package in minutes!

Create and Publish Your Own NPM Package


## Overview

You probably wonder how to create your npm package and let people use it easily with just a single command (npm install/yarn add). In this article, I'm going to show you how to publish your npm package, and test it locally before publishing it 🚀

### Step 1: Create NPM account

Go to [https://www.npmjs.com/](https://www.npmjs.com/) to create an account. After you have verified your npmjs account. Open your terminal and type:

```bash
npm login
```

Input your credentials (username, password, and email).

### Step 2: Set Up a New NPM Package

Create a package.json by typing

```bash
npm init
```

With the following settings:

- Package Name: The name of your package (Check the NPM website to see whether the name is available)
- Version: 1.0.0
- Description: This will appear on the NPM page so make it helpful for users
- Entry Point: index.js
- Test Command: You can leave this blank at the moment
- GitHub Repository: If you have a GitHub repo for your module, then add it here. This will appear on the NPM page
- Keywords: This will make it easier for developers to find your package
- Author: Your name
- License: ISC (This is the boilerplate license for open-source software)

### Step 3: Create index.js

In this example, I'm going to use my package: [discord-alert](https://github.com/melvnl/discord-alert) as an example (I create a discord alert npm package with javascript to send me a notification/message to discord when a certain event is triggered).

Create an index.js file that serves as as the main file or the main gateway for our package at the root of your project.

For our code, we are going to define an export default function that makes an HTTP request each time it's called.

```javascript
// fetch api already introduced in Node v17 as experimental feature,
// hence we can use it without importing other dependency in the future
import fetch from "node-fetch";

export default function Notification(url, message) {
  fetch(url, {
    body: JSON.stringify({
      content: message,
    }),
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
  })
    .then(function (res) {})
    .catch(function (res) {
      console.log(res);
    });
}
```

### Step 4: Test The Package Locally

Before we publish our work, we need to make sure it "really works". Hence we need to test it locally first by using:

```bash
npm link your-package-name
```

This command will link your current app/project with the package that you have locally (let's say you have a project written in react, let's call it book-app-store, to test the discord-alert package, you can type **npm link discord-alert**, and use it locally to make sure whether it's work)

### Step 5: Publish

Run

```bash
npm publish
```

and you will receive an email notification from npmjs that your package is already shipped 🥳

**_Note:_** npmjs and yarnpkg are somehow connected hence if you publish it to npm , it also shipped to yarn , read [this](https://stackoverflow.com/questions/58071109/difference-between-yarn-registry-and-npm-registry) for further information.


create and publish your own npm package

Send a message / notification to discord server from your project/app.

Send Message to Discord Server


### Problem

Recently I added a new feature to this site, which is a recommendation feature where people can sign in using either Github / Google credentials and give me their recommendation. Is it such a waste of time to keep checking on the page to see any new data, hence I think if each time user adds new data and the system notifies me it will be much more convenient? I choose discord instead of email, due to the simplicity of sending a message using a discord bot than using Gmail. Below are the steps!

### Step 1: Create a Discord server

[How to Create Discord Server](https://support.discord.com/hc/en-us/articles/204849977-How-do-I-create-a-server-)

### Step 2: Create a webhook in the server

Edit Channel -> Create Webhook -> Copy the webhook url (should look like this "https://discord.com/api/webhooks/{random_text_here}")

### Step 3: Create a http request

There are several way to create a http request (fetch, axios, etc). In this example I'll be using a simple fetch request.

```javascript
fetch("your_webhook_url", {
  body: JSON.stringify({
    content: `type your message here`,
  }),
  headers: {
    "Content-Type": "application/json",
  },
  method: "POST",
})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (res) {
    console.log(res);
  });
```

Voila. All that you need is just a simple webhook URL. Each time you trigger the HTTP request it will send a message to your discord server via bot. I'm using it in my [recommendation page](https://www.melvinliu.com/support).
![result](/static/images/blogs/discord/result.png)

If you have any question, you are welcome to add a comment below by sign in using your Github account 😉


send message to discord server

A comments system powered by GitHub Discussions. 💬 💎

add github comment widget to your site

Learn what is it like to be a software engineer in Indonesia first unicorn that goes IPO (from ex engineer perspective)

What is it like to work at Bukalapak


# Introduction

I was accepted as Bukalapak Software Engineer (Frontend) Intern in October 2021, and I was lucky enough to join the Core Web Experience squad, where the engineers there are all Bukalapak first engineers who have been working

### How it starts

It all started with this post on LinkedIn by kak [Dimas Pandu](https://www.linkedin.com/in/dimas-pandu-a04466123/), previously Talent Development Specialist at Bukalapak.
![Dimas Pandu](/static/images/blogs/bukalapak/linkedin.jpg)

Once I saw that post, I emailed him within minutes

![My Application](/static/images/blogs/bukalapak/my-email.jpg)

### Algorithm Test

After, a few days, I received a new email, regarding the initial test through [codility](https://www.codility.com/), the test consisted of 4 algorithm questions and 1 multiple choice. If only managed to score more than 50% overall. In my opinion, if you do leetcode often, the test can be considered easy.

Since I don't do well on my algorithm test, I thought my chance of being an engieer at Bukalapak had disappeared. Then I received a new email regarding my next step, which is a user interview with Bukalapak engineers.

### User Interview

They ask about my previous experience, my familiarity with certain tech stacks, why I'm interested in Bukalapak, and there is a live coding session where I need to consume an API and create pagination using that API.

Fast forward after 4 days, I received an offer letter. 🎉

![My Offer](/static/images/blogs/bukalapak/offer.jpg)

# Work

I joined the Core Web Experience squad, where our main responsibility is to maintain and improve Bukalapak page performance and SEO while improving Bukalapak e-commerce site.

Here is the tech stack Bukalapak from front-end side:

- Nuxt.js (Bukalapak code architecture is a large micro-frontend written in Nuxt.js)
- Styling: custom css, and tailwind (tailwind is only used in certain cases, for instance in Bukalapak [company profile](https://about.bukalapak.com/) )
- Testing: Bukalapak has a strict test-driven-development culture
- State management: Vuex
- Design System: Yes, Bukalapak utilize their own design system called [Bazaar](https://bazaar-visual.bukalapak.design/) to manage design at scale using reusable components and patterns

Other technical tools:

- Jira, as the project management tool
- Confluence, as the collaboration wiki tool
- Gitlab, as the code management tool
- VPN, to access sensitive sources such as codebase, internal API, etc.

# Onboarding

On my first day, the HR gather us intern, to explain the daily attendance management system that we will use, who to ask if we have certain questions, aside from work what can we expect to get/experience in Bukalapak during the internship period.

# The workflow

My squad (Core Web Experience) implement the agile model as its SDLC (Software Development Lifecycle), there is daily standup every working day on 10.30, sprint planning, sprint retrospective, and other jargon that belong to the agile method, all meeting is held using google meet, and as for intern, there is a one-on-one session with the squad Engineer Manager each week.

# My mentor/supervisor

My mentor was kak [Andrew Kris Yudha](https://www.linkedin.com/in/andrew-kris-yudha-1335832a/), a senior front-end engineer who has been working there for 8 years!. He is one of the founding members who built Bukalapak since 2014. (also fun-fact he is registered as user number 2 in Bukalapak when now Bukalapak have more than a million user registered).

# My first week

In the first week, the engineer manager will throw you lot of reading material in confluence such as Bukalapak front-end code architecture, tech debt management, bukalapak engineer level structure, how they request an API call, prerequisite to install Bukalapak internal dependencies, and call their internal API using different kind of VPN (Virtual Private Network), etc.

# My first task

During my first month, my task is focused in Bukalapak Company Profile V.2 project. When they first, create their company profile for investor / public relation purposes, they make it in a hurry, due to they need to catch up with the initial public offering.

In my first two weeks. I was assigned to the company governance page, where I need to implement and adjust the component (header, and accordion) that was built by the UI Engineer (yes, they have separate roles to handle frontend stuff).

# The rest

After that company profile, the rest of my task is revolving around Bukalapak e-commerce, such as :

- Adding rel attribute conditionally to prevent google bot to crawl certain page
- Adding new text to product title in review page to prevent confusion with product page
- Add page information in product search page whenever the pagination is more than 2 in certain pages
- etc.

It might sound easy, but when you working on a highly complex micro-frontend codebase especially on the product search page it is a whole other level.

Even me and my mentor spent the whole sprint (> 2 weeks) adding the page information in the product search page due to the codebase complexity, and unexpected bug.

# Work Life Balance

The work-life balance might be different for each squad (if you are unlucky enough, you might end up in a squad where your lead expects you to be on alert 20/7, but there is no rumor regarding this in Bukalapak), during my time there, I don't have complaints regarding the work hour. you are expected to be online from 9 a.m - 6 p.m, and in reality, you probably work from 10.30 a.m to - 7 p.m, and there is almost no work on weekends.

# Compensation

I work there from Oct 2021 - Jan 2022 as an engineer intern, the compensation is quite competitive compared to the workload.

# Conclusion

Since our time as human is limited, you probably don't want to waste it by working with the wrong company. Hence, is it worth it to work at Bukalapak? **Yes, It's definitely a yes**. From an engineer perspective, I believe you can learn so much in Bukalapak, they have various products that give value to millions of people (fyi, e-commerce is not their main concern anymore, they are shifting their main business to [Mitra Bukalapak](https://mitra.bukalapak.com/), [B-money: Investment App](https://www.bmoney.id/), [Buka Pengadaan](https://www.bukapengadaan.com/about), and many more, like a jack-of-all-trades company).

As for the compensation, I heard from the current permanent employee, Bukalapak pays their engineer with a generous amount of package (competitive salary, really nice health insurance, etc).

### Note

This blog is purely my personal opinion combined with tip-off from anonymous resource in [FOMO app](https://fomo.id/), I highly recommend you to do your own research. If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


what is it like to work at bukalapak

Bunch of technical reasons why Windows bad for software engineer.

Why engineer should move to Linux


### Backstory

I was lucky enough to be accepted as an intern at the [first unicorn in my country that goes IPO](https://about.bukalapak.com/en/) for software engineer position, as a large tech e-commerce company that exist for 11 years the technology used behind must be quite mature, and more complex than usual (micro-frontend, micro-services, different virtual private network to access certain repository, private npm library, etc.).

I've been using windows since my first day of college as a computer science student, and I should say that there is a few moment where I'm really stressed spending hours setting up the development environment (PATH, and mostly adjusting incompatible library). But I hit my breaking point a few weeks ago, due to incompatibility with my company codebase that is developed in UNIX operating system (like Mac or Linux), here's the list of my main problem :

- Incompatible or missing packages, for instance [this](https://stackoverflow.com/questions/12917569/cmd-patch-is-not-recognised-as-an-internal-external-command-operable-program/18851897) and [this](https://www.npmjs.com/package/link-module-alias)
- Failed to install dependencies due to [node-gyp error](https://stackoverflow.com/questions/45801457/node-js-python-not-found-exception-due-to-node-sass-and-node-gyp/53009640#53009640)
- Illegal file name in windows, but allowed in UNIX
- A few more

My friend keep suggesting me to implement dual boot, but I'm quite afraid that my machine will break down, or something will go wrong during the installation since I'm using a quite old machine (ASUS x550j from 2016). Hence I'm looking for alternative solutions.

### Trying WSL (Windows Subsystem for Linux)

I still want to play valorant during my work hours #oops. Hence I tried WSL, unfortunately I had a difficult time setting up openvpn in WSL due to certain networking issue. Without vpn I couldn't run the repository that I was working on. After a few cup of coffees, I finally give in to dual boot.

### Using Dual Booth

In the end , I decided to implement dual boot in my machine. I'm following this tutorial from [youtube](https://www.youtube.com/watch?v=-iSAyiicyQY&t=622s) to install Ubuntu along with my windows OS. Now, why Ubuntu ? why not arch-Linux? or other cool distros? Simple, I'm not a hardcore Linux fanboy, and there is this class in my 4th semester that teach terminal with Ubuntu, hence I've previous familiarity.

### What is like after a week using Linux

Here is few things that I noticed:

- My laptop's fan is much calmer (Usually it often make annoying noises, especially when I'm using an IDE)
- I also noticed that when I'm idle, Linux doesn't eat as much RAM as Windows does.
- and the most important is that I haven't face any incompatibility problem so far

### Conclusion

As an engineer, I highly suggest you to move from windows to UNIX based like Linux or Mac as soon as you can. Here ! Have some Linus Trovalds Meme!.
![Linux Trovalds mad at Nvidia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usyzcxrtl18yu7497luw.png)

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


why engineer should move to linux

You probably need to refactor that deep nested conditional if-else statement.

Escape If-else hell in Javascript


### Backstory / Problem

Few months ago, there is a certain case where I need to calculate the percentage of input file in each form that user has filled (It was for a react native app that take user feedback by filling several form that represent different category such as personal information form, the user property information, etc.), the system flow look like this in a nutshell.

![System flow in nutshell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jaxjtqua09bslt0e1qq.jpg)

The first approach was using if/else statement to handle the conditional logic. Although it might be a good idea for one or two conditions here and there, using multiple if-else statements chained together will make your code look very ugly, and less readable, and for my case there is probably more than 30 if-else statements in scattered in 5 different forms. Not gonna lie, it look very simple and straight to the point, yet painful to read.

Also, when my peer reviewing the PR, he refers something humorous in reddit about [the code behind yandere simulator](https://www.reddit.com/r/ProgrammerHumor/comments/53uhsw/the_code_behind_yandere_simulator/)
![Yandere Simulator code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5m0oeqx4w8xcva3hf6x.png)

As you can see, it is a hell of if-else statements.

### The solution

The solution will be vary, depends on your case / need. But most likely the thing that you need is **object**. As for instance, let's say you need to return a string based on a key

```JavaScript
function checkStatus(status) {
    if (status.toLowerCase() === 'available') {
        return `The user is currently available`
    } else if (status.toLowerCase() === 'busy') {
        return `The user is currently busy`
    } else if (status.toLowerCase() === 'away') {
        return `The user is away from keyboard`
    } else if (status.toLowerCase() === 'breaktime') {
        return `The user is having a good lunch`
    }
}
```

Just imagine if you have other 20+ status type ? Will you be comfortable reading or writing that much line of if-else statements?

Instead we can use object or **Map object** to make a sort of table consist of paired key and value to look up to.

```javascript
function checkStatus(status) {
  const statusList = {
    available: "The user is currently available",
    busy: "The user is currently busy",
    away: "The user is currently away from keyboard",
    breaktime: "The user is currently having a good lunc",
  };

  return statusList[status]; //console.log(statusList[status])
}
```

This can be also applied in algorithm leetcode-type-of-question to save you up some time from writing repeated if-else statement over and over again.

Thanks for reading!!!
Have a good day, and remember that project you always think about won't code itself 🤪.

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


escape if else hell in javascript

Explaining why you need NVM to change between node version without pain

You need NVM! - Node Version Manager


### Backstory

Have you ever experience difficulties in software development due to unsupported / different version ? Recently I was facing the same issue. The issue was a different Node.js version from my machine (Node v14.18.0) with my company project repository (Node v10 required). The first solution that instantly pop up in my mind was "I think downgrade my current node by uninstalling it will do the work", But what if you need another version for another project in the near future? Do you want to endure the pain of installing and uninstalling Node.js every time you need a different version of it ?

# Node Version Manager

![Node Version Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udz5vnnvog98sw77cz01.png)

[NVM](https://github.com/nvm-sh/nvm) is a version manager for Node.js, it allows you to quickly install and use different versions of node via the command line.

Let's head to the tutorial !

# Instaling Node Version Manager Guide

If you happen to use UNIX, macOS, or WSL (Window Sub-system for Linux), you can install and read the official documentation [here](https://github.com/nvm-sh/nvm#installing-and-updating)

If you happen to use Windows you can install it at [NVM for windows](https://github.com/coreybutler/nvm-windows/releases) which is developed by [Corey Butler](https://github.com/coreybutler), download the **nvm-setup.zip** file.
![NVM for windows github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnrg645478ndqxn0ly2g.png)

### Important Note

![Installation Guide Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nszt5bl3y1n7adxc6q7d.png)
It is stated that you need to uninstall pre-existing node version, but based on my experience it is not necessary to do so.

After the installation you can open your command prompt and check whether nvm is recognized

```bash
C:\Users\YourUsername>nvm -v

Running version 1.1.8.
```

If nvm is not recognized as internal command or external command, try to re-open your command prompt.

Then, You can type **nvm list** in order to see list of Node.js version on your machine.

```bash
C:\Users\YourUsername>nvm list

  * 14.18.0 (Currently using 64-bit executable)
    10.18.0
```

If you don't see your desired Node.js version in the list, you can use **nvm install** command, for example if you want Node.js version 8, you can type **nvm install 8.0.0**

To use the installed Node.js version you can simply type **nvm use 8.0.0**

### Note

If you see an error message _exit status 5: Access is denied._, It is due to admin privilege issue. To solve it you can simply run your command prompt as administrator.

Thank you for your time reading this short article / tutorial about Node Version Manager, hope it helps! and Have a great day.

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


you need nvm

Send form data to strapi backend is quite tricky, here is how!

Upload File to Strapi


When I first started using Strapi as a CMS for one of my client, to give them a little freedom to manage their website content, the hardest part of the development was when I need to build a feature where there is a contact form which people can add and send an attachment (pdf/zip/image/etc.)
![Contact Form Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i1imon4war4yf1ghqpb.jpg)

If I'm not mistaken, there is no official documentation regarding this on Strapi website, but after a few research, I discovered the step to do it.

---

### 1. Enable user permission to upload

Strapi has an upload plugin, that can enable user to upload file to strapi, make sure you check the upload checklist like the image below)
![Strapi Upload Plugin Setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj3d4u4h92oz2gmho2tz.png)

You can find the section in your-url.com/admin/settings/users-permissions/roles

### 2. Send file to Strapi

First, you need to send your file first to Strapi before submit the entire form data. Later, you can link the file and your form data using the id of the file that has been uploaded. For the code example I'm using axios to fetch the request.

```javascript
const [selectedFile, setSelectedFile] = useState(null);

let file = new FormData();
file.append("files", selectedFile);

axios
  .post("your-strapi-url/upload", file)
  .then((response) => {
    const fileId = response.data[0].id;
  })
  .catch((error) => {
    //handle error
  });
```

### 3. Send the form data to Strapi

You can use React useState or other method to store your form value, then create a FormData based on those value. Then the whole code will probably look like this

```javascript
let formData = new FormData();
formData.append("fullName", name);
formData.append("companyName", company);
formData.append("email", email);
formData.append("phoneNumber", phone);
formData.append("team", phone);
formData.append("files", selectedFile);
formData.append("message", message);

axios
  .post("your-strapi-url/upload", file)
  .then((response) => {
    const fileId = response.data[0].id;

    axios({
      method: "post",
      url: "your-strapi-url/contact-submissions",
      data: {
        fullName: name,
        companyName: company,
        email: email,
        phoneNumber: phone,
        team: team,
        attachments: fileId,
        message: message,
      },
    })
      .then(({ data }) => {
        setResponse(data);
      })
      .catch((error) => {
        //handle error
      });
  })
  .catch((error) => {
    //handle error
  });
```

Since we have uploaded the file before the whole data, hence on the second request we only need to send the Strapi fileId that is attached with the file that we have uploaded previously.

I hope this short tutorial / article is helpful. Have a good day!

**Note**: If you have any questions, you can leave a message below by Sign In with your GitHub account 😉


Latest Article

The Price of Utilizing Random UUID on Database Performance

Steganography - The Art of Concealing Messages

Github Activity