Forem: Abdullah Adeel

The Bias Nature of JavaScript Event Loop

Abdullah Adeel — Sun, 10 Dec 2023 22:23:35 +0000

JavaScript is the single most controversial language for its single-threaded nature and its bias on handling different tasks assigned to it for execution. In my opinion, the language must not be blamed for it. It could be the requirement of the context in which JavaScript is supposed to run. Yes, it's runtime.

We all know the famous event loop. In this article, I'll try to explain most simply; how the event loop handles different tasks assigned to it.

In the browser environment, JavaScript despite being a single-threaded language is given multiple tasks (synchronous and asynchronous) to perform. These tasks include rendering the screen including calculating the layouts, applying CSS, and other necessary stuff for efficient rendering of the elements on the screen. It also gives the tasks handling different DOM events like button clicks etc. On top of that, it also needs to execute the code you and I as dev write to make the page interactive and build useable applications. This code could be fetching remote data that the runtime does not even know the execution time of. The poor language has to handle everything in parallel while maintaining a smooth user experience. The language handles all this by leveraging mainly two things:

Task Prioritization (via callback queues)
Web APIs

In the case of NodeJS, WebAPIs are replaced by C++ APIs and the same goes for other newer runtimes.

The main focus of this article is to elaborate on Task Prioritization and how the event loop handles different task queues. There are mainly the following queues:

Micro-Tasks queue
Macro-Tasks queue
Animation callback queue

Micro-Tasks

Microtasks are tasks with higher priority, typically involving promises
(Promise.resolve), process.nextTick (Node specific), and MutationObserver. When a microtask is added to the queue during the execution phase, it will be executed before the next rendering, I/O, or timer task. Since the micro-tasks are of the highest priority, the event loop will start processing micro-tasks as soon as callstack is available empty and keep processing tasks/callbacks in the micro-tasks queue until there are none left.
Here is a simple flow of event loop processing micro-tasks as soon as callstack is empty.

In other words, once the micro-tasks queue claims execution, the event loop will keep processing tasks in the queue as long as there are tasks available before moving ahead. Thus, micro-tasks are the event loop's highest priority.

Macro-Tasks

Macro-tasks include tasks like setTimeout, setInterval, I/O operations, and UI rendering. These tasks have a lower priority than microtasks. When the call stack is empty, the event loop picks up the next macro-task from the queue and executes it. The primary difference is that not all tasks are picked up for execution once the execution context is given to the macro-tasks queue. Only the first one in the queue is picked up and executed. And event loop moves back to handling other potentially more important tasks like micro-tasks. Here is a simple flow demonstration.

Animation callbacks

The animation callback queue in browser environments plays a pivotal role in orchestrating smooth and synchronized animations on web pages. Specifically tied to the requestAnimationFrame() method, this queue handles tasks related to rendering updates and animations. When requestAnimationFrame() is utilized to schedule animation tasks, these callbacks are placed in the animation callback queue. These tasks are then executed before the subsequent repaint of the browser's display (as per web standards).
The number of tasks going to be processed in one iteration of the event loop depends on the number of tasks available in the animation callback queue at the time of starting the execution of animation callbacks. Any task added to the animation callbacks queue will be processed in the next iteration. Here is a simple demonstration.

So, there's not a single callback queue where the callbacks are queues to be executed by the event loop but a group of queues with different priorities. Event loop process callbacks based on the queue's priority. Thus, the event loop is biased towards some tasks that are of higher importance than others.

Bun 101: Bun for JavaScript Developers

Abdullah Adeel — Mon, 11 Sep 2023 22:22:29 +0000

Exploring Bun: The Swiss Army Knife for JavaScript Developers

In the ever-evolving landscape of web development, staying ahead of the curve and efficiently managing various tools and processes is paramount. This is where Bun, often described as a "Swiss Army knife" for JavaScript developers, steps in. Bun is a versatile and powerful tool that encompasses a wide range of functionalities, making it an indispensable asset for modern web development projects. In this article, we'll delve into the features and capabilities that make Bun an invaluable addition to your JavaScript toolkit.

A Multifaceted Tool

At its core, Bun serves as a JavaScript runtime, but its utility extends far beyond that. Here's a brief overview of the diverse roles it can play in your development workflow:

1. Bundler

Bun can function as a bundler, akin to popular tools like Webpack, Rollup, or Vite. It efficiently packages your JavaScript code and its dependencies, optimizing the performance and loading speed of your web applications.

2. Test Runner

Testing is an integral part of software development, and Bun doesn't disappoint in this regard. It can seamlessly act as a test runner, supporting popular testing frameworks such as Jest, Vitest, and Mocha. This simplifies the process of writing and executing tests, ensuring the reliability and stability of your codebase.

3. Package Manager Integration

Bun works harmoniously with various package managers, including npm, Yarn, and pnpm. This compatibility allows you to manage your project's dependencies effortlessly and choose the package manager that best suits your workflow.

4. Compatibility with Node.js APIs

While Bun offers an array of its own features, it remains compatible with existing Node.js APIs. This means that you can leverage the power of Bun while still relying on the familiar functionality provided by Node.js.

5. Dual Module Support

Bun is designed to cater to the diverse ecosystem of JavaScript modules. It effortlessly handles both CommonJS and ES modules, ensuring that your code can seamlessly interact with a wide range of libraries and frameworks.

6. Built-in TypeScript Support

TypeScript has become increasingly popular in the JavaScript community due to its static typing and enhanced tooling. Bun simplifies TypeScript integration by offering out-of-the-box support for both TypeScript and TSX in both development and production environments. This eliminates the need for additional tools like Nodemon and Concurrently, streamlining your development workflow.

7. Hassle-Free Environment Variables

Dealing with environment variables can be a cumbersome task in some development setups. However, Bun simplifies this process by making environment variables readily available globally through Bun.env. This means you can access your environment variables effortlessly, enhancing the configurability of your applications.

8. Easy HTTP Server Setup

In web development, setting up an HTTP server is a fundamental task. Bun makes this process painless and provides a straightforward way to establish an HTTP server for your applications. Furthermore, there's even a backend framework called Elysia that pairs seamlessly with Bun, offering a comprehensive solution for both frontend and backend development.

Conclusion

In the fast-paced world of web development, having a versatile and efficient toolkit is essential. Bun, with its diverse capabilities as a JavaScript runtime, bundler, test runner, package manager integrator, and more, is the Swiss Army knife that every JavaScript developer needs. Its compatibility with existing Node.js APIs, support for various module systems, built-in TypeScript support, effortless handling of environment variables, and seamless HTTP server setup make it a valuable asset for any project.

Whether you're a seasoned developer looking to streamline your workflow or a newcomer seeking a powerful yet user-friendly tool, Bun has you covered.

We fixed react context 🚀. Using selectors for granular reactivity

Abdullah Adeel — Mon, 12 Jun 2023 18:21:34 +0000

Using selectors with react context — textcon

Context in react was introduced to solve solely one problem. And that is prop drilling. But it has never been aimed to be used as a state manger. The primary reason is the render optimizations. Changes to the context value cause the whole child tree to re-render which is not ideal especially if state changes frequently and some of the child components are expensive to render. There are some workarounds but those too come with their own problems and limitations. State management libraries like redux has the concept of selectors from the beginning. Using selectors efficiently can increase the performance of react applications significantly.

In this article, I’ll introduce a library called textcon that I built on top of react context and support features like selectors and many more.

https://github.com/mabdullahadeel/textcon

If you want to see more in depth explanation and use of the library. You can watch this video.

A side note. Inspiration for this library came from this video of Jack Harrington. Highly recommend watching the video.

Installation

# using npm
npm install textcon

# using yarn
yarn add textcon

# using pnpm
pnpm add textcon

Usage

Using textcon is very similar to plain react context with the following general steps.

Create context with default state and optionally actions.
Wrap component tree with the provider.
Use the provided hook to consume the state in components. In case of plain react context, this hook is useContext but textcon expose useStore with additional features. The main of which is the support of selectors.

let’s say we’re building a simple counter app. But instead of one counter, you’ve two counters that you need to keep track two counters. firstCounter and secondCounter. Keep that in mind, out default state would look something like this.

const defaultState = {
    firstCounter: 0,
    secondCounter: 0    
}

Let’s use textcon to create context.

import { createContextStore } from 'textcon';

const {Provider, useStore} = createContextStore({
    firstCounter: 0,
    secondCounter: 0
})

Simply import createContextStore from textcon and provide it the default state value.

This functional will return object. Let’s destruct it to use;

*************Provider*************: The component that needs to be wrapped around the component tree where you want to consume the state.
***************useStore*************** hook: This hook is use to access the state stored in the context.

Now lets wrap our parent component (<App/ >) with the provider.

// ...
function App() {
  return (
    <Provider>
        <div className="App">
            Hello, World!
        </div>
    </Provider>
  );
}

export default App;

Now, let’s say we’ve two components.

A component to display the value of firstCounter
Another component to update the value of firstCounter

// ...
const Counter1Display = () => {
  const {get: firstCounter} = useStore((state) => state.firstCounter);

  return (
    <div>
      Counter 1: {firstCounter}
    </div>
  )
}

const Counter1Control = () => {
const { set } = useStore(() => false);

  return (
    <button onClick={() => {
                set((prev) => ({
                    ...prev,
                    firstCounter: prev.firstCounter + 1
                }))
            }}>
      Increment Counter 1
    </button>
  )
}
// ...

In this snippet, we defined the two required components. Counter1Display component is responsible for rendering the current value of the firstCounter stored inside the context. Counter1Control component renders a button that when clicked increment the value of first counter by 1.

useStore hook works pretty similar to how useSelector hook works in redux. The first argument passed to this hooks is a selector function that can be used to select whole state (default) or part of the state the component is interested in.

In case of Counter1Display component, we’re only interested in firstCounter value since that’s the value this component is going to display.

// ...
const {get: firstCounter} = useStore((state) => state.firstCounter);
// ...

Unlike redux’s useSelector hooks, useStore by textcon returns an object with a get property and set setter function property. get give access to the value returned by the selector provided to useSelector. While set as can use used just like useState hook from react to update the state stored in context.

One thing that you might’ve noticed is the callback function passed to useStore in Counter1Control component.

// ...
const { set } = useStore(() => false);
// ...

Since Counter1Control component does not render any reactive state, a callback returning static value can be passed as selector to prevent re-renders.

Now, let’s render out counter components.

function App() {
  return (
    <Provider>
        <div className="App">
            <Counter1Display />
            <Counter1Control />
        </div>
    </Provider>
  );
}

export default App;

In the same way, state for second counter can be accessed and updated in the context.

Using actions

Actions are predefined functions to update the state object stored inside the context. Actions can be provided in an object as second argument to the createContextStore function.

Let’s add actions to update the counter values.

import { createContextStore, ActionablePayload } from 'textcon';

const {Provider, useStore, useActions} = createContextStore({
    firstCounter: 0,
    secondCounter: 0
},
{
    incrementFirstCounter: ({set, get}) => {
        set((prev) => ({
            ...prev,
            firstCounter: get().firstCounter + 1 // or prev.firstCounter + 1
        }))
    },
    decrementFirstCounter: ({set, get}) => {
        set((prev) => ({
            ...prev,
            firstCounter: get().firstCounter - 1 // or prev.firstCounter + 1
        }))
    },
    incrementBy: ({set, get}, action: ActionablePayload<number>) => {
        set((prev) => ({
            ...prev,
            firstCounter: get().firstCounter + action.payload
        }))
    }
})

Actions can be triggered using useActions hook expose by the createContextStore function.

Let’s update our Counter1Control component to update use actions to update the state value store in context.

// ...
const Counter1Control = () => {
const { incrementFirstCounter } = useActions();

  return (
    <button onClick={incrementFirstCounter}>
      Increment Counter 1
    </button>
  )
}
// ...

Much cleaner! In the same way,

// ...
const Counter1ControlByTen = () => {
const { incrementBy } = useActions();

  return (
    <button onClick={() => incrementBy(10)}>
      Increment Counter 1 by 10
    </button>
  )
}
// ...

textcon comes with other useful features like global state persist and subscribing to state changes outside the react components.

https://github.com/mabdullahadeel/textcon

🚀

Supercharge Your Web Apps: Harnessing Web Assembly for High Performance

Abdullah Adeel — Thu, 01 Jun 2023 00:49:27 +0000

Introduction

WebAssembly (Wasm) is a binary instruction format designed to be executed efficiently in web browsers. It serves as a complement to JavaScript, allowing developers to write performance-critical code in languages like Rust, C++, and C and run it in the browser. By compiling code to Wasm, it becomes platform-independent and can run at near-native speeds. Rust, a systems programming language known for its safety and performance, has gained popularity in the WebAssembly ecosystem due to its strong guarantees and seamless integration with Wasm. WebAssembly opens up new possibilities for web development by enabling the execution of complex tasks, such as game engines, image processing, and scientific simulations, with impressive performance.

Here is a short video that you might want to watch before continue reading.

Advantages of WebAssembly

Improved performance for computationally demanding jobs is one of WASM's most persuasive features. For instance, WebAssembly can be much faster than regular JavaScript when doing complicated statistical calculations on enormous datasets. This is so that code can be executed considerably more quickly than it can in JavaScript thanks to WebAssembly's highly optimised design.
The portability of WebAssembly is another benefit. Cross-platform applications are simple to develop since WebAssembly code can be generated from a wide variety of languages and executed on any platform that does.
Finally, security is another consideration in the architecture of WebAssembly. Code cannot access sensitive data or run harmful code because of the sandboxed execution environment it offers.

Using WebAssembly in Rust

Rust is a systems programming language that provides memory safety and performance. It is also a great language for writing WebAssembly code. Let's take a look at how to use WebAssembly in Rust.

Setting up the project

To get started, we need to install a tool called wasm-pack. We can use cargo to install the tool

cargo install wasm-pack

Once we have wasm-pack installed, we can create a new Rust project and add the required functions. We can annotate these functions with the wasm-bindgen attribute, which takes care of all the things required to call these functions from JavaScript behind the scenes.

Setting up the Rust environment

Install Rust by following the official Rust documentation.
Create a new Rust project using cargo new --lib wasm-tools.
Navigate to the project directory using cd wasm-tools.

Implementing the Fibonacci function in Rust

Open the src/lib.rs file in a text editor.
Replace the default code with the following Rust implementation of the Fibonacci function

#[wasm_bindgen]
pub fn fib(n: usize) -> usize {
    match n {
        0 => 0,
        1 => 1,
        _ => fib(n - 1) + fib(n - 2),
    }
}

Building the Rust code for WebAssembly

Open the terminal and navigate to the project directory (wasm-tools).
Run the command wasm-pack build --target web --release to build the Rust code as a WebAssembly package.

Using on the frontend

Create an index.html file and add basic boilerplate code.
Attach main.js script.
Add the following function in the main.js file so that we can compare performance of both the functions.

import init, { add, greet, fib, alert_wasm } from './wasm-tools/pkg/wasm_tools.js';

const app = document.getElementById('app');
const btn = document.getElementById('btn');
const btnWasmAlert = document.getElementById('btn-wasm-alert');

btn.addEventListener('click', handleTriggerFib);
btnWasmAlert.addEventListener('click', () => {
    alert_wasm('Hello from Wasm');
});

function updateContent(content) {
    const div = document.createElement('div');
    div.innerHTML = content;
    app.appendChild(div);
}

function fibJS(n) {
    if (n < 2) {
        return n;
    }
    return fibJS(n - 1) + fibJS(n - 2);
}

async function run() {
    await init();
    const res = add(1, 2);
    updateContent(`1 + 2 = ${res}`);
    const res2 = greet('Wasm Tools');
    updateContent(res2);
}

function measureExecutionTime(fn) {
    return function(...args) {
      const start = performance.now();
      const result = fn.apply(this, args);
      const end = performance.now();
      const executionTime = end - start;
      return {result, executionTime};
    };
  }

function handleTriggerFib() {
    // JS
    const {result: res3, executionTime: time3} = measureExecutionTime(fibJS)(40);
    updateContent(`fibJS(40) = ${res3} in ${time3}ms`);

    // Wasm
    const {result: res4, executionTime: time4} = measureExecutionTime(fib)(40);
    updateContent(`fibWasm(40) = ${res4} in ${time4}ms`);

    // Web Worker
    const worker = new Worker('./worker.js');
    const start = performance.now();
    worker.addEventListener('message', (event) => {
        const {data} = event;
        const {res} = data;
        const end = performance.now();
        updateContent(`fibWorker(40) = ${res} in ${end - start}ms`);
        worker.terminate();
    });
    worker.postMessage({n: 40});
}

run();

Open html file in browser

Visit https://wasm-web-performance.vercel.app to see the application live.

Conclusion

In conclusion, WebAssembly is a powerful tool for optimizing web applications. It provides improved performance, portability, and security, making it an attractive option for web developers looking to optimize their applications. Rust is a great language for writing WebAssembly code, and wasm-pack makes it easy to compile and consume WebAssembly code in JavaScript.

Source Code

The source code for this project can be found here.

Live Demo

Rust WASM (wasm-web-performance.vercel.app)

Deploying FastAPI app on Vercel Serverless

Abdullah Adeel — Sat, 01 Apr 2023 16:52:26 +0000

There are good chances that I don’t explain what is vercel if you’re a javascript developer but for python folks out there, vercel is a cloud computing platform focused on serverless hosting solutions for web applications. It’s especially popular among developers using frontend frameworks like Next.js, Nuxt.js, and SvelteKit.

This article aims to act as a quick guide if you want to deploy a FastAPI application serverless leveraging python runtime. Moreover, vercel is free so 🤞.

Primarily, you need these three files set up in your application.

requirements.txt: This file will have all your dependencies. Run: pip freeze > requirements.txt in your dev environment to get this file.
vercel.json: This file contains information for vercel to set up your runtime when deploying.
main.py: This python file can be named differently but it should contain the FastAPI app.

# main.py  
from fastapi import FastAPI  

app = FastAPI() # This is what will be refrenced in config

Assuming the given file structure:

root_dir  
        - main.py  
        - requirements.txt  
        - vercel.json

add this in vercel.json

{
  "builds": [
    {
      "src": "main.py",
      "use": "@vercel/python"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "main.py"
    }
  ]
}

If your application structure is different, change build.src and routes.destto point to the python file containing the root application app.

After your app is ready, push the source code to GitHub for seamless automatic future deployments with vercel.

Visit vercel and create an account if you don’t already have one.

Create a new application and connect it to the appropriate GitHub repo.

Additionally in the environment variable section, you might need to configure the port. Copy and paste PORT=8000 in the key field. If you have other environment variables that your application expects like database config, feel free to add those here too.

Hit deploy and in moments, your API is up and running.

Demo Application

https://vercel-fastapi-deployment.vercel.app

Source Code

https://github.com/mabdullahadeel/vercel-fastapi-deployment

Until next time 👋.

MobX - The missing piece in your complex react applications

Abdullah Adeel — Thu, 16 Mar 2023 03:38:42 +0000

I have always been a big fan of simplicity when managing global state in front-end applications. For a long time, redux has dominated this space and it still is a good option for most applications. But recently we’ve started seeing intuitive, lightweight, and generally better ways of handling global state. The most prominent libraries are zustand, jotai, recoil, and a few others.

This article is not aimed to convince you to use mobx in all of your react applications but how you should plan the architecture with the right tool to manage the global state given the nature of your application.

MobX is not React’s state management library but a Javascript state management library and can work well with a variety of frameworks and react is just one of them. At its core, it uses the concept of “observables”. An observable is a special type of object that notifies its so-called subscribers when its value changes. These subscribers can listen to the changes from the observable and react to those changes if they feel like it. In case of react, those subscribers are React components that trigger re-render when the value of observable changes. Other features provided by themobx include actions, computed, and reactions. We won’t go into details about the primitives of mobx but you are free to learn more about them in the documentation here.

As mentioned earlier, mobx is a state management library for javascript not for react. So, to make it work with react, a separate set of utilities is required. That is provided by mobx-react-lite. (There is a separate “mobx-react” package but for most applications, the lite version has everything covered).

The most prominent feature of mobx that makes it unique and the best choice for complex applications is managing state using classes. That opens doors to using your favorite design patterns in your fronted application while keeping the UI in sync. Combined with fine-grained reactivity, it becomes a perfect tool for building complex front-end applications.

Let’s build a simple spreadsheet application logic to understand the basic concepts of mobx.

As mentioned earlier, there are four primary primitives exposed by mobx.

observable: This creates a basic observable value that can be observed by reactive functions and components. When the value changes, any reactive functions that depend on it will be re-run.
action: an action is a function that modifies the state of observables in a predictable and controlled way. Actions are used to encapsulate state mutations and ensure that they are performed in a consistent way so that MobX can properly track the changes and update any dependent observables.
computed: This creates a computed value that depends on one or more observable values. When any of the observable values change, the computed value will be re-computed automatically.
reaction: This creates a reactive function that will be automatically re-run whenever a specific observable value changes.

This example takes the class-based approach but you can go through the docs to know about other handy approaches that allow you to basically get the same results. So in the end, it’s your decision that should only be affected by the application requirements.

Now, let’s start with our simple spreadsheet application.

// file: store.ts
import { makeObservable, observable, action, computed } from "mobx";

class SpreadsheetStore {
  data: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  constructor() {
    makeObservable(this, {
      data: observable,
      updateCell: action,
      rowCount: computed,
      columnCount: computed,
      cellData: computed,
    });
  }

  get rowCount(): number {
    return this.data.length;
  }

  get columnCount(): number {
    return this.data[0].length;
  }

  updateCell(rowIndex: number, columnIndex: number, value: number) {
    this.data[rowIndex][columnIndex] = value;
  }
}

export const store = new SpreadsheetStore();

// Example usage:
store.updateCell(0, 0, 10);
console.log(store.data);

makeObservable is a MobX utility function that allows you to define observable states, actions, and computed properties on an object which in this case is a class instance but can be a plain object or any primitive.

In this case, we pass the this object (which refers to the current SpreadsheetStore instance) as the first argument to makeObservable. We then pass a descriptor object as the second argument, which defines the observables, actions, and computed properties of the class.

But, mapping class members to mobx primitives can be tedious sometimes. That is where makeAutoObservable comes in handy. makeAutoObservable is a simpler way to define observables, actions, and computed properties on a class. It automatically detects and creates observables for any property that is accessed or modified during the construction of the object, and also detects and creates actions for any method that modifies observables.

// file: store.ts
import { makeAutoObservable } from "mobx";

class SpreadsheetStore {
  data = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  constructor() {
    makeAutoObservable(this);
  }

  updateCell(rowIndex, columnIndex, value) {
    this.data[rowIndex][columnIndex] = value;
  }

  get rowCount() {
    return this.data.length;
  }

  get columnCount() {
    return this.data[0].length;
  }
}

export const store = new SpreadsheetStore();

// Example usage:
store.updateCell(0, 0, 10);
console.log(store.data);

In this case, getters are automatically mapped as computed, while methods are actions by default. Any property is observable. This is short and concise but comes with limitations.

Now that we’ve state, let’s consume that in react component.

import React from "react";
import { observer } from "mobx-react-lite";
import store from "./store";

const Spreadsheet: React.FC = observer(() => {
  const handleCellChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    rowIndex: number,
    columnIndex: number
  ) => {
    const newValue = parseInt(event.target.value);
    store.updateCell(rowIndex, columnIndex, newValue);
  };

  return (
    <div>
      <table>
        <tbody>
          {store.data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, columnIndex) => (
                <td key={columnIndex}>
                  <input
                    type="number"
                    value={cell}
                    onChange={(event) =>
                      handleCellChange(event, rowIndex, columnIndex)
                    }
                  />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
});

export default Spreadsheet;

Here, observer HOC is imported from mobx-react-lite the package which makes Spreadsheet component react to the changes. The cool part here is that you don’t manually have to use selectors to select just that state that you want to avoid unnecessary re-renders. mobx handles that for you.

That wraps up this introductory example. Mobx has a special place when it comes to global state management libraries. You might not need it for your simple e-commerce site or a simple CMS site. You can easily get away with something like zustand or jotai which are more lightweight and easy to use than mobx . But when you’ve complex use cases where there are dependent states and application logic heavy, you should consider usingmobx .

How to add Discord like QR Code Login

Abdullah Adeel — Mon, 02 Jan 2023 17:53:10 +0000

We've all experienced the new form of logging into your account where you log in by scanning a QR code from a mobile app. The first time I interacted with it was with Discord. By now millions of people have been on this 👇 page to experience this amazing platform.

Besides beautifully crafted graphics, you can observe a QR code that you can scan using the discord mobile app to log in instantly.
In this article, I'll show you my approach that I reverse-engineered to achieve the same login experience in my application.

❓ What we're going to build?

In this article, I'll explain my approach to adding a QR code login. The app built as a reference has two main screens. Let's briefly discuss what it does.
Suppose a user is logged in on Device A and wants to log in on Device B. On Device A, the user will navigate to the page to enter (for simplicity; since both clients are browser based) a code shown on Device B's login screen. On success, the user will be automatically logged in on Device B.

👩‍💻 What's the stack?

In this article, I am going to use the following stack but you should be able to mimic this approach with any backend and frontend technology out there.

Backend

Django
Redis
PostgreSQL

Frontend

Nextjs (React/Typescript)

🎳 Architecture

To get better understanding of application architecture, visit this.

😺 GitHub Repo

The demo project source code can be found on GitHub

mabdullahadeel / yt-django-qr-code-login

Tutorial showing how to add qr code login with django, channels on the backend and nextjs frontend

Discord Like QR Code Login

This repo holds the code for a demo app that shows how to use QR codes to login to a web app.

Important Links

Youtube Tutorial -> https://youtu.be/8Pi5wp732Xw
Medium Post -> https://medium.com/@abdadeel/how-to-add-discord-like-qr-code-login-d2cef2f5657f
Architecture Diagram -> http://bit.ly/3IfywmD

Backend

Tech Stack

Django
Django Rest Framework
Django Channels
Postgresql
Redis

Prerequisites

Python >=3.9

How to run

Clone the repo
Move to the backend folder
```
 cd backend
```

Create a virtual environment by running

python -m venv env
#OR
python -m virtualenv env

Activate the virtual environment

 # Linux or Mac
 source env/bin/activate

 # Windows
 env\Scripts\activate

Install dependencies
```
pip install -r requirements.txt
```
To setup the database, either use docker or install postgresql on your machine.
- To use docker, run
```
docker-compose -f local.yml up -d
```
- To install postgresql on your machine, follow the instructions here

Apply migrations

python manage.py makemigrations
python manage.py migrate

To run the…

View on GitHub

🎥 Video

Watch me build a complete demo application 👇

Using Firebase to send real-time notifications in Django apps

Abdullah Adeel — Fri, 12 Aug 2022 14:35:53 +0000

Introduction

Recently, I have been exploring quite a few ways to add real-time functionality in Django applications. During my hunt, I came across many third-party services like PubNub, Pusher, and now Firebase which I think is the most exciting of all.

Following are the rubrics that I standardized during my decision and comparison to even custom solutions like django channels. Let's see how firebase fits these points.

Scalability : Firebase real-time database and firestore, both can scale automatically.
Security : Firebase has security rules that can be set precisely to resource authorization and setting those up takes just a few minutes. So, thumbs up for that.
Time to implementation : Firebase admin SDKs are well documented and are available for almost all server-side languages. So you can add real-time features in minutes.
Maintainability :With firebase, there is absolutely no maintenance except for some security rules that you might want to tweak as you add new features.
Cost : This can be a crucial factor and may vary from team to team or even from one project to another. Firebase has a generous free tier and pay-as-you-go plans available.

🚀 Let's Build A Demo Django App

In this article, I will guide you through all the steps you need to follow to successfully leverage firebase firestore to securely send real-time notifications to users in your django applications.
During my testing, I have built a demo application that you can refer to any time you find yourself lost.
Here is the Github 😸 link 👇

mabdullahadeel / django-firebase-notifications

Using firebase to send real-time notifications in django applications

Django Firebase Notifications

This is a simple django application that demonstrate how to add realtime notifications in django applications using firebase.

View on GitHub

Here is the live app 👇

https://django-firebase.vercel.app

Server Logic

The first problem that you might face when trying to implement firebase with your django application is authentication. Your users are currently being authenticated by your django application, how you would pass that auth state to firebase so it knows about the user?
To solve this, the solution is custom tokens. When the client successfully login with you django app, firebase admin SDK can be used to create a token for the client. The client will use this token to connect to firebase.
Here is how the flow goes.

See the full diagram here

Let's start with the user login. They put in their credentials to log into the frontend application. The client sends the credentials i-e username/email and password to the backend to exchange for a token(JWT or simple token).
The actual auth implementation might vary from application to application but in my demo, I am using DRF token base authentication. On successful login, the server generates two tokens as seen in the flow chart above.

"token" - This token will be used by the client to authenticate with django server for future requests.
"firebase_token" - This token will be used by the client to immediately authenticate with firebase automatically.

Sending the Notification

Let's go through the setup.

Here I assume that you have a firebase account which you do if you have a google account. To send notifications from django application, we are going to use firestore. If you have not already set up a firebase project or firestore, I would recommend going throughthis quickstart guide.

To communicate with firebase through admin SDK, you need service account credentials. To generate service account creds, go to the Service account in your firebase project console. Make sure you have selected the right project. Follow the following 👇

On success, you will have a .json file downloaded. Let's rename that file to credentials.json . Make sure to keep this file safe since the credentials in this file allow access to all firebase resources.

Set up admin SDK instance

Run the following pip command to install firebase SDK in your django project.



pip install firebase-admin

Then initialize the admin app instance providing the path to the credential.json file. If this file is in your project directory. Make sure to add credentials.json to your .gitignore file.
In my case, I created a helper class FirebaseService in core/firebase/firebase_service.py to handle all of the firebase-related logic.



import logging
from typing import Any, Dict
from uuid import uuid4
from django.conf import settings
from django.core.cache import cache

import firebase_admin
from firebase_admin import credentials, auth, firestore

from users.models import User

cred = credentials.Certificate(settings.GOOGLE_APPLICATION_CREDENTIALS) # path to credentials.json file

firebase_app = firebase_admin.initialize_app(cred)
auth_client = auth.Client(app=firebase_app)
firestore_client = firestore.client(app=firebase_app)

logger = logging.getLogger(__name__)


def cached(func):
    def wrapper(*args, **kwargs):
        user = kwargs.get('user')
        key = 'token_' + str(user.id)
        token = cache.get(key)
        if token is None:
            token = func(*args, **kwargs)
            cache.set(key, token, timeout=60 * 60) # 1 hour
        return token

    return wrapper

class FirebaseService:
  @staticmethod
  @cached
  def get_custom_token_for_user(user: User):
    auth_claims = {
      'uid': user.id,
    }
    return auth_client.create_custom_token(uid=user.id, developer_claims=auth_claims)

  @staticmethod
  def send_notification_to_user(user: User, message: Dict[str, Any]):
    msg_id = str(uuid4())
    notification_ref = firestore_client.collection(u'app-notifications') \
      .document(u'{}'.format(user.id)).collection("user-notifications").document(u'{}'.format(msg_id))

    notification_ref.set({
      u'message': message,
      'id': msg_id
    })
    logger.info(u'Notification sent to user {}'.format(user.id))

Here I am loading the GOOGLE_APPLICATION_CRENDITALS which is the path to the credentials.json file from the django settings. And in my settings.py file, I am loading the same variable from the environment using django-environ. You can have a look at that here.

get_custom_token_for_user method is responsible for creating tokens for a given django user. This token is then sent to the client to be used to authenticate with firebase. create_custom_token from firebase admin takes developer_claims argument. Whatever you passed here will be stored in the payload of the token. Not just that, this object/dict will be available in the firebase request.auth object. This means you can access this object on the client and even in the firebase security rules.
- send_notification_to_user method is used to send notifications by creating a new document in the firestore in a specific collection identified as app-notifications/{user_id}/user-notifications . The store structure is specifically chosen as it allows for the creation of security rules on this collection and only allows the user user_id to access the user-notifications collection. Here is the simplified flow.

Here is the firestore rule definition if you're interested.



rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match/app-notifications/{user_id}/{document=**} {
      allow delete, read: if
          request.auth.uid == user_id
    }
  }
}

Client Side Logic

On the client, install firebase.



yarn add firebase
# or
npm install firebase
# or
pnpm add firebase

Then in [./firebase/index.ts](https://github.com/mabdullahadeel/django-firebase-notifications/blob/master/client/firebase/index.ts) , I am using the credentials to initialize the firebase app and use it across the application.




import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FB_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FB_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FB_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FB_MSG_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FB_APP_ID,
};

export const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app);
export const auth = getAuth(app);

Then in my authentication logic, on successful login/signup I am automatically signing the user in with firebase using the token received from the django server.
See here for details



import { auth as firebaseAuth } from "./firebase";

const initializeFirebaseAuth = async (user: MeResponse) => {
    return signInWithCustomToken(firebaseAuth, user.fb_token);
};

To display notifications on the UI, I create a custom hook that subscribes to the appropriate channel to receive notifications for the currently logged-in user.




import React, { createContext, useEffect, useState, useContext } from "react";
import { doc, onSnapshot, deleteDoc, collection } from "firebase/firestore";
import { firestore } from "../firebase";
import { useAuth } from "../hooks/useAuth";

interface NotificationPayload {
  message: string;
  id: string;
}

interface NotificationState {
  messages: NotificationPayload[];
  unreadCount: number;
  resetUnreadCount: () => void;
  markAllAsRead: () => void;
  markOneMessageAsRead: (id: string) => void;
}

export const NotificationsContext = createContext<NotificationState>({
  messages: [],
  unreadCount: 0,
  resetUnreadCount: () => {},
  markAllAsRead: () => {},
  markOneMessageAsRead: () => {},
});

export const NotificationProvider: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  const [messages, setMessages] = useState<NotificationPayload[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const { isAuthenticated, user } = useAuth();

  useEffect(() => {
    let unsubscribe: () => void;
    if (isAuthenticated && user?.user) {
      unsubscribe = onSnapshot(
        collection(
          firestore,
          "app-notifications",
          user.user.id,
          "user-notifications"
        ),
        (snapshot) => {
          const messages = snapshot.docs.map((doc) => ({
            message: doc.data().message,
            id: doc.id,
          }));
          setMessages(messages);
          setUnreadCount((prev) => (messages.length ? prev + 1 : 0));
        }
      );
    }
    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, [isAuthenticated, user]);

  const resetUnreadCount = () => setUnreadCount(0);

  const markAllAsRead = async () => {
    if (isAuthenticated && user?.user) {
      await Promise.all(
        messages.map(async (msg) => {
          await deleteDoc(
            doc(
              firestore,
              "app-notifications",
              user.user.id,
              "user-notifications",
              msg.id
            )
          );
        })
      );
      setMessages([]);
    }
  };

  const markOneMessageAsRead = async (id: string) => {
    if (isAuthenticated && user?.user) {
      await deleteDoc(
        doc(
          firestore,
          "app-notifications",
          user.user.id,
          "user-notifications",
          id
        )
      );
    }
    setMessages(messages.filter((msg) => msg.id !== id));
  };

  return (
    <NotificationsContext.Provider
      value={{
        messages,
        unreadCount,
        resetUnreadCount,
        markAllAsRead,
        markOneMessageAsRead,
      }}
    >
      {children}
    </NotificationsContext.Provider>
  );
};

export const useFirebaseNotifiactions = useContext(NotificationsContext);

Conclusion

Exploring this new way of implementing real-time features was exciting and its no doubt one of the best options when it comes to critical factors like scalability, maintainability, and time to implementation.
If you want to test it, here is the live demo👇

https://django-firebase.vercel.app

If you would like to see another similar approach with PubNub give this article a read👇.

How to add real-time notifications with Django and nextjs

Abdullah Adeel ・ Jul 25 '22

#django #pubnub #nextjs #python

If you like what you just read, why not throw a follow on Twitter abdadeel_

Thanks 👋

How to add real-time notifications with Django and nextjs

Abdullah Adeel — Mon, 25 Jul 2022 22:17:00 +0000

Introduction

Django to this day is a battle-tested web framework built with one of the most loved programming languages - -Python. Its feature-rich has built-in support for crucial and critical things like user authentication, security, a powerful ORM (Object Relational Mapper), a built-in admin panel, forms, and much more already built into the framework.

But if we go back to the initial days of Django, there was barely a concept of microservices and event-based architecture. Monolith stacks were popular with minor cheeky touches to keep the stack meet the complex requirements of the time.

But today, web apps are much more modularized. We have excellent frontend frameworks like React, Vue, Svelte, etc providing far better UI/UX than templates. The world has shrunk and everyone now wants real-time experience when it comes to web apps. No more refreshes. No nothing. I want real-time changes!

But Django was never built to handle the real-time side of things e.g websockets, polling, etc. No doubt we have solutions like Django channels along with technologies like celery to solve the problem. But that too comes with more problems like:

Complexity - Django's slogan The web framework for perfectionists with deadlines becomes stale.
Scalability - Scaling a real-time system is a challenge in itself. Combining it with having to build with tech that was not initially meant for it becomes super complex.

🎉 Let's Solve The Problem

In this article, I'll show you how you can add any sort of real-time functionality to your Django application while keeping the complexity and time to implementation minimal.
Here I'll use PubNub to add notification features to a basic social media application I built as a demo. If you want to have a look at the codebase, here you go! 👇

mabdullahadeel / django-pubnub-notifications

An implementation of pubnub with django to deliver real-time notifications to users

DJ PubNub

This is a simple social media application build with django and nextjs with realtime notification features powered by PubNub.

View on GitHub

Live App 👇

https://django-pubnub.vercel.app

PubNub has been in the business for a really long time and their infrastructure is mature enough to handle a user base of any size you have and they have a very generous Free Tier 😉 as well. On top of that, you can either use their REST API for everything or use their SDKs. SDKs are available in pretty much all the server-side languages.

Application Description

This is a basic social media application. User can signup using their email and passwords. Create/Edit their posts. Users can comment on posts. Whenever a new comment is created, a notification is sent to the post owner.

👩‍💻 Tech Stack

Django (Web Server)
Django REST framework (APIs)
PostgreSQL
PubNub (for real-time notifications)
Nextjs (frontend)

Click to see the full diagram

Server Logic

On the server, I have created basic Post and Comment models in the users/models.py file. CRUD Rest APIs are handled using django restframework . Pretty basic route handlers using generic views and model serializer.

In server/core/pubnub/pubnub_service.py, I have created a basic utility class that exposes two basic functions from PubNub's python SDK. First, when the user logs in, a secret token has to be created for each user so that they can safely connect to PubNub. These authorization tokens make sure that only clients authorize to access a channel should allow reading messages from that channel.




import logging

from django.conf import settings
from pubnub.models.consumer.v3.channel import Channel
from pubnub.pnconfiguration import PNConfiguration
from pubnub.pubnub import PubNub
from pubnub.exceptions import PubNubException

from users.models import User

logger = logging.getLogger(__name__)

pnconfig = PNConfiguration()

pnconfig.publish_key = settings.PUBNUB_PUBLISH_KEY
pnconfig.subscribe_key = settings.PUBNUB_SUBSCRIBE_KEY
pnconfig.secret_key = settings.PUBNUB_SECRET
pnconfig.uuid = settings.SERVER_PUBNUB_UUID

pubnub = PubNub(pnconfig)

class PubNubService:
    DEFAULT_NOTIFICATION_TTL = 60 # 60 minutes

    @staticmethod
    def get_notification_token_for_user(user: User, ttl: int = DEFAULT_NOTIFICATION_TTL):
        envalope = pubnub.grant_token() \
            .channels([Channel.id(user.get_notification_channel_name()).read().delete()]) \
            .ttl(ttl) \
            .authorized_uuid(user.get_notification_channel_name()) \
            .sync()
        token = envalope.result.token
        token_payload = pubnub.parse_token(token)

        return {
            "exp_timestamp": token_payload["timestamp"],
            "token": token,
            "ttl": token_payload["ttl"],
        }

    @staticmethod
    def send_notification_to_user(user: User, message):
        try:
            pubnub.publish() \
            .channel(user.get_notification_channel_name()) \
            .message(message) \
            .use_post(use_post=True) \
            .sync()
        except PubNubException as e:
            logger.error(e)

Here I am creating a PubNub channel for each user. The name of that channel is the UUID of the user identified by custom get_notification_channel_name . When the user logs into my Django application, only that user will be granted a token to access the notifications channel associated with their unique id. This way, each user gets notifications intended for them.

Channels are fundamentals of how PubNub works. Your application can create as many PubNub channels as it needs. In fact, whenever you specify a channel in your request, if it does not already exist, it will be created before placing the message in the channel.

Django signals are being used to detect comments save events and on successful comment save, a notification is sent to the user through the signal receiver function. It's that simple! Here is the simple receiver function.



import logging

from uuid import uuid4

from .models import Comment

from django.db.models.signals import post_save

from django.dispatch.dispatcher import receiver

from core.pubnub.pubnub_service import PubNubService

logger = logging.getLogger(name)

@receiver(post_save, sender=Comment)

def create_comment_notification(sender, instance: Comment, created, **kwargs):

    post = instance.post

    author = post.author

    commenter = instance.user

    if created and author != commenter:

        message = {

            "message": f'{commenter.username} commented on your post.',

            "peek": f'{instance.text[0:10]}...',

            "id": str(uuid4())[0:8],

            "pid": str(post.id),

        },

        PubNubService.send_notification_to_user(user=author, message=message)

        logger.warn("Notification sent to user: %s", author.username)

Conclusion

This approach is not just limited to sending notifications, you can extend it to complex features like real-time chats, likes, etc. You get the point. This offloads handling real-time connections to PubNub. In my opinion, the cost is pretty comparable as well. If you handle all of this yourself, your team has to code all the real-time connections stack which takes both time and resources. On top of that, now your team has to take care of testing, maintaining, and scaling another infrastructure which is going to take even more resources as well. But this post should give you a good idea of which route you want to go.

If you like what you just read, don't forget to follow me on Twitter 🐤, LinkedIn and Youtube. I share articles along with working examples and embeds so you can have a better reading/learning experience.
Here is the app link if you want to play with it.

👉 https://django-pubnub.vercel.app

See Ya! 👋

How to create custom code snippets in VS Code

Abdullah Adeel — Sat, 19 Mar 2022 02:39:41 +0000

VS Code supports creating code snippets that come in handy to save time by not manually typing the same code again and again.

For example, if you're a react developer, there are concepts of components (essentially in every frontend framework - not just react). Whenever you create a new component in a separate file, you have to manually type the function and then export it from the file. And if typescript is being used, you have to define the types of Props.

How cool it would be to define some most used code snippets and then use them from time to time. In this article, we will see how you can build your own code snippets inside VS Code for any language of choice.

Overview

VS Code allows you to define custom snippets in a JSON file format. The snippet can be global which means that you can use that snippet in any file i-e .js, .java, .py, .es, .go, etc. Besides that, there are dedicated files each related to a specific programming language.
Predefined files can be found by opening VS Code and going to File > Preferences > User Snippets.

Creating your first snippet

In this section, we will look at how we can create a snippet for the React component using typescript. Have a look 👇.

Open VS Code and go to Files > Preferences > User Snippets

This will open VS Code pallet with options to select any language. Type typescript in the search bar and select typescriptreact option.

This will open the typescriptreact.json file in your editor. This file by default contains the following content.

{
    // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

If you have never touched this file before, this is the content you should see. Here you can already see that the comments show an example of how you can define your own snippets.

The following are required to be defined in an Object in order to create a custom snippet.

prefix - a string or list of string that will trigger the snippet.
body - a list of strings with each entry representing one line in the snippet.
description - A short description that will pop up when the respective prefix is typed.

Now to add a new snippet, replace the content of your file with this 👇.

{
  "Create TS React Component": {
    "prefix": "trc",
    "body": [
      "import React from 'react';",
      "",
      "interface MyComponentProps {}",
      "",
      "const MyComponent: React.FC<MyComponentProps> = (props) => {",
      "  return (",
      "    <div>",
      "      <h1>Hello World from MyComponent</h1>",
      "    </div>",
      "  );",
      "};",
      "",
      "export default MyComponent;"
    ],
    "description": "Create TS Functional React Component"
  }
}

This is a boilerplate for a typical react functional component using typescript. We gave it the prefix trc short for typescript react component. This means that as soon as we start writing trc, this snippet dropdown should pop up. Let's test it.

Save typescriptreact.json and create another file name Button.text. You can call the file whatever you want but it should have a.tsx` extension.

Move into that file and type trc. As soon as you start typing, you should see a dropdown with the first option being the best match.

Now as soon as you press enter, a new typescript react component will be create for you out of air 😉.

Tabstops

Tabstops are the ways to modify snippet after it is created. The modification takes place by placing your cursor at the pre-specified positions. $1, $2 syntax is use to represent tabstops. Read more about tabstops here.

Lets modify our snippet so that we can edit the component name as soon as it is created. Here is how you can do it.

`js
{
"Create TS React Component": {
"prefix": "trc",
"body": [
"import React from 'react';",
"",
"interface ${1:MyComponent}Props {}",
"",
"const ${1:MyComponent}: React.FC<${1:MyComponent}Props> = (props) => {",
" return (",
"

",
"

Hello World from ${1:MyComponent}

",
" ",
" );",
"};",
"",
"export default ${1:MyComponent};"
],
"description": "Create TS Functional React Component"
}
}

Here, only one tabstop is passed and as soon as the component is created, VS Code will place multi-cursors to edit the component name if you want to. MyComponent after : is now a placeholder value. Here is the result.

Using Variables.

Variables can be used to add external context in your snippet. VS Code by default provide variables to use in your snippets. You can browse the full list of available variables here.

Here is our example modified to by default use the filename instead of MyComponent as the prop.

`js
{
"Create TS React Component": {
"prefix": "trc",
"body": [
"import React from 'react';",
"",
"interface ${1:$TM_FILENAME_BASE}Props {}",
"",
"const ${1}: React.FC<${1}Props> = (props) => {",
" return (",
"

",
"

Hello World from ${1}

",
" ",
" );",
"};",
"",
"export default ${1};"
],
"description": "Create TS Functional React Component"
}
}

With that, this article concludes. If you want to get full insights on whats possible with snippets, you can visit docs here https://code.visualstudio.com/docs/editor/userdefinedsnippets.

Follow me on twitter @abdadeel_ for more web dev and software engineering content. Thanks!

Shell Scripting Basics: Beginner's Guide - Part II

Abdullah Adeel — Mon, 03 Jan 2022 20:33:31 +0000

In my last post about shell scripting, I talked about the basics of shell scripting. In this article, I am going to discuss some unfamous commands/uses of shell scripting extending the previous ones.

If you're a complete beginner to shell scripting, you should still be able to get everything in this article but it is recommended that you first read this and join me back here. I'll be waiting.

Referencing the script itself

In your shell script flow, there may be some scenarios where you need to access the information about the currently running script. Let's say you want to know the name of the script currently being executed at the time of execution. You can simply do that by using $0. You might have seen this syntax in the previous article. In that case, you could use similar syntax to access the flags/argument passed to the script when executing. But in this case $0 is just the reference to the current script.

#! /bin/bash

echo "The name of the current file is $0"

Declaring an Array

Arrays are one of the most commonly used data structures out there and bash also supports arrays with pretty much straightforward syntax.
An array can be initialized using ( ) and you can pass default values separated by spaces. A simple example is shown below.

#! /bin/bash/

my_friends=("Aley" "John" "Doe")

To access the values stored in an array, you can simply use the index to access the value. Keep in mind that indexes start from 0.

#! /bin/bash

echo ${my_friends[0]}

: '
Output: 
>> Aley
'

Similarly, the negative index can be used to access the value from the end of the array.

#! /bin/bash

echo ${my_friends[-1]}

: '
Output: 
>> Doe
'

Until Loop

Until loops work similarly to while loops with the only difference being it on terminate when the condition returns True.

until [ your_condition ]
do
        <some_command>
done

A great use case of until would be waiting for the database to be available before starting the main server to prevent crashes.

#! /bin/bash

postgres_ready() {
python << END
import sys
import psycopg2
try:
    psycopg2.connect(
        dbname="${POSTGRES_DB}",
        user="${POSTGRES_USER}",
        password="${POSTGRES_PASSWORD}",
        host="${POSTGRES_HOST}",
        port="${POSTGRES_PORT}",
    )
except psycopg2.OperationalError:
    sys.exit(-1)
sys.exit(0)
END
}
until postgres_ready; do
  >&2 echo 'Waiting for PostgreSQL to become available...'
  sleep 1
done
>&2 echo 'PostgreSQL is available'

: '
# src 👇
https://bit.ly/3nlrS2q
'

At this point, you're ready to take charge of handling automated shell scripts in your team workflow.
For more web dev content and resources, please join my Twitter family by following @abdadeel_.

100 lines of Elixir

Abdullah Adeel — Tue, 07 Dec 2021 20:05:15 +0000

Elixir is a multi-purpose dynamically typed functional programming language which when combined with the phoenix web framework is one of the hottest topics out there. Even though elixir is a pretty new player in the market launched in 2011, the roots are pretty deep since it runs on Erlang VM. This means that it highly infers the characters of Erlang VM and provides a much simpler, easy to read and maintainable codebase. Erlang being built by a telecommunication company named Erricson back in the '80s, highly focuses on concurrent connections and fault tolerance
To learn more about Erlang, click here

In other words, if concurrency, scalability, and reliability are the main concerns of your application, Elixir is one of the best choices out there. That's it for theoretical introduction, and time to get hands dirty with some elixir code.
To start, you'll first have to install both Erlang and Elixir on your machine. To install on your respective operating system, visit installation guide.
After you have successfully installed Elixir, you should be able to type the following command in your terminal without any error.

After this, type iex in your terminal and this should start an interactive elixir shell and you should be able to perform basic arithmetic operators there as shown below.

This interactive shell is good for basic things but if you want to work with a large elixir codebase, it's obvious that you need an IDE or text editor. Obviously 😁.
For that, use mix to create a new elixir project. mix is the dependency and command line manager for elixir. Think of it as npm for node, cargo/rustc for rust, or pip for python.
cd to your desire directory where you want to create a new elixir project and run the following command.

mix new my_project

and then open the folder in your favorite text editor.

Looking at the folder structure, you can see that mix pretty much set up the whole project for you including the git initializing. The main application code lives in the lib folder. Another cool thing about the elixir is that it comes pre-configured with very good testing support. mix.exs is the file, where mix keeps track of all the project dependencies just like a package.json file for node. Now it's time to see some elixir magic. Open lib/my_project.ex. Remember, the name of the file in the lib folder would be the same as the name of your project. When you open the file, the default module is something like this 👇.

defmodule MyProject do
  @moduledoc """
  Documentation for `MyProject`.
  """

  @doc """
  Hello world.

  ## Examples

      iex> MyProject.hello()
      :world

  """
  def hello do
    :world
  end
end

Even though the elixir is a functional programming language, but it provides a lot of macros that help you organize the code into manageable modules to abstract away all the logic into one module and you don't need to even export these modules to use them in other modules.
In the above snippet, you see a lot of words starting from @ are the attributes. Elixir has a built-in docs generator and you can use tools like ex_doc to generate the docs from the @moduledoc and @doc attributes. To start, add the following dependency to deps function in mix.exs so that it looks something like this 👇.

  def deps do
    [{:ex_doc, "~> 0.21", only: :dev, runtime: false}]
  end

Then run the following command to install the dependency in your project.

mix deps.get

To generate docs, run the following command and it should create a new folder name doc in project directory with all the HTML files for the documentation.

Execute the following command to generate docs

mix docs

Opening index.html with liveserver will reveal docs.

Enough for the docs, let's run some code.

Add a function named hello under the MyProject module. This function simply prints the "world" string to the terminal. To call this function, go the terminal in the current project directory and execute the following command.

iex -S mix

This will open an iex session but this time, it will compile all the application code and import the modules into the current iex session.
To execute the function that you wrote, run the following 👇.

iex(2)> MyProject.hello
world
:ok
iex(3)>

This was a brief introduction to the Elixir. In the future, I'll be releasing a series on the basics of elixir so that it's easier for beginners to understand this phenomenal functional language and build the next big Discord.

Fun fact

Discord is one of the early adopters of Elixir and today, elixir is paying back by handling billions of messages and calls per day on the platform.

For more web-development content, please follow me on twitter @abdadeel_ . See you there !

Thanks