CSS: How to Center a Div Horizontally and Vertically

August 12, 2024

css

/* Flexbox approach */
.center-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
}

/* Grid approach */
.center-div-grid {
    display: grid;
    place-items: center;
    height: 100vh;
}

Continue Reading

Discover more amazing content handpicked just for you

Tutorial

How to Translate URLs in React (2025 Guide)

Create routes.js:

import Home from './pages/Home';
import About from './pages/About';

export const routes = (t) => [
  {
    path: `/${t('routes.home')}`,
    element: <Home />,
  },
  {
    path: `/${t('routes.about')}`,
    element: <About />,
  },
];

May 04, 2025

Tutorial

Globalization in React (2025 Trends & Best Practices)

Adapt units and metrics

°C vs °F, km vs miles, 12h vs 24h clock.

May 04, 2025

Tutorial

Implementing Internationalization (i18n) in a Large React Application (2025 Guide)

const { t } = useTranslation('dashboard');

✅ Add lang attribute dynamically to <html lang="...">
✅ Use language subpaths (e.g., /en/home, /fr/home) for SEO indexing
✅ Translate all visible UI, not just text
✅ Localize URLs and metadata (title, description)
✅ Use hreflang tags in SSR setups (Next.js, Remix)

May 04, 2025

Tutorial

Building Micro-Frontends with Webpack Module Federation (2025 Guide)

import React from 'react';

// Lazy load the remote Vue component
const Analytics = React.lazy(() => import('analytics_app/Analytics'));

function App() {
  return (
    <div className="App">
      <h1>Host Dashboard</h1>
      <React.Suspense fallback={<div>Loading Analytics...</div>}>
        <Analytics />
      </React.Suspense>
    </div>
  );
}

export default App;

Start the remote app (Vue):

May 04, 2025

Tutorial

State Management Beyond Redux: Using Zustand for Scalable React Apps

   npm install zustand

   import create from 'zustand';

   const useStore = create((set) => ({
     count: 0,
     increase: () => set((state) => ({ count: state.count + 1 })),
     decrease: () => set((state) => ({ count: state.count - 1 })),
   }));

May 03, 2025

Tutorial

Mastering React Rendering Performance with Memoization and Context

React re-renders components when there's a change in state or props. While this ensures the UI stays in sync with data, it can also lead to redundant renders, especially in large component trees. Identifying and mitigating these unnecessary re-renders is key to optimizing performance.([GeeksforGeeks][2])

React.memo is a higher-order component that prevents functional components from re-rendering if their props haven't changed. It performs a shallow comparison of props and reuses the previous render result when possible.([JavaScript in Plain English][3])

May 03, 2025

Code

How to Create a New MySQL User with Full Privileges

No preview available for this content.

May 01, 2025

Tutorial

javascript

Comparison and Logical Operators

// AND operator
console.log(true && true); // true
console.log(true && false); // false

// OR operator
console.log(false || true); // true
console.log(false || false); // false

// NOT operator
console.log(!true); // false
console.log(!false); // true

Use comparison and logical operators together for complex conditions.

Dec 11, 2024

Tutorial

javascript

Arithmetic Operators

Initialize counter to 10.
Use both prefix and postfix increment/decrement operators and observe the outputs.

     let counter = 10;
     console.log(counter++); // 10
     console.log(counter);   // 11
     console.log(++counter); // 12
     console.log(counter--); // 12
     console.log(counter);   // 11
     console.log(--counter); // 10

Dec 11, 2024

Tutorial

javascript

Non-Primitive Data Types (Objects, Arrays, and Functions)

Accessing Properties:
Dot notation:

    console.log(person.name); // "Alice"

Dec 11, 2024

Tutorial

javascript

Primitive Data Types

JavaScript provides several primitive data types to store basic values. These data types are immutable, meaning their values cannot be changed directly. Understanding these types is fundamental for working with data in JavaScript.

Primitive data types represent single values (as opposed to complex objects). JavaScript has the following primitive types:

Dec 11, 2024

Tutorial

javascript

Variables and Constants

In JavaScript, variables and constants are used to store data that your program can use and manipulate. This tutorial explains how to declare, initialize, and use variables and constants effectively.

Variables in JavaScript can be declared using three keywords: var, let, and const.

Dec 10, 2024

Tutorial

javascript

Hello World and Comments

Correct:

     console.log("Hello, World!";

Dec 10, 2024

Tutorial

javascript

Using Node.js to Run JavaScript

Create a new file named example.js and add the following code:

     console.log("Running JavaScript with Node.js!");

Dec 10, 2024

Tutorial

javascript

Running JavaScript in the Browser Console

Use the clear() function or click the "Clear Console" button.

Arrow keys: Navigate through previous commands.
Shift+Enter: Write multi-line code.

Dec 10, 2024

Tutorial

javascript

Installing a Code Editor (e.g., VS Code)

     node test.js

Sublime Text: Lightweight and fast.
Atom: Customizable and open-source.
WebStorm: Paid but feature-rich, ideal for large projects.

Dec 10, 2024

Tutorial

javascript

JavaScript in Modern Web Development

Libraries like Three.js and Babylon.js enable building browser-based games.
Example: Interactive 3D experiences.

JavaScript continues to evolve with yearly updates. Features like async/await, optional chaining, and tools like TypeScript are shaping the future of web development.

Dec 10, 2024

Tutorial

javascript

History and Evolution

No preview available for this content.

Dec 10, 2024

Tutorial

javascript css +1

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

We'll break the tutorial into clear, manageable steps so even if you're a beginner, you can follow along.

Before diving into the code, let's set up the structure for our Chrome extension. You'll need:

Dec 10, 2024

Tutorial

javascript

Advanced State Management in React Using Redux Toolkit

src/
├── app/                # Global app configuration
│   └── store.js        # Redux store configuration
├── features/           # Feature slices
│   ├── users/          # User management feature
│   │   ├── components/ # UI components for users
│   │   ├── usersSlice.js # Redux slice for users
├── hooks/              # Custom hooks
│   └── useAppSelector.js # Typed hooks for Redux state
└── index.js            # Entry point

Choose Your Plan

Programming & Frameworks

Web & Design

Data & Databases

DevOps, Tools & Misc

Electronics & Embedded Systems

CSS: How to Center a Div Horizontally and Vertically

Continue Reading

How to Translate URLs in React (2025 Guide)

Globalization in React (2025 Trends & Best Practices)

Implementing Internationalization (i18n) in a Large React Application (2025 Guide)

Building Micro-Frontends with Webpack Module Federation (2025 Guide)

State Management Beyond Redux: Using Zustand for Scalable React Apps

Mastering React Rendering Performance with Memoization and Context

How to Create a New MySQL User with Full Privileges

Comparison and Logical Operators

Arithmetic Operators

Non-Primitive Data Types (Objects, Arrays, and Functions)

Primitive Data Types

Variables and Constants

Hello World and Comments

Using Node.js to Run JavaScript

Running JavaScript in the Browser Console

Installing a Code Editor (e.g., VS Code)

JavaScript in Modern Web Development

History and Evolution

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

Advanced State Management in React Using Redux Toolkit

Discussion 0

Choose Your Plan

Adblocker Detected

Programming & Frameworks

Web & Design

Data & Databases

DevOps, Tools & Misc

Electronics & Embedded Systems

CSS: How to Center a Div Horizontally and Vertically

Continue Reading

Discussion 0