DEV Community: Mike Vardy

How to Make Agents "think" Like a Maintainer

Mike Vardy — Mon, 17 Nov 2025 11:38:25 +0000

Cover Photo by Pexels from Pixabay

AI coding assistants are fast. They can clear your backlog before lunch—and today's LLM tools are are way more than autocomplete.

But speed alone isn’t the win—because LLMs default to the quickest path, not the right one.

They don’t see your architecture. They don’t remember past outages. They don’t know you’re trying to sunset that legacy service. So they generate code that works… but quietly chips away at your standards.

Role-play fixes that.

When you frame the AI as a Principal Engineer, you’re giving it a persona and mindset: question shortcuts, enforce patterns, protect the long-term. Suddenly it’s not acting like a supercharged intern—it’s acting like someone who’s accountable for the health of the system.

Four Principles of AI Code Governance

1. Role Definition

Define your AI's responsibility explicitly.

❌ Not this:
"You are a helpful AI assistant."

✅ This:
"You are a Principal Engineer responsible for enforcing 
architectural boundaries, blocking anti-patterns, and 
maintaining code quality standards."

Try this now:

## Role
You are the Tech Lead. Your job is to:
- Enforce domain-driven design boundaries
- Reject code that violates team standards
- Question requests that introduce technical debt

2. Negative Constraints

The most powerful rules say "NO":

⚠️ Never use any in TypeScript

⚠️ Core modules cannot import UI code

⚠️ No console.log in production

These constraints prevent drift into bad habits.

3. Context Scoping

Don't dump your entire rulebook into every request.

Approach	Impact
❌ Bad	500-line `.cursorrules` file loaded for every file
✅ Good	Architectural rules only for `src/core/*/.ts`

This keeps AI focused and prevents context overload.

4. Safety Barriers

Make it impossible to ship broken code:

✅ Require tests to pass
✅ Run linters automatically
✅ Block destructive commands
✅ Enforce code review protocols

Tool Comparison: Choose Your Weapon

Tool	Best For	Key Feature	Use When
Cursor	Architecture enforcement	File-pattern scoped rules	You need surgical precision on specific file types
Windsurf	Continuous governance	Cascade engine	You want persistent rule enforcement
Warp	Terminal operations	Folder-scoped agents	You have a monorepo with different contexts
Claude Code	Self-correction	Post-execution hooks	You want automated fix loops
Gemini	Cloud environments	Layered constraints	You're working in cloud-native setups
Copilot	Path-specific rules	Directory targeting	You need GitHub integration

Tool-by-Tool Implementation Guide

Cursor: Surgical Precision with MDC Rules

Click to expand Cursor setup

TL;DR: Enforce architecture boundaries only where they matter.

Quick setup:

mkdir -p .cursor/rules

Create: .cursor/rules/architecture.mdc

description: DDD boundaries
globs: src/core/**/*.ts
alwaysApply: false

## FORBIDDEN
`src/core` cannot import from `src/ui`

## REQUIRED
All I/O uses `src/core/ports` interfaces

## Protocol
Reject violations. Explain why.

Why this works: Rules activate only for relevant files—no context pollution.

Official Cursor Rules Docs

Windsurf: Continuous Governance

Click to expand Windsurf setup

TL;DR: Cascade rules across your entire codebase.

Create: .windsurfrules

<role>
  Maintainer. Readability over cleverness.
</role>

<security>
  ⚠️ NEVER output secrets
  ✅ ALWAYS validate with Zod
</security>

<style>
  - Use `pnpm`
  - Composition > inheritance
</style>

💡 Pro tip: Add .codeiumignore to hide legacy code. AI learns from what it sees—don't let it learn from old mistakes.

Windsurf Cascade Docs

Warp: Folder-Scoped Terminal Agents

Click to expand Warp setup

TL;DR: Different AI behaviors per directory in monorepos.

Setup:

ops/WARP.md → DevOps persona
frontend/WARP.md → UI persona

Safety example:

# ops/WARP.md

⚠️ If user requests deployment commands:
DO NOT generate them.
Suggest `safe_deploy` workflow instead.

This prevents dangerous one-off CLI instructions.

📖 Warp AI Docs

Claude Code: Self-Correcting Loops

Click to expand Claude Code setup

TL;DR: AI sees linting errors and fixes them automatically.

Create: .claude/settings.json

{
  "hooks": [
    {
      "type": "postToolUse",
      "command": "eslint --fix"
    },
    {
      "type": "postToolUse",
      "command": "npm test"
    }
  ]
}

The magic: Claude reads test output and self-corrects. No human needed.

Quick start: Run claude /init for repo-specific baseline.

📖 Claude Code Hooks Reference

Gemini Code Assist: Layered Cloud Constraints

Click to expand Gemini setup

TL;DR: Global + local rules prevent context rot.

Structure:

~/.gemini/GEMINI.md → Universal style
./GEMINI.md → Project constraints

Security:

"coreTools": ["ls", "grep", "cat"]

💡 Pro tip: Limit tool access in cloud environments.

GitHub Copilot: Path-Specific Safety

Click to expand Copilot setup

TL;DR: Isolate high-risk areas with targeted rules.

Create: .github/instructions/migrations.instructions.md

applyTo: "db/migrations/**/*.sql"

## Migration Safety
⚠️ Every migration needs down-migration
⚠️ NEVER `DROP TABLE` without backup
✅ Create indices CONCURRENTLY

📖 Copilot Custom Instructions

The Unified Approach: One Config to Rule Them All

Problem: Managing six config files is tedious.

Solution: Create a single AGENTS.md and symlink it everywhere.

touch AGENTS.md
ln -sf AGENTS.md .cursorrules
ln -sf AGENTS.md WARP.md
ln -sf AGENTS.md CLAUDE.md
ln -sf AGENTS.md GEMINI.md

💡 For Cursor MDC: Reference with @AGENTS.md

Result: ✨ Every AI tool follows identical standards. One source of truth.

Your 3-Step Action Plan

Step 1: Add One Negative Constraint ⏱️ 5 minutes

Pick your biggest pain point from last code review:

## Constraints
⚠️ NEVER use `console.log` in production code

Step 2: Enable CI Hooks for One Directory ⏱️ 15 minutes

{
  "hooks": [{
    "type": "postToolUse",
    "command": "eslint --fix src/core"
  }]
}

Step 3: Create Unified `AGENTS.md` ⏱️ 20 minutes

# AI Agent Configuration

## Role
Principal Engineer enforcing team standards

## Security
- NEVER output secrets
- ALWAYS validate inputs

## Architecture
- Core cannot import UI
- Use repository pattern

## Style
- Functional over class-based
- TypeScript strict mode

Symlink everywhere. Done. ✅

💡 The Bottom Line

Unconfigured AI = Fast but reckless

Configured AI = Fast and reliable

The difference? A few well-crafted configuration files.

Start Today:

✅ Add one "NEVER" rule
✅ Watch errors caught earlier
✅ Enjoy quieter code reviews

Stop letting AI write bugs. Give it a job description and make it role play. Make it accountable.

📚 Additional Resources

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

You've probably noticed it. You're watching a video on YouTube, and the area around the video starts to softly glow, picking up the colors from the content itself.

Mike Vardy — Sun, 09 Nov 2025 10:43:28 +0000

Dynamic Theming: A Developer’s Guide to Adaptive Color in UI

Mike Vardy ・ Nov 9

#frontend #designsystem #uxdesign #ux

Dynamic Theming: A Developer’s Guide to Adaptive Color in UI

Mike Vardy — Sun, 09 Nov 2025 09:04:29 +0000

Cover Photo by Peter Olexa on Unsplash

You've probably noticed it. You're watching a video on YouTube in dark mode, and the area around the video starts to softly glow, picking up the colors from the content itself. That, my friends, is "Ambient Mode."

It's a subtle but powerful UI technique that makes the experience feel more immersive and integrated. It looks like a complex, big-budget feature, but what if I told you it's an effect you can add to your own projects?

This isn't just a gimmick. It's a powerful way to create a more cohesive user experience. But how do they do it? And how can we do it without a massive engineering team?

Let's dig in.

The YouTube Approach: An "Ambient Glow"

When YouTube rolled out its redesign in October 2022, Ambient Mode was the star. According to their design team, they use "dynamic color sampling" to tint the UI.

Here's the breakdown:

Source: It pulls colors from the video's thumbnail and storyboard frames (the little previews you see when scrubbing).
Technique: Instead of just picking one dominant color, they take the raw frame, blur it, stretch it, and overlay it as a subtle background glow. This ensures the glow "is inclusive of all colors used in a single thumbnail."
Performance Fallback: On low-powered devices, this blurring and sampling can be expensive. So, YouTube computes a simpler, neutral tint based on the "Kelvin color temperature" of the scene. In other words, it maps the video's aggregate warm or cool tone to a uniform background color.
In the DOM (The UI Tint): It's actually a two-part effect. The "ambient glow" is the blurred background, but YouTube also samples a more saturated, dominant color to tint the UI controls. This is where variables like --yt-saturated-raised-background come in. You'll see this specific color applied to the hover effect on video thumbnails, the background of the description box, and highlights on the playlist. It's a subtle way to make the entire interface feel responsive to the content.

The Competition: Spotify vs. Netflix

YouTube's approach is cool, but it's not the only way. Let's look at two other streaming giants.

Netflix: All About the Imagery

You might be surprised to learn that Netflix's UI color scheme is almost completely static. Their brand identity is built on "Netflix Red" (#E50914) and a strict red-and-black palette.

Instead of changing the UI color, Netflix invests heavily in changing the UI imagery. They use sophisticated ML models (like "Aesthetic Visual Analysis") to pick the perfect thumbnail just for you. The app's chrome (buttons, backgrounds) stays the same, but the content art is hyper-personalized.

Spotify: All About the Album Art

Spotify is the classic example of dynamic theming. As their own developer guidelines recommend, the UI should "Extract artwork color for background."

When you're on the "Now Playing" screen, the app samples the current track's cover art and derives a color scheme. This dominant color is used to style the background, creating a seamless transition as you move from one song (and one album cover) to the next.

How to Get the Effect: From DIY to Drop-in

Okay, theory's great. But how do we build this? You have a few options, ranging from fully manual to a simple, drop-in solution.

Option 1: The DIY Route (The Hard Way)

You can roll your own extraction using the HTML5 <canvas> API. The idea is to draw the image (or a video frame) to a hidden canvas and then read its pixel data to find the dominant color.

// img is your loaded image element
const canvas = document.createElement('canvas');

// For performance, scale the image down. 100x100 is often enough.
const W = canvas.width = 100;
const H = canvas.height = 100;

const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, W, H);

// This is the magic part!
// .data is a giant array: [R1, G1, B1, A1, R2, G2, B2, A2, ...]
const data = ctx.getImageData(0, 0, W, H).data;

// Now you can loop through `data` (in steps of 4)
// to compute an average color, find the most common color (histogram),
// or whatever logic you want!

Pro-tips for this method:

CORS: If your image is from another domain, you'll hit a security error. You need to enable CORS on the image: img.crossOrigin = 'anonymous' (and the server must send the right headers!).
Performance: Reading pixel data is a main-thread-blocking operation. For video, you'd have to do this on an OffscreenCanvas in a Web Worker to avoid making your UI stutter. This gets complicated, fast.

Option 2: General Color-Sampling Libraries

If you're working with static images (like Spotify's album art), the DIY route is overkill. Libraries are a much better choice.

Color Thief: A simple, popular choice. It can give you a single dominant color or a whole palette from an image.
Vibrant.js: A port of Android's powerful Palette API. It gives you a rich set of color swatches like "Vibrant," "Muted," and "DarkVibrant."
Culori: A modern color library for JavaScript that makes it easy to parse, convert, blend, and manipulate colors. Useful if you want to generate dynamic themes, adjust lightness/luma, or mix multiple extracted colors for UI effects.

Alexandre Vacassin on CodePen has a great example on generating an entire palette from a single color using Coloris

These are fantastic for a single dominant color. But for video, they still require you to manually grab frames, pipe them to a canvas, and then run the extraction, all while managing performance.

Option 3: Instant YouTube-Style Glow

If all you want is the soft, color-reactive glow around videos — like YouTube’s Ambient Mode — you don’t need to reinvent the wheel.

That’s where a focused, open-source library comes in. video-ambient-glow handles this end-to-end: it captures video frames and applies a subtle, blurred glow to the area around the video automatically — no color extraction or manual calculations required.

Check out the live demo. Forget the canvas headaches — just drop in the library and get the glow instantly.

A Note on Accessibility

No matter which method you choose, this is the most important step. Dynamic color must not come at the cost of readability.

A random color from an image has no guarantee of providing good contrast with your text.

Check Contrast: Always check your generated color against its text color. Aim for a WCAG 4.5:1 contrast ratio.
Check Luma: You can programmatically check if a color is "dark" or "light" (by calculating its luma) and conditionally switch your text color between black and white.
Be Subtle: A safer approach, like YouTube's, is to use the dynamic color for decorative elements only (like backgrounds and glows) while keeping your main text and interactive elements on fixed, high-contrast colors.

Final Thoughts

Dynamic theming is a fantastic way to break out of the static-brand box and create UIs that feel more alive and integrated with the content. It used to be a feature reserved for tech giants, but with powerful techniques and great open-source tools like video-ambient-glow available, it's never been easier to add this premium touch to your own video projects.

Happy theming!

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

Transforming Chaos: Unleashing the Power of Ramda in ReactJS

Mike Vardy — Mon, 11 Mar 2024 10:45:57 +0000

Cover Photo by Nat on Unsplash

Maintaining large imperative React projects can be a daunting task, fraught with complex state management, side effects, and tight coupling. The importance of clean and maintainable code for scalability cannot be overstated. This is where Ramda, a functional programming library, comes into play.

Ramda offers a streamlined approach to coding, enhancing readability and promoting a more functional style of programming. This blog post will guide you through the journey of integrating Ramda into your React projects, showcasing its potential to transform imperative chaos into pure order.

An Introduction to Ramda

Ramda is a practical functional library designed specifically for JavaScript, emphasizing a purer functional style with immutability and side-effect free functions at the forefront. It offers features like automatic currying, function composition, and higher-order functions, making functional programming in JavaScript more accessible and enjoyable.

Ramda can be seamlessly integrated into a React project, enhancing the development experience with its utility functions and functional programming concepts.

Cleaning Up State Management

Ramda simplifies state management by promoting immutability and providing utility functions for working with data. It allows for complex state transformations and updates in a more declarative manner, reducing the need for imperative code and making state management more predictable and easier to reason about.

Taming Side Effects

Consider a React component that fetches a list of users, filters out inactive users, and then maps over the active users to display their names in a list. Without Ramda, the code might look something like this:

Now, let's refactor this example using Ramda. We'll use R.filter to filter the users, R.map to transform the user objects into names, and R.pipe to combine these operations elegantly. This approach not only makes the code more readable but also emphasizes the data transformations in a declarative manner.

The use of R.pipe clearly defines the data transformation steps in a readable and maintainable manner. It's easy to see at a glance that we're filtering active users and then mapping to their names. your brain now wants to refactor it further

Ramda's functions are automatically curried, making them highly reusable. The same transformation logic processUsers could be easily applied elsewhere without modification.

Ramda encourages a functional programming style that avoids side effects and operates on data immutably. This can lead to fewer bugs and more predictable code.

Simplifying Components with Ramda

Ramda's utility functions can then be used to write more functional and declarative code. For example, to find a user with a specific ID in an array of users:

More Advanced Examples of Ramda

Imagine a scenario where you have a component that fetches data from an API and then processes this data to display it in a user-friendly format.
Without Ramda, you might handle this with a series of imperative statements and conditional logic. However, with Ramda, you can use a combination of pipe, map, and filter to create a more functional and declarative solution.

In this example, the processData function uses Ramda's pipe to create a pipeline that first filters out users under the age of 25 and then maps over the remaining users to pick only the name and age properties. This approach is more declarative and easier to understand than a series of if statements and for loops.

This example showcases how Ramda can be used to enhance the logic of React components, making them more functional, declarative, and easier to maintain. By leveraging Ramda's functional programming capabilities, developers can write cleaner, more readable code that is also more scalable and easier to test.

Incorporating Ramda into React projects offers numerous benefits, including improved code readability, maintainability, and scalability. By adopting functional programming principles, developers can transform their projects from chaos to order, enhancing the overall development experience.

Happy Coding!

If you are interested in a deeper dive I recommend the talk
Hey Underscore, You're Doing It Wrong by Brian Lonsdorf

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

How to Add a Large List of Elements to the DOM Efficiently Using DocumentFragments 🧩

Mike Vardy — Mon, 23 Oct 2023 09:11:32 +0000

Cover Photo by Sunder Muthukumaran on Unsplash

You may have encountered situations where you need to add a large list of elements to a web page dynamically. For example, you may want to display a list of products, comments, search results, or other data that is fetched from an API or a database.

However, adding a large list of elements to the web page can be challenging in terms of performance and user experience. If you directly manipulate the DOM for each element, you may cause unnecessary reflows and repaints, which can slow down the page rendering and make the user interface unresponsive.

Fortunately, there is a better way to handle this problem: using DocumentFragments. DocumentFragments are a special type of node that can hold other nodes without affecting the live DOM. They allow you to create and manipulate a large list of elements in memory, and then append them to the web page in one go. This can significantly improve the performance and user experience of your web application.

In this post, I will explain what DocumentFragments are, how they differ from traditional DOM manipulation, and how to use them to add a large list of elements efficiently. I will also show you some best practices, real-world use cases, performance comparisons, and browser compatibility issues related to DocumentFragments.

Let's get started!

The `DocumentFragments` API

A DocumentFragment is a node that can contain other nodes, but is not part of the live DOM tree. It acts as a lightweight document that can store a fragment of HTML or XML content.

You can create a DocumentFragment using the document.createDocumentFragment() method. This returns an empty DocumentFragment object that you can populate with other nodes.

Unlike regular nodes, DocumentFragments do not have any parent or sibling nodes. They are isolated from the live DOM and do not trigger any reflows or repaints when you modify them. This means that you can add, remove, or change the nodes inside a DocumentFragment without affecting the web page layout or performance.

When you are ready to insert the nodes from a DocumentFragment into the live DOM, you can use the appendChild() or insertBefore() methods on any node that accepts child nodes. This will move all the nodes from the DocumentFragment to the specified location in the live DOM, and empty the DocumentFragment object.

The advantage of using DocumentFragments is that they allow you to perform batch operations on a large number of nodes in memory, and then append them to the web page in one go. This reduces the number of DOM manipulations and improves the performance and user experience of your web application.

The Problem with Traditional DOM Manipulation

To understand why DocumentFragments are useful, let's first look at what happens when you use traditional DOM manipulation to add a large list of elements to a web page.

Suppose you have an empty <ul> element in your HTML document, and you want to add 1000 <li> elements to it dynamically using JavaScript. One way to do this is to use a loop and create each <li> element using the document.createElement() method. Then, for each <li> element, you can set its text content using the textContent property, and append it to the <ul> element using the appendChild() method.

Here is an example of how this code might look like:

// Get the <ul> element
const ul = document.getElementById("list");

// Simulate adding 1000 list items
for (let i = 0; i < 1000; i++) {
  // Create an <li> element
  const li = document.createElement("li");
  // Set its text content
  li.textContent = "Item " + (i + 1);
  // Append it to the <ul> element
  ul.appendChild(li);
}

This code seems simple and straightforward, but it has some serious drawbacks in terms of performance and user experience.

First of all, every time you append an <li> element to the <ul> element, you are modifying the live DOM tree. This means that the browser has to recalculate the layout and style of the web page, and repaint the affected regions on the screen. These operations are expensive and time-consuming, especially when you have a large number of complex elements.

Secondly, every time you modify the live DOM tree, you are blocking the main thread of JavaScript execution. This means that while the loop is running, no other JavaScript code can run, and no user interactions can be processed. This can make the web page unresponsive and freeze the user interface until all the elements are added.

As a result, using traditional DOM manipulation for adding a large list of elements can cause poor performance and user experience issues such as:

Slow page rendering
Janky animations
Delayed user feedback
High CPU and memory usage
Battery drain

Creating and Using `DocumentFragments`

To avoid the problems of traditional DOM manipulation, you can use DocumentFragments to add a large list of elements efficiently.

The idea is to create a DocumentFragment object, and populate it with the <li> elements in memory. Then, you can append the DocumentFragment object to the <ul> element in one go. This way, you only modify the live DOM once, and avoid unnecessary reflows and repaints.

Here is an example of how to use DocumentFragments to add 1000 <li> elements to a web page:

// Create a DocumentFragment
const fragment = document.createDocumentFragment();

// Simulate adding 1000 list items to the DocumentFragment
for (let i = 1; i <= 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `List Item ${i}`;
  fragment.appendChild(li);
}

// Now, append the entire DocumentFragment to the live DOM
const myList = document.getElementById("myList");
myList.appendChild(fragment);

With DocumentFragments, you perform a single DOM modification operation rather than 1000 individual ones. This optimization significantly reduces the overhead associated with layout calculations and repaints, resulting in a faster and smoother user experience.

Unlike the first example, using DocumentFragments doesn't block the main JavaScript thread. It means your web page remains responsive and doesn't freeze during the process, ensuring a better user experience.

By minimizing layout recalculations and repaints, your web application consumes fewer resources. This leads to lower CPU and memory usage, extending the life of mobile device batteries and providing a more energy-efficient experience.

In conclusion, DocumentFragments are a powerful tool in a web developer's toolkit. They enable you to efficiently add large lists of elements to a web page, improving performance and user experience. By batching DOM modifications and reducing rendering bottlenecks, you can create web applications that are both faster and more responsive.

So, the next time you're faced with adding a significant number of elements dynamically, remember DocumentFragments. They're the secret to a more efficient and user-friendly web.

Happy coding! 🚀✨

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

Enhance Your React Components ✨ /w a Glossy Shine Effect

Mike Vardy — Fri, 08 Sep 2023 08:29:39 +0000

Cover Photo by Clark Van Der Beken on Unsplash

Have you ever come across something on those stunning websites where elements seem to shimmer and shine as you hover over them? Well, you're in luck because in this quick tutorial, I am going to show you how to create a cool gloss effect using a custom React hook called useGlossEffect.

But first, let's give credit where it's due. We were inspired to create this React version of the awesome gloss effect created by Tahazsh on CodePen. You can check out the original pen right here: Tahazsh's CodePen.

Let's start with a demo:

Styling the Gloss Effect

We'll start by defining the appearance of our gloss using CSS. We'll create a class called .gloss that specifies the gloss's opacity, size, position, and that beautiful radial gradient background.

Crafting the `useGlossEffect` Hook

The heart of our gloss effect is the useGlossEffect hook. This hook takes three references as arguments: cardRef, cardContentRef, and glossRef. These references point to the card element, card content, and gloss element, respectively.

Inside the hook, we have three key functions:

🌟 `addShineClass()`

This function adds the gloss--shine class to our gloss element. This class triggers the transition and makes the gloss shine when we hover over it.

🗺️ `mapNumberRange()`

At the heart of the mapNumberRange function lies a fundamental mathematical concept known as linear interpolation. Linear interpolation is a technique used to estimate values within a given range based on known values at two endpoints. In our case, we leverage this technique to map a value from one range to another.

🧮 `calculateTransformValues()`

In this function, we calculate various values needed for the gloss effect, including rotation degree, translation, and opacity. We use the mouse pointer's position and the card's dimensions to determine how the gloss should behave. Kudos to Tahazsh's for the math here.

✨ `applyTransform()`

Here, we apply the calculated transforms and opacity to our card content and gloss elements, creating that mesmerizing effect. It uses the values calculated in the previous step.

Bringing It All Together

To complete our gloss effect, we wrap it up within a useEffect block. This effect initializes the gloss effect when the component mounts and removes event listeners when the component unmounts.

Usage

To use this captivating gloss effect, simply import the useGlossEffect hook into your React component and call it, passing the appropriate refs. Here's how you can use it:

And there you have it! You've successfully added a mesmerizing gloss effect to your React components, taking inspiration from the awesome work of Tahazsh on CodePen. Now, it's time to see your cards come to life with a captivating shine and sparkle as you hover over them.

Feel free to fork the CodePen demo and give Tahazsh a follow to explore even more inspiring UX.

Happy coding! 🚀✨

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

Creating a Simple Custom JSX Parser /w Practical Example

Mike Vardy — Wed, 30 Aug 2023 08:05:46 +0000

Cover Photo by Ferenc Almasi on Unsplash

In the rapidly evolving landscape of modern web development, the fusion of JavaScript and HTML has given rise to a game-changer: JSX. This ingenious bridge has redefined how user interfaces are created, powering frameworks like React, Vue, and Solid.

But have you ever wondered about the magic behind it? Creating your own JSX parser might sound complex, yet it's surprisingly approachable. In this post, we'll dive into the elegance beneath JSX's surface.

The Missing Link: The Essence of JSX

JavaScript and HTML are distinct languages, and JSX serves as the bridge that connects them. It's like a translator allowing HTML-like code to coexist within JavaScript files. This enables frameworks, like React and others, to build captivating, interactive user interfaces.

However, a crucial step is missing. Browsers understand HTML, not JSX. Writing JSX is crafting a higher-level abstraction that developers intuitively grasp. But for this virtual world to transform into real web pages, the translation to tangible HTML is vital.

This is where a custom JSX parser steps in, translating JSX into HTML that browsers comprehend.

Unraveling the Parser: Anatomy of Custom JSX Conversion

Parsing the Unparsed
At the heart of a JSX parser lies the task of dissecting seemingly intricate JSX code into its core building blocks. This involves recognizing JSX tags, components, and attributes, extracting the essentials required for the subsequent translation process.
Mapping the Unmapped
Once the parser deconstructs JSX, the next step involves mapping JSX elements and attributes to their corresponding HTML counterparts.
Expression Expedition
JSX isn't confined to static structures; it accommodates dynamic expressions too. A robust custom parser must seamlessly integrate these expressions into the final HTML output, ensuring the dynamic nature of JSX is preserved.
Babel Bonding
For those accustomed to working with Babel, a custom JSX parser should harmoniously integrate with this essential tool. This integration ensures that your custom parser works seamlessly within your existing development workflow.

The Practical Use-case for Custom JSX Parsing

Creating your own JSX parser might seem like an academic exercise, but its has some practical applications:

Tailored Frameworks
If crafting a custom framework, a personalized JSX parser is invaluable. It guarantees smooth translation of framework components into standard HTML, retaining your design's essence.
Curiosity Unleashed
For those exploring JSX, modern ECMA, or Babel, an in-house JSX parser offers real-time feedback. It nurtures curiosity, aiding comprehension by simplifying complexities.
Transformative Power
Custom JSX parsing goes beyond theory. It's a potent tool for transforming JSX-based code into diverse formats, facilitating code migration and optimization.
The catch, Tackling Errors
Creating a JSX parser comes with challenges, particularly robust error handling. A proficient parser not only interprets correct code but guides developers in rectifying common mistakes or malformed expressions.

Guiding Transformation with @jsx Pragma in Babel

In Babel's realm, the @jsx pragma is pivotal. It directs the delicate dance between Babel and JSX during transpilation. As Babel encounters JSX, this pragma guides transformation according to your unique approach.

The @jsx pragma's adaptability shines when working with various libraries or frameworks. It seamlessly integrates JSX, enhancing versatility. Implementing it is as simple as adding a comment at your file's start:

Crafting Your Custom JSX Parser

Dive deeper with a code snippet showcasing the dom() function—a simple yet potent JavaScript method. Armed with tag names, attributes, and children, it conjures an HTML entity for seamless DOM integration.

This function operates in the following 4 basic steps:

Creating the HTML Element
It starts by creating an HTML element using the provided tagName.
Setting Attributes
The function sets attributes on the created element.
Adding Child Elements or Text Content
This step involves adding child elements or text content to the main element.
Returning the Constructed Element
Finally, the function returns the fully constructed HTML element.

Making it Real: Integrating into Familiar Syntax

See the power of our custom JSX parser in action, integrated seamlessly into familiar JSX. Using @ngneat/falso (a Faker.js replacement), generate filler content dynamically. Demonstrating randCatchPhrase(), randUrl(), and randParagraph() calls—each generating random content—our parser springs to life.

CodePen Demo

Delving into the realm of custom JSX parsing offers insights beyond theoretical exploration. It's a pathway to enhancing frameworks, elevating education, optimizing code, and creating seamless integrations.

The road to mastery might have its challenges, but the reward is a deeper understanding that enables you to create with even more precision and creativity.

Happy Coding!

SSR-Proof Effects: Control Client-Side Lifecyles /w some React Magic

Mike Vardy — Tue, 29 Aug 2023 13:00:00 +0000

Cover Photo by Anatvida Sukchanta on Unsplash

When working with React on a project using Sever Side Rendering (SSR), you might often encounter situations where you need to perform certain actions after your component has been rendered on the client side. However, traditional hooks like useEffect or useLayoutEffect can sometimes execute their effects both on the server and client side, leading to suboptimal behaviour during server-side rendering (SSR).

Enter the useClientLayoutEffect custom hook – a solution that empowers you to control when an effect should run exclusively on the client side.

The Benefits

Client-Side Precision
Unlike regular effects, useClientLayoutEffect ensures that your code is executed solely on the client side, avoiding any unnecessary server-side execution.

Optimized Performance
By avoiding unnecessary server-side effects, your application's performance can be enhanced, resulting in faster load times and smoother user experiences.

Consistent Behaviour
This custom hook maintains the familiar structure of React's effect hooks, making it easy to integrate into your existing components and workflows.

Use Cases for `useClientLayoutEffect`

DOM Measurements
When you need to measure elements or perform layout calculations, using useClientLayoutEffect guarantees that your calculations are based on the actual client-rendered DOM, eliminating inconsistencies.

Third-Party Integrations
Integrating third-party libraries or widgets that depend on the window object becomes seamless, as the effects will only be triggered when the necessary client context is available.

Animations and Transitions
Applying animations and transitions often requires access to the client-side rendering engine. With useClientLayoutEffect, you can ensure animations are smoothly initiated without SSR-related hiccups.

And the code:

Whether you're measuring elements, integrating external libraries, or orchestrating animations, useClientLayoutEffect empowers you to craft components that are not only functional but also optimized for a smooth user experience. It just might be a tool worth adding to your React hooks.

So there you have it, a dynamic solution to ensure your effects are in sync with the client-side rendering cycle, leading to a more polished and efficient React application.

Happy Coding!

Building a Simple 🎶 Music Synthesizer 🎵 /w JavaScript

Mike Vardy — Sun, 27 Aug 2023 14:16:01 +0000

Cover Photo by Denisse Leon on Unsplash

Have you ever wanted to create your own digital musical instrument? In this tutorial, we're going to dive into the world of audio synthesis and JavaScript to build a simple music synthesizer right in your browser. With just a few functions, you'll be able to produce a variety of tones and melodies, creating your own unique musical experience.

Before we start, why not take a quick listen to what we'll be building? Check out the live demo:

HTML Markup

The HTML markup provides the foundation for our music synthesizer user interface. It consists of a catchy title, a row of buttons representing keyboard notes, and a dropdown menu to select different sound waveforms.

Setup the Initial Variables

getSelectedWaveform: This function simply returns the currently selected waveform type from the dropdown. It helps us keep track of which sound wave shape we're using.
selectedWaveform: This variable stores the selected waveform type (initially set to the default selected value from the dropdown).
audioContext: This is an instance of the AudioContext, which is the central component for handling audio operations. activeOscillators: This object keeps track of active oscillators (sounds currently playing).

The `createOscillatorNode` Function:

Here, we define a function that sets up an oscillator and a gain node in the audio context. An oscillator is like the heart of a sound wave, and a gain node controls its volume. We specify the waveform type, frequency, and gradually increase the volume to avoid sudden clicks.

Playback Functions

playSound: This function takes a frequency as input and plays a sound with that frequency. It uses the createOscillatorNode function to create an oscillator if it's not already active. This helps us avoid overlapping sounds.
stopSound: When we release a button or move the cursor away, we call this function. It smoothly decreases the sound's volume to avoid abrupt cutoffs and stops the oscillator, ensuring a clean stop.

The `setupButtonListeners` Function:

In this function, we set up listeners for each note button. When you press a button, it triggers the playSound function, and when you release it or move away, it triggers the stopSound function. This gives you interactive control over the sound.

Congratulations, you've just embarked on your journey into the world of audio synthesis!

Whether you're a music enthusiast or a curious developer, this tutorial has equipped you to create, experiment, and explore the art of sound in the digital realm.

Happy Coding!

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

Build a Animated Emoji Selector /w React, Noto & Lottie Animations

Mike Vardy — Sat, 26 Aug 2023 22:53:02 +0000

Cover Photo by Domingo Alvarez E on Unsplash

I stumbled upon Google's new Animated Noto Emojis, and let me tell you, they are seriously impressive. These emojis aren't just your regular old static icons—they come alive with buttery smooth animations, all thanks to the power of Lottie.

As I was checking them out, a thought struck me: "Wouldn't it be cool if there was a easier way to explore these?" And that's when I had my lightbulb moment. I decided to put whip something quick together, the end result turned out really fun.

You can actually play around with a live demo of below. Trust me, it's an absolute blast. Go ahead and give it a spin.

What are LottieFiles?

Lottie is a file format for animations, using JSON. This format makes it incredibly simple to include animations on various platforms, just like you would with static images. These files are compact and function seamlessly on all sorts of devices.

They're flexible too! Just like SVG and other vector formats, you can adjust their size without worrying about losing image quality.

Designing the Emoji Dropdown

Our journey kicks off with designing the emoji dropdown. Now, to keep our code organized and our development experience smooth, we'll start by creating a separate component called EmojiDropdown. This component will take care of all the nitty-gritty details involved in selecting an emoji.

Making Emojis Come Alive: The Emoji Display

Next up, we're building the EmojiDisplay component. This is where the magic happens! With the Lottie animation library included and the Google Font CDN path, we'll animate the selected emoji and bring it to life.

Crafting the UI: The Main `EmojiSelector`

Now it's time to put the pieces together. In this step, we'll craft the main event: the EmojiSelector component. With this component, we manage emoji selection and the open/closed state of our dropdown.

High-fives, you've unlocked the secrets of building an awesome emoji selector component for Google's new Noto Animated Font.

Head over to the CodePen for the full code. Happy coding and emoji picking!

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

If you're interested in learning more about animated emojis, I highly recommend checking out Jennifer Daniel's blog post titled Updates to Emoji: New Characters, New Animation, New Color Customization, and More!

-webkit-box-reflect Property: Creating Reflection Effects in CSS

Mike Vardy — Sat, 26 Aug 2023 17:41:26 +0000

Cover Photo by Juan Davila on Unsplash

Have you ever come across web designs that feature stunning reflection effects on text or image elements? These captivating designs often leave us wondering about the underlying sorcery that brings them to life. Enter the -webkit-box-reflect CSS property—lesser-known gem that allows you to conjure reflection effects on your web content.

In this post, we'll delve into the magic of -webkit-box-reflect and explore how it can be harnessed to create eye-catching reflections in your designs.

Below is a live demo where you can see the -webkit-box-reflect property in action:

The Power of Reflections

Reflections add depth and elegance to your web designs. They create an illusion of elements being displayed on a reflective surface like glass or water. This technique has been used to add sophistication to various user interfaces, product showcases, and artistic displays.

The -webkit-box-reflect property, although prefixed for WebKit browsers like Safari and older versions of Chrome, lets you achieve these effects with ease.

At the time of writing we are still waiting for support in Firefox & Opera, and it limited to only newer versions of Edge full support details.

Basic Syntax

above, below, right, left
Are keywords indicating in which direction the reflection is to happen.

<length>
Indicates the size of the reflection.

<image>
Describes the mask to be applied to the reflection.

Basic Reflection

This code snippet below adds a basic reflection effect below the element's content.

Right-Side Reflection

This snippet creates a reflection on the right side of the element.

Masking the Reflection Source

In this snippet, the reflection is masked by the element's box, and the reflection source is stretched to fill the reflection area.

Repeating the Masked Reflection Source

The masked source image is repeated within the reflection area. This reflection effect resembles ripples in water.

Combining Reflections

To achieve a dual reflection both above and to the right of the element use this approach.

Limitations and Considerations

Despite its enchanting capabilities, the -webkit-box-reflect property has a few limitations to keep in mind:

Browser Support: This property is mainly supported by older WebKit-based browsers. Modern browsers might not consistently render the effects.
Responsiveness: Reflections created using this property aren't inherently responsive. Media queries might be needed for different screen sizes.
Limited Customization: Compared to other techniques, customization options for reflections are somewhat limited.

Feel free to tinker with the CodePen and experiment with different reflection effects to get a hands-on understanding of how the -webkit-box-reflect property works.

Enjoy the journey of adding captivating reflections to your web design toolkit!

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

Crafting Modal in ReactJS: A Quick Guide Using HTML & React Portals

Mike Vardy — Sat, 26 Aug 2023 11:45:27 +0000

Cover Photo by Logan Moreno Gutierrez on Unsplash

Modal dialogs are an indispensable tool in web applications, streamlining user interactions & providing a place for focused interactions. In this quick post, we'll delve into creating accessible modal dialogs in ReactJS using the new HTML <dialog> element and React Portals.

By combining the native capabilities of HTML5 with React's adaptability, we can construct modal dialogs that not only function smoothly but also cater to all users, including those who rely on screen readers.

Here’s a live demo of what we’re going to build!

Before we delve into the implementation, let's highlight the two key ingredients we'll be using:

HTML `<dialog>` Element

The <dialog> element, an inherent feature of HTML5, enables the creation of modal dialogs sans external libraries. It offers a straightforward way to overlay content atop the current page, preventing interaction with the underlying content until the dialog is dismissed.

React Portals

React Portals provide a mechanism to render components outside the regular DOM hierarchy. This is particularly handy when dealing with components like modal dialogs that require precise positioning relative to the viewport or other elements.

Let's start crafting an accessible modal dialog component by combining the strengths of the HTML <dialog> element and React Portals.

Create the `Modal` Component

Assuming your React project is up and running, go ahead and create a new file named Modal.js. Here's a snippet to get you started:

Styling and Accessibility Considerations

When building modal dialogs, several factors need attention: keyboard navigation, focus management, meaningful information for screen readers. Take note of the following considerations in the example:

The <h2> element with the id "dialog-title" serves as a descriptive title for the dialog.
The "Close" button is not only adorned with a meaningful label but also carries a CSS class for effortless styling.
An aria-modal attribute signifies that the dialog is indeed modal.

Integrate the Component

Now, it's time to integrate your freshly baked Modal component into your main application file (often App.js). Don't forget to include a button to trigger the opening of the modal dialog. Here's how it might look:

In this quick post, we've combined the HTML <dialog> element and React Portals to craft modal dialogs that seamlessly integrate accessibility, functionality.

This approach also comes with some SEO benefits. Search engines favour accessible and well-structured content, boosting your website's visibility and search rankings.

Also, when it comes to choosing a rendering approach, React Portals emerge as the superior choice. They facilitate clean code separation, maintaining the integrity of your application's architecture.

Happy coding, as you transform your web applications into hubs of accessibility and SEO excellence! Here's to hoping your users find your new Modal more user friendly then those GDPR "we use cookies" pop-ups.

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS

If you're interested in diving deeper, I highly recommend checking out the blog post titled Building a dialog component by Adam Argyle. This post delves into the intricacies of designing modal dialogs that not only meet accessibility standards but also provide an outstanding user experience.

DEV Community: Mike Vardy

How to Make Agents "think" Like a Maintainer

Four Principles of AI Code Governance

1. Role Definition

2. Negative Constraints

3. Context Scoping

4. Safety Barriers

Tool Comparison: Choose Your Weapon

Tool-by-Tool Implementation Guide

Cursor: Surgical Precision with MDC Rules

Windsurf: Continuous Governance

Warp: Folder-Scoped Terminal Agents

Claude Code: Self-Correcting Loops

Gemini Code Assist: Layered Cloud Constraints

GitHub Copilot: Path-Specific Safety

The Unified Approach: One Config to Rule Them All

Your 3-Step Action Plan

Step 1: Add One Negative Constraint ⏱️ 5 minutes

Step 2: Enable CI Hooks for One Directory ⏱️ 15 minutes

Step 3: Create Unified AGENTS.md ⏱️ 20 minutes

💡 The Bottom Line

Start Today:

📚 Additional Resources

Mike VardyFollow

You've probably noticed it. You're watching a video on YouTube, and the area around the video starts to softly glow, picking up the colors from the content itself.

Dynamic Theming: A Developer’s Guide to Adaptive Color in UI

Mike Vardy ・ Nov 9

Dynamic Theming: A Developer’s Guide to Adaptive Color in UI

The YouTube Approach: An "Ambient Glow"

The Competition: Spotify vs. Netflix

Netflix: All About the Imagery

Spotify: All About the Album Art

How to Get the Effect: From DIY to Drop-in

Option 1: The DIY Route (The Hard Way)

Option 2: General Color-Sampling Libraries

Option 3: Instant YouTube-Style Glow

A Note on Accessibility

Final Thoughts

Mike VardyFollow

Transforming Chaos: Unleashing the Power of Ramda in ReactJS

An Introduction to Ramda

Cleaning Up State Management

Taming Side Effects

Simplifying Components with Ramda

More Advanced Examples of Ramda

Mike VardyFollow

How to Add a Large List of Elements to the DOM Efficiently Using DocumentFragments 🧩

The DocumentFragments API

The Problem with Traditional DOM Manipulation

Creating and Using DocumentFragments

Mike VardyFollow

Enhance Your React Components ✨ /w a Glossy Shine Effect

Styling the Gloss Effect

Crafting the useGlossEffect Hook

🌟 addShineClass()

🗺️ mapNumberRange()

🧮 calculateTransformValues()

✨ applyTransform()

Bringing It All Together

Usage

Mike VardyFollow

Creating a Simple Custom JSX Parser /w Practical Example

The Missing Link: The Essence of JSX

Unraveling the Parser: Anatomy of Custom JSX Conversion

The Practical Use-case for Custom JSX Parsing

Guiding Transformation with @jsx Pragma in Babel

Crafting Your Custom JSX Parser

Making it Real: Integrating into Familiar Syntax

SSR-Proof Effects: Control Client-Side Lifecyles /w some React Magic

The Benefits

Use Cases for useClientLayoutEffect

Building a Simple 🎶 Music Synthesizer 🎵 /w JavaScript

HTML Markup

Setup the Initial Variables

The createOscillatorNode Function:

Playback Functions

The setupButtonListeners Function:

Mike VardyFollow

Build a Animated Emoji Selector /w React, Noto & Lottie Animations

What are LottieFiles?

Step 3: Create Unified `AGENTS.md` ⏱️ 20 minutes

The `DocumentFragments` API

Creating and Using `DocumentFragments`

Crafting the `useGlossEffect` Hook

🌟 `addShineClass()`

🗺️ `mapNumberRange()`

🧮 `calculateTransformValues()`

✨ `applyTransform()`

Use Cases for `useClientLayoutEffect`

The `createOscillatorNode` Function:

The `setupButtonListeners` Function:

Crafting the UI: The Main `EmojiSelector`

HTML `<dialog>` Element

Create the `Modal` Component