DEV Community: Olaniyi Olabode

📝How I Built a Fully Automated Telegram Moderation Bot — An Engineering Case Study

Olaniyi Olabode — Fri, 28 Nov 2025 13:59:12 +0000

I built a Telegram bot that automatically detects and handles duplicate messages (spam), promotional messages, and blacklisted keywords; logs every action; tracks infractions in Redis; and provides a clean admin surface (planned) for whitelist and keyword management. It runs on Node + TypeScript, uses Telegraf for Telegram, PostgreSQL for persistent data, and Redis for fast infra counters.

This article is a detailed, step by step breakdown of the problem, architecture, implementation, testing, monitoring, and deployment. It’s written as a technical case study so you and other engineers can reproduce, audit, or extend the system.

Table of contents

Why I built this
Goals & constraints
Tech stack
High-level architecture (diagram)
Data model (schema.sql)
Core modules — explanation + code snippets
Message flow
ensureChat / ensureUser (DB helpers)
Duplicate detector (Redis + normalization)
Promo detector
Keyword blacklist
Audit logging
Infractions and auto-ban
How I tested each feature (step-by-step)
Monitoring & alerts (production-lite approach)
Admin frontend (concept + API contract)
Deployment notes (free options)
Security & hardening notes
Future improvements & roadmap
Appendix: useful commands and snippets

1. Why I built this

Telegram groups scale quickly and inevitably attract spam, unwelcome promotions, or repeated posts that lower signal to noise ratio. The goal was a resilient, minimal, low cost system that:

Protects the group from repeated posts (spam) and ads,
Logs everything for auditability,
Lets maintainers whitelist trusted users,
Remains free-hosting friendly and easy to operate.

2. Goals & constraints

Functional: detect duplicates, detect promos, block blacklisted keywords, warn/delete/ban, persist logs.
Operational: work on free or cheap infrastructure, be robust, and recoverable.
Design: simple DB schema, Redis for ephemeral counters, code in TypeScript, clean structure for future admin UI.

3. Tech stack

Language: Node.js + TypeScript
Telegram SDK: Telegraf
DB: PostgreSQL (persistent storage)
Cache / counters: Redis (fast infra counters + TTL)
Dev tooling: ts-node-dev for development, tsc for build
Optional admin frontend: React + Vite + Tailwind (planned)
Hosting: Docker locally for dev; free cloud choices: Render / Railway / Fly / Vercel for frontend

Notes:

DB stores persistent state (chats, users, policies, whitelist, keywords, audit logs).

Redis stores ephemeral infra counters with TTL (e.g., 24 hours).

The admin API reads/writes DB and talks to Redis to reset infra keys.

5. Data model (schema.sql)

This is the schema used in my project (run it against your Postgres):

-- chats
CREATE TABLE IF NOT EXISTS chats (
  chat_id BIGINT PRIMARY KEY,
  title TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- users
CREATE TABLE IF NOT EXISTS users (
  user_id BIGINT PRIMARY KEY,
  first_name TEXT,
  last_name TEXT,
  username TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- policies
CREATE TABLE IF NOT EXISTS policies (
  chat_id BIGINT PRIMARY KEY REFERENCES chats(chat_id) ON DELETE CASCADE,
  duplicate_threshold INT DEFAULT 3,
  created_at TIMESTAMP DEFAULT NOW()
);

-- whitelist
CREATE TABLE IF NOT EXISTS whitelist (
  chat_id BIGINT REFERENCES chats(chat_id) ON DELETE CASCADE,
  user_id BIGINT REFERENCES users(user_id) ON DELETE CASCADE,
  PRIMARY KEY (chat_id, user_id)
);

-- audit logs
CREATE TABLE IF NOT EXISTS audit_logs (
  id SERIAL PRIMARY KEY,
  chat_id BIGINT REFERENCES chats(chat_id) ON DELETE CASCADE,
  user_id BIGINT REFERENCES users(user_id) ON DELETE CASCADE,
  message_id BIGINT,
  rule_triggered TEXT,
  action_taken TEXT,
  message_text TEXT,
  meta JSONB,
  created_at TIMESTAMP DEFAULT NOW()
);

-- keyword blacklist
CREATE TABLE IF NOT EXISTS keyword_blacklist (
  chat_id BIGINT REFERENCES chats(chat_id) ON DELETE CASCADE,
  keyword TEXT,
  PRIMARY KEY(chat_id, keyword)
);

6. Core modules — explanation + code snippets

I’ll walk through the main parts of the code and explain why they were designed that way. (These are extracts adapted to be readable the full project contains types and helpers.)

6.1 Message flow (handleMessage)

Every chat message passes through this handler:

Persist chat/user
Skip if whitelisted
Duplicate detection
Promo detection
Keyword blacklist
Execute action (delete/warn/ban)
Log action to audit_logs

Key points: always use parameterized SQL queries, protect against missing fields (ctx.chat might be undefined in some update types), and catch errors.

Example (simplified handler):

export async function handleMessage(ctx: Context) {
  const chatId = ctx.chat?.id;
  const msg = ctx.message;
  if (!chatId || !msg || !("text" in msg) || !msg.text) return;

  const text = msg.text;
  const user = msg.from;
  if (!user) return;

  await ensureChat(chatId, msg.chat.title);
  await ensureUser(user);

  // Whitelist check
  const wl = await query('SELECT 1 FROM whitelist WHERE chat_id=$1 AND user_id=$2', [chatId, user.id]);
  if (wl.rowCount > 0) return;

  // Duplicate detection + infra counter
  // Promo detection
  // Keyword blacklist
  // Logging and actions...
}

6.2 ensureChat / ensureUser (db helpers)

These upsert basic metadata so other tables can reference them.

export async function ensureChat(chatId: number, title?: string) {
  await query(
    `INSERT INTO chats (chat_id, title) VALUES ($1, $2)
     ON CONFLICT (chat_id) DO UPDATE SET title = EXCLUDED.title`,
    [chatId, title || null]
  );
}

export async function ensureUser(user: any) {
  if (!user) return;
  await query(
    `INSERT INTO users (user_id, username, first_name, last_name)
     VALUES ($1, $2, $3, $4)
     ON CONFLICT (user_id) DO UPDATE SET
       username = EXCLUDED.username, first_name = EXCLUDED.first_name, last_name = EXCLUDED.last_name`,
    [user.id, user.username || null, user.first_name || null, user.last_name || null]
  );
}

6.3 Duplicate detector (Redis + normalizer)

Design:

Normalize text (lowercase, trim, collapse whitespace/punctuation optionally)
Use Redis lists or hashes per user+chat or a key pattern like:
dup:{chatId}:{userId}:{normalizedText} with TTL
Simpler: push to a Redis list keyed by dup:{chatId}:{userId}, but we used a hash of message text to counts.

Implementation (conceptual):

pushAndCheckDuplicate(chatId, userId, messageId, text) → returns { duplicateCount }
If duplicateCount >= DUPLICATE_THRESHOLD → delete+warn and increment infra counter
Redis usage example:

// pseudo

const key = `dup:${chatId}:${userId}:${hash(normalizedText)}`;
const count = await redis.incr(key);
await redis.expire(key, DUPLICATE_WINDOW); // e.g., 300s
return { duplicateCount: count };

Infra counter:

Key: infra:${chatId}:${userId} → incr on each duplicated incident, TTL 24h

When infra >= 3 → bot attempts ctx.banChatMember(user.id) and logs

6.4 Promo detector

A lightweight regex-based detector is fine to start. Typical checks:

Telegram invites t.me/ or telegram.me/

URLs with suspicious keywords (channel, group, join)

Phone numbers or payment links — policy-dependent

Example:

export function detectPromo(text: string): boolean {
  // very simple
  return /t\.me\/\w+/.test(text) || /joinchat|telegram\.me/.test(text);
}

You can make this more advanced later (ML / heuristics).

6.5 Keyword blacklist

Per chat table keyword_blacklist. On message:

Load keywords for chat
Normalize message text
Check includes(keyword) on normalized text
Delete + warn + log

Reason to store in DB: admins can edit keywords and changes are persistent.

6.6 Audit logging

Every action writes a row to audit_logs. Keep meta as JSON for flexible data (duplicate counts, infra counts, matched keyword). Example call:

await logAudit(chatId, user.id, msg.message_id, "duplicate", "deleted+warn", text, { duplicateCount });

7. How I tested each feature (step-by-step)

Testing is crucial. Here’s the exact process I used while developing locally (Docker):

Setup (dev)

Run Postgres + Redis in Docker Compose.
Start bot in dev (npm run dev).
Invite bot to a test group and send messages.

Tests

Duplicate detection

Ensure not whitelisted.
Send Hi three times.
Expect:
On 3rd message, bot deletes the last message and warns the user.

Redis key infra:: increments after repeated offenses.

Check audit_logs for rule_triggered = 'duplicate'.

Promo detection

Send Check this channel: t.me/something.
Expect deletion, a warning, and audit_logs row rule_triggered = 'promo'. ** Keyword blacklist**

1. Insert keyword into DB:

INSERT INTO keyword_blacklist (chat_id, keyword)
VALUES (<CHAT_ID>, 'spoiler')
ON CONFLICT DO NOTHING;

2. Send a message containing spoiler.

3. Expect deletion + warning + audit log.

Whitelist

Insert whitelist entry:

INSERT INTO whitelist (chat_id, user_id)
VALUES (<CHAT_ID>, <USER_ID>)
ON CONFLICT DO NOTHING;

Send spam/promo/keyword messages — expect bot to ignore.

Audit logging

Trigger each rule
Query audit_logs to verify message text, rule trigger, action, and meta.

Infra / Ban
To test real banning, use a non-admin test account (bot cannot ban owners/admins). Repeat infra-causing actions to trigger ban and confirm user is removed from group.

8. Monitoring & alerts (production-lite)

I wanted something free, reliable, and simple to operate.

8.1 Logging

Use winston or pino to write structured logs to files + console.
Keep logs in JSON for easy parsing.

8.2 Admin alerts

On critical errors (unhandled exceptions, DB connection errors), notify a private Telegram admin chat:

// example on error

await bot.telegram.sendMessage(ADMIN_CHAT_ID, `Bot error: ${err.message}`);

8.3 Health checks

Expose /health endpoint on the admin API that checks:
- DB connectivity
- Redis connectivity
- Bot can call getMe or similar
Use a free uptime monitor (UptimeRobot) to ping /health every 5 minutes and notify you by email if it fails.

8.4 Metrics (basic)

Periodically compute counts (audit logs per day) and send a digest to admin chat (once per day).
Optional: lightweight Prometheus client + Grafana later (overkill for now).

Admin frontend (concept + API contract)

I planned a React admin frontend with the following responsibilities:

CRUD for whitelist and blacklist
View & filter audit logs
Edit policies (duplicate threshold, promo action)
Reset infra counters (calls Redis)
Dashboard metrics & charts

API contract (examples):

`- GET /api/chats?page=1&size=20 → list chats

GET /api/chats/:chatId → chat detail with policies, whitelist, keywords
POST /api/chats/:chatId/whitelist → add whitelist
DELETE /api/chats/:chatId/whitelist/:userId → remove whitelist
POST /api/reset-infra → body { chatId, userId } (backend clears Redis key)`

The frontend starts with a mock API so development is frictionless. When ready, swap VITE_API_BASE_URL.

10. Deployment notes (free options)

Backend (bot + admin API)
Deploy as Docker containers (Render, Railway, Fly). Railway/Render provide free tiers for small projects — good for prototyping.
Ensure PG and Redis are persistent volumes or managed services.

Frontend

Deploy the React app on Vercel or Netlify (both have free tiers and easy integration).

Production considerations

Use environment variables for BOT_TOKEN, DATABASE_URL, REDIS_URL.
Use a process manager or container auto-restart to keep bot up.
Add daily backups for Postgres (use pg_dump or provider snapshots).

11. Security & hardening

Never commit tokens. Use env variables and secrets manager where possible.
SQL safety: use parameterized queries — no string concatenation.
Rate limits: respect Telegram API limits (avoid mass requests).
Permissions: bot should have only the permissions it needs in the group (delete messages, ban members only if necessary).
Admin API: protect with a token. Later add OAuth / Telegram login if needed.
Error reporting: do not leak sensitive info in alerts.

12. Future improvements & roadmap

Short term:

Add admin UI (React) and wire to real admin API
Add more flexible penalty steps (mute → temp ban → perm ban)
Better normalization for duplicates (strip emojis, repeated punctuation)

Mid-term:

ML based spam classifier to reduce false positives
Bulk audit exports, per-chat analytics
Multi-bot management (SaaS style)

Long term:

SaaS: multi-tenant admin console, billing, onboarding flows

Appendix — useful commands & snippets

version: "3.8"
services:
  postgres:
    image: postgres:15
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: telegram_bot
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

  redis:
    image: redis:7
    ports:
      - "6379:6379"

volumes:
  pgdata:

Apply DB schema (copy schema.sql into container, then run)

docker cp schema.sql telegram-bot-postgres-1:/schema.sql
docker exec -i telegram-bot-postgres-1 psql -U postgres -d telegram_bot -f /schema.sql

Reset infra in Redis

docker exec -it telegram-bot-redis-1 redis-cli
DEL infra:<chatId>:<userId>
GET infra:<chatId>:<userId>

Run bot in dev

npm install
npm run dev # uses ts-node-dev

Closing notes

This project shows how much you can achieve with a small, well-designed stack: Telegraf + Postgres + Redis + a bit of Node glue. The important design principles I applied were:

Keep persistent vs ephemeral data separate (Postgres vs Redis)
Keep logic stateless where possible and log all decisions for auditability
Keep admin controls outside the bot (admin API + frontend) so operators can change rules without redeploying the bot

Tell me if you like the github repo and I will push to github for you

🚀 The Journey of Building an AI Like ChatGPT

Olaniyi Olabode — Mon, 22 Sep 2025 13:29:16 +0000

Imagine this: you’ve been hired to create a machine that can talk like a human. People want it to answer questions, write essays, tell jokes even explain code. Sounds impossible, right?

Well, that’s exactly what the creators of ChatGPT set out to do.

Let me take you on the step-by-step journey of how such an AI is built.

📚 Step 1 — The Library of Humanity (Data Collection)

First, you need knowledge. Not just a few books but the entire internet’s worth of text: articles, books, code snippets, conversations. Think of this as walking into the largest library in history and telling your AI:

“Read everything.”

That’s the starting point — feeding it data.

👨‍🎓 Step 2 — Teaching the Intern (Training)

Now, imagine you hire an intern. They’ve read the entire library, but they don’t actually understand anything yet. So you start quizzing them:

“What comes after The cat sat on the…?”
“Translate this sentence.”
“Classify this email as spam or not spam.”

Every time the intern gets it wrong, you nudge them in the right direction. This is training the model adjusting billions of “knobs” (parameters)

until it starts predicting the right answers.

🧠 Step 3 — The Brain Upgrade (Deep Learning Models)

But your intern is no ordinary student. They have a massive brain made of layers of artificial neurons.

Each layer learns a slightly different thing:

Letters
Words
Sentences
Meaning

The result? A system that doesn’t just parrot words,

but starts to capture the structure of human language.

🗣️ Step 4 — From Student to Speaker (Inference)

Training is done. Now, it’s time to test.

You give the AI a prompt: 👉 “Write me a poem about the stars in the style of Shakespeare.”

It looks at everything it has learned and predicts, word by word, what should come next.

Suddenly, the machine talks. Not because it “understands,” but because it’s gotten really, really good at predicting what words belong together.

🎓 Step 5 — The Polishing School (Fine Tuning)

Of course, raw predictions can be clumsy. Sometimes the intern rambles. Sometimes they say unsafe or biased things. So you send them to finishing school fine tuning.

Here, human trainers step in:

Good answers get rewarded 👍
Bad answers get corrected 👎

This reinforcement makes the AI more polite, helpful, and safe for everyday use.

🛡️ Step 6 — Guardrails and Rules (Safety)

Even the best intern needs rules. You add guardrails so the AI won’t:

Reveal private information
Give harmful advice
Go off on wild tangents

This is where ethics, policies, and safeguards come in.

Because powerful tools need responsible handling.

🎉 Step 7 — Graduation Day (Deployment)

Finally, the AI is ready to graduate.

You deploy it into apps, websites, and tools where people can use it for work, study, or fun. But just like any graduate, it keeps learning. Developers monitor feedback, retrain when necessary, and release better versions.

🌍 The Bigger Picture

ChatGPT isn’t magic. It’s the result of:

Data (the library of humanity)
Training (teaching the intern)
Models (the deep brain layers)
Fine-tuning (human guidance)
Safety (guardrails)
Deployment (graduation into the real world)

At the end of the day, AI is a mirror.

It reflects us our words, our knowledge, our creativity.

The better we teach it, the better it becomes.

💡 Next time someone says “AI is scary” or “AI is magic”,

you can tell them:

“No — it’s just a very fast intern who read everything and learned to guess really well.” And that, my friend, is how something like ChatGPT is built.

✨ If you enjoyed this breakdown, follow me I’ll be sharing more step-by-step guides

on how AI works and how you can use it in real projects.

👉 Drop a comment and tell me what you like to see next.

🤖 What AI Really Is Explained in the Simplest Way Possible

Olaniyi Olabode — Sat, 20 Sep 2025 15:11:56 +0000

Artificial Intelligence. Two words that dominate headlines, spark debates, and inspire both excitement and fear. But for most people, AI feels mysterious like magic that only scientists and engineers can understand.

The truth is, AI isn’t magic. It’s not some “thinking robot.” At its core, AI is much simpler:

👉 AI is just a very powerful pattern recognizer.

1. How AI Works (No Jargon)

You feed an AI system a massive amount of data (words, images, audio, numbers, anything).
The system looks for patterns in that data.
When you give it something new, it tries to predict the most likely answer based on those patterns.

That’s it. No brain. No emotions. Just math spotting patterns at superhuman speed.

Think of it like:

Your phone’s autocorrect predicting the next word.
Spotify suggesting your next favorite song.
Netflix recommending a movie.

ChatGPT and other advanced AIs do the same thing just at a much bigger scale, trained on billions of examples.

2. AI Is Like a Super-Fast Intern

Here’s a way to think about AI: imagine you hire an intern who

Has read every book, article, and blog post ever written.
Can type and calculate faster than anyone alive.
Can draft, summarize, or explain things instantly.

Sounds amazing, right?

But this intern has a big flaw: they don’t actually understand what they’re saying. They’re just very good at recognizing patterns and repeating them. Sometimes they’ll make mistakes or confidently give wrong answers.

That’s AI. Incredibly powerful, but not human.

3. AI in Your Everyday Life

Most people don’t realize they’re already using AI daily:

Google Maps → predicts traffic and suggests faster routes.
E-commerce sites → recommend products you’ll probably like.
Voice assistants → understand and respond to your speech.
Photo apps → automatically recognize faces and objects.

AI isn’t just in futuristic robots — it’s quietly running behind the apps and tools you already rely on.

4. Why Do We Call It “Intelligence”?

It’s called Artificial Intelligence because AI can perform tasks we normally associate with human thinking:

Writing text.
Recognizing images.
Translating languages.
Playing complex games like chess or Go.

But here’s the key: AI doesn’t “understand” like humans do.
It doesn’t know meaning. It doesn’t have consciousness. It just calculates probabilities faster than we can.

5. Why AI Is Such a Big Deal

If AI is just pattern recognition, why is it so powerful? Because of scale.

A human doctor might study thousands of cases in a lifetime.
An AI system can analyze millions of medical records in days, spotting patterns humans might miss.
A customer service rep might answer 50 tickets a day.
An AI chatbot can respond to thousands in seconds.

AI doesn’t replace human intelligence, but it amplifies it. That’s why it’s transforming industries like healthcare, finance, education, logistics, and art

6. The Takeaway

AI isn’t magic. It isn’t alive. It isn’t smarter than humans in the way we think of intelligence.

👉 AI is a giant calculator for patterns.

The real power of AI isn’t in the math itself it’s in how we apply it:

To detect diseases earlier.
To make transportation safer.
To create new forms of art.
To make knowledge more accessible.

The question isn’t whether AI will shape our future.
The question is: how will we choose to use it?

What the Heck is “Vibe Coding”? (And Why Developers Can’t Stop Talking About It)

Olaniyi Olabode — Fri, 19 Sep 2025 22:57:28 +0000

The first time I heard the term “vibe coding,” I laughed. It sounded like something out of a meme like coding while listening to lo-fi beats and hoping the bugs fix themselves.

But then it happened to me.

One evening, I had to spin up a quick API for a side project. Normally, that would mean hours of boilerplate: setting up routes, connecting to MongoDB, wiring JWT authentication. Instead, I opened my AI powered editor and typed:


“Create an Express.js API with register, login, and profile endpoints. Use JWT for auth and connect it to MongoDB.”

I expected a mess. But in seconds, the screen filled with code. A few tweaks later, it was running. That was my first taste of vibe coding describing the vibe of what you want to build and letting the AI draft it for you.

It’s not a new framework, not a hidden library it’s more like pair programming with an overeager intern. You give it directions, it produces something fast, and you spend your time steering, correcting, and refining.

Of course, it’s not magic. Sometimes the AI gives you code that looks right but fails silently. Other times it writes solutions you’d never put in production. Debugging its mistakes feels like reading someone else’s half-finished homework.

Still, I couldn’t ignore the shift. Instead of spending hours on setup, I could jump straight to the interesting parts. The boring, repetitive code? Offloaded. The big picture? That’s where I stayed focused.

That’s the heart of vibe coding: moving away from how to build and leaning into what to build. You don’t dictate every keystroke; you describe the outcome, then step in as the editor, the architect, the quality gatekeeper.

And maybe just maybe that’s where development is headed. In a few years, coding might look less like typing out functions and more like crafting the perfect prompt. The job won’t disappear, but the skillset will shift: clarity, guidance, and knowing when to take back the wheel.

So what is vibe coding? It’s the messy, exciting middle ground between human creativity and AI autocomplete. It’s coding by description, shaping ideas into software with less grind and more flow.

It’s real, it’s imperfect and if you haven’t tried it yet, you probably will soon.

Level Up Your HTML Game with html-tags-utils

Olaniyi Olabode — Fri, 24 Jan 2025 23:42:59 +0000

As web developers, we deal with HTML every day. It’s the backbone of everything we build on the web. Yet, how often do we wish we had a more efficient way to manage HTML tags, validate them, or get detailed metadata about their attributes? That’s exactly why I created html-tags-utils a package that takes working with HTML tags to a whole new level.

If you’re looking for a tool that combines comprehensive utilities, detailed metadata, and advanced features for HTML tags, you’re in the right place.

Why `html-tags-utils`?

Let’s be honest, writing or managing HTML tags isn’t the most exciting part of web development. That’s where tools like the html-tags package come in, giving us a simple list of all valid HTML tags. But I needed more.

I wanted a tool that could answer questions like:

Is this tag valid in HTML?
Is this a self-closing (void) tag?
Which tags have a specific attribute, like href or src?
How can I group, filter, or sort tags more efficiently?

So, I built html-tags-utils to fill that gap. It extends the functionality of html-tags by offering detailed metadata, validation tools, and filtering utilities to make working with HTML smarter and faster.

Features You’ll Love

Here’s what makes html-tags-utils stand out:

🚀 All HTML Tags

Get a complete list of all standard HTML tags at your fingertips.

🌀 Void Tags

Easily identify self-closing tags like <img> and <br>.

📚 Detailed Metadata

Access detailed information about each tag, including:

Descriptions
Supported attributes
Categories (e.g., Inline, Block, Interactive)

🛠️ Utilities

Supercharge your workflow with utilities that allow you to:

Filter tags by prefix
Sort tags alphabetically (ascending or descending)
Group tags by length
Search for tags by supported attributes

✅ Validation

Quickly check if a tag is valid or if it’s a void/self-closing tag.

Installation

Getting started is simple. Install the package via npm:

npm install html-tags-utils

How It Works

Here’s a sneak peek into what html-tags-utils can do for you.

1. Get All HTML Tags

import { htmlTags } from "html-tags-utils";

console.log(htmlTags);
//=> ['a', 'abbr', 'address', 'article', …]

2. Identify Void Tags

import { voidHtmlTags } from "html-tags-utils";

console.log(voidHtmlTags);
//=> ['area', 'base', 'br', 'col', 'embed', 'img', …]

3. Check if a Tag is Valid

import { isHtmlTag } from "html-tags-utils";

console.log(isHtmlTag("div")); //=> true
console.log(isHtmlTag("custom-tag")); //=> false

4. Filter Tags by Prefix

import { filterTags } from "html-tags-utils";

console.log(filterTags("d"));
//=> ['data', 'datalist', 'dd', 'del', 'details', 'dialog', 'div', 'dl', 'dt']

5. Get Tags by Supported Attribute

import { getTagsByAttribute } from "html-tags-utils";

console.log(getTagsByAttribute("href"));
//=> ['a', 'area', 'link', 'base']

How It Compares to `html-tags`

If you’re familiar with the html-tags package, you’ll appreciate how html-tags-utils takes things further. Here’s a quick comparison:

Feature	`html-tags`	`html-tags-utils`
List of HTML Tags	✅	✅
Void Tags	✅	✅
Detailed Tag Metadata	❌	✅
Tag Validation	❌	✅
Filter Tags by Prefix	❌	✅
Sort Tags Alphabetically	❌	✅
Group Tags by Length	❌	✅
Search by Attribute	❌	✅

Use Cases You’ll Actually Need

Debugging HTML
When debugging, you can quickly validate if a tag is correct or check if it’s self-closing.
Dynamic Tag Management
Need to create a list of valid tags dynamically? Use the filtering and grouping utilities to generate exactly what you need.
Web Development Tools
Build smarter components or tools by integrating metadata about HTML tags, like descriptions and attributes.

Contributing

I’d love to have your input! Feel free to open issues or submit pull requests on GitHub. Let’s make html-tags-utils even better together.

GitHub Repository

Wrapping It Up

Whether you’re a seasoned developer or just getting started, html-tags-utils is here to make your work with HTML tags easier, faster, and smarter. It’s built for developers who want more functionality and flexibility than what existing tools offer.

Try it out, and let me know what you think!

If you ❤️ the package, consider starring it on GitHub or sharing it with your developer community. 🚀

Got feedback? Let’s connect on Twitter or GitHub.

Check it out and take your HTML game to the next level!

React Custom Hook: useDarkSwitch

Olaniyi Olabode — Sat, 18 Jan 2025 22:42:31 +0000

In a world where users increasingly demand personalized experiences, enabling a smooth and effortless dark mode toggle for your application is no longer just an optional enhancement it's a necessity. Enter useDarkSwitch, the custom React hook that does all the heavy lifting for you. Seamlessly toggle between light and dark themes, sync with system preferences, and enhance your app’s user experience with a robust and intuitive API.

Whether you're building a sleek portfolio website, a productivity app, or a complex dashboard, useDarkSwitch is the perfect utility to elevate your project. Let’s dive into why this hook is a game changer for developers.

Why You Need useDarkSwitch

Dark mode isn’t just a trend it’s a user expectation. Beyond aesthetics, it reduces eye strain, conserves battery life on OLED screens, and adapts to the user’s environment. Implementing a reliable dark mode solution, however, can be surprisingly tricky. That’s where useDarkSwitch comes in.

Here’s why you’ll love it:

Developer Friendly: Intuitive API with sensible defaults, so you can integrate it in minutes.
Customizable: Tailor it to your application’s needs with options for storage providers, class names, and transition durations.
Sync with System Preferences: Automatically adapt to the user’s system theme settings.
Persist User Preferences: Save and retrieve the theme mode with localStorage or a custom storage provider.
Responsive and Accessible: Ensure your app stays relevant to a diverse audience.

Features of useDarkSwitch

1. Effortless Integration

Setting up useDarkSwitch is straightforward. With minimal configuration, you can have a fully functional theme toggle up and running:

import { useDarkSwitch } from 'use-dark-switch';

function App() {
  const { isDark, toggle } = useDarkSwitch();

  return (
    <div>
      <button onClick={toggle}>
        Switch to {isDark ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
}

This simplicity empowers you to focus on your app’s core functionality while delivering an elevated user experience.

2. Full Customizability

Customize every aspect of the hook to suit your app’s requirements:

const { isDark, enable, disable } = useDarkSwitch({
  defaultMode: false,
  storageKey: 'my-theme',
  classNameDark: 'my-dark-mode',
  classNameLight: 'my-light-mode',
  transitionDuration: 500,
});

Default Mode: Set the initial theme.
Storage Key: Define a custom key for saving user preferences.
Class Names: Apply custom styles for your themes.
Transition Duration: Smoothly animate theme changes.

3. Sync with System Theme

Modern users expect apps to reflect their system preferences. With useDarkSwitch, you can achieve this effortlessly:

const { systemTheme } = useDarkSwitch({ syncWithSystem: true });

The hook listens to system theme changes in real-time, ensuring your app remains in sync without additional overhead.

4. Custom Storage Providers

Need to store preferences in a unique way, such as a server-side session or an IndexedDB instance? useDarkSwitch supports custom storage providers:

const customStorage = {
  getItem: (key) => sessionStorage.getItem(key),
  setItem: (key, value) => sessionStorage.setItem(key, value),
  removeItem: (key) => sessionStorage.removeItem(key),
};

const { isDark } = useDarkSwitch({ storageProvider: customStorage });

5. Callback Support

Leverage the onChange callback to execute additional logic whenever the theme changes:

const { toggle } = useDarkSwitch({
  onChange: (isDark) => {
    console.log(`Theme changed to: ${isDark ? 'Dark' : 'Light'}`);
  },
});

This makes it easier to integrate analytics, logging, or other side effects.

6. Smooth Transitions

Enhance user experience by adding transitions to theme changes. Define a duration, and useDarkSwitch handles the rest:

const { toggle, isTransitioning } = useDarkSwitch({ transitionDuration: 300 });

return (
  <button onClick={toggle} disabled={isTransitioning}>
    Toggle Theme
  </button>
);

SEO Benefits of Adding Dark Mode

Implementing dark mode using useDarkSwitch can indirectly improve your app’s search engine rankings. How? By boosting user experience and engagement metrics. When users spend more time on your site and interact with its features, search engines take note. A happy user often equals better SEO performance.

The Future of Theming in React

useDarkSwitch embodies the future of React development—modular, customizable, and user-focused. As the ecosystem evolves, such utilities will become indispensable for creating modern, responsive, and accessible applications.

Get Started Today

Ready to level up your React app? Install useDarkSwitch and start building:

npm install use-dark-switch

Join the growing community of developers who trust useDarkSwitch to deliver seamless dark mode functionality. For detailed documentation, visit the GitHub repository.

With useDarkSwitch, theming has never been this elegant. Embrace the power of dark mode and watch your app shine or, in this case, darken! Start building smarter, more intuitive experiences today.

useDarkSwitch: Empower Your Applications with Seamless Dark Mode

Olaniyi Olabode — Sat, 18 Jan 2025 22:34:04 +0000

useDarkSwitch: Empower Your Applications with Seamless Dark Mode

Dark mode is no longer a luxury it’s a necessity. From reducing eye strain to saving device battery life, the demand for dark mode has soared. Enter useDarkSwitch, a powerful, lightweight React hook designed to simplify the implementation of dark mode in your applications. This isn’t just a tool—it’s a game-changer for developers seeking efficiency and elegance.

What is useDarkSwitch?

useDarkSwitch is a React hook that lets you toggle between light and dark themes with minimal setup. Forget the hassle of building complex toggling mechanisms or managing theme states manually. With useDarkSwitch, you get:

Ease of Integration: Plug and play functionality.
Customizability: Define themes and transitions as per your needs.
Synchronization: Automatically syncs with user system preferences.

Whether you're building a portfolio site, a complex dashboard, or a mobile-first application, useDarkSwitch fits seamlessly into any project.

Why Choose useDarkSwitch?

The digital world moves fast, and so do users' expectations. Here’s why useDarkSwitch stands out:

Minimal Setup: With just a few lines of code, you’re good to go.
System Preference Support: It respects the user's OS-level dark mode setting.
Customizable Themes: Tailor the look and feel to align with your branding.
Lightweight: No unnecessary bloat, ensuring peak performance.

import useDarkSwitch from 'use-dark-switch';

const App = () => {
  const { isDarkMode, toggleDarkMode } = useDarkSwitch();

  return (
    <div style={{ background: isDarkMode ? '#000' : '#fff', color: isDarkMode ? '#fff' : '#000' }}>
      <h1>Welcome to Dark Mode</h1>
      <button onClick={toggleDarkMode}>Toggle Theme</button>
    </div>
  );
};

How useDarkSwitch Works

Behind the scenes, useDarkSwitch leverages modern web APIs like matchMedia and localStorage. This ensures:

System-Level Integration: It listens to changes in system preferences.
Persistence: Your users’ theme preferences are saved across sessions.
Flexibility: You can override system settings when needed.

SEO and Visibility Challenges

If you’ve searched for useDarkSwitch on Google and struggled to find it, you’re not alone. Visibility issues can stem from:

New Package Syndrome: New packages often take time to rank on search engines.
Competition: Keywords like "dark mode" and "React hooks" are highly competitive.
Content Gaps: Lack of optimized articles, tutorials, and backlinks.

How to Improve Visibility

Write Tutorials: Publish how-to guides and case studies using useDarkSwitch.
Leverage Social Media: Share your work on platforms like Twitter, LinkedIn, and Reddit.
Engage Communities: Post on developer forums like Stack Overflow and Dev.to.
Collaborate: Partner with tech bloggers and influencers.

Advanced Features

Want more power? useDarkSwitch isn’t just a toggle—it’s a gateway to deeper customization:

Custom Hooks: Extend the functionality to support complex use cases.
Theming Libraries: Integrate with tools like Tailwind CSS or Material-UI.
Event Listeners: React to changes in real-time with seamless animations.

import useDarkSwitch from 'use-dark-switch';

const CustomApp = () => {
  const { isDarkMode, toggleDarkMode } = useDarkSwitch({
    initialMode: 'light',
    onChange: (mode) => console.log(`Theme switched to: ${mode}`),
  });

  return (
    <div className={`app-container ${isDarkMode ? 'dark' : 'light'}`}>
      <header>Custom Dark Mode App</header>
      <button onClick={toggleDarkMode}>Toggle Theme</button>
    </div>
  );
};

Conclusion

In an era where user experience reigns supreme, useDarkSwitch offers a simple yet robust solution to implement dark mode in your applications. Its lightweight, customizable nature ensures that you can adapt it to any project without compromising performance.

Ready to enhance your application? Get started with useDarkSwitch today!

You can read the docs on Github for more examples

Let your users toggle effortlessly, and watch your app light up (or dim down) with brilliance.

Mastering TypeScript with React: A Step-by-Step Guide

Olaniyi Olabode — Thu, 19 Sep 2024 15:36:44 +0000

🙋🏻‍♀️ Introduction

TypeScript adds static typing to JavaScript, which helps catch potential bugs before they even run. When paired with React, TypeScript enhances your components by enforcing type safety. In this article, we'll walk through the essential concepts for using TypeScript with React.

⚛️ How to Use TypeScript with React?

First, you need to install TypeScript in a React project. If you're starting from scratch, create a new React app with TypeScript enabled:

npx create-react-app my-app --template typescript

For an existing project, you can add TypeScript by running:

npm install typescript @types/react @types/react-dom

Now, you can start using .tsx files instead of .js or .jsx, and your React components will benefit from TypeScript’s features.

Types for React Component Props

When you’re defining a component in React, you can specify the types for its props to make the usage of the component clearer and safer. Here’s a basic example:

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

In this example, UserCard expects two props: name (a string) and age (a number). If you try to pass incorrect types, TypeScript will show an error.

ReactNode Vs ReactElement

You might wonder when to use ReactNode or ReactElement for typing React components.

ReactNode: Represents anything that can be rendered by React. This includes strings, numbers, JSX, arrays, and null.
ReactElement: Refers to an actual React element, which is more specific and doesn’t cover strings or null.

Example:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ReactNode is used here because children can be any renderable element, not just React elements.

Type Vs Interface

When defining the shape of props or other objects, both type and interface can be used. So, what’s the difference?

Type: Best for creating union types or more complex combinations.
Interface: Often better when you plan to extend or implement additional types.

Here’s a comparison:

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

While both are similar, interface can be extended more naturally:

interface IconButtonProps extends ButtonProps {
  icon: string;
}

How to Type Props with TypeScript?

To type props for a component, declare a type or interface and pass it as the type annotation for the component's props.

Example:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

How to Type Functional Component Props?

To type a functional component's props, you can use React.FC<Props> or declare the props explicitly. While React.FC was commonly used, now many prefer explicit types.

Here’s an example using explicit types:

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

In this example, Badge has two props, text and color, both typed as strings.

⛓ React Hooks with TypeScript

React hooks can also be typed in TypeScript to ensure type safety for the state and effect logic in your components.

Here’s how to use useState and useEffect with TypeScript:

import { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

In this example, the useState hook is typed to ensure count is always a number, and useEffect logs the current count whenever it changes.

By following these best practices, you’ll be able to harness the full potential of TypeScript in your React applications, leading to more robust, maintainable code.

And before you go, if you’re also working with SQL, check out our Ultimate SQL Cheatsheet to improve your SQL skills with both basic and advanced queries!

20 Essential Libraries To Know if You Work with React

Olaniyi Olabode — Thu, 19 Sep 2024 14:34:32 +0000

React has become the go-to library for building user interfaces, thanks to its flexibility, simplicity, and massive ecosystem of libraries. However, if you want to get the most out of React and enhance your development speed, there are several essential libraries you should integrate into your workflow. Whether you're focusing on state management, routing, or form validation, these libraries will make your life as a React developer much easier.

In this article, we’ll cover 20 key libraries that can supercharge your React applications, complete with code samples and examples.

1. React Router

Navigating between different pages in a React app is seamless with React Router. It allows you to build single-page applications with dynamic routing.

npm install react-router-dom

Example:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

2. Axios

For making HTTP requests, Axios provides an easy-to-use API and supports features like interceptors, request cancelation, and transforming request/response data.

npm install axios

Example:

import axios from 'axios';
import { useEffect, useState } from 'react';

function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data').then(response => {
      setData(response.data);
    });
  }, []);

  return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}

3. React Hook Form

Forms can get complicated, but React Hook Form simplifies form handling in React. It integrates with native HTML forms, providing better performance and reduced re-renders.

npm install react-hook-form

Example:

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input {...register("lastName")} placeholder="Last Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

4. Styled Components

If you love writing CSS but want to manage it within your React components, Styled Components lets you do just that. You can write actual CSS syntax while keeping styles scoped to components.

npm install styled-components

Example:

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
`;

function App() {
  return <Button>Click Me!</Button>;
}

5. React Query

For managing server-side data, React Query is an excellent choice. It simplifies data fetching, caching, and syncing without all the boilerplate.

npm install react-query

Example:

import { useQuery } from 'react-query';
import axios from 'axios';

function App() {
  const { data, error, isLoading } = useQuery('users', () =>
    axios.get('/api/users').then(res => res.data)
  );

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading data</p>;

  return (
    <div>
      {data.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

6. Recoil

Recoil is an experimental state management library for React that simplifies state management by leveraging React’s hooks.

npm install recoil

Example:

import { atom, useRecoilState } from 'recoil';

const textState = atom({
  key: 'textState',
  default: '',
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  return (
    <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
  );
}

7. Framer Motion

For animations, Framer Motion is an amazing library that provides powerful animations while keeping them declarative and easy to use.

npm install framer-motion

Example:

import { motion } from 'framer-motion';

function Box() {
  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 2 }}
      style={{ width: 100, height: 100, background: 'red' }}
    />
  );
}

8. Emotion

Like Styled Components, Emotion is a powerful library for styling components in React. It allows writing CSS with JavaScript without any additional setup.

npm install @emotion/react @emotion/styled

Example:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  background-color: lightblue;
  font-size: 24px;
`;

function App() {
  return <div css={style}>Hello, World!</div>;
}

9. React Bootstrap

React Bootstrap is a React wrapper for the Bootstrap framework, allowing you to use Bootstrap components without relying on jQuery.

npm install react-bootstrap bootstrap

Example:

import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return <Button variant="primary">Primary Button</Button>;
}

10. Formik

Another great form handling library is Formik, which simplifies forms in React by handling form state, validation, and submission.

npm install formik

Example:

import { Formik, Field, Form } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="name" placeholder="Enter your name" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

SQL Enthusiasts, Don’t Miss Out

If you're also working with databases and need a handy reference for SQL, check out my SQL Cheatsheet on GitHub. This cheatsheet covers both basic and advanced SQL queries, perfect for leveling up your database skills. Fork, clone, and star the repo to keep it available as your go-to SQL reference.

I'll continue the list in a follow-up article to avoid overwhelming this one, but these 10 libraries are a great start for building more efficient and powerful React applications.

Be sure to experiment with these libraries, as each provides unique capabilities that can save you time and effort. Keep coding, and happy React-ing!

Master SQL Like a Pro: The Ultimate SQL Cheatsheet

Olaniyi Olabode — Thu, 19 Sep 2024 09:32:56 +0000

Structured Query Language, commonly known as SQL, is the backbone of database management. From retrieving data to performing complex operations, SQL powers almost all databases, making it one of the most vital skills in a developer’s toolkit.

Whether you’re new to SQL or a seasoned database admin, having a handy reference guide can save you countless hours of trial and error. That's why I created the Ultimate SQL Cheatsheet, which covers both basic and advanced SQL techniques, designed to help you master SQL and maximize your efficiency. In this article, I’ll share a sneak peek of what you can expect inside the cheatsheet. If you’re ready to dive deeper, you can fork, clone, or star the repo for an in-depth look!

Get the full cheatsheet here: Ultimate SQL Cheatsheet on GitHub

What is SQL?

SQL (Structured Query Language) is a standardized programming language used to manage and manipulate relational databases. From querying data to defining structures, SQL allows developers to interact with the database in powerful ways. Whether you’re working with MySQL, PostgreSQL, or SQL Server, SQL syntax remains largely consistent across platforms.

Basics of SQL

Let’s start with some core commands that every beginner should know. These commands allow you to retrieve data, filter it, and manage it efficiently.

1. SELECT Statement

One of the most fundamental SQL queries, the SELECT statement retrieves data from the database.

SELECT first_name, last_name 
FROM employees;

This basic query pulls the first_name and last_name columns from the employees table. Simple, but very powerful.

2. WHERE Clause

Use the WHERE clause to filter the data returned by the SELECT statement.

SELECT first_name, last_name
FROM employees
WHERE department = 'Sales';

This query will return the names of employees who work in the Sales department.

3. JOIN Operations

Joins are essential for working with multiple tables in a relational database. An INNER JOIN returns rows that have matching values in both tables.

SELECT orders.order_id, customers.customer_name 
FROM orders 
INNER JOIN customers ON orders.customer_id = customers.customer_id;

This query matches orders to customers and retrieves their names alongside the order IDs.

Advanced SQL Techniques

Once you’ve mastered the basics, SQL offers more powerful and complex functionalities. These advanced techniques allow you to manipulate data more efficiently and handle large datasets with precision.

1. Subqueries

Subqueries allow you to execute a query inside another query, giving you more flexibility.

SELECT first_name, last_name
FROM employees
WHERE department_id IN (SELECT department_id FROM departments WHERE department_name = 'HR');

In this query, a subquery is used to fetch the department_id of the HR department, which is then passed to the main query.

2. Common Table Expressions (CTEs)

CTEs simplify complex queries by creating temporary result sets.

WITH SalesData AS (
    SELECT employee_id, SUM(sales_amount) AS TotalSales
    FROM sales
    GROUP BY employee_id
)
SELECT employee_id, TotalSales
FROM SalesData
WHERE TotalSales > 50000;

Here, SalesData is a CTE used to calculate the total sales for each employee, and then filter those whose total sales exceed 50,000.

3. Window Functions

Window functions are used for tasks like running totals, rankings, and moving averages without collapsing data into groups.

SELECT employee_id, department_id, salary, 
       RANK() OVER (PARTITION BY department_id ORDER BY salary DESC) AS rank
FROM employees;

This query ranks employees by salary within each department without aggregating the data.

4. Performance Optimization Tips

Efficient SQL queries are essential for handling large datasets. Indexes, query execution plans, and avoiding unnecessary SELECT * are a few ways to optimize query performance.

Fork, Clone, and Star the Ultimate SQL Cheatsheet

The Ultimate SQL Cheatsheet is packed with more examples and use cases like the ones above. Whether you need a quick reference for everyday queries or want to deepen your SQL expertise, this repository has you covered.

Fork the repo to customize your own version.
Clone it to keep it available offline.
Star it to show your support and help others discover this helpful resource.

Head over to the full repository here: Ultimate SQL Cheatsheet on GitHub

In Summary

SQL is an essential tool for working with databases, and mastering it can open up countless opportunities in your development journey. The Ultimate SQL Cheatsheet is designed to help you along the way, whether you’re just starting or you’re diving into advanced SQL techniques.

Don’t forget to fork, clone, and star the repo to keep it handy!

Ultimate SQL Cheatsheet on GitHub

Generating Unique Random Numbers in JavaScript Using Sets

Olaniyi Olabode — Thu, 29 Aug 2024 16:47:22 +0000

When working with JavaScript, you may often need to generate random numbers for various purposes, such as creating unique identifiers, simulating data, or adding unpredictability to an application. However, ensuring that these numbers are unique can be a bit tricky, especially if you need a large set of them. This is where JavaScript's Set object comes in handy. In this article, we'll explore how to generate unique random numbers using Set and why it's an effective approach.

Why Use Sets for Unique Random Numbers?
In JavaScript, a Set is a collection of values that automatically removes duplicates. This makes it an ideal tool for generating unique random numbers. Unlike arrays, which can contain duplicate values and require additional checks to enforce uniqueness, Set inherently ensures that all elements are unique. This not only simplifies the code but also enhances performance when generating large sets of random numbers.

Step-by-Step Guide to Generating Unique Random Numbers
Let's walk through how to generate a **Set of unique random numbers using JavaScript.**

Initialize the Set Begin by creating a new Set to store your unique random numbers.

const uniqueNumbers = new Set();

Generate Random Numbers Use a loop to generate random numbers and add them to the Set. The loop continues until the desired number of unique random numbers is reached.

while (uniqueNumbers.size < 10) {  // Adjust the number 10 to your desired count
    const randomNumber = Math.floor(Math.random() * 100) + 1; // Generates numbers between 1 and 100
    uniqueNumbers.add(randomNumber);
}

Math.random() generates a random floating-point number between 0 (inclusive) and 1 (exclusive).
Math.floor() rounds the number down to the nearest integer.
Multiplying by 100 and adding 1 shifts the range to 1-100.

Convert the Set to an Array Although Set is a great tool for ensuring uniqueness, you might want to work with an array afterward. You can easily convert the Set back into an array using the Array.from() method or the spread operator.

const uniqueArray = Array.from(uniqueNumbers);
// Or using spread operator
// const uniqueArray = [...uniqueNumbers];
console.log(uniqueArray);

Why Not Use an Array?
You might wonder why we don't simply use an array with additional checks to avoid duplicates. While it's possible to use arrays, the process would involve checking if each newly generated number is already in the array, which could become inefficient with larger datasets. Using a Set automatically handles duplicates, making the code cleaner and faster.

Real-World Applications
Generating unique random numbers is a common task in various scenarios:

Games: Creating unique IDs for players or generating randomized levels.
Simulations: Modeling random events without repetition.
Data Sampling: Selecting unique random samples from a larger dataset.

Performance Considerations
While using Set is generally efficient, it's important to note that the performance could be affected by the range of numbers and the required size of the unique set. For very large ranges or when you need a high quantity of unique numbers, you may need to consider additional optimization strategies or use specialized libraries.

Conclusion
Using JavaScript's Set to generate unique random numbers is a simple yet powerful technique that eliminates the need for manual checks for duplicates. Whether you're building a game, running simulations, or sampling data, this method provides a clean and efficient way to ensure the uniqueness of your random numbers. Give it a try in your next project, and enjoy the benefits of cleaner code and faster execution!

If you found this guide helpful, be sure to like and share your thoughts below! 👇

Mastering Express.js: A Beginner’s Roadmap to Backend Development

Olaniyi Olabode — Thu, 29 Aug 2024 11:36:06 +0000

Express.js Essentials: A Beginner’s Guide

Welcome to the ultimate guide on Express.js! Think of this as your go-to resource for everything you need to kickstart your journey with backend development using Express.js.

Express.js stands tall as one of the most popular web frameworks for Node.js. Its simplicity and flexibility make it the backbone of countless applications, from tiny APIs to vast web services.

What You'll Learn:

Setting Up an Express.js Application
Routing in Express.js
Middleware in Express.js
Handling Requests and Responses
Serving Static Files
Template Engines and Rendering Views
Authentication and Security
Environment Variables and Configuration
Working with Databases
Best Practices and Common Patterns
Ready to dive in? Let’s get started! 🚀

1. Getting Started with Express.js
Kicking off with Express.js is simple:

Install Node.js: Ensure Node.js is up and running.
Create a New Project: Use npm init -y to generate a package.json file.Add Express.js: Install Express.js with npm i express.
Initialize Your Application: Set up your Express app in an app.js or index.js file.

    const express = require('express');
    const app = express();

2. Understanding Routing in Express.js
Routing forms the core of any Express.js application. Express makes it easy to define routes:

Basic Routing: Manage GET, POST, PUT, and DELETE requests. Dynamic Route Parameters: Extract variable data, such as user IDs, directly from URLs. Handling Query Parameters: Work with data appended to URLs via query strings.

    `// REQUEST HANDLERS
    app.get('/', (req, res) => {
        res.send("Hello, reader!"); // Client-side
        console.log("Hello, reader!"); // Server-side
    });`


    `// ROUTE PARAMETERS
    app.get('/users/:id', (req, res) => {
      const userId = req.params.id;
      res.send(`User ID: ${userId}`);
    });`


    `// QUERY PARAMETERS
    app.get('/search', (req, res) => {
      const searchTerm = req.query.term;
      const limit = req.query.limit;
      res.send(`Searching for "${searchTerm}" with a limit of ${limit} results.`);
    });`

3. Exploring Middleware Functions in Express.js
Middleware acts as checkpoints in the request-response cycle, essential for request modification, response handling, and control flow management.

    const logRequest = (req, res, next) => {
      console.log(`Request made to ${req.url}`);
      next(); // Hand control to the next middleware
    };


    // Implement logRequest as middleware
    app.get('/', logRequest, (req, res) => {
      res.send('Home Page');
    });

4. Managing Requests and Responses
Express offers a streamlined approach to managing HTTP requests and crafting responses:

Accessing Request Data: Easily retrieve client-sent data.
Sending Responses: Use res.send(), res.json(), or res.render() to send data back.
Method Chaining: Combine methods like res.status().json() for more concise code.

    app.get('/example', (req, res) => {
      res.status(200).json({ message: 'Success!' });
    });

5. Serving Static Content

Simplify the process of serving static files, like HTML, CSS, and JavaScript:

    app.use(express.static('public'));

// Serve files directly from the 'public' directory 💡 Files in the
public directory are accessible to all clients.

6. Integrating Template Engines and Rendering Dynamic Views

Express smoothly integrates with template engines like EJS, Pug, and Handlebars to create dynamic web pages:

Setting Up a Template Engine: Begin with EJS for an intuitive
experience. Rendering Dynamic Content: Use res.render() to inject data
into views.

    app.set('view engine', 'ejs');
    app.get('/home', (req, res) => {
      res.render('home', { title: 'Home Page' });
    });

7. Implementing Authentication and Security

Security is paramount in web development, and Express provides robust tools:

Authentication Methods: Implement JWT or OAuth for secure user authentication.
Security Middleware: Utilize helmet for security headers, cors for cross-origin requests, and rate limiting to prevent DDoS attacks.

8. Utilizing Environment Variables and Configuration Settings

Securely manage sensitive data and app configuration with environment variables:

    require('dotenv').config();
    const PORT = process.env.PORT || 3000;

9. Connecting to Databases
Express can interface with various databases, whether NoSQL or SQL:

MongoDB Integration: Manage MongoDB with Mongoose. Relational
Databases: Leverage Sequelize or TypeORM for SQL databases. Note: This
topic warrants a detailed, standalone article.

10. Adopting Best Practices and Design Patterns
Follow these guidelines to build scalable and maintainable Express applications:

Modularize Your Code: Use express.Router to create manageable, modular routes.
Async/Await for Asynchronous Code: Handle async operations efficiently to avoid callback hell.
Error Handling: Pass errors to dedicated middleware using next(err).

If you found this guide helpful, be sure to like and share your thoughts below! 👇

DEV Community: Olaniyi Olabode

📝How I Built a Fully Automated Telegram Moderation Bot — An Engineering Case Study

🚀 The Journey of Building an AI Like ChatGPT

📚 Step 1 — The Library of Humanity (Data Collection)

👨‍🎓 Step 2 — Teaching the Intern (Training)

🧠 Step 3 — The Brain Upgrade (Deep Learning Models)

🗣️ Step 4 — From Student to Speaker (Inference)

🎓 Step 5 — The Polishing School (Fine Tuning)

🛡️ Step 6 — Guardrails and Rules (Safety)

🎉 Step 7 — Graduation Day (Deployment)

🌍 The Bigger Picture

🤖 What AI Really Is Explained in the Simplest Way Possible

What the Heck is “Vibe Coding”? (And Why Developers Can’t Stop Talking About It)

Level Up Your HTML Game with html-tags-utils

Why html-tags-utils?

Features You’ll Love

🚀 All HTML Tags

🌀 Void Tags

📚 Detailed Metadata

🛠️ Utilities

✅ Validation

Installation

How It Works

1. Get All HTML Tags

2. Identify Void Tags

3. Check if a Tag is Valid

4. Filter Tags by Prefix

5. Get Tags by Supported Attribute

How It Compares to html-tags

Use Cases You’ll Actually Need

Contributing

Wrapping It Up

React Custom Hook: useDarkSwitch

Why You Need useDarkSwitch

Features of useDarkSwitch

1. Effortless Integration

2. Full Customizability

3. Sync with System Theme

4. Custom Storage Providers

5. Callback Support

6. Smooth Transitions

SEO Benefits of Adding Dark Mode

The Future of Theming in React

Get Started Today

useDarkSwitch: Empower Your Applications with Seamless Dark Mode

useDarkSwitch: Empower Your Applications with Seamless Dark Mode

What is useDarkSwitch?

Why Choose useDarkSwitch?

How useDarkSwitch Works

SEO and Visibility Challenges

How to Improve Visibility

Advanced Features

Conclusion

Mastering TypeScript with React: A Step-by-Step Guide

🙋🏻‍♀️ Introduction

⚛️ How to Use TypeScript with React?

Types for React Component Props

ReactNode Vs ReactElement

Type Vs Interface

How to Type Props with TypeScript?

How to Type Functional Component Props?

⛓ React Hooks with TypeScript

20 Essential Libraries To Know if You Work with React

1. React Router

2. Axios

3. React Hook Form

4. Styled Components

5. React Query

6. Recoil

7. Framer Motion

8. Emotion

9. React Bootstrap

10. Formik

SQL Enthusiasts, Don’t Miss Out

Master SQL Like a Pro: The Ultimate SQL Cheatsheet

What is SQL?

Basics of SQL

1. SELECT Statement

2. WHERE Clause

3. JOIN Operations

Why `html-tags-utils`?

How It Compares to `html-tags`