DEV Community: Diana Agliamutdinova

🏡 The Smart Home and the Tireless Assistant: Understanding JavaScript in the Browser

Diana Agliamutdinova — Tue, 12 Aug 2025 15:58:05 +0000

I’ve always remembered stories better than facts. So I started wondering — what kind of story could best explain how JavaScript works in the browser? Here’s what I came up with.

Imagine a story about a very busy programmer and his smart home which is managed by his efficient but not very smart assistant who does not multitask.

🧑💻 The Programmer — You, the one writing instructions.

🤖 The Assistant (V8 Engine) — Executes your instructions one by one.

🏠 *The Smart Home *(Browser) — Full of gadgets (APIs) like timers, smart lights, smart TV, and messaging systems.

💻 Home Management Devices (Browser APIs) — An application that helps an assistant access your smart home features.

📬 Input box queue(The Event Loop) — Messages left by smart home

!!📬 High Priority input( Microtasks) — High-Priority messages from smart home

JavaScript’s One-Task-at-a-Time Flow

The assistant starts her day by executing her employer’s instructions one by one, from top to bottom of the list. To save time and avoid being blocked by long tasks, she delegates anything time-consuming to the smart home using home management devices. Since she can only focus on one thing at a time, she wants to stay available — just in case something urgent comes up.

How do you think she manages more complex tasks that needs her supervision?

⏲️ setTimeout: Boiling an Egg
One task says:

Boil an egg for 6 minutes.

Instead of waiting next to the pot, she sets a timer using the kitchen device💻 and moves on.

When 6 minutes pass, the smart home puts a note into her inbox📬:

Time’s up! Remove the egg!

But she’ll only act on that message once she finishes her current task — this is how the event loop works.

putEggsOnStove()

setTimeout(() => { 
  takeTheEggsOff(); 
}, 6000);

💌 Promises and Microtasks: Dinner with a friend

Another task:

“Invite a friend to dinner.”

She texts a message to his friend to ask about dinner and what time she’s available and moves on. His friend is a very busy woman and wouldn't answer right away. At the same time she cannot just wait for a message all day long, so she delegates the task of waiting to a reminder, that will send a message to her high priority inbox !!📬, so she wouldn't miss it and would be able to finish this task.

The assistant checks her high priority inbox right after her current task, before any other reminders from her regular inbox.

const bookTableDinnerTime = async () ⇒ {
  const response = await askFriend();
  if(response.yes) {
    bookTable(response.time)
  } 
}

🧠 Wrapping It Up

JavaScript in the browser is a lot like our assistant:

✅ One task at a time (single-threaded)
✅ Uses built-in smart devices (Web APIs) for long tasks
✅ Gets notified when tasks are done (via callback queues)
✅ Prioritises some messages over others (microtasks vs callbacks)

💬 What About You?
Have you ever used a metaphor to understand programming better?

Let me know in the comments — or share your favourite one! And if this helped, feel free to follow me for more dev insights 👇

JavaScript #Frontend #WebDevelopment #AsyncAwait #EventLoop #BrowserAPIs #ProgrammingStorytelling

📝 Key Links:

The original article I posted on my LinkedIn link

Web APIs – https://developer.mozilla.org/en-US/docs/Web/API

Event Loop – https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

setTimeout – https://developer.mozilla.org/en-US/docs/Web/API

🛠️ I never use 'never' or taming the Unknown in TypeScript.

Diana Agliamutdinova — Mon, 11 Aug 2025 11:54:04 +0000

🚧 The Real-World Problem: Runtime Exceptions

"Cannot read property ‘x’ of undefined."

Almost every JavaScript developer has seen this error — often at the worst possible time. That’s because JavaScript is flexible at compile time but unforgiving at runtime.

TypeScript introduces a compile-time safety net. But in the real world, especially when working with unpredictable APIs, we still encounter data that’s uncertain or incomplete.

This article explores how to use TypeScript's compiler tools and runtime strategies to safely handle unknown or unexpected data — so your code doesn’t just compile, but also survives in production.

🚩 The First Instinct: Use any

const data: any = getFromAPI();
console.log(data.user.name); // ⚡ might throw!

'any' removes all type checks — you can access any method or property later, and TS won’t stop you. Your code compiles, but it might explode at runtime.

It is very attractive to use any especially when compiler errors are everywhere and you want to see at least some of your code work. But you still want to explore benefits of TS making you code more stable and safe. Lets explore alternatives.

🔐 Prefer unknown over any

function handle(input: unknown) {
  if (typeof input === 'string') {
    console.log(input.toUpperCase());
  }
}

Use 'unknown' when you don’t know the type yet. It forces you to narrow before using it. 'any' skips all checks, 'unknown' makes you prove it’s safe.

So in case you do not know the exact type of data. 'unknown' doesn’t allow you use its methods or properties unless you checked they exist.

🎯 Let the Compiler Help You

TypeScript’s greatest strength is static type checking — it checks your code before it runs. You tell it what types values should have, and it ensures everything matches.

TypeScript’s static type checking shines when you give it strong, precise definitions. Here are some common ways to express different data structures:

Primitive types like string, number, and boolean — e.g., a user's name, age, or account status
Union types like Success | Error — for values that can be in one of several valid shapes
Record types like Record — for mapping keys (like user IDs) to values (like scores)
Tuple types like [number, number] — for fixed-length pairs, such as coordinates
Array types like string[] or Array — for lists of items
Object types like { id: number; name: string } — to define expected shapes directly
*Interfaces *— useful for object-oriented patterns and reusable data structures
Literal types like type Role = 'admin' | 'user' — to restrict a value to a specific set of strings

With these tools, you clearly communicate your expectations, and TypeScript helps enforce them.

type Superpower = 'flight' | 'invisibility' | 'strength';
type Hero = 'IronMan' | 'WonderWoman' | 'Flash';

const powers: Record<Hero, Superpower> = {
  IronMan: 'flight',
  WonderWoman: 'strength',
  Flash: 'invisibility',
};

✅ Inform the compiler how to interpret your data('satisfies' and 'as')

Union types are great for representing values that could take on different forms. But what if you know a value is a specific type — say, a WonderWoman — and want to treat it that way? TypeScript won’t let you access properties unless they exist on every possible type in the union.

That’s where 'as' comes in. You can use a type assertion to tell TypeScript, “Trust me, this is a WonderWoman”:

const hero = getHero(); // hero: Ironman | WonderWoman
(hero as WonderWoman).lasso(); // 👈 This bypasses safety checks 
const nextHeroNumber = hero as number; // ❌ Error — TypeScript 
// won’t allow casting between unrelated types like union of objects // to number.

The 'as' keyword in TypeScript is a type assertion, not a type conversion. It tells the compiler, "Trust me, I know what I'm doing" — but it doesn't actually change the value at runtime.

_> For example, writing "123" as number won't turn a string into a number — TypeScript will still flag this as an error because the types are fundamentally incompatible. So while as overrides some checks, it still respects basic type safety and won't let you assert totally unrelated types.
_

const config = {
  env: 'production',
  debug: false,
} satisfies { env: string; debug: boolean };

The satisfies operator is newer and safer. It lets you assert that a value matches a specific type — without changing its inferred shape.

It checks that:

The value matches the structure of the type
But still preserves literal types (like 'production' instead of just string)

❌ never: Exhaustive check and Exclude types

The never type represents values that never occur. It’s used to indicate that something is impossible or unreachable in your code.

When you use a switch or conditional statements with union types, TypeScript can enforce that all possible cases are handled by assigning the never type to the “default” case:

type Shape = { kind: 'circle' } | { kind: 'square' };

function draw(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      break;
    case 'square':
      break;
    default:
      const _exhaustiveCheck: never = shape; // ❌ if a case is missing, TS complains
  }
}

Here, if you forget to handle a new shape (like 'triangle'), TypeScript complains because the default case expects never — meaning it should never happen.

You can use never in conditional types to filter out types from unions:

type Exclude<T, U> = T extends U ? never : T;

type Clean = Exclude<'circle' | 'square' | 'triangle', 'circle'>; // 'square' | 'triangle'

// Example with literal:
type OnlyShapes<T> = T extends 'shape' ? never : T;
type Result = OnlyShapes<'shape' | 'color'>; // 'color'

This means: For each type T, if it extends U (the type to exclude), replace it with never (remove it), otherwise keep it.

⚠️ How to handle null and undefined?

Sometimes we need to define values that could be set to 'null' or undefined, like optional variables that were not used. Lets see what TS has for us, obviously it wouldnt allow to use these values as normal.

The obvious solution is to check! Then you can use the variable as you wish.

if (value == null) {
  // true for both null and undefined
}

Optional chaining (?.) is a concise syntax that allows you to safely access nested properties or methods on objects that might be null or undefined. Instead of causing a runtime error, it short-circuits and returns undefined if any part of the chain is missing, making your code more robust and easier to read.

user?.profile?.name;

On the other hand, the non-null assertion operator (!) tells TypeScript that you are certain a value is neither null nor undefined at that point, effectively overriding strict null checks.

While this can reduce unnecessary checks, it should be used cautiously, as incorrect assumptions may lead to runtime errors. Together, these operators help manage uncertain data while balancing safety and developer convenience.

user!.login(); // use only if you're 100% sure

🎬 Runtime Type Checks

In real-world projects, values often differ from our expectations—particularly when sourced from APIs or user input. TypeScript performs static analysis during compilation, but it cannot guarantee that runtime data conforms to the defined types. Therefore, some type validations can only be performed at runtime. This is where type guards become essential.

You need runtime checks to confirm the shape and type of your data:

typeof for primitives
Array.isArray() for arrays
instanceof for class instance
Custom guards using is (type predicates)

They help narrow down from 'unknown' or any to something safe.

🔍 'typeof' operator

Use 'typeof' when you want to narrow primitive types safely before doing anything risky with the value — especially if it's coming from an unknown or dynamic source.
It returns a string that tells you the general category:

For strings like "hello", it returns 'string'
For numbers like 42, it returns 'number'
For booleans like true, it returns 'boolean'
For functions, it returns 'function'
For arrays, objects, or even null, it returns 'object'
For variables not assigned a value yet, it returns 'undefined'

> But be careful: typeof null is also 'object', which is a long-standing JavaScript quirk. So, always combine it with a null check like this:

if (typeof value === 'object' && value !== null) { 
  // ✅ Safe: It's a real object, not null 
}

🛡️ Custom Guards with 'is' (Bridge between TS and JS)

If this returns true, treat this value as this type.
Сustom type guards are functions you write to perform runtime checks in JavaScript, but with a special TypeScript syntax (value is Type)

This connects JavaScript’s dynamic checks with TypeScript’s static system by:

Letting you verify data shapes or types at runtime (the JavaScript part)
Informing TypeScript about the narrowed type after the check (the static typing part)

function isUser(value: any): value is { id: number; name: string } {
  return (
    typeof value === 'object' &&
    value !== null &&
    typeof value.id === 'number' &&
    typeof value.name === 'string'
  );
}

Here, the function does real JavaScript checks, and TypeScript uses its special return type to know that inside an if (isUser(value)) block, value is safely a User.

🔍 Use 'in' to Narrow Union Types

The main use of 'in' in TypeScript is as a type guard. It answers:

“Does this object have this property?”
If yes, TypeScript narrows the type accordingly.

type Dog = { kind: 'dog'; bark: () => void };
type Cat = { kind: 'cat'; meow: () => void };

function speak(pet: Dog | Cat) {
  if ('bark' in pet) {
    pet.bark();
  } else {
    pet.meow();
  }
}

✅ At runtime: 'key' in obj checks whether the property actually exists on the object — this is real JavaScript behavior.

✅ At compile time: TypeScript sees 'key' in obj and narrows the union type — helping you write safer code by knowing exactly which variant of a type you're dealing with.

🧪 Bonus: Validate with Zod or io-ts (Next Article Teaser)

import { z } from 'zod';

const User = z.object({ id: z.number(), name: z.string() });
const parsed = User.safeParse(input);

if (parsed.success) {
  parsed.data.name; // ✅ safe
}

Zod lets you define and enforce runtime validation schemas — a powerful complement to TypeScript’s static checks.

🧠 Final Advice: Combine Compiler and Runtime Checks

Let TypeScript infer and check statically
Use guards to validate dynamically
Don’t trust outside data blindly

The type system is here to help — lean on it early, refine later.
Originally I posted this rticle on my Linkedin link

🚀 Your First Telegram Mini App: Fast Deployment with Next.js, Vercel and Telegram SDK

Diana Agliamutdinova — Mon, 11 Aug 2025 10:45:35 +0000

In this guide, I’ll show you how to build a Telegram Mini App for your bot:

⚙️ Create a Next.js project (BFF — backend for frontend)
☁️ Deploy your app on Vercel
🤖 Register your Mini App with BotFather
🔐 Authorize users through Telegram’s Web App initData
💬 Enable core features: Message sharing, Styling tips, Back button initialization
💡 Use Telegram Popups

By the end of this guide, you’ll have a working Mini App inside the Telegram environment that is production-ready on Vercel.

🧱 1. Project set up

🛠 What You’ll Need

Create a bot with @botfather and get your BOT_TOKEN

Create your Next.js app

Open your terminal and run the following command. Follow the interactive setup:

npx create-next-app@latest

🏗️ Using Next.js as a BFF (Backend-for-Frontend) with App Router

Push your project to GitHub

Go to GitHub, create a new repository, and follow the Quick setup instructions to push your local project to the repo.

Deploy your app to Vercel

Telegram doesn’t host your website — your Mini App must be hosted somewhere publicly accessible.

Create an account on Vercel
Link your GitHub account
Select your newly created repository
Follow the prompts to deploy your project

💡 By this point, your app should be live and hosted on the web — ready to be linked with your Telegram bot. Also your app will be redeployed on every commit to the remote repository.

🪄 2. Set Up a Mini App

✅ Method 1: Using /newapp Command

Send /newapp to BotFather
Choose your bot (e.g., @YourAppBot)
Add a title and description for your Web App
Provide the URL of your hosted Mini App (e.g., your Vercel app URL)

⚙️ Method 2: Via BotFather’s Web Interface (Mini App Panel)

Open BotFather’s Mini App panel
Go to My Bots and select the bot you want to update
Navigate to: Settings → Mini Apps
Click on Main App, enable it, and paste in your Mini App’s URL
Optionally, create a Direct Link — this is a link that directly opens your Mini App from Telegram( e.g., t.me//your_bot_name/…)

Once set, the

“Open” button

on the right should launch your Mini App inside Telegram. 🎉

🔐 3. Authorize a user with the Telegram Mini App SDK

Frontend: Get initData from SDK and send it to your backend with API requests.
Backend: Validate initData using your bot token.
If valid: The user is authorized! You can trust the user info in initData.

Install the SDK:

npm install @telegram-apps/sdk-react

Since Telegram injects the Telegram object only in the browser, you must use the SDK inside a client-only component — otherwise, you’ll run into SSR issues.

Use next/dynamic to import your Telegram logic with SSR disabled:

const TelegramInit = dynamic(() => import('../telegram/client/TelegramInit'), {
  ssr: false,
});

Save rawInitData to use it for autorization. Send it to your backend to autorize api requests.

import { useRawInitData } from '@telegram-apps/sdk-react';

export default function TelegramInit() {
  const rawInitData = useRawInitData();
  useEffect(() => {
    if (rawInitdata) {
      localStorage.setItem('token', rawInitdata);
    }
  }, [rawInitdata]);
}

const res = await fetch(url, {
  method: method,
  headers: {
  'Content-Type': 'application/json',
  Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
  body: body ? JSON.stringify(body) : undefined,
});

Also you can get usefull user information from telegram(first_name, last_name, is_bot, photo_url, …)

import { parse } from '@telegram-apps/init-data-node/web';
const initData = localStorage.getItem('token');
    if (initData) {
      try {
        const parsedData = parse(initData);
        if (parsedData.user) {
          createUserInDB(parsedData.user);
          setUser(parsedData.user);
        }
      } catch (error) {
        console.error('Failed to parse user data:', error);
      }

Validate initdata on the server using the Telegram Mini Apps SDK:

token is initdata you get from request headers
BOT_TOKEN is your bot token from BotFather:

import { isValid } from '@telegram-apps/init-data-node/web';
...
const isAuthorized = isValid(token, process.env.BOT_TOKEN!);

If valid, you can safely use the user info for DB operations.

🔐 Don’t Forget: Set Your `BOT_TOKEN`

To securely use your bot’s token in both development and production environments:

🧪 1. Add it to your local environment

Create a .env.local file in the root of your Next.js project and add:

BOT_TOKEN=your_telegram_bot_token_here

This keeps your token out of version control and safe from exposure.

☁️ 2. Add it to Vercel Environment Variables

To make sure your bot works in production:

Go to your project dashboard on Vercel
Open the Settings tab
Click on Environment Variables
Add a new variable:
Name: BOT_TOKEN
Value: your actual bot token

Make sure to

redeploy

your project after saving the variable so it’s available at runtime.

📤 4. Sharing Messages from Mini App

Frontend: User clicks “Share” → send data to /api/share
Backend: Call savePreparedInlineMessage → get message ID
Frontend: Call shareMessage({ id }) with the message ID

Frontend:

import { shareMessage } from '@telegram-apps/sdk-react';
// send info to the backend
const response = await shareTodo(todoId, userId, title, description);
if (response.ok) {
// get event id
  const data = await response.json();
  if (shareMessage.isAvailable()) {
// share message
    await shareMessage(data.id);
  }
}

Backend:

On your backend, receive the data and call the Telegram Bot API’s savePreparedInlineMessage method.

const shareMessage = {
  user_id: userId,
  result: {
    type: 'photo',
    id: `todo-${todoId}`,
    photo_url: 'https://example.com/photo.jpg',
    thumbnail_url: 'https://example.com/thumb.jpg',
    title: `📝 ${todoTitle}`,
    description: todoDescription || 'A task from my Mini App',
    caption: `**${todoTitle}**\n\n${todoDescription || ''}`,
    parse_mode: 'Markdown',
  },
};

// send reuest to Telegram Bot API
const result = await savePreparedInlineMessage(shareMessage);
return NextResponse.json({ id: result.id });

📱 5. Telegram-Specific Features

🔙 Back Button Behavior

If your Mini App has multiple pages or routing, you might want to enable back navigation. By default, the Telegram back button doesn’t behave like a browser back button — it needs to be explicitly initialized and controlled.

On pages where you want the back button visible, you should show it; on others, hide it. Otherwise, pressing back will close the Mini App instead of navigating back.

❌ Closing Behavior

If you want to remind users to save their data before closing the app, you can enable a confirmation prompt on close. This helps prevent accidental loss of unsaved changes by asking the user for confirmation before exiting.

🎨 Mini App Component

To customize your Mini App — like setting the header or background colors — or to use status methods like checking if the Mini App is active, you first need to initialize (mount) the Mini App component. Only after mounting can you safely call these methods.

'use client';

import { useEffect } from 'react';
import {
  backButton,
  closingBehavior,
  init,
  miniApp,
  useRawInitData,
} from '@telegram-apps/sdk-react';

export default function TelegramInit() {
  const rawInitdata = useRawInitData();

  useEffect(() => {
    try {
      init(); // Initialize Telegram SDK
      if (backButton.mount.isAvailable()) {
        backButton.mount();
        backButton.onClick(() => {
          if (backButton.isMounted()) {
            backButton.hide();
          }
          window.history.back();
        });
      }
      console.log('TelegramProvider - init()');
      if (miniApp.mountSync.isAvailable()) {
        miniApp.mountSync();
      }
      if (closingBehavior.mount.isAvailable()) {
        closingBehavior.mount();
        closingBehavior.isMounted(); // true
      }
      if (closingBehavior.enableConfirmation.isAvailable()) {
        closingBehavior.enableConfirmation();
        closingBehavior.isConfirmationEnabled(); // true
      }
    } catch (err) {
      console.error('Telegram SDK init failed:', err);
      const cleanUrl = window.location.origin + window.location.pathname;
      window.history.replaceState({}, '', cleanUrl);
    }

    return () => {
      if (backButton.isMounted()) {
        backButton.unmount();
      }
    };
  }, []);

💬 6. Telegram Popups

Basically you create a popup through popup.show with buttons you need.

Then you wait for buttonId which popup.show returns(which button user clicked) and do accordingly.

import { popup } from '@telegram-apps/sdk-react';

export const showTelegramPopup = async (
  title: string,
  message: string,
  buttonText: string[]
): Promise<boolean> => {

  if (popup) {
    const promise = popup.show({
      title: title,
      message: message,
      buttons: buttonText.map((text, index) => ({
        id: `button_${index}`,
        type: 'default',
        text: text,
      })),
    });
    // popup.isOpened() -> true
    const buttonId = await promise;
    if (buttonId === 'button_0') {
      return true;
      // do something
    } else if (buttonId === 'button_1') {
      return false;
      // do something else
    }
    // If buttonId is neither 'ok' nor 'cancel', return false by default
    return false;
  }
  // If popup is not available, return false
  return false;
};

🔗 Links

Telegram Mini Apps SDK: @telegram-apps/sdk-react and docs
Telegram Bot API: https://api.telegram.org and docs on how to use it.
Check out final app

🧠 Final Thoughts

Telegram Mini Apps are a powerful way to create native-like experiences directly within Telegram. With the help of Vercel, you can go from idea to live app in no time.

🔥 Teaser

There’s more to explore — like handling payments with Telegram Stars — but it didn’t quite fit in this article.

If you’d like me to cover it next, please like this post or drop a comment below letting me know!

Your feedback helps me prioritize what to write about next.

This article was originally published on Medium.