DEV Community: Ayoub Abidi

Bayan Flow 0.3.0: From 6 to +20 Algorithms

Ayoub Abidi — Sun, 29 Mar 2026 17:07:19 +0000

I shipped 0.3.0 of Bayan Flow last week. This one was mostly about filling things out.

Quick background, if you haven't seen it before: Bayan Flow is an interactive algorithm visualizer. Sorting algorithms rearranging arrays, pathfinding algorithms crawling across grids, step by step, in real time. English, French, and Arabic, with full RTL support. Built with React 19, Vite, Tailwind, and Framer Motion.

0.2.0 was the infrastructure release: i18n, landing page, fullscreen, sound, tests, CI/CD. 0.3.0 is the "okay, now add the actual algorithms" release.

Sorting: 3 → 14

The original three were Bubble, Quick, and Merge. Fine for a start, but those are also the three that show up in every tutorial. I wanted the fuller picture.

So I added eleven more. The classics that somehow didn't make the first cut: Selection Sort, Insertion Sort, Heap Sort. Then Shell Sort (insertion sort with shrinking gaps, better average-case). Then the non-comparison group: Radix Sort, Counting Sort, Bucket Sort: these work on a completely different principle than the comparison-based algorithms, and I wanted that contrast visible in the visualizer.

Cycle Sort was an interesting one to add. It minimizes writes, which sounds academic until you think about flash memory or anything with write-cycle limits. Comb Sort is bubble sort, but with shrinking gap sizes instead of always comparing adjacent elements: a small tweak with a real impact on performance.

Tim Sort is the one Python and Java actually use in production. It's a hybrid of merge and insertion sort, optimized for real-world data patterns that tend to have already-sorted subsequences. Writing the step descriptions for it in three languages was genuinely tedious.

And then there's Bogo Sort. Randomly shuffles the array until it happens to be sorted. Technically, a sorting algorithm. Worst-case runtime is unbounded. I included it because it's funny, and also because it's a surprisingly clean way to explain what "sorting" actually means. If you can tell when it's done, you have a sorting algorithm.

Each one has its own step descriptions, color states, and a Python implementation in the code panel.

Pathfinding: 3 → 9

The original three were BFS, Dijkstra, and A*. Standard algorithm curriculum. Not the whole story.

Bidirectional Search runs from both endpoints simultaneously and meets in the middle, cutting the search space roughly in half. Greedy Best-First uses a heuristic to aim toward the goal without caring about path cost, which makes it faster than A* on some inputs but non-optimal. Jump Point Search prunes symmetric paths on uniform-cost grids and is noticeably faster than A* on open grids.

Bellman-Ford handles negative edge weights, which Dijkstra can't. IDA* is memory-efficient A* via iterative deepening. D* Lite does incremental replanning when the environment changes after the initial search. It's the kind of algorithm that shows up in robotics.

All nine support walls, variable grid sizes, and localized step descriptions across English, French, and Arabic.

A couple of perf fixes

I wrapped ArrayBar and GridCell with React.memo. When you've got dozens of elements animating at once, you don't want them re-rendering on every tick. I also fixed the FAB disabled state, which was only checking the selected sorting algorithm and ignoring whether a pathfinding algorithm was selected. And some pathfinding implementations weren't consistently checking grid[row][col] === 1 before processing neighbors, fixed across BFS, Dijkstra, A*, and Greedy.

Tests

925 tests now. I added step-structure assertions for the sorting visualizations, so you can verify the algorithm generates the right sequence of steps, not just the right final output. For pathfinding, I extracted a shared helper assertPathfindingStepStructure. Having one assertion to maintain instead of nine copies made a real difference when adding new algorithms.

What's next

0.4.0 will have new algorithm family categories beyond sorting and pathfinding. I'm also planning video export, an educational panel with some historical context, and an interactive code panel where you can edit the implementation and run it against tests.

Bayan Flow 0.2.0: finishing the foundations (i18n, RTL, tests, and small UX wins)

Ayoub Abidi — Sat, 20 Dec 2025 11:57:47 +0000

A few weeks after shipping version 0.1.0, I realized the hard part wasn’t new algorithms, it was the stuff that makes an app feel usable and maintainable. Version 0.2.0 isn’t flashy. It’s the set of changes that stop future work from turning into a refactor nightmare.

This DevLog covers what I actually did: why I prioritized internationalization and RTL, what I added to make the UI feel finished, and the infrastructure work that lets me iterate safely.

Quick recap

If you’re new: Bayan Flow is an interactive algorithm visualizer built with React 19, Vite, Tailwind, and Framer Motion. The goal is to make algorithms feel intuitive, not just correct.

Why this release exists

Three drivers for 0.2.0:

Accessibility/i18n: English-only felt wrong for an educational tool; added French and Arabic.
Polish/UX: Landing page, onboarding, sound, fullscreen, and finer UI behavior so it doesn’t feel like a dev toy.
Maintainability/infrastructure: tests, CI/CD, dependency automation, so future features don’t break everything.

Internationalization and RTL

I used i18next for English, French, and Arabic. Extracting strings into JSON was the easy part. Arabic introduced the real challenge: layout direction.

Tailwind 4 supports RTL, but the work was in being intentional:

Replace directional classes (ml-4, pl-2) with logical ones (ms-4, ps-2) where appropriate.
Audit components for animation direction: things like slide-in need to invert when text direction flips.
Make language detection automatic (browser locale) but allow manual overrides.

Result: the app flips cleanly. It’s not obvious when it’s right, but painfully obvious when it’s not, so doing this now saves pain later.

Sound effects (experimental)

I added opt-in audio feedback with Tone.js:

Beeps on comparisons during sorts.
Grid-based tones for pathfinding exploration.
A small chord when the path completes.

Totally optional, labeled experimental. It adds a tactile layer to the visuals. If you’re a sound nerd and it’s janky, please open an issue or send a PR.

Landing page, routing, and onboarding

Version 0.1.0 dropped users straight into the visualizer. That’s fine for devs, not for learners.

Now there’s:

A simple landing hero and features section.
A roadmap preview and basic onboarding copy.
React Router for landing, visualizer app, and roadmap pages.

This basic structure makes the project approachable for first-time visitors and teachers.

Fullscreen mode and UI refinements

Small UX changes that matter:

Fullscreen mode to hide other components and focus on the visualization.
Auto-hiding legend panel: shows when needed, fades when idle.
Control panel layout fixes (Windows and non-Linux screen ratios).
Little accessibility touches that improve discoverability and clarity.

Testing and infrastructure

The boring-but-critical work:

Using Vitest, we now have 31 test files (666 tests in total). Component tests, hooks, and utilities.
CI/CD overhaul: Netlify branch deployments, PR protections, Codecov for coverage.
Renovate to automate dependency updates.

Not 100% coverage yet (but really, who arrived there in the first place), but enough to refactor confidently without breaking core flows.

What I didn’t do

I didn’t add a ton of new algorithms. Why? Because adding algorithms on top of shaky foundations becomes a maintenance tax. Fixing RTL, wiring tests, and adding routing now makes future feature work simple and low-risk.

Also, I got distracted and shipped a beta of another side project called Swiss Knife. Story of every dev, I guess.

Challenges and lessons

Thinking in start/end vs left/right is surprisingly hard. One missed class breaks the whole RTL layout.
Vitest + Vite module resolution caused longer debugging sessions than expected.
The sound effects system is fun but subjective; user feedback will decide whether it stays or not.

What’s next

Now that the foundation exists, I’ll return to the core feature set:

More sorting and pathfinding algorithms.
Better complexity analytics.
Side-by-side Python code integration so you can see visualization and implementation together.

Conclusion

Version 0.2.0 wasn’t about new algorithms. It was about making Bayan Flow reliable, accessible, and maintainable. Those are boring changes on paper, but they pay off when you want to ship features fast and keep contributors sane.

If you try it, tell me what you think, especially about the audio and the mobile experience. I’ll keep logging progress; next episode should be algorithm-heavy again.

App: https://bayanflow.netlify.app
GitHub Repo: https://github.com/ayoub3bidi/bayan-flow
Product Hunt: https://www.producthunt.com/products/bayan-flow

Thanks for reading, and if you’re into projects like this, feel free to check out the video or subscribe on YouTube. More devlogs and experiments are coming soon.

I Built an App That Makes Learning Algorithms Way Easier

Ayoub Abidi — Mon, 10 Nov 2025 18:55:16 +0000

For the longest time, I’ve always felt that learning algorithms was harder than it needed to be.

Not because the concepts were too complicated, but because they were always presented in such a "dry" way.

Slides, PDFs, snippets of pseudocode… they explain what’s happening, sure, but they don’t really make it click in your head. At least, not for me.

So I decided to build something that would.

A few days ago, I quietly released a small project called Bayan Flow, an interactive visualizer that helps you see how algorithms actually work, step by step. Honestly, it’s one of those “I wish I had this when I was learning” projects. But then it started to grow into something that others might actually find useful.

The name “Bayan” comes from Arabic; it literally means clarity. That’s the main goal here: to make learning algorithms more intuitive and less abstract.

What It Actually Does

Right now, Bayan Flow focuses on two main algorithm types: Sorting and Pathfinding.

In Sorting Mode, you can visualize Bubble Sort, Quick Sort, and Merge Sort as they rearrange arrays in real time. You can watch comparisons, swaps, and the final order forming right in front of you. Each element changes color to reflect what’s happening, and you can even control playback speed or step manually.
In Pathfinding Mode, you can watch algorithms like BFS, Dijkstra, and A* as they search for the shortest path on a grid. It’s almost like watching the algorithm think, expanding, checking cells, and finding the route.

And when everything’s done, there’s a Complexity Panel that shows you time complexity, graphs, and performance metrics.

Under the Hood

Bayan Flow is built with React 19, Vite, Tailwind CSS, and Framer Motion for smooth animations. Everything’s designed to feel lightweight, fast, and responsive. You can even use it on mobile.

For developers who want to explore the codebase, the project is open-source on GitHub. Each algorithm is split into two parts: one version handles visualization, and the other is a pure implementation for testing. If you want to contribute, you can literally just define your algorithm and plug it in.

The Bigger Goal

I didn’t want this to just be another “algorithm visualizer”

The goal is to make it a small learning platform, something that blends visualization, explanation, and interactivity.

Future updates will include:

More sorting and pathfinding algorithms
A deeper Complexity Analyzer
Python integration for code + visuals learning
Possibly, small challenges where users can tweak logic live

It’s still early, but I’m happy with how it’s shaping up. And that’s what this whole thing is about: sharing that experience.

App: https://bayanflow.netlify.app
GitHub Repo: https://github.com/ayoub3bidi/bayan-flow
Product Hunt: https://www.producthunt.com/products/bayan-flow

Thanks for reading, and if you’re into projects like this, feel free to check out the video or subscribe on YouTube. More devlogs and experiments are coming soon.

Quick Tutorial: Implementing Google OAuth2 in FastAPI (Callback Method)

Ayoub Abidi — Wed, 30 Apr 2025 13:05:51 +0000

Hey there! 👋 Let's learn how to get user information from Google using the OAuth2 callback method in FastAPI. We'll keep it super simple and focused!

What We're Building

We'll create two endpoints:

One that gives us a Google login URL
Another that receives Google's callback and gets user info

That's it! No complicated stuff, just the basics to get rolling.

Prerequisites

pip install fastapi requests

Step 1: Set Up Your Environment Variables

OIDC_GOOGLE_CLIENT_ID=your-client-id
OIDC_GOOGLE_CLIENT_SECRET=your-client-secret
OIDC_GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google

Step 2: Create Your Google Handler

Create a file called google.py:

import requests

def get_user_infos_from_google_token_url(code):
    # Exchange the code for tokens
    token_response = requests.post(
        "https://oauth2.googleapis.com/token",
        data={
            "code": code,
            "client_id": OIDC_GOOGLE_CLIENT_ID,
            "client_secret": OIDC_GOOGLE_CLIENT_SECRET,
            "redirect_uri": OIDC_GOOGLE_REDIRECT_URI,
            "grant_type": "authorization_code",
        }
    )

    # Get the access token
    access_token = token_response.json().get("access_token")

    # Use the access token to get user info
    user_info = requests.get(
        "https://www.googleapis.com/oauth2/v2/userinfo",
        headers={"Authorization": f"Bearer {access_token}"}
    ).json()

    return {
        "status": bool(user_info),
        "user_infos": user_info
    }

Step 3: Create Your FastAPI Routes

Create your routes file:

from fastapi import APIRouter, HTTPException

router = APIRouter()

@router.get("/google/login")
async def login_google():
    # Build the Google login URL
    params = {
        "response_type": "code",
        "client_id": OIDC_GOOGLE_CLIENT_ID,
        "redirect_uri": OIDC_GOOGLE_REDIRECT_URI,
        "scope": "openid email profile"
    }

    # Create the query string
    query_string = "&".join(f"{key}={value}" for key, value in params.items())

    # Return the full auth URL
    return {
        "url": f"https://accounts.google.com/o/oauth2/v2/auth?{query_string}"
    }

@router.get("/google")
async def auth_google(code: str = None):
    if not code:
        raise HTTPException(status_code=400, detail="No code provided")

    # Get user info using the code
    result = get_user_infos_from_google_token_url(code)

    if not result['status']:
        raise HTTPException(status_code=400, detail="Couldn't get user info")

    # Return the user info!
    return result['user_infos']

How to Use It

Hit /google/login to get your Google login URL:

response = requests.get("http://localhost:8000/auth/google/login")
login_url = response.json()["url"]

Open that URL in a browser. After login, Google will redirect to your callback URL with a code.
Your callback endpoint will automatically:
- Grab the code from the URL
- Exchange it for an access token
- Use the token to get user info
- Return the user info to you!

The user info you get back will look something like this:

{
    "id": "1234567890",
    "email": "user@example.com",
    "verified_email": true,
    "name": "John Doe",
    "picture": "https://lh3.googleusercontent.com/..."
}

That's all there is to it! Now you can use this user info however you want - create accounts, log people in, whatever you need! 🚀

Testing It Out

The easiest way to test:

Start your FastAPI server
Visit /docs in your browser
Try the /google/login endpoint
Click the URL it gives you
Watch the magic happen!

Happy coding! 🎉

Quick Tutorial: Adding Google Auth to FastAPI (Token Method)

Ayoub Abidi — Wed, 30 Apr 2025 13:05:14 +0000

Hey there! 👋 Let's dive into implementing Google authentication in your FastAPI application using the token method. This is perfect when you're working with frontend frameworks like React and want to handle Google Sign-In without dealing with complex OAuth2 flows.

What We'll Cover

We'll focus specifically on verifying Google tokens and extracting user information on the backend. This approach works great with frontend libraries like @react-oauth/google that handle the Google Sign-In button and initial authentication flow.

Prerequisites

Before we start, make sure you have:

A FastAPI application set up
A Google Cloud Project with OAuth2 credentials
The following Python packages installed:

  pip install fastapi google-auth requests python-jose

The Code

First, let's create a utility function to verify Google tokens and extract user information. Create a file called google.py:

from google.auth.transport import requests as google_requests
from google.oauth2 import id_token

def get_user_infos_from_google_token(id_token_str):
    # Verify the token and get user info
    id_info = id_token.verify_oauth2_token(
        id_token_str, 
        google_requests.Request(), 
        OIDC_GOOGLE_CLIENT_ID  # Your Google Client ID from env variables
    )

    user_infos = {
        'id': id_info['sub'],  # Google's unique identifier for the user
        'email': id_info.get('email'),
    }

    if not user_infos:
        return {
            "status": False,
            "user_infos": user_infos
        }

    return {
        "status": True,
        "user_infos": user_infos
    }

Now, let's create the endpoint that will handle the Google authentication. This goes in your routes file:

from fastapi import APIRouter, HTTPException, status
from datetime import timedelta

router = APIRouter()

@router.get("/google")
async def auth_google(credential: str = None):
    if not credential:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail="No credential provided."
        )

    # Verify the Google token
    check = get_user_infos_from_google_token(credential)
    if check['status'] is False:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST, 
            detail="Invalid credential"
        )

    user_infos = check['user_infos']

    # Here you would typically:
    # 1. Check if the user exists in your database
    # 2. Create a new user if they don't exist
    # 3. Generate your application's JWT token

    # For example:
    access_token = create_access_token(
        data={"sub": user_infos['email']},
        expires_delta=timedelta(minutes=30)
    )

    return {"token": access_token}

How It Works

The frontend handles the Google Sign-In flow and gets a credential token from Google
Your frontend sends this token to your /google endpoint
The backend verifies the token using Google's libraries
If valid, you get the user's information (like email and Google ID)
You can then create a session, JWT token, or whatever authentication mechanism you're using in your app

Environment Variables

Make sure to set up these environment variables:

OIDC_GOOGLE_CLIENT_ID=your-google-client-id
ACCESS_TOKEN_EXPIRE_MINUTES=30  # or whatever duration you prefer

Frontend Integration

On your React frontend, you'd typically have something like this:

import { GoogleLogin } from '@react-oauth/google';

function Login() {
  const handleSuccess = async (credentialResponse) => {
    const response = await fetch('/api/google?credential=' + credentialResponse.credential);
    const data = await response.json();
    // Store the token, update your auth state, etc.
  };

  return (
    <GoogleLogin
      onSuccess={handleSuccess}
      onError={() => console.log('Login Failed')}
    />
  );
}

That's it! This setup gives you a clean way to handle Google authentication using tokens. Remember to add proper error handling and user management based on your application's needs.

Security Notes

Always verify tokens server-side
Keep your Google Client ID secure
Consider adding rate limiting to your auth endpoints
Store user tokens securely in your frontend (preferably in HTTP-only cookies)

Happy coding! 🚀

Quick tutorial: How to add a release GitHub workflow

Ayoub Abidi — Fri, 01 Mar 2024 08:07:31 +0000

As developers, we often find ourselves repeating manual steps when releasing new versions of our software. GitHub Actions allows us to automate these tasks, ensuring consistency and saving valuable time. Whether you’re deploying a web app, a library, or any other project, setting up a release workflow can significantly improve your development process.

Prerequisites

Before we dive into the tutorial, make sure you have the following:

GitHub Repository: You’ll need a GitHub repository where you want to set up the release workflow.
Basic YAML Knowledge: We’ll be writing our workflow in YAML format, so a basic understanding of YAML syntax will be helpful.

Creating a Simple Release Workflow

Step 1: Understanding GitHub Actions Workflows

GitHub Actions workflows consist of triggers, jobs, and steps:

Triggers: Events that initiate a workflow (e.g., pushes to specific branches).
Jobs: Units of work within a workflow.
Steps: Individual actions performed within a job.

Step 2: Creating a Workflow File

Go to your GitHub repository.
Navigate to the .github/workflows directory.
Create a new YAML file (e.g., release.yml).

Step 3: Define Your Workflow

Here’s a basic example of a release workflow:

name: Create release

on:
  push:
    tags:
      - "v*"

permissions:
  contents: write

jobs:
  release:
    name: Release pushed tag
    runs-on: ubuntu-22.04
    steps:
      - name: Create release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          tag: ${{ github.ref_name }}
        run: |
          gh release create "$tag" \
              --repo="$GITHUB_REPOSITORY" \
              --title="${tag#v}" \
              --generate-notes

This GitHub workflow, named "Create release," triggers whenever a tag starting with "v" is pushed to the repository, granting write access to repository contents.
It defines a job named "release" that runs on an Ubuntu 22.04 virtual machine. This job executes steps to create a release using the GitHub CLI (gh).
The necessary environment variables, GITHUB_TOKEN, and tag are set automatically from GitHub so no need to worry about that.
The gh release create command is used to create a release, specifying the tag name, repository, and title (stripping the initial "v"), and generating release notes automatically.

Step 4: How to push your first release:

To demonstrate, you can create a tag locally using git tag v1.0.0 and then push the tag to GitHub with git push origin v1.0.0.
This would trigger the workflow, resulting in the creation of a release with the specified tag and release notes on the GitHub repository's Releases page.

Conclusion

Congratulations! You’ve set up a simple release workflow using GitHub Actions. Remember to customize it based on your project’s specific requirements. Explore more advanced features and integrations to supercharge your development process.

Happy automating! 🚀

The Three.js Supremacy

Ayoub Abidi — Sun, 02 Jul 2023 15:50:17 +0000

I have used Three.js for a good amount of time now (still a total noob for now), and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG.

In this article we will explore Three.js and why you should care about it especially if you are a Frontend developer.

Why should you care about Three.js?

Three.js was released by Ricardo Cabello in April 2010. At that time, the code was developed in ActionScript and then the code was ported to JavaScript. Three.js was introduced with the rendering code in the form of the module instead of the core itself. Later on in March 2011, Joshua Koo came on the board after the introduction of WebGL. In September 2011, Koo released his first three.js demo for 3D text.

Three.js allows for the rendering of graphics on the client side, but can also be rendered server side with some node.js magic. This means you can use Three.js to render a simple model on your site from your server, but also allow users to interact with something much more complex on the same site if their specs allow for it. The application of this kind of things are endless.

Three.js is all that you need in one library

A big part of any rendering, 3D or otherwise, is the math involved. Typically, you’d have a separate math library that handles all of the fancy linear algebra and calculus that might go into rendering a complex graphic, but Three.js includes all of this in its massive library.

It has classes that are specifically designed for 3D math, and since it’s all contained under the same library, you can be sure that everything will work together, of course that will be better than 20 libraries that potentially can't fit with each other, so having everything come under the same roof.

Three.js is easy to learn

The Three.js learning curve won’t be too steep. It organizes all of the renders you’ll do, whether 3D or 2D, under a “Scene” container. This is analogous to a body tag in HTML, in the sense that everything else that you render will fall inside this container.

Why? Well, the typical DOM used for rendering graphics such as canvases and SVGs are very limited in how you can manipulate elements (you’re typically allowed to rotate on only one axis and can only move elements in a 2D space).

Three.js includes a variety of subclasses that do exactly what you’d expect: “Light” renders a light source, “Mesh” renders an object, and “Camera” renders a, well, you know, a camera. Things can not be simpler than that.

Three.js relies heavily on WebGL

While Three.js handles the setting up of scenes, it really relies on WebGL for a lot of its rendering so it’s important that you understand how it works too.

WebGL expands on a lot of traditionally non-3D APIs, like the ‘canvas’ and ‘svg’ tags that you can use to tell the browser to draw certain shapes. WebGL simply offers you the ability to use these 2D drawing elements to render 3D elements (whatever you’re drawing, you’re doing it to a 2D screen in the end).

WebGL makes good use of hardware acceleration to efficiently render these objects on your screen.
In Three.js, 3D objects are rendered through the “WebGLRenderer” class, which is what translates your life-like model of the Eiffel Tower into numbers that your GPU can efficiently process in memory.

Should you rely on Three.js to create games?

Three.js is the most flexible and powerful 3D engine for web browsers. With it, you can create anything from simple 3D models to photorealistic, real-time scenes. You can even optionally render THREE.JS layers on top of each other instead of traditional DOM elements, meaning you can create incredibly realistic and immersive scenes with minimal effort.

There are many reasons to choose Three.js over Unity, including but not exclusive to the following:

A great asset management system.
A high-performance 3D graphics engine.
A modern GUI that can be extended by plugins.

Conclusion

Three.js is an emerging web technology that has the potential to change the face of web development. It provides a powerful toolset for creating 3D graphics and visualizations on the web. With its ease of use and cross-browser compatibility, Three.js has gained popularity among web developers.

Sources:
https://web.dev/three-intro/
https://www.kofi-group.com/threejs-explained-in-10-minutes/
https://www.linkedin.com/pulse/exploring-potential-threejs-emerging-web-technology-chris-chiancone/
https://discourse.threejs.org/t/pros-and-cons-of-three-js/7050/2
https://www.digiprima.com/blogs/is-threejs-better-for-developing-web-based-3d-games#:~:text=js%3F-,Three.,geometries%20using%20just%20JavaScript%20APIs.
https://eternitech.com/technologies/three-js/

The beauty of using Python for your back-end

Ayoub Abidi — Mon, 01 May 2023 08:15:36 +0000

Python is a versatile, high-level programming language that is widely used in web development, scientific computing, artificial intelligence, and data analysis. One of its strengths is its ability to serve as a backend language for web applications. In this article, we'll explore some of the reasons why Python should be your backend language of choice, then I will talk about my little expriences with Flask & FastApi.

Why Python should be your backend language of choice

Simplistic

Python is a language that is known for its simplistic, readable and easy-to-use syntax. Developers can write less code than in many other languages, which can speed up development times and boost productivity. Aside from SQL supreme similar english syntax, Python comes in second place easily and this what makes it the ideal language for young developers (of course after learning C like real men).

Mature Ecosystem

Python has a rich ecosystem of libraries and frameworks that make backend development faster and more accessible. Popular frameworks like Flask and FastApi (which we will talk about them in a while) provide powerful tools for web application development, while libraries like NumPy and Pandas are essential for scientific computing and data analysis.

Scalable

Python is a scalable language that can handle large volumes of data and traffic, making it a popular choice for high-traffic websites and applications.

Performance

Python is referred to as both CPU and memory unfriendly but with a huge number of libraries, Python performs efficiently all the basic development tasks. Golang comes with inbuilt features and is more suitable for microservices software architectures.

Active Community

Python has a vast and active community of developers who contribute to open-source projects and offer support through forums and online resources. This community support can be invaluable when facing complex development challenges.

Integrable

Python can integrate with many other languages and platforms, making it an excellent choice for building complex systems that require integration with multiple technologies.

Machine Learning and AI

Since everyone is talking about the magic of AI we shoudl mention Python's popularity in machine learning and AI. It makes it an excellent choice for building backend systems that require machine learning algorithms. Libraries like TensorFlow and PyTorch are powerful tools for building deep learning models.

My experience with Flask

Flask is a well-known and best Python framework that comes under the Microframework category and comes with the BSD license. It is inspired by the Sinatra Ruby framework, so developers can utilize Flask as a web framework for both frontend and backend.

Thanks to the functionality, restful request dispatching, request handling, modular, and lightweight frontend design of Flask, it is more adaptable than Django.

ORMs deliver an advanced abstraction on an interactive database that lets a developer transcribe code in place of SQL to read, create, delete, and update tools and data in the database.

Flask is a framework of Python language that allows the users to build a genuine web app foundation and database tables from where they can use any source of extensions needed.

The other benefit of using this framework is that it is compatible with Google App Engine and offers a request dispatching way. For instance, 21% of Facebook Infrastructure has Python codebase.

My experience with FastApi

Before saying anything about this experience I just want to say that ma man Sebastián Ramírez didn't just make a framework, he made a weapon. The future of this framework is absolutely bright.

FastAPI is a Python web framework that is similar to Flask in its minimalistic design, but it offers many powerful features that make it stand out.
It uses Python +3.6 type declarations, allowing for excellent editor support and extensive validation of standard and custom data types.

FastAPI also provides built-in support for API documentation, security and authentication, and asynchronous endpoints, all of which can simplify and speed up development.

Score chart from Techempower

FastAPI is known for its excellent performance (It's in the name, of course it will be fast), being built over ASGI instead of WSGI, making it a great choice for building APIs.

All points above are great on their own, but the most important part is that they are leading (if not forcing) to clean code habits. All points above are great on their own, but the most important part is that they are leading (if not forcing) to clean code habits.
FastAPI makes it mandatory to write type hints, declare dependencies, and follow OOP design patterns which help to create great code structure and keep code clean. This is the reason why it’s so popular now and I feel it’s here to stay.

Conclusion

Whether you're building a web application or a complex system, Python is a language that can handle the challenge.
Flask and FastAPI can put up Python web servers and data science programs rapidly. FastAPI is superior for speed and performance.
Flask is better for simple microservices with a few API endpoints.

Sources:
Why Choose Python As Backend Development?

Python for backend development

List of 7 Best Python Frameworks to Consider For Your Web Project
Why FastAPI?
Why FastAPI is a Future of Python Web Development
FastAPI – The Good, the Bad and the Ugly

Should you (still) use/learn GraphQL?

Ayoub Abidi — Mon, 26 Sep 2022 14:03:46 +0000

GraphQL is fast becoming a go-to query language for companies to interact with their data. Although data management is one of the top concerns for a lot of companies, many people don’t really understand what GraphQL does or why it’s so popular.

When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility.
I know this technology is not a hot topic anymore unlike 2 years ago when literally everyone was talking about it and how fascinating it was.
I used GraphQL for two projects for now and I think it's good, but the real question here is it still worth learning and using in your project or is it just a phase?

TL;DR

GraphQL is not needed for every project.
A solid REST API is good enough.
GraphQL is for when REST is Just Too Slow.

GraphQL Vs. REST
REST is Stateless meaning that it doesn’t require any knowledge of the client's state to correctly interpret the request. all of the necessary information is included in the request itself.
REST fetches JSON data and is available to any server-side language and any frontend framework.
GraphQL was designed to make APIs fast, flexible, and developer-friendly. And just like REST, it is both stateless, available to any frontend framework and any server-side language, and usually fetches JSON data. But where GraphQL becomes very unique, is its way of communicating with the front end.

What GraphQL does better

Quick Product Development on the Frontend: frontend development groups have to wait a certain amount of time for the backend group to finish writing these APIs for the client app to fetch and post the data. The GraphQL lifecycle provides an approach where both frontend and backend developers can work in parallel without obstructing the overall development process.
A single API call: This allows you to request multiple resources. this minimizes both time and bandwidth by reducing the number of network round trips to the server. It also helps to prevent waterfall network requests, where you are dependent on the result of one call, to create another.
Customizable response: It makes it a great benefit to the front end of the application. This involves the ability to define an alias for fields and resolve each of the values into different values.

What REST does better

REST is still the leading architecture and most developers know it inside out.

REST has many build-in features: that make it super easy to implement a simplified cache, file upload, or even a rate limitation per API key.
Rest is still a better choice for Complex queries: GraphQL's nested architecture can turn into a bottleneck when creating complex queries.
It is still easier to create good error handling in RESTful APIs: GraphQL always returns the 200 Ok status for every API request, including those with errors.

Conclusion

Both GraphQL and REST API development lifecycle approaches are useful depending on the need, and both have their advantages and disadvantages. GraphQL is exponentially gaining popularity, mainly because of its “no over and under-fetching” ability.

sources:

TypeScript (or Oh god why I didn't learn it sooner ?)

Ayoub Abidi — Fri, 19 Aug 2022 08:25:40 +0000

TypeScript has been increasing in its popularity for the last couple of years. Angular, one of the largest frontend frameworks, is using TypeScript. About 60% of JS programmers already use TypeScript, But why ?

What is TypeScript ?

In short, TypeScript is a superset of JavaScript that has optional typing and compiles to plain JavaScript.
In simpler words, TypeScript technically is JavaScript with static typing, whenever you want to have it.
But why you need to add static typing to JavaScript ? isn't this will add more "unnecessary" code (and isn't will make it more like Java ?) ?
Here are some reasons may change your mind:

You can avoid masterfully-hidden-ninja errors: The freedom of dynamic typing often leads to bugs that not only decrease the efficiency of the programmer’s work, but can also grind development to halt due to increasing costs of adding new lines of code.
It is easier to refactor code without breaking it significantly.
Orienting oneself in complex, large-scale systems is not a nightmare anymore. TypeScript is essentially a JS linter. Or, JS with documentation that the compiler can understand. Types in TS are optional, and every JS file is a valid TypeScript file. While the compiler will complain if you have type errors in your initial files, it does give you back a JavaScript file that works as it did before.

TS vs JS & why you should choose TypeScript over JavaScript ? & why you shouldn't ?

You should because:

TypeScript is more reliable: TypeScript code is more reliable and easier to refactor. This enables developers to evade errors and do rewrites much easier. Types invalidate most of the silly errors that can sneak into JavaScript codebases, and create a quick feedback loop to fix all the little mistakes when writing new code and refactoring.
TypeScript is more explicit: Making types explicit focuses our attention on how exactly our system is built, and how different parts of it interact with each other. In large-scale systems, it is important to be able to abstract away the rest of the system while keeping the context in mind. Types enable us to do that.
TypeScript and JavaScript are practically interchangeable, so why not?: Since JavaScript is a subset of TypeScript, you can use all JavaScript libraries and code that you want in your TypeScript code. This means that you can gradually adopt TypeScript in your JavaScript codebase, first adding types to individual modules and then scale from there to the moon.

You shouldn't because:

You can’t just take a JavaScript team or a JavaScript repository and instantly switch them to idiomatic TypeScript. There are tradeoffs, and upfront time sacrifices you have to make.
Types give you in the long run, in the short run, it does take more time to add them. This is arguably not a huge deal, but it is an argument in favor of JavaScript.
You might not choose TypeScript for small projects and prototypes for your own use (totally not worth it).

My (recent) experience with TS in Vue.js, React.js & Backend generally (an unnecessary story you can skip)

My first experience with TS was actually with Angular (it was a university project and my first/last experience with that framework) and I really didn't know what is TS so I google it and knew that you can write JS in TS file without any problem so I did it.

My first real experience with TS was with Vue.js, I wanted to know what TS will benefit me in my code and it was actually good and weird at the same time (I got some horrible Java flashbacks while doing it) but I felt it wasn't necessary for my code at that time.

My second experience with TS was with a full-stack project (React.js as the frontend framework), that when I felt that TS is a significant solution for my barbarian JS code.

Conclusion

Overall, TypeScript is a great tool to have in your toolset even if you don’t use it to its full capacity. It’s easy to start small and grow slowly, learning and adding new features as you go.

Sources:

Elegant VS Code Extensions [part 2]

Ayoub Abidi — Thu, 04 Aug 2022 15:24:14 +0000

It's been over a year since I published Elegant VS Code Extensions article.
So I decided to make a second part.
Without further ado, let's jump into our new list.

Auto Rename Tag

Instead of changing open and close tags by yourself, you can use Auto-Rename Tag and do this simultaneously. Start changing an open tag and its close tag will change automatically. This is very useful, especially when you have a lot of nested code.

Better Comments

What this extension do is spice up your code commenting game by allowing different colored comments which would make them stand out rather than the boring grey default.

Code Snap

So far, the CodeSnap extension is my favorite tool to create a screenshot with its simplicity. After installation, you can just drag to select your code where you want a screenshot, right-click to open the CodeSnap menu, and click a button to generate a screenshot and save it as PNG locally.

Git History

Git History gives us a wide range of features, Using Git History we can access the git log with the graph and details, As the name also suggests we can view and search the history and we can also compare branches, commits, and files across commits along with many miscellaneous features. With the new update of VS Code, you will see many miscellaneous features of Git History already available on the Source control section on VS Code.

Live Server

This extension launch a local development server with live reload feature for static & dynamic pages. It will help you while developing a basic project without any framework but with feature of real-time reload that exist in every framework.

Vim

In case you don't know what vim is, it's a free and open-source, screen-based text editor program. it was know for it's capability to make you productive while coding But we all are using vs code now. This is when vim extension comes and give you the best of both worlds.

Conclusion

This was it. I'm hoping these extensions help you become more productive!

I've learned React (after being in love with Vue)

Ayoub Abidi — Fri, 13 May 2022 14:44:23 +0000

These days, a new trending front-end framework is released every now and then. But React and Vue.js still stands as the most popular among all the other alternatives. And although both are performant, elegant, and arguably easy to learn, they have some different opinions on how certain things should be done, and different ways of achieving the same end result. I believe getting comfortable and efficient with a frontend framework is mostly about learning the patterns of doing regular stuff.

TL;DR

React is good (but I still love Vue more), I need to work, think differently, and have the best community support available on the internet.

My story with Vue

I’ve been a long-time Vue.js fan and still think it’s a great framework with a lot of potentials. It was the first JS framework I learned and will always have a special place in my heart. It’s easy to learn and with the Vue CLI, you can create a functional site in minutes and easily deploy it. I liked the organization of the .vue files with their separate HTML, JS, and CSS sections. I even used it during my summer and my end of studies internships. So here you may ask me why you switched to react? you obviously like this framework. Ok, let me explain.

Vue Vs React (or How developers feel about them)

I'm not making this article about which framework is best for you but we need to know what professionals think about the two frameworks. The way experts see React and Vue might help others decide which of the two is more suited to their current expectations and capabilities. Although there aren't available any reports asking this question anymore, answers from 2018 are rather ever-green aspects so we can treat them as up to date to a huge extent. What devs love about Vue.js:

Elegant programming style and patterns
Easy learning curve
Good documentation

What devs love about React:

Elegant programming style and patterns
Rich package ecosystem
Widespread usage

React took the top spot in the most popular web framework list in the 2021 Stack Overflow Survey, with 40.14% of respondents choosing React while Vue.js went two positions up getting 5th place. Given its steadily rising popularity, we can predict its growth in the following years.

Job market

Although Vue.js is easy to learn (60% of the SoV 2021 respondents describe it this way), there are more React developers on the market who are already experienced in this framework and would use it again.

So if there is a business need for a more complex app, getting an experienced React developer who can jump into the project and start working immediately can take less time. On the other hand, the pool of Vue.js developers has been steadily growing in the last six years so this is becoming less challenging, too.

Interestingly, The Jet Brains Dev Ecosystem 2021 survey showed slightly different numbers and revealed that the developer knowledge and regular usage of the two frameworks is high, with Vue.js being on the rise. The share of Vue.js users grew from 34% in 2020 to 43% in 2021 while React experienced a drop from 64% to 49% in a YoY comparison.

Community support

One of the most important aspects you should see too is the community support around the framework, this was an issue I slowly realized as I was using Vue throughout the course of this year. I don't really want to talk about this, But the reality is React community is much bigger than Vue's and this is because React is older than Vue so you can find more articles, tutorials, and packages to help you on your React project more than Vue. So in terms of the community support react is the clear winner for me but this does not mean things will stay like this for a long time.

Conclusion

The purpose of this post was not to say that Vue is bad - in fact, during the year and a half time span that I worked with Vue, for the most part, I was quite pleased with it and still believe it to be a fantastic frontend framework. I think that it is an easy framework to learn and a good starting place for new web developers. But this does not mean you should stop learning new things and you really should try to think differently and see other developers' viewpoints.

Sources:

DEV Community: Ayoub Abidi

Bayan Flow 0.3.0: From 6 to +20 Algorithms

Sorting: 3 → 14

Pathfinding: 3 → 9

A couple of perf fixes

Tests

What's next

Bayan Flow 0.2.0: finishing the foundations (i18n, RTL, tests, and small UX wins)

Quick recap

Why this release exists

Internationalization and RTL

Sound effects (experimental)

Landing page, routing, and onboarding

Fullscreen mode and UI refinements

Testing and infrastructure

What I didn’t do

Challenges and lessons

What’s next

Conclusion

I Built an App That Makes Learning Algorithms Way Easier

What It Actually Does

Under the Hood

The Bigger Goal

Quick Tutorial: Implementing Google OAuth2 in FastAPI (Callback Method)

What We're Building

Prerequisites

Step 1: Set Up Your Environment Variables

Step 2: Create Your Google Handler

Step 3: Create Your FastAPI Routes

How to Use It

Testing It Out

Quick Tutorial: Adding Google Auth to FastAPI (Token Method)

What We'll Cover

Prerequisites

The Code

How It Works

Environment Variables

Frontend Integration

Security Notes

Quick tutorial: How to add a release GitHub workflow

Prerequisites

Creating a Simple Release Workflow

Step 1: Understanding GitHub Actions Workflows

Step 2: Creating a Workflow File

Step 3: Define Your Workflow

Step 4: How to push your first release:

Conclusion

The Three.js Supremacy

Why should you care about Three.js?

Three.js is all that you need in one library

Three.js is easy to learn

Three.js relies heavily on WebGL

Should you rely on Three.js to create games?

Conclusion

The beauty of using Python for your back-end

Why Python should be your backend language of choice

Simplistic

Mature Ecosystem

Scalable

Performance

Active Community

Integrable

Machine Learning and AI

My experience with Flask

My experience with FastApi

Conclusion

Should you (still) use/learn GraphQL?

TL;DR

GraphQL Vs. REST

What GraphQL does better

What REST does better

Conclusion

TypeScript (or Oh god why I didn't learn it sooner ?)

What is TypeScript ?

TS vs JS & why you should choose TypeScript over JavaScript ? & why you shouldn't ?

My (recent) experience with TS in Vue.js, React.js & Backend generally (an unnecessary story you can skip)

Conclusion

Elegant VS Code Extensions [part 2]

Auto Rename Tag

Better Comments