DEV Community: Khang Nguyen

Multiple development environments with AWS Identity Center and AWS organization

Khang Nguyen — Wed, 30 Oct 2024 03:41:13 +0000

I’ve been working with AWS services for several years, initially managing development and production environments in a single AWS account. Like many, I used to store keys and secrets in an .env file, something like this:

LOCAL_DEV_ACCESS_KEY_ID=
LOCAL_DEV_SECRET_KEY=
...

For a while, I didn’t realize the limitations and risks of this approach. But as I started setting up development environments in AWS more thoughtfully, I discovered a better way. In this article, I’ll walk through my experience moving from the old approach to using AWS Identity Center and AWS Organizations. To keep things simple, let’s assume we’re using S3, Lambda, and Aurora.

About the Old Way

In the old way, I’d create an IAM user with just enough permissions to work on local development. This worked fine when I was the only one in the project. But as the team grew, I found myself creating separate IAM users for each team member, each with different levels of access.

The more people who joined the project, the more complicated it became. Here’s a taste of the challenges this brought:

Imagine a team member, userA, needs access to the production database for debugging. Instead of going through the devops team for temporary permissions, he asks userC to share their access key. Suddenly, userA has unrestricted access to production resources through userC’s credentials.
Follow that story, now suppose userA accidentally overwrites a critical file in S3 using userC’s key. But when you check in CloudTrail to see what happens, you only see the actions by userC
In another scenario, say a trusted devops engineer, with access to create new resources, uses Redshift or Kinesis for a side project without telling you. You don’t know until the surprise arrives in the monthly bill.
Cost management is also a problem when many environments are in an account. You will get trouble in measurement the cost for each environment.

These examples might sound hypothetical, but they illustrate the kind of risks that come with shared keys and unrestricted permissions in the real world.

New way

I wondered that there must be someways else to reach the resource safely and I found it. I know there are many ways to solve those above problems, but in this article, I just want to share this one. If you get another, I'm very appreciate to know it.

Using AWS Organizations

AWS Organizations enables you to set up separate accounts for each environment (e.g., one for staging, one for production), which effectively isolates each environment. This isolation reduces the chance of accidentally granting access to the wrong resources.

Organizations also lets you apply Service Control Policies (SCPs) across accounts, even restricting actions for root users (root user of an AWS account in the organization). For example, with SCPs, I can ensure users in a staging environment can only create specific EC2 instance types (t2.micro, t2.small, t3.micro) or limit their access to specific services like EC2, RDS, S3, and Lambda. If I’m the root user of a staging account, these policies prevent me from accessing services outside the approved list, like Kinesis or Redshift. SCPs provide account-wide guardrails, making them extremely useful for managing permissions and avoiding resource misuse.

In addition to isolating environments, having separate accounts for development and production simplifies cost management. This setup allows you to monitor costs more closely per environment, making budgeting and cost control more straightforward.

AWS Identity Center Benefits

AWS Identity Center (formerly known as AWS SSO) solves the key-sharing and traceability issues by allowing you to create and manage users independently of IAM. Here’s what makes Identity Center stand out:

No More Keys in Local Development: Each team member has their own Identity Center user. When they need to work with AWS, they create a session by logging in and authenticating via MFA, giving them temporary, secure access to the resources they’re allowed to use. They don’t need long-term keys or to keep credentials in an .env file, reducing the risk of accidental exposure or sharing.
Time-Limited Sessions for Security and Traceability: With Identity Center, sessions have configurable expiration times (typically one or two hours). This means users are regularly re-authenticated, which minimizes the risk of lingering access and prevents users from accessing resources indefinitely. Each session is also unique and recorded, creating a robust audit trail in CloudTrail. This way, you can trace each user’s specific actions during a session, solving issues like shared access and making troubleshooting much easier.

With AWS Organizations and Identity Center, permissions and resource access are managed centrally, eliminating the need to share IAM keys and providing a much higher level of control, security, and traceability.

Conclusion

I think that creating IAM user with permissions and access by keys may suitable for a small project or small team. Maybe it can also be used for CI/CD process to access AWS resources. It's simple, easy to setup.

But for the larger project, more members in your team, you maybe consider to use AWS Organization and AWS Identity. It's quite complicated, but it's more secure and can help you reduce headache for managing member and resources with many environments.

I hope this article will help you in someways, please let's me know if you have any concerns or questions. There will be part 2 to help you setup this approach later, see you ✌️.

No hook libraries - Handle infinitely scrolling in ReactJS

Khang Nguyen — Sat, 06 Jul 2024 08:58:17 +0000

While searching ways to implement infinitely scrolling effect on the internet, I realized that many tutorials use additional libraries or hooks to handle this effect 🧐.

After trying several times, I mostly got it in a quite simple way. So, I decided to write this article to share with you how to implement the infinite scrolling effect in ReactJS without any additional hooks or libraries.

Idea

Before we jump into coding, we need to understand the concept to archive our goal. When the content of the page is longer than client view, our browser will allow us to scroll the client view to see the remaining content.

To create the effect, we just need to calculate the client view (viewport) position when user scrolls. If it reach the threshold, we trigger a fetching action to get more data. Thanks to the available web APIs, we can easily get the position from window object.

Coding

To simple, we can define a threshold about 300px, 100px, any number you want, or you can use the height of the last item as the threshold.

We use window.scrollY to detect the position of the client view (viewport), document.body.scrollHeight for the scrollable height, and window.innerHeight for the client view height.

Finally, we check the condition every time user scrolls, if the condition is satisfied, we call API to get more data.

Here is the implementation in my Pokémon project.

export function PokemonsPage() {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);
  const [loading, setLoading] = useState(false);
  const offset = useRef(0);

  const fetchData = async () => {
    setLoading(true);
    try {
      const data = await getPokemons(offset.current);
      const promises = data.results.map(async (result) => {
        const detail = await getPokemonDetailByUrl(result.url);
        return toPokemon(detail);
      });
      const _pokemons = await Promise.all(promises);
      setPokemons((prev) => [...prev, ..._pokemons]);
      if (_pokemons.length === 20) {
        offset.current += 20;
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      if (loading) return;

      if (
        window.scrollY + window.innerHeight >
        document.body.scrollHeight - 300
      ) {
        fetchData();
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [loading, pokemons]);

  return (
    <div className="p-6" id="view">
      <List data={pokemons} />
    </div>
  );
}

And that's it for this article, I hope this simple implemtation can help you in your projects. Thank you for reading 🤩

Page navigation with react-router-dom

Khang Nguyen — Sun, 30 Jun 2024 14:31:00 +0000

To navigate to pages in a React project, we use react-router-dom, which offers many features such as routing and creating layouts with , etc. Today, I'd like to show you how to use react-router-dom in a React project with Vite.

I recommend you read my article on setting up a React project here before getting started.

Installation



npm install react-router-dom

Preparation

First, we need to imagine the project we're going to build. This project will list Pokémon data, as shown in the image below. It has several pages:

/home: Landing page
/pokemons: Pokémon list
/pokemons/:id Pokémon detail
/favorites: All your favorite Pokémon

Below is the project structure



src/
├── apis/
│   ├── index.ts
│   └── pokemons.ts
├── assets/
│   └── logo.svg
├── components/
│   ├── index.ts
│   └── navbar.tsx
├── pages/
│   ├── favorites/
│   │   └── page.tsx
│   ├── home/
│   │   ├── components/
│   │   └── page.tsx
│   ├── not-found/
│   │   └── page.tsx
│   ├── pokemon/
│   │   └── page.tsx
│   └── pokemons/
│       ├── components/
│       ├── index.ts
│       └── layout.tsx
├── types/
│   ├── index.ts
│   ├── pokemon.ts
├── app.tsx
├── index.css
├── main.tsx
└── vite-env.d.ts
.env

Configuring Routing

To enable client-side routing in this React application, we need to wrap entire application in <BrowserRouter> component. For each page, we need to create a <Route/> component, example for path /favorites, we get this



<Route path="/favorites" element={<FavoritesPage />} />

As you can see, we have a navbar component that we want to keep at the top of these pages. So I created a layout named MainLayout which includes an <Outlet/> component to help us switch page content while keeping the navbar fixed.



import { Outlet } from "react-router-dom";
import { Navbar } from "../components";

export default function MainLayout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

Then we need to make all the pages have the same layout (with the navbar on top) and only change the content nested inside the MainLayout route. From now on, each time you access to the path /pokemons or /favorites, the client will just change the content inside the layout and keep the navbar component.



export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/favorites" element={<FavoritesPage />} />
          <Route path="/pokemons" element={<PokemonsPage />} />
          <Route path="/pokemons/:id" element={<PokemonPage />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Get params

When working with react-router-dom, you might have trouble getting params of the path. For example /pokemons/:id, you need to get the id value to fetch data of a Pokemon by its id in PokemonPage.

You can use useParams hook to get it like this



const { id } = useParams();

The hook returns an object that contains all params that appear in the URL. Now you can take the id to get the Pokemon data.

That's it for the article, I hope it can help you to set up a project with react-router-dom. If you have any comments or suggestions, please let me know, I'd love to hear them. Thanks for reading

React + Vite + Tailwind project

Khang Nguyen — Sun, 30 Jun 2024 10:48:10 +0000

If you want to create a React project without using framework like NextJS or Remix, this article is for you. In this guide I will help you init a React project with Vite and use TailwindCss.

Prerequisite

NodeJS version >= 18

Use this command to check your NodeJS version

node -v

Create react project with vite

Open your terminal and run the command

npm create vite@latest

It would ask you some question:

Project name: Your project name, example: pokemon
Select a framework: Choose React
Select a variant: Pick TypeScript

Then your project is created, open the project by VSCode or your other IDE and install dependencies by this command:

npm install

To run project in dev mode, run

npm run dev

The project would be run at http://localhost:5174

Integrate with Tailwind

Install Tailwind by command

npm install -D tailwindcss postcss autoprefixer

Then init Tailwind config file

npx tailwindcss init -p

Update file tailwind.config.js following this code

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

Open index.css file import all tailwind css styles

@tailwind base;
@tailwind components;
@tailwind utilities;

Now let's test your Tailwind with this code in any .tsx file

<h1 className="text-3xl font-bold underline">
      Hello world!
</h1>

If the styles are applied, you successfully initialized a React project with Tailwind and Vite.

Init web project with TS & Webpack from scratch

Khang Nguyen — Sun, 02 Jun 2024 13:16:45 +0000

I'm trying to create web application using TS and Webpack, its name is "Shooter" - a basic game on browser. Today I'll show you how to init the project with Typescript and use Webpack to bundle the code.

Prerequisites

Installed nodejs

Create a new folder, then open it by vscode

mkdir shooter
cd shooter
code .

Init npm and git

npm init -y
git init

In .gitignore file, add node_modules and dist to ignore them.

Init typescript config and webpack

Init typescript config file

npx tsc --init

Add ts-loader and webpack-cli to use webpack with typescript

npm install ts-loader --save-dev
npm install webpack-cli --save-dev

Create webpack.config.js file and add those configurations:

const path = require("path");
module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Create .ts file and test

Create src directory and index.ts file with some typescript code to test.

In package.json file, add this script inside scripts to build the code.

"build": "webpack --mode=development"

Build code by using

npm run build

And you can see file bundle.js inside dist folder.

Add `watch` feature

To make webpack bundles code automatically each time you change code in src directory, add this script into package.json

"watch": "webpack --mode=development --watch"

Try to update code inside src directory and watch webpack bundles you code immediately.

Binding `bundle.js` with `index.html`

Create index.html file with some code in public directory.

Add html-webpack-plugin

npm install --save-dev html-webpack-plugin

Update add the plugin to webpack.config.js file

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
  ],
};

Now, run the project again, you will see the bundle.js is binding in header tag.

Use `dev-server`

To start you web application and apply watching code change in webpack, we can use web-pack-dev-server

npm install webpack-dev-server --save-dev

Add this configuration in webpack.config.js

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
  },

Then finally add this script package.json

"start": "webpack serve --mode=development"

Now run the project with

npm run start

And open http://localhost:9000/, you will see your application run there.

Vim - key combinations to change text

Khang Nguyen — Sat, 02 Mar 2024 03:53:33 +0000

I'm a fan of Vim, I've been using Vim syntax in my work for more than a year, and I so love it. The most thing I love in Vim is the key combinations, which help me quickly edit the text. So today I'd like to share with you guys some key combinations that I usually use in my daily work. I hope they can help you be more productive in coding and inspire you to use or learn Vim.

Combinations

Below are examples of my screenshoots to show how the combinations work, they are not completely enough and I can add more later.

"ciw"

Change inner the word under the cursor

"cit"

Change the content inner a tag

"ci("

Change the content inner round bracket

"ct="

Change the content from the cursor to before the "="

"cc"

Change current line - Delete the current line and turn into insert mode

Main keys

"c" is the main command to change text object in Vim. There are many types of text object such as word, content inside a tag or brackets, or content before, after a character, etc. Below are two key combinations I always use:

i - is a command to turn into insert mode in Vim, but when it combines with "c" like "ci", "i" means inner a text object.
a - is also a command to turn into insert mode but the text editor cursor will place after the current cursor. "ca" means change the text object and the thing around it.

We can combine many keys to represent the boundary like:

ci" to change the content inner the ""
ci< to change inner the <>
ca< to change the content inner the <> and also delete the <>

And more.

You might think there are lots of things to remember, but believe me, when you practice and practice everyday, you can dance with those combinations like a pro.

LRU Cache: From implementation to efficiency

Khang Nguyen — Tue, 06 Feb 2024 16:07:02 +0000

LRU cache

LRU stands for Least Recently Used, it’s one of the cache policies applicable in CDNs and network caching. As its name suggests, the primary mechanism of this policy is to remove the least recently used items out of the cache. In this article, I’ll show you how to implement the LRU from scratch, through a simple to an optimal way.

Target

Because the main focus of this article is on the algorithm, so we will narrow down the cache data type, specifically, keys and values stored in the cache will be positive numbers.

The ultimate goal of the implementation is to create a class LRUCache which includes the following methods:

get(key) : Returns the value of given key, if there isn’t any matching key, return -1.
put(key, value) : If there is insufficient capacity, the least recently used item must be removed from the cache, finally, the key and value are inserted into the cache.
constructor(capacity) : Initializes the capacity of the cache.

The items in cache will be refreshed every time we access their keys.

class LRUCache {
    constructor(capacity: number) {

    }

    get(key: number): number {

    }

    put(key: number, value: number): void {

    }
}

First come up

The crucial aspect of a cache is a hash map to efficiently store and retrieve the values based on keys. So in initialization stage, we can have a cache like this.

class LRUCache {
    private readonly map;
    private readonly capacity;

    constructor(capacity: number) {
        this.map = new Map<number, number>()
        this.capacity = capacity
    }

    get(key: number): number {
        const value = this.map.get(key)
        return value ?? -1
    }

    put(key: number, value: number): void {
        this.map.set(key, value)
    }
}

As the requirement, we need to implement a data structure to track the recently used items. There are two options to consider:

Data Structure	Pros	Cons
Array	- Simple implementation	- Finding an item has a time complexity of O(n)
		- Moving or deleting an item has a time complexity of O(n)
		- Fixed space in RAM → Can easily lead to out-of-memory situations with large data
Single Linked List	- More complex	- Finding an item has a time complexity of O(n)
		- Moving or replacing an item has a time complexity of O(n)
		- Flexible space in RAM

After the comparison, a single linked list is better choice than an array so we will implement a linked list to store all keys in the order of recent usage, from tail to head, it means the least recently used item is at the head of the list.

Here is how the implementation works:

We create a dump head node to make it easy to handle the first node, a tail pointer to help us add the node to the end of the list efficiently.
Every time we get a key, if it’s exist in the hash map, the key will be moved to the end of the list.
When putting an item and the cache is full
- The first item of the list will be removed. The corresponding key in hash map will be removed too.
- The new key and value are then inserted into the hash map, a new node with that key and value is also pushed to the end of the list.

class MyListNode {
    constructor(public key: number, public val: number, public next: MyListNode | null = null) { }
}

class LRUCache {
    private readonly map;
    private capacity;
    private head: MyListNode;
    private tail: MyListNode;

    constructor(capacity: number) {
        this.map = new Map<number, number>()
        this.capacity = capacity
        this.head = new MyListNode(-1, -1)
        this.tail = this.head
    }

    get(key: number): number {
        const value = this.map.get(key)
        if (value === undefined) {
            return -1
        }

        // Find the previous node
        let p = this.head
        while (p.next && p.next.key !== key) {
            p = p.next
        }

        // Move the node to the end of the list
        const node = p.next;
        if (!node) {
            return - 1
        }
        p.next = node.next;
        node.next = null
        this.tail.next = node
        this.tail = node;

        return value
    }

    put(key: number, value: number): void {
        const node = new MyListNode(key, value)
        this.tail.next = node
        this.tail = node

        if (this.map.size === this.capacity && this.head.next) {
            const leastRecentlyUsedNode = this.head.next
            this.map.delete(leastRecentlyUsedNode.key)
            this.head.next = leastRecentlyUsedNode.next
        }

        this.map.set(key, value)
    }
}

Let take a look at time and space complexity:

The list and hash store n items, therefore, the space complexity is O(n).
get : To find the previous node, we may visit almost the node in the list, so it takes O(n) in time complexity
put : takes O(1) in time complexity.

Improvement

So it looks quite good at this time, if there is a thing need to be improved, it should be the get method, we need to reduce the time complexity to O(1), but how?

Notice, the get method is taking more time to find the previous node, so if there is a way to access the previous node immediately without going through the nodes, the time complexity will be dramatically optimized to O(1).

To find an item quickly in O(1) time complexity, we can use a hash map in which the value will be the node of the linked list.
To immediately get the previous node of current node in list, we can apply double linked list data structure.

After the enhancement, we have the new LRU cache like the figure. The new hash map offers a very quick way to get the node, then we can easily access the previous node in double linked list. We also additionally implement the renew and unlink method to support add a node to the end and remove a node from the list.

class DoubleLinkNode {
    constructor(public key: number, public val: number, public next: DoubleLinkNode | null = null, public prev: DoubleLinkNode | null = null) {}
}

class LRUCache {
    private readonly capacity;
    private readonly map: Map<number, DoubleLinkNode>
    private head: DoubleLinkNode
    private tail: DoubleLinkNode

    constructor(capacity: number) {
        this.capacity = capacity
        this.map = new Map()
        this.head = new DoubleLinkNode(-1, -1)
        this.tail = new DoubleLinkNode(-2, -1)
        this.head.next = this.tail
        this.tail.prev = this.head
    }

    get(key: number): number {
        const node = this.map.get(key)
        if(!node) {
            return -1
        }
        this.unlink(node)
        this.renew(node)
        return node.val
    }

    unlink(node: DoubleLinkNode) {
        const prevNode = node.prev;
        const nextNode = node.next;
        if(!prevNode || !nextNode) {
            return
        }

        prevNode.next = node.next
        nextNode.prev = prevNode
    }

    renew(node: DoubleLinkNode) {
        const prevTail = this.tail.prev
        if(!prevTail) {
            return
        }
        prevTail.next = node
        node.prev = prevTail
        node.next = this.tail
        this.tail.prev = node
    }

    put(key: number, value: number): void {
        let node = this.map.get(key)
        if(node) {
            node.val = value
            this.unlink(node)
            this.renew(node)
        } else {
            node = new DoubleLinkNode(key, value)
            if(this.map.size === this.capacity) {
                this.map.delete(key)
            }
            const nextNode = this.head.next?.next
            if(nextNode) {
                this.head.next = nextNode
                nextNode.prev = this.head
            }
        }
        this.map.set(key, node)
    }
}

Finally, we significantly improved the performance of the get method from time complexity O(n) to O(1), it’s more complicated but it’s quite efficient.

Keys take away

LRU cache is a cache policy which will remove the least recently used item when the capacity is full. It can be implemented by linked list and hash map to efficiently put and get items.

LRU cache can be enhanced by the combination of a double linked list and a hash map which stores keys and nodes following above. The optimization will reduce the time complexity of get method from O(n) to O(1). Through this article, I also hope it can help you understand how to approach a problem from simple state to an optimal solution.