#

CSS magic behind this effect
- perspective → Gives the card a 3D effect
- transform: rotateY(180deg) → Flips the card on hover
- backface-visibility: hidden → Hides the back of each side until flipped
- transform-style: preserve-3d → Ensures children keep their 3D position

Combination of translateX and scale css properties

Discord servers were getting huge, but their system wasn't built for that scale. When lots of people are in a server and everyone is chatting, Discord has to send every message to everyone who can see it. With a million people online, this creates an enormous amount of work - if 1,000 people each send one message, that's 1 million notifications to deliver!

Their Big server Midjourney with 10+ millions of users and 1 million active users, were hittting the breakpoint.

Befor making system better, did analysis to find what guild(server) spend its time and memory on,

In some cases it was just a matter of rewriting an inefficient implementation more efficiently.

Some radical changes were also needed.

1. Passive sessions - avoiding unnecessary work

Most people in huge servers aren't actively looking at chat. So instead of sending everything to everyone, they only send full updates to people actively using that server.

This cut their work by 90%! Around 90% of user connections in large servers were "passive."

2. Relays - splitting fanout across multiple machines

One computer process was handling ALL message distribution for huge servers.

So they created "relays"(helper processes/machines) that sit between the guild and users sessions.

- The guild handles core logic

- Relays handle the heavy lifting of sending updates to users.

A big mistake happened while creating relays. Initially, they gave each relay a complete copy of ALL server members,This wasted massive amounts of memory and made creating new relays take tens of seconds. Fixed this by making each relay only store info about the members it actually serves (about 1% of total members).

3. Worker Processes + ETS

Some operations needed to check ALL members in a server (like @everyone pings). With millions of members, this could freeze the entire server for seconds.

Discord wanted to run these heavy operations in the background while the main server process kept handling messages and user actions. But in their Elixir, processes can't easily share data with each other. So when new process is spawn up, it doesn’t automatically see the guild’s member list, copying millions of members between processes would be too slow and memory-heavy

So they used ETS((Erlang Term Storage), an in-memory database to store members list. Worker processes can access the shared data to handle heavy operations in the background.

4. Manifold Offload

Discord wanted to create a separate "sender" process to handle network communications, instead of having the guild process do it, it will reduce work load of guild and if network connection got slow, it wouldn't affect guild.

When they turned it on, performance got MUCH worse instead of better. Using special tracing tools, they discovered the system's "virtual binary heap" feature was the culprit.

Virtual binary heap is forcing full (GC) Garbage collection, if if too much binary memory is used, to reclaim a couple hundred kilobytes of memory, at the cost of copying a heap which was gigabytes in size.

To fix this they increased "min_bin_vheap_size" to few megabytes.

Once fixed, Manifold Offload worked perfectly, reducing the main process's workload and protecting it from network issues.

These optimizations allowed discord to support 1M+ people chatting in real-time with instant message delivery. No lag. No crashes.

It's a minimal real-time app using Next.js, Socket.IO, Express.js and PostgreSQL.

Frontend - https://github.com/rizwanc018/real-time-order-tracker-frontend
Backend - https://github.com/rizwanc018/real-time-order-tracker-backend

I recently played around with mask-image and crafted this animation purely in CSS — no JavaScript involved!

Use integers.
(e.g., store ₹10.99 as 1099 paise).
Avoids rounding errors, keeps precision, and simplifies calculations.

No JS, pure CSS

It's a simple but powerful trick to optimize performance—especially in search boxes, scroll events, or window resizing.
debounce() ensures a function is only executed after a certain delay has passed.
If the event fires again before that delay, the timer resets.

In this example, the search() function will only run after the user has stopped typing for 300ms, preventing excessive or unnecessary calls (like API requests).

🔍 This keeps your app fast, efficient, and clean.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));

What it does:
- Automatically adjusts the number of columns
- No media queries needed!

- repeat(auto-fit, ...): Automatically fits as many columns as possible.
- minmax(min(100%, 250px), 1fr): This is the magic!
min(100%, 250px) - ensures the column doesn't grow larger than the container or 250px — whichever is smaller
1fr - lets it expand if there's extra space