Coder Legion - Recent posts tagged techie

Post about Use and Misuse of AI in Localized Content and Dynamic Creative Work

Wed, 05 Feb 2025 12:32:25 +0000

Artificial Intelligence (AI) has emerged as a transformative tool across industries. From automating repetitive tasks to generating creative content, it has become an ally to many. However, like any tool, its value lies in how we use it. When misapplied—particularly in areas like localized content creation—it can lead to inaccuracies, cultural insensitivity, and poorly tailored results.
Also in programming, the use of open-source libraries, frameworks and rapidly changing code conventions that are constantly in development. Framework dependencies as upgrades happen soon turn out to cause issues in program development.

Awhile ago when i was trying to unbundle webpack as a newbie in React.js. i found a video that took me on a course on React and React-router using Webpack.
Before i realized that the video was outdated, i ran into error from getting up the webpack structure.
I noticed that their code was working but each time i try it out the, code does not give me the expected result.
I took the error message to Gemini and the response was based on the outdated library i was using.
It was when I rephrased and asked

"Is the current webpack library i was using outdated and is there a
new convention in implementing this code to resolve these errors, also
sending my package.json."

This new query was the beginning of the resolution of the error-bug.

Old Webpack Configuration (Pre-Version 4)

// webpack.config.js (Outdated)
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js', // Output bundle
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Handling JavaScript files
        exclude: /node_modules/,
        loader: 'babel-loader', // Transpile ES6+ to ES5
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // Serve static files
    port: 8080,
  },
};

Modern Webpack Configuration (Version 4 and Beyond)

// webpack.config.js (Modern)
const path = require('path');

module.exports = {
  mode: 'development', // Mode: "development" or "production"
  entry: './src/index.js', // Entry point
  output: {
    filename: 'main.js', // Default: "main.js" if not specified
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Handle JavaScript files
        exclude: /node_modules/,
        use: 'babel-loader', // Simplified syntax for loaders
      },
    ],
  },
  devServer: {
    static: './dist', // Serve static files (simplified from contentBase)
    port: 3000, // Optional: Default port is 8080
  },
};

Modern tools like create-react-app and Vite have revolutionized how React applications are built by abstracting away complex Webpack configurations. With just a single command, these tools scaffold a fully functional React app with sensible defaults, making them ideal for beginners or developers who want to focus more on coding than configuration.
For example, create-react-app and its TypeScript counterpart (create-react-app-template-typescript) provide a zero-config setup with Webpack under the hood.
On the other hand, Vite, a newer alternative, offers a lightweight and faster development experience by leveraging native ES modules and modern build tools like Rollup.

However, for developers who want to understand the inner workings of their build tools or customize their setup, starting from scratch with npm init -y and manually configuring Webpack is still a valuable exercise. Below, I’ll show how these tools compare to a manual Webpack setup.

Using create-react-app With create-react-app, setting up a React app
is as simple as running:

npx create-react-app my-app
cd my-app
npm start

To add TypeScript support, use:

npx create-react-app my-app --template typescript

This generates a React app with Webpack preconfigured and ready to go. You don’t need to touch webpack.config.js unless you eject the app (which is rarely necessary). The simplicity makes it perfect for most use cases.

Using Vite to Create a React App Vite provides an even faster and more
modern approach:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

You can also specify React and TypeScript templates during setup:

npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template react-ts

Vite eliminates the need for Webpack entirely, offering faster builds and hot module replacement (HMR).

Manual Webpack Setup For a manual setup, follow these steps:

1. Initialize a new project:

 mkdir my-app
    cd my-app
    npm init -y

2. Install Webpack and React dependencies:

npm install react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev

3. Create a webpack.config.js file to configure Webpack.

Below is a sample Webpack configuration for a React app:

> // webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      mode: 'development', // Switch to "production" for production builds
      entry: './src/index.js', // Main entry point
      output: {
        path: path.resolve(__dirname, 'dist'), // Output directory
        filename: 'bundle.js', // Output bundle name
        clean: true, // Cleans 'dist' folder before each build
      },
      module: {
        rules: [
          {
            test: /\.js$/, // Handle JavaScript files
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'], // Transpile modern JavaScript and React JSX
              },
            },
          },
          {
            test: /\.css$/, // Handle CSS files
            use: ['style-loader', 'css-loader'], // Inject styles into DOM
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html', // Template HTML file
        }),
      ],
      devServer: {
        static: path.resolve(__dirname, 'dist'), // Serve static files from 'dist'
        port: 3000, // Development server port
        hot: true, // Enable hot module replacement
      },
      resolve: {
        extensions: ['.js', '.jsx'], // Resolve these extensions in imports
      },
    };

4. Create the project structure:

  my-app/

      ├── src/

          │├── index.js

          │├── App.js

      ├── public/

         │ ├── index.html

      ├── webpack.config.js

     ├── package.json

5. Add the following scripts to your package.json:

json

    "scripts": {
      "start": "webpack serve --open",
      "build": "webpack"
    }

6. Run the app:

   npm start

Issues that arise in open-source library dependent framework
React as a Project has been on version 18 which there have been crash courses out there and documentations. Ai which uses the Large Language Model (LLM) from either google or any backbone server and data warehouse feed on the outdated information which is used to train this AI.
Most of the documentations are not being updated which lead to outdated response when the current libraries of React have depreciated because react 19 is out.
An example of this is the new way "use" is used to fetch data from an api instate of the joint work of the useEffect and storing state with useStates.

Outdated Approach: Data Fetching Using useEffect and useState

function OldUserProfile() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/user')
      .then(res => res.json())
      .then(data => {
        setUserData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  
  return (
    <div className="p-4">
      <h1 className="text-xl font-bold">User Profile</h1>
      <p>Name: {userData.name}</p>
      <p>Email: {userData.email}</p>
    </div>
  );
}

Modern Approach: Data Fetching Using the use() Hook

   // Modern approach - app/root.jsx or similar
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { use } from 'react';

// Example of modern data fetching with 'use'
function UserProfile() {
  // The new 'use' approach for data fetching
  const userData = use(fetch('https://api.example.com/user')
    .then(res => res.json()));

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold">User Profile</h1>
      <p>Name: {userData.name}</p>
      <p>Email: {userData.email}</p>
    </div>
  );
}

Key Improvements:

The use() hook eliminates the need for useEffect and useState when fetching data.
Data fetching is more declarative and less verbose.
This works seamlessly with React's server components, aligning well with modern rendering patterns.

Also React-router initially wrap the provider tag in the index.js file, then wrap the file in the app.js using the browser router as router, routes and nav links and the new use of links instead

Outdated React Router Conventions

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// App.js
import React from 'react';
import { Route, Switch, NavLink } from 'react-router-dom';

function App() {
  return (
    <div>
      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
      </nav>
      <Switch>
        <Route path="/" exact>
          <h1>Home Page</h1>
        </Route>
        <Route path="/about">
          <h1>About Page</h1>
        </Route>
      </Switch>
    </div>
  );
}

export default App;

Modern React Router Conventions

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "user",
        element: <UserProfile />,
        // You can also use loaders for data fetching
        loader: async () => {
          return fetch('https://api.example.com/user');
        }
      },
      {
        path: "review-booking",
        element: <ReviewBooking />,
      },
      // ... other routes
    ],
  },
]);

// Root component
function Root() {
  return (
    <div>
      <nav>
        {/* Modern Link usage */}
        <Link to="/user">User Profile</Link>
        <Link to="/review-booking">Review Booking</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// App component
export default function App() {
  return <RouterProvider router={router} />;
}

The Right Way to Use AI

Localized Content Creation

AI has immense potential to assist in creating localized content. It can help translate, adapt styles, and even suggest culturally relevant expressions. However, the key here is collaboration, not replacement. AI can provide a starting point, but the human touch ensures that the content resonates with the intended audience. Nuances in language, cultural references, and local idioms are often things AI struggles to fully grasp.

Code Writing Assistance

AI has become a programmer’s best friend, especially when it comes to generating boilerplate code or debugging complex problems. Tools like GitHub Copilot and ChatGPT can suggest solutions, optimize algorithms, and even generate entire functions. But relying on AI blindly can result in brittle, unoptimized, or even insecure code. Always review and test the generated code thoroughly. AI should complement your skills, not replace them.

Feedback in Article Journaling

When writing articles or journaling, AI can act as a brainstorming partner. Whether you’re stuck on an introduction or need help refining a paragraph, AI tools can offer suggestions. However, their outputs should be critically assessed. AI doesn’t understand your voice or your audience’s expectations—it generates content based on patterns, not emotions or intent.

The Wrong Way to Use AI

Misusing AI in Localized Content

One of the most common pitfalls is treating AI as a "one-size-fits-all" solution. For example, using AI to directly translate content for different regions without a human review can result in awkward phrasing or offensive translations. Localization isn’t just about language—it’s about context, tone, and cultural relevance. Ignoring this can alienate your audience rather than engaging them.

Blindly Trusting AI-Generated Code

AI-generated code can often appear perfect at first glance, but it may contain subtle bugs, inefficiencies, or security vulnerabilities. Copy-pasting code without understanding it risks introducing issues into your project. Always review the code, test extensively, and adapt it to fit your specific requirements.

Overreliance on AI for Creativity

While AI can assist with creativity, it’s not a replacement for human originality. Overusing AI for journaling or content creation can lead to generic, uninspired results. The magic of writing comes from your personal insights, emotions, and unique perspective—something AI cannot replicate.

All about system design

Tue, 07 Jan 2025 06:35:08 +0000

System Design: The Quest to Architect the Universe (Or Just Your App)

Once upon a time in the magical land of Software Engineering, a brave developer stood on the precipice of greatness (or utter confusion). Armed with a keyboard and a half-empty cup of coffee, they were about to embark on the most daunting journey of all: System Design.

Ah yes, system design—the thing interviewers ask about with a gleam in their eye, knowing full well that you’re about to talk in circles for 45 minutes while drawing boxes and arrows on a whiteboard like a mad scientist sketching a blueprint for world domination.

Let’s dive into this adventure, and who knows, by the end of it, you might even survive.

The Client-Server Drama

First off, let’s introduce you to our two main characters: Client and Server. Think of them like a pair of socially awkward friends at a party. The Client is that one person who never stops asking questions, like “Hey, can you get me that photo?” or “What’s the status of my food delivery?” Meanwhile, the Server is the poor soul who’s constantly trying to answer while juggling a hundred requests from other Clients at the same time.

And just like in real life, sometimes the Server will ghost the Client. It’s not personal—it just ran out of memory or crashed trying to fulfill the thousandth request for cat memes.

Load Balancers: The Bouncers of Your App

Enter the Load Balancer. This guy is the bouncer at the club who decides who gets in and who’s going to be left outside refreshing the page for eternity. Without load balancers, your system would be like a house party with 500 guests and one pizza—it’d go downhill fast.

The Load Balancer makes sure that no single server has a nervous breakdown by sending requests to different servers. It’s like your app’s way of saying, “I don’t know what server can handle you, but I hope one of them can.”

Microservices: "It’s Not You, It’s Me"

Monolithic apps? Oh, please. That’s so 2005. These days, we break things down into Microservices, the tech equivalent of breaking up with someone but staying friends. Instead of having one gigantic app doing everything (and eventually failing spectacularly), you have tiny apps that each handle specific tasks.

It’s like having a team of specialists instead of one person who’s trying to do everything—because we all know how that ends (hint: burnout, tears, and unhandled exceptions).

Databases: The Memory Bank

Now, let’s talk about the Database, your system’s treasure trove. It’s the place where you stash all the important stuff—like user data, app configurations, and your deepest secrets. There are two main kinds of databases: SQL (Structured Query Language) and NoSQL (Not Only SQL).

SQL databases are like librarians—organized, strict, and always wanting things in a specific order. NoSQL databases, on the other hand, are more like those cool, laid-back teachers who don’t mind if you turn in assignments whenever. You’ll need to decide which type fits your app’s personality. Are you a rule-following librarian or a chill teacher who’s okay with chaos?

Caching: The Cheat Sheet

If your Database is the library, then Caching is your cheat sheet. Why spend time flipping through pages when you can keep the answers right under your desk? When users keep asking for the same thing (like the score of last night’s game), caching stores that information close at hand, so you don’t have to dig it out of the database every time.

Just be careful—if your cheat sheet is wrong (i.e., stale cache), it’s like showing up to an exam with the wrong answers. Oops.

Scalability: Because More People Are Coming to the Party

Ah, Scalability—the thing everyone loves to brag about. It’s like when your friend says, “Yeah, we had to rent out a bigger venue for the party because so many people RSVP’d.” Scaling your system means handling more users, more requests, and more data without collapsing like a house of cards.

Vertical scaling is like giving your servers an upgrade—a new wardrobe and a gym membership so they can handle the load. Horizontal scaling? That’s when you just hire more servers. Instead of making one server bulk up, you bring in a whole team of new ones.

High Availability: No Downtime Allowed

What’s worse than a system failure? Nothing, according to your users. That’s why we aim for High Availability—because users expect your app to be there for them 24/7, like a loyal pet.

Of course, achieving high availability is no small feat. It’s like trying to stay awake during a 24-hour movie marathon. Servers need naps too, which is why you bring in backups and redundancy. That way, when one server crashes, another swoops in like a superhero, and no one ever notices.

Conclusion: You Survived (Maybe)

Congratulations! You’ve survived the wild world of system design, though it may have left you a little dazed and confused. Just remember, it’s all about drawing boxes, naming things in fancy ways (hello, “load balancer”), and praying that your app doesn’t implode under pressure.

Now go forth, brave developer, and architect systems with the grace of a cat landing on its feet—or at least with enough boxes and arrows to confuse anyone looking at your diagram.

I have a full design course here: system design course
please check it out and gain in-depth knowledge of it.

Happy designing!