DEV Community: Tony Edgal

Diagonal Background Pattern with TailwindCSS

Tony Edgal — Sat, 18 Oct 2025 00:58:08 +0000

Background patterns are a recent trend in web design, and most can be replicated with only CSS. In this article, I will teach you how to replicate the diagonal background pattern on the Tailwind CSS website using only Tailwind CSS.

What we will be building

We will build this simple card component using the background pattern on the card header. The card is a custom shadcn card with extended styles. I will only focus on the background pattern on the card header, and not the card layout or content.

Tailwind CSS

globals.css

:root {
  --border: oklch(0.9219 0 0);
}

.diagonal-bg {
  @apply bg-[image:repeating-linear-gradient(315deg,var(--border)_0,var(--border)_1px,transparent_1px,transparent_50%) bg-[size:8px_8px];
}

Card Component

/** Card.tsx */

function Card() {

  return (
    <Card>
      <CardHeader className="py-4 diagonal-bg">
        <CardTitle>User Details</CardTitle>
      </CardHeader>
      <CardContent>
       {/** card content */}
      </CardContent>
    </Card>
  );
}

Explanation

Gradient

315° points top-left. Using repeating-linear-gradient(315deg, …) lays stripes along that diagonal.
The pattern then repeats infinitely along the gradient axis for a subtle diagonal texture.

Colored stripe (var(--border))

In this example, I am using a --border variable.
var(--border) 0 starts the colored stop at the very beginning of the pattern.
var(--border) 1px holds that color until 1px, creating a crisp 1px line.
var(--border) is a CSS variable for colour.

Transparent gap

transparent 1px turns the colour off right after the 1px line.
transparent 50% keeps it transparent until halfway through the repeat segment, so each unit is “1px line + clear space.”

Tile size & repeat

background-size: 8px 8px sets each repeating tile to 8×8px.
With a 1px line in each tile, the repeats intersect to form a fine diagonal grid/checker texture.

Conclusion

One thing to note is that more often than not, background patterns in Tailwind CSS can be very verbose. I encourage you to move the CSS code to an @apply Tailwind block in an external file, or, as we will see in other examples in this series, you can keep the code within the component, depending on your preferred React pattern.

What other background pattern do you want me to cover?

Clean React code pattern with the useImperativeHandle hook

Tony Edgal — Fri, 28 Mar 2025 11:29:59 +0000

In the quest for a cleaner and more concise codebase that adheres to the DRY principle, one React hook that stands out is the useImperativeHandle hook.

React’s declarative nature encourages developers to build components that rely on props and state to manage behavior and rendering. However, in some cases, imperative programming can simplify complex state management, especially when a child component interacts with multiple parents.

The `useImperativeHandle()` hook Pattern

In React, as the app size grows, it also starts to grow in complexity and it becomes expedient for devs to utilize advanced patterns to reach their goals, as simpler patterns can no longer adequately provide the clean solutions we require.

Managing state in child components typically involves lifting state up to parent components. However, when a child is shared among multiple parents, duplicating state can lead to repetitive code and potential inconsistencies. To address this, you can centralize state management within the child itself, using the useImperativeHandle hook to expose imperative methods for modifying its state. This approach not only prevents redundancy but also promotes a more maintainable architecture.

The Pattern in Action

Below is an example that demonstrates how to leverage useImperativeHandle for better state management. In this pattern, a child component exposes methods like focus and clear through its ref, allowing parent components to control its behavior without relying solely on props or state hooks.

Example

import React, { useRef, forwardRef, useImperativeHandle } from 'react';

const ChildInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    clear: () => {
      inputRef.current.value = '';
    },
  }));

  return <input ref={inputRef} {...props} />;
});

export default function ParentComponent() {
  const inputRef = useRef();

  return (
    <div className="p-4 space-y-4">
      <ChildInput ref={inputRef} placeholder="Type something..." />
      <div className="space-x-2">
        <button
          onClick={() => inputRef.current.focus()}
          className="px-3 py-1 bg-blue-500 text-white rounded"
        >
          Focus Input
        </button>
        <button
          onClick={() => inputRef.current.clear()}
          className="px-3 py-1 bg-red-500 text-white rounded"
        >
          Clear Input
        </button>
      </div>
    </div>
  );
}

React 19 further refines this pattern by eliminating the need for forwardRef. The example below illustrates the same behavior with a cleaner syntax.

React 19 Example

import React, { useImperativeHandle, useRef } from 'react';

function ChildInput(props, ref) {
  const inputRef = useRef();

  // Expose imperative methods to the parent via the ref.
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    clear: () => {
      if (inputRef.current) {
        inputRef.current.value = '';
      }
    },
  }));

  return <input ref={inputRef} {...props} />;
}

function ParentComponent() {
  const inputRef = useRef();

  return (
    <div className="p-4 space-y-4">
      <ChildInput ref={inputRef} placeholder="Type something..." />
      <div className="space-x-2">
        <button
          onClick={() => inputRef.current.focus()}
          className="px-3 py-1 bg-blue-500 text-white rounded"
        >
          Focus Input
        </button>
        <button
          onClick={() => inputRef.current.clear()}
          className="px-3 py-1 bg-red-500 text-white rounded"
        >
          Clear Input
        </button>
      </div>
    </div>
  );
}

export default ParentComponent;

Conclusion

This approach demonstrates how useImperativeHandle can simplify state management in complex React applications. While the example above provides a practical solution, I would encourage you to learn more about useImperativeHandle, Declarative and Imperative programming,

I have provided starter prompts you can feed into an LLM to get detailed explanations for each of the concepts, and to fully appreciate the trade-offs and best practices behind this each of them.

Explain declarative and imperative programming?

Examples of declarative and imperative programming in React?

Explain the useImperativeHandle hook, and give examples of when to this hook should be used?

CLOSURES: A comprehensive guide to Closures-Functions and Scopes.

Tony Edgal — Tue, 29 Jun 2021 13:27:51 +0000

In this article I will go over the following

Functions and scopes
What are closures in JavaScript
How closures are handled in memory
Why it is named closure

FUNCTIONS

A function is similar to a procedure or a set of statements that is used to perform a specific task. For a procedure to qualify as a function, it should take some input, perform various actions on that data and return a result.

Generally speaking, there are several ways to define functions

Function declaration
Function expression
Arrow syntax

// Function daclaration - Uses the function keyword
function myFunc() = {};

// Function expression - the name can be omitted, giving an anonymous function
var a = function() {}; // name omitted
var b = function myFuncTwo() {}; //function name included

// Arrow functions - arrow function syntax is a shorter syntax for a function expression
const c = () => {};

SCOPES

A scope is a policy that manages the availability of variables. A variable defined inside a scope is accessible only within that scope, but inaccessible outside.

The scope where a variable is located decides if it is accessible or inaccessible from certain parts of the program.

There are two types of scopes

Global Scope
Block or Local scope

// Global scopes are variables that are accessible from any part of the program

var e = 2 // variable declared in the global scope

const square = () => {
  return e * e
}
console.log(square()) // outputs 4

// Block/local scope refers to variables declared within a block '{}'

var f = 5 // variable declared in the global scope

const times = () => {
  let g = 5 // variable declared in the block/local scope
  return f * g
}
console.log(times()) // Outputs 25
console.log(g) // outputs undefined, because it was defined within the times function.

CLOSURE

Closure - A function that is a first-class object, that has access to variables defined in the same local scope in which it was defined.

In other words, a closure gives you access to an outer function’s scope from an inner function.

Lets look at closure with three examples

// 1
function extFunc() {
  // Define a variable local to extFunc
  const extVar = "I used a closure"
  function intFunc() {
    // We can access the variable defined in the scope of extFunc within inFunc
    console.log(extVar)
  }
  // Return the inner function. Note that we're not calling it here!
  return intFunc
}
// Call the outer function, which returns the inner function
const closure = extFunc()
// Call the returned function that we stored as a variable
closure()
// outputs 'I used a closure'

// 2
const seconds = 60
const text = "minutes is equal to"
function timeConversion() {
  let minutes = 2
  return function minutesToSeconds() {
    const minToSec = `${minutes} ${text} ${seconds * minutes} seconds`
    return minToSec
  }
}
const convert = timeConversion()
console.log(convert()) // outputs "2 minutes is equal to 120 seconds"
console.log(timeConversion()()) // outputs "2 minutes is equal to 120 seconds"

// 3
function scores() {
  var score = 85
  function displayScore() {
    alert(score);
  }
  displayScore();
}
const showScore = scores();
showScore();

in example 1
extFunc() creates a local variable called extVar and a function called intFunc(). The intFunc() function is an inner function that is defined inside extFunc() and is available only within the body of the extFunc() function. Note that the intFunc() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, intFunc() can access the variable name declared in the parent function, extFunc().

in example 2
the return intFunc line in 1 can be avoided by returning the internal function at the time of declaration.

in example 3
in 3 the internal function is not returned (only called) because of the alert command within its block.

// switching the code in 3 from alert to console.log
function scores() {
  var score = 85;
  function displayScore() {
    console.log(score);
  }
  displayScore();
}
const showScore = scores();
showScore(); // outputs 85 to the console
// get TypeError showScore is not a function

At first glance, it might seem unintuitive that this code still works. In some programming languages, the local variables within a function exist for just the duration of that function's execution. Once scores() finishes executing, you might expect that the name variable would no longer be accessible. However, because the code still works as expected, this is obviously not the case in JavaScript.

The reason is that functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. In this case, showScore is a reference to the instance of the function displayScore that is created when scores() is run. The instance of displayScore maintains a reference to its lexical environment, within which the variable name exists. For this reason, when showScore is invoked, the variable score remains available for use, and "85" is passed to console, followed by a TypeError.

When the internal function is created, the Javascript engine detects that for the function to be executed in the future, a reference will be needed to variable declared in the external function scope.

To solve this, the engine keeps a link to this variable for later use, and stores that link in a special function scoped execution context.

Such a function with 'memory' about the environment where it was created is simply known as: a Closure.

HOW CLOSURES ARE HANDLED IN MEMORY

When a pure function that depends on its own arguments and data is called, its gets pushed to the **CALL STACK**, where it is executed and it data is kept in memory until it is removed.

But when a function references data outside it's own scope, i.e. from its lexical environment or an external function, for the interpreter to call this function or know the value of this free variables, it creates a closure to store them in place in memory where they can be accessed later. That area in memory is called a **HEAP MEMORY**.

Now unlike the call stack which is short-lived, the heap memory can store data indefinitely and decide when it's ready to be discarded.

Closures require more memory and processing power than regular functions but has many important practical uses, e.g. Data Encapsulation.

Data encapsulation is simply a method of protecting data to prevent it from leaking to where it is not needed.

WHY THE NAME CLOSURES THEN?

This is because the internal function inspects it's environment and closes over the variables in the lexical scope in which it is defined, and that it needs to remember for future use. The references to the variables are closed in a special data structure that can only be accessed by the Javascript runtime itself.

DEV Community: Tony Edgal

Diagonal Background Pattern with TailwindCSS

What we will be building

Tailwind CSS

Card Component

Explanation

Gradient

Colored stripe (var(--border))

Transparent gap

Tile size & repeat

Conclusion

Clean React code pattern with the useImperativeHandle hook

The useImperativeHandle() hook Pattern

The Pattern in Action

Example

React 19 Example

Conclusion

CLOSURES: A comprehensive guide to Closures-Functions and Scopes.

FUNCTIONS

SCOPES

CLOSURE

HOW CLOSURES ARE HANDLED IN MEMORY

WHY THE NAME CLOSURES THEN?

The `useImperativeHandle()` hook Pattern