DEV Community: Weerayut Teja

I Built a Free Prop Firm Risk Calculator --- Here's Why

Weerayut Teja — Wed, 01 Apr 2026 09:03:03 +0000

If you're trading with a prop firm, you already know the drill. Blow your daily drawdown, you're done for the day. Hit your max drawdown, you're done period. Miss the consistency rule, and somehow you still fail even though you were profitable.

The math isn't hard, but keeping track of it all while you're in the middle of a live session? That's where things go sideways.

So I built a tool to handle it for me --- and now I'm sharing it for free.

What it does

PropFirm Calculator is a web app (PWA, so you can install it on your phone or desktop) that helps you figure out exactly how much you should be risking per trade given your account rules.

You plug in:

Account balance
Daily drawdown limit
Max drawdown limit
Profit target
Consistency rule (if your firm has one)
Win rate & risk/reward ratio

And it spits out your safe risk per trade, max daily profit cap, estimated days to pass, expected value per trade --- all the numbers you actually need before you click buy or sell.

It also runs a Monte Carlo simulation so you can see a range of possible outcomes based on your setup, not just the rosy best-case scenario. And there's a Losing Streak Simulator that shows you how many losses in a row it takes before you're in real trouble --- useful for gut-checking your position size.

If you trade multiple accounts, there's a multi-account comparison view so you can line them all up side by side.

Quick presets are built in for FTMO, Funded Trader, TopStep, and etc. so you don't have to type everything in manually.

It's free, no login required

No account. No email. No subscription. Just open it and use it.

👉 https://wteja.github.io/propfirm-calculator/

If you want to host your own version or add your firm's rules, the source is open:

👉 https://github.com/wteja/propfirm-calculator

Fork it, tweak it, do whatever you want with it.

Why I made this

Honestly, I got tired of doing the same math on a notepad every morning before the session. One miscalculation and you're overrisking without even realizing it. This just removes that friction.

If it helps even a handful of traders not blow their challenges over something avoidable like position sizing, that's a win for me.

Give it a try and let me know what you think.

Managing Multiple SSH Keys for Different Git Hosting Platforms (GitLab & GitHub)

Weerayut Teja — Thu, 16 Jan 2025 13:15:00 +0000

If you have multiple GitHub or GitLab accounts, you might run into SSH key conflicts when pushing or pulling repositories. By default, SSH always tries to use the first key it finds, which can lead to permission issues. But don’t worry! In this guide, we’ll set up multiple SSH keys and configure them properly, so you can seamlessly work with multiple accounts on both platforms.

Step 1: Generate SSH Keys for Each Account

If you haven’t already generated SSH keys for each account, you can create them using:

ssh-keygen -t ed25519 -C "your_first_account@example.com" -f ~/.ssh/id_ed25519_first
ssh-keygen -t ed25519 -C "your_second_account@example.com" -f ~/.ssh/id_ed25519_second

This will create two key pairs:

~/.ssh/id_ed25519_first (private key) and ~/.ssh/id_ed25519_first.pub (public key)
~/.ssh/id_ed25519_second (private key) and ~/.ssh/id_ed25519_second.pub (public key)

Step 2: Add SSH Keys to Git Hosting Platforms

For GitHub:

Copy each public key to your clipboard:

   cat ~/.ssh/id_ed25519_first.pub
   cat ~/.ssh/id_ed25519_second.pub

Go to GitHub → Settings → SSH and GPG Keys
Add each key to the respective GitHub account.

For GitLab:

Copy each public key:

   cat ~/.ssh/id_ed25519_first.pub
   cat ~/.ssh/id_ed25519_second.pub

Go to GitLab → Settings → SSH Keys
Add each key to the respective GitLab account.

Step 3: Configure SSH to Use Different Keys

By default, SSH uses git@github.com and git@gitlab.com for all connections, but we can assign different identities using an SSH configuration file.

Edit (or create) the SSH config file:

nano ~/.ssh/config

Then, add the following lines:

Host github-first
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_ed25519_first
    IdentitiesOnly yes

Host github-second
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_ed25519_second
    IdentitiesOnly yes

Host gitlab-first
    HostName gitlab.com
    User git
    IdentityFile ~/.ssh/id_ed25519_first
    IdentitiesOnly yes

Host gitlab-second
    HostName gitlab.com
    User git
    IdentityFile ~/.ssh/id_ed25519_second
    IdentitiesOnly yes

This tells SSH to use different keys based on the hostname alias.

Step 4: Clone Repositories Using the Correct SSH Key

Instead of using git@github.com or git@gitlab.com, use the custom host from our SSH config:

For GitHub:

git clone github-first:your-first-user/your-repo.git

Or for the second account:

git clone github-second:your-second-user/your-repo.git

For GitLab:

git clone gitlab-first:your-first-user/your-repo.git

Or for the second account:

git clone gitlab-second:your-second-user/your-repo.git

Step 5: Update an Existing Repository’s Remote

If you already cloned a repo with the wrong account, update the remote URL:

git remote set-url origin github-second:your-second-user/your-repo.git

Or for GitLab:

git remote set-url origin gitlab-second:your-second-user/your-repo.git

Step 6: Test Your SSH Connection

To verify which account you’re using, test with:

ssh -T github-first
ssh -T github-second
ssh -T gitlab-first
ssh -T gitlab-second

Each command should return a message identifying the correct user.

Final Thoughts

By configuring your SSH setup correctly, you avoid the headaches of permission issues and seamlessly switch between multiple GitHub and GitLab accounts. This method also works for Bitbucket or any other Git service that relies on SSH authentication.

Now you’re ready to juggle multiple Git accounts like a pro!

The Struggle of Finding a Free Excel to PDF Converter: My Journey and Solution

Weerayut Teja — Sun, 12 Jan 2025 06:51:03 +0000

Converting Excel files to PDF is a common task in many projects, whether for generating reports, sharing data, or creating documents. Like many developers, I initially believed this would be an easy task to automate. However, my search for a free, reliable solution turned into a frustrating journey filled with limitations, compatibility issues, and expensive tools.

Here’s how I overcame these challenges, built my own Excel-to-PDF converter, and made it available as an open-source tool for others who may be struggling like I did.

The Frustration

Commercial Tools

My initial search brought me to paid solutions like Aspose.Cells, Syncfusion, and others. While they offered robust features, they came with steep licensing costs—well beyond what I could justify for small or personal projects.

Online Services

Free online converters seemed like a promising alternative, but they were unsuitable for automation. These tools often raised privacy concerns (since files are uploaded to third-party servers), had file size limits, and didn’t provide programmatic APIs.

Open-Source Libraries

I also explored open-source libraries, but most lacked the ability to convert Excel files to PDF. Even those that did were either unreliable or didn’t support modern Microsoft Office formats.

Discovering LibreOffice in Headless Mode

After weeks of searching, I stumbled upon the idea of using LibreOffice in headless mode. LibreOffice is a free, open-source office suite that can convert various file formats, including Excel, to PDF. When run in headless mode, it operates via the command line, making it perfect for automation.

How My Solution Works

To make this approach developer-friendly, I built a lightweight Go-based HTTP server that acts as a REST API. This server wraps LibreOffice’s functionality and allows any programming language to interact with it via HTTP requests.

Key Features

Multiple File Format Support: Supports .xlsx, .xls, .csv, .docx, .pptx, and more.
Automatic Cleanup: Temporary files are automatically deleted after one hour to save disk space.
Custom Fonts: You can mount custom fonts by cloning the GitHub repository or using Docker volumes.
Cross-Language Integration: Works with any programming language that supports HTTP.

The Temporary Directory Approach

Instead of relying on the system’s temporary directory, I opted to use a custom ./tmp directory. This ensures consistent behavior, as system temp directories sometimes have unpredictable permissions.

Implementation Details

How It Works

File Upload: Clients upload an Excel file via the /convert endpoint using a POST request.
Temporary Storage: The server saves the file in the ./tmp directory with a timestamp-based filename.
Conversion: LibreOffice is called in headless mode to convert the file to PDF and save the result in the same directory.
File Cleanup: A background goroutine deletes files older than one hour.
Response: The converted PDF is returned as the HTTP response.

Getting Started

GitHub Repository

You can find the source code at https://github.com/wteja/pdf-converter.

Docker Image

The project is also available as a Docker image: wteja/pdf-converter.

Running the Docker Container

docker pull wteja/pdf-converter
docker run -p 5000:5000 wteja/pdf-converter

Examples of Integrating with Other Languages

Since the service is exposed via HTTP, you can use any programming language to interact with it.

C#

var client = new HttpClient();
var fileContent = new ByteArrayContent(File.ReadAllBytes("example.xlsx"));
var formData = new MultipartFormDataContent { { fileContent, "file", "example.xlsx" } };

var response = await client.PostAsync("http://localhost:5000/convert", formData);
var pdfBytes = await response.Content.ReadAsByteArrayAsync();
File.WriteAllBytes("output.pdf", pdfBytes);

Node.js

const axios = require("axios");
const FormData = require("form-data");
const fs = require("fs");

const form = new FormData();
form.append("file", fs.createReadStream("example.xlsx"));

axios.post("http://localhost:5000/convert", form, { headers: form.getHeaders() })
  .then(response => fs.writeFileSync("output.pdf", response.data))
  .catch(console.error);

Python

import requests

with open("example.xlsx", "rb") as f:
    response = requests.post("http://localhost:5000/convert", files={"file": f})

with open("output.pdf", "wb") as f:
    f.write(response.content)

Go

package main

import (
    "bytes"
    "io"
    "mime/multipart"
    "net/http"
    "os"
)

func main() {
    file, _ := os.Open("example.xlsx")
    defer file.Close()

    body := &bytes.Buffer{}
    writer := multipart.NewWriter(body)
    part, _ := writer.CreateFormFile("file", "example.xlsx")
    io.Copy(part, file)
    writer.Close()

    req, _ := http.NewRequest("POST", "http://localhost:5000/convert", body)
    req.Header.Set("Content-Type", writer.FormDataContentType())

    resp, _ := http.DefaultClient.Do(req)
    defer resp.Body.Close()

    out, _ := os.Create("output.pdf")
    defer out.Close()
    io.Copy(out, resp.Body)
}

Challenges and Trade-Offs

Image Size

The Docker image is 2.67 GB due to the dependencies required by LibreOffice. While I tested smaller images like Alpine, they shipped with an older version of LibreOffice that wasn’t compatible with modern Microsoft Office formats. Debian, although offering the latest LibreOffice, resulted in an even larger image (~3 GB).

Why It’s Worth It

The large image size is a reasonable trade-off when compared to the cost of commercial solutions. Once set up, the image can be reused across multiple projects without any additional licensing fees.

Conclusion

The frustration of finding a free Excel-to-PDF converter led me to build my own solution using LibreOffice in headless mode. While it’s not perfect, it’s free, reliable, and flexible. If you’re facing the same challenge, I hope this project saves you time and effort.

Check out the project on GitHub or pull the Docker image from Docker Hub. Let me know how it works for you or if you have suggestions for improvement.

การเขียนเทสเพื่อทดสอบโปรเจคแบบ React + Firebase

Weerayut Teja — Sat, 16 Nov 2024 06:06:27 +0000

การเขียนเทสต์สำหรับโปรเจคที่ใช้ Firebase + React มีความสำคัญในการตรวจสอบความถูกต้องของฟังก์ชันต่าง ๆ โดยเฉพาะเมื่อ Firebase ให้บริการทั้งในส่วนของ Backend และ API การเทสต์จึงต้องครอบคลุมทั้งการทำงานของ React Component และการเชื่อมต่อกับ Firebase โดยมีแนวทางดังนี้ :

ประเภทของการเทสต์ที่ควรมีในโปรเจค

Unit Test
- ทดสอบฟังก์ชันหรือโมดูลที่แยกออกมา เช่น การเรียก Firebase API
Integration Test
- ทดสอบการทำงานระหว่าง Component React และ Firebase รวมถึงการทำงานร่วมกันระหว่างโมดูล
End-to-End (E2E) Test
- ทดสอบกระบวนการใช้งานของผู้ใช้ เช่น การล็อกอิน การเพิ่มข้อมูลลง Firestore หรือการแสดงผลข้อมูลในหน้าเว็บ

การเขียนเทสต์ Firebase ใน React

1. การเทสต์ฟังก์ชันที่ใช้ Firebase API

Firebase มี Client SDK ที่ให้เราใช้เชื่อมต่อกับบริการต่าง ๆ เช่น Authentication, Firestore หรือ Realtime Database ในการเขียนเทสต์ คุณสามารถ Mock พฤติกรรมของ Firebase SDK ได้

ตัวอย่างการ Mock Firebase

ใช้ไลบรารีอย่าง jest.mock เพื่อ Mock Firebase SDK

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

jest.mock("firebase/auth", () => ({
    getAuth: jest.fn(),
    signInWithEmailAndPassword: jest.fn(),
}));

test("should call signInWithEmailAndPassword with correct arguments", async () => {
    const mockAuth = {};
    getAuth.mockReturnValue(mockAuth);
    signInWithEmailAndPassword.mockResolvedValue({ user: { uid: "12345" } });

    const result = await signInWithEmailAndPassword(mockAuth, "test@example.com", "password123");

    expect(signInWithEmailAndPassword).toHaveBeenCalledWith(mockAuth, "test@example.com", "password123");
    expect(result.user.uid).toBe("12345");
});

การ Mock SDK จะช่วยให้คุณหลีกเลี่ยงการเชื่อมต่อกับ Firebase จริงในขณะเทสต์

2. การเทสต์ React Component ที่เชื่อม Firebase

React Component ที่เรียก Firebase API ควรแยกฟังก์ชัน Firebase ออกมาใน Utility หรือ Hook เพื่อให้ง่ายต่อการเทสต์

ตัวอย่าง Component และ Hook

// hooks/useFirebaseAuth.js
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from "react";

export function useFirebaseAuth() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const auth = getAuth();
        const unsubscribe = onAuthStateChanged(auth, setUser);
        return unsubscribe;
    }, []);

    return user;
}

เทสต์ Hook ด้วย `react-hooks-testing-library`

import { renderHook } from "@testing-library/react";
import { useFirebaseAuth } from "./useFirebaseAuth";
import { getAuth, onAuthStateChanged } from "firebase/auth";

jest.mock("firebase/auth", () => ({
    getAuth: jest.fn(),
    onAuthStateChanged: jest.fn(),
}));

test("should set user when onAuthStateChanged is triggered", () => {
    const mockUser = { uid: "12345", email: "test@example.com" };
    onAuthStateChanged.mockImplementation((auth, callback) => {
        callback(mockUser);
        return jest.fn(); // Mock unsubscribe function
    });

    const { result } = renderHook(() => useFirebaseAuth());
    expect(result.current).toEqual(mockUser);
});

3. การเขียน Integration Test

Integration Test จะทดสอบการทำงานระหว่าง React Component และ Firebase เช่น การแสดงผลข้อมูลจาก Firestore

ตัวอย่างการทดสอบ Firestore ด้วย Mock

import { render, screen } from "@testing-library/react";
import { collection, getDocs } from "firebase/firestore";
import MyComponent from "./MyComponent";

jest.mock("firebase/firestore", () => ({
    collection: jest.fn(),
    getDocs: jest.fn(),
}));

test("should display data from Firestore", async () => {
    const mockData = [{ id: "1", data: () => ({ name: "Item 1" }) }];
    getDocs.mockResolvedValue(mockData);

    render(<MyComponent />);
    const item = await screen.findByText("Item 1");
    expect(item).toBeInTheDocument();
});

คุณสามารถ Mock การตอบกลับของ Firestore เพื่อให้เทสต์สามารถจำลองข้อมูลได้

4. การเขียน End-to-End Test

ใช้เครื่องมืออย่าง Cypress หรือ Playwright สำหรับการเทสต์ E2E
การตั้งค่า Firebase Emulator จะช่วยให้สามารถทดสอบการทำงานร่วมกับ Firebase ได้โดยไม่ต้องเชื่อมต่อกับโปรเจคจริง

การตั้งค่า Firebase Emulator

ติดตั้ง Firebase CLI:

npm install -g firebase-tools

เปิด Emulator:

firebase emulators:start

กำหนดค่าให้ React ใช้ Emulator:

import { connectAuthEmulator } from "firebase/auth";
    import { connectFirestoreEmulator } from "firebase/firestore";

    const auth = getAuth();
    connectAuthEmulator(auth, "http://localhost:9099");

    const firestore = getFirestore();
    connectFirestoreEmulator(firestore, "localhost", 8080);

ตัวอย่าง Cypress Test

describe("Authentication Flow", () => {
    it("should log in and display user dashboard", () => {
        cy.visit("/login");
        cy.get("input[name=email]").type("test@example.com");
        cy.get("input[name=password]").type("password123");
        cy.get("button[type=submit]").click();
        cy.url().should("include", "/dashboard");
        cy.contains("Welcome, test@example.com").should("be.visible");
    });
});

สรุป

แยกฟังก์ชัน Firebase ออกมาใน Utility หรือ Hook เพื่อให้ Mock และเทสต์ได้ง่าย
ใช้ Mocking Library เช่น Jest เพื่อจำลอง Firebase SDK
ตั้งค่า Firebase Emulator สำหรับการทดสอบในสภาพแวดล้อมที่ใกล้เคียงของจริง
ใช้ E2E Test สำหรับกระบวนการที่เกี่ยวข้องกับผู้ใช้จริง เช่น การล็อกอินและดึงข้อมูล

ด้วยแนวทางนี้ คุณสามารถเขียนเทสต์ได้ทั้งในระดับ Unit, Integration, และ E2E ช่วยให้โปรเจคมีความเสถียรและลดโอกาสเกิดข้อผิดพลาดในอนาคต

เพิ่มประสิทธิภาพให้กับ NestJS สำหรับการประมวลผลที่เร็วและมีประสิทธิภาพสูง

Weerayut Teja — Thu, 20 Jul 2023 17:25:41 +0000

ในโลกของการพัฒนาแอปพลิเคชันและเว็บเซอร์วิส ประสิทธิภาพและความเร็วในการประมวลผลมีความสำคัญอย่างมาก ในบทความนี้เราจะมาสอนวิธีการเพิ่มประสิทธิภาพให้กับ NestJS เพื่อให้สามารถรองรับการประมวลผลที่เร็วและมีประสิทธิภาพสูงตามที่คุณต้องการ

ก่อนอื่นเรามาตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ NestJS ไว้ในเครื่องของคุณแล้วนะครับ ถ้ายังไม่ได้ติดตั้งคุณสามารถติดตั้งได้ง่ายๆ โดยใช้คำสั่งต่อไปนี้:

npm install -g @nestjs/cli

เมื่อคุณได้ติดตั้ง NestJS แล้ว ลองสร้างโปรเจคใหม่ด้วยคำสั่ง:

nest new my-project

ในบทความนี้ เราจะมาเรียนรู้และปรับปรุงประสิทธิภาพของ NestJS ในด้านต่อไปนี้:

การใช้ Caching เพื่อเพิ่มประสิทธิภาพ
การใช้ Middleware เพื่อประมวลผลข้อมูลก่อนเข้าสู่ Controller
การใช้ Dependency Injection ให้เหมาะสม

มาเริ่มกันเลย! 🚀

1) การใช้ Caching เพื่อเพิ่มประสิทธิภาพ

การใช้ Caching เป็นเทคนิคหนึ่งที่ช่วยเพิ่มประสิทธิภาพแอปพลิเคชันของคุณอย่างมาก โดยการเก็บข้อมูลที่ถูกคำนวณไว้ล่วงหน้า เพื่อให้ครั้งถัดไปที่มีการเรียกข้อมูลจะเป็นเหมือนเดิม คุณสามารถใช้ Caching ใน NestJS ได้โดยใช้คำสั่ง @Cacheable() ก่อนเมธอดที่คุณต้องการเก็บข้อมูลไว้

import { Controller, Get, CacheTTL, CacheInterceptor } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
@UseInterceptors(CacheInterceptor)
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @CacheTTL(60) // ให้ Cache ข้อมูลเป็นเวลา 60 วินาที
  getHello(): string {
    return this.appService.getHello();
  }
}

ในตัวอย่างนี้ เราใช้ @Cacheable() และ @CacheTTL() เพื่อ

ให้เมธอด getHello() ถูกเรียกใช้งานเป็นระยะเวลา 60 วินาที หลังจากนั้นข้อมูลจะถูกเก็บในแคชและนำมาใช้ในครั้งถัดไปที่มีการเรียกเมธอดนี้

การใช้ Caching นี้เหมาะสำหรับเมธอดที่มีการคำนวณข้อมูลที่ใช้เวลานานหรือมีการเรียกใช้งานบ่อยๆ ซึ่งช่วยลดโหลดของฐานข้อมูลและเพิ่มความเร็วในการตอบกลับของแอปพลิเคชัน

2) การใช้ Middleware เพื่อประมวลผลข้อมูลก่อนเข้าสู่ Controller

Middleware ใน NestJS เป็นอีกหนึ่งเครื่องมือที่ช่วยให้คุณปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ โดยคุณสามารถใช้ Middleware เพื่อประมวลผลข้อมูลที่เข้ามาในระหว่างการส่งเรียกไปยัง Controller ตามที่คุณต้องการ

เพื่อให้คุณเข้าใจง่ายๆ เรามาดูตัวอย่าง Middleware ที่เราจะสร้างขึ้นมาด้วยกัน:

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response } from 'express';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: Function) {
    console.log('Request received...');
    next();
  }
}

ในตัวอย่างนี้ เราได้สร้าง Middleware ที่ชื่อว่า LoggerMiddleware ซึ่งเป็นตัวกลางในการประมวลผลข้อมูลที่เข้ามาในระหว่างการเรียก Controller ซึ่งมีหน้าที่ในการ log ข้อความ "Request received..." ลงใน console ทุกครั้งที่มีการเรียกของ Request

หลังจากนั้นในการเรียกใช้งาน Middleware นี้ คุณสามารถนำมาประยุกต์ใช้ใน Controller ได้ดังนี้:

import { Controller, Get, UseMiddleware } from '@nestjs/common';
import { AppService } from './app.service';
import { LoggerMiddleware } from './logger.middleware';

@Controller()
@UseMiddleware(LoggerMiddleware)
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

ในตัวอย่างนี้ เราใช้ @UseMiddleware() เพื่อใช้งาน LoggerMiddleware ที่เราได้สร้างขึ้น ซึ่งจะทำการ log ข้อความ "Request received..." ลงใน console ทุกครั้งที่มีการเรียกของ Request ไปยัง Controller

Middleware เป็นเครื่องมือที่ช่วยให้คุณปรับปรุงประสิทธิภาพแอปพลิเคชันของคุณอย่างสมบูรณ์ คุณสามารถสร้าง Middleware ตามความต้องการของคุณเองเพื่อให้ทำหน้าที่เพิ่มเติมในกระบวนการของแอปพลิเคชัน

3) การใช้ Dependency Injection ให้เหมาะสม

NestJS มากับคุณสมบัติที่สำคัญที่ชื่อว่า "Dependency Injection" (DI) ซึ่งเป็นระบบที่ช่วยให้การเชื่อมต่อและใช้งาน Component และ Service ในแอปพลิเคชันของคุณเป็นไปอย่างสะดวกและเรียบง่าย ใน NestJS คุณสามารถใช้ DI ได้โดยใช้ @Injectable() กับ Class ที่คุณต้องการให้เป็น

Injectable

เรามาดูตัวอย่างการใช้งาน Dependency Injection กันครับ:

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello NestJS Beginners!';
  }
}

ในตัวอย่างนี้ เราใช้ @Injectable() เพื่อระบุว่า AppService เป็น Injectable ซึ่งใน Class AppController เราสามารถ Inject AppService เข้ามาใช้งานได้โดยการสร้าง constructor ดังนี้:

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

การใช้งาน Dependency Injection ทำให้การเชื่อมต่อและใช้งาน Component และ Service ของแอปพลิเคชันเป็นไปอย่างเรียบง่าย คุณสามารถสร้างและใช้งาน Service หรือ Component ใน NestJS ได้โดยไม่ต้องกังวลเรื่องของการเชื่อมต่อ และ NestJS จะทำการแยกแยะและให้คุณ Inject สิ่งที่คุณต้องการเข้าไปใน Class ต่างๆ อย่างง่ายดาย

สรุปก็คือ

การเพิ่มประสิทธิภาพให้กับ NestJS เพื่อรองรับการประมวลผลที่เร็วและมีประสิทธิภาพสูงไม่ใช่เรื่องยากอย่างที่คิด โดยคุณสามารถใช้ Caching เพื่อลดโหลดของฐานข้อมูลและเพิ่มความเร็วในการตอบกลับของแอปพลิเคชัน ใช้ Middleware เพื่อประมวลผลข้อมูลก่อนส่งไปยัง Controller และใช้ Dependency Injection ให้เหมาะสมเพื่อเชื่อมต่อและใช้งาน Component และ Service อย่างมีประสิทธิภาพ

How to deal with : Function uuid_generate_v4() does not exist on PostgreSQL

Weerayut Teja — Mon, 02 Jan 2023 08:14:53 +0000

Some time when you create the table on PostgreSQL and want to use UUID Generator V4 on uuid field but turn out that you got this error.

Function uuid_generate_v4() does not exist

To resolve this problem, just run this command in the SQL Editor

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

Note: you also need to have uuid-ossp.control extension to be available provided by postgresql-contrib package

JavaScript Event คืออะไร? และใช้งานอย่างไร?

Weerayut Teja — Mon, 02 Jan 2023 08:11:24 +0000

ใน JavaScript เจ้า Event คือเหตุการณ์ต่างๆ ที่เกิดขึ้นขณะที่เราใช้งานเว็บเพจของเรา เช่น การคลิกลงไปบนปุ่ม, การพิมพ์ข้อความในกล่องข้อความ, การเลื่อนหน้าจอขึ้นลง, การเลือกข้อความ เป็นต้น ซึ่งพวก Event พวกนี้จะเกิดขึ้นถี่มากๆ ในเบื้องหลังขณะเราใช้งานเพจครับ

ประเภทของ Events

เราสามารถจำแนก Events ได้ออกเป็นสองประเภทใหญ่ๆ คือ

Browser Events เป็น Events ที่เกิดขึ้นกับการใช้งานเบราเซอร์ เช่นเหตุการณ์ที่เกิดขึ้นกับ Window object เช่น loaded, error, scroll เป็นต้น
HTML Events เป็น Events ที่เกิดจากตัว HTML Elements เช่น click, mouseover, mouseout, focus, blur เป็นต้น

Event Listener และ Handler

Event Listener ก็จะเป็นตัวที่รอดู รอรับฟังว่าจะเกิด Event ที่กำลังสนใจเกิดขึ้นหรือไม่ โดยเราจะต้องระบุ ชื่อ Event และ Event Handler ให้กับมัน
Event Handler จะเป็น Callback Functions ที่จะเขียนเพื่อตอบสนองกับเหตุการณ์ต่างๆ

เวลาที่เราจะตอบสนองกับเหตุการณ์ เราต้องเชื่อมเจ้า Event Handler เข้ากับ Event Listener ครับ เช่น

const button = document.getElementById('save-btn');

function eventHandler() {
    alert('You clicked on the button');
}

button.addEventListener('click', eventHandler);

โค้ดด้านบนบรรทัดแรกเราจะต้องอ้างหา HTML Element ที่เราต้องการก่อน เช่นการใช้ document.getElementById('save-button') เพื่ออ้างหาปุ่มที่มีไอดีชื่อว่า save-button

บรรทัดต่อไปเราเขียนฟังก์ชั่นที่เราต้องการนำมาใช้เป็น Event Handler

และบรรทัดสุดท้ายเราทำการ Listen ไปยัง event click และฝัง Event Handler ที่เราเพิ่งสร้างไปด้วย ดังนั้นเมื่อปุ่มนี้ถูกคลิกโดยผู้ใช้ มันจะแสดง Alert Dialog มีข้อความว่า You clicked on the button

เขียน Event Handler ได้กี่แบบ?

จริงๆ แล้วมีหลายท่าในการเขียน Event Handler ครับ แบบแรกขอยกตัวอย่างโค้ดก่อนหน้านี้มาครับ คือการเขียน Event Handler แล้วยัดลง Event Listener ตามมาตรฐานปกติ ข้อดีคือเราจะยัด Event Handler เข้าไปกี่ตัวก็ได้ เช่น

const button = document.getElementById('save-btn');

function eventHandlerA() {
    alert('You clicked on the button');
}

function eventHandlerB() {
    alert('It really cool, isn't it?');
}

button.addEventListener('click', eventHandlerA);
button.addEventListener('click', eventHandlerB);

มันจะทำงานตามลำดับ เช่นอย่างโค้ดด้านบน เมื่อมีการคลิกมันจะแสดงข้อความ You clicked on the button แล้วตามด้วย It really cool, isn't it?

หากเราต้องการนำ Event Handler ตัวไหนออก ให้ส่งไปที่ removeEventListener ด้วยชื่อ Event อันเดิมเช่น

button.removeEventListener('click', eventHandlerA);

ก็จะเป็นการนำ eventHandlerA ออกไป เมื่อมีการคลิกก็จะแสดงกล่องข้อความแค่อันเดียวคือ It really cool, isn't it?

ต่อไปเป็นการเขียนเพื่อใส่ Event Handler ให้กับ HTML Element โดยตรง ผ่าน Property on แล้วตามด้วยชื่อ Event ครับ เช่นต้องการใส่ Event Handler ให้กับ Event Click ก็ยัดลง onclick เช่น

const button = document.getElementById('btn');

function eventHandler() {
    alert('You clicked on the button');
}

button.onclick = eventHandler;

หรือจะใส่ Event Handler เป็น Anonymous function ก็ได้ เช่น

const button = document.getElementById('btn');

button.onclick = function() {
    alert('You clicked on the button');
};

หรือใส่เป็น Arrow function

const button = document.getElementById('btn');

button.onclick = () => {
    alert('You clicked on the button');
};

ข้อดีคือง่ายสุดๆ แต่ข้อเสียหลักๆ เลยคือใส่ Event Handler ได้แค่อันเดียวต่อหนึ่ง Event

ฉะนั้นลองชั่งใจดูนะครับ

How To Make Push Notification Using Node.js and Service Worker

Weerayut Teja — Sun, 20 Mar 2022 05:08:11 +0000

We might find push notifications on mobile really useful because a web server can communicate directly with the app when it wants.

But app users need to grant permission to receive the push notifications first.

We can simply create the push notification using only Node.js, Express.js and Web-Push.

Sample Code

You can find sample code here this is the complete code of this tutorial.

Let's Get Started!

Let's create a directory that contains our Express.js app.

mkdir web-push-sample
cd web-push-sample

Then install necessary libraries.

npm init 
npm i express body-parser web-push

Next we will create start script by add node index.js to your start script

{
  "name": "web-push-sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.19.2",
    "express": "^4.17.3",
    "web-push": "^3.4.5"
  },
  "scripts": {
    "start": "node index.js"
  }
}

Generate VAPID Keys for push notifications

VAPID, which stands for Voluntary Application Server Identification is a new way to send and receive website push notifications. Your VAPID keys allow you to send web push campaigns without having to send them through a service like Firebase Cloud Messaging (or FCM). Instead, the application server can voluntarily identify itself with your web push provider.

I have two recommended ways to create VAPID Keys

1) Generate from vapidkeys.com

Just go through the website, enter the email address. It is used to give details about the sender. Use it as an identifier.

Then click the "generate" button. You should get the JSON object that contains subject which is your given email address.

And you will get both public and private keys.

Really easy right?

2) Generate by Command Line

If you don't want to use the online services, you can generate it through the command line. So open your terminal and enter this command.

./node_modules/.bin/web-push generate-vapid-keys

It should returns something like this...

=======================================

Public Key:
BO4imRW5SYfMtEUyfwMrrxvzJjuoThJ1FNqiUX3Z0C93Ajdrhdy0rX5iwvGBWHffmH3nP-NhVsF5XXbnHxsUnrg

Private Key:
yI31gBBUlJYKj_7wZmPZsLGFklxNMVSk_9UVpWBXEHc

=======================================

Setup the Subscription Route

Next you will need to create express app and setup the route for allow client to subscribe to your push notification

const express = require('express');
const webpush = require('web-push');
const bodyParser = require('body-parser');
const path = require('path');

// Create express app.
const app = express();

// Use body parser which we will use to parse request body that sending from client.
app.use(bodyParser.json());

// We will store our client files in ./client directory.
app.use(express.static(path.join(__dirname, "client")))

const publicVapidKey = "BOd2EQ8LTe3KAgMX9lWwTlHTRzv1Iantw50Mw6pUnsNr3pcxl8iglUs-YlQEQLo4UbJk9oyXs_BxgyAe0TCqKME";

const privateVapidKey = "4AoSsRHFaHv0Fupd2NRtrungJF2jkqgccTu-WEc781w";

// Setup the public and private VAPID keys to web-push library.
webpush.setVapidDetails("mailto:test@test.com", publicVapidKey, privateVapidKey);

// Create route for allow client to subscribe to push notification.
app.post('/subscribe', (req, res) => {
    const subscription = req.body;
    res.status(201).json({});
    const payload = JSON.stringify({ title: "Hello World", body: "This is your first push notification" });

    webpush.sendNotification(subscription, payload).catch(console.log);
})

const PORT = 5001;

app.listen(PORT, () => {
    console.log("Server started on port " + PORT);
});

Inside subscribe route we will also start to sending first push notification but it need to pass the string as the value.
If you want to sending the JSON object, you will need to send as a string, and parse it on client side.

Below are the example on sending push notification to the client.

const payload = JSON.stringify({ title: "Hello World", body: "This is your first push notification" });

    webpush.sendNotification(subscription, payload).catch(console.log);

Create Service Worker to Consume Push Notification

We will need 3 files in client directory to start to consume our push notifications

1) index.html - Our landing page that will make use our main javascript file.
2) client.js - Our main JavaScript file which will register our service worker.
3) worker.js - Our Service Worker JavaScript file which will handle the push notifications.

Let's create index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Push Notification Using Web-Push</title>
</head>
<body>
    <h1>Push Notification Using Web-Push</h1>

    <script src="./client.js"></script>
</body>
</html>

Then create the client.js and register our worker.

We will need to copy our public keys and store it to some variable.

const publicVapidKey = "BOd2EQ8LTe3KAgMX9lWwTlHTRzv1Iantw50Mw6pUnsNr3pcxl8iglUs-YlQEQLo4UbJk9oyXs_BxgyAe0TCqKME";

Then we write the function to subscribe the push notification.
We create the subscription object then send the POST request to our API endpoint and attach that subscription object as the payload.

async function registerServiceWorker() {
    const register = await navigator.serviceWorker.register('./worker.js', {
        scope: '/'
    });

    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: publicVapidKey,
    });

    await fetch("/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: {
            "Content-Type": "application/json",
        }
    })
}

Finally we make use this function after we check that our current web browser supports Service Worker

if('serviceWorker' in navigator) {
    send().catch(console.log)
}

So the final look of client.js will be like this


async function registerServiceWorker() {
    const register = await navigator.serviceWorker.register('./worker.js', {
        scope: '/'
    });

    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: publicVapidKey,
    });

    await fetch("/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: {
            "Content-Type": "application/json",
        }
    })
}

Create Service Worker

Create worker.js we will add event listener inside this file. When we show the notification, we will need to pass title and body as the parameters.

We add event listener to push event. Parse data as a JSON object. Then can self.registration.showNotification method then pass title and body.

self.addEventListener('push', function(e) {
    const data = e.data.json();
    self.registration.showNotification(
        data.title,
        {
            body: data.body,
        }
    );
})

That is all about it!

Let's test notification service.

In this example I will use Google Chrome for testing.

Please make sure that you allow notification on Google Chrome.
If you using Mac it might disabled on the first time. And you will need to enable it.

Go to Notification Center then find the Google Chrome and allow notification. Make sure the Allow Notification enabled.

Start Our Service

Start the app using the command below

npm start

Server started on port 5001

Open your browser and navigate to http://localhost:5001

It should show the push notification permission request dialog. Just click allow.

but in some case it might not show. But have the lock icon in navigation bar. Clicking on it and allow

Then you should get the first notification. (If not refresh the page once)

Congratulations! You did it. That's your first push notification.

Tip: Simulate More Push Notification

We can simulate more push notification that we can receive. Let assume that you still browsing through Google Chrome Right now you can open the Google Chrome DevTool and go to Application tab navigate to ServiceWorker menu.

You will see your worker.js file has been registered there.

Scroll down a bit, you can see the push text box.

Put some test JSON object there and press push button then you can see more notifications. Just enjoy with it.

That's means if you send any more push notification from your web server. It will also appeared on user's browsers as well (as long as they choose to subscribe to your push notification)

Conclusion

We can easily create our push notifications using web-push without using a 3rd party service like Firebase Cloud Messaging (FCM).

By using the new way to provide self hosted push notifications called VAPID (Voluntary Application Server Identity)

Then we create and install Service Worker that interacts after receiving the new push notifications. Showing notification is the choice. The key point is that after you subscribe to web-push successfully, you can receive push data anytime. You might use that information in ways you can't imagine.

Resources

Run Visual Studio Code through the terminal

Weerayut Teja — Thu, 24 Jun 2021 11:41:31 +0000

The easiest way to run VS Code through the terminal is running this command

code .

code dir-name

While dir-name is the directory name that you want to open.

But if you just fresh install VS Code, you can't run it. You will need to VS Code to path environment variable.

Setup through VS Code

Open VS Code then run Command + Shift + P

Then select "Shell Command: Install 'code' command in PATH"

Then it should be fine!

But if you got the error message like this, try the second method

Add code to PATH manually

Run the command below and restart your terminal, then it should be able to run "code" command

cat << EOF >> ~/.zshrc
# Add Visual Studio Code (code)
export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"
EOF

How to Delete All Docker Images Using Powershell

Weerayut Teja — Tue, 25 May 2021 07:05:10 +0000

There are a plenty of Shell Commands on how to delete all docker images in single command.

But really hard to find command for Windows.

Thanks to mastroiannim the contributor in This Gist.

TLDR

docker images -aq | foreach {docker rmi $_ -f}

How it works?

It combines of two commands.

docker images -aq

This command returns ID(s) of all images one ID per line. And we combine with below command to loop throught each line and using Docker Image ID as argument.

foreach {docker rmi $_ -f}

So, we run both two command in the single line.

docker images -aq | foreach {docker rmi $_ -f}

Hope this post has some benefit for you.

Using MongoDB For Free on MongoDB Atlas

Weerayut Teja — Tue, 25 May 2021 03:26:40 +0000

I have the chance to use MongoDB Cloud for my projects and it's very impressive. Because you can start with zero budget and it really enough for the new project. Below are the introduction text from MongoDB Atlas Landing Page

"MongoDB Atlas is the global cloud database service for modern applications. Deploy fully managed MongoDB across AWS, Azure, or GCP. Best-in-class automation and proven practices guarantee availability, scalability, and compliance with the most demanding data security and privacy standards. Use MongoDB's robust ecosystem of drivers, integrations, and tools to build faster and spend less time managing your database."

In this tutorial, I will show you how to create MongoDB Atlas Account and create your very first cluster for using in your application.

Step 1 : Register at MongoDB Atlas

First step you need to create your account at MongoDB Atlas. After create the account, you can start to using it right away.

Step 2 : Create Project

After register, we will be redirected to Project Management Page which we need to create at lease 1 project.

Click at New Project button to get started.

In this tutorial I will use My Project as project name, just for give an example.

If you would like to add another team member, put their emails here, then MongDB Atlas will sending invitation email to them.

But if you are the only one person on this project then better to skip it.

Then click on Create Project button. After create project successfully you will be redirected to Cluster Management Page

Step 3 : Create Cluster

Next, we have to create the cluster.

Cluster just like group of servers which MongoDB will create MongoDB instances as Replica Set. They working together when some of instance failed, another instances still working while that failed instance try to restart in the background. As you can see it has high availability.

Click on Build Cluster button to go to next step.

Select Shared Cluster which is the Free Plan. It has shared RAM and 512MB and it might has no advanced features like auto scaling, auto backup. But it really enough for starter project. You can upgrade it later if needed

Choosing provider, in this tutorial I selected Google Cloud Platform, then choosing Singapore as region. In this case select the proper region depends on your service location.

The other settings just keep it as default value. But you can navigate throught each section to see what you gonna get for this plan.

Then click on Create Cluster button at the bottom of page.

Waiting until the end then you are good to go!

Step 4 : Usage

On the cluster you are created you will see some buttons which we can use for:

Connect Retrieve connection information for your client or application.
Metric Monitoring clustor with nice reporting interface.
Collections Manage collection throught here. You can add and delete collections. Insert/Update/Delete documents here as well. Anyway I suggest you to manage them throught MongoDB Compass instead and you can download it here

Let try to get connection string for our application by click on Connect button.

If we click on Connect Button first time it will asking for create first database user and adding IP Address Whitelist.

If you know exact IP Address for you application you can put it here, anyway for testing purpose I skip it for now.

Then put the first database user info by entering username and password, then click on Create MongoDB User button.

After that click on Choose a Connection Method

This is the final step, choosing connection method.

In this tutorial I selected Connect your application

Select driver and version, in this tutorial I select Java Driver and select version to 3.7 or later.

Then we can see the connection string and also get sample code on how to connect with MongoDB Driver in specified language as well.

Conclusion

MongoDB Atlas is MongoDB as a Service which we can start to use it for free and it enough for get started.

After I use it for my new projects it didn't have any issue and very easy to use. Comparing to the previously that I setup it all on my AWS EC2 Instance. I worked with the command line. Set the replica set, security, users, roles and etc. I use entire day for configuring.

But I can start to use MongoDB in just one hour after create account on MongoDB Atlas. That's so amazing! Why need to reinvent the wheel every projects while you just get started right away?

Nowsaday, we don't need to worry much about infrastructure. It's cheaper and cheaper. Just let provider manage them and we just focus on coding :)

Happy coding!

CSS Trick to Create Hole on HTML Element

Weerayut Teja — Tue, 18 Dec 2018 02:13:50 +0000

Hello guys, in this tutorial I will show you how to create the overlay hole on images background using only CSS3. Let take a look at sample below.

See the Pen Make a Hole on Background Overlay with Pure CSS3 by Weerayut Teja (@wteja) on CodePen.

Okay let get started !

By default there is no option to make a hole on HTML element using CSS3. But we can make something look “similar” to the hole. By create round element and make it use transparent background color and add color to its huge border instead. This is the solution for it (and for now).

First we create a box with background image. I decide to use dummy image from https://placeimg.com as an example.

<div class="container">
    <div class="box">
    </div>
</div>

Then add style to .box to show the background image use placeimg dummy image. I fixed width and height to 600px X 400px.

I set position to relative because I plan to make a hole on top and central of background image.

The key is we must set overflow: hidden; Because we will use it to hide the hole’s border that exceed the .box

.box {
    /* Background */
    background-image: url(https://placeimg.com/640/480/nature);
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    /* Position */
    position: relative; width: 600px; 
    height: 400px; 
    /* Box settings */ 
    overflow: hidden; 
    display: inline-block; 
}

Then to make the overlay with hole without adding additional HTML element. I decided to use ::after pseudo selector instead.

I added some blue background color and move it to center with position: absolue; top: 50%; left: 50%; transform: translate(-50%, -50%); with this technique this element will align to middle of parent element. Don’t forget to add z-index: 2; to make sure it will be floated on top of background image.

Set height to 0, width to 50% and set padding-bottom to 50% as well. So it will be square shape because when we set padding as the percentage, it will reference to parent width. So If we set both width and padding-bottom to the same value we will get square shape element. We don’t need height because we want to reference by parent’s height only.

Then we make it round as the circle by adding border-radius: 50%

The key of “hole” overlay if I let it transparent and has no content. But set a huge border that exceed over the edge of parent element. Let take a look at sample CSS code below. I use 400px border width to make sure it exceed .box edge. I also adding blur effect to .box that also has class .blur to make the hole softer and tender.

.box::before {
    content: "";
    display: block;
    /* Scale */
    width: 50%;
    padding-bottom: 50%;
    /* Position */
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    /* Border */
    border: solid 400px rgba(31, 44, 122, 0.5);
    border-radius: 50%;
}
.box.blur::before {
    filter: blur(20px);
}

Let make it more fun with CSS transition on mouse over. by increase width & padding-bottom on mouse over, and make it smoother with some transition setting. Let see the example below.

See the Pen Zoom Out Hole Background Overlay with Pure CSS3 by Weerayut Teja (@wteja) on CodePen.

I hope this guide will be useful for you. I also hope in nearly future, CSS will be able to make actual hole with ease than we hack it like this. If you have the more recommend solution, please post on the comment box below to let other developers hear about it.

Happy coding!

DEV Community: Weerayut Teja

I Built a Free Prop Firm Risk Calculator --- Here's Why

What it does

It's free, no login required

Why I made this

Managing Multiple SSH Keys for Different Git Hosting Platforms (GitLab & GitHub)

Step 1: Generate SSH Keys for Each Account

Step 2: Add SSH Keys to Git Hosting Platforms

Step 3: Configure SSH to Use Different Keys

Step 4: Clone Repositories Using the Correct SSH Key

Step 5: Update an Existing Repository’s Remote

Step 6: Test Your SSH Connection

Final Thoughts

The Struggle of Finding a Free Excel to PDF Converter: My Journey and Solution

The Frustration

Commercial Tools

Online Services

Open-Source Libraries

Discovering LibreOffice in Headless Mode

How My Solution Works

Key Features

The Temporary Directory Approach

Implementation Details

How It Works

Getting Started

GitHub Repository

Docker Image

Running the Docker Container

Examples of Integrating with Other Languages

C#

Node.js

Python

Go

Challenges and Trade-Offs

Image Size

Why It’s Worth It

Conclusion

การเขียนเทสเพื่อทดสอบโปรเจคแบบ React + Firebase

ประเภทของการเทสต์ที่ควรมีในโปรเจค

การเขียนเทสต์ Firebase ใน React

1. การเทสต์ฟังก์ชันที่ใช้ Firebase API

ตัวอย่างการ Mock Firebase

2. การเทสต์ React Component ที่เชื่อม Firebase

ตัวอย่าง Component และ Hook

เทสต์ Hook ด้วย react-hooks-testing-library

3. การเขียน Integration Test

ตัวอย่างการทดสอบ Firestore ด้วย Mock

4. การเขียน End-to-End Test

การตั้งค่า Firebase Emulator

ตัวอย่าง Cypress Test

สรุป

เพิ่มประสิทธิภาพให้กับ NestJS สำหรับการประมวลผลที่เร็วและมีประสิทธิภาพสูง

How to deal with : Function uuid_generate_v4() does not exist on PostgreSQL

JavaScript Event คืออะไร? และใช้งานอย่างไร?

ประเภทของ Events

Event Listener และ Handler

เขียน Event Handler ได้กี่แบบ?

How To Make Push Notification Using Node.js and Service Worker

Sample Code

Let's Get Started!

Generate VAPID Keys for push notifications

1) Generate from vapidkeys.com

2) Generate by Command Line

Setup the Subscription Route

Create Service Worker to Consume Push Notification

Create Service Worker

Let's test notification service.

Start Our Service

Tip: Simulate More Push Notification

Conclusion

Resources

Run Visual Studio Code through the terminal

Setup through VS Code

Add code to PATH manually

How to Delete All Docker Images Using Powershell

TLDR

How it works?

Using MongoDB For Free on MongoDB Atlas

Step 1 : Register at MongoDB Atlas

Step 2 : Create Project

เทสต์ Hook ด้วย `react-hooks-testing-library`