Forem: Adam Mawlawi

How I Built a Clean Two‑WSL Architecture (One for Dev, One for AI). And Why It Changed Everything

Adam Mawlawi — Thu, 05 Feb 2026 03:19:27 +0000

For a long time, I tried to force all my tools into a single WSL Ubuntu environment.

Node, Python, .NET, Docker, PyTorch, CUDA, Jupyter, Transformers, all living together like one big chaotic family.

And like any chaotic family, they fought. A lot.

I kept running into:

Conflicting Python versions
Node tools breaking AI tools
CUDA updates breaking everything
Slow environments
Dependency hell

Eventually, I realized something important:

I don't need one WSL. I need two.

One for development.

One for AI.

That simple shift changed my entire workflow.

After a lot of deep searching, testing, breaking, and rebuilding, I finally landed on a clean, scalable architecture that I'm now sharing publicly — because it solved problems I know many developers struggle with.

This is the setup I wish I had from day one.

🧠 Why Two WSL Distros Instead of One?

Dev tools and AI tools don't mix well.

AI needs CUDA, PyTorch, GPU drivers, heavy Python packages
Dev needs Node, .NET, Docker, databases, build tools
Updating one often breaks the other
Virtual environments help, but they don't isolate system-level dependencies

So I split them:

+------------------+        +------------------+
|   Ubuntu-dev     |        |    Ubuntu-ai     |
|------------------|        |------------------|
| Node.js (NVM)    |        | PyTorch (CUDA)   |
| Python (dev)     |        | Transformers     |
| .NET SDK         |        | JupyterLab       |
| Docker client    |        | AI venv          |
+------------------+        +------------------+
        \                          /
         \________________________/
                 Shared:
        - SSH keys
        - Git identity
        - Base packages
        - Bootstrap folder

This keeps everything consistent while giving each environment its own purpose.

🏗 Step 1 — Export Your Existing Ubuntu

wsl --export Ubuntu ubuntu-base.tar

📁 Step 2 — Create Folders for the New Distros

mkdir C:\WSL\Ubuntu-dev
mkdir C:\WSL\Ubuntu-ai

📦 Step 3 — Import the New Distros

wsl --import Ubuntu-dev C:\WSL\Ubuntu-dev ubuntu-base.tar
wsl --import Ubuntu-ai  C:\WSL\Ubuntu-ai  ubuntu-base.tar

⚡ Step 4 — Add Quick Commands (dev and ai)

notepad $PROFILE

Add:

function dev { wsl -d Ubuntu-dev }
function ai  { wsl -d Ubuntu-ai }

Restart PowerShell.

Now you can jump into each distro instantly:

dev
ai

📂 Step 5 — Create a Shared Bootstrap Folder

mkdir C:\Users\YourName\WSL-bootstrap

🔧 Step 6 — The Common Bootstrap Script

bootstrap-common.sh

#!/usr/bin/env bash
set -euo pipefail

sudo apt update
sudo apt install -y build-essential curl git ca-certificates software-properties-common unzip

if [ -d "/mnt/c/Users/YourName/.ssh" ]; then
  rm -rf "$HOME/.ssh"
  ln -s "/mnt/c/Users/YourName/.ssh" "$HOME/.ssh"
fi

git config --global user.name "YourName"
git config --global user.email "your.email@example.com"

echo "[common] Base packages and SSH/Git configured."

💻 Step 7 — Dev WSL Setup (Ubuntu-dev)

bootstrap-dev.sh

#!/usr/bin/env bash
set -euo pipefail

"$(dirname "$0")/bootstrap-common.sh"

if [ ! -d "$HOME/.nvm" ]; then
  curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
fi

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

nvm install --lts
nvm use --lts

npm install -g yarn pnpm

sudo apt install -y python3 python3-pip python3-venv

wget https://packages.microsoft.com/config/ubuntu/22.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
sudo apt update
sudo apt install -y dotnet-sdk-8.0

echo "[dev] Node, Python, .NET installed."

Run it:

dev

Inside WSL:

cd /mnt/c/Users/YourName/WSL-bootstrap
chmod +x *.sh
./bootstrap-dev.sh

🤖 Step 8 — AI WSL Setup (Ubuntu-ai)

bootstrap-ai.sh

#!/usr/bin/env bash
set -euo pipefail

"$(dirname "$0")/bootstrap-common.sh"

sudo apt install -y python3 python3-pip python3-venv

if [ ! -d "$HOME/venvs/ai" ]; then
  mkdir -p "$HOME/venvs"
  python3 -m venv "$HOME/venvs/ai"
fi

source "$HOME/venvs/ai/bin/activate"

pip install --upgrade pip
pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121
pip install "transformers[torch]" datasets accelerate jupyterlab

echo "[ai] Base AI environment ready (PyTorch, Transformers, Jupyter)."

Run it:

ai

Inside WSL:

cd /mnt/c/Users/YourName/WSL-bootstrap
./bootstrap-ai.sh

🔍 Step 9 — Verify Everything

Git identity:

git config --global --list

SSH linking:

ls -l ~/.ssh

Node (dev):

node -v
npm -v

AI stack:

source ~/venvs/ai/bin/activate
pip list | grep torch

🎯 Final Thoughts

Splitting my workflow into two WSL distros was one of the best decisions I've made for my development setup. It keeps everything clean, organized, and conflict‑free.

My Dev WSL stays fast and focused on coding.
My AI WSL stays isolated and optimized for machine learning.

If you've been struggling with dependency conflicts, slow environments, or messy setups, this architecture might be exactly what you need.

# I Built an Apple-Style Glassmorphism React Component Library 🚀

Adam Mawlawi — Wed, 10 Dec 2025 19:56:42 +0000

I just open-sourced @mawtech/glass-ui — a React component library featuring that sleek Apple macOS/visionOS glassmorphism design.

I built this because I was tired of recreating the same glass effects for every project. Blurred backgrounds, subtle borders, smooth animations, it takes forever to get right.

So I packaged it all into a reusable library. And now it's free for everyone.

What I Built

18 production-ready React components with:

✨ Apple-inspired glassmorphism design
🌙 Dark mode optimized
📝 Full TypeScript support
🎬 Framer Motion animations
♿ Accessible (WCAG 2.1 AA)
🌳 Tree-shakeable

Installation

npm install @mawtech/glass-ui

Then import the styles:

import '@mawtech/glass-ui/styles.css';

That's it. You're ready to go.

Components

GlassCard

The foundation of any glass UI:

import { GlassCard } from '@mawtech/glass-ui';

function MyComponent() {
  return (
    <GlassCard variant="glow" padding="lg">
      <h2>Hello World</h2>
      <p>This looks so clean!</p>
    </GlassCard>
  );
}

The variant="glow" adds a subtle cyan glow on hover. One of my favorites.

GlassButton

Buttons that actually look premium:

import { GlassButton } from '@mawtech/glass-ui';

<GlassButton variant="primary">Primary</GlassButton>
<GlassButton variant="secondary">Secondary</GlassButton>
<GlassButton variant="ghost">Ghost</GlassButton>
<GlassButton variant="aurora">Aurora ✨</GlassButton>

The aurora variant has an animated gradient that shifts between cyan, violet, and pink. Great for CTAs.

GlassInput

Forms that don't look like they're from 2010:

import { GlassInput } from '@mawtech/glass-ui';

<GlassInput 
  label="Email"
  placeholder="Enter your email"
  type="email"
/>

Includes error states, icons, and a built-in password visibility toggle.

Real Example

Here's a login card you can build in minutes:

import { GlassCard, GlassInput, GlassButton } from '@mawtech/glass-ui';

function LoginCard() {
  return (
    <GlassCard variant="elevated" padding="xl">
      <h2 className="text-2xl font-bold text-white mb-6">
        Welcome Back
      </h2>

      <div className="space-y-4">
        <GlassInput 
          label="Email"
          type="email"
          placeholder="you@example.com"
        />

        <GlassInput 
          label="Password"
          type="password"
          placeholder="••••••••"
        />

        <GlassButton variant="primary" fullWidth>
          Sign In
        </GlassButton>

        <GlassButton variant="ghost" fullWidth>
          Forgot password?
        </GlassButton>
      </div>
    </GlassCard>
  );
}

All 18 Components

GlassCard
GlassButton
GlassInput
GlassTextarea
GlassSelect
GlassCheckbox
GlassSwitch
GlassModal
GlassNavbar
GlassSidebar
GlassDropdown
GlassTooltip
GlassTabs
GlassToast (with useToast hook)
GlassProgress
GlassAvatar
GlassBadge
GlassCommandPalette (CMD+K menu)

Tech Stack

React 18+
TypeScript
Tailwind CSS
Framer Motion
Radix UI (for accessibility)

Why I Built This

I run MAW Tech Solutions and I'm building several SaaS products. I needed a consistent, beautiful UI across all of them.

Instead of copy-pasting components between projects, I extracted them into this library. Now I use it for everything — and you can too.

What's Next

I'm actively maintaining this and planning to add:

Light mode support
More component variants
Figma design kit
Premium templates

Try It Out

npm install @mawtech/glass-ui

Give it a star on GitHub if you find it useful! ⭐

I'd love to hear your feedback. What components would you like to see added? 👇

Best Practices for Writing Clean Code in Multiple Languages

Adam Mawlawi — Fri, 13 Dec 2024 16:41:52 +0000

As a software engineer, writing clean, maintainable, and scalable code isn’t just a best practice—it’s essential. Clean code is a universal language that ensures developers, no matter their expertise or location, can collaborate effectively. While programming languages may differ in syntax, the principles of clean code transcend these boundaries. This article explores practical strategies for writing clean code across multiple languages like Python, C#, Java, and Node.js, using real-world examples that you can apply immediately.

1. Consistency Is Key

Consistency in naming conventions, formatting, and structure is the cornerstone of clean code. Regardless of the language, adhering to a consistent style improves readability and reduces cognitive load for other developers.

Example:

Python:

# Consistent snake_case naming for variables
user_name = "Adam"
registration_date = "2024-12-12"

C#:

// Consistent PascalCase for method names and camelCase for variables
public void RegisterUser(string userName, DateTime registrationDate)
{
    string formattedName = userName.Trim();
    // Logic here
}

Java:

// Consistent camelCase for variables and methods
public class UserRegistration {
    private String userName;

    public void setUserName(String userName) {
        this.userName = userName.trim();
    }
}

Node.js:

// Consistent camelCase for variables and functions
function registerUser(userName, registrationDate) {
    const formattedName = userName.trim();
    // Logic here
}

2. Meaningful Names

Variable and method names should convey intent. Cryptic abbreviations and generic names like temp or var1 are not only unhelpful but also harmful in collaborative environments.

Example:

Instead of:

  a = 50  # What is 'a'?

Use:

  max_retry_attempts = 50  # The purpose is clear.

In C#:

  // Avoid this
  int x = 10; // What does 'x' represent?

  // Use this
  int maxUserCount = 10;

In Node.js:

  // Avoid this
  let x = 42; // What does 'x' represent?

  // Use this
  let maxRetryAttempts = 42;

3. Avoid Magic Numbers and Strings

Magic numbers and strings—hardcoded values with no context—should be replaced with constants or enumerations to improve code clarity and reduce errors.

Example:

Python:

# Avoid
discounted_price = price - (price * 0.1)  # What does 0.1 represent?

# Use
DISCOUNT_RATE = 0.1

discounted_price = price - (price * DISCOUNT_RATE)

C#:

// Avoid
if (user.Age > 18) {
    // Logic
}

// Use
const int MinimumAge = 18;
if (user.Age > MinimumAge) {
    // Logic
}

Node.js:

// Avoid
if (user.age > 18) {
    // Logic
}

// Use
const MINIMUM_AGE = 18;
if (user.age > MINIMUM_AGE) {
    // Logic
}

4. DRY (Don’t Repeat Yourself)

Repetition leads to code bloat and makes maintenance a nightmare. If you find yourself duplicating code, extract it into a reusable function or class.

Example:

Before (Node.js):

sendEmail("user1@example.com", "Welcome!");
sendEmail("user2@example.com", "Welcome!");
sendEmail("user3@example.com", "Welcome!");

After (Node.js):

function sendBulkEmails(emails, message) {
    emails.forEach(email => sendEmail(email, message));
}

const emails = ["user1@example.com", "user2@example.com", "user3@example.com"];
sendBulkEmails(emails, "Welcome!");

5. Code Comments and Documentation

Comments are for the “why,” not the “how.” Let your code explain itself where possible, and use comments sparingly to clarify complex logic.

Example:

Good Comment:

# Check if the user is eligible for a premium subscription
if user.age > 18 and user.subscription_type == "premium":
    grant_access()

Bad Comment:

# Increment x by 1
x = x + 1

6. Error Handling and Logging

Graceful error handling and informative logging are crucial for debugging and user experience. Avoid swallowing exceptions or logging cryptic messages.

Example:

Python:

try:
    result = 10 / divisor
except ZeroDivisionError as e:
    logging.error(f"Division by zero attempted: {e}")
    raise

C#:

try {
    int result = 10 / divisor;
} catch (DivideByZeroException ex) {
    Console.WriteLine($"Error: {ex.Message}");
    throw;
}

Node.js:

try {
    const result = 10 / divisor;
} catch (error) {
    console.error(`Error: Division by zero - ${error.message}`);
    throw error;
}

7. Test-Driven Development (TDD)

Write unit tests alongside your code to ensure functionality and prevent future regressions. While this requires upfront effort, it pays off immensely in the long run.

Example:

Python (Using pytest):

def add(a, b):
    return a + b

def test_add():
    assert add(2, 3) == 5
    assert add(-1, 1) == 0

C# (Using NUnit):

[Test]
public void Add_ReturnsSumOfTwoNumbers() {
    Assert.AreEqual(5, Calculator.Add(2, 3));
    Assert.AreEqual(0, Calculator.Add(-1, 1));
}

Node.js (Using Jest):

function add(a, b) {
    return a + b;
}

test('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(-1, 1)).toBe(0);
});

8. Keep It Simple (KISS)

Complexity is the enemy of clean code. Break down large functions and avoid over-engineering solutions.

Example:

Before (Java):

public void processOrder(Order order) {
    if (order != null) {
        if (order.getItems() != null && !order.getItems().isEmpty()) {
            for (Item item : order.getItems()) {
                if (item.getStock() > 0) {
                    System.out.println("Processing item: " + item.getName());
                }
            }
        }
    }
}

After (Java):

public void processOrder(Order order) {
    if (order == null || order.getItems().isEmpty()) return;

    order.getItems().stream()
        .filter(item -> item.getStock() > 0)
        .forEach(item -> System.out.println("Processing item: " + item.getName()));
}

Node.js:

function processOrder(order) {
    if (!order || !order.items || order.items.length === 0) return;

    order.items
        .filter(item => item.stock > 0)
        .forEach(item => console.log(`Processing item: ${item.name}`));
}

Conclusion

Clean code isn’t just about making things look pretty. It’s about creating software that is easy to understand, modify, and scale. By following these best practices—consistency, meaningful naming, avoiding magic values, adhering to DRY, commenting wisely, handling errors gracefully, writing tests, and keeping things simple—you can write code that stands the test of time. Remember, clean code is a gift to your future self and your team. Happy coding!

Understanding Higher-Order Components (HOCs) in React: A Beginner's Guide

Adam Mawlawi — Sun, 26 May 2024 16:55:37 +0000

As React developers, we often encounter scenarios where we need to reuse component logic. Higher-Order Components (HOCs) offer a powerful pattern to achieve this. In this article, we'll explore what HOCs are, why they are useful, and provide a step-by-step real-life example to help you understand how to implement them.

What are Higher-Order Components?
A Higher-Order Component (HOC) is a function that takes a component and returns a new component with enhanced functionality. HOCs allow us to reuse logic across multiple components without modifying their code directly.

Think of an HOC as a wrapper that "decorates" a component with additional features. This pattern is similar to higher-order functions in JavaScript, which take functions as arguments and return new functions.

Why Use Higher-Order Components?
HOCs help us to:

Reuse Code: Encapsulate common functionality that can be shared across different components.
Enhance Components: Add new behaviors or data to existing components.
Maintain Separation of Concerns: Keep components focused on their primary tasks while HOCs handle auxiliary concerns.

A Real-Life Example
To illustrate the concept of HOCs, let's consider a real-life example. Suppose we have a component that displays user information, but we want to enhance it by adding authentication checking.

Step 1: Create a Basic Component
First, let's create a basic component called UserInfo that displays user information.

Step 2: Create the HOC
Next, we create an HOC named withAuth that adds authentication checking.

Step 3: Wrap the Basic Component with the HOC
Now, we use the HOC to create a new component called UserInfoWithAuth that includes the authentication logic.

Step 4: Use the Enhanced Component
Finally, we use the enhanced component in our application.

How It Works
Let's break down how this works:

UserInfo: The original component that displays user information.
withAuth: The HOC that adds authentication checking.
UserInfoWithAuth: The new component created by wrapping UserInfo with the withAuth HOC.
When UserInfoWithAuth is rendered, it first checks if the user is authenticated. If not, it displays a message prompting the user to log in. If authenticated, it renders the UserInfo component with the passed props.

Conclusion
Higher-Order Components (HOCs) are a powerful pattern in React for reusing component logic. By creating HOCs, we can enhance components with additional functionality while maintaining clean and maintainable code. In our example, we saw how to add authentication logic to a user information component using an HOC.

By understanding and implementing HOCs, you can make your React applications more modular, reusable, and easier to maintain.
Happy coding!

How to Use Application Programming Frameworks and Libraries to Simplify Your Development Process

Adam Mawlawi — Thu, 16 Mar 2023 10:34:47 +0000

Application programming frameworks and libraries are essential tools for modern software development. They provide a set of pre-built components and functionalities that can be easily integrated into your application, saving you time and effort in the development process.
This article will explore how to use application programming frameworks and libraries to simplify your development process, including some best practices for choosing and using these tools effectively.

Choose the Right Framework or Library

Choosing the right framework or library is the first step in simplifying your development process. Many different frameworks and libraries are available, each with its strengths and weaknesses.
When choosing a framework or library, it's important to consider the following factors:

Compatibility with your programming language and development environment
Level of community support and availability of documentation and tutorials
Robustness and reliability of the tool
Complexity and learning curve of the tool
Integration with other tools and libraries

Follow Best Practices for Using Frameworks and Libraries

Once you have chosen a framework or library, following the best practices for using these tools effectively is important. Here are some tips to help you get started:

Read the documentation: Before using a new framework or library, take the time to read the documentation carefully. This will help you understand how to use the tool effectively and avoid common mistakes and pitfalls.
Use modular programming: Break your application into smaller, modular components easily integrated with the framework or library. This will make your application easier to maintain and update over time.
Use version control: Use a version control system like Git to manage your application's source code. This will help you track changes to your code over time and collaborate effectively with other developers.
Use automated testing: Use tools like Jest or Mocha to ensure that your application is functioning correctly and to catch bugs and errors before they become problems.
Please keep your dependencies up-to-date: Keep your dependencies, including frameworks and libraries, up-to-date to make sure that your application is running on the latest, most secure versions of these tools.

Take Advantage of Built-in Functionalities

One of the biggest advantages of using a framework or library is these tools' built-in functionalities. Many frameworks and libraries come with pre-built components, such as user authentication and data validation, that can be easily integrated into your application.

By taking advantage of these built-in functionalities, you can save time and effort in the development process and focus on building the core features of your application.

Leverage Community Support

Most popular frameworks and libraries have large and active communities of developers who share their knowledge and expertise through online forums, chat rooms, and other channels.

By joining these communities and participating in discussions, you can learn from other developers, ask for help when needed, and share your knowledge and expertise with others.

Customize When Necessary

While frameworks and libraries can be incredibly helpful in simplifying your development process, it's important to remember that these tools are not a one-size-fits-all solution. In some cases, you may need to customize or extend the functionalities provided by the framework or library to meet the specific needs of your application.

When customizing a framework or library, following best practices for maintaining compatibility and avoiding potential conflicts or bugs is important.

Wrap-Up

Using application programming frameworks and libraries can be an effective way to simplify your development process, reduce development time and effort, and improve the overall quality of your application.

By choosing the right framework or library, following best practices for using these tools effectively, taking advantage of built-in functionalities, leveraging community support, and customizing when necessary, you can build high-quality software more efficiently and effectively.

Remember to always stay up-to-date with the latest releases and updates for your frameworks and libraries, and to continuously review and optimize your code to ensure that it is scalable, maintainable, and secure.

By implementing these best practices and continuously learning and improving your development skills, you can become a more effective and efficient developer, and build high-quality software that meets the needs of your users and clients.

Understanding Redux: A Comprehensive Guide to State Management in JavaScript Applications with React

Adam Mawlawi — Fri, 03 Mar 2023 22:01:55 +0000

Redux is a state management library for JavaScript applications. It provides a centralized store to manage the state of an application, and a set of rules to modify and access that state in a predictable and consistent way. In this article, we will explore how Redux works, the pros and cons of using Redux, and how it works with React.

What is Redux?

Redux was created by Dan Abramov and Andrew Clark in 2015 as a solution to the problem of managing state in large-scale JavaScript applications. It is based on the Flux architecture pattern, which separates the concerns of data flow and view rendering in an application.

At its core, Redux consists of a store that holds the application state, a set of reducers that define how the state can be modified, and a set of actions that trigger those reducers. Actions are plain JavaScript objects that describe the type of modification being made to the state, and any additional data required to make that modification.

When an action is dispatched, it is passed to the reducers, which modify the state accordingly. The modified state is then passed back to the store, which notifies any subscribed components of the change, triggering a re-render of the affected views.

Why use Redux?

Redux provides several benefits for managing state in a JavaScript application:

1- Centralized state management: By keeping all application state in a single store, it becomes easier to reason about the state of the application and how it changes over time.

2- Predictable state changes: Redux enforces a set of rules that ensure the state can only be modified in a predictable and consistent way, making it easier to debug and maintain the application.

3- Time-travel debugging: Redux allows for time-travel debugging, which means you can step through the state of an application at different points in time, making it easier to debug and fix issues.

4- Scalability: Redux is designed to work well in large-scale applications with complex state requirements, making it a popular choice for enterprise-level projects.

When not to use Redux?

While Redux is a powerful tool for managing state in JavaScript applications, it may not be necessary or suitable for all projects. Here are some cases where you might want to avoid using Redux:

1- Small projects: If your project is small or has relatively simple state requirements, it may be overkill to use Redux.

2- Static data: If your application's state is mostly static data that does not change often, you may not need to use Redux to manage that state.

3- Simple UI components: If your UI components do not have complex interactions or depend heavily on application state, you may not need to use Redux.

Pros and Cons of Redux

Like any tool, Redux has its pros and cons. Here are some of the main advantages and disadvantages of using Redux:

Pros:

Centralized state management: Redux provides a centralized store to manage the state of an application, making it easier to reason about the state and how it changes over time.
Predictable state changes: Redux enforces a set of rules that ensure the state can only be modified in a predictable and consistent way, making it easier to debug and maintain the application.
Time-travel debugging: Redux allows for time-travel debugging, which means you can step through the state of an application at different points in time, making it easier to debug and fix issues.
Scalability: Redux is designed to work well in large-scale applications with complex state requirements, making it a popular choice for enterprise-level projects.

Cons:

Boilerplate code: Setting up Redux can involve a significant amount of boilerplate code, which can make it more time-consuming to get started with than other state management solutions.
Steep learning curve: Redux has a relatively steep learning curve compared to other state management solutions, which can make it more difficult for developers who are new to the library or who are not familiar with the concepts of state management.
Possible over-engineering: In some cases, using Redux can be overkill, especially for smaller or less complex applications. In these cases, it may be more efficient to use simpler solutions or to manage state using React's built-in state management tools.
Debugging can be challenging: While Redux provides tools for time-travel debugging, it can still be challenging to debug issues in a Redux-based application, especially for developers who are not familiar with the library.

How Redux works with React

Redux was designed to work seamlessly with React, and the two libraries are often used together in JavaScript applications. Here's a brief overview of how Redux works with React:

1- State management: Redux provides a centralized store to manage the state of an application, while React provides a way to render views based on that state.

2- Connecting Redux and React: To connect Redux and React, developers use the react-redux library, which provides a set of tools for binding React components to the Redux store.

3- Components and containers: In a Redux-based application, components are responsible for rendering UI elements, while containers are responsible for managing the state of those components using the Redux store.

4- Actions and reducers: In a Redux-based application, actions describe the type of modification being made to the state, while reducers define how the state can be modified based on those actions.

5- Dispatching actions: To trigger state changes in a Redux-based application, developers use the dispatch function to dispatch an action to the Redux store.

Example

Here's a simple example of how Redux works with React:

1- Define the Redux store:

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

Create a React component:

import React from 'react';
import { connect } from 'react-redux';

function Counter(props) {
  return (
    <div>
      <p>Count: {props.count}</p>
      <button onClick={props.increment}>Increment</button>
      <button onClick={props.decrement}>Decrement</button>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Render the component:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Counter from './Counter';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

In this example, we define a Redux store with an initial state that includes a count property. We also define a reducer that modifies the state based on INCREMENT and DECREMENT actions.

We then create a React component called Counter that displays the current count and includes buttons to increment and decrement the count. We use the connect function from the react-redux library to bind the component to the Redux store, using mapStateToProps and mapDispatchToProps to connect the component's props to the Redux store's state and dispatch functions.

Finally, we render the Counter component wrapped in a Provider component from react-redux, which provides access to the Redux store to all components in the application.

Conclusion

Redux is a powerful tool for managing state in JavaScript applications, particularly for large-scale projects with complex state requirements. While it may not be necessary or suitable for all projects, it provides several benefits, including centralized state management, predictable state changes, time-travel debugging, and scalability.

When used with React, Redux provides a seamless way to manage application state and render UI elements based on that state. By understanding how Redux works and the pros and cons of using it, developers can make informed decisions about when to use Redux and how to integrate it with their React applications.

ReactJS: A Comprehensive Overview of a Popular JavaScript Library

Adam Mawlawi — Wed, 22 Feb 2023 17:00:01 +0000

Introduction:

ReactJS is a popular JavaScript library developed by Facebook that allows developers to build complex user interfaces in a simple and efficient way. With its component-based architecture and efficient rendering, React has become a popular choice for front-end web development. In this article, we will explore what React is, how it works, its pros and cons, and provide code examples to demonstrate its functionality.

What is ReactJS?

ReactJS is a JavaScript library that simplifies the process of building complex user interfaces. It is a declarative library that focuses on the component-based approach to build the UI. React was first introduced by Facebook in 2013 and has since become one of the most popular front-end development libraries.

How React Works:

React works by dividing the UI into small and reusable components, each responsible for rendering a small portion of the UI. These components are independent and can communicate with each other, passing data through props and updating the state of the component. When a component’s state changes, React updates the UI by re-rendering the entire component and updating only the necessary parts of the UI.

To explain how React works, let us consider a simple example. Suppose we want to create a list of items in our application. We can create a simple component to display the list items as follows:

import React from 'react';

const ItemList = () => {
    const items = ['item1', 'item2', 'item3', 'item4'];

    return (
        <ul>
            {items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
};

export default ItemList;

n this example, we create a functional component called ItemList that renders an unordered list of items. We define an array of items, and then use the map function to loop through the items array and render each item as a list item.

Pros of React:

Reusability: React’s component-based approach allows developers to reuse code, resulting in less code duplication and easier maintenance.

Performance: React uses a virtual DOM that minimizes the number of manipulations on the actual DOM, resulting in faster and more efficient rendering.

Easy to Learn: React has a simple and intuitive API, making it easy for developers to learn and use.

Community: React has a large and active community of developers who contribute to the development of libraries, tools, and resources.

Compatibility: React can be used with a variety of other libraries and frameworks, making it flexible and easy to integrate.

Cons of React:

1- JSX: JSX is a syntax that allows developers to write HTML-like code in their JavaScript, which can be unfamiliar to developers who are used to working with HTML and CSS.

2- Learning Curve: React’s component-based approach and functional programming can be challenging for developers who are new to these concepts.

3- Complexity: React’s flexibility and versatility can lead to complex code, which can be difficult to maintain and debug.

4- Tooling: To use React effectively, developers must also use a range of supporting tools, which can be time-consuming to set up and maintain.

Using React:

To use React in a project, developers must first install it using a package manager such as npm or yarn. Once installed, developers can create React components and use them to build the UI. Here’s an example of how to create a simple React component:

import React from 'react';

const HelloWorld = () => {
    return <h1>Hello, World!</h1>;
};

export default HelloWorld;

In this example, we create a functional component called HelloWorld that returns a simple HTML element. We then export the component so that it can be used in other parts of the application.

React components can be used in different ways, depending on the requirements of the application. For example, we can create a parent component that renders child components based on user input. Here’s an example:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const [items, setItems] = useState(['item1', 'item2', 'item3']);

    const handleClick = () => {
        const newItem = prompt('Enter a new item:');
        setItems([...items, newItem]);
    };

    return (
        <div>
            <button onClick={handleClick}>Add Item</button>
            <ul>
                {items.map((item) => (
                    <ChildComponent key={item} item={item} />
                ))}
            </ul>
        </div>
    );
};

export default ParentComponent;

In this example, we create a parent component called ParentComponent that renders a list of child components called ChildComponent. We use the useState hook to manage the state of the items array and provide a button that allows the user to add new items to the list. We then use the map function to loop through the items array and render each item as a child component.

Conclusion:

ReactJS is a powerful and popular JavaScript library for building user interfaces. Its component-based architecture and efficient rendering make it highly performant and flexible. While it has some drawbacks, such as a learning curve and complexity, it remains a popular choice for developers due to its ease of use and flexibility. With a large and active community, developers have access to a wealth of resources and support to help them build complex and efficient applications. By using the examples provided in this article, developers can start using React in their projects and benefit from its power and flexibility.

OpenAI and the Future of Work: How AI Can Assist, But Not Replace, Software Engineers

Adam Mawlawi — Sat, 07 Jan 2023 12:55:01 +0000

As the field of artificial intelligence (AI) continues to advance, there has been some concern about the potential for AI to replace human workers, including software engineers. However, it is important to understand that OpenAI, one of the leading organizations in the field of AI research, is not intended to replace software engineers or other professionals.

Software engineering is a highly specialized field that requires a deep understanding of computer science principles and the ability to design, develop, and maintain complex software systems. Software engineers play a critical role in building and maintaining the software that powers our modern world, and their skills and expertise are essential to the success of any software project.

OpenAI, on the other hand, is a research organization that is focused on developing AI technologies. Its goal is to advance the field of AI and to create new technologies that can be used to augment and improve the work of software engineers and other professionals.

One potential application of OpenAI's technology is to assist software engineers in automating certain tasks or identifying areas for optimization. For example, an AI system might be able to analyze a piece of code and suggest improvements or highlight potential issues that a human developer might have missed. However, this would still require the expertise and judgment of a human software engineer to implement and maintain the code.

It is important to recognize that AI technology is still in its early stages of development, and it will likely be many years before it is able to fully replicate the skills and expertise of a human software engineer. While AI may be able to assist with certain tasks, it is not a replacement for the creativity, problem-solving ability, and critical thinking skills that are essential to the work of a software engineer.

In conclusion, while OpenAI's technology has the potential to augment the work of software engineers and other professionals, it is not intended to replace them. Software engineering and other technical fields will continue to rely on the skills and expertise of human professionals for the foreseeable future.

20 JavaScript Tricks for Improved Code Efficiency

Adam Mawlawi — Fri, 23 Dec 2022 16:51:57 +0000

1 - Using arrow functions to write concise, anonymous functions:

Instead of writing a function like this:

function add(a, b) {
  return a + b;
}

You can use an arrow function to write it like this:

const add = (a, b) => a + b;

2- Using the spread operator to easily copy arrays or objects:

To copy an array, you can use the spread operator like this:

const arr = [1, 2, 3];
const arrCopy = [...arr];

To copy an object, you can do the same thing:

const obj = { name: "John" };
const objCopy = { ...obj };

3- Using the ternary operator for concise conditional statements:

Instead of writing an if/else statement like this:

let result;
if (a > b) {
  result = "a is greater than b";
} else {
  result = "b is greater than a";
}

You can use the ternary operator to write it like this:

const result = (a > b) ? "a is greater than b" : "b is greater than a";

4- Using the for-of loop to easily iterate over arrays or objects:

Instead of writing a for loop like this:

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

You can use the for-of loop to write it like this:

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

**
5- Using destructuring to easily extract values from arrays or objects:**

Instead of writing code like this:

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

You can use destructuring to write it like this:

const arr = [1, 2, 3];
const [a, b, c] = arr;

Or for an object:

const obj = { name: "John", age: 30 };
const name = obj.name;
const age = obj.age;

You can use destructuring to write it like this:

const obj = { name: "John", age: 30 };
const { name, age } = obj;

6- Using Array.map() to easily transform an array:

Instead of using a for loop to transform an array, you can use the Array.map() function like this:

const arr = [1, 2, 3];
const doubled = arr.map(num => num * 2); // [2, 4, 6]

7- Using Array.filter() to easily filter an array:

Instead of using a for loop to filter an array, you can use the Array.filter() function like this:

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]

8- Using Array.reduce() to easily reduce an array to a single value:

Instead of using a for loop to reduce an array to a single value, you can use the Array.reduce() function like this:

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue); // 10

9- Using try/catch blocks to handle errors:

Instead of writing code like this:

let result;
try {
  result = foo();
} catch (error) {
  console.log(error);
}

You can write it like this:

try {
  const result = foo();
} catch (error) {
  console.log(error);
}

10 - Using async/await to handle asynchronous code:

Instead of using Promise chains like this:

function getData() {
  return fetch("http://example.com/data")
    .then(response => response.json())
    .then(data => data.name)
    .catch(error => console.log(error));
}

You can use async/await like this:

async function getData() {
  try {
    const response = await fetch("http://example.com/data");
    const data = await response.json();
    return data.name;
  } catch (error) {
    console.log(error);
  }
}

11- Using Object.keys() to easily get an object's keys:
Instead of writing code like this:

const obj = { name: "John", age: 30 };
const keys = [];
for (const key in obj) {
  keys.push(key);
}

You can use Object.keys() like this:

const obj = { name: "John", age: 30 };
const keys = Object.keys(obj); // ["name", "age"]

12- Using Object.values() to easily get an object's values:
Instead of writing code like this:

const obj = { name: "John", age: 30 };
const values = [];
for (const key in obj) {
  values.push(obj[key]);
}

You can use Object.values() like this:

const obj = { name: "John", age: 30 };
const values = Object.values(obj); // ["John", 30]

13- Using Object.entries() to easily get an object's key-value pairs:

Instead of writing code like this:

const obj = { name: "John", age: 30 };
const entries = [];
for (const key in obj) {
  entries.push([key, obj[key]]);
}

You can use Object.entries() like this:

const obj = { name: "John", age: 30 };
const entries = Object.entries(obj); // [["name", "John"], ["age", 30]]

14- Using the JSON.parse() and JSON.stringify() functions to easily convert between JSON and JavaScript objects:

Instead of writing code like this:

const json = '{"name":"John","age":30}';
const obj = {};
obj.name = json.name;
obj.age = json.age;

You can use JSON.parse() like this:

const json = '{"name":"John","age":30}';
const obj = JSON.parse(json);

And to convert an object to JSON, you can use JSON.stringify() like this:

const obj = { name: "John", age: 30 };
const json = JSON.stringify(obj);

15- Using Array.sort() to easily sort an array:

Instead of writing a function to sort an array, you can use the Array.sort() function like this:

const arr = [3, 1, 2];
const sorted = arr.sort((a, b) => a - b); // [1, 2, 3]

16- Using the includes() method to check if an element exists in an array:

Instead of using indexOf() like this:

const arr = [1, 2, 3];
if (arr.indexOf(2) !== -1) {
  console.log("Element exists in array");
}

You can use includes() like this:

const arr = [1, 2, 3];
if (arr.includes(2)) {
  console.log("Element exists in array");
}

17- Using the padStart() and padEnd() methods to add padding to strings:

Instead of writing a function to add padding to a string, you can use padStart() or padEnd() like this:

const str = "abc";
const padded = str.padStart(5, "0"); // "00abc"

or

const str = "abc";
const padded = str.padEnd(5, "0"); // "abc00"

18- Using the Object.assign() method to easily merge objects:

Instead of writing code like this:

const obj1 = { name: "John" };
const obj2 = { age: 30 };
const merged = {};
for (const key in obj1) {
  merged[key] = obj1[key];
}
for (const key in obj2) {
  merged[key] = obj2[key];
}

You can use Object.assign() like this:

const obj1 = { name: "John" };
const obj2 = { age: 30 };
const merged = Object.assign({}, obj1, obj2);

19- Using the spread operator to easily merge objects:

Instead of using Object.assign() like this:

const obj1 = { name: "John" };
const obj2 = { age: 30 };
const merged = Object.assign({}, obj1, obj2);

You can use the spread operator like this:

const obj1 = { name: "John" };
const obj2 = { age: 30 };
const merged = { ...obj1, ...obj2 };

20- Using the Set data structure to store unique values:

Instead of using an array and manually checking for duplicates, you can use the Set data structure like this:

const values = [1, 2, 3, 3, 4, 4];
const set = new Set(values); // Set {1, 2, 3, 4}

You can then easily convert the Set back to an array using the spread operator:

const values = [1, 2, 3, 3, 4, 4];
const set = new Set(values);
const uniqueValues = [...set]; // [1, 2, 3, 4]

In conclusion, there are many ways to improve the efficiency and simplicity of your JavaScript code. By using techniques like arrow functions, the spread operator, and async/await, you can write cleaner, more intuitive code that is easier to maintain and debug. Whether you are a beginner or an experienced developer, these tricks will help you to write better code and solve problems more efficiently.

SSR vs CSR

Adam Mawlawi — Fri, 16 Dec 2022 20:45:09 +0000

Server-side rendering (SSR) refers to the process of rendering a web application on the server, while client-side rendering (CSR) refers to the process of rendering a web application on the client (web browser).

Here are some key differences between SSR and CSR:

1- Initial load time:
With SSR, the initial HTML is generated on the server and sent to the client, so the initial load time is usually faster. With CSR, the initial HTML is generated on the client, so the initial load time may be slower, particularly for users with slower internet connections.

2- Search engine optimization:
With SSR, the initial HTML is generated on the server, so search engines can easily index the content of the application. With CSR, the initial HTML is generated on the client, so search engines may have difficulty indexing the content of the application. #seo

3- Performance:
With SSR, the initial rendering is performed on the server, so the application may be faster for users with slower internet connections. With CSR, the initial rendering is performed on the client, so the application may be slower for users with slower internet connections. However, CSR may be faster for users with faster internet connections, as the client can directly manipulate the DOM and make requests for data as needed. #webperformance

Here are some examples to illustrate the differences between SSR and CSR:

A blog platform:

A blog platform that is rendered on the server would generate the HTML for each blog post on the server and send it to the client. This would allow search engines to easily index the content of the blog and provide a faster initial load time for users with slower internet connections. #webdevelopment

A social media platform:

A social media platform that is rendered on the client would generate the HTML for each post and update the DOM as needed in response to user actions. This would allow for a more interactive and responsive user experience, but may have slower initial load times and may be more difficult for search engines to index.

An e-commerce platform:

An e-commerce platform could potentially benefit from using a combination of SSR and CSR, also known as universal rendering. The initial rendering could be performed on the server to improve the initial load time and allow for better search engine optimization, while the client could be used to handle dynamic interactions such as adding items to the cart or filtering product listings.

In conclusion, server-side rendering #serversiderendering and client-side rendering #clientsiderendering are both useful approaches that have their own unique strengths and weaknesses. While SSR is great for improving performance and SEO, it requires more server resources and can be more difficult to implement. On the other hand, CSR allows for greater flexibility and a smoother user experience but can lead to slower initial load times. Ultimately, the best approach for your application will depend on your specific needs and goals. If you're still unsure which way to go, consult an experienced developer or do further research to determine the best fit for your project.

serverrendering #clientsiderendering #SEO #webdevelopment #webperformance #react #nextjs

Custom Radio button Using react component and Material UI

Adam Mawlawi — Thu, 15 Dec 2022 23:06:08 +0000

Here is an example of how you can do this:



import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';

const useStyles = makeStyles({
  root: {
    // Customize the styling of the root element
  },
  checked: {
    // Customize the styling of the checked state
  },
});

const CustomRadio = (props) => {
  const classes = useStyles();

  return (
    <Radio
      className={classes.root}
      checkedClassName={classes.checked}
      // Other props here
      {...props}
    />
  );
};

In this example, the CustomRadio component is using the makeStyles hook from Material-UI to create a custom styles object. The styles object contains two entries: root and checked. These styles are applied to the root element and the checked state of the Radio component, respectively.

You can customize the styles of the Radio component by modifying the styles in the useStyles hook. For example, you could change the colors of the Radio component using the color property in the root and checked styles:



const useStyles = makeStyles({
  root: {
    color: '#f00', // Red color
  },
  checked: {
    color: '#0f0', // Green color
  },
});

In addition to styling the Radio component, you can also customize its behavior by passing props to it. For example, you could add an onChange prop to handle changes to the Radio component's value:



const handleChange = (event) => {
  // Handle the change event here
};

const CustomRadio = (props) => {
  // The rest of the component code here

  return (
    <Radio
      onChange={handleChange}
      // Other props here
      {...props}
    />
  );
};

In the end, remember there is always a different way to build any code or components. I hope this helps you to create a simple React component using Radio MUI

SQL vs NoSQL

Adam Mawlawi — Sun, 11 Dec 2022 22:22:31 +0000

MongoDB and SQL are both popular technologies used for storing and managing data, but they have some significant differences.

MongoDB is a NoSQL database, which means it uses a non-relational data model. This means that data is stored in collections of documents, rather than in tables with rows and columns like a traditional SQL database. This makes MongoDB more flexible and scalable, as it can handle a wide variety of data types and structures.

In contrast, SQL is a relational database that uses a structured query language (SQL) to manage data stored in tables. SQL is more rigid and is typically used for managing structured data that follows a predictable pattern.

One of the key differences between MongoDB and SQL is the way they store and manage data. In MongoDB, data is stored in JSON-like documents, which can contain various data types, including arrays and nested objects. This allows for greater flexibility in the way data is organized and accessed. In SQL, data is stored in tables and must follow a predefined schema.

Another key difference is the way that data is queried. In MongoDB, data is queried using a JSON-like syntax, which is more intuitive and allows for more complex queries. In SQL, data is queried using SQL commands, which are more structured and require a deeper understanding of SQL syntax.

Overall, the main difference between MongoDB and SQL is the way they handle data. MongoDB is a NoSQL database that is more flexible and scalable, while SQL is a relational database that is more structured and predictable. Depending on the needs of your project, one may be a better fit than the other.

Forem: Adam Mawlawi

How I Built a Clean Two‑WSL Architecture (One for Dev, One for AI). And Why It Changed Everything

🧠 Why Two WSL Distros Instead of One?

🏗 Step 1 — Export Your Existing Ubuntu

📁 Step 2 — Create Folders for the New Distros

📦 Step 3 — Import the New Distros

⚡ Step 4 — Add Quick Commands (dev and ai)

📂 Step 5 — Create a Shared Bootstrap Folder

🔧 Step 6 — The Common Bootstrap Script

💻 Step 7 — Dev WSL Setup (Ubuntu-dev)

🤖 Step 8 — AI WSL Setup (Ubuntu-ai)

🔍 Step 9 — Verify Everything

🎯 Final Thoughts

# I Built an Apple-Style Glassmorphism React Component Library 🚀

What I Built

Installation

Components

GlassCard

GlassButton

GlassInput

Real Example

All 18 Components

Tech Stack

Why I Built This

Links

What's Next

Try It Out

Best Practices for Writing Clean Code in Multiple Languages

1. Consistency Is Key

Example:

2. Meaningful Names

Example:

3. Avoid Magic Numbers and Strings

Example:

4. DRY (Don’t Repeat Yourself)

Example:

5. Code Comments and Documentation

Example:

6. Error Handling and Logging

Example:

7. Test-Driven Development (TDD)

Example:

8. Keep It Simple (KISS)

Example:

Conclusion

Understanding Higher-Order Components (HOCs) in React: A Beginner's Guide

How to Use Application Programming Frameworks and Libraries to Simplify Your Development Process

Understanding Redux: A Comprehensive Guide to State Management in JavaScript Applications with React

ReactJS: A Comprehensive Overview of a Popular JavaScript Library

OpenAI and the Future of Work: How AI Can Assist, But Not Replace, Software Engineers

20 JavaScript Tricks for Improved Code Efficiency

SSR vs CSR

serverrendering #clientsiderendering #SEO #webdevelopment #webperformance #react #nextjs

Custom Radio button Using react component and Material UI

SQL vs NoSQL