DEV Community: Abdullah Al Jahid

Online multiplayer with no game server: WebRTC invite links and a browser as referee

Abdullah Al Jahid — Thu, 05 Nov 2026 14:40:41 +0000

PlayTrova is a free games site I run as a fully static Next.js site, with no backend at all. I still wanted the board games to have the one feature families actually ask for: send a link, play together. No accounts, no lobby, and no server to pay for or keep alive.

Today 12 of the turn-based games, including Checkers, Four in a Row, Reversi and Sea Battle, can be played online that way. Here's how it works, including the parts I'd change if people were playing for prizes.

Transparency note: PlayTrova is built with an AI coding assistant (Claude Code) doing much of the implementation, and this article was written with AI too. The code excerpts are trimmed from the live site.

The shape of it

Two browsers talk directly over a WebRTC data channel. The only outside help they need is signalling: a way to find each other and swap connection details. PeerJS provides that through a free hosted server. After the handshake, game messages go straight from one browser to the other.

The room code is the host's peer ID:

const PREFIX = "playtrova-v1-";
// no 0/O or 1/I/L: codes get read out loud and typed on phones
const ALPHABET = "ABCDEFGHJKMNPQRSTUVWXYZ23456789";
export const newRoomCode = () =>
  Array.from({ length: 6 }, () => ALPHABET[Math.floor(Math.random() * ALPHABET.length)]).join("");

The host opens new Peer(PREFIX + code) and waits. The invite link is just /games/checkers/?join=K7QX2M: the friend's page sees join, creates an anonymous peer and calls peer.connect(PREFIX + code). The host also shows the link as a QR code, which is handy when two people are sitting together with two phones.

Why it's mostly easy: the games are deterministic

As I described in an earlier post, every turn-based game here is pure logic: init(config, seed) plus apply(state, move), with all randomness coming from a seed stored in the state. That makes the networking almost boring:

The host picks the seed and who moves first, and sends them once.
After that, each side only sends its own moves, as short strings: "3" for a Four in a Row column, "22-15-8" for a Checkers double jump.
Dice don't travel either. In Lucky Lanterns, "roll" is the move, and the face comes from the seed in the state, so both browsers roll the same die.

The whole protocol is one union type:

type NetMsg =
  | { t: "hello"; gameId: string; v: 1; avatar: string }
  | { t: "start"; round: number; seed: number; variant?: string; hostSeat: 0 | 1 }
  | { t: "move"; seq: number; m: string }
  | { t: "sync"; round: number; seed: number; variant?: string; hostSeat: 0 | 1; moves: string[] }
  | { t: "syncreq" }
  | { t: "emoji"; e: string }
  | { t: "rematch" };

hello checks that both pages opened the same game. start begins a round, and the host swaps seats every round so the first move alternates. rematch is the guest asking the host to start another one.

Never trust the other browser

Anything arriving on the data channel could be anything, so it goes through a strict parser before the game sees it. Wrong shape, too long or unknown type: dropped.

case "move":
  return isInt(m.seq) && isStr(m.m, 32) ? { t: "move", seq: m.seq, m: m.m } : null;
case "emoji":
  return EMOJIS.includes(m.e) ? { t: "emoji", e: m.e } : null;

That emoji line is also the entire chat system: six reactions (👋 👏 😂 😮 😅 🔥) and no free text. On a family site that's a feature, and checking on receive means a modified client can't push arbitrary text onto the other screen.

Then every move is checked against the rules. Both sides do this, so the guest checks the host's moves too:

const applyRemote = (encoded: string, seq: number) => {
  const cur = stRef.current;
  if (seq < cur.moves.length) return "dup";    // already have it
  if (seq > cur.moves.length) return "desync"; // we missed something
  const who = game.current(cur.s);
  if (seats[who] !== "remote" || !isLegal(game, cur.s, encoded)) return "illegal";
  commit(encoded, who);
  return "ok";
};

const isLegal = (game, s, encoded) => game.moves(s).some((m) => game.encode(m) === encoded);

The sequence number is simply the move's index in the game's move list. That one integer handles duplicates, ordering and gaps.

Reconnecting is "send me the move list again"

Phones lock, Wi-Fi blips, someone switches apps to answer a message. Because state is just seed plus moves, recovery doesn't need snapshots:

If the guest receives a move whose seq is ahead of what it has, it replies syncreq.
The host answers with sync: the round's seed, seats and full move list.
The guest rebuilds the board by replaying the moves from scratch. In React, the board component is keyed on the round and a sync counter, so a sync simply remounts it with initialMoves.

On the host side, a returning friend just connects again with the same room code. The new connection replaces the old one, and its hello triggers a sync:

peer.on("connection", (c) => {
  conn?.close(); // a reconnecting friend replaces the old connection
  conn = c;
  wire(c, handlers);
});
peer.on("disconnected", () => {
  if (!peer.destroyed) peer.reconnect(); // lost the signalling server, not the game
});

That last handler matters. PeerJS can lose its connection to the signalling server while the peer-to-peer channel carries on, and until it reconnects, nobody can find the host. Without reconnect(), a friend who drops out can never get back in.

The small UX things that made it usable

Friendly errors. PeerJS errors come with a type, and each one maps to a sentence a parent understands. peer-unavailable becomes "That room isn't open any more. Ask your friend for a new link."
A join timeout. If nothing connects within 20 seconds, the guest gets a clear message instead of an endless spinner.
A way out. If connecting fails, the screen offers "Try again" and "Play on this device instead", because some networks simply won't connect peer to peer (more on that below). If the line drops mid-game, the guest gets a Reconnect button and the host waits for them.
"Keep this page open." The host sees this while waiting, because the host's tab is the server.

The trade-offs, honestly

This design is cheap and simple because it trusts the people playing. That's fine for friends and family. It wouldn't be fine for ranked play or prizes.

It's not cheat-proof. Both browsers hold the full game state. In Sea Battle, both fleets are placed from the shared seed, and the board only hides your friend's ships on screen, so anyone with devtools could find them. The host also picks the seed, so a determined host could hunt for a lucky one. A real fix needs a server that deals each player only their own view.
Some networks block it. Strict school or office networks can stop a direct WebRTC connection. I don't run my own relay (TURN) server, so those players get the "play on this device" fallback.
The host is the referee. If the host closes the tab, the game ends. There's no host migration.
Signalling is borrowed. The free PeerJS server makes no uptime promise. Self-hosting PeerServer would be a small swap if it ever becomes a problem.
Two players online. Some games take up to six players on one device, but online play is one-to-one for now.

For a free site with no accounts, I'm happy with that list. The networking layer is about 150 lines plus a 300-line React panel, and it costs nothing to run.

Try it

Pick any game on the online games with friends page, choose vs Friend, then invite with a link. Or open the link in a second browser window to watch both sides at once.

I'd love to hear how the connection behaves on your network, especially if you're behind something strict.

How to build a daily challenge that's the same for every player, with no server

Abdullah Al Jahid — Mon, 26 Oct 2026 16:40:54 +0000

Wordle made the "everyone gets the same puzzle today" idea famous. The nice surprise is that you don't need a backend for it. If your game logic is deterministic, the date itself can be the source of the puzzle.

On PlayTrova, a free family games site, every game has a daily solo challenge built this way: today's Lucky Lanterns dice rolls, today's Mosha Zap mosquito swarm and today's Checkers puzzles are identical for every player in the world. The site is fully static, so there's no database deciding what "today" contains.

Note: PlayTrova was built with an AI coding assistant, and this article was drafted with its help.

Here's the whole recipe in four small pieces.

1. Agree on what "today" means

Players live in different time zones, so pick one clock. UTC is the simplest:

/** UTC date key, e.g. "2026-10-26". */
export const todayKey = (d = new Date()) => d.toISOString().slice(0, 10);

Everyone's daily switches at the same moment (midnight UTC), and the key doubles as a label for share text and saved results.

2. Turn the date into a number

A seeded random generator needs a 32-bit seed, so hash the string. Mixing the game id in means two games never share a seed on the same day:

/** Stable 32-bit string hash. */
export function hashStr(s: string): number {
  let h = 1779033703 ^ s.length;
  for (let i = 0; i < s.length; i++) {
    h = Math.imul(h ^ s.charCodeAt(i), 3432918353);
    h = (h << 13) | (h >>> 19);
  }
  return h >>> 0;
}

/** Seed for a game's daily challenge. */
export const dailySeed = (gameId: string, key = todayKey()) =>
  hashStr(`${gameId}:${key}:pt1`);

The :pt1 suffix is a version tag. If you ever change how puzzles are generated, bump it and nobody gets a half-old, half-new puzzle.

3. Use a seedable PRNG instead of Math.random

Math.random() can't be seeded, so every player would get something different. mulberry32 is tiny, fast and good enough for games:

export function mulberry32(seed: number): () => number {
  let a = seed | 0;
  return () => {
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

const rng = mulberry32(dailySeed("lucky-lanterns"));
rng(); // same sequence for everyone today

4. Keep the game logic deterministic

This is the part that actually takes discipline. If anything inside the game logic calls Math.random() or Date.now(), two players drift apart after a few moves. On PlayTrova the rule is simple: turn-based game logic is pure, and randomness comes only from a seed stored in the game state. A test makes the guarantee explicit:

it("gives everyone the same daily puzzles", () => {
  expect(dailyPuzzles(dailySeed("checkers", "2026-10-22")))
    .toEqual(dailyPuzzles(dailySeed("checkers", "2026-10-22")));
  expect(dailyPuzzles(dailySeed("checkers", "2026-10-23")))
    .not.toEqual(dailyPuzzles(dailySeed("checkers", "2026-10-22")));
});

For puzzles you also want "solvable" to be guaranteed, so generate candidates from the seed and have a solver check each one, in a test that runs over many dates.

The payoff: sharing without a backend

Because everyone played the same thing, results are comparable, and a share string is all you need. Lucky Lanterns shares a little grid of 🏮 banked and 💨 gusted turns, Wordle-style. Paste it in a group chat and your friends know exactly what you're bragging about.

What you give up: there's no global leaderboard (that needs a server) and a determined player can peek at tomorrow by changing their clock. For a family games site, that trade-off is fine.

Try it

Today's challenges for every game are on the PlayTrova daily page. If you've built something similar, I'd love to hear how you handled time zones and puzzle quality.

How I built 17 browser games as a fully static Next.js site (no backend)

Abdullah Al Jahid — Mon, 26 Oct 2026 16:26:04 +0000

I wanted a games site my whole family could use: free, no sign-up, no backend to babysit, and every game playable three ways — solo, against the computer, or with a friend on the same screen.

The result is PlayTrova: 17 browser games (board games, puzzles, racing and math games) served as a fully static Next.js site on Cloudflare Pages. Here's how it's put together, and a few things I learned along the way.

Transparency note: I built PlayTrova with an AI coding assistant (Claude Code) doing much of the implementation, and this write-up was drafted with its help too. The architecture choices and the lessons below are real — the site is live, so you can poke at all of it.

The core idea: a game is pure logic, a mode is just who fills each seat

Every turn-based game implements the same small contract:

export interface TurnGame<S, M> {
  init(cfg: GameConfig, seed: number): S;
  current(s: S): Seat;          // whose turn
  moves(s: S): M[];             // legal moves
  apply(s: S, m: M): S;         // pure: returns a new state
  status(s: S): Status;         // playing | win | draw
  encode(m: M): string;         // moves travel as short strings
  decode(x: string): M;
  view?(s: S, seat: Seat): S;   // hide what a seat must not see (memory cards)
}

No Math.random, no Date.now inside game logic — randomness comes from a seed stored in the state. That one rule pays off everywhere:

Modes are free. Solo, vs Computer and vs Friend are the same game with different things sitting in the seats: a local human, an AI, or a second local human.
Saves, undo and replays are just { seed, config, moves[] }. Replay the moves and you get the exact same state.
Daily challenges are the same for everyone. The date is hashed into a seed, so every player in the world gets today's identical puzzle, dice rolls or mosquito swarm.

/** Small, fast, seedable PRNG. */
export function mulberry32(seed: number): () => number {
  let a = seed | 0;
  return () => {
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

It also makes the logic very testable: the project has 744 Vitest tests, most of them plain "apply these moves, expect this state" checks.

The computer opponents live in a Web Worker

Board-game AI is a generic iterative-deepening alpha-beta search with a time budget, running in a Web Worker so the page never freezes. Each game only supplies an evaluation function.

Difficulty isn't just search depth. Every game has the same four characters — Rookie Robo, Clever Cat, Sly Fox and Grandmaster Owl — and each one is a profile: depth, time budget, how often it blunders, and for real-time games a reaction delay and aim error. Kids care far more about "I beat the fox!" than about "Hard mode".

Online play without a server

Turn-based games can also be played online with an invite link. There's no game server: two browsers connect peer-to-peer over WebRTC (PeerJS handles the signalling), the host's browser is the referee, and both sides validate every move. Because moves are short strings and the logic is deterministic, reconnecting is just "send me the move list again".

Real-time games share the same shell

Not everything is turn-based. Turbo Trails is a pseudo-3D racer, Snap Duel is a reflex party game, and Mosha Zap has you swinging an electric racket at mosquitoes in a Bangladeshi bedroom (load shedding included). These run their own simulation loop with canvas rendering on top, and their daily solo challenges still come from the date seed, so everyone races today's trail or faces today's swarm. The split-screen modes track each finger by its pointer id, so two kids can play on one tablet.

Fully static, on purpose

output: "export" means next build writes plain HTML/JS, and Cloudflare Pages serves it for free. Each game page is a server-rendered page (title, rules, strategy tips, FAQ, JSON-LD) with the playable area loaded lazily on the client. Progress, stars and streaks live in localStorage — no accounts.

Two gotchas worth knowing if you do the same:

1. Unknown dynamic routes in dev. With output: "export", next dev throws a "missing param in generateStaticParams()" error for a mistyped slug instead of rendering your 404 page. The fix is to only export in real builds:

import { PHASE_DEVELOPMENT_SERVER } from "next/constants";

export default function config(phase: string): NextConfig {
  return {
    output: phase === PHASE_DEVELOPMENT_SERVER ? undefined : "export",
    trailingSlash: true,
    images: { unoptimized: true },
  };
}

With dynamicParams = false on the route, dev now shows the real 404 page, and production still serves 404.html for unknown paths.

2. Don't stamp your sitemap with the build time. My first sitemap set lastModified: new Date() on every URL, so every deploy claimed that every page had changed. Google ignores lastmod when it isn't trustworthy, so now only pages with a real edit date (the guides) carry one.

Shipping the same games to itch.io

I also wanted the original games on itch.io, which prefers games uploaded as self-contained HTML5 zips. Rather than maintain a second codebase, a small Vite config builds a single game straight out of the Next.js source:

next/link and next/navigation are aliased to tiny shims, so links to the rest of the site open in a new tab instead of navigating the iframe.
A virtual module replaces the "load any game" registry with a loader for just that one game, so each zip only contains what it needs.
base: "./" keeps every asset path relative, because itch.io serves the game from a sub-folder.

One npm run itch builds all six originals, zips them with forward-slash paths (itch.io's servers are Linux), and renders a 630×500 cover for each.

Try it

All games — no sign-up, works on phones and tablets
Originals worth a look: Tilt Four (four in a row, but you can tilt the whole board once), Lucky Lanterns (push-your-luck dice race to 100) and Math Race (first right answer scores)

I'd love feedback — especially on the AI difficulty curve and how the split-screen modes feel on your devices.

Stop Using chmod 777: A Developer's Guide to Linux File Permissions

Abdullah Al Jahid — Sat, 09 May 2026 16:59:36 +0000

Last month, a friend's side project got hacked. The attacker uploaded a PHP shell through a file upload form and executed it. The root cause? Every directory on the server was set to chmod 777.

He told me:

"I kept getting permission denied errors during deployment, so I just 777'd everything."

Sound familiar? Let's fix that.

What chmod Actually Does

chmod (change mode) controls who can read, write, and execute files on Linux. Every file has three permission sets:

Owner — the user who created the file
Group — users in the file's group
Others — everyone else

Each gets a combination of:

Permission	Symbol	Value	Meaning
Read	`r`	4	View contents
Write	`w`	2	Modify/delete
Execute	`x`	1	Run as program
None	`-`	0	No access

Add the values to get each digit. So 7 = 4+2+1 (rwx), 5 = 4+1 (r-x), 4 = 4 (r--).

Three digits = owner, group, others. That's it. That's the whole system.

The chmod Cheat Sheet You'll Actually Use

Here's what you need 90% of the time:

chmod 755 script.sh        # Scripts & directories
chmod 644 index.html       # Regular files (HTML, CSS, images)
chmod 600 .env             # Secrets (SSH keys, credentials)
chmod 700 ~/.ssh/          # Private directories

What each one means:

755 (rwxr-xr-x) - Owner can do everything. Everyone else can read and execute but not modify. Use for:

Shell scripts
Directories
Application binaries

644 (rw-r--r--) - Owner can read/write. Everyone else read-only. Use for:

HTML, CSS, JS files
Configuration files (non-secret)
Images and static assets

600 (rw-------) - Owner only. Nobody else can even read the file. Use for:

.env files
SSH private keys (~/.ssh/id_rsa)
Database credentials
API tokens

700 (rwx------) - Like 600 but with execute (for directories). Use for:

~/.ssh/ directory
Home directories
Private application folders

I built a free interactive chmod calculator that lets you toggle permissions visually and see the numeric + symbolic notation in real time. Useful when you can't remember if you need 644 or 755.

Why chmod 777 Is Dangerous

777 means everyone can read, write, and execute. Here's why that's a problem:

chmod 777 /var/www/html/

What you think happens: "My deployment script stops getting permission errors."

What actually happens:

Any user on the system can modify your files
A web server vulnerability lets attackers write to your directories
Uploaded files can be executed as code
Attackers can replace your files with malicious versions

Real-world attack flow:

1. Attacker finds file upload endpoint
2. Uploads malicious.php (or .sh, .py, etc.)
3. Because directory is 777, the file is writable AND executable
4. Attacker visits malicious.php → full server access
5. Game over

If the directory was 755, the uploaded file would be owned by the web server user but not executable by default. The attack chain breaks.

Symbolic Mode: The Safer Way to Change Permissions

Instead of setting all permissions at once (numeric), you can add/remove specific ones:

# Add execute permission for owner only
chmod u+x deploy.sh

# Remove write from group and others
chmod go-w config.yml

# Add read for everyone
chmod a+r README.md

# Remove all permissions from others
chmod o-rwx secret.key

Why this is safer: chmod u+x script.sh only adds execute for the owner. It doesn't touch group or others permissions. With numeric mode, you have to know and set ALL permissions at once.

# These do the same thing, but symbolic is clearer:
chmod 755 script.sh          # What was it before? Who knows.
chmod u+x script.sh          # Just adding execute for owner. Clear.

Common Scenarios with Exact Commands

Deploying a web app

# Set directory permissions
find /var/www/myapp -type d -exec chmod 755 {} \;

# Set file permissions
find /var/www/myapp -type f -exec chmod 644 {} \;

# Make scripts executable
chmod 755 /var/www/myapp/scripts/*.sh

# Lock down .env
chmod 600 /var/www/myapp/.env

Setting up SSH keys

chmod 700 ~/.ssh/
chmod 600 ~/.ssh/id_rsa          # Private key (SSH REQUIRES this)
chmod 644 ~/.ssh/id_rsa.pub      # Public key
chmod 600 ~/.ssh/authorized_keys
chmod 644 ~/.ssh/known_hosts

SSH will refuse to use your key if the private key has permissions looser than 600. This is intentional - it's protecting you.

Not sure what your current numeric permission translates to?
Paste the number into the ToolZip Chmod Calculator to see
the exact read/write/execute breakdown.

Docker volumes

# Container needs read/execute on the mounted directory
chmod -R 755 ./docker-data/

# But secrets inside should be locked down
chmod 600 ./docker-data/certs/*.pem

CI/CD pipeline

# Make all scripts in your pipeline executable
chmod +x ./scripts/*.sh
chmod +x ./hooks/pre-commit

Quick Security Audit

Run these commands on your server right now:

# Find all 777 files (fix every single one)
find / -perm -777 -type f 2>/dev/null

# Find all 777 directories
find / -perm -777 -type d 2>/dev/null

# Find SUID files (programs that run as root)
find / -perm -4000 -ls 2>/dev/null

# Check your web root specifically
ls -la /var/www/

If find / -perm -777 returns anything in your web root, fix it immediately.

The Permission Decision Flowchart

When you're not sure what permission to use:

Is it a secret (passwords, keys, tokens)?
  → 600

Is it a directory?
  → 755 (or 700 if private)

Is it an executable script?
  → 755

Is it a regular file?
  → 644

Should nobody but the owner access it?
  → 600 (file) or 700 (directory)

Are you tempted to use 777?
  → Stop. Use 755 and fix the actual problem.

Tools That Help

ToolZip Chmod Calculator - Toggle permissions visually, see numeric + symbolic notation, common presets for quick reference
ToolZip Hash Generator - Verify file integrity after permission changes with MD5/SHA-256 checksums
ToolZip Cron Expression Generator - Schedule automated permission audits with cron jobs
ls -la - Your best friend for checking current permissions
stat filename - Detailed file information including permissions in octal

TL;DR

Use Case	Permission	Command
Regular files	644	`chmod 644 file.html`
Scripts & directories	755	`chmod 755 script.sh`
Secrets & credentials	600	`chmod 600 .env`
Private directories	700	`chmod 700 ~/.ssh/`
Never in production	~~777~~	Don't.

What To Do Right Now

If you're running a Linux server, SSH into it and run this:

find / -perm -777 -type f 2>/dev/null | head -20

If that returns anything — especially in /var/www/ — you have a
problem. Fix it with the permission values from the cheat sheet
above before someone else finds it first.

Stop chmod 777-ing everything. Use 755 for scripts and directories, 644 for files, 600 for secrets. That covers 95% of cases.

If you want to play around with permissions without risk, try the chmod calculator - toggle checkboxes and see exactly what each number means.

Originally published at toolzip.xyz/blog/chmod-permissions-explained

MUST USE VSCODE EXTENSIONS

Abdullah Al Jahid — Tue, 31 May 2022 19:05:36 +0000

What is VS Code Extensions?

Extensions are add-ons that allow you to customize and enhance your experience in Visual Studio by adding new features or integrating existing tools. An extension can range in all levels of complexity, but its main purpose is to boost your productivity and cater to your workflow.

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.

How to install extensions in VS Code?

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or use the View: Extensions command (Ctrl+Shift+X) to bring up the Extensions view.
This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Installation of Extensions

To install an extension, select the Install button. Once the installation is complete, the Install button will change to the Manage gear button.You can also add the extensions from command line terminal.

Note: Sometimes you may need to restart your VS Code finish the installation process.

Let's have a look on some must use VS Code extensions.

Each extension in the list includes a brief description, the publisher, the download count, and a five star rating. You can select the extension item to display the extension's details page where you can learn more.

Prettier

Go to extensions view page and search for Prettier and install it.
Command for installing it from terminal:

code --install-extension esbenp.prettier-vscode

ESLint

Go to extensions view page and search for ESLint and install it.
Command for installing it from terminal:

code --install-extension dbaeumer.vscode-eslint

TSLint

Go to extensions view page and search for TSLint and install it.
Command for installing it from terminal:

code --install-extension ms-vscode.vscode-typescript-tslint-plugin

Code Spell Checker

Go to extensions view page and search for Code Spell Checker and install it.
Command for installing it from terminal:

code --install-extension streetsidesoftware.code-spell-checker

GitLens — Git supercharged

Go to extensions view page and search for GitLens — Git supercharged and install it.
Command for installing it from terminal:

code --install-extension eamodio.gitlens

TODO Highlight

Go to extensions view page and search for TODO Highlight and install it.
Command for installing it from terminal:

code --install-extension wayou.vscode-todo-highlight

Color Highlight

Go to extensions view page and search for Color Highlight and install it.
Command for installing it from terminal:

code --install-extension naumovs.color-highlight

NPM Intellisense

Go to extensions view page and search for npm Intellisense and install it.
Command for installing it from terminal:

code --install-extension christian-kohler.npm-intellisense

Path Intellisense

Go to extensions view page and search for Path Intellisense and install it.
Command for installing it from terminal:

code --install-extension christian-kohler.path-intellisense

IntelliCode

Go to extensions view page and search for IntelliCode and install it.
Command for installing it from terminal:

code --install-extension visualstudioexptteam.vscodeintellicode

GitHub Copilot

Go to extensions view page and search for GitHub Copilot and install it.
Command for installing it from terminal:

code --install-extension github.copilot

Thanks

Markdown Cheat Sheet

Abdullah Al Jahid — Sat, 19 Jun 2021 10:15:46 +0000

What is Markdown?

Markdown is a lightweight markup language with a plain text formatting syntax. It can be converted into HTML/XHTML and others formats. It's main purpose is readability and ease of use.

What It Is Used For?

README files (Github , etc.)
Forum and Blog Posts (dev.to, Medium etc)
Many static site generators.

Now let's have a look what can we do using markdown and how can we use it.

Headings

For Heading1

For Heading2

For Heading3

For Heading4

For Heading5

For Heading6

Alternatively, you can use an underline-ish style for H1 and H2:

For H1

For H2

Italic

Use single *asterisks* or _underscores_ for Italic.

Use single asterisks or underscores for Italic.

Bold/Strong

Use double **asterisks** or __underscores__ for Bold/Strong.

Use double asterisks or underscores for Bold/Strong.

Combined

**Bold and *Italic1* & _Italic2_**

Bold and Italic1 & Italic2

Strikethrough

Use two tildes ~~to scratch/strikethrough this.~~

Use two tildes ~~to scratch/strikethrough this.~~

Horizontal Rule

You can use any of the following...
Using Hyphens

---

Using Asterisks

***

Using Underscores

___

Using three Hyphens

Using three Asterisks

Using three Underscores

Blockquotes

> This line is quoted.
> This line is part of the same quote.

Paragraph:
> You can write a paragraph inside a blockquote. You can also use different markdown here. Such as *itlic*, **bold**, ~~strike~~ etc.

This line is quoted.
This line is part of the same quote.

Paragraph:

You can write a paragraph inside a blockquote. You can also use different markdown here. Such as itlic, bold, ~~strike~~ etc.

Links

There are two ways to create links.
1. Inline Link

[Abdulah Al Jahid](https://username.medium.com/)

Abdulah Al Jahid

1. Inline Link With a Title

[Abdulah Al Jahid](https://github.com/username "My Github Account")

Abdulah Al Jahid

Tricky way to add links in a button

<a target="_blank" href=""><img src="https://img.shields.io/badge/-%23.svg?&style=plastic&logo=&logoColor=white" alt=""></a>

Github link:

Medium Blog Link

<a target="_blank" href="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId"><img src="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId" alt="Alternative text">

Youtube Video Link

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID/0.jpg" 
alt="Alternative text" width="240" height="180" border="10" /></a>

Images

Inline Style:
![Markdown Logo](https://markdown-here.com/img/icon256.png)

Reference Style:
![Markdown logo][logo]
`[logo]: https://markdown-here.com/img/icon256.png`

Inline Style:

Reference Style:

Inline Code Block

This is inline `code block` using `back-ticks`.

This is inline code block using back-ticks.

Code Blocks and Syntax Highlighting

Normal Code blocks

Bash:

npm install
npm run dev

Javascript:

function add(number1, number2) {
  return number1 + number2;
}

Python:

def add(number1, number2):
  return number1 + number2

List

UL
You can use */-/+ in unordered list

* Item 1
* Item 2
    * Item 2.1
    * Item 2.2
        * Item 2.2.1

Item 1
Item 2
- Item 2.1
- Item 2.2
  - Item 2.2.1

1. Item 1
2. Item 2
3. Item 3

Item 1
Item 2
Item 3

Table

| First Name    | Last Name     | Id    |
| ------------- |---------------| ------|
| Mark          | Down          |   1   |
| Abdullah Al   | Jahid         |   2   |
| Awesome       | Table         |   0   |

First Name	Last Name	Id
Mark	Down	1
Abdullah Al	Jahid	2
Awesome	Table	0