Forem: Mo'men Ali

AI Tools Every Software Engineer Has to Try in 2026

Mo'men Ali — Thu, 12 Mar 2026 22:58:59 +0000

Look, the AI tooling space has exploded. There are hundreds of tools out there, and most of them are noise. After trying a bunch of them, I narrowed it down to the ones I actually use and genuinely recommend — tools that fit into a real engineering workflow and make a meaningful difference.

Let's get into it.

1. Cursor — Your Entry Point to Agentic AI

If you're just starting to explore AI-assisted development, start here. Cursor is the gateway drug to working with LLMs in your day-to-day coding life. It helps you get comfortable with what AI can actually do — autocomplete, refactoring, explaining code, writing tests — before you go deeper into more powerful (and complex) tools.

Think of it as your training wheels, but in the best way possible.

2. Search & Business Analysis: Perplexity + Gemini Pro Deep Research

For research tasks — competitive analysis, digging into a new tech stack, understanding a domain — these two are my go-to combo:

Perplexity is great for quick, sourced answers. It's like Google but actually useful.
Gemini Pro's Deep Research mode is where things get serious. It goes broad and deep on a topic and — this is the killer feature — you can export directly to Google Docs. That means you get a fully formatted document you can share with your team, turn into specs, or use as a starting point for planning. Super underrated.

3. Learning & Knowledge: NotebookLM + Gemini Gems

This category is a bit different — it's less about writing code and more about staying sharp as an engineer. But honestly, continuous learning is part of the job, and these two tools make it significantly more efficient.

🎙️ NotebookLM

Feed it anything — a YouTube video, a PDF, a website URL, copied text — and NotebookLM turns it into something you can actually learn from. We're talking AI-generated podcasts, presentation slides, mind maps, memory graphs, flashcards, and quizzes, all based on your source material.

Trying to get up to speed on a new framework? Drop in the docs. Want to study for a certification? Throw in the learning materials. It transforms passive content into interactive learning in a way that genuinely sticks. One of the most underrated tools on this list.

💎 Gemini Gems

Think of Gems as your personal learning tutor, customized to how you work. You can create specialized Gems focused on specific domains — system design, algorithms, a new language you're picking up — and it'll guide you through structured learning sessions. It also supports planned daily tasks, so you can build actual learning routines into your schedule instead of just "I'll learn that someday."

If you're a learning-oriented engineer (and you should be), this combo is hard to beat.

4. Specs, User Stories & Planning: Spec Kit from GitHub

Planning is where a lot of teams waste time. Spec Kit helps you generate specs, user stories, and task breakdowns faster — and the best part? It's compatible with basically any AI tool you're already using: Cursor, Claude, and others. No lock-in, no friction.

If you're tired of writing boilerplate Jira tickets and spec documents from scratch, this one's for you.

5. Code Review: CodeRabbit

CodeRabbit does automated AI code reviews, and it's genuinely good. It catches things that slip through human reviews — edge cases, logic issues, potential bugs — and it integrates directly into your PR workflow.

Fair warning: it's a bit on the pricier side. But if your team is serious about code quality, it's worth evaluating.

6. Claude & Claude Code — The Best One Out There (By Far)

Okay, I'll be honest — this is the one I'm most excited to talk about.

Claude (and especially Claude Code) is, in my opinion, the strongest AI tool available right now for software engineers. It's exceptional at deep research, planning, and end-to-end task execution. It doesn't just answer questions — it thinks through problems with you.

But what makes Claude really powerful is the ecosystem you can build around it. Here's what I mean:

MCP Servers, Skills & Plugins

Claude supports MCP (Model Context Protocol) servers, skills, and recently added plugins — all of which let you extend what Claude can do. Some of my favorites:

🎨 Figma MCP Server / Skills

Connect Claude to your Figma files and now your AI actually knows what the design looks like. Instead of generating random UI from thin air, it writes code based on real designs. And it works the other way too — you can generate Figma design files from prompts. Huge for frontend work.

🖥️ Frontend Design Plugin

This one generates production-grade frontend code with real design polish. If you've ever gotten AI-generated UI that looks generically bland, this is the fix. The output is actually distinctive and deployable.

📡 Postman MCP Server

Connects Postman to Claude so you can interact with your APIs using natural language. Manage Postman resources, automate API workflows, and let AI agents work with your actual API layer. If you do a lot of API work, this is a game changer.

⚡ Superpowers

This one might be my personal favorite. Superpowers extends Claude with capabilities like brainstorming frameworks, subagent development, code review, debugging, TDD workflows, and skill authoring. It makes Claude significantly smarter about the process of software development — not just writing code, but doing it well.

One heads up: it's token-heavy, so be mindful of that if you're watching usage.

Conclusion

Claude Code is doing something different from the rest. It's building out a full AI engineering ecosystem — security tooling, code reviews, richer in-chat experiences, and more. It's not just a chat interface anymore; it's becoming the operating layer for AI-assisted software development.

My strong recommendation: invest real time into learning how to get the most out of it. Set up the MCP servers, experiment with skills, and build your own workflow around it. The engineers who figure this out early are going to have a serious edge.

The tools are here. Time to use them.

One more thing — if you want a structured way to get started, Anthropic put together a completely free tutorial platform covering a wide range of topics around Claude and AI development. It's genuinely well done and worth bookmarking: anthropic.skilljar.com

Have a tool I missed? Drop it in the comments — always looking for what's actually working for other engineers.

Tailwind vs Bootstrap: Choosing the Right CSS Framework for Your Project

Mo'men Ali — Sat, 17 Feb 2024 18:10:58 +0000

Choosing the right CSS framework can be akin to selecting the perfect outfit for a grand occasion. It's about style, functionality, and making a statement. In the realm of web development, two contenders stand out: Tailwind CSS and Bootstrap. Each brings its unique flair to the table, catering to the diverse tastes of developers worldwide. Let's dive into this sartorial spectacle and explore the nuances of Tailwind CSS and Bootstrap to help you craft the perfect ensemble for your web project.

1. Approach: Finding Your Groove 🎼

Tailwind CSS: Imagine a palette of colors, a toolbox of brushes, and an empty canvas waiting for your artistic touch. Tailwind CSS takes a utility-first approach, providing a vast array of low-level utility classes that empower developers to paint their digital masterpieces directly onto the HTML canvas. Behold the elegance of Tailwind CSS in action:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
</button>

Bootstrap: Picture a wardrobe filled with pre-designed outfits, each meticulously crafted to suit various occasions. Bootstrap adopts a component-based approach, offering a curated collection of pre-designed components with predefined styles and behaviors. Witness the sophistication of Bootstrap's components:

<button type="button" class="btn btn-primary">Button</button>

2. Customization: Making It Yours 🎨

Tailwind CSS: With Tailwind CSS, the world is your oyster. Dive deep into a sea of customization options, where every element can be tailored to perfection. Whether it's tweaking margins, adjusting padding, or defining custom colors, Tailwind CSS provides the tools to bring your design vision to life. Here's how you can do it:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        // Add your custom colors here
        'custom-blue': '#007bff',
        'custom-green': '#28a745',
        'custom-purple': '#8a4baf',
      },
    },
  },
  variants: {},
  plugins: [],
}

Now, you can use these custom colors in your HTML or Angular/React components:

<div class="bg-custom-blue text-white p-3">
  <p>Custom Blue Background</p>
</div>

<div class="bg-custom-green text-white p-3">
  <p>Custom Green Background</p>
</div>

<div class="bg-custom-purple text-white p-3">
  <p>Custom Purple Background</p>
</div>

Bootstrap: While Bootstrap offers a curated collection of components, its customization options are more restrained compared to Tailwind CSS. However, with a judicious mix of utility classes and Sass variables, developers can still add a personal touch to their Bootstrap-powered creations. Here's an example :

<!-- Example of customizing a button with Bootstrap -->
<button type="button" class="btn btn-primary">Button</button>

<!-- Customizing colors with Bootstrap -->
<div class="bg-primary text-white p-3">
  <p>Primary Background</p>
</div>

with SASS help, we override Bootstrap's default variables to customize the primary color and body background color. By importing Bootstrap's Sass files into our project and defining these variables before the import, we can apply our customizations :

// Customizing Bootstrap with Sass variables
$primary-color: #007bff; // Reassigning the primary color variable
$body-bg: #f8f9fa; // Changing the body background color

// Include Bootstrap Sass
@import "~bootstrap/scss/bootstrap";

3. Learning Curve: Finding Your Stride 📈

Tailwind CSS: Embarking on a journey with Tailwind CSS requires a willingness to embrace a new paradigm. Mastery of utility classes is paramount, as developers navigate the vast landscape of class combinations to sculpt their desired aesthetic. While the learning curve may be steep, the rewards are bountiful for those who dare to venture forth.

Bootstrap: Ah, Bootstrap—a trusted companion on many a developer's journey. With its intuitive component-based structure and extensive documentation, Bootstrap offers a smoother on-ramp for developers of all skill levels. Whether you're a seasoned pro or a novice explorer, Bootstrap welcomes you with open arms.

4. File Size: Keeping It Light 💡

Tailwind CSS: As with any grand production, Tailwind CSS comes with a trade-off. Its utility-first approach can result in larger CSS file sizes, reminiscent of a lavish ball gown that commands attention. However, fear not, for diligent optimization and purging of unused classes can help trim the excess and ensure a leaner stylesheet.

Bootstrap: In the realm of file size, Bootstrap tends to favor a more minimalist approach. By serving only the necessary components, developers can create a sleek and streamlined stylesheet that exudes elegance without unnecessary bulk. Just like a well-tailored suit, Bootstrap knows the importance of striking the perfect balance.

Conclusion: Your Style, Your Choice

In the world of web development, Tailwind CSS and Bootstrap are like two fashion powerhouses, each with its own strengths and charms. Tailwind CSS gives you the freedom to create, while Bootstrap offers consistency and convenience. So, whether you're all about breaking the mold or sticking to the classics, choose the framework that speaks to your style and makes your web project shine.

As you embark on your next coding adventure, may you find inspiration in the endless possibilities of Tailwind CSS and the comforting familiarity of Bootstrap. Let your creativity run wild, and may your digital creations leave a lasting impression on the world stage. Happy coding!

Resources:

Tailwind CSS Documentation
Bootstrap Documentation
Tailwind vs Bootstrap GitHub Repository

Simplify Language Translation in Angular with ngx-translate

Mo'men Ali — Sat, 03 Jun 2023 11:55:18 +0000

Introduction

Language translation is a crucial aspect of creating multilingual Angular applications. With the help of ngx-translate, a powerful translation library, we can easily implement language localization and provide a seamless experience to users in different locales. In this article, we will explore the key features and usage of ngx-translate to simplify language translation in your Angular app.

What is ngx-translate?

ngx-translate is a widely-used library in the Angular ecosystem that provides translation support for Angular applications. It allows you to define and manage translations for different languages, switch between languages dynamically, and seamlessly update the UI based on the selected language.

Installation and Setup:

To get started with ngx-translate, follow these steps:

Install the necessary dependencies:

npm install @ngx-translate/core @ngx-translate/http-loader

Configure the translation module in your app:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

// Function to load translations from a JSON file
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    // ... other imports
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  // ... other module configurations
})
export class AppModule { }

Usage:

Once ngx-translate is set up in your Angular app, you can start using it to translate your application's content. Here's a step-by-step guide:

Create translation files:

Create translation files:
In the assets/i18n directory, create translation files for each language you want to support. For example:
English (en.json):

{
    "HOME": {
      "EDIT": "Start editing to see some magic happen.",
      "SELECT": "Change language"
    },
    "HELLO": "Hello"
}

French (fr.json):

{
    "HOME": {
        "EDIT": "Commencez l'édition pour voir une magie se produire.",
        "SELECT": "Changer la langue"
    },
    "HELLO": "Bonjour"
}

Inject and use the TranslateService:

In your component or service, import the TranslateService and inject it via the constructor:

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) { }

Load translations and set the default language: In the appropriate place (e.g., in your app initialization code), load the translations and set the default language:

this.translate.setDefaultLang('en'); // Set the default language
this.translate.use('en'); // Set the initial language

Translate your content: To translate a string, use the translate pipe or the translate method of the TranslateService:


<!-- Using the translate pipe -->
<p>{{ 'HOME' | translate }}</p>

<!-- Using the translate method in component code -->
<p>{{ translate.instant('HOME.EDIT') }}</p>

GitHub Example:

For a hands-on example of ngx-translate implementation, you can check out the following GitHub repository: ngx-translate-demo. This repository contains a sample Angular application where ngx-translate is used to demonstrate language translation and localization. You can explore the code, review the implementation, and run the application locally to see ngx-translate in action.

Conclusion:

ngx-translate provides a simple yet powerful solution for language translation in Angular applications. By leveraging its features, you can easily support multiple languages, switch between them dynamically, and provide a localized experience to your users. With the steps outlined in this article, you are now equipped to implement ngx-translate in your Angular app and take your internationalization efforts to the next level.

Remember to explore the ngx-translate documentation for advanced features like parameterized translations, pluralization, and more. Happy translating!