DEV Community: tq-bit

How to add animated loading transitions to your Vue.js app with a dynamic component

tq-bit — Mon, 07 Jul 2025 06:53:27 +0000

Transitions in Vue are great. As a built-in feature, they allow developers to incorporate smooth navigation animations quickly. In this article, we'll take it even further and build a dedicated loading transition using an intermediate component

TL:DR - check out this codesandbox for the article's source code

Getting started

Let's fire up your favorite editor's terminal and create a new Vue project using vue@latest:

npm create vue@latest .

Select Router as an additional dependency during setup and run npm run install after the project has been scaffolded. Finally, get rid of all views and components created by the script, and you're ready to start.

Boilerplate

Let's add some simple views we can navigate between next. Inside the views folder, create these three components:

HomeView.vue
AboutView.vue
ShopView.vue

Add the following code to each and adjust the title, as well as the paragraph:

<script setup>
</script>

<template>
  <main>
    <h1>This is the home / about / shop page</h1>
    <p>This is the home / about / shop page</p>
  </main>
</template>

The App.vue file is next. Let's add some basic structure, styles, and a placeholder for our transition logic.

<script setup></script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/shop">Shop</RouterLink>
  </nav>

  <transition name="fade">
    <Loading v-if="loading"></Loading>
  </transition>
  <main>
    <RouterView />
  </main>
</template>

<style></style>

Styles:

body {
  background-color: #222;
  color: #eee;
  padding: 1rem;
  overflow-x: hidden;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

nav a {
  color: #eee;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

nav a:hover,
nav a.router-link-active {
  background-color: steelblue;
}

main {
  margin-top: 2rem;
  text-align: center;
}

Finally, let's adjust the router/index.js file to incorporate all relevant views.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },

    {
      path: '/shop',
      name: 'shop',
      component: () => import('../views/ShopView.vue'),
    },
  ],

})

export default router

Now that all preparations are in place, let's start implementing the transition component

Adding the loading component

The component we're about to build will slide in from the right whenever we change the route and slide out after a specified time. To keep it simple, we'll animate the Vue logo from the boilerplate. It will look like this:

Let's start with the template code.

Create a new file in the components directory and name it Loading.vue.
Add an image with two filters.
The filter's values depend on the current loading percentage
Below, is a simple text to indicate the component's purpose

<script setup></script>

<template>
    <div class="loading-container">
        <img :style="`filter: contrast(${loadingPercentage / 100}) blur(${12.5 - loadingPercentage/8}px)`"  height="240px" width="240px" src="@/assets/logo.svg" alt="logo">
        <h2>More content is on the way, stand by</h2>
    </div>
</template>

<style scoped></style>

We'll have to add the variable of loading percentage next
Also, two handlers are needed to set the value dynamically once the component is loaded and unloaded
Let's add them to the script section

import { ref, onMounted, onUnmounted } from 'vue';

const loadingPercentage = ref(0);

onMounted(() => {
    const interval = setInterval(() => {
        loadingPercentage.value += 2.5;
        if (loadingPercentage.value >= 100) {
            clearInterval(interval);
        }
    }, 40);
})

onUnmounted(() => {
    loadingPercentage.value = 0
})

Let's wrap up this section by adding some styles
Especially the position: absolute is important to keep the UI clearly arranged
Add the loading-container class to the styles section

.loading-container {
    background-color: #0a0a0a;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
}

Finalize the App.vue file

All that's left to do is add the loading logic and the transition itself to the App.vue file.

We need to import the useRouter composable and add a function to the beforeEach router lifecycle hook
Doing this, however, runs the transition when the component is initially rendered, which happens whenever a user opens the app in their browser
To prevent this from happening, we'll add an indicator variable that prevents the initial rendering altogether

Note that you do not have to set the loading values statically, you can easily bind other values or even network composables into the lifecycle hook, as well as into the component itself using properties

Add the following to the App.vue's script section:

import { ref } from 'vue';
import { RouterLink, RouterView, useRouter } from 'vue-router';
import Loading from './components/Loading.vue'

const loading = ref(false);
const initiallyLoaded = ref(false);

useRouter().beforeEach(() => {
  if (initiallyLoaded.value === false) {
    initiallyLoaded.value = true;
    return;
  }

  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2500)
})

All that's left to do now is to add the transition CSS code to create a smooth sliding transition.

.fade-enter-active,
.fade-leave-active {
  transition: all 0.75s ease;
}

.fade-enter-from {
  transform: translateX(100vw);
  opacity: 0;
}

.fade-leave-to {
  transform: translateX(-100vw);
  opacity: 0;
}

Mastering Efficient Queue Structures in TypeScript: A Complete Guide

tq-bit — Thu, 09 Jan 2025 09:53:16 +0000

I briefly touched on the Queue topic of managing window scroll events in a previous article. Using a native array to handle event tasks works for small examples. When it comes to performance and scalability, it's not a good choice, because

shift causes the array to re-index every item, which is computationally expensive
resizing the array can cause memory fragmentation and garbage collection overhead
arrays are optimized for indexing tasks (~= accessing items), not frequent I/O

The Queue implementations in this article still use arrays under the hood, but handle their data more efficiently. Let's dive in.

A default array Queue

Let's look at a simple example. We'll build a Queue structure with some default operations and an array and add the optimizations later.

Every Queue has a minimum of two operations:

enqueue to add new items to the back
dequeue to retrieve the item in the front and effectively remove it from the Queue

We will also add some commonly used methods:

length to print the Queue's length
empty to see if the Queue contains any items
peek to display the item in the front without removing it

The following image should give you an idea of what it will look like:

The code for this entity uses Typescript class syntax and a generic to ensure data consistency.

class SimpleArrayQueue<T> {
    private readonly store: T[] = [];

    public get length(): number {
        return this.store.length;
    }

    public get empty(): boolean {
        return this.store.length === 0;
    }

    public peek(): T | undefined {
        return this.store[0];
    }

    public enqueue(item: T) {
        this.store.push(item);
    }
    public dequeue(): T | undefined {
        return this.store.shift();
    }
}

You can try this implementation out in a REPL or Quokka if you're using VSCode.

const queue = new ArrayQueue<number>();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);

// Check the first item in the queue
const peek = queue.peek(); // 1
console.log(peek);

// Remove the first item from the queue
console.log(queue.dequeue()); // 1

// Check the first item again
const peek2 = queue.peek(); // 2    
console.log(peek2);

This should give you an idea of how a Queue basically works. However, using a simple array wrapped in a class doesn't provide much value over shifting and pushing. Let's look at the optimisations next.

The Dynamic Array-based Queue

There are many approaches to designing a Queue on the Internet. All of them use similar APIs to the basic one we just built but have their own ways of handling memory. So I decided to reinvent the wheel. I can't just copy/paste stuff all the time, can I?

The Queue I wanted was to be

above all*: easy* to understand and implement
efficient in terms of performance and memory usage
scalable if necessary

This implementation is inspired by the Circular Buffer Queue, which we'll look at later in the article. Its approach to handling dequeued elements is different, but easier to understand and use.

Instead of handling a lot of logic internally, the Dynamic-Array-based Queue lets the developer decide its boundaries.

The constructor accepts an indexingThreshold and a maxLength
indexingThreshold determines when the Queue is re-indexed (=when all dequeued elements are recycled), but has a high computational cost as the array grows
maxLength ensures uncontrollable growth of the array, but requires careful handling by the developer as not to accidentally drop elements

Params indexFront and indexBack are borrowed from the Circular Buffer Queue to determine where to enqueue and dequeue elements.

The following describes the approach in detail using sketches and some descriptions. If you're after the code, feel free to skip the following section and jump straight to the code.

How it works

I find this approach hard to describe using text, so I sketched it. These sketches assume:

a maxLength of 5
an indexingThreshold of 2
an initial size of 0

Enqueue elements

Let's add 5 elements, for example, the numbers 1 - 5

If we try to add more elements, we'll hit a limit here. The Queue does not accept any further items. Which is fine and what we would expect.

Dequeue 2 elements

Assume the first two elements are dequeued. In their place, an undefined value would take place while the indexFront variable is incremented

Enqueue 1 element

Here's where it gets interesting. Once a new element is added to the Queue while it exceeds the indexingThreshold, it triggers a method called updateIndexes before the item is added. This method moves all non-undefined values to the start of the Queue and updates the indexFront and indexBack parameters.

Let's walk through this step by step.

First, enqueue is called

Since indexFront is equal to indexingThreshold, we will move all undefined elements to the end of the Queue first. This also sets the front- and back-index to their appropriate values.

Finally, the new element will be added to the Queue. Notice how the size of the Queue has not changed and no possibly inefficient re-indexing took place

Show me the code

Here's the full implementation that follows this exact specification.

class Queue<T> {
  private store: T[] = [];
  private indexFront: number = 0;
  private indexBack: number = 0;
  private cleanupThreshold: number;
  private maxLength: number;

  constructor({
    items,
    cleanupThreshold,
    maxLength,
  }: { items?: T[]; cleanupThreshold?: number; maxLength?: number } = {}) {
    this.cleanupThreshold = cleanupThreshold ?? 10_000;
    this.maxLength = maxLength ?? Number.MAX_SAFE_INTEGER - 1;
    this.init(items);
  }

  private init(items?: T[]) {
    // Indexing threshold cannot be negative
    if (this.cleanupThreshold <= 0) {
      throw new Error("Indexing threshold cannot be zero or negative");
    }

    // Max length cannot be negative
    if (this.maxLength && this.maxLength <= 0) {
      throw new Error("Max length cannot be zero or negative");
    }

    // Initial items size cannot exceed max length of Queue
    if (items && this.maxLength && items.length > this.maxLength) {
      throw new Error("Initial items length cannot be greater than max length");
    }

    // Initialize the queue with the provided items
    if (items && items.length > 0) {
      this.indexBack = items.length;
      this.store = items.slice();
    }
  }

  get length() {
    return this.indexBack - this.indexFront;
  }

  get empty() {
    return this.length === 0;
  }

  get full() {
    return this.length >= this.maxLength;
  }

  public enqueue = (item: T) => {
    if (this.full) {
      console.warn("Queue is full, item will not be added");
      return;
    }
    if (this.indexFront >= this.cleanupThreshold) {
      this.updateIndexes();
    }
    this.store[this.indexBack] = item;
    this.indexBack++;
  };

  public dequeue = () => {
    if (this.empty) {
      console.warn("Cannot dequeue, queue is empty");
      return undefined;
    }
    const item = this.store[this.indexFront];
    this.store[this.indexFront] = undefined as unknown as T; // Clear the slot
    this.indexFront++;
    return item;
  };

  public peek = () => {
    if (this.empty) {
      console.warn("Cannot peek, queue is empty");
      return undefined;
    }
    return this.store[this.indexFront];
  };

  private updateIndexes() {
    // Shift all non-undefined elements to the start of the array
    let writeIndex = 0;
    for (let i = this.indexFront; i < this.indexBack; i++) {
      const item = this.store[i];
      if (item !== undefined) {
        this.store[writeIndex] = item;
        if (i !== writeIndex) {
          this.store[i] = undefined as unknown as T;
        }
        writeIndex++;
      }
    }

    this.indexBack = writeIndex;
    this.indexFront = 0;
  }
}

A Circular Buffer Queue

While the above method works well for small and medium Queue sizes, it is generally outperformed by a Circular Buffer Queue. Since this article focuses on the former, I'll make it quick and simply provide you with the code and get straight to the benchmark

I created this function together with ChatGPT, I'm sure you'll understand I'll save you the time of walking you through the process

class CircularBufferQueue<T> {
    private store: T[];
    private frontIndex: number; // Points to the first element
    private backIndex: number; // Points to the position where the next element will be added
    private capacity: number;

    constructor({
        initialCapacity,
        items,
    }: { initialCapacity?: number; items?: T[] } = {}) {
        this.store = new Array(initialCapacity || 10);
        this.frontIndex = 0;
        this.backIndex = 0;
        this.capacity = initialCapacity || 10;

        if (items && items.length > this.capacity) {
            this.resize(items.length);
        }
        if (items) {
            for (const item of items) {
                this.enqueue(item);
            }
        }
    }

    get length(): number {
        return this.backIndex - this.frontIndex;
    }

    get empty(): boolean {
        return this.length === 0;
    }

    enqueue(item: T): void {
        if (this.length === this.capacity) {
            this.resize(this.capacity * 2); // Double the capacity when full
        }
        this.store[this.backIndex % this.capacity] = item;
        this.backIndex++;
    }

    dequeue(): T | undefined {
        if (this.empty) {
            console.warn("Cannot dequeue, the queue is empty");
            return undefined;
        }
        const item = this.store[this.frontIndex % this.capacity];
        this.store[this.frontIndex % this.capacity] = undefined as any; // Clear the slot
        this.frontIndex++;

        if (this.length > 0 && this.length <= this.capacity / 4) {
            this.resize(this.capacity / 2);
        }
        return item;
    }

    peek(): T | undefined {
        if (this.empty) {
            return undefined;
        }
        return this.store[this.frontIndex % this.capacity];
    }

    private resize(newCapacity: number): void {
        const newStore = new Array(newCapacity);
        let writeIndex = 0;

        // Copy valid elements to the new array
        for (let i = this.frontIndex; i < this.backIndex; i++) {
            newStore[writeIndex] = this.store[i % this.capacity];
            writeIndex++;
        }

        this.store = newStore;
        this.capacity = newCapacity;
        this.frontIndex = 0;
        this.backIndex = writeIndex;
    }
}

Benchmarking both implementations

I was curious whether the circular buffer method generally outperforms my own approach, so I did a few test runs on my laptop with the following specifications. It's not a fully-fledged benchmark from the textbooks but should give us some performance insights.

Input specifications

I have tried four scenarios.

Process the numbers (integers) from 1 to 500.000.000
Process a small object 500.000.000 times
Process a complex object 500.000.000 times

I'm running all of these tests in the Deno runtime using deno run

Results for numbers

The three runs for the Circular Buffer Queue were

2.778 seconds
2.718 seconds
2.758 seconds

while three runs for the Dynamic Array-Based Queue were

2.560 seconds
2.612 seconds
2.513 seconds

which I was able to improve by setting maxLength to 25 and cleanupThreshold to 5.

2.017 seconds
2.067 seconds
2.039 seconds

To be fair, the initial results might be caused by a design flaw (I set the default maxLength to Number.MAX_SAFE_INTEGER and cleanupThreshold to 10.000).

Results for small objects

The object in question is

const o = {
  id: i, // dynamically calculated from 1 - 500.000.000
  name: "John Doe", 
  age: 30,
  address: "123 Main St",
  city: "Anytown",
  state: "CA",
  zip: "12345",
  country: "USA"
}

The three runs for the Circular Buffer Queue were:

6.840 seconds
6.784 seconds
6.866 seconds

The three runs for the Dynamic Array-Based Queue (I kept the maxLength and cleanupThreshold without running into problems) were:

6.401 seconds
6.308 seconds
6.107 seconds

Results for more complex objects

The object in question is 220 lines long - you can find it in this Gist. To save time, I've reduced the sample size to 5.000.000 complex objects instead of 50.000.000 for these runs.

Results for Circular Buffer Queue were:

43.208
43.136
43.645

The results for the Dynamic Array-Based Queue were

43.245
43.747
43.457

On average, the Circular Buffer Queue behaved a bit better.

Wrap up

The Dynamic Array-Based Queue behaved better than I expected. Be aware that I only tested throughput for these two elements. Under real circumstances and different hardware, it is possible (and likely) for both implementations to behave very differently.

Master Efficient Window Scroll Event Handling in JavaScript: Best Practices and Tips

tq-bit — Tue, 31 Dec 2024 09:30:05 +0000

Not properly handling these scroll events can lead to serious performance issues:

Partially by blocking the DOM rendering process.
A huge number of registered events increases CPU usage, causing reduced battery life of mobile devices.
If you rely on scroll events for heavier computations, you will inevitably cause memory leaks to occur and degrade your web app further

The practices introduced in this post are especially relevant for heavily interactive websites. They'll help you make your scroll events more efficient in a central space. Let's dive in.

TL:DR
You can find the Code Sandbox for this article here

Use a dedicated scroll entity

While not directly improving our app's performance directly, it's a good idea to collect all scroll events as part of a single function or class. It makes management and debugging of events easier and the code more readable.

function scrollHandler(fns) {
    window.addEventListener('scroll', () => {
        fns.forEach(fn => fn())
    })
}


scrollHandler([
    () => {
        console.log('hello')
    },
    () => {
        console.log('world')
    }
])

The browser will still run all functions at every scroll event so there's still some optimization ahead of us.

Use a queue

When a scroll event's callback function is fired, the browser always waits for all functions to be executed. Collecting all event handlers in a single entity, therefore, introduces a potentially huge performance degradation. Fortunately, we can mitigate it by using a queue.

Note that we're using an array as a queue structure, which might not be the most efficient choice. Check out this article on how to implement your own queue structure in Javascript

function scrollHandler(fns) {
    window.addEventListener('scroll', () => {
        const queue = [...fns]
        function next() {
            const fn = queue.shift()
            if (fn) {
                fn()
                requestAnimationFrame(next)
            }
        }
        next()
    })
}

By using requestAnimationFrame, we give the browser time to handle other tasks before the next function in the queue is called. However, the queue still does not solve the problem of every event being fired every time a user scrolls. There are two ways of handling this matter.

Delay (throttle) scroll event

Instead of calling every function on every scroll, providing a fixed rate per second is better. This is what throttling is about.

We can build on our previous two approaches and implement a throttle feature that listens to scroll events every time but only executes them once every 200ms.

function scrollHandlerThrottle(fns) {
    let scrolling = false;

    window.addEventListener('scroll', () => {
        if (!scrolling) {
            scrolling = true;

            const queue = [...fns];
            function next() {
                const fn = queue.shift();
                if (fn) {
                    fn();
                    requestAnimationFrame(next);
                }
            }
            next();

            setTimeout(() => {
                scrolling = false;
            }, 200);
        }
    })
}

The maximum amount of function calls is therefore limited to 5 per second. You can adjust the limit by changing the second argument of setTimeout.

Throttling in combination with efficient queue structures is a great way to mitigate the browser's blocking process. There's an alternative approach, however, if you would like to limit function execution even more.

Await (debounce) scroll events

An alternative approach to throttling is debouncing. In this context, this means waiting till the user finishes scrolling. While less interactive compared to throttling, it's a great alternative and, depending on the use case, also more efficient.

All we have to do is implement a timeout that is called 200ms after the initial scroll event is registered.

function scrollHandlerDevounce(fns) {
    let scrollTimeout = null;

    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            clearInterval(scrollTimeout);
        }

        scrollTimeout = setTimeout(() => {
            const queue = [...fns];
            function next() {
                const fn = queue.shift();
                if (fn) {
                    fn();
                    requestAnimationFrame(next);
                }
            }
            next();
        }, 200);
    });
}

Whenever a user scrolls, the event will now only be fired when the scrolling stops for a significant amount of time.

You can even go a step further and combine these methods with other browser features, say the Observer API, to capture your user's interest or execute asynchronous operations.

Bright data Challenge - Industry AI Watchdog

tq-bit — Wed, 25 Dec 2024 10:04:25 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

What I Built

A web app that aggregates industry specific news into three KPI.

The value this app provides is that users only need to take a single glance at these KPI values to see if something is going on in their industry.

I started off developing this app to solve a business problem, but figured using AI as an alternative to a more strict algorithm seemed to be a great addition.

How it works

Users will specify

their sources (websites and selectors)
their scores (weighed keywords)

before the app calculates three indexes:

Relevance Index: How relevant their sources are for their scoring (high index = better)
Impact Index: The impact happening in the industry right now (low index = better)
Industry Index: The combined result of relevance and impact (high index means there's something going on in the industry users should be aware of)
AI will also provide a summary of the analysis as part of the result

I'm leaving out some details about prompts and scoring here, but if you're curious, you can find them in the codebase:

Demo

Codebase

You can find the repository on Github. It's written in Deno+Fresh and quickly setup, follow the readme.md instructions to get started. I've added some sources and scorings so you can quickly get started.

tq-bit / industry-watchdog

Industry Watchdog

This project is a prototype project for the Bright Data challenge on dev.to. IW lets users take a quick glance at a single KPI to see if something is going on in their industry.

Getting Started

Clone the repo
Install Deno
Rename .env.example to .env
set the BROWSER_WS and OPENAI_API_KEY variables
Run deno task start
Navigate to http://localhost:8000, add your sources and scores and run the indexing process

How to use

Remove all sources and scores
Follow the steps on the Home-page
Run the indexing process

View on GitHub

Screenshots

Overview & starting page

Source maintenance

Scoring maintenance

How I Used Bright Data

Bright data provides security and scalability for browser scraping, which is crucial to the availability and integrity of the index data. Industry Watchdog uses Bright Data browser scraping to scrape multiple sources at once and circumvent possible Captcha issues. Using their broad proxy network ensures that critical articles are being considered for the analysis.

Basically, this project could also qualify for Prompt 2: Build a Web Scraper API to Solve Business Problems, however instead of using Brightdata's API, it's using the scraping browser.

This app proves useful for analytical firms and BI departments who use internal, as well as external data to monitor their business strategies and operations, and would like to extend their KPI collection by the Industry Index.

How to keep your Azure infrastructure highly available - Configuring data redundancy

tq-bit — Wed, 03 Jul 2024 14:11:42 +0000

Data redundancy is synonymous with keeping data replicas. It plays a key part in highly available infrastructure by ensuring data is not lost, even if it is accidentally deleted, corrupted, or encrypted by malware. This article focuses on redundancy in storage accounts.

Resources this concept can be used on

All services that are part of an Azure storage account can be replicated. However, some strategies might not be available for lower-tier Storage Keeping Units (SKUs). Here are the current SKU types for storage accounts and their respective replication options.

Types of redundancy

Locally redundant storage

Locally redundant storage keeps your data on three drives in a single data center. It's an option for non-critical scenarios. The standard SKU can be used for all kinds of storage accounts and is available in most - if not all - regions

Premium LRS is available only for more specific types of storage, such as Page Blobs, Block Blocks, and File Shares. This SKU is optimized for low latency and fast IO-operations

✅ Premium SKUs are generally only available for locally redundant storage and zone redundant storage, depending on the region they're located in

Zone redundant storage

Zone redundant storage replicates your data over three availability zones in a single region. It's a compromise between data security and low latencies. In a full availability zone outage, your data remains safely stored in the two others.

Its premium SKU may not be available in all regions.

Geo-redundant storage

If availability zones sound too risky, you might want to replicate your data worldwide. Geo-redundant storage replicates your locally redundant data to a second region. It protects against greater local outages affecting all three availability zones from ZRS.

Geo-redundant replication to the secondary region is handled asynchronously and the replicated data is not accessible unless there is a failover in the primary region. That is unless you configure RA-GRS.

With Read-Access Geo-redundant storage, data in the secondary become available for read-only access. This strategy is useful to provide low-latency access to replicated files, for example, if you have a branch office in the secondary region.

When to use what replication strategy

While there are only a handful of redundancy options, things can get complicated when combining them with account types. In the following, I'll name only a few useful combinations. What strategy you use highly depends on your company's demands.

Standard General PurposeV2 LRS

In many cases, LRS with a standard General PurposeV2 account will already suit your needs. It keeps three copies of your data in a single data center and ensures 99.99999999999% (11*9) data availability. While not IO-optimized, it provides a great latency in your chosen region and gives you plenty of options to store files and other data.

Use cases include:

Provisioning of standard VHDs for your company, for example, to share files on a virtual drive
Storing data of a virtual machine or a set of VMs
Storing default OS image files as page blobs
Storing non-regulatory and non-mission-critical files where a loss will not result in huge legal fees

Premium block blobs ZRS

In the age of large language models, data are the new gold. Training the models requires a lot of them. It's also demanding in terms of computing power.

Machine learning algorithms generally perform better with low latency. If you spend lots of time and money training models (or accessing them), this SKU will be your choice.

At the same time, ZRS or GRS will keep your models and training data safe. While the additional cost may seem over the top, eliminating the remaining probability of losing your model and its training data may be worth it.

Generally, use cases here include

Secure provisioning of mission-critical, unstructured data of large sizes
Low latency access to training data
Provisioning data for big-data analytics

Standard General PurposeV2 RA-GZRS

With the highest SLA Azure offers (99% with 16 9s after the decimal), GZRS with read-access solves many problems at once. Besides keeping your data safe from what must be several natural disasters happening at once, it helps you reduce latency for associates in the secondary region. This is especially useful for regulatory or compliance information needed in both locations, which will be instantly available even during an outage.

Use cases here might include

Provisioning of mission-critical legal, compliance- or government data
The most secure option for Long-time storage of cold-access tier data

How to keep your Azure infrastructure highly available - Availability sets and availability zones

tq-bit — Mon, 01 Jul 2024 14:05:42 +0000

Resources this concept can be used on

Availability sets are exclusive to Virtual Machines. Availability zones can be used for a variety of services, such as

VM Scale Sets
Load Balancers and Public IP Addresses (Standard SKU only)
Managed disks
Azure Backup & Site Recovery
Several other Azure Services (Cloud Functions, Cosmos DB, VPN-Gateway, ...)

Availability Sets- and Zones are mutually exclusive. A virtual machine can't be part of both at the same time. Hence it's important to plan each architecture component accordingly.

Availability sets provide an uptime SLA of 99.95%. They can be used for any application that does not require the maximum uptime guarantee
Availability zones provide an uptime SLA of 99.99%. They are meant to be used for the most critical components of your infrastructure

Availability sets

Availability sets are logical groups that distribute Virtual Machines over several hardware nodes within a data center. In other words: They're different, independent computing instances running the same software stack.

Availability sets protect your architecture against smaller power outages within the data center. They have two key features: Fault domains and Update domains

Fault domains

Virtual machines that share the same hardware components, such as power source, cooling unit, and network switch. Simply said: It's a single server rack. Somewhere on the rack, a computer runs your VM.

If your availability set distributes your virtual machines across several server racks, they're less susceptible to power- or cooling device failure. If one goes down, the VM on the other rack can take over.

One Availability Set can have up to three fault domains.

Update domains

Virtual machines that share the same scheduled update cycle of the underlying hardware. Let's use an example to explain this.

Assume you create 6 virtual machines in an availability set with 3 update domains
Then Azure will automatically assign 2 VMs to each update domain
Let's say: VM1 and VM2 are part of the same update domain, VM3 and VM4 share one and so do VM5 and VM6
Now assume that the hardware that runs VM1 is scheduled for an update
Then you can be 100% sure that so is the hardware that runs VM2
But all other VMs remain fully operational and will not be updated until VM1 & VM2 are back in business
Each update domain receives a 30-minute cooldown time before maintenance on the next one begins

One Availability Set can have up to 20 update domains.

Comparing fault domains and update domains

Both Availability Set features protect against planned and unplanned outages. While a fault domain can easily be pictured as a server rack, update domains seem more abstract. Let's put them together with an example

Assume you built a new software (perhaps Tinder for dogs). You know it's the next big thing and buy 5 virtual machines on Azure. You also want to ensure your potential customers (or their respective owners) can find each other, even when one of your instances goes down.

So you start by creating an availability set with 3 fault domains and 3 update domains.

Let's walk through a few scenarios of what might

1) You underestimate the amount of dogs looking for love. The cooling source of Fault Domain 1 has a defect and the rack catches fire due to the sheer amount of traffic to your application.

=> Then VM2, VM3 and VM5 will still be available

2) Microsoft Cloud admins notice that the computers running VM1 - VM4 are still units of Commodore 64. They schedule updates to replace the hardware.

=> Then VM1 and VM2 will receive maintenance at the same time

=> Once maintenance is done, VM3 and VM4 receive theirs after a 30-minute grace period

3) After six months, you notice your current setup is not nearly strong enough. You decide to scale up to 25 virtual machines and max out your Availability Set. Then you will have a maximum of 3 fault domains and 20 update domains

=> Azure will automatically try to distribute the VMs as evenly as possible across fault- and update domains.

=>You will receive 3 fault domains, 2 with 8 and 1 with 9 Virtual Machines

=> You will receive 20 update domains, 15 with 1- and 5 with 2 Virtual Machine(s)

Let's walk through a fourth scenario: The outage of a whole data center

Availability zones

So it happened. The burning rack from scenario 1 collided with a defective fire sprinkler system. To make things worse, a group of anti-cloud protestors infiltrated the data center where your application runs and pulled a lot of plugs. The damage is so great that the data center cannot operate anymore and is closed for an unspecified amount of time.

Okay, this scenario is absurd. But what can you do against a whole data center being affected by an outage?

This is where Availability Zones come into play. Availability Zones distribute your VMs not in different server racks but across physical locations (basically across buildings).

You can view a 3D-map of all Azure regions and availability zones here: https://datacenters.microsoft.com/globe/explore/

Let's look at the region of 'Germany West Central'. It has three availability zones. That means somewhere in the greater region of Frankfurt, there are three buildings operated by Microsoft Azure. Each building can host one of your VMs that are part of the same Availability Zone. If one zone goes down, the two other zones can take over.

Distributing your architecture across several zones provides the highest SLA of 99.99% uptime Azure offers. It's a great choice for highly critical components where the slightest outage will result in extreme damage to you or your company.

Nanny Care Companion - First shop-stop for parents and those who are expecting

tq-bit — Thu, 18 Apr 2024 12:10:38 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

What I Built

My wife and I built a bot to help expecting parents with

questions about pregnancy, physical and mental health
assistance in buying important stuff, such as clothing, furniture, and groceries
guidance on what foods to eat and which to avoid
compile checklists on
- what items to buy before childbirth or for the time in hospital
- to-do's before and after the big day of childbirth
track the baby's growth and provide weekly information for the parents

and all those little everyday tasks that come up.

Demo

Here's the link to the bot store:

https://www.coze.com/store/bot/7359160705427193861?panel=1&bid=6c87u9bh04006

Ask for material on pregnancy

Uses Google search
Could be extended with additional knowledge-base items from websites and PDFs

Compile a checklist of furniture to buy

Uses long-term memory feature

Update the checklist

Ask for product suggestions from the checklist

Ask for advice on mental health

Part 1:

Part 2:

Ask whether it's okay to eat certain food

Always uses Google search before answering
The link from this prompt leads to an actual website: https://www.healthline.com/health/pregnancy/pineapple
The followup prompt also used Google search before answering. It led to this website: https://www.mayoclinic.org/healthy-lifestyle/pregnancy-week-by-week/in-depth/pregnancy-nutrition/art-20043844

Summarizing a baby-checklist from a german website

This feature uses filebox
I uploaded the pre-birth checklist from the german 'Familienportal', an authority that advises expecting parents
Frankly, I thought this would not work as well as it did :)

Part 1: Upload

Part 2: Compilation as a checklist

Part 3: Check items from the list

Funnily, the bot assumed I had also found a midwife and a gynecologist :). While this might usually be the case, users might want to uncheck it manually again.

Your Configuration

Features and plugins

Long-term memory to compile and update the checklists
Filebox to upload documents from authorities that can be summarized and translated for non-native-speaking parents
Triggers to, say send weekly updates on how much a baby has grown
Google Plugin to search for health advice, local professionals, and up-to-date info about foods. Also, add sources to crucial questions that might affect the mother's or baby's health
Amazon Plugin to search for relevant products, such as furniture, diapers or other hygiene articles

I also added several blog posts my wife and I learned from into our knowledge base. This could be further extended by more knowledge over time

Prompts

This is the prompt I am currently using:

Journey

In 2023, my wife and I embarked on a journey towards parenthood. And we would soon find out what we've gotten ourselves into. To name a few things: We

googled checklists and literature on the topic
researched pediatricians and daycare facilities
went from store to store, flea market to flea market, to buy furniture, clothing, napkins, and so on
find a midwife, a birthing hospital, birth preparation courses
ask around for personal experiences other parents have (and how to keep my wife happy)

... and were on our feet quite a lot

That took a lot of time (frankly, it still does). My wife and I did a lot of research, read articles & books, and went from store to store for the perfect baby setup.

In case you've never had to decide on a stroller, it's one hell of a ride

So I built this bot, hoping it'll make the life of expecting parents a bit easier. She has the persona of an elderly woman, because who else but your mother would you like to ask for advice on your newborn?

If this bot is well-liked by the community, I'd love to add more resources. And especially personal experiences. Parents should be able to engage with Margrat as if she has real-world experiences with babies and toddlers and can speak from the experience of raising several children on her own.

Fun fact: I named her Margrat while procrastinating research by reading Terry Pratchett's Discworld Novels

I might as well deviate from the idea of an old, friendly nanny and compile the profile of a mother who is raising a kid herself right now and recently went through all these stages.

If you like this idea, please give Margrat a try :) even if you're no parent, you might be curious to find out what it would be like.

I let AI draw my mind palace

tq-bit — Mon, 22 Jan 2024 20:50:26 +0000

With mind palace, I mean the Method of loci. I first stumbled across this method after watching the BCC series 'Sherlock'. The protagonist and one of his adversaries use this method to keep large amounts of information memorized.

Now I was curious and tried to describe the place I call mine to AI (DALL-E and then MS Copilot). Here's my favorite result.

And I'm even more curious to see yours. If you've ever used this technique (or have gotten curious reading this), please go ahead and post your mind palace here

15 open-source tools to elevate your software design workflow in 2024

tq-bit — Mon, 22 Jan 2024 11:59:41 +0000

Writing code is just one phase of creating software solutions. And while there are many proprietary tools out there, open source is doing a great job of putting great tools into your hands. I've compiled a list of those I liked to work with most during the last five years.

~ Image generated using Bing Copilot

Tools

I've organized these tools using the double-diamond method instead of specific categories. When designing software, it's crucial to know when to deploy each tool. This list helps you navigate each stage, ensuring you choose the right tools at the right time.

1) Discover

Tools in this category are meant to help you learn more about your future user and their problems. It includes tools to get in touch with people who deliver base data for your project. They help to keep users engaged during further steps in your development cycle.

⚗️ Clearflask

Link | Demo | Github | License

Clearflask is a great tool to stay in touch with your audience. It gives your users the chance to submit feedback while keeping them engaged using a public roadmap and announcements. Sleek design and a minimal UI aim to keep user engagement high.

🖼️ Claper

Link | Demo (free trial) | Github | License

Upload your Powerpoint or PDF file and make it interactive! Claper allows your attendees to scan a QR code and join your presentation on their own devices. They can then leave messages or submit forms for you to integrate into your presentation. This will be especially helpful for your in-person workshops with a broader audience. The tool also comes in handy for collecting real feedback when brainstorming ideas.

☁️ Nextcloud

Link | Demo | Github | License

Nextcloud and its ecosystem provide the base for collaboration, secure document sharing, as well as apps to schedule calls and meetings. It's the ultimate open-source platform for all internal and external communications. It includes chat and telecommunication, as well as file- and calendar sharing out of the box. And plugins from the official store make it even better. To name a few examples:

Forms - Share and create online formulas and questionnaires
Appointments - Integrates self-service booking for your team, users, and stakeholders
Excalidraw Integration - Adds a secure, collaborative whiteboard

2) Design

Design tools are geared towards planning software architecture, as well as user interfaces. They require a proper understanding of your target audience, as well as the problem you aim to solve.

✍️ Mydraft

Demo | Github | License

Mydraft is a great tool for creating first impressions of a user interface. It provides several shapes, icons, and outlines to quickly sketch your ideas. Wireframes can be exported and imported as .json files. All in all, it's a great tool to use before bringing out the big guns.

It also supports collaboration over a server component, which I have not tested while writing this article.

🖌️ Krita

Link | Download | Github | License

I assume you expected GIMP at this point of the article, didn't you? Yes, It is a great tool. And it gets the job done. But I find its learning curve rather steep. I found Krita fairly simple to get started with.

🧑‍💻 Penpot

Link | Free Trial | Github | License

You know Figma? Penpot is like that. And open source on top. You can select from a variety of templates and design frameworks such as material design. It facilitates real-time collaboration, supports dynamic prototypes, and an incredible onboarding experience.

3) Develop

During this phase, you turn your ideas into a solution. There is a ton of tools to choose when developing. These tools should include a little something for everybody to put to use.

💻 VSCode server

Install | Github | License

No matter what project you're developing on, at some point you'll give VSCode (or its open source version) a try. You can use it to develop in a dedicated dev-environment or debug integration scenarios.

If you're looking for a collaboration tool, try Coder.

🗃 DBGate

Link | Github | License

As a great alternative to DBeaver, DBGate provides a variety of tools to manage your databases. Besides in built-in support charts and a query builder, you can use Javascript to query data. It even supports NoSQL drivers and native script builders. Give it a try if your project demands simplicity over in-depth features for SQL databases.

🐶 Bruno

Link | Github | License

In contrast to Postman, Bruno aims to be an offline-first API client which stores requests in a local folder. You can still collaborate using Git, but everything else happens on your machine. Bruno turns out to be a great solution when you just want to run HTTP requests. It supports a lot of features you might know from Postman or Insomnia (set environment variables, several authentication methods, and scripted tests, to name a few). Looking at the roadmap, the amount of these is only going to increase.

4) Deliver

Time to shine. You're ready to present your solution to the public. With these tools, you'll capture valuable feedback from your users based on which you'll improve solutions that work and scrap those that don't. This includes the testing itself and documenting your progress.

🐰 Bencher

Link | Github | License

Before shipping anything to your testers, you want to ensure your app peaks in terms of performance. Because as the count of features increases, so does the stress on your hardware (or app service). Bencher keeps you informed about possible software regression before you deploy anything and makes a great addition to your CI/CD workflow.

📊 Umami

Link | Demo | Github | License

As laws get stricter, you'll need a platform that respects user privacy. While Google promises to adhere to privacy laws, you're usually better off being in charge of data you collect yourself. With Umami, you can track user engagement during launch period or your AB tests. Being open source and GDPR/CCPA compliant, it takes away a lot of burden and possibly legal problems when collecting test data from your web application.

📘 Bookstack

Link | Demo | Github | License

After several development cycles, knowledge begins to decay. About the solution and every other kind of data from phases 1-3. Hence you need a solid foundation to build your progress on. And Bookstack is just that, no more, no less. It allows you to separate knowledge into collections called books. These can be tagged, placed onto Shelves (like categories of books) and separated into chapters. Its support for markdown, draw.io sketches and lots of categorization capabilities makes it the perfect choice for a universal knowledge base.

Wrapup

Thank you so much for reading to the end. Of all the tools on this site, Penpot is my absolute favorite. Its modern UI and all the amazing tools at the cost of running a single docker command is a real catch! As a thank you, there's another tool I'd like to present. It's called Dub. It's a link-shortener tool with lots of advanced features for marketing teams and a perfect addition for Umami.

How to get the count of your followers on dev.to

tq-bit — Thu, 16 Nov 2023 09:07:41 +0000

Note: There's a PR on the Forem repo open for this. Check out if it has been implemented before trying this!

Fortunately, Forem ships with a REST API. At the time of writing this article, it did not support the follower count for the active user natively. For you as a developer, this should be no obstacle to calculating them yourself.

Setting up the project

Prepare the project directory

This project will consist of a single "index.js" file that you can deploy anywhere. I recommend using an Nginx reverse proxy and pm2 to keep the service running.

Change into a directory of your choice and initialize a new NPM project.
Install "express" and "axios"

cd /path/to/project
touch index.js
npm init -y
npm i express axios

Generate a dev.to API token

Head over to your dev.to profile and create an API key. The option is at the bottom of the page.

Enter a name for your key
Click on "Generate API key"
Copy it to the clipboard
Head over to val.town secrets.
Create an entry with the name "DEVTO_API_KEY"
Paste your API key into the value field

Add some boilerplate

Add the following code to your index.js file. Make sure to update the API_TOKEN with your secret. Even better: Use the dotenv NPM package to keep your code free of secret keys.

const express = require('express');
const axios = require('axios');
// You can request a token here: https://dev.to/settings/extensions (scroll down to bottom)
const API_TOKEN = 'super-secret';
const CACHE_LIFETIME = 1000 * 60 * 60 * 4; /* 4 hours */
const PORT = 3000;

const app = express();
let cache = {
    followers: {
        count: 0,
        entries: [],
    },
};

const gatherFollowerCount = async () => {
    cache.followers.count += 1;
};

// Interval to update cache
setInterval(() => {
    console.log('Updating cache');
    gatherFollowerCount();
}, CACHE_LIFETIME);

app.get('/', (req, res) => {
    res.send({ followers: cache.followers.count });
});

app.listen(PORT, () => {
    gatherFollowerCount();
    console.log('Listening on port ' + PORT);
});

Then, run it:

node index.js

This piece of code

Create an express server on port 3000
Maintains an in-memory cache for your followers
Updates this cache every 4 hours using the "gatherFollowerCount" function
Sends the cache to a client requesting it on the root path

⚠️ Stay fair, don't overuse the API!

Every API call you make causes traffic, which in turn costs money. If you have a lot of followers, the sum of your requests might be huge. In this case, please adjust your cache lifetime to a higher value.

If you're beyond the 10k, please also consider implementing a queue for your API requests with a generous delay in between

Visit http://localhost:3000 in your browser to check if everything works as expected.

Calculate your follower count

Add the following to the "gatherFollowerCount" function.

const gatherFollowerCount = async () => {
    const perPage = 100;
    let page = 0;

    const fetchFollowers = async () => {
        const url = `https://dev.to/api/followers/users?page=${page}&per_page=${perPage}`;

        const response = await axios.get(url, {
            headers: {
                'api-key': API_TOKEN || '',
            },
        });

        cache.followers.entries = [...response.data, ...cache.followers.entries];
        cache.followers.count = cache.followers.entries.length;

        if (response.data.length === perPage) {
            page++;
            await fetchFollowers();
        }
    };

    await fetchFollowers();
};

This code

recursively gathers all followers from the dev.to API
adds them to your cache
and updates the follower count

Restart the server and check http://localhost:3000. You should see your follower count in the browser now, ready to be implemented for your personal blog or portfolio.

PS: You can apply the same practice to other dev.to stats that might not yet be part of the official API.

How to use IndexedDB to store images and other files in your browser

tq-bit — Wed, 04 Oct 2023 08:57:09 +0000

TL:DR Take me to the Github Repos or the Live Demo

⚠️ A note on browser behavior

Persistent storage implementation largely depends on the browser. For the sake of ease, the project for this article does not implement user-preference checks, such as asking for storage permission. It's up to you to implement them yourself and ensure browser compatibility.

About IndexedDB

IndexedDB vs. Web Storage

When compared to other web storage methods, IndexedDB comes with a few extra perks. It:

works asynchronously, does not block the tab's main thread
uses transactions to ensure data integrity
allows for indexing and faster querying
has increased storage capacity (depending on the browser)

Browser compatibility and usability

At the time of writing this article:

IndexedDB ships with all modern browsers
One of the core features to estimate storage quota was recently added with Safari 17
A relatively new one, usage details, is still missing in several browsers

Storage quota and persistence

Browsers reserve space on your device's drive for persistence. They define a quota that governs the total amount of data to store.

Important: Quota does not only include IndexedDB, but also other web persistence APIs, caches and ServiceWorker registrations. Consider quota limits carefully when designing local storage strategies

The easiest way to find out how much storage your browser reserves is by calling the 'estimate' method:

(async function() {
    const estimate = await navigator.storage.estimate();
    console.log(estimate)
})()

Doing this on the google.com domain gives the following result:

The values' unit is shown in bytes. To determine the remaining MB/GB, divide the quota and usage by:

quota / 1024 for KB (= 2097152 KB)
quota / 1024² for MB (= 2048 MB)
quota / 1024³ for GB (= 2GB)

In a nutshell, this means the origin 'google.com' has a total of 2GB quota on my hard drive available. It currently uses around 9kb of them.

Use cases

Offline-first scenarios

IndexedDB is particularly useful for storing data in Progressive Web Apps. Compared to the service worker's cache, data stored in IndexedDB remains easily accessible and resilient to data integrity problems during synchronization.

Client caching strategies

A few months ago, I reported to a German government institution. They requested many documents, preferably in PDF, over a portal platform. I had to upload each file in a separate file form field.

After ten-ish minutes, my form submission failed due to a server problem. The form data was deleted from the browser, including my documents.

It would've been a good idea to store these documents somewhere on the client before sending them to the server so I would not have to upload everything all over

But they weren't. So rinse and repeat from the beginning.

Implement data privacy

There are a few good reasons to consider local storage for privacy reasons. The most prominent are probably laws like the GDRP in Europe. For such it comes in handy if entered data never leaves the respective computer. IndexedDB provides a lot of relevant methods to handle everything your user needs.

Possible pitfalls

Accidental deletion by the user

Since the browser stores the data, they're easily deleted by incautious usage. When a user requests the browser to delete their data, this could include data stored by IndexedDB.

Data loss due to exceeded storage quota

Modern browsers reserve a lot of storage space for browsers. It is possible for data loss to occur once the required exceeds available storage space.

Unexpected browser behavior

With that, I don't mean the browser behaves in an unexpected manner. Much rather, its behavior is correct, you just wouldn't expect it. A prominent example is Apple's ITP policy for Safari, which removes stale data (including IndexedDB!) after seven days without interaction.

Implementation

So far, we've established a general understanding of the 'what's and 'why's. Let's dive into how to use IndexedDB next.

There's a GitHub repository that mirrors this article's content. If you'd like to follow along, start with its branch 01-start

Create the database and object-storage

Note: Check out branch 02-init-db for reference

Let's start by creating the database to save images. The process of doing so involves the following steps:

Request the database using its name and version
Create a store (or many stores) in which to save images
Optional: Set up an index to query the store
Return the created db instance for further usage

Request the database

We can use the 'IDBFactory.open(name, version)' method to request the database to open. If the version of the database you request does not exist yet, the browser will create it for you.

const request = indexedDB.open(dbName, dbVersion);

Handle the database request's events

Once the operation completes, the request emits three events:

'onerror' means: The database request failed
'onsuccess' means: The database request was successful
'onuptedeended' means: A new version of the database was created during the request. This event also fires when the database initializes for the first time

request.onerror = (event) => { /* handle the error event */ }
request.onsuccess = (event) => { /* handle the success event */ }
request.onupgradeneeded = (event) => { /* handle the upgrade event */ }

Add the code to initialize the database

In a nutshell, this is what's going to happen:

So go ahead and add the following to the 'initIndexedDb' - function:

const initIndexedDb = (dbName, stores) => {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, dbVersion);
        request.onerror = (event) => {
            reject(event.target.error);
        };
        request.onsuccess = (event) => {
            resolve(event.target.result);
        };
        request.onupgradeneeded = (event) => {
            stores.forEach((store) => {
                const objectStore = event.target.result.createObjectStore(store.name, {
                    keyPath: store.keyPath,
                });
                objectStore.createIndex(store.keyPath, store.keyPath, { unique: true });
            });
        };
    });
};

Create a new database instance

The function is called as part of the window.load - event. It will set the global 'db' - variable to the created database instance.

// Create some constants for the store's name and key
const storeName = 'localFiles';
const storeKey = 'fileName';

// Create a db - variable to access the database after creation
let db = null;

// The function you just created
const initIndexedDb = (dbName, stores) => { /* ... */}

// Attach IndexedDB - creation to the window.onload - event
window.addEventListener('load', async () => {
    db = await initIndexedDb('my-db', [{ name: storeName, keyPath: storeKey }]);
})

Validate the database's creation

You can also see the new database in your browser's dev tools:

Add a new image and show it in the UI

Note: Check out branch 03-add-images for reference

Now that our database is in place, we can start populating it. IndexedDB stores data in key-value pairs. In the case of this implementation, keys are equal to the file's name. We'll use them to engineer the search feature later, too.

Create a new file-entry

Let's start by adding to the 'handleSubmit' function. It fires once the user clicks on the 'Add to IndexedDB' - button and does the following:

Grab the file's value from the input field
Create a read-write-transaction
Add the file to the object store
Re-render the gallery cards below the form
Update the storage quota in the UI

Let's add the following code the the 'handleSubmit' function:

const handleSubmit = async (ev) => {
    ev.preventDefault();
    const file = await getFileFromInput();
    const store = db.transaction(storeName, 'readwrite').objectStore(storeName);
    store.add(file);

    store.transaction.oncomplete = () => {
        clearGalleryImages();
        renderAvailableImagesFromDb();
        renderStorageQuotaInfo();
    };
};

Re-render the image gallery

To access the new file, the previous transaction must complete. We'll then use a cursor to iterate over all database entries and render them into the UI. A cursor will provide us with the database's respective record's key and value.

Add the following code to the 'renderAvailableImagesFromDb' function:

const renderAvailableImagesFromDb = () => {
    db.transaction(storeName, 'readonly').objectStore(storeName).openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            renderGalleryColumn(cursor);
            cursor.continue();
        }
    };
};

Now you can start adding files to your database. Check out your devtools under 'Application' to see them getting stored in your browser.

Execute a search query

Note: Check out branch 04-search for reference

Querying for files works in a similar manner. Instead of rendering all available images, we'll only render those relevant to the search term.

Add the following code to your 'handleSearch' function:

const handleSearch = async (ev) => {
    ev.preventDefault();
    clearGalleryImages();
    const searchInput = document.getElementById('search').value;
    db.transaction(storeName, 'readonly').objectStore(storeName).openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            if (cursor.value[storeKey].toLowerCase().includes(searchInput.toLowerCase())) {
                renderGalleryColumn(cursor);
            }
            cursor.continue();
        }
    };
};

Delete images

Note: Check out branch 05-delete for reference

Let's wrap this article up by adding two delete functions

One to delete a single image
One to empty the whole object-store

Delete a single image

To delete a single entry, we need its key. In this project, it is already bound to the delete button's click event.

const renderGalleryColumn = (cursor) => {
    // ...
    deleteButton.addEventListener('click', () => {
        deleteImageFromIndexedDb(cursor.value[storeKey]);
    })
    // ...
}

All that's left to do is to:

Call the 'delete(key)' method from the object store
Re-render the remaining gallery entries once the transaction completes

Let's add the following code to the 'deleteImageFromIndexedDb' function:

const deleteImageFromIndexedDb = (storeKey) => {
    const store = db.transaction(storeName, 'readwrite').objectStore(storeName);
    store.delete(storeKey);
    store.transaction.oncomplete = async () => {
        clearGalleryImages();
        renderAvailableImagesFromDb();
        await renderStorageQuotaInfo();
    };
};

Delete all images

Finally, you can delete all entries from your database by calling the store 'clear()' - method:

const clearEntriesFromIndexedDb = () => {
    const store = db.transaction(storeName, 'readwrite').objectStore(storeName);

    store.clear();
    clearGalleryImages();

    store.transaction.oncomplete = () => {
        renderStorageQuotaInfo();
    };
};

Resources and further reading

Understanding the Node.js process variable

tq-bit — Wed, 30 Aug 2023 07:04:58 +0000

The Node process and the event loop

In a nutshell, the 'process' variable is the system process that runs your app. It also gives you partial control of its lower-level behavior. When you use the 'node' command to run a JavaScript file, a new system process spawns.

The Node.js runtime initializes your application as a system process
The main module executes (such as 'index.js' or 'main.js')
The event loop starts to queue tasks (= blocks of code) to execute
Your application starts to do its job

After the application starts, we have

a system process that describes and manages your application as a whole
an event loop to take care of scheduling and executing tasks

Let's now take a closer look at these two components. Our focus will be on the system process and how it plays together with the event loop.

Environment- vs. process-variables

Environment variables

Environment variables are part of the 'process.env' property. They get injected once the process starts and are available system-wide. Let's take the following example:

# In a terminal, type
echo $USER
echo $TERMINAL

// In a Javascript file, type
console.log(process.env.USER);
console.log(process.env.TERMINAL);

Both of the above commands will print the same value to the console. When starting a Node process, you can inject your own environment variables. We'll take a closer look at how to do this later in this article.

Process variables

Process variables are part of the 'process' object itself. They include, among others, the following set of information:

The Node.js version, executable paths, and main module path
Process id (pid) and arguments (argv)
Functions like 'nextTick', 'on', and 'kill' give you high-level control over the process' behavior

Process variables are not shared with other processes or the operating system.

While it is possible and tempting to use 'process' to declare global variables, you should stick with locally scoped variables. Or use a dedicated 'const.js' file from where to import global constants.

Common use cases

Now that we have a broad understanding of the object itself, let's see what we can do with the Node process.

Scheduling event loop iteration callbacks

After a block of code (= a task) executes, the event loop waits for new tasks to run. Right between, the 'nextTick' event fires. Imagine it like a lifecycle hook that runs when code execution finishes.

Check out this great article on dev.to that visualizes this behavior in detail

Let's look at an example. In the code below, we schedule a synchronous operation to run after the server responds to a client.

Note that this method will still cause the application to block after sending a response! 'nextTick' must be handled with caution as it alters the behavior of the event loop. Using an asynchronous operation using promises or callbacks is often a better choice.

const http = require('http');
const fs = require('fs')
const server = http.createServer((req, res) => {

  // Schedule sync task to write a log file after request is completed
  process.nextTick(() => {
    fs.appendFileSync('log', `${req.method} ${req.url}\n`, { flag: 'a' });
  });

  // Respond to the client
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
});

server.listen(3000);

Reading and writing environment variables

This feature allows you to read and write environment variables. It comes in handy for applications running in several different contexts. A prominent example is differentiating whether your app runs in development or production.

The dotenv module is particularly useful when working with environment variables and '.env' files

You can read and write environment variables by accessing the 'process.env' property. It is considered good practice to give your environment variables unique, uppercase names.

// Setting environment variables
process.env.APP_PRODUCTION_MODE = false; 
process.env.APP_DEVELOPMENT_MODE = true;

// Reading environment variables
const USER = process.env.USER; 
const LANG = process.env.LANG

Catching unexpected errors

The 'process' variable provides an event that allows you to catch all unhandled errors. It is good practice to handle errors where they occur. Consider this method as a last-resort option to catch unexpected exceptions.

// Handle all otherwise uncaught errors
process.on('uncaughtException', (error) => {
  console.log(error)
});

throw new Error("An error occured");

Parsing process arguments (argv)

When running a Javascript file with 'node', you can pass extra arguments into it. These are appended to the 'process.argv' - array (= Command Line Argument) and can be read out and parsed by your program.

There are node modules such as commander or yargs that make working with process arguments much easier

This method is helpful to give you more control over your application's settings. For example, specifying a port as an optional argument.

const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hello World\n");
})

server.listen(process.argv[2] || 3000);

Let's try it out:

// Start the server on port 2000 instead of 3000:
node index 2000