Forem: Akram Khan

Architecture: Revolutionizing Mobile App Development

Akram Khan — Wed, 20 Nov 2024 16:32:41 +0000

React Native has been a game-changer in cross-platform mobile app development, and the new architecture represents a significant leap forward in performance, efficiency, and developer experience. This comprehensive guide will explore the key aspects of React Native's new architecture and what it means for developers.

The Evolution of React Native

Traditional Architecture Limitations

Before diving into the new architecture, let's understand the challenges with the previous approach:

Limitation	Impact
Bridge-based Communication	Slower performance due to serialization overhead
JavaScript Thread Bottleneck	Performance constraints in complex applications
Limited Native Module Integration	Difficult advanced native integrations

Key Components of the New Architecture

1. Hermes JavaScript Engine

Hermes has been dramatically improved:

Faster Startup Times: Up to 60% faster app initialization
Reduced Memory Footprint: More efficient memory management
Ahead-of-Time (AOT) Compilation: Improved runtime performance

2. Fabric Rendering System

The new rendering pipeline introduces:

Synchronous Rendering: More predictable UI updates
Direct Manipulation: Reduced bridge communication
Improved Gesture Handling: More responsive user interactions

3. Turbo Modules

// New Module Declaration
export interface TurboModule {
  getConstants(): {
    // Module-specific constants
  };
  // Method definitions
}

Turbo Modules offer:

Type Safety: Better TypeScript integration
Lazy Loading: Load native modules only when required
Improved Performance: Direct native method calls

Performance Benchmarks

Metric	Old Architecture	New Architecture	Improvement
Startup Time	2.5s	1.2s	52% Faster
Memory Usage	250MB	180MB	28% Reduced
Rendering Speed	40 FPS	60 FPS	50% Faster

Implementation Strategy

Migration Steps

Upgrade to latest React Native version
Enable Hermes JavaScript Engine
Update native modules to Turbo Module format
Refactor UI components for Fabric rendering

Code Example: Turbo Module

// Native Module Definition
export interface ExampleTurboModule extends TurboModule {
  multiply(a: number, b: number): number;
}

// JavaScript Implementation
const NativeModule = TurboModuleRegistry.getEnforcing<ExampleTurboModule>('ExampleModule');
const result = NativeModule.multiply(5, 3);

Potential Challenges

⚠️ Migration Considerations:

Requires careful planning
Some existing libraries might need updates
Learning curve for new architecture concepts

Conclusion

The new React Native architecture is not just an incremental update—it's a fundamental reimagining of cross-platform mobile development. By addressing performance bottlenecks and providing more robust native integrations, React Native is positioning itself as the premier framework for building mobile applications.

Recommended Actions:

Stay updated with React Native releases
Start small migrations in existing projects
Invest time in understanding new architectural patterns

Resources

Last Updated: November 2024

A secure authentication in nodejs with mongodb database.

Akram Khan — Thu, 31 Oct 2024 11:48:11 +0000

Node.js Package Reference Guide

Core Dependencies

Web Framework & Server

express (^4.18.2)
- Web application framework
- Handles routing, middleware, and HTTP requests/responses
- Core foundation for building APIs and web applications

Database

mongoose (^7.0.0)
- MongoDB object modeling tool
- Provides schema-based solution to model application data
- Handles database operations and relationships

Security Packages

jsonwebtoken (^9.0.0)
- Creates and verifies JSON Web Tokens (JWT)
- Used for user authentication and secure information exchange
bcryptjs (^2.4.3)
- Hashes and compares passwords securely
- Protects user passwords in the database
helmet (^6.0.1)
- Adds security headers to HTTP responses
- Protects against common web vulnerabilities
- Sets various HTTP headers for security
cors (^2.8.5)
- Enables Cross-Origin Resource Sharing
- Controls which domains can access your API
- Essential for web applications with separate frontend/backend

Validation & Configuration

joi (^17.9.0)
- Data validation library
- Validates request bodies, query parameters, and other inputs
- Ensures data integrity and format
dotenv (^16.0.3)
- Loads environment variables from .env file
- Manages configuration settings
- Keeps sensitive data secure

Development Dependencies

Development Tools

nodemon (^2.0.22)
- Monitors file changes during development
- Automatically restarts the server
- Improves development workflow

Usage Example

// Express server setup
const express = require('express');
const app = express();

// Security middleware
const helmet = require('helmet');
const cors = require('cors');
app.use(helmet());
app.use(cors());

// Environment variables
require('dotenv').config();

// Database connection
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI);

// Validation example
const Joi = require('joi');
const schema = Joi.object({
    email: Joi.string().email().required()
});

// Password hashing
const bcrypt = require('bcryptjs');
const hashedPassword = await bcrypt.hash('password', 10);

// JWT authentication
const jwt = require('jsonwebtoken');
const token = jwt.sign({userId: 123}, process.env.JWT_SECRET);

Complete Node.js and Mongoose Project Structure Guide

Project Structure

project-root/
├── src/
│   ├── config/
│   │   ├── database.js
│   │   └── config.js
│   ├── models/
│   │   ├── user.model.js
│   │   └── product.model.js
│   ├── controllers/
│   │   ├── user.controller.js
│   │   └── product.controller.js
│   ├── routes/
│   │   ├── user.routes.js
│   │   └── product.routes.js
│   ├── middleware/
│   │   ├── auth.middleware.js
│   │   └── error.middleware.js
│   ├── utils/
│   │   ├── logger.js
│   │   └── validators.js
│   └── app.js
├── .env
├── .gitignore
└── package.json

1. Initial Setup

package.json

{
  "name": "node-mongoose-project",
  "version": "1.0.0",
  "main": "src/app.js",
  "scripts": {
    "start": "node src/app.js",
    "dev": "nodemon src/app.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.0",
    "dotenv": "^16.0.3",
    "joi": "^17.9.0",
    "jsonwebtoken": "^9.0.0",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "helmet": "^6.0.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

.env

PORT=3000
MONGODB_URI=mongodb://localhost:27017/your-database
JWT_SECRET=your-secret-key
NODE_ENV=development

.gitignore

node_modules/
.env
logs/
*.log

2. Configuration Setup

src/config/config.js

require('dotenv').config();

module.exports = {
    port: process.env.PORT || 3000,
    mongoUri: process.env.MONGODB_URI,
    jwtSecret: process.env.JWT_SECRET,
    nodeEnv: process.env.NODE_ENV || 'development',
    jwtExpiresIn: '1d'
};

src/config/database.js

const mongoose = require('mongoose');
const config = require('./config');
const logger = require('../utils/logger');

const connectDB = async () => {
    try {
        await mongoose.connect(config.mongoUri, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        });
        logger.info('MongoDB connected successfully');
    } catch (error) {
        logger.error('MongoDB connection error:', error);
        process.exit(1);
    }
};

module.exports = connectDB;

3. Models Definition

src/models/user.model.js

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const config = require('../config/config');

const userSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, 'Name is required'],
        trim: true,
        minlength: 3,
        maxlength: 50
    },
    email: {
        type: String,
        required: [true, 'Email is required'],
        unique: true,
        lowercase: true,
        trim: true
    },
    password: {
        type: String,
        required: [true, 'Password is required'],
        minlength: 6,
        select: false
    },
    role: {
        type: String,
        enum: ['user', 'admin'],
        default: 'user'
    }
}, {
    timestamps: true
});

// Pre-save middleware to hash password
userSchema.pre('save', async function(next) {
    if (!this.isModified('password')) return next();
    this.password = await bcrypt.hash(this.password, 12);
    next();
});

// Instance methods
userSchema.methods.generateAuthToken = function() {
    return jwt.sign(
        { id: this._id, role: this.role },
        config.jwtSecret,
        { expiresIn: config.jwtExpiresIn }
    );
};

userSchema.methods.comparePassword = async function(candidatePassword) {
    return await bcrypt.compare(candidatePassword, this.password);
};

const User = mongoose.model('User', userSchema);
module.exports = User;

src/models/product.model.js

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        trim: true
    },
    price: {
        type: Number,
        required: true,
        min: 0
    },
    description: String,
    category: {
        type: String,
        required: true
    },
    createdBy: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User',
        required: true
    }
}, {
    timestamps: true
});

const Product = mongoose.model('Product', productSchema);
module.exports = Product;

4. Controllers

src/controllers/user.controller.js

const User = require('../models/user.model');
const { validateUser } = require('../utils/validators');
const logger = require('../utils/logger');

exports.register = async (req, res) => {
    try {
        const { error } = validateUser(req.body);
        if (error) return res.status(400).json({ error: error.details[0].message });

        const user = await User.create(req.body);
        const token = user.generateAuthToken();

        res.status(201).json({
            status: 'success',
            token,
            data: { user }
        });
    } catch (error) {
        logger.error('Registration error:', error);
        res.status(400).json({
            status: 'fail',
            message: error.message
        });
    }
};

exports.login = async (req, res) => {
    try {
        const { email, password } = req.body;

        const user = await User.findOne({ email }).select('+password');
        if (!user || !(await user.comparePassword(password))) {
            return res.status(401).json({
                status: 'fail',
                message: 'Invalid email or password'
            });
        }

        const token = user.generateAuthToken();
        res.json({
            status: 'success',
            token
        });
    } catch (error) {
        logger.error('Login error:', error);
        res.status(400).json({
            status: 'fail',
            message: error.message
        });
    }
};

5. Routes

src/routes/user.routes.js

const express = require('express');
const router = express.Router();
const userController = require('../controllers/user.controller');
const auth = require('../middleware/auth.middleware');

router.post('/register', userController.register);
router.post('/login', userController.login);
router.get('/profile', auth, userController.getProfile);

module.exports = router;

6. Middleware

src/middleware/auth.middleware.js

const jwt = require('jsonwebtoken');
const config = require('../config/config');
const User = require('../models/user.model');

module.exports = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.replace('Bearer ', '');

        if (!token) {
            return res.status(401).json({
                status: 'fail',
                message: 'No token provided'
            });
        }

        const decoded = jwt.verify(token, config.jwtSecret);
        const user = await User.findById(decoded.id);

        if (!user) {
            return res.status(401).json({
                status: 'fail',
                message: 'User not found'
            });
        }

        req.user = user;
        next();
    } catch (error) {
        res.status(401).json({
            status: 'fail',
            message: 'Invalid token'
        });
    }
};

src/middleware/error.middleware.js

const logger = require('../utils/logger');

module.exports = (err, req, res, next) => {
    logger.error(err.stack);

    if (err.name === 'ValidationError') {
        return res.status(400).json({
            status: 'fail',
            message: err.message
        });
    }

    if (err.code === 11000) {
        return res.status(400).json({
            status: 'fail',
            message: 'Duplicate field value'
        });
    }

    res.status(err.status || 500).json({
        status: 'error',
        message: err.message || 'Internal server error'
    });
};

7. Utils

src/utils/logger.js

const winston = require('winston');
const config = require('../config/config');

const logger = winston.createLogger({
    level: config.nodeEnv === 'development' ? 'debug' : 'info',
    format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.json()
    ),
    transports: [
        new winston.transports.File({ filename: 'logs/error.log', level: 'error' }),
        new winston.transports.File({ filename: 'logs/combined.log' })
    ]
});

if (config.nodeEnv === 'development') {
    logger.add(new winston.transports.Console({
        format: winston.format.simple()
    }));
}

module.exports = logger;

src/utils/validators.js

const Joi = require('joi');

exports.validateUser = (user) => {
    const schema = Joi.object({
        name: Joi.string().min(3).max(50).required(),
        email: Joi.string().email().required(),
        password: Joi.string().min(6).required(),
        role: Joi.string().valid('user', 'admin')
    });

    return schema.validate(user);
};

exports.validateProduct = (product) => {
    const schema = Joi.object({
        name: Joi.string().required(),
        price: Joi.number().min(0).required(),
        description: Joi.string(),
        category: Joi.string().required()
    });

    return schema.validate(product);
};

8. Main Application File

src/app.js

const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const config = require('./config/config');
const connectDB = require('./config/database');
const errorMiddleware = require('./middleware/error.middleware');
const userRoutes = require('./routes/user.routes');
const productRoutes = require('./routes/product.routes');
const logger = require('./utils/logger');

// Initialize express app
const app = express();

// Connect to MongoDB
connectDB();

// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Routes
app.use('/api/users', userRoutes);
app.use('/api/products', productRoutes);

// Error handling
app.use(errorMiddleware);

// Start server
app.listen(config.port, () => {
    logger.info(`Server running in ${config.nodeEnv} mode on port ${config.port}`);
});

// Handle unhandled promise rejections
process.on('unhandledRejection', (err) => {
    logger.error('UNHANDLED REJECTION! Shutting down...');
    logger.error(err.name, err.message);
    process.exit(1);
});

Running the Application

Install dependencies:

npm install

Set up your environment variables in .env
Start the development server:

npm run dev

For production:

npm start

Testing the API

Test the API endpoints using tools like Postman or curl:

# Register a new user
curl -X POST http://localhost:3000/api/users/register \
  -H "Content-Type: application/json" \
  -d '{"name": "John Doe", "email": "john@example.com", "password": "password123"}'

# Login
curl -X POST http://localhost:3000/api/users/login \
  -H "Content-Type: application/json" \
  -d '{"email": "john@example.com", "password": "password123"}'

This structured guide provides a complete setup for a Node.js and Mongoose application with proper organization, error handling, and security features. Each file has its specific responsibility, making the codebase maintainable and scalable.

I create a custom Modal component in react + typescript.

Akram Khan — Wed, 18 Sep 2024 18:31:47 +0000

I create a custom Modal component in react + typescript.

Modal.tsx

// src/components/ui/Modal.tsx
import React, { useState, useEffect, useRef } from 'react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  dismissable?: boolean;
  closeOnEsc?: boolean;
  closeButtonLabel?: string;
  size?: 'small' | 'medium' | 'large';
  position?: 'center' | 'top' | 'bottom';
}

const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  children,
  dismissable = true,
  closeOnEsc = true,
  closeButtonLabel = '×',
  size = 'medium',
  position = 'center',
}) => {
  const [isModalOpen, setIsModalOpen] = useState(isOpen);
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setIsModalOpen(isOpen);
  }, [isOpen]);

  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (dismissable && modalRef.current && !modalRef.current.contains(event.target as Node)) {
        onClose();
      }
    };

    const handleEscKey = (event: KeyboardEvent) => {
      if (closeOnEsc && event.key === 'Escape') {
        onClose();
      }
    };

    if (isModalOpen) {
      document.addEventListener('mousedown', handleOutsideClick);
      document.addEventListener('keydown', handleEscKey);
    }

    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
      document.removeEventListener('keydown', handleEscKey);
    };
  }, [isModalOpen, onClose, dismissable, closeOnEsc]);

  if (!isModalOpen) {
    return null;
  }

  const getSizeStyle = () => {
    switch (size) {
      case 'small':
        return { width: '300px', maxWidth: '100%' };
      case 'large':
        return { width: '800px', maxWidth: '100%' };
      default:
        return { width: '500px', maxWidth: '100%' };
    }
  };

  const getPositionStyle = () => {
    switch (position) {
      case 'top':
        return { alignItems: 'flex-start' };
      case 'bottom':
        return { alignItems: 'flex-end' };
      default:
        return { alignItems: 'center' };
    }
  };

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      justifyContent: 'center',
      zIndex: 1000,
      ...getPositionStyle(),
    }}>
      <div
        ref={modalRef}
        style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          maxHeight: '80vh',
          overflow: 'auto',
          position: 'relative',
          ...getSizeStyle(),
        }}
      >
          <button
            onClick={onClose}
            style={{
              position: 'absolute',
              top: '10px',
              right: '10px',
              background: 'none',
              border: 'none',
              fontSize: '18px',
              cursor: 'pointer',
            }}
          >
            {closeButtonLabel}
          </button>
        {children}
      </div>
    </div>
  );
};

export default Modal;

App.tsx

import Modal from "@/components/ui/Modal";
import { useState } from "react";

export default function Home() {
  const [visible, setVisible] = useState(false);

  return (
    <main>
      <button onClick={() => setVisible(true)}>isOpen</button>
      <Modal position="bottom" isOpen={visible} onClose={() => setVisible(false)}>
        <h2>Modal Content</h2>
        <p>This is a simple modal component.</p>
      </Modal>
    </main>
  );
}

Unveiling the Dark Sides of JavaScript: Common Pitfalls Every Developer Should Know

Akram Khan — Fri, 16 Aug 2024 16:35:28 +0000

JavaScript is a powerful and widely-used programming language in web development. However, like any technology, it has its dark sides that can lead to unexpected behaviors and challenges. Understanding these pitfalls can help developers write cleaner, more efficient code.

1. Asynchronous Behavior

JavaScript's asynchronous nature often confuses developers, especially beginners. Understanding how asynchronous code executes is crucial for debugging.

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 1000);

console.log("End");

Output:

Start
End
Timeout

In this example, the message "End" logs before "Timeout" because setTimeout is asynchronous, executing after the current execution context.

2. Global Variables

Using global variables can lead to naming conflicts and unintended behavior. It's essential to manage variable scope properly.

var globalVar = "I'm global";

function test() {
    globalVar = "I'm changed!";
}

test();
console.log(globalVar); // "I'm changed!"

Here, the previously defined global variable is overwritten, which might not be the intended outcome.

3. Type Coercion

JavaScript's type coercion can result in unexpected outcomes during operations with different types.

console.log(1 + '1'); // "11"
console.log(1 - '1'); // 0
console.log('5' * '2'); // 10

In the first case, a number and a string are concatenated, while in the others, automatic type conversion occurs, which may lead to confusion.

4. The `this` Keyword

The value of this in JavaScript can change based on the context, leading to unexpected results.

const person = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // "Hello, John"

const greetFunc = person.greet; 
greetFunc(); // Undefined

In this case, the value of this in greetFunc does not refer to the person object, resulting in Undefined.

5. Callback Hell

Nesting multiple callbacks can make code complex and difficult to read. This often leads to what is known as "callback hell."

getData(function(data) {
    processData(data, function(processedData) {
        saveData(processedData, function() {
            console.log("Data saved!");
        });
    });
});

To address this problem, developers can use Promises or async/await to simplify code.

Conclusion

Understanding the dark sides of JavaScript is essential for writing effective code. By being aware of these pitfalls, you can avoid common mistakes and become a more proficient developer. Always strive to keep learning and improving your understanding of this versatile language.

my personal view component

Akram Khan — Tue, 16 Jul 2024 12:54:04 +0000

import { FlexAlignType, FlexStyle, View, type ViewProps, type ViewStyle } from 'react-native';

import { useThemeColor } from '@/hooks/useThemeColor';

export type ThemedViewProps = ViewProps & {
  lightColor?: string;
  darkColor?: string;
};

export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');

  return <View 
  style={[
     { backgroundColor }, 
     // { ...addOtherPropsStyleConverter(otherProps) } ,
     style
]} 
{...otherProps}
 />;
}

function addOtherPropsStyleConverter(otherProps: ThemedViewProps) : ViewStyle{ 

     type FlexWrapType =  "wrap" | "nowrap" | "wrap-reverse" | undefined
     let FlexWrap: FlexWrapType = undefined;
     if(otherProps.wrap){
          FlexWrap = 'wrap'
     }else if(otherProps.noWrap){
          FlexWrap = 'nowrap'
     }else if(otherProps.wrapReverse){
          FlexWrap = 'wrap-reverse'
     }

     type FlexDirectionType = "row" | "row-reverse" | "column" | "column-reverse" | undefined
     let FlexDirection: FlexDirectionType = undefined;
     if(otherProps.row){
          FlexDirection = 'row'
     }else if(otherProps.col){
          FlexDirection = 'column'
     }else if(otherProps.rowReverse){
          FlexDirection = 'row-reverse'
     }else if(otherProps.colReverse){
          FlexDirection = 'column-reverse'
     }

     return{
          padding: otherProps.p ?? 0,
          paddingLeft: otherProps.pl ?? 0,
          paddingRight: otherProps.pr ?? 0,
          paddingTop: otherProps.pt ?? 0,
          paddingBottom: otherProps.pb ?? 0,
          paddingHorizontal: otherProps.px ?? 0,
          paddingVertical: otherProps.py ?? 0,
          paddingStart: otherProps.ps ?? 0,
          paddingEnd: otherProps.pe ?? 0,

          margin: otherProps.m ?? 0,
          marginLeft: otherProps.ml ?? 0,
          marginRight: otherProps.mr ?? 0,
          marginTop: otherProps.mt ?? 0,
          marginBottom: otherProps.mb ?? 0,
          marginHorizontal: otherProps.mx ?? 0,
          marginVertical: otherProps.my ?? 0,
          marginStart: otherProps.ms ?? 0,
          marginEnd: otherProps.me ?? 0,

          borderRadius: otherProps.r ?? 0,
          borderTopLeftRadius: otherProps.rtl ?? 0,
          borderTopRightRadius: otherProps.rtr ?? 0,
          borderBottomLeftRadius: otherProps.rbl ?? 0,
          borderBottomRightRadius: otherProps.rbr ?? 0,

          flex: otherProps.f ?? undefined,
          flexBasis: otherProps.fb ?? undefined,
          flexGrow: otherProps.fg ?? undefined,
          flexShrink: otherProps.fs?? undefined,
          alignItems: otherProps.ai?? undefined,
          alignContent: otherProps.ac?? undefined,
          justifyContent: otherProps.jc?? undefined,
          flexWrap: FlexWrap,
          flexDirection: FlexDirection
     }
}

type CustomStyleProps = {
     // padding
     p?: number,
     ps?: number,
     pe?: number
     pt?: number,
     pr?: number,
     pb?: number,
     pl?: number,
     px?: number,
     py?: number,

     // margin
     m?: number,
     ms?: number,
     me?: number
     mt?: number,
     mr?: number,
     mb?: number,
     ml?: number,
     mx?: number,
     my?: number,

     // rounded
     r?: number,
     rtl?: number,
     rtr?: number
     rbl?: number,
     rbr?: number,

     // flexBox
     contain?: boolean, // flex: 1
     f?: number, // flex
     row?: boolean, // flex direction row
     col?: boolean, // flex direction column
     fs?: number, // flex shrink
     fg?: number, // flex grow
     fb?: number, // flex basis
     ai?: FlexAlignType, // align items
     ac?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined, // align content
     jc?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined, // justify content

     // wrap
     wrap?: boolean,
     noWrap?: boolean,
     wrapReverse?: boolean,
     rowReverse?: boolean,
     colReverse?: boolean
}

I create a Todo Application in Typescript With Save Todos in Local Storage

Akram Khan — Sun, 14 Jul 2024 15:17:35 +0000

we are use a vanilla vite project with typescript in this for understanding typescript and use a localstorage for store the todos.

<!doctype html>
<html lang="en">

<head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + TS</title>
     <link rel="stylesheet" href="./src/style.css">
</head>

<body>
     <div id="app">

          <div class="container">

               <h1>My Todo List</h1>

          <form id="myForm">
               <input required type="text" id="inputTodo" placeholder="Enter Todo">
               <button type="submit" id="btnSubmit">Add</button>
          </form>

          <div class="todos-container">
               <!-- <div class="todo-item">
                    <input id="isComplete" type="checkbox">
                    <p id="todoText">my today todo</p>
                    <button id="btnDelete">X</button>
               </div> -->
          </div>

     </div>

</div>

     <script type="module" src="/src/main.ts"></script>
</body>

</html>

.container{
     max-width: 700px;
     margin-inline: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

form #inputTodo{
     padding: 8px 15px;
}

form #btnSubmit{
     padding: 8px 15px;
}

.todos-container{
     padding: 10px;
     width: 100%;
     width: fit-content;
}

.todo-item{
     padding: 5px;
     border: 1px solid gray;
     gap: 20px;
     width: 100%;
     display: flex;
     align-items: center;
}

.textCut{
     text-decoration: line-through;
}

interface Todo{
     content: string,
     isComplete: boolean,
     readonly id:string
}

let todos:Todo[] = [];

const todosContainer = document.querySelector('.todos-container')!;

function genrateTodo(id: string, content:string, isComplete:boolean){
     const itemContainer:HTMLDivElement = document.createElement('div');
     itemContainer.classList.add('todo-item');

     // checkbox
     const checkbox: HTMLInputElement = document.createElement('input');
     checkbox.type = "checkbox";
     checkbox.checked = isComplete
     checkbox.onchange = () => {
          todos.find(todo => {
               if(todo.id === id) todo.isComplete = checkbox.checked;

               // save updated todo
               localStorage.setItem('todos', JSON.stringify(todos));
          })
          todoText.className = checkbox.checked ? 'textCut' : '';
     }

     // paragraph content
     const todoText:HTMLParagraphElement = document.createElement('p');
     todoText.innerHTML = content;
     todoText.className = isComplete ? 'textCut' : '';

     // delete button
     const btnDelete: HTMLButtonElement = document.createElement('button');
     btnDelete.textContent = 'X';
     btnDelete.onclick = () => {
          todos = todos.filter(todo => todo.id !== id);
          localStorage.setItem('todos', JSON.stringify(todos));
          renderTodos(todos);
     }

     itemContainer.append(checkbox, todoText, btnDelete);
     todosContainer.appendChild(itemContainer);

}

// add todo
const form = document.getElementById('myForm')!;
form.onsubmit = (e: SubmitEvent) => {
     e.preventDefault();
     const inputElement = document.getElementById('inputTodo') as HTMLInputElement;
     let value:string = inputElement.value;

     const newTodo:Todo = {
          id: String(Math.random() * 1000),
          content: value,
          isComplete: false
     }

     todos.push(newTodo);
     inputElement.value = "";

     localStorage.setItem('todos', JSON.stringify(todos));

     renderTodos(todos);
}


function renderTodos(todos: Todo[]){
     todosContainer.innerHTML = "";
     todos.forEach(todo => {
          genrateTodo(todo.id, todo.content, todo.isComplete);
     })
}

const jsonTodos = localStorage.getItem('todos')!;
const storedTodos : Todo[] = JSON.parse(jsonTodos);
todos = storedTodos;
renderTodos(todos);

My subdomain proxy server in nodejs

Akram Khan — Tue, 09 Jul 2024 12:20:37 +0000

Here is the nodejs proxy server that can be use to listen subdomain routes.

for example I run a server is localhost:5000 but I want to use subdomain in this like subdomain1.localhost:5000 or something diferent.

const express = require('express');
const app = express();
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxy();

const BASE = "https://github.com";

app.use((req, res, next) => {

     const hostname = req.hostname;
     const domains = hostname.split('.');
     const subdomain = domains[0];
     const resolveTo = BASE + '/' + subdomain;
     return proxy.web(req, res, { target: resolveTo, changeOrigin: true });
});

app.listen(5000, () => console.log('Listening on port: 5000'));

app.get('/', (req, res) => {
     return res.send('Welcome to the homepage');
});

My subdomain proxy server in nodejs

Akram Khan — Tue, 09 Jul 2024 12:20:28 +0000

Here is the nodejs proxy server that can be use to listen subdomain routes.

for example I run a server is localhost:5000 but I want to use subdomain in this like subdomain1.localhost:5000 or something diferent.

const express = require('express');
const app = express();
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxy();

const BASE = "https://github.com";

app.use((req, res, next) => {

     const hostname = req.hostname;
     const domains = hostname.split('.');
     const subdomain = domains[0];
     const resolveTo = BASE + '/' + subdomain;
     return proxy.web(req, res, { target: resolveTo, changeOrigin: true });
});

app.listen(5000, () => console.log('Listening on port: 5000'));

app.get('/', (req, res) => {
     return res.send('Welcome to the homepage');
});

Use socket.io in react native with nodejs server

Akram Khan — Tue, 28 Nov 2023 18:01:13 +0000

Certainly! React Native can be integrated with Socket.io to enable real-time communication in mobile applications. Here's a basic guide on setting up Socket.io with React Native:

Install Required Packages:
Install the necessary packages using npm or yarn. You'll need socket.io-client for the client-side and socket.io for the server-side.

bash
Copy code
npm install socket.io-client
For the server-side (if you have a backend), you'll also need:

bash
Copy code
npm install socket.io
Set Up Socket.io Client in React Native:
Import and set up the Socket.io client in your React Native component.

javascript
Copy code
import React, { useEffect } from 'react';
import io from 'socket.io-client';

const YourComponent = () => {
useEffect(() => {
const socket = io('http://your-server-address'); // Replace with your server address

socket.on('connect', () => {
  console.log('Connected to server');
});

// Handle other events as needed

return () => {
  socket.disconnect();
};

}, []);

return (
// Your component JSX
);
};

export default YourComponent;
Server-Side (Optional):
If you have a server, set up Socket.io on the server. Here's a simple example using Express:

javascript
Copy code
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
console.log('Client connected');

// Handle events from clients

socket.on('disconnect', () => {
console.log('Client disconnected');
});
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(Server running on port ${PORT});
});
Usage:
You can now emit and listen for events between the React Native client and the server.

javascript
Copy code
// Emit an event from the client
socket.emit('chat message', 'Hello, server!');

// Listen for events on the client
socket.on('chat message', (msg) => {
console.log(Received message: ${msg});
});
Make sure to replace 'http://your-server-address' with the actual address of your server. This is a basic setup, and you can customize it based on your application's needs.

My CodexProject Server js

Akram Khan — Sun, 23 Oct 2022 19:26:11 +0000

const express = require('express');
const app = express();
const cors = require('cors');
const http = require('http');
const server = http.createServer(app);
const port =  process.env.port || 5000;
const uuid = require('uuid');
app.use(cors());
app.use(express.json());

server.listen(port, () => {
    console.log('server listen on port: ' + port);
});

const conn = require('./db');

app.post('/createuser', (req, res) => {
  const user_uid = uuid.v4().substring(0, 8);
  const {user_name, user_password, user_batch} = req.body;
    conn.query("INSERT INTO tbl_users SET ?", {user_uid,user_name,user_password,user_batch}, (err, result) => {
        if(err){
          res.send({
            status: false,
            message: 'user not created'
          })
        }else{
        res.send({
          status: true,
          message: 'user successfully created'
        });
      }
    });
    console.log("data saved...");
});

app.get('/getusers', (req, res) => {
  conn.query("SELECT * FROM tbl_users", (err, result) => {
    if(err){
      res.send({status: false, message: 'users data not get', data: []})
    }else{
      res.send({
        status: true,
        message: 'users data',
        data: result
      });
    }
  });
});


app.post('/updateuser/:id', (req, res) => {
  const { id } = req.params;
  const {user_name, user_password, user_batch} = req.body;
    conn.query("UPDATE tbl_users SET ? WHERE id = ?", [{user_name, user_password, user_batch},id], (err, result) => {
        if(err){
          res.send({
            status: false,
            message: 'user not update'
          })
        }else{
        res.send({
          status: true,
          message: 'user successfully update'
        });
      }
    });
    console.log("data updated...");
});


app.get('/getuser/:uid', (req, res) => {
  const { uid } = req.params;
  conn.query(`SELECT * FROM tbl_users WHERE user_uid='${uid}'`, (err, result) => {
    if(err){
      res.send({status: false, message: 'user data not get', data: []})
    }else{
      res.send({
        status: true,
        message: 'single user data',
        data: result
      });
    }
  });
  console.log("request get");
});

app.get('/getposts/:uid', (req, res) => {
  const { uid } = req.params;
  conn.query(`SELECT id,user_uid,post_title,date FROM tbl_posts WHERE user_uid='${uid}'`, (err, result) => {
    if(err){
      res.send({status: false, message: `DAta Not get error: ${err}`, data: []})
    }else{
      res.send({status: true, message: 'single user get posts list', data: result})
    }
  });
  console.log("get posts");
});

Forem: Akram Khan

Architecture: Revolutionizing Mobile App Development

The Evolution of React Native

Traditional Architecture Limitations

Key Components of the New Architecture

1. Hermes JavaScript Engine

2. Fabric Rendering System

3. Turbo Modules

Performance Benchmarks

Implementation Strategy

Migration Steps

Code Example: Turbo Module

Potential Challenges

Conclusion

Resources

A secure authentication in nodejs with mongodb database.

Node.js Package Reference Guide

Core Dependencies

Web Framework & Server

Database

Security Packages

Validation & Configuration

Development Dependencies

Development Tools

Usage Example

Complete Node.js and Mongoose Project Structure Guide

Project Structure

1. Initial Setup

package.json

.env

.gitignore

2. Configuration Setup

src/config/config.js

src/config/database.js

3. Models Definition

src/models/user.model.js

src/models/product.model.js

4. Controllers

src/controllers/user.controller.js

5. Routes

src/routes/user.routes.js

6. Middleware

src/middleware/auth.middleware.js

src/middleware/error.middleware.js

7. Utils

src/utils/logger.js

src/utils/validators.js

8. Main Application File

src/app.js

Running the Application

Testing the API

I create a custom Modal component in react + typescript.

Modal.tsx

App.tsx

Unveiling the Dark Sides of JavaScript: Common Pitfalls Every Developer Should Know

1. Asynchronous Behavior

2. Global Variables

3. Type Coercion

4. The this Keyword

5. Callback Hell

Conclusion

my personal view component

I create a Todo Application in Typescript With Save Todos in Local Storage

My subdomain proxy server in nodejs

My subdomain proxy server in nodejs

Use socket.io in react native with nodejs server

My CodexProject Server js

4. The `this` Keyword