CodeWithGillis

My Perspective on Software Development

Ngwa Nathan — Thu, 25 Sep 2025 15:59:13 GMT

When I first started out in software development, it felt like solving an impossible puzzle—complex, intimidating, and never-ending. But as I gained more experience (and made plenty of mistakes), I began to realize that building software doesn’t have to feel overwhelming. With the right perspective, it can actually be straightforward, even enjoyable.

Here are two lessons that completely changed how I approach development:

Focus on One Feature at a Time

One of the biggest mistakes I made early on was trying to wrap my head around the entire project or dozens of features all at once. Unsurprisingly, this approach only led to frustration and burnout.

The truth is, no one builds a fully finished product in a single step. The key is to break things down and focus on one feature at a time. Instead of stressing over everything that still needs to be built, I learned to ask:

What’s the one small part I can make work perfectly right now?

This mindset shift makes the process far more manageable. Each small success builds momentum, and before long, you find yourself with a working application.

Think Like a User First

Another early mistake I often made was diving straight into the code without thinking about the user. The result? Features that technically worked but were confusing or frustrating to use.

What I’ve since learned is that usability comes first. Before writing a single line of code, I now step into the user’s shoes:

How will they interact with this feature?
What steps will they take?
Does this flow feel natural and intuitive?

By mapping out the user experience first, the coding part becomes much clearer. This simple habit—working from usability to code—saves countless hours and leads to software that people actually enjoy using.

Final Thoughts

As a junior developer, it’s easy to feel overwhelmed by the complexity of software development. But here’s the truth: it’s not some impossible puzzle. If you focus on one feature at a time and always think like a user first, the process becomes much simpler, and your results get a whole lot better.

In the end, software development is just problem-solving—step by step, feature by feature. And the more you practice, the more natural it feels.

Building Enterprise-Grade Frontend Applications: A Complete Guide to Advanced Project Structure

Sone GIllis — Sun, 21 Sep 2025 19:42:53 GMT

As senior developers, we know that building scalable frontend applications goes far beyond writing functional code. It requires establishing a robust foundation that enables teams to work efficiently, maintain code quality, and deliver reliable products. This comprehensive guide explores the advanced tooling and architectural decisions that transform a simple frontend project into an enterprise-grade application.

Monorepo Architecture with Modern Package Managers
Build System Optimization with Task Runners
TypeScript Configuration & Project References
Code Quality & Linting Strategy
Git Workflow & Commit Standards
CI/CD Pipeline Architecture
Testing Strategy & Coverage
Branch Protection & Validation
Deployment Strategies
Best Practices & Lessons Learned

Monorepo Architecture with Modern Package Managers

Why Monorepos?

Traditional multi-repo setups create several challenges:

Dependency Hell: Managing versions across multiple repositories
Code Duplication: Shared utilities scattered across projects
Complex Release Coordination: Coordinating releases across related packages
Developer Experience: Context switching between repositories

A well-structured monorepo solves these problems while maintaining clear boundaries:

frontend-platform/
├── apps/                     # Applications
│   ├── main-app/            # Primary application
│   ├── auth-service/        # Authentication service
│   ├── admin-panel/         # Administrative interface
│   └── mobile-app/          # Mobile application
├── packages/                 # Shared libraries
│   ├── data-layer/          # API layer & state management
│   ├── ui-components/       # Reusable UI components
│   ├── utilities/           # Utility functions
│   ├── api-client/          # Core API definitions
│   └── feature-modules/     # Domain-specific features
└── tooling/                 # Build tools & configurations

pnpm Workspace Configuration

pnpm-workspace.yaml:

packages:
  - apps/*
  - packages/*
ignoredBuiltDependencies:
  - esbuild
  - fsevents
  - sharp
  - unrs-resolver

Key Benefits of pnpm:

Efficient Storage: Symlinked dependencies reduce disk usage
Fast Installs: Content-addressable storage with deduplication
Strict Dependencies: Prevents phantom dependencies
Workspace Protocol: workspace:* ensures local package linking

Package Management Strategy

Each package defines its dependencies precisely:

{
  "dependencies": {
    "@company/data-layer": "workspace:*",
    "@company/ui-components": "workspace:*",
    "@company/utilities": "workspace:*"
  }
}

The workspace:* protocol ensures:

Local packages are always linked during development
Production builds use published versions
Dependency graph remains consistent across the monorepo

Build System Optimization with Turborepo

Why Turborepo?

Turborepo transforms our build system with:

Intelligent Caching: Only rebuilds changed packages
Parallel Execution: Maximizes CPU utilization
Remote Caching: Shares build artifacts across team members
Dependency-Aware Builds: Respects package dependency graph

Turborepo Configuration

turbo.json:

{
  "$schema": "https://turborepo.com/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "typecheck": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Build Script Orchestration

Root package.json scripts:

{
  "scripts": {
    "prebuild": "pnpm -r --filter ./packages/* run build",
    "build": "pnpm turbo run build",
    "build:packages": "pnpm turbo run build --filter './packages/*'",
    "dev": "turbo run dev",
    "dev:main": "pnpm --filter enterprise-main-app dev",
    "lint": "pnpm turbo run lint",
    "test": "pnpm turbo run test --filter !e2e_tests",
    "typecheck": "tsc --noEmit"
  }
}

Performance Benefits:

Build Time Reduction: 60-80% faster builds with caching
Selective Builds: Only affected packages rebuild
Parallel Processing: Multiple packages build simultaneously
Incremental Development: Faster feedback loops

TypeScript Configuration & Project References

Project References Architecture

TypeScript project references enable:

Independent Compilation: Each package compiles separately
Build Coordination: Proper dependency order
IDE Performance: Faster type checking and navigation
Incremental Builds: Only recompile changed projects

Base Configuration

tsconfig.base.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@company/data-layer": ["packages/data-layer/src"],
      "@ui-components/*": ["packages/ui-components/src/*"],
      "@utilities/*": ["packages/utilities/src/*"]
    }
  },
  "references": [
    { "path": "packages/data-layer" },
    { "path": "packages/ui-components" },
    { "path": "packages/utilities" }
  ]
}

Root Configuration

tsconfig.json:

{
  "extends": "./tsconfig.base.json",
  "files": [],
  "references": [
    { "path": "apps/main-app" },
    { "path": "apps/auth-service" },
    { "path": "apps/mobile-app" },
    { "path": "apps/admin-panel" },
    { "path": "packages/utilities" },
    { "path": "packages/ui-components" },
    { "path": "packages/data-layer" }
  ]
}

Benefits of This Approach

Faster Type Checking: Each project maintains its own types
Better IDE Support: IntelliSense works across package boundaries
Incremental Compilation: Only changed projects recompile
Clear Dependencies: Explicit project relationships

Code Quality & Linting Strategy

ESLint Configuration

Our ESLint setup enforces consistent code style across the monorepo:

.eslintrc.cjs:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier', // Disables conflicting ESLint rules
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Prettier Integration

Prettier Configuration ensures consistent formatting:

No Configuration Conflicts: ESLint extends 'prettier' to disable conflicting rules
Automatic Formatting: Pre-commit hooks format code
Team Consistency: Everyone uses the same formatting rules

Lint-Staged Configuration

package.json:

{
  "lint-staged": {
    "*.ts?(x)": ["pnpm prettier --write"],
    "*.js?(x)": ["pnpm prettier --write"],
    "*.css": ["pnpm prettier --write"]
  }
}

Quality Gates

Pre-commit: Automatically format changed files
CI Pipeline: Lint and typecheck all affected packages
PR Requirements: All checks must pass before merge

Git Workflow & Commit Standards

Conventional Commits with Commitlint

We enforce conventional commits to enable:

Automated Versioning: Semantic versioning from commit messages
Generated Changelogs: Automatic release notes
Clear History: Structured commit messages

commitlint.config.ts:

export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'scope-enum': [
      2,
      'always',
      [
        'main-app',
        'auth-service',
        'admin-panel',
        'analytics',
        'ui-components',
        'data-layer',
        'e2e-tests',
        'mobile-app',
        'utilities',
        'deps',
        'ci',
        'husky',
      ],
    ],
  },
};

Branch Naming Strategy

validate-branch.sh:

#!/bin/sh
branch_name=$(git symbolic-ref --short HEAD)
pattern="^(feat|fix|chore|docs|refactor|release|test)/(main-app|auth-service|admin-panel|mobile-app|e2e-tests|utilities|ui-components|data-layer|analytics|ci|ui|monitoring|app)/[a-z0-9.\-]+$|^release/(main-app|auth-service|admin-panel|mobile-app|utilities|ui-components|data-layer|analytics|ci|ui|monitoring|app)/[0-9]+\.[0-9]+\.[0-9]+$"

if [[ "$branch_name" == "main" ]]; then
  exit 0
fi

if ! echo "$branch_name" | grep -Eq "$pattern"; then
  echo "ERROR: Branch name '$branch_name' does not follow the pattern:"
  echo "       //"
  echo "       Examples: feat/main-app/add-login, fix/mobile-app/fix-button"
  exit 1
fi

Husky Git Hooks

.husky/pre-commit:

pnpm dlx lint-staged --verbose

.husky/commit-msg:

pnpm commitlint --edit "$1"

.husky/pre-push:

sh .husky/validate-branch.sh

CI/CD Pipeline Architecture

Multi-Stage Pipeline Strategy

Our CI/CD pipeline follows a sophisticated multi-stage approach:

Setup Stage: Cache dependencies and install
Quality Gates: Lint, typecheck, and test in parallel
Build Stage: Create production artifacts
Deployment: Environment-specific deployments
Testing: End-to-end validation

GitHub Actions Workflow

ci.yml (Core CI Pipeline):

name: CI

on:
  pull_request:
    branches: [main]

jobs:
  setup:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

  lint:
    runs-on: ubuntu-22.04
    needs: setup
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      - uses: pnpm/action-setup@v3
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - run: pnpm turbo run lint --filter=...[HEAD^1]

  typecheck:
    runs-on: ubuntu-22.04
    needs: setup
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      - run: pnpm turbo run typecheck --filter=...[HEAD^1]

  test:
    runs-on: ubuntu-22.04
    needs: setup
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      - run: pnpm turbo run test --filter=...[HEAD^1] --filter !e2e_tests -- --coverage

  build:
    runs-on: ubuntu-22.04
    needs: [lint, typecheck, test]
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      - run: pnpm turbo run build --filter=...[HEAD^1]

Intelligent Change Detection

The pipeline uses Turbo's change detection:

--filter=...[HEAD^1]: Only runs tasks for changed packages
Dependency-aware: Includes packages that depend on changed packages
Efficient: Skips unnecessary work

PR Checklist Automation

checklist:
  runs-on: ubuntu-22.04
  steps:
    - name: Check PR checklist
      env:
        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      run: |
        body=$(gh pr view ${{ github.event.pull_request.number }} --json body -q ".body")
        if [[ $body != *"- [x] Tests added/updated"* ]]; then
          echo "PR checklist not completed: Tests missing"
          exit 1
        fi
        if [[ $body != *"- [x] Lint & Typecheck pass locally"* ]]; then
          echo "PR checklist not completed: Lint/Typecheck missing"
          exit 1
        fi

Testing Strategy & Coverage

Multi-Level Testing Approach

Our testing strategy includes:

Unit Tests: Component and utility testing with Vitest
Integration Tests: API and data layer testing
E2E Tests: Full user journey validation with Playwright
Visual Regression: Screenshot comparisons

Vitest Configuration

vitest.config.ts:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: 'jsdom',
    setupFiles: ['__tests__/vitest.setup.ts'],
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        '__tests__/',
        '**/*.config.*',
        '**/*.d.ts',
      ],
    },
  },
})

Test Organization

apps/main-app/
├── __tests__/
│   ├── components/         # Component tests
│   ├── utils/             # Utility tests
│   ├── hooks/             # Custom hook tests
│   └── vitest.setup.ts    # Test setup
├── src/
│   ├── components/
│   │   ├── Button.tsx
│   │   └── Button.test.tsx

Playwright E2E Testing

Multi-Browser Testing Matrix:

strategy:
  fail-fast: false
  matrix:
    browser: [chrome, firefox, safari, edge]
    shard: [1, 2, 3]

Benefits:

Parallel Execution: 3 shards per browser
Cross-Browser Coverage: Ensures compatibility
Fail-Fast Disabled: All browsers tested even if one fails

Branch Protection & Validation

Advanced Branch Protection

Our branch protection strategy includes:

Automatic Validation: Branch names must follow convention
Status Checks: All CI jobs must pass
Review Requirements: Code review mandatory
Deployment Validation: Staging deployment and testing

App-Specific Validation

main-app-pr-validation.yml demonstrates sophisticated validation:

check-changes:
  runs-on: ubuntu-latest
  outputs:
    main-app-changed: ${{ steps.set-output.outputs.main-app-changed }}
  steps:
    - uses: dorny/paths-filter@v3
      id: changes
      with:
        base: main
        filters: |
          main-app:
            - 'apps/main-app/**'
            - 'packages/ui-components/**'
            - 'packages/data-layer/**'
            - 'packages/utilities/**'

Conditional Deployments

Only deploy and test when relevant files change:

Path-based Filtering: Detect changes in app or dependencies
Conditional Jobs: Skip unnecessary work
Resource Optimization: Don't waste CI/CD resources

Deployment Strategies

Containerized Deployments

Docker Strategy:

# Multi-stage build for optimal image size
FROM node:20-alpine AS base
RUN corepack enable

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

Container Registry Integration & Image Management

Automated Image Building:

- name: Build and push Docker image
  env:
    REGISTRY: ${{ steps.login-registry.outputs.registry }}
    IMAGE_TAG: ${{ steps.generate-tag.outputs.tag }}
  run: |
    FULL_IMAGE_URI="$REGISTRY/$IMAGE_NAME:$IMAGE_TAG"
    docker build -f apps/main-app/Dockerfile -t $FULL_IMAGE_URI --no-cache .
    docker push $FULL_IMAGE_URI

Zero-Downtime Deployments

Rolling Updates:

- name: Deploy Application on Staging
  run: |
    # Replace the image with the exact one we just built
    CURRENT_IMAGE=$(grep 'image:' docker-compose.yml | awk '{print $2}')
    NEW_IMAGE="$FULL_IMAGE_URI"

    sed -i "s|^ *image:.*|    image: $NEW_IMAGE|" docker-compose.yml

    docker compose pull
    docker compose down
    docker compose up -d

Best Practices & Lessons Learned

Monorepo Management

Do's:

✅ Use workspace protocols for internal dependencies
✅ Maintain clear package boundaries
✅ Implement consistent build and test patterns
✅ Use project references for TypeScript
✅ Cache everything (builds, tests, linting)

Don'ts:

❌ Create circular dependencies between packages
❌ Mix unrelated concerns in shared packages
❌ Skip dependency declarations
❌ Ignore build order dependencies

CI/CD Optimization

Performance Tips:

Parallel Jobs: Run independent tasks simultaneously
Smart Caching: Cache node_modules, build artifacts, and Docker layers
Change Detection: Only run tasks for affected packages
Resource Management: Use appropriate runner sizes
Fail Fast: Stop early when possible, continue when valuable

Code Quality Enforcement

Automation Strategy:

Pre-commit Hooks: Catch issues before commit
CI Validation: Comprehensive checks on all changes
PR Requirements: Enforce standards before merge
Automated Fixes: Auto-format and auto-fix when possible

Team Collaboration

Documentation:

Clear README files in each package
Conventional commit messages
PR templates with checklists
Architecture decision records (ADRs)

Developer Experience:

Fast feedback loops
Clear error messages
Consistent tooling across packages
Automated setup and configuration

Conclusion

Building enterprise-grade frontend applications requires more than just writing good code. It demands a comprehensive approach to:

Architecture: Monorepo structure with clear boundaries
Build System: Fast, reliable, and cached builds
Code Quality: Automated linting, formatting, and testing
CI/CD: Sophisticated pipelines with smart optimizations
Team Workflow: Clear processes and automated enforcement

The investment in this infrastructure pays dividends through:

Faster Development: Reduced friction and faster feedback
Higher Quality: Automated quality gates and consistency
Better Collaboration: Clear processes and shared tooling
Easier Maintenance: Consistent patterns and good documentation

As your team grows and your application scales, these practices become not just helpful, but essential for maintaining velocity and quality.

Remember: the goal isn't to adopt every tool and practice, but to thoughtfully select and implement the ones that solve real problems for your team and application. Start with the basics, measure the impact, and evolve your toolchain based on actual needs and constraints.

This article is based on my real-world experience building and maintaining enterprise frontend applications. The specific tooling choices and configurations represent battle-tested solutions that have proven effective in production environments.

Handle Your API Responses Like a Pro in Django

Sone GIllis — Tue, 25 Mar 2025 03:28:59 GMT

Introduction

When building APIs in Django, consistency in responses is key. A well-structured response format simplifies how the frontend handles API results, leading to a better developer experience and a smoother user experience.

A common approach is to structure API responses as:

{
  "data": { /* Response Data as an object or list of objects and null if error */ },
  "erc": 1,  // 1 for success, other numbers for errors
  "msg": "Associated message"
}

Why Is This Important?

✅ Predictability: The frontend can rely on a consistent format, reducing conditional checks.
✅ Standardized Error Handling: The UI can use the erc value to determine the type of error without parsing complex error structures.
✅ Improved Debugging: Logs and API responses are uniform, making debugging easier.
✅ Scalability: If multiple teams work on the project, everyone follows a standard API response format.

Implementing a Middleware to Standardize API Responses

Instead of manually structuring responses in every view, we can use a Django middleware to automatically format all responses.

Step 1: Create the Middleware

class ApiResponseMiddleware:
    def __init__(self, get_response=None):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        return response

    def process_template_response(self, request, response):
        if hasattr(response, "data") and not request.path.startswith("/api/schema"):
            # add conditional checks above to ignore paths that have data in the response object but are not part of your api spec
            if response.data and 'non_field_errors' in response.data:
                response.data = {
                    'erc': response.data["non_field_errors"][0].code,
                    'msg': response.data["non_field_errors"][0]
                }
            elif response.data and response.status_code == 400:
                print(response.data);
                response.data = {
                    'erc': 0,
                    'msg': {key: ''.join([str(error_str) for error_str in value]) for key, value in response.data.items()}
                }
            elif response.data and response.status_code > 400:
                print(response.data)
                response.data = {
                    'erc': 0,
                    'msg': response.data.get('detail')
                }
            elif response.data and 'count' in response.data:
                response.data = {
                    "erc": 1,
                    "msg": "success",
                    "total": response.data.get('count', 1),
                    "next": response.data.get('next'),
                    "data": response.data.get('results') if 'results' in response.data else response.data
                }
            else:
                response.data = {
                    "erc": 1,
                    "msg": "success",
                    "data": response.data
                }
        return response

Step 2: Using an ErrorCode Enum for Named Errors

To make error handling even more structured, we can use an ErrorCode enum. This allows us to define named error codes with meaningful messages, making it easy to raise and handle errors concisely.

Defining the `ErrorCode` Enum

from enum import Enum
from django.utils.translation import gettext_lazy as _

class ErrorCode(Enum):
    INVALID_INPUT = (1001, _('Invalid input'))
    AUTHENTICATION_FAILED = (1002, _('Authentication failed'))
    PERMISSION_DENIED = (1003, _('Permission denied'))
    RESOURCE_NOT_FOUND = (1004, _('Requested resource not found'))
    SERVER_ERROR = (1005, _('Internal server error'))

    def __init__(self, code: int, message: str):
        self.code = code
        self.message = message

How This Helps?

✅ Clear, Named Errors → Instead of returning raw numbers, we have readable, maintainable error codes.
✅ Standardized Error Responses → No need to manually define error messages in every view.
✅ Translation Support → gettext_lazy enables internationalization for error messages.

Step 3: Using the ErrorCode Enum in API Responses

With our middleware in place, Django views no longer need to manually format responses. The middleware will automatically wrap them in the {data, erc, msg} structure.

The only responsibility of the views is to:
✅ Return data normally for successful requests.
✅ Raise structured errors using ErrorCode for failures.

Example Usage in a View

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.exceptions import ValidationError
from .error_codes import ErrorCode

class SampleView(APIView):
    def get(self, request):
        if "invalid_param" in request.query_params:
            raise ValidationError(ErrorCode.INVALID_INPUT.message, ErrorCode.INVALID_INPUT.code)  # Example of a validation error

        return Response({"message": "Welcome!"})  # Middleware will wrap this

How the Middleware Handles Responses

For successful responses, the middleware automatically wraps the returned data:

View Returns:

{"message": "Welcome!"}

Middleware Converts to:

{
  "data": { "message": "Welcome!" },
  "erc": 1,
  "msg": "Success"
}

For errors, the middleware extracts the ErrorCode and formats the response:

View Raises:

raise ValidationError(ErrorCode.INVALID_INPUT.message, ErrorCode.INVALID_INPUT.code)

Middleware Converts to:

{
  "data": null,
  "erc": 1001,
  "msg": "Invalid input"
}

Step 4: Activating the Middleware

Once the middleware is ready, add it to Django’s MIDDLEWARE list in settings.py:

MIDDLEWARE = [
    ...
    'path.to.your.ApiResponseMiddleware',  # Add this line
    ...
]

Final Thoughts

By implementing structured API responses and an ErrorCode enum, you ensure:
✅ Consistent and readable responses for frontend developers
✅ Predictable error handling with predefined error codes
✅ Scalable and maintainable APIs

With this approach, you’ll handle API responses like a pro in Django! 🚀

Common terms used in Image Processing (Part 1)

Sone GIllis — Sun, 23 Mar 2025 08:22:17 GMT

Image Formation

Involves the fall of light on an object which gets reflected to an image source like your eyes or a camera having a lens where the image is formed.

Bayer Mosaic

A sensor array of filters containing Red, Green and Blue filters. Light coming in from an object contains Red, Green and Blue components that get filtered by these individual filters (R filter allows only the Red component to go through, G filter allows only the Green component to go through and B filter allows only the Blue component to go through) with Green containing 50% of the content, Red containing 25% and Blue containing 25%.

The choice of this design is based on how the human eye responses to light. The human visual system is most sensitive to Green wavelengths. Green also contributes most to luminance (brightness perception), therefore capturing more green data leads to more detailed and fine images with less noise.

Bits per pixel (Bpp)

Refers to the amount of bits of information stored in each pixel in an image. It also referred to as Color depth because it determines the number of bits used to represent each single pixel in an image. For example, 2bits could only represent 2 colors (Black & White) and 8 bits could represent 256 colors.

Brightness

Brightness is a relative term, that compares the intensities of each pixel in an image. Given 3 pixels, A, B and C, each with intensities 20, 100, and 250 respectively, we can deduce that the B pixel is brighter than the A pixel, but not as bright as the C pixel.

Contrast

This is the difference between the maximum and the minimum pixel intensities in an image. Given an image A, with pixel intensities ranging from 180 to 255, and another image B, with pixel intensities ranging from 20 to 200, we'll conclude that image B has more contrast than A because image A has a 180 difference in intensity compared to the 75 in image A.

Resolution

It is quantity factor referring to the total number of pixels in an image. For example HD (1280 x 720) resolutions containing 1280 pixels horizontally and 720 pixels vertically giving it a total of 921,600 pixels. It is important to note that this is just a measure and on it's own doesn't guarantee quality in the image.

Pixel Density

This refers to the number of pixels in an inch of a display. It also indicates how close pixels are to each other in a display represented as Dot Per Inch (DPI). The sharpness of an image will be better with higher pixel densities

Color Models

A system that makes use of 3 primary colors (RGB) to produce a vast range of colors. Color models include (RGB, HSV, YUV)

HSV

This is a color model that signifies Hue, Saturation and Value (Brightness). Hue represents the color in the pixel measured in degree ranging from 0 to 360 deg. Saturation is directly related to intensity and it is measured in percentage ranging from 0 to 100. A high saturation means high intensity of the color present. Value also referred to as brightness indicates the brightness of the color ranging from 0 to 100 measured in percentage (o represents black and 100 represents the brightest)

Luminance and Chrominance

Luminance usually refers to the brightness whereas chrominance refers to the color. It is usually indicated in the YUV color model with Y interpreted as the luminance (brightness) and U,V interpreted as the chrominance

Chroma Subsampling

This refers to the lessening of the color resolution of video signals thereby saving bandwidth. Chroma is also known as the Color component information. We could lessen this component by sampling at a lower rate than the brightness or luminance

Things you should learn before starting React

Sone GIllis — Sun, 23 Feb 2025 06:52:33 GMT

Arrow Functions

Arrow functions provide a concise way to write function expressions which are excellent for handling common tasks such as defining event handlers and creating function components

const sum = (a, b) => a + b; 
console.log('The sum of 3 and 5 is ', sum(3, 5));

Map and Filter

Map creates a new array by transforming each element, while Filter creates a new array with elements that pass a test.

Map provides a concise and declarative to render html content and components in react from a list of data. Filter on the other hands removes unwanted data from a list

const numbers = [1, 2, 3, 4, 5, 6, 7]
const squares = numbers.map(el => el * el) // use of map to get squares of numbers
const even = numbers.filter(el => el % 2 === 0) // use of filter to get even numbers

Slice and Splice

Slice

Slice returns a shallow copy of a portion of an array without modifying the original array. It does not modify the contents of the original array. It returns a new array

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(1, 4); // Extracts elements from index 1 to 3 (4 is not included)

console.log(slicedNumbers); // Output: [2, 3, 4]
console.log(numbers); // Output: [1, 2, 3, 4, 5] (Original array remains unchanged)

Splice

Splice modifies the original array by adding, removing or replacing elements.

const colors = ["red", "blue", "green", "yellow"];
const removedColors = colors.splice(1, 2); // Removes 2 elements starting from index 1

console.log(removedColors); // Output: ["blue", "green"]
console.log(colors); // Output: ["red", "yellow"] (Original array is modified)

const fruits = ["apple", "banana", "grape"];
fruits.splice(1, 0, "orange", "mango"); // Inserts at index 1 without deleting anything

console.log(fruits); // Output: ["apple", "orange", "mango", "banana", "grape"]

React's State Management Requires Immutability. In React, we should not modify state directly; instead, we create a new copy and update it. slice() is useful for creating copies of state data, whereas splice() modifies arrays in place (which is discouraged in React state updates).

Example: Bad Practice (Mutating State in React)

const [items, setItems] = useState(["apple", "banana", "cherry"]);

const removeItem = () => {
    items.splice(1, 1); // Mutates the state directly
    setItems(items); // React may not re-render properly
};

Example: Good Practice (Using slice)

const [items, setItems] = useState(["apple", "banana", "cherry"]);

const removeItem = () => {
    setItems(items.slice(0, 1).concat(items.slice(2))); // Creates a new array
};

React's reconciliation process benefits from immutable data updates. Methods like slice() help create new state objects without modifying the previous one, allowing React to detect changes efficiently.

Destructuring

Array Destructuring

Allows you extract elements from an array and assign to variables

// Basic Array Destructing

const numbers = [10, 20, 30];

// Extract values into separate variables
const [first, second, third] = numbers;

console.log(first); // Output: 10
console.log(second); // Output: 20
console.log(third); // Output: 30


// Skipping Elements

const colors = ["red", "blue", "green", "yellow"];

// Skip the second element
const [firstColor, , thirdColor] = colors;

console.log(firstColor); // Output: "red"
console.log(thirdColor); // Output: "green"


// Rest Operator

const fruits = ["apple", "banana", "cherry", "date"];
const [firstFruit, ...restFruits] = fruits;

console.log(firstFruit); // Output: "apple"
console.log(restFruits); // Output: ["banana", "cherry", "date"]

Object Destructuring

Used to extract values from objects and assign to variables

// Basic object destructuring

const person = { name: "Gillis", age: 29, country: "Cameroon" };

const { name, age, country } = person;

console.log(name); // Output: "Gillis"
console.log(age); // Output: 29
console.log(country); // Output: "Cameroon"

// Renaming variables

const user = { username: "gillis", email: "me@codewithgillis.com" };

const { username: userName, email: userEmail } = user;

console.log(userName); // Output: "gillis"
console.log(userEmail); // Output: "me@codewithgillis.com"


// Setting default values

const product = { title: "Laptop", price: 1000 };

const { title, price, stock = "Out of Stock" } = product;

console.log(stock); // Output: "Out of Stock"

Destructuring in Function Parameters

It can also be used directly in function parameters

function displayUser({ name, age }) {
    console.log(`User: ${name}, Age: ${age}`);
}

const user = { name: "Alice", age: 30, location: "New York" };
displayUser(user); // Output: User: Alice, Age: 30

The above concepts are widely used in react when working with props and states in function components

function UserProfile({ name, age, location }) {
    const [visits, setVisits] = useState(0); // Destructuring useState
    return (
        
            {name}
            Age: {age}
            Location: {location}
            Visits: {visits}
        
    );
}

// Usage
;

Template Literals

Template literals (also called template strings) are a feature in JavaScript that allow you to create strings more efficiently using backticks `, instead of regular quotes (' or "). They also enable string interpolation, multiline strings, and embedded expressions.

const name = "John";
const greeting = `Hello, ${name}!`;

console.log(greeting); // Output: Hello, John!

In react, we use template literals extensively in several cases

Easier JSX and String Handling

const name = "React";
return {`Welcome to ${name}!`};

Dynamic Class Names in JSX

const isActive = true;
return Click me;

Improved Readability in Styled Components

const StyledButton = styled.button`
    background: ${props => (props.primary ? "blue" : "gray")};
    color: white;
`;

Simplifying API Calls and URLs

const userId = 123;
fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(data => console.log(data));

Conclusion

Learning these JavaScript features before React ensures:
✅ Better state & prop management (Destructuring)
✅ Simpler dynamic UI updates (map, filter, slice, splice)
✅ Efficient styling & string manipulation (Template Literals)
✅ More concise and readable functions (Arrow Functions)
✅ Clean & readable React code

By mastering these, transitioning to React will be much smoother and more intuitive! 🚀

Build An Interactive NoteBook application Using Django, React and tailwind

Sone GIllis — Tue, 11 Jun 2024 10:08:54 GMT

In this article we'll be building a responsive notebook application with Django, React and Tailwind CSS. The design inspiration is gotten from dribble

Let's have a preview of our notebook application on mobile and desktop

Backend

Create the django project

django-admin startproject notebook
python manage.py startapp core

Create the Note model

# core/models.py

from django.db import models
from django.conf import settings


class Note(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    note = models.JSONField()
    date_created = models.DateTimeField(auto_now_add=True)
    date_updated = models.DateTimeField(auto_now=True)

Create the Note Serializer

# core/serializers.py

from rest_framework.serializers import ModelSerializer
from .models import Note


class NoteSerializer(ModelSerializer):
    class Meta:
        model = Note
        exclude = ['user']

    def create(self, validated_data):
        return Note.objects.create(user=self.context['request'].user, **validated_data)

Create the View Class

# core/views.py

from rest_framework.generics import ListCreateAPIView, GenericAPIView
from rest_framework.permissions import IsAuthenticated
from rest_framework.mixins import UpdateModelMixin, DestroyModelMixin

from .searializers import NoteSerializer
from .models import Note


class NoteView(ListCreateAPIView, UpdateModelMixin, DestroyModelMixin):
    serializer_class = NoteSerializer
    queryset = Note.objects.all()
    permission_classes = [IsAuthenticated]

    def get_serializer_context(self):
        return {'request': self.request}

    def delete(self, request, *args, **kwargs):
        return self.destroy(request, *args, **kwargs)

    def put(self, request, *args, **kwargs):
        return self.update(request, *args, **kwargs)

Create the URL routes

# notebook/urls.py

from django.contrib import admin
from django.urls import path, include
from core.views import NoteView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api-auth/', include('rest_framework.urls')),
    path('api/v1/note', NoteView.as_view(), name='note'),
    path('api/v1/note/', NoteView.as_view(), name='note')
]

For the sake of this tutorial, we'll be using session authentication. So to be authenticated, we'll create a super user via the Django CLI and use it to login to the admin. This way we will establish a session with the backend and we can use that to make authenticated API calls to the backend from the frontend

Next, we'll run db migrations

python manage.py migrate

Then we create a superuser and login from the admin URL http://localhost:8000 to have a session established in the browser so our API calls will be authenticated

# Create a superuser
python manage.py createsupseruser

Start the django server

python manage.py runserver

Frontend

Now that we have the notebook backend API application, we can go ahead to build the react application

Create the React app

npx create-react-app notebook

Install the necessary libraries we'll be using in this project

npm install @editorjs/editorjs @editorjs/header react-spinners react-toastify

Install and initialize tailwind CSS

npm install -D tailwindcss

npx tailwindcss init

Copy and paste the following code in the tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: ({ colors }) => ({
        primary: {
          100: '#24A0ED',
          200: '#0086D0',
        },
        secondary: {
          100: '#E2E2D5',
          200: '#888883',
        },
        dark: {
          100: '#343434',
          200: '#28282B',
          300: '#1B1212',
        },
      }),
      fontFamily: {
        body: ['Poppins'],
      },
    },
  },
  plugins: [],
};

Create API Utilities

// src/api/endpoints.js

export const endpoints = {
  ADD_NOTE: '/api/v1/note',
  EDIT_NOTE: (id) => `/api/v1/note/${id}`,
  GET_NOTES: '/api/v1/note',
};

export const getUrl = (path) => {
  return process.env.REACT_APP_API_URL + path;
};

# src/api/notes.js

import { endpoints, getUrl } from './endpoints';

function getCookie(cName) {
  const name = cName + '=';
  const cDecoded = decodeURIComponent(document.cookie); //to be careful
  const cArr = cDecoded.split('; ');
  let res;
  cArr.forEach((val) => {
    if (val.indexOf(name) === 0) res = val.substring(name.length);
  });
  return res;
}

export function addNote(note, successCb, errorCb) {
  return fetch(getUrl(endpoints.ADD_NOTE), {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFTOKEN': getCookie('csrftoken'),
    },
    body: JSON.stringify(note),
  })
    .then(successCb)
    .catch(errorCb);
}

export function editNote(id, note, successCb, errorCb) {
  return fetch(getUrl(endpoints.EDIT_NOTE(id)), {
    method: 'PUT',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFTOKEN': getCookie('csrftoken'),
    },
    body: JSON.stringify({
      note,
    }),
  })
    .then(successCb)
    .catch(errorCb);
}

export function deleteNote(id, successCb, errorCb) {
  return fetch(getUrl(endpoints.EDIT_NOTE(id)), {
    method: 'DELETE',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFTOKEN': getCookie('csrftoken'),
    },
  })
    .then(successCb)
    .catch(errorCb);
}

export function getNotes(successCb, errorCb) {
  fetch(getUrl(endpoints.GET_NOTES), {
    method: 'GET',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then(successCb)
    .catch(errorCb);
}

Create the Notification Component

We'll be using this component to notify the user of the app state when we make API calls. For example when we get success response after creating, editing or deleting a note.

We'll wrap the ToastContainer from react-toastify and create wrapper functions that we will use to notify success and error messages

// src/components/Notification/Notification.jsx

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Notification = () => {
  return (
    
  );
};

export const notifySuccess = (message) => {
  toast.success(message);
};

export const notifyError = (message) => {
  toast.error(message);
};

export default Notification;

Create the Loading Button Component

We'll use this component as our submit button that will show a loader when clicked and remove the loader when the async click handler passed to it as prop completes

// src/components/LoadingButton/LoadingButton.jsx

import React, { useState } from 'react';
import { ClipLoader } from 'react-spinners';

const LoadingButton = ({ onClick, className, children }) => {
  const [loading, setLoading] = useState(false);
  const handleClick = async () => {
    setLoading(true);
    try {
      await onClick();
    } finally {
      setLoading(false);
    }
  };

  return (
    
  );
};

export default LoadingButton;

Create the Editor Component

Here we'll be using editor.js as the editor library for creating, editing and viewing our notes

// src/components/Editor/Editor.jsx

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';

import { useEffect, useRef } from 'react';
import LoadingButton from '../LoadingButton/LoadingButton';
import { notifyError } from '../Notification/Notification';

// Let the start of new not be a header with 'Your title'
const DEFAULT_INITIAL_DATA = {
  time: new Date().getTime(),
  blocks: [
    {
      type: 'header',
      data: {
        text: 'Your title',
        level: 1,
      },
    },
  ],
};

const Editor = ({ handleClose, handleSave, note }) => {
  const ejInstance = useRef();
  useEffect(() => {
    if (!ejInstance.current) {
      initEditor();
    }
    return () => {
      ejInstance?.current?.destroy();
      ejInstance.current = null;
    };
  });

  const saveNote = async () => {
    const outputData = await ejInstance.current.save();
    if (outputData.blocks.length) {
      if (outputData.blocks[0].type !== 'header') {
        outputData.blocks.unshift({
          type: 'header',
          data: {
            text: 'No title',
            level: 1,
          },
        });
      }
    } else {
      notifyError('Error!!! Cannot Save, Notes is empty');
    }
    await handleSave(outputData);
  };

  const initEditor = () => {
    const editor = new EditorJS({
      holder: 'editorjs',
      onReady: () => {
        ejInstance.current = editor;
      },
      autofocus: true,
      data: note ? note : DEFAULT_INITIAL_DATA,
      placeholder: 'Tell a Story',
      tools: {
        header: {
          class: Header,
          config: {
            levels: [1, 2, 3, 4],
            defaultLevel: 3,
          },
        },
      },
    });
  };

  return (
    <>
      
        
          
          
            
          
          
            
              Submit
            
          
        
      
    
  );
};

export default Editor;

From the above, we have a saveNote function that checks to ensure your note has a header. If no header is present, It adds a default header with text No Title

Create the NoteCard Component

This component will be a card that will show the note header and text. It'll also present action buttons for editing and deleting the note

This component expects the note as an object with a header and body. So we create a utility that will parse the note object and return an object with a header and a body that can be used by this component

// src/helpers/utils.js

export function getNotesPlainTextFromBlocks(blocks) {
  let header = '';
  let body = '';
  if (blocks?.length > 0) {
    if (blocks[0].type === 'header') {
      header = blocks[0].data.text;
    } else {
      body = blocks[0].data.text;
    }
  }
  if (!body && blocks?.length > 1) {
    body = blocks[1].data.text;
  }
  return {
    header,
    body,
  };
}

Then we create the NoteCard component.

//src/components/NoteCard/NoteCard.jsx

import { useEffect, useState } from 'react';
import { getNotesPlainTextFromBlocks } from '../../helpers/utils';

const NoteCard = ({ handleDelete, handleEdit, note, onClick }) => {
  const [showAction, setShowAction] = useState(false);
  let [formattedNote, setFormattedNote] = useState({
    header: '',
    body: '',
  });
  useEffect(() => {
    setFormattedNote(getNotesPlainTextFromBlocks(note.blocks));
  }, [note]);
  const handleAction = (event, handler) => {
    event.stopPropagation();
    handler();
  };

  const actionPopOverClickHandler = (event) => {
    event.stopPropagation();
    setShowAction(!showAction);
  };

  return (
    
      
        
          {formattedNote?.header ? formattedNote.header : 'No title'}
        
        
          
          {showAction && (
            
               handleAction(event, handleEdit)}
              >
                
                Edit
              
               handleAction(event, handleDelete)}
                className="text-red-500 flex items-center mt-3"
              >
                
                Delete
              
            
          )}
        
      
      
        {formattedNote.body}
      
    
  );
};

export default NoteCard;

Create the Home Page

Here we get the notes from the backend on page load. We also handle the deleting, editing and deleting actions of the note

// src/pages/Home/Home.jsx

import './Home.css';
import NoteCard from '../../components/NoteCard/NoteCard';
import Editor from '../../components/Editor/Editor';
import { useEffect, useState } from 'react';
import { addNote, editNote, deleteNote, getNotes } from '../../api/notes';
import Notification, {
  notifyError,
  notifySuccess,
} from '../../components/Notification/Notification';

const Home = () => {
  const [showEditor, setShowEditor] = useState(false);
  const [selectedNote, setSelectedNote] = useState();
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    getNotes(async (response) => {
      const data = await response.json();
      setNotes(data.results);
    });
  }, []);
  const handleEdit = (note) => {
    setSelectedNote(note);
    setShowEditor(true);
  };

  const handleDelete = (note) => {
    deleteNote(
      note.id,
      (_) => {
        setNotes([...notes.filter((_note) => _note.id !== note.id)]);
        notifySuccess(`Success!!! Deleted Note ${note.id}`);
      },
      (error) => notifyError('Something Went Wrong!!!')
    );
  };

  const handleNewNote = () => {
    setSelectedNote(null);
    setShowEditor(true);
  };

  const handleSave = async (data) => {
    let response;

    if (selectedNote) {
      editNote(
        selectedNote.id,
        data,
        async (response) => {
          const edittedNote = await response.json();
          const updatedNotes = notes.map((note) =>
            note.id === selectedNote.id ? edittedNote : note
          );
          setNotes([...updatedNotes]);
          notifySuccess('Success!!! Edited Note successfully');
        },
        (error) => notifyError('Something Went Wrong')
      ).finally(() => setShowEditor(false));
    } else {
      addNote({ note: data }, async (response) => {
        const newNote = await response.json();
        setNotes([...notes, newNote]);
        notifySuccess('Success!!! Saved Note successfully');
      }).finally(() => setShowEditor(false));
    }
    return response;
  };

  return (
    <>
      
      
        
          Notes
          
            
          
        
        
          {notes.map((note) => (
            
               handleEdit(note)}
                handleEdit={() => handleEdit(note)}
                handleDelete={() => handleDelete(note)}
              >
            
          ))}
          {showEditor && (
             setShowEditor(false)}
              handleSave={async (note) => await handleSave(note)}
            >
          )}
        
      
    
  );
};

export default Home;

Next, run the application

npm run start

Improvements

Add note update date to the NoteCard
Paginate Notes display in the Home Page
Include a Sort button to sort the notes by date in the Home Page
Include Notes Drafts

You can find the complete source codes on github:

GitHub - sonegillis/notebook-backend: A notebook application API

A notebook application API. Contribute to sonegillis/notebook-backend development by creating an account on GitHub.

GitHubsonegillis

GitHub - sonegillis/notebook-frontend: Interactive NoteBook application with React and Tailwind CSS

Interactive NoteBook application with React and Tailwind CSS - sonegillis/notebook-frontend

GitHubsonegillis

Building a Tooltip Component with React Hooks

Sone GIllis — Sat, 01 Jun 2024 23:55:45 GMT

A tooltip is a message that is positioned relative to an element on a Graphical User Interface. In this project we will be building a controlled tooltip component with React hooks.

Our tooltip component will by default display the tooltip on hover on the element. We will also be able to control when we open and close the tooltip, and the direction (TOP, BOTTOM, LEFT, RIGHT, TOP RIGHT, TOP LEFT, BOTTOM LEFT, BOTTOM RIGHT) to which we would display the tooltip relative to the element.

Let's have a preview of our demo react app showcasing our tooltip component

Prerequisites:

Create a tooltip component (Tooltip) that will wrap the element and the content of the tooltip message
Create a tooltip content component (TooltipContent) that will wrap the actual tooltip message
Create a tooltip service class (TooltipService) that will control positioning of the tooltip message
Create a tooltip hook (useTooltip) that will expose methods to open and close the tooltip message with the help of TooltipService

Creating the React Project for Demo

Step 1: Create the react project to demo the tooltip component we will build

npx create-react-app tooltip-demo

cd tooltip-demo

Step 2: Create the Tooltip components, hooks and services in a components directory

Here is how the project structure should look like

Step 3: Let's Create the tooltip service (TooltipService) with the following code

// TooltipService.js

export const Position  = {
  TOP: 0,
  TOP_RIGHT: 1,
  RIGHT: 2,
  BOTTOM_RIGHT: 3,
  BOTTOM: 4,
  BOTTOM_LEFT: 5,
  LEFT: 6,
  TOP_LEFT: 7,
}

class TooltipService {
    static POSTION_GAP = 5;

    static getTooltipPosition (tooltipEl, position) {
        const elRect = tooltipEl.getBoundingClientRect();
        const containerElRect = tooltipEl.parentElement.getBoundingClientRect();

        const defaultPosition = {
            bottom: -1 * (containerElRect.height + this.POSTION_GAP),
            left: '0'
        }

        if (position === Position.TOP) {
          return {
            top: -1 * (elRect.height + this.POSTION_GAP),
            left: '0'
          }
        } else if (position === Position.TOP_RIGHT) {
          return {
            top: -1 * (elRect.height + this.POSTION_GAP),
            right: -1 * (elRect.width + this.POSTION_GAP)
          }
        } else if (position === Position.BOTTOM_RIGHT) {
          return {
            bottom: -1 * (containerElRect.height + this.POSTION_GAP),
            right: -1 * (elRect.width + this.POSTION_GAP)
          }
        } else if (position === Position.BOTTOM_LEFT) {
          return {
            bottom: -1 * (containerElRect.height + this.POSTION_GAP),
            left:  -1 * (elRect.width + this.POSTION_GAP)
          }
        } else if (position === Position.TOP_LEFT) {
          return {
            top: -1 * (elRect.height + this.POSTION_GAP),
            left: -1 * (elRect.width + this.POSTION_GAP)
          }
        } else if (position === Position.LEFT) {
          return {
            top: '0',
            left: -1 * (elRect.width + this.POSTION_GAP)
          }
        } else if (position === Position.RIGHT) {
          return {
            top: '0',
            right: -1 * (elRect.width + this.POSTION_GAP)
          }
        } else {
          return defaultPosition;
        }
    }
}

export default TooltipService

The above class exposes a static field (POSITION_GAP) to determine by how much distance in px the tooltip message should be away from the element and a static method (getTooltipPosition) that receive a reference to the tooltip message element and the expected display position to determine the position where we will display tooltip message
For readability and maintainability, we have exported a Position object that self explains the direction to which we want the tooltip message displayed

Step 4: Let's create the tooltip hook (useTooltip) that will help expose methods for opening and closing the tooltip message

// useTooltip.js

import TooltipService, { Position } from './TooltipService';

const hideTooltip = (tooltipEl) => {
    tooltipEl.classList.add('hide');
    tooltipEl.classList.remove('show');
}

const showTooltip = (tooltipEl) => {
    tooltipEl.classList.add('show');
    tooltipEl.classList.remove('hide');
}

const useTooltip = () => {
    const renderTooltip = (tooltipRef, isOpen, position) => {        
        if (isOpen) {
            const tooltipPosition = TooltipService.getTooltipPosition(tooltipRef.current, position ? position : Position.TOP);
            if (tooltipPosition.top) {
                tooltipRef.current.style.top = `${tooltipPosition.top}px`;
                tooltipRef.current.style.bottom = null;
            } 
            if (tooltipPosition.left) {
                tooltipRef.current.style.left = `${tooltipPosition.left}px`;
                tooltipRef.current.style.right = null;
            }
            if (tooltipPosition.right) {
                tooltipRef.current.style.right = `${tooltipPosition.right}px`;
                tooltipRef.current.style.left = null;
            }
            if (tooltipPosition.bottom) {
                tooltipRef.current.style.bottom = `${tooltipPosition.bottom}px`;
                tooltipRef.current.style.top = null;
            }
            showTooltip(tooltipRef.current)
        } else {
            hideTooltip(tooltipRef.current)
        }
    }
    return (elementRef) => {
        return {
            open: (position) => renderTooltip(elementRef, true, position),
            close: () => renderTooltip(elementRef, false)
        }
    }

}

export default useTooltip

Step 5: Let's create the tooltip component (Tooltip) and the tooltip content component (TooltipContent)

The tooltip component will wrap the element that requires a tooltip display while the TooltipContent will display the tooltip message passed to the Tooltip component

// TooltipContent.jsx

import React, { forwardRef } from "react";
import "./Tooltip.css";

const TooltipContent = forwardRef((props, ref) => {
    return (
        <>
            
                {React.isValidElement(props.content)
                    ? props.content 
                    : {props.content}}
            
        )
})

export default TooltipContent;

// Tooltip.jsx
import React, { forwardRef, useRef } from "react";
import "./Tooltip.css"
import TooltipContent from "./TooltipContent";
import { Position } from "./TooltipService";
import useTooltip from "./useTooltip";

const Tooltip = forwardRef(({content, position, children}, ref) => {
    const elRef = useRef();
    const tooltip = useTooltip();
    const handleMouseEnter = () => {
        tooltip(ref).open(position)
    }
    const handleMouseLeave = () => {
        tooltip(ref).close();
    }
    return (
        
            
                {children}
            
            
        
    )
})

export default Tooltip;

/* Tooltip.css */

.container {
    position: relative;
    width: fit-content;
}

.tooltip-wrapper {
    position: absolute;
    width: max-content;
}

.tooltip-wrapper.show {
    visibility: '';
}

.tooltip-wrapper.hide {
    visibility: hidden;
}

.content-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.8rem;
    color: #fff;
    width: fit-content;
    padding: 8px;
    border-radius: 4px; 
}

Final Step: Let's update the App.js file to use our tooltip component and utilities to demonstrate
We will use a select field to change the direction to which we want to display the tooltip message relative to the element

// App.js

import Tooltip from './components/Tooltip';
import './App.css';
import { useRef, useState } from 'react';
import { Position } from './components/Tooltip';
import useTooltip from './components/Tooltip/useTooltip';

function App() {

  const tooltip = useTooltip();
  const tooltipEl = useRef();
  const [position, setPosition] = useState(Position.TOP);

  const handleChange = (event) => {
    setPosition(+event.target.value);
  }
  return (
    
      Hello!! I am a tooltip message.}>
         TOOLTIP DEMO
      
      
        
        
      
    
  );
}

export default App;

Start the react project

npm run start

You can find the complete project on github

Reactive forms with React hooks and typescript

Sone GIllis — Tue, 28 May 2024 23:15:41 GMT

You've probably been writing react apps that require you to create forms and collect user inputs, validate them and submit. You may have used libraries like formik to build even more complex forms easily. In this article, we'll be learning how to use react hooks and typescript to build our own reactive forms. This will teach you the power of react hooks and creating your own custom hooks.

For easy follow up to this article, you'll be expected to be able to

Build basic apps with react and typescript
Use basic react inbuilt hooks like useEffect and useState

Enough of the talking, let's get coding. We'll be building a reactive form in react with custom react hooks and and apply this to a registration form. Our custom hook will return validation results that we can use in our form to be able display error messages or take actions. The following below will show you how our reactive form behaves to user interaction

Before we proceed to the implementation, let's see how we'll be using our form validator library in a form component for validation

const {
    inputFields,
    inputFieldsErrorMsgs,
    handleChange,
    formRef,
    isValid,
  }: useFormResult = useForm({
    fullName: ['', [Validators.validateRequired()]],
    company: [''],
    username: [
      '',
      [Validators.validateRequired()],
      [asyncValidateUsername('User with username already exists')],
    ],
    email: ['', [Validators.validateRequired(), Validators.validateEmail()]],
    password: ['', [Validators.validateRequired()]],
  });

Our custom hook returns the following that can be used within the form reactively:

inputFields: An object of the input fields and their status
inputFieldsErrorMsgs: An object of the input fields and the error messages if any
handleChange: A function that'll be added to the change handler of each input field
formRef: Reference to the form element
isValid: boolean that indicates if the form is valid or not

It also takes in as input the different form fields, the default values and the synchronous and asynchronous validator functions

We'll create a Validator.ts file containing a validator class with default validators including validateRequired, validateEmail, validateUsername Our validator functions will be higher order functions taking an error message as argument and returning a function of type ValidatorFn that takes in the form input value as argument and returns a ValidationResult type.

Our Validator.ts file will look like this with our default validators

export interface ValidationResult {
    error: boolean;
    msg: string;
}

export interface ValidationFn {
    (msg: string): ValidationResult;
}

export interface AsyncValidatorFn {
    (msg: string): Promise
}

export class Validators {
    static validateRequired(msg = "This field is required"): ValidationFn {
        return (value: string): ValidationResult  => {
            return {
                error: !value,
                msg
            }
        };
    }

    static validateEmail(msg = "Email is not valid"): ValidationFn {
        return (value: string): ValidationResult => {
            const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            return {
                error: !regex.test(value),
                msg,
            };
        };
    }

    static validateUsername(msg = "Username is not valid"): ValidationFn {
        return (value: string): ValidationResult => {
            const regex = /^[-a-zA-Z0-9_]{2,30}$/;
            return {
                error: !regex.test(value),
                msg,
            };
        };
    }
}

Also notice we have a AsyncValidatorFn type in case we need to implement an asynchronous validator. Users of validator functionality can implement custom validators of type ValidatorFn and AsyncValidatorFn

We'll then create a custom hook called useForm in a file useForm.ts. Let's declare a type for our hook as shown

export interface useFormResult {
  inputFields: Record;
  setInputFields: (newState: Record) => void;
  inputFieldsErrorMsgs: Record;
  setInputFieldsErrorMsgs: (newState: Record) => void;
  handleChange: (e: FormEvent) => void;
  formRef: RefObject;
  isValid: boolean;
}

export type useFormType = (
  validations: Record
) => useFormResult;

Next we'll initialize the form input elements, error messages and reference to the form


const initializeInputFields = (
  validations: Record
) => {
  const fields: Record = {};
  const fieldsErrorMsgs: Record = {};
  Object.keys(validations).forEach((key) => {
    fieldsErrorMsgs[key] = [];
    fields[key] = {
      dirty: false,
      touched: false,
      value: validations[key][0],
      valid: !(!!validations[key][1]?.length || !!validations[key][2]?.length),
    };
  });
  return { fields, fieldsErrorMsgs };
};

const useForm: useFormType = (
  validations: Record
) => {
  const { fields, fieldsErrorMsgs } = initializeInputFields(validations);
  const [inputFields, setInputFields] =
    useState>(fields);
  const [inputFieldsErrorMsgs, setInputFieldsErrorMsgs] =
    useState>(fieldsErrorMsgs);
  const [isValid, setIsValid] = useState(false);
  const formRef: RefObject = useRef(null);
  }

We'll use the useEffect hook to add focus event listeners to the input elements. This is to ensure we know when the input element has been touched.

useEffect(() => {
    const formEl = formRef.current;
    Object.keys(validations).forEach((key) => {
      const inputEl = formEl?.querySelector(
        `[name="${key}"]`
      ) as HTMLInputElement;
      inputEl?.addEventListener('focus', async () => {
        const validationResult = validateField(key, inputEl.value);
        updateFieldsAfterValidation(key, validationResult, 'focus');
        const asyncValidationResult = await asyncValidateField(
          key,
          inputEl.value
        );
        if (asyncValidationResult.length) {
          updateFieldsAfterValidation(
            key,
            [...asyncValidationResult, ...validationResult],
            'focus'
          );
        }

        return;
      });
    });
  const updateFieldsAfterValidation = (
    key: string,
    validationResult: string[],
    event: 'focus' | 'change'
  ) => {
    validationResult = Array.from(new Set(validationResult));
    setInputFieldsErrorMsgs((_inputFieldsErrorMsgs) => ({
      ..._inputFieldsErrorMsgs,
      [key]: validationResult,
    }));
    setInputFields((_inputFields) => {
      const validArr = Object.entries(_inputFields).map(([_key, value]) => {
        return key === _key ? validationResult.length === 0 : value.valid;
      });
      setIsValid(!validArr.some((valid) => valid === false));
      return {
        ..._inputFields,
        [key]: {
          ..._inputFields[key],
          touched: event === 'focus' ? true : _inputFields[key].touched,
          dirty: event === 'change' ? true : _inputFields[key].dirty,
          valid: validationResult.length === 0,
        },
      };
    });
  };

  const validateField = (name: string, value: string): string[] => {
    const fieldErrors: string[] = [];
    const fieldValidations = validations[name];
    if (fieldValidations.length > 1) {
      fieldValidations[1]?.forEach((validate) => {
        const validateErr = validate(value) as ValidationResult;
        if (validateErr.error) {
          fieldErrors.push(validateErr.msg);
        }
      });
    }
    return fieldErrors;
  };

  const asyncValidateField = async (
    name: string,
    value: string
  ): Promise => {
    const fieldErrors: string[] = [];
    const fieldValidations = validations[name];

    if (fieldValidations.length > 2) {
      const aysncFieldValidations = fieldValidations[2]
        ? fieldValidations[2].map(async (validate) => validate(value))
        : [];
      const asyncValidationResults = await Promise.all(aysncFieldValidations);
      asyncValidationResults.forEach((validateErr: ValidationResult) => {
        if (validateErr.error) {
          fieldErrors.push((validateErr as ValidationResult).msg);
        }
      });
    }
    return fieldErrors;
  };

We use the validateField function to call the synchronous validator functions registered for that input field and asyncValidateField function to call asynchronous validator functions registered for that input field. An example case where we will want to apply asynchronous validation is in a case where we want to make an API call to verify if a username already exists.

Next let's create the onChange handler function

const handleChange = async (e: FormEvent) => {
    const { name, value } = e.currentTarget;
    setInputFields((_inputFields) => ({
      ..._inputFields,
      [name]: {
        ..._inputFields[name],
        value,
        dirty: true,
      },
    }));
    const validationResult = validateField(name, value);
    updateFieldsAfterValidation(name, validationResult, 'change');
    const asyncValidationResult = await asyncValidateField(name, value);
    if (asyncValidationResult.length) {
      updateFieldsAfterValidation(
        name,
        [...asyncValidationResult, ...validationResult],
        'change'
      );
    }
  };

import { FormEvent, RefObject, useEffect, useRef, useState } from 'react';
import { AsyncValidatorFn, ValidationFn, ValidationResult } from './Validators';

export interface Interaction {
  touched: boolean;
  dirty: boolean;
  valid: boolean;
  value: string;
}

export interface useFormResult {
  inputFields: Record;
  setInputFields: (newState: Record) => void;
  inputFieldsErrorMsgs: Record;
  setInputFieldsErrorMsgs: (newState: Record) => void;
  handleChange: (e: FormEvent) => void;
  formRef: RefObject;
  isValid: boolean;
}

const initializeInputFields = (
  validations: Record
) => {
  const fields: Record = {};
  const fieldsErrorMsgs: Record = {};
  Object.keys(validations).forEach((key) => {
    fieldsErrorMsgs[key] = [];
    fields[key] = {
      dirty: false,
      touched: false,
      value: validations[key][0],
      valid: !(!!validations[key][1]?.length || !!validations[key][2]?.length),
    };
  });
  return { fields, fieldsErrorMsgs };
};

export type useFormType = (
  validations: Record
) => useFormResult;

const useForm: useFormType = (
  validations: Record
) => {
  const { fields, fieldsErrorMsgs } = initializeInputFields(validations);
  const [inputFields, setInputFields] =
    useState>(fields);
  const [inputFieldsErrorMsgs, setInputFieldsErrorMsgs] =
    useState>(fieldsErrorMsgs);
  const [isValid, setIsValid] = useState(false);
  const formRef: RefObject = useRef(null);

  useEffect(() => {
    const formEl = formRef.current;
    Object.keys(validations).forEach((key) => {
      const inputEl = formEl?.querySelector(
        `[name="${key}"]`
      ) as HTMLInputElement;
      inputEl?.addEventListener('focus', async () => {
        const validationResult = validateField(key, inputEl.value);
        updateFieldsAfterValidation(key, validationResult, 'focus');
        const asyncValidationResult = await asyncValidateField(
          key,
          inputEl.value
        );
        if (asyncValidationResult.length) {
          updateFieldsAfterValidation(
            key,
            [...asyncValidationResult, ...validationResult],
            'focus'
          );
        }

        return;
      });
    });

    return () => {
      Object.keys(validations).forEach((key) => {
        formEl
          ?.querySelector(`[name="${key}"]`)
          ?.removeEventListener('focus', () => {});
      });
    };
  }, []);

  const updateFieldsAfterValidation = (
    key: string,
    validationResult: string[],
    event: 'focus' | 'change'
  ) => {
    validationResult = Array.from(new Set(validationResult));
    setInputFieldsErrorMsgs((_inputFieldsErrorMsgs) => ({
      ..._inputFieldsErrorMsgs,
      [key]: validationResult,
    }));
    setInputFields((_inputFields) => {
      const validArr = Object.entries(_inputFields).map(([_key, value]) => {
        return key === _key ? validationResult.length === 0 : value.valid;
      });
      setIsValid(!validArr.some((valid) => valid === false));
      return {
        ..._inputFields,
        [key]: {
          ..._inputFields[key],
          touched: event === 'focus' ? true : _inputFields[key].touched,
          dirty: event === 'change' ? true : _inputFields[key].dirty,
          valid: validationResult.length === 0,
        },
      };
    });
  };

  const validateField = (name: string, value: string): string[] => {
    const fieldErrors: string[] = [];
    const fieldValidations = validations[name];
    if (fieldValidations.length > 1) {
      fieldValidations[1]?.forEach((validate) => {
        const validateErr = validate(value) as ValidationResult;
        if (validateErr.error) {
          fieldErrors.push(validateErr.msg);
        }
      });
    }
    return fieldErrors;
  };

  const asyncValidateField = async (
    name: string,
    value: string
  ): Promise => {
    const fieldErrors: string[] = [];
    const fieldValidations = validations[name];

    if (fieldValidations.length > 2) {
      const aysncFieldValidations = fieldValidations[2]
        ? fieldValidations[2].map(async (validate) => validate(value))
        : [];
      const asyncValidationResults = await Promise.all(aysncFieldValidations);
      asyncValidationResults.forEach((validateErr: ValidationResult) => {
        if (validateErr.error) {
          fieldErrors.push((validateErr as ValidationResult).msg);
        }
      });
    }
    return fieldErrors;
  };

  const handleChange = async (e: FormEvent) => {
    const { name, value } = e.currentTarget;
    setInputFields((_inputFields) => ({
      ..._inputFields,
      [name]: {
        ..._inputFields[name],
        value,
        dirty: true,
      },
    }));
    const validationResult = validateField(name, value);
    updateFieldsAfterValidation(name, validationResult, 'change');
    const asyncValidationResult = await asyncValidateField(name, value);
    if (asyncValidationResult.length) {
      updateFieldsAfterValidation(
        name,
        [...asyncValidationResult, ...validationResult],
        'change'
      );
    }
  };

  return {
    inputFields,
    setInputFields,
    inputFieldsErrorMsgs,
    setInputFieldsErrorMsgs,
    handleChange,
    formRef,
    isValid,
  };
};

export default useForm;

Now let's see how we can use this to create a reactive registration form. Our registration form component should look like

import React, { FormEvent, useEffect } from 'react';
import './RegistrationForm.css'; // Import your CSS file for styling
import useForm, { useFormResult } from '../ReactiveForm/useForm';
import {
  AsyncValidatorFn,
  ValidationResult,
  Validators,
} from '../ReactiveForm/Validators';

const existingUsers = [
  'pixelpioneer',
  'techtraveler',
  'codecrafter',
  'digitaldreamer',
  'bytebuilder',
  'nerdynavigator',
  'geekyguru',
  'circuitsage',
  'binaryboss',
  'techietitan',
];

const asyncValidateUsername = (msg: string): AsyncValidatorFn => {
  return (value: string): Promise => {
    return new Promise((resolve, reject) => {
      setTimeout(
        () => resolve({ error: existingUsers.includes(value), msg }),
        2000
      );
    });
  };
};

const RegistrationForm = () => {
  const {
    inputFields,
    inputFieldsErrorMsgs,
    handleChange,
    formRef,
    isValid,
  }: useFormResult = useForm({
    fullName: ['', [Validators.validateRequired()]],
    company: [''],
    username: [
      '',
      [Validators.validateRequired()],
      [asyncValidateUsername('User with username already exists')],
    ],
    email: ['', [Validators.validateRequired(), Validators.validateEmail()]],
    password: ['', [Validators.validateRequired()]],
  });

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

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
  };

  return (
    
      {/* {JSON.stringify(inputFields)}
      {JSON.stringify(inputFieldsErrorMsgs)}
      {JSON.stringify(isValid)} */}
      Register
      
        
          
          {inputFields?.fullName?.touched && !inputFields?.fullName?.valid && (
            
              {inputFieldsErrorMsgs?.fullName.map((error) => (
                {error}
              ))}
            
          )}
        
        
          
          {inputFields?.company?.touched && !inputFields?.company?.valid && (
            
              {inputFieldsErrorMsgs?.company.map((error) => (
                {error}
              ))}
            
          )}
        
        
          
          {inputFields?.email?.touched && !inputFields?.email?.valid && (
            
              {inputFieldsErrorMsgs?.email.map((error) => (
                {error}
              ))}
            
          )}
        
        
          
          {inputFields?.username?.touched && !inputFields?.username?.valid && (
            
              {inputFieldsErrorMsgs?.username.map((error) => (
                {error}
              ))}
            
          )}
        
        
          
          {inputFields?.password?.touched && !inputFields?.password?.valid && (
            
              {inputFieldsErrorMsgs?.password.map((error) => (
                {error}
              ))}
            
          )}
        
        
      
    
  );
};

export default RegistrationForm;

Notice how we have added an asynchronous validator function asyncValidateUsername to simulate an api call that checks from an array of usernames to ensure the inputted username doesn't belong to the list and displays the error accordingly.

You can find the complete project on github

Detect when your android application is idle

Sone GIllis — Mon, 20 May 2024 18:11:22 GMT

Sometime ago, while working on an android project, and I reached a point where I had to detect when my application is idle and perform a certain action. By idle here I mean the user has opened the app but is not interacting with.

What are we going to build?
Let’s assume a bank wanted to give it’s customers the ability to increase their account balances just by clicking a button 😃 (that might never happen, yes I know) and we need to build such an app for them. The user’s balance will reset to 0 if he delays for a period of time without interacting with the app. Simple app right? But remember our goal is to detect when the user has not been interacting with our app for sometime and not to build some fancy application. After this, you will be able to detect idle state of your application. Now enough of the talking. Let’s dive into some concepts and code.

We’ll start by creating a new android project on android studio. Feel free to call it whatever you want. I’ll provide a link to the repo at the end. Next we’ll create an empty activity and call it MainActivity. We’ll then create java class and call it BaseActivity. BaseActivity will be the parent class of all activities. The reason why I did this is because we’ll not want to write code in all our activities where we need to detect idle state of the application.

Let’s add some code to the BaseActivity class.

As you can see I created a method myCustomOnCreate that will be overidden by all child activities inorder to render the layout.

I already created the layout that allows the user add up what he has in account by simply tapping on a button. I have also implemented the java functionality. Remember that’s not purpose of this article so we’ll focus more performing an action when our app is idle. This is a look of our simple app.

We will be using the android Handler class and Runnable interface. Inside the BaseActivity class, let’s create a handler object and pass a runnable object with a timeout to the handlers postDelayed. This will call the run method implementation inside our runnable implementation after timeout has occured. Let’s create a method and call it reactToIdleState. This method will be called inside the run method of the runnable implementation. We will also need to override this method inside all our Activities that extend BaseActivity. That is the method that will be called when the app becomes idle

In the BaseActivity onCreate method, we will initialize our handler and call it’s postDelayed method passing into it the runnable object and the timeout as shown below. This simply means “Call the runnable’s run method after a timeout has reached”.

There are only two ways the user can interact with our app. Either by simple touching the screen or clicking the button to add their balance. So will make our BaseActivity class implement the View.OnClickListener interface and implement it’s onClick method. We will also the override the Activity onTouchEvent. In these two methods we will remove the callback from the handler by calling the removeCallbacks method and passing to it our runnable object, then call the postDelayed method again on the handler object. I have created a method called resetHandler to the job. We will call this method in our onClick and OnTouchEvent methods so every time user touches his screen or clicks the button we re-initialize the post delay.

If you notice, in the onClick method I called a myCustomOnClick method that will be overridden inside all activities that extend BaseActivity and needs to respond to click events. That’s it for the BaseActivity. Now any of our activities can extend our BaseActivity and override the appropriate methods to perform actions on app idleness.

Our MainActivty will do the following

Declare member variables and initialise them in the myCustomOnCreate method.

React to the click events by overriding the BaseActivity myCustomOnClick method.

Override the BaseActivity reactToIdleState method and perform desired action when the app is idle.

That’s it for our app. You can improve on the app functionality. But I would expect you to apply the concept to your own application where you need to know when the user hasn’t been interacting with the app for a while. Any idea about some other approach or questions will be highly welcome in the comment section. I’ll also be pleased if there could be corrections or something to add in the comment section. Here is the link to the complete project https://github.com/sonegillis/idle-state-detect-app. You can clone the project and run on your android device. To know more about Handlers and Runnable you can check out the following links to the google android developer site.
- https://developer.android.com/reference/android/os/Handler
- https://developer.android.com/reference/java/lang/Runnable

Generic Multi-Field Django Model Custom Validation

Sone GIllis — Mon, 20 May 2024 17:40:26 GMT

In this article, you will learn how you can create a generic multi-field model custom validation mechanism for your django projects. By default, django provides a way for you to validate your model fields by passing a list of validator functions to the validators argument. What if we have to apply validations to multiple model fields? For example, in an e-commerce application, say we have to ensure that when a user selects a discount of type percentage, then the discount value should be less than or equal to 100. We will in the following sections, with detailed code and explanations, see how we can do this in Django.

Creating the model

Let’s assume we are implementing a Coupon model that keeps track of coupons we offer to customers. Our coupon model looks like this

class Coupon(models.Model):
    class DiscountTypes(models.TextChoices):
        PERCENTAGE_DISCOUNT = "percentage_discount"
        FIXED_CART_DISCOUNT = "fixed_cart_discount"
        FIXED_PRODUCT_DISCOUNT = "fixed_product_discount"
        BOGO = "bogo", _("BOGO (Buy X GET X/Y) Offer")

    class DisplayIn(models.TextChoices):
        MY_ACCOUNT = "my_account"
        CHECKOUT = "checkout"
        CART = "cart"

    code = models.CharField(max_length=20, unique=True, null=True)
    amount = models.FloatField(default=0)
    start_date = models.DateTimeField(auto_now=True)
    expiry_date = models.DateTimeField()
    free_shipping = models.BooleanField(default=False)
    description = models.TextField(max_length=200)
    discount_type = models.CharField(max_length=40, choices=DiscountTypes.choices)
    apply_automatically = models.BooleanField(default=False)
    display_in = MultiSelectField(max_length=20, max_choices=3, choices=DisplayIn.choices, null=True)
    minimum_spend = models.IntegerField(default=0, null=True)
    maximum_spend = models.IntegerField(default=0, null=True)
    individual_use_only = models.BooleanField(default=False)
    exclude_sale_items = models.BooleanField(default=False)
    email_restrictions = models.TextField(help_text=
                                          "Comma separated list of emails to restrict for access to this coupon",
                                          null=True, blank=True)
    def __str__(self):
        return self.code

The coupon has different discount types including:

Percentage discount
Fixed cart discount
fixed product discount
Bogo discount

Validation

Let’s say we want to ensure that, if an admin creates a percentage discount coupon, the amount field should not be above 100. To make this generic and reusable, let’s create a Validator abstract base class. This is will provide two methods:

register — A class method that will be used to register the fields that we want to validate and the error message that should be shown.

run — An abstract method that will be implemented by child classes to provide the actual validation functionality.

Our Validator abstract base class should look like this:

from abc import ABC, abstractmethod
from django.db import models
import typing as t


class Validator(ABC):
    @classmethod
    def register(cls, fields: t.List[str] = [], message="Model is not valid"):
        cls.fields = fields
        cls.message = message
        return cls()

    @abstractmethod
    def run(self, model: models.Model):
        pass

Now let’s create a mixin called ModelValidationMixin. This will override the clean and the save methods of the django model. It will loop through a validators (a list of Validator implementations) property and check for validation errors. Our ModelValidationMixin should look like this:

class ModelValidationMixin:
    validators: t.List[Validator] = []

    def clean(self):
        for validator in self.validators:
            if not validator.run(self):
                raise ValidationError(validator.message)

    def save(self, *args, **kwargs):
        self.full_clean()
        super(ModelValidationMixin, self).save(*args, **kwargs)

Next, let’s implement a validation class (LessThan100IfPercentageDiscount) which will answer our initial question above — Ensure that if the discount type is percentage_discount, the discount amount inputted should not go above 100.

class LessThan100IfPercentageDiscount(Validator):
    def run(self, model):
        return not (model.discount_type == Coupon.DiscountTypes.PERCENTAGE_DISCOUNT and model.amount > 100.0)

As a bonus let’s also implement another validation class that will ensure that the start_date is never ahead of the expiry_date (LessThanValidator) — Usable for comparing other fields that need a less-than comparism.

class LessThanValidator(Validator):
    def run(self, model: models.Model):
        return getattr(model, self.fields[0]) < getattr(model, self.fields[1])

Let’s wrap it up

To use the above validators, our Coupon model class will then look like:

class Coupon(ModelValidationMixin, models.Model):
    class DiscountTypes(models.TextChoices):
        PERCENTAGE_DISCOUNT = "percentage_discount"
        FIXED_CART_DISCOUNT = "fixed_cart_discount"
        FIXED_PRODUCT_DISCOUNT = "fixed_product_discount"
        BOGO = "bogo", _("BOGO (Buy X GET X/Y) Offer")

    class DisplayIn(models.TextChoices):
        MY_ACCOUNT = "my_account"
        CHECKOUT = "checkout"
        CART = "cart"

    code = models.CharField(max_length=20, unique=True, null=True)
    amount = models.FloatField(default=0)
    start_date = models.DateTimeField(auto_now=True)
    expiry_date = models.DateTimeField()
    free_shipping = models.BooleanField(default=False)
    description = models.TextField(max_length=200)
    discount_type = models.CharField(max_length=40, choices=DiscountTypes.choices)
    apply_automatically = models.BooleanField(default=False)
    display_in = MultiSelectField(max_length=20, max_choices=3, choices=DisplayIn.choices, null=True)
    minimum_spend = models.IntegerField(default=0, null=True)
    maximum_spend = models.IntegerField(default=0, null=True)
    individual_use_only = models.BooleanField(default=False)
    exclude_sale_items = models.BooleanField(default=False)
    email_restrictions = models.TextField(help_text=
                                          "Comma separated list of emails to restrict for access to this coupon",
                                          null=True, blank=True)
    validators = [
        LessThanValidator.register(["start_date", "expiry_date"],
                                   message={"expiry_date": "Should be greater than start date"}),
        LessThan100IfPercentageDiscount.register(message={"amount": "Amount should be less that 100 if coupon type is"
                                                                    "percentage_discount"})
    ]

    def __str__(self):
        return self.code

After running this, in the django admin interface, you’ll notice an error that appears while trying to input a discount amount of 120 while the discount type is percentage_discount

Ensure code from a Pull Request is unit tested before enabling merge with github actions

Sone GIllis — Mon, 20 May 2024 17:25:16 GMT

So as a team lead you try to enforce unit testing within your team by making sure every piece of code in a PR is properly unit tested when you review. This can be extra time consuming. Can we make the process of checking for unit tests for a new functionality automatically handled via a script run from github actions on PR events and concentrate on reviewing the actual code for quality? That's what we'll be looking at in this article.

Note:
The following have been tested with the jest testing utility for JavaScript related projects but can be slightly edited to work for other languages / frameworks. This also assumes that you have setup unit test in your JavaScript project

We'll start by ensuring branch protection rules for the branches that require protection. In most cases the main branch and the develop branches. You can check out this documentation from github on how to setup branch protection rules. We'll create these rules on our branch (in this case main) which includes requiring a PR to merge and enabling status checks to pass. From the image below, you'll realize github can't find any status check. We'll get to that in a bit

Next we'll create a workflow directory in a .github directory at the root of our project repository.

There we'll create a file and call it must-unit-test.yml .

name: Must Unit Test

on:
  pull_request:
    branches:
      - main
      - develop

jobs:
  check_for_unittest:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
  
      - name: Check for unit test
        run: |
          bash must-unit-test.sh
        env:
          MERGING_BRANCH: ${{ github.head_ref }}
          BASE_BRANCH: ${{ github.base_ref }}

      - name: Set conclusion based on script results
        if: ${{ success() && steps.run_script.outputs.success == 'true' }}
        run: |
          echo "Checks passed."
          exit 0

      - name: Set failed conclusion
        if: ${{ failure() || steps.run_script.outputs.success == 'false' }}
        run: |
          echo "Checks failed. See script output for details."
          exit 1

    env:
      CI: true

In the above workflow yaml file, we are

Listening for a pull request event on the main and develop branches of our repository
Running a must-unit-test.sh bash script. This script which we will look at in a bit will be expecting a two env variables MERGING_BRANCH and BASE_BRANCH that will the branch we are about to merge from and the branch we are about to merge to respectively
The rest of instructions simply checks the outcome of the our script and will exit successfully if the PR has unit test or in a failed state if not

Let's create our bash script must-unit-test.sh at the root directory of our repository with the following content

#!/bin/bash

get_coverage_summary() {

    local coverage_summary="$1"
    
    # Extract values from the coverage summary
    local statements_covered=$(echo "$coverage_summary" | grep 'Statements' | awk '{print $5}' | cut -d'/' -f1)
    local statements_total=$(echo "$coverage_summary" | grep 'Statements' | awk '{print $5}' | cut -d'/' -f2)
    local branches_covered=$(echo "$coverage_summary" | grep 'Branches' | awk '{print $5}' | cut -d'/' -f1)
    local branches_total=$(echo "$coverage_summary" | grep 'Branches' | awk '{print $5}' | cut -d'/' -f2)
    local functions_covered=$(echo "$coverage_summary" | grep 'Functions' | awk '{print $5}' | cut -d'/' -f1)
    local functions_total=$(echo "$coverage_summary" | grep 'Functions' | awk '{print $5}' | cut -d'/' -f2)
    local lines_covered=$(echo "$coverage_summary" | grep 'Lines' | awk '{print $5}' | cut -d'/' -f1)
    local lines_total=$(echo "$coverage_summary" | grep 'Lines' | awk '{print $5}' | cut -d'/' -f2)

    # Calculate percentages to six decimal places using bc
    local statements=$(echo "scale=6; ($statements_covered/$statements_total)*100" | bc)
    local branches=$(echo "scale=6; ($branches_covered/$branches_total)*100" | bc)
    local functions=$(echo "scale=6; ($functions_covered/$functions_total)*100" | bc)
    local lines=$(echo "scale=6; ($lines_covered/$lines_total)*100" | bc)

    # Assign values to a global array
    COVERAGE_VALUES=("$statements" "$branches" "$functions" "$lines")
}

# Define the color code for red
RED='\033[0;31m'
NC='\033[0m' # No Color

# Function to echo text in red
echo_red() {
    echo -e "${RED}$1${NC}"
}

merging_branch=$MERGING_BRANCH
base_branch=$BASE_BRANCH

if [ -n "$mergin_branch" ] && [ -n "$base_branch" ]; then
    # Fetch the base branch, checkout to it and npm i
    git fetch origin $base_branch 2>&1
    git checkout $base_branch 2>&1
    npm i
    # Get the coverage test summary for the base branch
    coverage_summary=$(npx jest --coverage --coverageReporters="text-summary" | awk '/Coverage summary/ {flag=1; next} /=========================/ {flag=0} flag')
    if [ $? -eq 0 ]; then
        get_coverage_summary "$coverage_summary"
        remote_statements=${COVERAGE_VALUES[0]}
        remote_branches=${COVERAGE_VALUES[1]}
        remote_functions=${COVERAGE_VALUES[2]}
        remote_lines=${COVERAGE_VALUES[3]}

        # Fetch the base branch, checkout to it and npm i
        git fetch origin $merging_branch 2>&1
        git checkout $merging_branch
        npm i
        
        # Get the coverage test summary for the merging branch
        coverage_summary=$(npx jest --coverage --coverageReporters="text-summary" 2>&1 | awk '/Coverage summary/ {flag=1; next} /=========================/ {flag=0} flag')
        if [ $? -eq 0 ]; then
            get_coverage_summary "$coverage_summary"
            local_statements=${COVERAGE_VALUES[0]}
            local_branches=${COVERAGE_VALUES[1]}
            local_functions=${COVERAGE_VALUES[2]}
            local_lines=${COVERAGE_VALUES[3]}
            
            if [ 1 -eq "$(echo "$local_statements < $remote_statements" | bc)" ] || [ 1 -eq "$(echo "$local_branches < $remote_branches" | bc)" ] || [ 1 -eq "$(echo "$local_functions < $remote_functions" | bc)" ] || [ 1 -eq "$(echo "$local_lines < $remote_lines" | bc)" ]; then
                echo_red "You are attempting to push an update without a unit test"
                exit 1
            fi
        fi
    fi
fi

exit 0

Code Breakdown:
Assuming a member of our team created a new feature in a branch feature/less-work-more-output and initiate a PR into develop branch for merge. The above script will

Checkout to the develop branch, and install package dependencies. Then run a jest unit test coverage on the project. We will repeat same for the feature/less-work-more-output branch. The output of the unit test command after running through the awk utility will look like this
Statements : 0.5% ( 21/4175 )
Branches : 0.42% ( 10/2359 )
Functions : 0.47% ( 6/1261 )
Lines : 0.67% ( 21/3100 )
We pass the output of the unit test command through a get_coverage_summary function. This will extract the digits in brackets for each of statements, branches, functions and lines and perform the division to six decimal places for higher precision. We could easily use the percentage values directly but this will be low precision and will not catch smaller unit of code changes without test
For each of the outputs of the unit test summary for both branches, we compare with the help of the bc shell utility. The assumption here is: If the merging branch has lesser test coverage for each of statements, branches, functions and lines, compared to the base branch, then it means there is code in the merging branch without unit test and the PR fails the check

Next we'll commit and push our changes. We now have our github workflow action setup that will ensure that every piece of added code is unit tested before merging to the main or develop branch. But we are not done yet. We have to add that to our branch protection rules. Remember when we setup status checks, github didn't find any status checks right? That's not the case now. You can go back to your branch protection rules and in the Require status checks section, you should see a search input field where you can search for the job you created check_for_unittest

After the search, click on it and it should be added to the list of checks before merging. Now you'll realise that when you make a PR into the main or develop branches, the worfklow will automatically run, and must pass before you can proceed to merge.

Please note that our script doesn't handle the case where a unit test fails. You can definitely add that which will make it even better. Please do well to subscribe and leave a comment if you have updated the script to check for failed test or if you want me to update this article with updates on that

Coming soon

Sone GIllis — Mon, 20 May 2024 17:11:43 GMT

This is CodeWithGillis, a brand new site by Sone GIllis that's just getting started. Things will be up and running here shortly, but you can subscribe in the meantime if you'd like to stay up to date and receive emails when new content is published!

CodeWithGillis

My Perspective on Software Development

Focus on One Feature at a Time

Think Like a User First

Final Thoughts

Building Enterprise-Grade Frontend Applications: A Complete Guide to Advanced Project Structure

Table of Contents

Monorepo Architecture with Modern Package Managers

Why Monorepos?

pnpm Workspace Configuration

Package Management Strategy

Build System Optimization with Turborepo

Why Turborepo?

Turborepo Configuration

Build Script Orchestration

TypeScript Configuration & Project References

Project References Architecture

Base Configuration

Root Configuration

Benefits of This Approach

Code Quality & Linting Strategy

ESLint Configuration

Prettier Integration

Lint-Staged Configuration

Quality Gates

Git Workflow & Commit Standards

Conventional Commits with Commitlint

Branch Naming Strategy

Husky Git Hooks

CI/CD Pipeline Architecture

Multi-Stage Pipeline Strategy

GitHub Actions Workflow

Intelligent Change Detection

PR Checklist Automation

Testing Strategy & Coverage

Multi-Level Testing Approach

Vitest Configuration

Test Organization

Playwright E2E Testing

Branch Protection & Validation

Advanced Branch Protection

App-Specific Validation

Conditional Deployments

Deployment Strategies

Containerized Deployments

Container Registry Integration & Image Management

Zero-Downtime Deployments

Best Practices & Lessons Learned

Monorepo Management

CI/CD Optimization

Code Quality Enforcement

Team Collaboration

Conclusion

Handle Your API Responses Like a Pro in Django

Introduction

Why Is This Important?

Implementing a Middleware to Standardize API Responses

Defining the ErrorCode Enum

Final Thoughts

Common terms used in Image Processing (Part 1)

Image Formation

Bayer Mosaic

Bits per pixel (Bpp)

Brightness

Contrast

Resolution

Color Models

HSV

Luminance and Chrominance

Chroma Subsampling

Things you should learn before starting React

Arrow Functions

Map and Filter

Slice and Splice

Slice

Splice

Destructuring

Array Destructuring

Object Destructuring

Destructuring in Function Parameters

Defining the `ErrorCode` Enum