
> "Attention is all you need."
> — Vaswani et al., 2017 [^Transformer]

When researchers at Google Brain published that paper title in 2017, it sounded bold. Maybe even smug. But they were right. Transformers didn't just improve how we do NLP; they changed the trajectory of deep learning entirely.

Today, transformers are the backbone of models like GPT and BERT and used by nearly every cutting-edge AI model in language, vision, and beyond. Let's unpack why this architecture became the de facto foundation for modern machine learning.

## What is a Transformer?

At its core, a transformer is a neural network architecture built around a mechanism called **self-attention**. It's a way for the model to evaluate relationships between all tokens in an input sequence simultaneously, assigning dynamic weights to each one.

No recurrence, no convolutions. Just attention.

> While the original transformer architecture is built entirely on attention mechanisms (no recurrence, no convolutions), later variants sometimes reintroduce convolution (e.g., for local structure in images or speech) or recurrence (e.g., in audio models like Conformer[^Conformer]) for domain-specific improvements.[^CoAtNet][^LeViT]

## A Quick Look Back

Before transformers, deep learning relied heavily on recurrent or convolutional architectures:

* **RNNs and LSTMs** – Good at handling sequential data but struggled with long-term dependencies, were slow to train, and hard to parallelize.
* **CNNs** – Efficient and spatially aware, especially in vision tasks, but poorly suited for modeling sequences or variable-length inputs.
* **Encoder-decoder RNNs** – Enabled early breakthroughs in translation and sequence generation but inherited the same limitations from their recurrent structure.

All of these architectures faced challenges with **long context**, **training efficiency**, and **generalization**.

## The Breakthrough

The key innovation in transformers is the **self-attention** mechanism. Instead of processing sequences one step at a time, the model compares every token to every other token in the input, all at once.

Self-attention allows the model to:

* **Compute pairwise interactions** between all tokens in a sequence, enabling dynamic context-aware representations.
* **Capture dependencies regardless of position**, so tokens far apart in the sequence can directly influence each other.

Let's take the following sentence as an example,

> "The animal didn't cross the street because **it** was too tired."

The word "it" could refer to either "animal" or "street". Transformers can simultaneously weigh both options and use global context to resolve ambiguity.

This mechanism is efficient, scalable, and forms the core of every transformer block.

### Key Components

Transformers are built from a few foundational components that work together to model complex relationships within sequences.

**1. Multi-Head Self-Attention**

Rather than attending to input tokens with a single mechanism, transformers use **multiple parallel attention heads**. Each head learns different types of relationships (e.g., syntactic, semantic) by projecting the inputs into different subspaces and performing scaled dot-product attention.

This allows the model to capture diverse aspects of the sequence in parallel.

**2. Positional Encodings**

Since transformers process input tokens simultaneously (not sequentially), they lack an inherent sense of order. To address this, **positional encodings** are added to token embeddings. These can be:

* **Fixed (sinusoidal)** as in the original paper, or
* **Learnable**, which are more common in later variants.

This gives the model information about the position of each token in the sequence.

**3. Feed-Forward Networks (FFNs)**

After the attention step, each token representation is independently passed through a **position-wise feed-forward network**. Typically a two-layer MLP with a non-linear activation like ReLU or GELU.

This adds non-linearity and enables the model to mix and transform the attended representations.

**4. Residual Connections and Layer Normalization**

Each sub-layer (attention and FFN) is wrapped with:

* A **residual (skip) connection**, which helps with gradient flow and combats vanishing gradients in deep networks.
* A **LayerNorm operation**, applied either before (Pre-LN, now common for stability) or after (Post-LN, as in the original transformer) the sub-layer, depending on the implementation.

These components stabilize training and accelerate convergence.

## Architecture

The original transformer architecture is made up of two main components:

* **Encoder** – Processes an input sequence to produce contextual representations.
* **Decoder** – Uses those representations to generate an output sequence, one token at a time, with attention over both the encoder output and previously generated tokens.

This **encoder-decoder** setup is ideal for tasks like machine translation and summarization.

Over time, different configurations of the transformer architecture emerged:

* **Encoder-only models** (e.g., BERT) – Focused on understanding and representation. They process input bidirectionally and are used for classification, question answering, and embedding tasks.
* **Decoder-only models** (e.g., GPT) – Generate sequences autoregressively using only causal attention. They're used for text generation, code completion, and reasoning tasks.
* **Encoder-decoder models** (e.g., T5, BART) – Combine both for more complex tasks like summarization, translation, and instruction following.

A single transformer block contains:

* **Multi-head self-attention**
* **Position-wise feed-forward network (FFN)**
* **Add & Norm layers** (residual connections + layer normalization)
* **Positional encodings** to inject order into the sequence

And the full model typically stacks **N** such blocks in sequence:

```plaintext
[Input] → [Token + Positional Embeddings] → [Attention → FFN → Norm] × N → [Output]
```

In encoder-decoder models, the decoder additionally attends to encoder outputs:

```plaintext
[Encoder Input] → [Encoder Blocks] → [Context]
                                ↓
[Decoder Input] → [Masked Attention → Encoder Attention → FFN → Norm] × N → [Generated Output]
```

This flexibility in structure is what makes transformers so widely applicable across modalities and tasks.

## Why it Changed the Game

### 1. Parallelizable Training

Unlike RNNs, transformers process all tokens simultaneously. That means:

* Faster training (massively faster on GPUs/TPUs)
* Better scalability across datasets

### 2. Long-Range Context

They handle long sequences better than previous architectures. This made it possible to understand paragraphs, documents, and even code.

### 3. Transfer Learning Sweet Spot

Transformers enabled pretraining on massive data, then fine-tuning on smaller, task-specific datasets.

Pretrain on large-scale internet text (e.g., Common Crawl, books, forums), then fine-tune to adapt for downstream tasks like chatbots, summarization, or code generation.

### 4. Multimodal Compatibility

Transformers work not just on text, but also:

* **Images** (Vision Transformers, CLIP)
* **Audio** (Whisper, Wav2Vec)
* **Video** (TimeSformer, ViViT)
* **Code** (CodeBERT)

One architecture. Many modalities.

## Real-World Impact

* **OpenAI GPT series** → Natural text generation and reasoning
* **Google BERT** → Search and context-aware NLP
* **Meta DINOv2** → Self-supervised visual learning
* **DeepMind AlphaCode** → Research system that approaches competitive programming performance using transformer-based code generation

It's not just research. It's product-critical.

## Are Transformers Perfect?

Nope. Some challenges remain, like:

* **Quadratic memory cost** with long inputs due to the self-attention mechanism computing pairwise interactions between all tokens in a sequence. Though workarounds like FlashAttention[^FlashAttention], Longformer[^Longformer], Reformer[^Reformer], and Performer[^Performer] are emerging.
* **Training cost** is huge.
* **Tokenization limitations –** Subword tokenization mitigates out-of-vocabulary issues but can still introduce inefficiencies, inconsistencies across languages, and challenges with rare or complex morphology. Recent research explores byte-level and tokenizer-free models to improve this.
* **Limited context memory –** Transformers have a fixed context window and do not retain information across separate sequences unless augmented with external memory mechanisms (RAG or vector databases are emerging).

But for all their flaws, the power-to-flexibility ratio is unmatched.

## Final Thoughts

Transformers didn't just solve problems, they **redefined what problems we could solve**. They scaled with hardware, played well with data, and generalized across tasks and modalities.

In deep learning, it's rare for a single architecture to become the **default** across disciplines. Transformers did that.

And they're still evolving.

[^Transformer]: https://arxiv.org/abs/1706.03762
[^CoAtNet]: https://arxiv.org/abs/2106.04803
[^LeViT]: https://arxiv.org/abs/2104.01136
[^Conformer]: https://arxiv.org/abs/2005.08100
[^FlashAttention]: https://arxiv.org/abs/2205.14135
[^Longformer]: https://arxiv.org/abs/2004.05150
[^Reformer]: https://arxiv.org/abs/2001.04451
[^Performer]: https://arxiv.org/abs/2009.14794


Transformers Explained — Why They Changed Deep Learning Forever


[Bastion](https://bastion.traction.one) [v10](https://github.com/TheBastionBot/Bastion/releases/tag/v10.0.0) lays the foundation for some new ways to interact with Discord using Discord's new Slash commands, Select Menus, Input Modals, Button Interactions, and all the latest features available to Discord bots.

There's also a bunch of new features in the pipeline for future releases. But let's talk about what's changed in the current version.

### Slash Commands

Slash commands make it way easier for users to use Bastion's commands with builtin command invocation in Discord.

All of Bastion's commands are now Slash Commands. You can check out [this table](https://github.com/TheBastionBot/Bastion/issues/953) to see the new Slash command equivalent for the existing commands you used to use. Or type `/` in Discord to see the list of all the commands in Bastion.

Discord only allows a limited amount of Slash commands. So, a few existing commands had to be removed because they are not required or redundant. And some commands will be rewritten and improved to make use of new Discord features and will be coming soon in the upcoming updates.

### Important Changes

Almost all of the modules have been rewritten with major changes which brings lots of improvements and fixes. But here are some important changes you should know about:

- Music
  - Huge performance improvements.
  - Music search and playback are way faster than before.
  - Audio quality will have some improvements but it's not really noticeable.
  - One drawback is that it won't support the huge variety of audio sources that it did before.
  - Music commands would only work in Voice Channel Chat.
- Reaction Roles
  - Self Roles can now be used to do this as they use Discord's Select Menu interaction where user can simply select the roles they want to assign themselves.
  - But I'm still experimenting with a better "reaction" roles system using Discord's new interactions. And it will be coming soon.
- Voice Sessions
  - **#session-control** channel isn't created anymore when creating a voice session category.
  - When a new temporary voice channel is created, Bastion sends a message in the voice channel chat which has buttons that can be used to control your voice session.
- Voting Channels
  - Now works only when slow mode is enabled in the channel.
  - When you add a voting channel, Bastion will automatically configure slow mode in the channel.
- Giveaways
  - Giveaways can now be manually ended.
  - Manual giveaways can now run forver.
- Polls
  - Polls can now be manually ended.
  - Manual polls can now run forver.
- Suggestions
  - Suggestions now use Discord's Button interactions instead of reactions for suggestion actions.
- Reports
  - Reports now use Discord's Button interactions instead of reactions for report actions.
- Localization
  - Automatic text localization using server's language.
  - DM commands will use user's language for automatic localization.
- Player Stats
  - As [Overwatch 2](https://overwatch.blizzard.com) was released, the overwatch command won't get Overwatch 1 stats. And a stats API for Overwatch 2 isn't available yet. Once it's available, it'll be implemented.
  - [Rocket League API](https://api.rocketleague.com/) was shutdown soon after it was acquired by Epic Games. Therefore, the command to get the stats will be added back as soon I can find other ways to get the stats.
- Moderation Commands
  - Discord now has builtin slash commands for `ban`, `kick`, `nickname` and `timeout`.
- Bastion Profiles
  - Discord offers better builtin profile customization. Data from Discord can be used instead of having a separate Bastion profile.
  - Although I'm still experimenting a combination of both to allow users as much customization as possible.
- Badges
  - A new badge system is coming soon that'll allow self hosted users to use badges & customize them.

Here are some changes you should be aware of if you're hosting a private instance of Bastion:

- Music is not dependent on `youtube-dl` and `ffmpeg` anymore.
- Credentials and configurations are now unified in one `settings.yaml` file.
- Direct message relay is now configurable in the settings file `settings.yaml`.
- All the settings in `settings.yaml` can be overriden using environment variables.
- As all commands are now slash commands, the commands can't be scheduled anymore. I'll be experimenting new ways to bring it back as soon as possible.
- Removed all dependency Bastion had on its Omnic backend. So, even if all of Bastion's services shutdown in the future, you'll still be able to run your own self hosted instance of Bastion.
- Stats API is unavailable for the time being. It'll be back in upcoming updates with some improvements.
- It's now safe to shutdown the bot by doing `Ctrl` + `C`. `shutdown` command isn't necessary.

### Dashboard

  - Dashboard will be temporarily disabled to implement support for v10.
  - This also implies that Server Pages will be disabled during this time.
  - Dashboard support (including Server Pages) for self hosted instances will be coming soon.

### Verification
  - Captcha Verification is disabled for the time being.
  - A new verification system is coming soon in the upcoming updates to verify users directly within Discord without having to open Bastion's dashboard.
  - Discord is testing a feature to allow bots to act as a verification provider for servers. Which means a builtin way to verify users through bots might be coming. If this gets released, it'll be added to Bastion as soon as possible.

### Removed

- Removed message filter & mention spam filter as Discord's builtin AutoMod in server settings can be used for this.
- Removed the option to change global music volume to improve performance. Volume can be controlled from user's side using Discord's builtin methods.
- Removed Bastion's announcements. Discord's builtin announcement channels can be used to do this.
- Removed command module used to enable/disable commands. Slash command permissions can be used to do this.
- Removed members only mode. Slash command permissions can be used to do this.
- Removed lockdown mode. It's wasn't reliable when a channel had permission overrides.
- Bastion Coin transaction logs won't be stored for the foreseeable future.
- Removed reaction announcements.
- Removed reaction pinning. The same number of steps is required to pin a message using Discord's builtin method.
- Although moderation cases are logged, they are not saved anymore. This also means you can't change the reason of a moderation case.
- Removed blacklisting users and servers from using Bastion. Although a better system will come to block users and servers abusing Bastion's features.
- Removed command to leave the server.
- Removed commands to change Bastion's username, avatar & nickname.
- Removed command list & help commands as Discord provides builtin ways to do this for slash commands.
- Removed command prefixes as all commands are now slash commands.

There's a lot of features coming soon in the next few weeks. So, stay tuned for more announcements! If you have any suggestions, or need any sort of help with Bastion, feel free to join [Bastion HQ](https://discord.gg/fzx8fkt) on Discord and we will help you out.

Also, a huge thanks to all our [patrons](https://patreon.com/bastionbot) for their continuous support of Bastion without whom this wouldn't have been possible.
If you want to support the continuous development of Bastion you can do so through our [Patreon](https://patreon.com/bastionbot) and get some cool rewards for it too!

❤️


Bastion v10 — A new foundation!


CORS, or Cross-Origin Resource Sharing, is a browser security mechanism that controls how resources on a web server are shared with different origins. It provides a secure way for web applications to request data from a different domain than the one that served the web page.

![CORS error](/images/notes/cors-error.svg)

## Why Do We Need CORS?

Browsers enforce the **same-origin policy** to prevent potentially malicious interactions. While websites can send requests to other origins, browsers block access to the responses unless the target server explicitly allows it. CORS loosens this restriction by allowing servers to specify which origins are allowed to access their resources, enabling secure cross-origin communication.

## Understanding Origin

![web address](/images/notes/web-address-origin.svg)

A website's origin is defined by its **scheme (protocol), domain, and port**. Even a slight difference in any of these three elements results in a different origin. This is why an `https://example.com` page cannot automatically access data from `http://example.com` or even `https://api.example.com`.

## The Mechanics of a Cross-Origin Request [^1]

When a website makes a cross-origin request, the browser attaches an `Origin` header with the site's origin. The server then responds with an `Access-Control-Allow-Origin` header. If the value of this header matches the requesting origin, the browser allows the response data to be processed by the web page.

If the origin in the request header does not match the server's `Access-Control-Allow-Origin` header, the browser blocks access to the response. This safeguard prevents unauthorized domains from retrieving sensitive data.

For same-origin requests, browsers do not send the `Origin` header and CORS is not involved. The `Origin` header is only included in specific situations, mainly those involving cross-origin requests or potentially unsafe operations like `POST`, `PUT` or `DELETE`.

Static resources like images, scripts, and stylesheets can often be loaded cross-origin without CORS, but JavaScript access to their content is restricted unless CORS headers are present.

## Enabling Cross-Origin Requests

To allow cross-origin requests, servers can be configured to include the appropriate CORS headers. One common approach is **whitelisting** trusted origins. By adding the allowed origins into the response header, the server explicitly permits access. Alternatively, setting `Access-Control-Allow-Origin` to `*` allows any domain to request your resource, though this is generally discouraged in production environments due to security concerns.

## Preflight Requests

For certain HTTP methods like `PUT`, `PATCH`, and `DELETE` or when non-standard headers are used, browsers perform a **preflight request**. This is an `OPTIONS` request sent by the browser to the server to verify that the actual request is safe to send.

Preflight requests are not sent for *simple* requests, such as `GET`, `HEAD`, or `POST` with standard headers and content types.

In the preflight process:
1. The browser sends a preflight `OPTIONS` request.
2. The server evaluates the request's origin and method, then responds if the primary request is allowed.
3. If approved, the browser proceeds with the main request.

If the server doesn't allow the request (by not including the proper CORS headers, such as `Access-Control-Allow-Origin`), the browser will block the primary request. Note that in some browsers, preflight requests might not appear in the network tab, making troubleshooting a bit tricky.

## Performance Considerations

Preflighting can essentially double the number of requests made from the client, impacting performance. To optimize, servers can cache preflight responses using the `Access-Control-Max-Age` header. This reduces the need to send a preflight request for every interaction. As Nick Olinger has discussed, keeping your API on the same origin as your web application can altogether sidestep the performance hit of preflights.[^2]

## Final Thoughts

CORS is a vital tool for modern web development, balancing the need for resource sharing with the imperative of security. By correctly configuring CORS, you can allow your applications to communicate seamlessly across domains, without compromising on safety.

Understanding and applying CORS effectively can help you build more robust and secure web applications that communicate safely across different domains.

[^1]: https://www.w3.org/TR/2020/SPSD-cors-20200602
[^2]: https://www.nickolinger.com/blog/2021-08-04-you-dont-need-that-cors-request


CORS


As of writing this post Bastion has been added to more than 5000 Discord servers that make up more than a million users!


The average user that interacts with Bastion only sees the Bot client. But what actually makes up Bastion?

- [Bastion Bot](https://discordapp.com/oauth2/authorize?client_id=267035345537728512&scope=bot&permissions=8) — The application you install in your systems that powers the Discord Bot Applications.
- Bastion API Server — The web server running along side the bot that exposes REST APIs to directly interact with the bot.
- Omnic — The backend server that does most of the data gathering and processing work so that the bot can simply request data from the server without ever needing to do anything on users' systems.
- [Website](https://bastion.traction.one) — The main website that users first see when they search for Bastion
- [Dashboard](https://bastion.traction.one/dashboard) — The web dashboard to manage Bastion from the browser and the site that powers every community's [public page](https://bastion.traction.one/servers/267022940967665664).

All these services interact with each other and run 24x7 across multiple servers to power all the communities that depend on Bastion from across the world.

To run all these services without any downtime Bastion depends on some amazing cloud service providers. Bastion uses multiple [DigitalOcean](https://digitalocean.com) droplets to run all its backend services including the bot application. And to run the website and dashboard Bastion uses [Vercel](https://vercel.com). Both these service providers provide some really amazing services and if you're reading this you should definitely check them out!


Bastion's microservices and how they are powered


Although Among Us was released in 2018, it has rose to popular this year and
has attracted a lot of gamers.

If you don't already know about Among Us, I'd recommend you to check out the
game first.

## How to be a good Among Us player?

To be a good detective Among Us you need to keep in-game information in check
and see when someone's narrative don't add up.

And to be a good impostor in the game you need to gain cremates' trust and keep
track of who to kill first so that you're not the only suspect who stays alive.

I use these tactics in my gameplays - which you can checkout in my [Live Streams
on Twitch](https://twitch.tv/iamtraction) or [Game Highlights in YouTube](https://www.youtube.com/playlist?list=PLm-NJedcKYoYdgqVBgh44LjmP67u2kfqF).

But sometimes your brain is not working 100% capacity because you have been
playing for hours, or for whatever reasons. It happens, and that's why I made
a toolkit for Among Us to help Among Us gamers keep track of in-game information
while playing.

It can also be used to keep track of your game stats.

**So, what are you waiting for?** Go checkout the [Among Us Toolkit](https://amongus.traction.one/)
and hit me up on [Twitter](https://twitter.com/iamtraction) if you've got any
feedback!


Announcing Among Us Toolkit — Be the best Detective and Impostor!


## Docxy isn't really a new product

Two years ago I released the first version of AwesomeDocs. I wanted an easy way
to generate documentation sites for my projects and I was not satisfied with
other documentation sites. So, obviously, making my own documentation generator
was the only option... right?

Anyways, I built AwesomeDocs and started using it for my projects. But, to be
honest, it lacked in some important ways. So I slowy moved away from it as I
realized that fact. I started using many different documentation generators
again, and I found myself again in the same situation - not being satisfied with
them.

And that's why a few days ago I decided I need to rewrite AwesomeDocs and
implement everything it lacked so I can start using it again - and stick to it
this time.

## Docxy is the new AwesomeDocs

Docxy is the result of that rewrite. It now includes everything that was missing
from AwesomeDocs and the development process is much simpler now too!

So, yay!

## Docxy features

- Easy to set up
- Generate website from Markdown files
- No need to write a single line of code
- Customizable branding
- Built with React
- Generates a static bundle
- Can be deployed anywhere
- Preview changes in real time
- Dynamic dark & light modes
- Offline support
- Blazing-fast
- Local search support
- Migrate from AwesomeDocs in minutes

<br />

**So, what are you waiting for?** Checkout [Docxy](https://docxy.traction.one/)
today!


Announcing Docxy — Generate documentation sites using Markdown


Android users have always been able to customize app icons. Well, at least long
before iOS users. iOS jailbreakers have been doing this for quite a while too.

When iOS first introduced Siri Shortcuts, it allowed users to add custom icons
to their home screen. But it wasn't until the release of iOS 14 that introduced
Widgets, App Library and the ability to hide homescreen icons that opened up a
whole new world for iOS customization.

## And here's how you can add custom icons in iOS

1. Open the Shortcuts app.
1. Add a new Shortcut.
1. Tap the **Add Action** button.
1. Select the **Scripting** action.
1. Select the **Open App** option.
1. Select the app whose icon you wanna change.
1. Add it to your homescreen. Here you can even select to show it in your Apple
Watch.
1. Set a name for your app, choose an icon, and Add the shortcut.
1. Voilà. You now have a custom icon for your app.
1. Optionally, remove the default icon from your homescreen so you don't have
duplicates.

## Hold on...

If you're looking for some cool icon packs, [check out my collection of icons](https://icons.traction.one).
Try it out, you're gonna love it!


How to add custom icons in iOS?


Timers are deceptively simple in JavaScript. Call `setInterval(fn, delay)` and boom, your function runs repeatedly. But under the hood, `setInterval` has sharp edges like overlapping executions, piling up calls, and imprecise control that many developers don't see until they hit real-world timing issues.

> When I say `setInterval` causes "overlapping executions", I mean it schedules new runs even if the previous one hasn't finished. In JavaScript, these executions are actually queued and never run at the exact same time. Still, this can lead to multiple pending executions piling up, which can cause performance issues.

In this post, we'll walk through why `setInterval` can be problematic, and how to implement a smarter, safer version of it yourself. You'll end up with a reusable utility that behaves like `setInterval`, but without its flaws.

## The Problem with `setInterval`

Let's start with what happens if you naively use `setInterval` for a task that takes longer than its interval:

```javascript
// simulate a task that takes 3 seconds
function sleep(ms) {
    const start = Date.now();
    while (Date.now() - start < ms) {
        // busy wait
    }
}

let count = 0;
function tick() {
    const now = new Date().toLocaleTimeString();
    console.log(`[${ now }] Tick ${ ++count } START`);
    sleep(3000);
    console.log(`[${ new Date().toLocaleTimeString() }] Tick ${ count } END`);
}

// execute tick() every 1 second
setInterval(tick, 1000);
```

You might expect this to run every second. Instead, you get overlapping calls:

```rust
[19:50:01] Tick 1 START
[19:50:04] Tick 1 END
[19:50:04] Tick 2 START
[19:50:07] Tick 2 END
[19:50:07] Tick 3 START
[19:50:10] Tick 3 END
...
```

Each execution lasts 3 seconds, but since `setInterval` doesn't wait for one execution to finish before scheduling the next, the timer keeps firing, causing call stacking and potentially freezing your app.

## The Safer Alternative

Here's the idea: recursive `setTimeout`. Instead of setting a fixed interval that blindly schedules calls, we wait until the current execution completes before scheduling the next one.

```javascript
function betterInterval(task, delay) {
    const wrapper = async () => {
        await task();
        setTimeout(wrapper, delay);
    };
    wrapper();
}
```

This version avoids overlapping calls and guarantees a minimum delay between the end of one run and the start of the next.

```rust
[20:10:01] Tick 1 START
[20:10:04] Tick 1 END
[20:10:05] Tick 2 START
[20:10:08] Tick 2 END
[20:10:09] Tick 3 START
[20:10:12] Tick 3 END
...
```

#### When this Is better

| Use Case | Better | Custom Interval? |
|----------|--------|------------------|
| Lightweight periodic logging | ❌ | `setInterval` is fine         |
| Network polling              | ✅ | Prevents overlapping requests |
| CPU-heavy tasks              | ✅ | Avoids browser lock-ups       |
| Real-time UI animation       | ❌ | Use `requestAnimationFrame`   |
| Dynamically adjustable loops | ✅ | Use `setTimeout` based loop   |

## Building a Fully Featured Replacement

Let's take it further. Here's a custom utility that:
- Prevents overlaps
- Maintains accurate timing (like `setInterval`)
- Supports start, stop, and dynamic delay updates

```javascript
function createInterval(task, delay) {
    let timerId = null;
    let running = false;

    const loop = async () => {
        const start = performance.now();
        await task();

        const elapsed = performance.now() - start;
        const nextDelay = Math.max(0, delay - elapsed);

        if (running) {
            timerId = setTimeout(loop, nextDelay);
        }
    };

    return {
        start() {
            if (!running) {
                running = true;
                loop();
            }
        },
        stop() {
            running = false;
            if (timerId) {
                clearTimeout(timerId);
            }
        },
        setDelay(newDelay) {
            delay = newDelay;
        },
    };
}

// example usage
const smartInterval = createInterval(tick, 1000);
smartInterval.start();
smartInterval.stop();
smartInterval.setDelay(500);
```

## Final Thoughts

`setInterval` is easy, but it's often too blunt an instrument for real-world timing needs. If your task is asynchronous, long-running, or dynamically timed, it's worth reaching for a smarter solution.

By building your own interval logic using `setTimeout`, you avoid overlapping calls, gain precise control, ensure better performance, and it gives you the control you didn't know you were missing.


Building a Better `setInterval`


Modern web applications often respond to events that can fire rapidly, such as scrolling, resizing, or typing. If not managed carefully, these high-frequency events can degrade performance and user experience. Two essential techniques for controlling event handler execution are **debounce** and **throttle**. Both are used to limit how often a function runs, but they serve different purposes and behave differently.

![Frequent Event Handlers](/images/notes/debounce-throttle-events.svg)

## Debounce

Debouncing ensures a function is only executed after a certain period has passed *since the last event*. This is ideal when you want to wait for a pause in activity before running your function, such as waiting until a user has finished typing before validating input or making an API call.

### How it Works

A timer is set each time the function is invoked. If it's called again before the timer completes, the timer is reset. Only after the user stops triggering the event for the given time does the callback execute.

> This behaviour is for trailing edge debouncing. You can also configure it to execute immediately on the first event (leading edge) and ignore subsequent calls until the delay passes.
> It does not execute again after the user stops interacting, unless configured for both leading and trailing execution.

**Example**

```javascript
// trailing edge debounce
function debounce(callback, wait = 300) {
    let timeout;
    return function (...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            callback.apply(context, args);
        }, wait);
    };
}
```

### Use Case

Debounce is commonly used for:
- **Search input fields -** Only send an API request after the user stops typing.
- **Window resizing -** Only recalculate layout after resizing ends.
- **Auto-save or batch updates -** Reduce server calls by waiting for a pause in user actions.

## Throttle

Throttling ensures a function is executed at most once every specified interval, regardless of how many times the event is triggered. This is useful for events that happen in quick succession, where you want regular, controlled updates, such as during scrolling or dragging where you want consistent updates without overwhelming the browser.

### How it Works

A throttled function executes immediately, then ignores subsequent calls until the interval passes.

> This behaviour is for leading edge throttling. You can also configure it to execute at the end of the interval (trailing edge), which delays the callback until the throttling period finishes, ensuring the last event is handled.

**Example**

```javascript
// leading edge throttle
function throttle(callback, wait = 300) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= wait) {
            lastTime = now;
            callback.apply(this, args);
        }
    };
}
```

### Use Case

Throttle is typically used for:
- **Scroll events -** Run animations or UI updates in sync with scroll.
- **Resize events -** Avoid too frequent calculations.
- Limiting how often the handler executes during continuous actions like **dragging** or **mouse movement**.

## RequestAnimationFrame (rAF) - Browser-Optimized Throttling

`window.requestAnimationFrame` is a browser API that schedules a function to run before the next repaint, typically syncing with the display's refresh rate (typically every 16ms at 60Hz) but can vary depending on device and browser performance. While not a throttle in the strict sense, it limits execution to once per animation frame, making it ideal for visual updates during rapid events like scrolling or resizing. Unlike throttle, rAF does not guarantee a fixed interval, but aligns updates with the browser's rendering cycle for smoother animations.

**Example:**
```javascript
let latestValue;
let rafId;

function updateUI(value) {
    latestValue = value;
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(() => {
        document.querySelector(".element").textContent = latestValue;
    });
}
```

Use `rAF` for smooth rendering and visually synced updates rather than for strict control over the execution rate of non-visual logic.

## Further Reading

- [Debouncing and Throttling Explained Through Examples](https://css-tricks.com/debouncing-throttling-explained-examples)
- [Debounce vs Throttle: Definitive Visual Guide](https://kettanaito.com/blog/debounce-vs-throttle)


Debounce and Throttle


[Conventional Commits] is a specification designed to infuse clear, human and machine readable meaning into your commit messages. By establishing a uniform format, teams can streamline communication, automate release processes, and generate detailed changelogs without the usual hassle.

A well-structured commit message can transform how your team interacts with the codebase by:

- **Enhancing Clarity and Consistency:** Clearly defined commit messages improve shared understanding across the team.
- **Enabling Automation:** Tools can automatically generate CHANGELOGs, calculate semantic version bumps, and trigger build processes based on commit type.
- **Facilitating Collaboration:** When everyone follows the same guidelines, it's easier to track changes, debug issues, and maintain historical context.

## Commit Structure

The commit message should be structured with two mandatory and three optional parts:

```plaintext
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
```

1. **Type:** Indicates the nature of the change (e.g., `feat`, `fix`, `docs`, etc.).
2. **Scope (optional):** Provides extra contextual information, such as the affected subsystem or module.
3. **Description:** A concise summary of what the commit does.
4. **Body (optional):** A detailed explanation of the change and its motivation.
5. **Footer(s) (optional):** Information about breaking changes or issues that the commit addresses.

## Semantic Versioning

The keyword you use for each commit type conveys specific meaning and often correlates with [Semantic Versioning]:

| **Keyword** | **Change Type**                     | **Version Impact**              |
|-------------|-------------------------------------|---------------------------------|
| build       | Build system changes                |                                 |
| ci          | Continuous Integration adjustments  |                                 |
| docs        | Documentation changes               |                                 |
| feat        | New feature introduction            | MINOR (v1.0.0 → v1.1.0)         |
| fix         | Bug fixes                           | PATCH (v1.0.0 → v1.0.1)         |
| perf        | Performance improvements            | Based on context                |
| test        | Adding or correcting tests          |                                 |
| refactor    | Code refactoring                    | Could include BREAKING CHANGE   |
| BREAKING CHANGE | Breaking API or behavior change | MAJOR (v1.0.0 → v2.0.0)         |

Breaking changes can either be indicated in the footer with `BREAKING CHANGE:` or by appending an exclamation mark (`!`) right after the type or scope.

## Examples

#### A Bug Fix

A simple bug fix might be committed as:

```bash
git commit -m "fix: broken home link"
```

#### A New Feature with a Scope

For additional clarity, you can include a scope:

```bash
git commit -m "feat(user-profile): add user-avatar API endpoint"
```

#### A New Feature with a Breaking Change

When introducing a new feature that includes a breaking change, you can use multiline commit messages.

```bash
git commit -m "feat: add user-data API endpoint

BREAKING CHANGE: remove user-name endpoint"
```

You can also signal a breaking change in single line commit messages:

```bash
git commit -m "chore!: drop support for Node 16"
```

#### A Bug Fix with an Explanation and Reference

You can also use multiline commit messages to describe the exact changes your commit is introducing and reference the issues it's addressing.

```bash
git commit -m "fix(auth): issue with Sign-in with Apple

The issue was caused by a mismatch in the expected token
claims during authentication. This fix ensures proper validation
and mapping of the Apple ID token claims, restoring login
functionality for affected users.

Closes: #1024"
```

---

Adopting a consistent Git commit message convention is more than just style. It's about fostering robust communication and paving the way for easier maintenance and automated tooling. As your team and codebase evolve, these practices become the backbone of an agile, responsive development process.

[Conventional Commits]: https://www.conventionalcommits.org
[Semantic Versioning]: https://semver.org


Commit Messages


First of all, welcome to my blog. 👋🏼

I'm TRACTION. A software developer, gamer, and a computer enthusiast
exploring the details of programmable systems and how to stretch their capabilities.

Here I'll be posting information or announcements related to the projects that
I'm working on, or any research that I'm doing, or just about anything that
catches my interest - which will mostly be about technology.

That'd be all for now. See you in another post!
