DEV Community: Md Asaduzzaman

Senior Front-end Engineer — React Syllabus

Md Asaduzzaman — Thu, 17 Sep 2026 08:50:37 +0000

Senior Front-end Engineer — React Syllabus

How to learn fast with these sequence

JavaScript
TypeScript
React Fundamentals
React Architecture
TanStack Query
Zustand / Redux Toolkit
HTML + CSS + Tailwind
Accessibility
Next.js
React Performance
Testing
Vite + Webpack
Design Systems + Storybook
SSR / SSG / RSC
API Contracts + Front-end DX
Advanced React
Capstone Project
Interview Practice

1. Modern JavaScript

ES6+
Async/Await, Promises
Modules
Closures
Destructuring & Spread
Event Loop
DOM & Browser APIs

2. TypeScript

Types & Interfaces
Generics
Utility Types
Union & Intersection Types
Type Narrowing
Type-safe API contracts
Advanced TypeScript

3. HTML & CSS

Semantic HTML
Forms
Responsive Design
Flexbox & Grid
CSS Modules
Tailwind CSS
Cross-browser compatibility

4. Accessibility

WCAG fundamentals
Keyboard navigation
ARIA
Focus management
Screen readers
Accessible forms/components

5. React Fundamentals

Components
Props & State
JSX
Hooks
useEffect
useMemo / useCallback
useRef
Rendering lifecycle
Reconciliation
Component composition

6. React Architecture

Component architecture
Reusable components
Custom hooks
Feature-based architecture
Shared design system
Error boundaries
Forms & validation

7. State Management

Context API
Redux Toolkit
Zustand
Server state vs client state
React Query / TanStack Query
Caching & invalidation
Pagination & optimistic updates

8. Next.js

App Router
Routing
Layouts
Server & Client Components
SSR
SSG
Data fetching
Caching
Middleware
API integration

9. Build Toolchain

Vite
Webpack fundamentals
Environment variables
Code splitting
Tree shaking
Lazy loading
Bundle analysis

10. Performance

Rendering optimization
React.memo
useMemo / useCallback
Code splitting
Lazy loading
Image optimization
Bundle size
Core Web Vitals
Lighthouse

11. Testing

Jest
Vitest
React Testing Library
Unit testing
Component testing
Integration testing
Playwright
E2E testing
Mocking APIs

12. API & Frontend DX

REST API integration
API contracts
Type-safe API clients
Error/loading states
Authentication
Environment configuration
Developer tooling

13. Design Systems

Design tokens
Reusable UI components
Storybook
Component documentation
Figma → React workflow
Versioning & consistency

14. Advanced React

React Server Components
SSR/SSG architecture
Streaming
Suspense
Concurrent rendering
Micro-frontends

15. UI & Visualization

Framer Motion
D3.js fundamentals

16. Senior Engineering Skills

Code review
Refactoring
Frontend architecture decisions
Technical documentation
Mentoring
Strong English communication

17. Capstone Project

Build a production-style React + TypeScript application with:

React + Vite
Next.js
Tailwind
TanStack Query
Zustand/Redux Toolkit
Storybook
Accessible components
Unit + component + E2E tests
Performance optimization
SSR/SSG
CI/CD
API integration

For #JavaScript development using #NodeJS, #NestJS, #React, #Angular, a high-end PC isn't required. However, my system lags when opening multiple tabs in #google #chrome while working. I solved issue, wrote an article to document fix for myself & anyone.

Md Asaduzzaman — Sat, 05 Sep 2026 07:58:53 +0000

Md Asaduzzaman

Sep 5

How I Fixed Ubuntu Freezes and High Swap Usage on an 8GB RAM Laptop

#ai #ubuntu #btop #devops

3 min read

How I Fixed Ubuntu Freezes and High Swap Usage on an 8GB RAM Laptop

Md Asaduzzaman — Sat, 05 Sep 2026 07:37:18 +0000

When opening multiple Chrome tabs alongside my local dev server, my Ubuntu machine regularly froze or stuttered. Swapping between tabs took seconds, and terminal input lagged.

Here is how I traced the issue to swap thrashing and fixed it without buying extra RAM.

The Problem

My laptop has 8 GB of RAM. Under daily development load, Chrome caused severe system lag.

Checking system memory showed heavy pressure:

free -h

               total        used        free      shared  buff/cache   available
Mem:           7.6Gi       5.6Gi       686Mi       1.2Gi       3.0Gi       2.1Gi
Swap:          4.0Gi       697Mi       3.3Gi

Out of 7.6 GiB usable RAM, 5.6 GiB was in use, leaving only 2.1 GiB available. The system pushed 697 MiB into disk swap.

Checking top memory processes revealed the culprit:

ps -eo pid,user,%mem,rss,comm --sort=-%mem | head -n 10

    PID USER     %MEM   RSS COMMAND
   4489 coder     8.3 663660 chrome
   4868 coder     7.5 604032 chrome
   5003 coder     7.3 586812 chrome
 127211 coder     4.6 368332 chrome
   4933 coder     4.4 357628 chrome

Chrome processes consumed 37%+ (~3 GB) of RAM. Combined with 1.2 GiB in shared memory (tmpfs), Ubuntu was forced to write memory pages to slow disk swap, causing UI freezes (swap thrashing).

Prerequisites

Ubuntu 20.04 / 22.04 / 24.04 on an 8 GB RAM setup.
Terminal access with sudo privileges.

Step-by-Step Fix

Step 1: Lower Swappiness

Ubuntu defaults to vm.swappiness=60, which swaps memory pages to disk too aggressively. Lowering it to 10 forces the kernel to prefer physical RAM.

Apply temporarily:

   sudo sysctl vm.swappiness=10

Make it permanent:

   sudo nano /etc/sysctl.conf

Add to the bottom:

   vm.swappiness=10

Apply changes:

   sudo sysctl -p

Step 2: Set Up ZRAM (Compressed RAM Swap)

Instead of swapping to a slow SSD/HDD, ZRAM creates a compressed swap space directly in physical RAM (10x-20x faster than disk swap).

Install zram-tools:

   sudo apt update && sudo apt install zram-tools -y

Edit the config file:

   sudo nano /etc/default/zramswap

Configure allocation and compression algorithm:

   ALGO=zstd
   PERCENT=50

(Note: The configuration key in Ubuntu is ALGO, not ALGORITHM).

Restart the service:

   sudo service zramswap restart

Step 3: Optimize Chrome Settings

Open Chrome and go to chrome://settings/performance.
Turn Memory Saver to On (suspends inactive background tabs).
Go to chrome://settings/system and confirm Use graphics acceleration when available is turned On (offloads rendering to GPU).

Step 4: Install `btop` for Real-Time Monitoring

To track RAM, ZRAM, and process trees visually without complex CLI parameters:

Install btop:

   sudo apt install btop -y

Launch btop:

   btop

Press m inside btop to focus on RAM and swap compression in real time.

Step 5: Flush Slow Disk Swap

Once memory pressure drops, clear old swap data sitting on disk back into RAM:

sudo swapoff -a && sudo swapon -a

Warning: Check free -h first! Only run swapoff if Available RAM is larger than Used Swap (e.g., >1.5 GB available), or the OS will run out of memory and freeze.

Common Pitfall & Solution

System freezes when running `swapoff -a`

Cause: Physical RAM is too full to absorb swapped-out data.
Fix: Kill heavy memory hogs first before resetting swap:

  # Find heavy process IDs
  ps -eo pid,user,%mem,rss,comm --sort=-%mem | head -n 5

  # Terminate top memory hogs
  kill -9 <PID_1> <PID_2>

  # Confirm available memory increased, then reset swap
  sudo swapoff -a && sudo swapon -a

Verification

Verify ZRAM status:

   zramctl

Expected Output:

   NAME       ALGORITHM DISKSIZE DATA COMPR TOTAL STYPE      PRIORITY
   /dev/zram0 zstd          3.8G   4K    59B    12K partition       100

Verify live memory metrics: Run btop or check free -h. You should see Swap Used remain near 0 MB or managed entirely by ZRAM (/dev/zram0).

Key Takeaways

Available RAM > Free RAM: Ignore "Free" memory in Linux; "Available" is what determines whether your apps will lag.
ZRAM is essential for 8GB dev setups: Compressing RAM in-memory eliminates disk I/O bottlenecks without requiring hardware upgrades.
Default swappiness is too high: Dropping vm.swappiness from 60 to 10 stops premature disk swapping.
Shared memory (tmpfs) locks RAM: Always clean unused containers (docker system prune) and temporary files (/tmp) to free shared RAM allocations.

Setting Up a Secure, Passwordless CI/CD Deploy User with `www-data` Permissions

Md Asaduzzaman — Thu, 03 Sep 2026 05:26:56 +0000

When automating web deployments using tools like GitHub Actions, GitLab CI/CD, or Jenkins, your runner needs a dedicated server user to log in and deploy files. However, misconfiguring this user often leads to two major headaches: "Permission Denied" errors from your web server, or critical security vulnerabilities from over-privileged access.This guide will walk you through setting up a dedicated deploy user owned by the www-data group, enabling secure passwordless execution, and fixing file permission bottlenecks before they break your pipeline.

1: Create the User and Configure Group Alignment

Your web server (Nginx/Apache) usually runs as www-data. By adding the deploy user to the www-data group, both entities can manipulate the web files seamlessly.Run these commands as root or an existing administrator:

# 1. Create the deploy user
sudo adduser deploy

# 2. Add the user to the sudo and www-data groups
sudo usermod -aG sudo,www-data deploy

2: Grant Least-Privilege Passwordless Sudo

Giving your CI/CD user unrestricted root access (NOPASSWD: ALL) means a leak in your CI/CD repository gives attackers complete control of your server. Instead, restrict passwordless access strictly to the services your deploy script needs to restart.

Open the sudoers configuration file safely: sudo visudo
Scroll to the very end of the file and append the specific commands your script requires (separated by commas). Always use absolute binary paths:

# Allow deploy user to restart Nginx and reload systemd without a password
deploy ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart nginx, /usr/bin/systemctl daemon-reload

3: Prevent "Permission Denied" Deployment Issues

A common CI/CD pitfall happens when the deploy user uploads a file, and Linux assigns it strict default permissions (644 or 700). Because of this, the web server (www-data) suddenly loses the ability to write to or read that new file.To fix this permanently, configure a shared directory mask and inherit group ownership:

# 1. Change ownership of your web directory
sudo chown -R deploy:www-data /var/www/html

# 2. Set the SetGID bit so new files automatically inherit the 'www-data' group
sudo chmod -R g+s /var/www/html

# 3. Ensure the deploy user creates files that the group can write to
# Open the user's bash profile:
nano /home/deploy/.bashrc

# Append this line at the very bottom:
umask 002

4: Verify the Setup

Test the configuration locally on the server before hooking up your CI/CD pipeline:

# Switch to the deploy user
su - deploy

# Test passwordless access on an allowed command
sudo systemctl restart nginx

# Test passwordless access on a restricted command (Should prompt for password)
sudo systemctl restart sshd

Mastering SSH Config on Ubuntu: Simplify Your Remote Connections

Md Asaduzzaman — Wed, 02 Sep 2026 06:31:18 +0000

Stop typing ssh username@192.168.1.100 -p 2222 -i ~/.ssh/my_key.pem every single time you connect to a server.

With SSH config (~/.ssh/config), you can replace long, cumbersome SSH commands with clean shortcuts like ssh prod or ssh staging.

This guide walks you through setting up and optimizing your SSH configuration file on Ubuntu.

🛠️ Step 1: Create the SSH Config File

SSH is strict about permissions. If your configuration or .ssh folder has overly open permissions, SSH will ignore them for security reasons.

Run the following commands in your terminal:

# Ensure the .ssh directory exists with restricted permissions (700)
mkdir -p ~/.ssh
chmod 700 ~/.ssh

# Create the config file and set read/write permissions for user only (600)
touch ~/.ssh/config
chmod 600 ~/.ssh/config

Open the config file in your favorite text editor:

nano ~/.ssh/config

⚙️ Core Directives Explained

Before jumping into examples, here are the key directives you'll use:

Directive	Description
`Host`	The nickname/alias you use in terminal (e.g., `ssh myserver`).
`HostName`	The real IP address or domain name of the remote server.
`User`	The username on the remote server (e.g., `root`, `ubuntu`).
`Port`	The SSH port on the remote server (default is `22`).
`IdentityFile`	Path to the specific private SSH key for this host.
`IdentitiesOnly`	Forces SSH to use only specified key file, preventing access denied errors when holding multiple keys.

🚀 Practical Examples

1. Basic Host Shortcut

Instead of typing ssh developer@192.168.1.50, set up an alias.

Host dev
    HostName 192.168.1.50
    User developer

Usage:

ssh dev

2. Custom Port & Specific Private Key

For servers running on custom ports (e.g., 2222) using a specific SSH key:

Host staging
    HostName staging.example.com
    User ubuntu
    Port 2222
    IdentityFile ~/.ssh/id_ed25519_staging
    IdentitiesOnly yes

Usage:

ssh staging

3. Bastion / Jump Host (`ProxyJump`)

Connecting to an internal server (e.g., private database server 10.0.0.5) through a publicly exposed Bastion/Jump server:

# Public Bastion Host
Host bastion
    HostName bastion.example.com
    User admin
    IdentityFile ~/.ssh/id_rsa_bastion

# Private Internal Server
Host internal-db
    HostName 10.0.0.5
    User ubuntu
    IdentityFile ~/.ssh/id_rsa_internal
    ProxyJump bastion

Usage:

ssh internal-db

SSH will automatically route your connection through the bastion server!

4. Global Settings & Keep-Alive Pings

Prevent SSH connections from dropping or hanging due to idle timeouts by applying wildcard settings (Host *).

Host *
    ServerAliveInterval 60
    ServerAliveCountMax 3
    AddKeysToAgent yes

ServerAliveInterval 60: Sends a keep-alive signal every 60 seconds.
ServerAliveCountMax 3: Drops connection after 3 unacknowledged signals.
AddKeysToAgent yes: Automatically adds keys to ssh-agent upon connection.

5. Connection Multiplexing (Blazing Fast Re-connections)

Multiplexing reuses an existing SSH connection for new terminal windows, scp, or rsync transfers, eliminating key exchange overhead.

First, create a socket directory:

mkdir -p ~/.ssh/sockets

Then add this block to your ~/.ssh/config:

Host *
    ControlMaster auto
    ControlPath ~/.ssh/sockets/%r@%h:%p
    ControlPersist 10m

💡 Bonus: Auto-Load SSH Keys into `ssh-agent` on Login

Add this snippet to the bottom of your ~/.bashrc (or ~/.zshrc) to ensure ssh-agent is running without starting multiple redundant instances:

# SSH Agent Auto-Start
SSH_ENV="$HOME/.ssh/agent-environment"

function start_agent {
    echo "Initializing new SSH agent..."
    /usr/bin/ssh-agent | sed 's/^echo/#echo/' > "${SSH_ENV}"
    chmod 600 "${SSH_ENV}"
    . "${SSH_ENV}" > /dev/null
    /usr/bin/ssh-add
}

if [ -f "${SSH_ENV}" ]; then
    . "${SSH_ENV}" > /dev/null
    ps -ef | grep ${SSH_AGENT_PID} | grep ssh-agent$ > /dev/null || {
        start_agent;
    }
else
    start_agent;
fi

Reload shell settings:

source ~/.bashrc

📌 Summary Checklist

[ ] Folder permissions: chmod 700 ~/.ssh
[ ] Config file permissions: chmod 600 ~/.ssh/config
[ ] Specific hosts defined before wildcard (Host *) sections
[ ] Tested shortcut with ssh <alias-name>

Happy Coding! 🚀

Ubuntu Expand Swap Space to 4 GB for coolify crash

Md Asaduzzaman — Mon, 31 Aug 2026 03:52:16 +0000

Increasing Swap prevents the server from crashing when memory spikes during builds. Run these commands via SSH on your VPS:

# Turn off existing swap
sudo swapoff -a

# Allocate a 4GB swap file
sudo fallocate -l 4G /swapfile

# Set correct permissions
sudo chmod 600 /swapfile

# Format and activate swap
sudo mkswap /swapfile
sudo swapon /swapfile

# See status
sudo swapon --show

# Verify the new swap size
free -h

Stop Using Slow Language Shims: How to Manage Node, Go, Ruby, and PHP Fast with Mise

Md Asaduzzaman — Fri, 28 Aug 2026 06:42:41 +0000

Efficient Polyglot Development on Ubuntu: Switching from asdf to mise

Managing multiple development runtimes like Node.js, Ruby, PHP, and Go can severely slow down your terminal if you rely on traditional shim-based tools like asdf. This guide provides a modern setup utilizing mise, a blazing-fast, Rust-based development environment manager designed to optimize workflows for polyglot developers on Ubuntu.

Why Mise?

Instant Switching: Modifies your PATH directly, eliminating shim latency.
Unified Config: Manages language versions, environment variables, and tasks inside a single mise.toml.
Full Compatibility: Supports core native backends and works flawlessly with all legacy asdf plugins.

Step-by-Step Setup Guide

1. Install Ubuntu System Dependencies

Ensure your system has the required build essentials and development libraries to compile runtimes like Ruby and PHP from source.

sudo apt update && sudo apt install -y \
  curl git build-essential libssl-dev zlib1g-dev \
  libreadline-dev libyaml-dev libxml2-dev libxslt1-dev \
  libcurl4-openssl-dev libffi-dev pkg-config libsqlite3-dev

2. Install Mise

Download and install the native standalone mise binary.

curl https://mise.jdx.dev/install.sh | sh

3. Activate the Shell Hook

Append the activation hook to your shell configuration so mise updates your environment dynamically on directory changes.

For Bash (Default Ubuntu Shell):

echo 'eval "$(~/.local/share/mise/bin/mise activate bash)"' >> ~/.bashrc
source ~/.bashrc

For Zsh:

echo 'eval "$(~/.local/share/mise/bin/mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc

4. Provision Core Language Runtimes

Install the stable runtime baselines globally.

mise use --global node@lts
mise use --global ruby@latest
mise use --global php@latest
mise use --global go@latest

5. Framework Layer Installation

With your primary runtimes activated, provision the ecosystem-specific global command-line interfaces for your frontend and backend frameworks.

# Node.js Frameworks (NestJS, Angular, Ionic)
npm install -g @nestjs/cli @angular/cli @ionic/cli

# Ruby Framework (Ruby on Rails)
gem install rails

# PHP Framework (Laravel)
composer global require laravel/installer

Project-Level Versioning

To configure a project directory with strict, isolated tool versions, create a mise.toml file in your repository root:

# mise.toml
[tools]
node = "20.11.0"
go = "1.22.0"
php = "8.3.2"
ruby = "3.3.0"

[env]
DATABASE_URL = "postgresql://localhost/my_app"

Whenever you cd into this directory, mise will seamlessly switch to these exact versions.

Generate ssh-key, config and quick access server

Md Asaduzzaman — Mon, 16 Feb 2026 07:13:40 +0000

What we do?

Generate the New SSH Key
Copy the Public Key to the Server
Configure the SSH Client
Test the Connection

At a glance to see Diagram

To Do

1. Generate the New SSH Key (whithout passphrase)

ssh-keygen -t ed25519 -C "your_email@example.com"

2. Copy the Public Key to the Server

ssh-copy-id -i ~/.ssh/id_rsa_deploy.pub server-user@server-ip

Configure the SSH Client

Host deploy-server
    HostName server-ip
    User server-user
    IdentityFile ~/.ssh/id_rsa_deploy
    IdentitiesOnly yes

Test the Connection

ssh deploy-server

(Important): Fix permissions (if SSH refuses key)

Run these on your deployment machine:

chmod 700 ~/.ssh
chmod 600 ~/.ssh/deploy_key
chmod 644 ~/.ssh/deploy_key.pub
chmod 600 ~/.ssh/config

⭐ Bonus Point:

Securely copy file/folder from local to server

File copy from local to server:

scp file_name server_name_prod:/path_of_target_directory

// Example
scp index.html server_name1:/var/www/app1

Folder copy from local to server:

scp -r ./dist/* server_name_prod:/path_of_target_directory

HTTP STATUS CODE, you need to know for API Development

Md Asaduzzaman — Fri, 31 Oct 2025 01:54:21 +0000

HTTP status codes are 3-digit numbers returned by a web server to indicate the result of a client's request/response.

In API development choosing the right codes enhances clarity, debugging, and align with industry standard.

Why it Important?

Automated error handling in client applications
Proper caching behavior by intermediary servers
Meaningful monitoring and alerting in production systems
Better developer experience during integration

The Five Categories (1xx–5xx):

Informational responses (100 – 199)
Successful responses (200 – 299)
Redirection messages (300 – 399)
Client error responses (400 – 499)
Server error responses (500 – 599)

🟦 1xx – Informational

Code	Name	Description	Typical Use
100	Continue	Server has received the headers; client should continue.	Rarely used directly; used in chunked requests.
101	Switching Protocols	Server switches protocols as requested by the client.	WebSocket handshake upgrade.
102	Processing	WebDAV: server is processing but no response yet.	Long-running requests, WebDAV.
103	Early Hints	Suggests headers (like Link) before final response.	Performance optimizations (preload assets).

🟩 2xx – Success

Code	Name	Description	Typical Use
200	OK	Request succeeded; response depends on method.	GET returns resource; POST may return created resource.
201	Created	Resource successfully created.	POST /resources -> response includes Location header.
202	Accepted	Request accepted for processing, not completed.	Async operations queued.
203	Non-Authoritative Information	Returned meta-information modified from origin.	Proxy or transformation scenarios.
204	No Content	Success but no body returned.	Successful DELETE or PUT with no body response.
205	Reset Content	Client should reset the view.	HTML forms reset after a successful request.
206	Partial Content	Partial GET due to Range header.	Resuming downloads, media streaming.
207	Multi-Status	WebDAV; multiple separate responses.	Batch WebDAV operations.
208	Already Reported	WebDAV: members of a DAV binding already reported.	WebDAV multistatus optimization.
226	IM Used	Delta encoding; server fulfilled with a delta.	Rare: HTTP Delta encoding (RFC 3229).

🟨 3xx – Redirection

Code	Name	Description	Typical Use
300	Multiple Choices	Multiple representation options for the resource.	Content negotiation or choices page.
301	Moved Permanently	Resource moved permanently; update bookmarks.	Permanent redirects (SEO-friendly).
302	Found (Temporary Redirect)	Temporary redirect; user-agent may change method.	Temporarily redirecting resources.
303	See Other	Redirect using GET to retrieve result.	After POST, redirect to a GET-able result (PRG pattern).
304	Not Modified	Resource not modified; use cached copy.	Conditional GET with ETag/If-Modified-Since.
305	Use Proxy (deprecated)	Must use the proxy given in Location.	Deprecated — avoid using.
307	Temporary Redirect	Temporary redirect; method and body must not change.	Safer temporary redirect than 302 for non-GET methods.
308	Permanent Redirect	Permanent redirect; method and body preserved.	Permanent redirect that preserves method (replacement for 301).

🟥 4xx – Client Errors

Code	Name	Description	Typical Use
400	Bad Request	Malformed syntax or invalid request.	Validation errors, parse failures.
401	Unauthorized	Authentication required or failed.	Missing/invalid authentication token.
402	Payment Required	Reserved for future use.	Rarely used (some APIs use it for billing).
403	Forbidden	Server understood but refuses to authorize.	Valid auth but insufficient permissions.
404	Not Found	Resource not found.	Wrong URL, missing resource.
405	Method Not Allowed	Method not allowed for resource.	POST used where only GET allowed.
406	Not Acceptable	Content negotiation failed.	Requested content type not supported.
407	Proxy Authentication Required	Client must authenticate with proxy.	Requests through an authenticating proxy.
408	Request Timeout	Server timed out waiting for the request.	Large uploads interrupted or slow clients.
409	Conflict	Request could not be completed because of a conflict.	Versioning conflicts, duplicate unique fields.
410	Gone	Resource permanently removed.	Deleted resources that should not be requested again.
411	Length Required	Content-Length header required.	Servers requiring known-length requests.
412	Precondition Failed	One of the preconditions failed (If-Match, etc.).	Optimistic concurrency control (ETag mismatch).
413	Payload Too Large	Request entity too large.	Large file uploads exceeding limits.
414	URI Too Long	Request URI too long.	Overlong query strings or improperly built URLs.
415	Unsupported Media Type	Unsupported payload media type.	Sending XML to an API that accepts JSON only.
416	Range Not Satisfiable	Invalid Range header value.	Requesting byte ranges outside file length.
417	Expectation Failed	Server cannot meet Expect header.	Rare; related to Expect: 100-continue.
418	I'm a teapot	April Fools' joke (RFC 2324).	Easter-egg; not used in real APIs.
421	Misdirected Request	Server not able to produce response.	Requests routed incorrectly in multi-host setups.
422	Unprocessable Entity	Semantic errors in the request entity.	Validation errors with well-formed JSON.
423	Locked	Resource is locked (WebDAV).	Concurrency controls in WebDAV.
424	Failed Dependency	Operation failed due to earlier failure.	A step in a multi-step request failed.
425	Too Early	Server reluctant to process early data.	Protect against replay attacks (experimental).
426	Upgrade Required	Client should switch protocols.	Require TLS or a different protocol.
428	Precondition Required	Require preconditions (e.g., If-Match).	Prevent lost updates by requiring ETags.
429	Too Many Requests	Rate limiting; client should slow down.	API throttling; include Retry-After header.
431	Request Header Fields Too Large	Headers too large to process.	Oversized cookies or headers.
451	Unavailable For Legal Reasons	Resource unavailable due to legal reasons.	Geo-blocking or court-ordered takedown.

⛔ 5xx – Server Errors

Code	Name	Description	Typical Use
500	Internal Server Error	Generic server error.	Unhandled exceptions, server crashes.
501	Not Implemented	Server does not support requested functionality.	Feature not implemented on server.
502	Bad Gateway	Invalid response from upstream server.	Reverse proxy or gateway error.
503	Service Unavailable	Server overloaded or down for maintenance.	Temporary downtime; include Retry-After.
504	Gateway Timeout	Upstream server timed out.	Slow upstream service causing timeout.
505	HTTP Version Not Supported	HTTP version not supported by server.	Rare in modern APIs.
506	Variant Also Negotiates	Server configuration error in content negotiation.	Rare; indicates misconfiguration.
507	Insufficient Storage	WebDAV: insufficient storage.	Servers running out of storage for the request.
508	Loop Detected	WebDAV: infinite loop detected.	Misconfigured resource references.
509	Bandwidth Limit Exceeded (non-standard)	Informational; not an official status.	Some servers/providers use this for bandwidth caps.
510	Not Extended	Further extensions required to fulfill request.	Rare; extension negotiation needed.
511	Network Authentication Required	Client needs to authenticate to gain network access.	Captive portal or network auth required.

Conclusion:

HTTP status codes are not just numbers—they are a language between the front-end and back-end. A well-designed API should use them properly to communicate intent, success, or failure. This improves both developer experience and debuggability.

Why Angular? Kickstart Your Journey in 2025

Md Asaduzzaman — Thu, 02 Oct 2025 01:56:07 +0000

Why Angular? Kickstart Your Journey in 2025

Angular is not just another JavaScript framework—it’s a complete ecosystem for building modern web and mobile applications.

If you’re looking to level up as a developer in 2025, Angular gives you the tools, structure, and scalability you need.

What We’ll Cover

Why Angular is worth learning in 2025
How Angular sets you apart as a developer
The bonus: one skill for both web and mobile (Ionic)
A quick "Hello Angular" example

Why Angular?

Complete Framework: Everything you need—routing, forms, HTTP, state, testing—is built-in.
Enterprise Ready: Trusted by Google and used in large-scale apps worldwide.
Scalable by Design: From small projects to enterprise solutions, Angular’s modularity shines.
Consistent Updates: Angular 20 (latest version) brings modern features like zoneless apps and performance boosts.
One Skill, Two Platforms: Learn Angular once, and you can build web apps and hybrid mobile apps with Ionic.

Quick Example: Hello Angular Component

Here’s how simple it is to create your first Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello Angular </h1>`
})
export class HelloComponent {}

Conclusion

Angular is more than a framework—it’s a career investment.
Whether you’re building enterprise web apps or mobile apps with Ionic, Angular keeps you future-proof in 2025 and beyond.

📌 Next article in the series: Project Setup & Clean Folder Structure

Deep learning about DNS records!

Md Asaduzzaman — Mon, 22 Sep 2025 09:21:56 +0000

🌍 DNS & VPS Setup Guide (Example: `plabonasad.xyz`)

When you purchase a domain and a VPS hosting, you need to connect them.

This is done using DNS records and configuring your VPS (like Nginx/Apache).

This guide is brief, step-by-step, and developer-friendly.

📖 Quick Overview: DNS Records

DNS is like the phonebook of the internet.

It tells the browser or mail server where to go when someone uses your domain.

Common DNS Records

Record	Purpose	Example
A	Points domain → IPv4 address	`plabonasad.xyz → 123.45.67.89`
AAAA	Points domain → IPv6 address	`plabonasad.xyz → 2606:4700:4700::1111`
MX	Directs emails → mail server	`@ MX 10 mail.google.com`
CNAME	Points domain → another domain	`www → plabonasad.xyz`
TXT	Stores text (for verification & security)	`"v=spf1 include:_spf.google.com ~all"`

👉 For website setup, the A record is the most important (connects your domain → VPS IP).

🚀 Step 1: Get Your VPS Public IP

Example: 123.45.67.89

🚀 Step 2: Set DNS Records

Go to your domain registrar DNS settings (where you bought plabonasad.xyz).

Add the following records:

Type	Name	Value	Purpose
A	@	123.45.67.89	Root domain → VPS
A	www	123.45.67.89	www → VPS

👉 This means:

plabonasad.xyz → goes to your VPS
www.plabonasad.xyz → goes to your VPS

🌍 Overview Flow (Diagram)

User Browser (plabonasad.xyz)
          |
          v
   DNS Lookup (A Record → 123.45.67.89)
          |
          v
       VPS Server
          |
          v
      Nginx/Apache
          |
          v
     Your Website

🚀 Step 3: Configure Nginx on VPS

SSH into your VPS:

ssh username@123.45.67.89

Create a config for your domain:

sudo nano /etc/nginx/sites-available/plabonasad.xyz

Copy nginx config code:

# Redirect everything to https://plabonasad.xyz
server {
    listen 80;
    server_name www.plabonasad.xyz;
    return 301 https://plabonasad.xyz$request_uri;
}

# Main site (canonical domain)
server {
    listen 80;
    server_name plabonasad.xyz;

    root /var/www/app1/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

Enable the site by symlink:

sudo ln -s /etc/nginx/sites-available/plabonasad.xyz /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Step 4: Test DNS

Check if your domain points to the VPS:

dig plabonasad.xyz

Or use dnschecker.org

Step 5: Secure with SSL (Optional but Recommended)

Install Certbot:

sudo apt install certbot python3-certbot-nginx -y

Run:

sudo certbot --nginx -d plabonasad.xyz -d www.plabonasad.xyz

Now your site will load with HTTPS 🔒.

Final Notes

A record connects domain → server IP
Nginx/Apache serves the website from VPS
SSL (Certbot) secures with HTTPS
Other records (MX, CNAME, TXT) are useful for email & verification

Now when someone types plabonasad.xyz, they’ll reach your VPS-hosted site 🎉.

Redis Basics – Getting Started and Core Data Structures

Md Asaduzzaman — Thu, 18 Sep 2025 02:13:40 +0000

Redis is more than just a cache—it’s a powerful in-memory data store that supports real-time apps, queues, leaderboards, and more.

In this beginner-friendly guide, we’ll cover how to:
✅ Set up Redis locally or with Docker
✅ Use Redis CLI for quick testing
✅ Work with core data structures (Strings, Hashes, Lists, Sets, Sorted Sets)

🚀 Setup & Basics
Start Redis

Start Redis (local)

redis-server

Run with Docker
docker run --name redis -p 6379:6379 -d redis

Open Redis CLI
redis-cli

Test Connection

PING
# PONG

📦 Core Data Structures
🔹 Strings

SET name "Asad"
GET name
INCR counter

Use cases: counters, sessions, caching simple values.

Diagram:

key    →   value
----------------
name   →   "Asad"
counter →   1

🔹 Hashes

HSET user:1 name "Asad" age "25"
HGETALL user:1

Use cases: store JSON-like objects (e.g., user profiles).

Diagram:

user:1
 ├── name → "Asad"
 └── age  → "25"

🔹 Lists

LPUSH tasks "task1"
RPUSH tasks "task2"
LPOP tasks

Use cases: queues (FIFO), stacks (LIFO).

Diagram (FIFO Queue):

[ task1 ] → [ task2 ] → [ task3 ]

🔹 Sets
SADD tags "redis" "database" "cache"
SMEMBERS tags

Use cases: unique collections (tags, categories, followers).

Diagram:

tags = { "redis", "database", "cache" }

🔹 Sorted Sets
ZADD scores 100 "Asad" 200 "Plabon"
ZRANGE scores 0 -1 WITHSCORES

Use cases: leaderboards, rankings, priority queues.

Diagram:

+------+---------+
|User | Score |
+------+---------+
|Asad | 100 |
|Plabon| 200 |

✅ Wrap-Up

That’s the foundation of Redis. With just a few commands, you can build counters, queues, and ranking systems.

👉 In the next article, we’ll go deeper into advanced Redis concepts like Pub/Sub, Streams, persistence, clustering, and real-world AI use cases.

DEV Community: Md Asaduzzaman

Senior Front-end Engineer — React Syllabus

Senior Front-end Engineer — React Syllabus

How to learn fast with these sequence

1. Modern JavaScript

2. TypeScript

3. HTML & CSS

4. Accessibility

5. React Fundamentals

6. React Architecture

7. State Management

8. Next.js

9. Build Toolchain

10. Performance

11. Testing

12. API & Frontend DX

13. Design Systems

14. Advanced React

15. UI & Visualization

16. Senior Engineering Skills

17. Capstone Project

For #JavaScript development using #NodeJS, #NestJS, #React, #Angular, a high-end PC isn't required. However, my system lags when opening multiple tabs in #google #chrome while working. I solved issue, wrote an article to document fix for myself & anyone.

How I Fixed Ubuntu Freezes and High Swap Usage on an 8GB RAM Laptop

How I Fixed Ubuntu Freezes and High Swap Usage on an 8GB RAM Laptop

The Problem

Prerequisites

Step-by-Step Fix

Step 1: Lower Swappiness

Step 2: Set Up ZRAM (Compressed RAM Swap)

Step 3: Optimize Chrome Settings

Step 4: Install btop for Real-Time Monitoring

Step 5: Flush Slow Disk Swap

Common Pitfall & Solution

System freezes when running swapoff -a

Verification

Key Takeaways

Setting Up a Secure, Passwordless CI/CD Deploy User with `www-data` Permissions

1: Create the User and Configure Group Alignment

2: Grant Least-Privilege Passwordless Sudo

3: Prevent "Permission Denied" Deployment Issues

4: Verify the Setup

Mastering SSH Config on Ubuntu: Simplify Your Remote Connections

🛠️ Step 1: Create the SSH Config File

⚙️ Core Directives Explained

🚀 Practical Examples

1. Basic Host Shortcut

2. Custom Port & Specific Private Key

3. Bastion / Jump Host (ProxyJump)

4. Global Settings & Keep-Alive Pings

5. Connection Multiplexing (Blazing Fast Re-connections)

💡 Bonus: Auto-Load SSH Keys into ssh-agent on Login

📌 Summary Checklist

Ubuntu Expand Swap Space to 4 GB for coolify crash

Stop Using Slow Language Shims: How to Manage Node, Go, Ruby, and PHP Fast with Mise

Efficient Polyglot Development on Ubuntu: Switching from asdf to mise

Why Mise?

Step-by-Step Setup Guide

1. Install Ubuntu System Dependencies

2. Install Mise

3. Activate the Shell Hook

4. Provision Core Language Runtimes

5. Framework Layer Installation

Project-Level Versioning

Generate ssh-key, config and quick access server

What we do?

At a glance to see Diagram

To Do

1. Generate the New SSH Key (whithout passphrase)

2. Copy the Public Key to the Server

(Important): Fix permissions (if SSH refuses key)

⭐ Bonus Point:

Securely copy file/folder from local to server

HTTP STATUS CODE, you need to know for API Development

Why it Important?

🟦 1xx – Informational

🟩 2xx – Success

🟨 3xx – Redirection

🟥 4xx – Client Errors

⛔ 5xx – Server Errors

Conclusion:

Step 4: Install `btop` for Real-Time Monitoring

System freezes when running `swapoff -a`

3. Bastion / Jump Host (`ProxyJump`)

💡 Bonus: Auto-Load SSH Keys into `ssh-agent` on Login

🌍 DNS & VPS Setup Guide (Example: `plabonasad.xyz`)