Forem: Ajay Shukla

Context-Aware Text Sanitization in JavaScript: Best Practices for Modern Web Apps

Ajay Shukla — Sat, 29 Mar 2025 15:59:55 +0000

Common Challenges
Better Approach
React Implementation
Serverless API Validation
Library Comparison
Best Practices

When handling user input in web applications, text sanitization is a critical—yet often overlooked—aspect of development. Developers face the challenge of standardizing data for storage while preserving meaningful formatting for display. In this post, we explore common challenges and present effective, context-aware strategies for text sanitization in JavaScript.

Common Text Sanitization Challenges

Developers frequently encounter these issues when sanitizing user input:

Lost Readability: Converting "Product-ID123" to "productid123" can make it harder to identify the original value.
Brand Name Distortion: Brand names like "iPhone" lose their proper casing.
Context Ignorance: Different data types (e.g., product codes versus user names) require distinct sanitization rules.
Inflexible Special Character Handling: Some approaches strip away essential characters like hyphens or spaces.
Balancing User Experience and Data Integrity: Ensuring data consistency without degrading the user interface.

Consider a traditional approach:

// Traditional approach
function basicSanitize(input) {
  return input.toLowerCase().replace(/[^a-z0-9]/g, '');
}

basicSanitize("Product-ID123");  // "productid123"
basicSanitize("iPhone 15 Pro");  // "iphone15pro"

✅ Before sanitization: Product-ID123

❌ After basic sanitization: productid123

This method standardizes input for storage but loses the formatting that aids readability and recognition.

A Better Approach to Text Sanitization

Modern applications benefit from context-aware sanitization. Here’s a flexible function that allows you to tailor sanitization based on the context—whether for display or database comparison:

// Context-aware sanitization approach
function smartSanitize(input, options = {}) {
  const {
    preserveCase = true,
    preserveSpaces = true,
    preserveHyphens = false,
    preserveUnderscores = false
  } = options;

  let result = input;

  // Remove characters based on options
  if (!preserveHyphens) {
    result = result.replace(/-/g, '');
  }
  if (!preserveUnderscores) {
    result = result.replace(/_/g, '');
  }
  if (!preserveSpaces) {
    result = result.replace(/\s/g, '');
  }

  // Remove remaining special characters (allowing word characters, spaces, hyphens, underscores)
  result = result.replace(/[^\w\s-_]/g, '');

  // Adjust case if needed
  if (!preserveCase) {
    result = result.toUpperCase();
  }

  return result;
}

// For display purposes (preserving formatting)
console.log(smartSanitize("Product-ID123", { preserveHyphens: true }));  
// Output: "Product-ID123"

// For database comparison (standardized)
console.log(smartSanitize("Product-ID123", { preserveCase: false, preserveHyphens: false }));  
// Output: "PRODUCTID123"

This method lets you maintain important formatting when needed, while also providing a standardized version for data comparisons.

Real World Implementation in React

Below is an example of integrating a context-aware sanitization approach into a React form component. In production, you might use a dedicated library like purify-text-match for well tested code, additional features and robustness.

import { useState } from 'react';
// import purify-text-match library:
import { sanitizeString } from 'purify-text-match';

function ProductCodeValidator() {
  const [input, setInput] = useState('');
  const [isValid, setIsValid] = useState(false);
  const [error, setError] = useState('');

  // Sample valid codes from your database
  const validCodes = ['PROD-001', 'PROD-002', 'PROD-003'];

  const validateCode = (value) => {
    // For display: preserve formatting
    const displayValue = sanitizeString(value, {
      preserveCase: true,
      preserveHyphens: true
    });

    // For comparison: standardize formatting
    const normalizedInput = sanitizeString(value, {
      preserveCase: false,
      preserveHyphens: false
    });

    // Check if normalized input matches any normalized valid code
    const isMatch = validCodes.some(code => {
      const normalizedCode = sanitizeString(code, {
        preserveCase: false,
        preserveHyphens: false
      });
      return normalizedInput === normalizedCode;
    });

    setIsValid(isMatch);
    setError(isMatch ? '' : 'Invalid product code');
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
          validateCode(e.target.value);
        }}
        placeholder="Enter product code"
      />
      {error && <div className="error">{error}</div>}
      {isValid && <div className="success">Valid code!</div>}
    </div>
  );
}

Serverless API Validation Example

For backend validation, you can adopt a similar approach in your serverless functions:

// Example AWS Lambda handler
export async function handler(event) {
  const { productCodes } = JSON.parse(event.body);
  const allowedCodes = await fetchAllowedProductCodes();

  // Sanitize and validate each code
  const validationResults = productCodes.map(code => {
    const normalizedInput = sanitizeString(code, { preserveCase: false });

    const matchingCode = allowedCodes.find(allowed => {
      const normalizedAllowed = sanitizeString(allowed, { preserveCase: false });
      return normalizedInput === normalizedAllowed;
    });

    return {
      original: code,
      sanitized: normalizedInput,
      matched: !!matchingCode,
      matchedWith: matchingCode || null
    };
  });

  const validItems = validationResults.filter(item => item.matched);
  const invalidItems = validationResults.filter(item => !item.matched);

  return {
    statusCode: invalidItems.length === 0 ? 200 : 400,
    body: JSON.stringify({
      valid: validItems.length,
      invalid: invalidItems.length,
      invalidItems: invalidItems.map(item => item.original)
    })
  };
}

Comparison of Popular Sanitization Libraries

Library	Strengths	Weaknesses	Best For
DOMPurify	HTML sanitization, XSS prevention	Not focused on text normalization	Security-focused applications
validator.js	Broad validation capabilities	Limited sanitization options	General form validation
sanitize-html	HTML cleaning	Overkill for simple text tasks	Content management
purify-text-match	Flexible text normalization with context	Newer library	Input normalization and comparison
string-strip-html	HTML removal	Limited to HTML	Content extraction

Best Practices for Text Sanitization

Separate Display and Comparison: Use distinct rules for what users see versus how data is standardized for storage.
Preserve Meaningful Formatting: Avoid stripping formatting elements that aid readability (e.g., spaces and hyphens in product codes).
Context Matters: Tailor your approach based on the type of data (e.g., product codes, names, descriptions).
Be Consistent: Apply the same sanitization logic throughout your application.
Test Thoroughly: Ensure your approach works with international characters, emojis, and edge-case inputs.

Conclusion

Effective text sanitization requires balancing data consistency with user experience. By adopting context-aware strategies—whether through a custom solution like smartSanitize or a dedicated library like purify-text-match, it's a Open-source lightweight Zero-dependencies, high-performance string sanitization and matching utility that works across all Node.js environments including NestJS, Next.js, Deno, Vue.js applications, Angular applications, Svelte/SvelteKit, Solid.js, Remix, Gatsby, React Native, NativeScript, Capacitor, Astro and serverless functions developed by me—you can build more robust, user-friendly applications.

💡 Pro Tip: Always consider both security and user experience when implementing sanitization strategies. What works for security might not work for usability, and vice versa.

What text sanitization challenges have you encountered? Share your thoughts and experiences in the comments!

Why Rust is Not Just Hype: Embracing Both Sides of the Programming Coin

Ajay Shukla — Fri, 05 Jan 2024 11:58:23 +0000

In the ever-evolving landscape of programming languages, Rust has emerged as a shining star, lauded for its unique blend of features and touted as the "future of systems programming." But, Is Rust truly deserving of its accolades, or just the latest fad caught in the swirling vortex of tech trends? Today, we dissect the merits of this versatile language, examining its potent cocktail of low-level and high-level features, and ultimately assessing if it stands tall against competing contenders like Zig.

The beauty of Rust lies in its ability to gracefully juggle the seemingly irreconcilable worlds of low-level and high-level programming. It inherits the raw performance and control of languages like C++, enabling direct memory manipulation and fine-grained resource management. This empowers developers to craft highly efficient systems applications, operating systems, and embedded software where every byte and cycle counts.

But unlike its low-level brethren, Rust doesn't cast developers adrift in a sea of pointers and manual memory management. Its ownership and borrowing system enforces memory safety at compile time, eliminating entire classes of runtime errors like dangling pointers and memory leaks. This translates to dramatically improved stability and resilience, particularly in mission-critical applications where crashes can have dire consequences.

Furthermore, Rust embraces high-level abstractions through a rich standard library and a thriving third-party ecosystem. Powerful collections, concurrency primitives, and error handling mechanisms readily available out-of-the-box, drastically reducing boilerplate and development time. Additionally, features like pattern matching and closures bring the expressive power of functional programming, enabling concise and readable code.

The Impact on Development: Speed, Safety, and Simplicity

This unique blend of features has a profound impact on the development process:

Increased Speed: Compile-time memory checks eliminate costly runtime debugging, often leading to faster development cycles.
Enhanced Security: Memory safety mitigates vulnerabilities, making Rust ideal for security-sensitive applications.
Improved Code Quality: Strong typing and enforced ownership reduce bugs and promote cleaner, more maintainable code.
Smoother Learning Curve: While Rust has a steeper initial learning curve due to its novel ownership system, its robust documentation and supportive community ease the transition.

Rust vs. Zig: A Tale of Two Contenders

Zig, another rising star in the systems programming sphere, often finds itself compared to Rust. Both languages share strengths like memory safety and zero-cost abstractions, but also harbor distinct differences:

Complexity: Rust's ownership system, while powerful, can be challenging to grasp for beginners. Zig takes a simpler approach with manual memory management and garbage collection.
Ecosystem: Rust boasts a larger and more mature ecosystem, including libraries, frameworks, and tooling. Zig's ecosystem is rapidly growing but still lags behind.
Performance: Both languages offer exceptional performance, but Rust generally edges out Zig in memory footprint and raw speed.

Ultimately, the choice between Rust and Zig boils down to specific needs and project requirements. For complex projects demanding strict memory safety and a mature ecosystem, Rust shines. For smaller projects seeking a simpler syntax and efficient memory management, Zig might be a compelling option.

Rust: More Than Just Hype

So, is Rust merely another overhyped trend? The answer is a resounding no. Its unique blend of low-level power and high-level abstractions, coupled with its focus on speed, safety, and code quality, make it a serious contender in the realm of systems programming. While it may not be the perfect fit for every project, Rust deserves its place in the spotlight, offering a promising path towards more robust, secure, and performant software.

This is just a glimpse into the world of Rust and its impact on development. As the language continues to evolve and its community thrives, we can expect even more innovation and excitement in the years to come. And who knows, maybe one day, the whispers of hype will be replaced by the resounding echoes of a revolution in programming.

Comment down your thoughts

Happy Coding :)

The Challenges of Full Stack Development

Ajay Shukla — Sat, 04 Nov 2023 08:31:29 +0000

Full stack development is a term used to describe a developer who can work with both the front end and the back end of a website or application. A full stack developer typically has a good understanding of HTML, CSS, and JavaScript for building the user interface and a backend programming language like PHP, Ruby on Rails, or Node.js for powering the application. In addition, a full stack developer should have some knowledge of server administration, database management, and DevOps (the process of developing and deploying software).

While full stack development can be an exciting and rewarding career path, it is not without its challenges. In this blog post, we will explore some of the common problems that full stack developers face and suggest some ways to overcome them.

Working with Multiple Technologies

One of the main challenges of full stack development is working with multiple technologies. A full stack developer needs to be proficient in both front end and back end development, which means that they need to be familiar with a wide range of programming languages and frameworks. For example, for front end development, they might use HTML, CSS, and JavaScript. For back end development, they might use PHP, Ruby on Rails, or Node.js. These technologies are constantly evolving, and it can be difficult to stay abreast of all the new developments.

One way to cope with this challenge is to focus on the fundamentals of each technology and learn the best practices and design patterns that apply to them. This way, you can avoid getting overwhelmed by the details and nuances of each framework or library. Another way is to use online resources and communities to keep yourself updated on the latest trends and technologies. For example, you can follow blogs, podcasts, newsletters, and social media accounts that cover full stack development topics. You can also join online forums, groups, and platforms where you can ask questions, share your experiences, and learn from other full stack developers.

Managing Front End and Back End Development

Another challenge of full stack development is managing both front end and back end development. This can be a difficult task because there are often different team members working on each aspect of the project (front end vs. back end). This can lead to communication issues, coordination problems, and inconsistency in the code quality and style.

One way to address this challenge is to use a common set of tools and standards for both front end and back end development. For example, you can use a version control system like Git to manage your code, a code editor like Visual Studio Code to write your code, and a code formatter like Prettier to format your code. You can also use a code linter like ESLint to check your code for errors and a code style guide like Airbnb JavaScript Style Guide to ensure consistency in your code. These tools and standards can help you maintain a clean and organized codebase and avoid conflicts and bugs.

Another way to tackle this challenge is to use a full stack framework that integrates both front end and back end development. For example, you can use a framework like Meteor, which allows you to write your code in JavaScript for both the client and the server. Meteor also provides features like live reloading, data synchronization, and authentication that can simplify your development process. Using a full stack framework can help you reduce the complexity and overhead of managing multiple technologies and focus on the core functionality of your application.

Testing and Debugging Code

A third challenge of full stack development is testing and debugging code. Testing and debugging code can be a time-consuming and tedious process, especially when you have to deal with multiple layers of the application (front end, back end, database, etc.). You also have to ensure that your code works well across different browsers, devices, and platforms.

One way to overcome this challenge is to use automated testing tools and frameworks that can help you verify the functionality and performance of your code. For example, you can use a testing tool like Jest to write unit tests, integration tests, and snapshot tests for your code. You can also use a testing framework like Cypress to write end-to-end tests that simulate user interactions with your application. These testing tools and frameworks can help you catch errors and bugs early and ensure the quality and reliability of your code.

Another way to deal with this challenge is to use debugging tools and techniques that can help you identify and fix the issues in your code. For example, you can use a debugging tool like Chrome DevTools to inspect and modify your code in the browser. You can also use a debugging technique like console.log to print out the values and messages in your code. These debugging tools and techniques can help you understand the behavior and state of your code and resolve the problems quickly and efficiently.

Conclusion

Full stack development is a challenging but rewarding career path that requires a broad and diverse skill set. Full stack developers have to work with multiple technologies, manage both front end and back end development, and test and debug code. These challenges can be overcome by using online resources and communities, common tools and standards, full stack frameworks, automated testing tools and frameworks, and debugging tools and techniques. By following these tips, you can become a more effective and efficient full stack developer and create amazing websites and applications.

Write down you experience in comments below

I hope this blog post was helpful for you. If you have any questions or feedback, please leave a comment below. Thank you for reading! 😊

Best Coding Practices and Tools for React Developers

Ajay Shukla — Sat, 30 Sep 2023 05:56:10 +0000

React is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can handle data and interactions efficiently. However, to get the most out of React, you need to follow some best coding practices and use some helpful tools that can enhance your development process. In this blog post, I will share some tips and resources for React developers who want to write clean, maintainable, and performant code.

Coding Practices

Coding practices are the habits and conventions that you follow when writing code. They can affect the quality, readability, and maintainability of your code. Here are some coding practices that we recommend for React developers:

Use functional components

Use functional components instead of class components. Functional components are simpler, easier to test, and support hooks, which are a powerful way to add state and side effects to your components¹.

Use hooks

Use hooks to manage state and side effects. Hooks are functions that let you use state and other React features without writing a class component². They can help you avoid complex lifecycle methods, reduce code duplication, and simplify your logic.

Use custom hooks

Use custom hooks to extract reusable logic. Custom hooks are functions that use other hooks inside them³. They allow you to create your own abstractions and reuse them across multiple components. For example, you can create a custom hook to fetch data from an API, handle loading and error states, and update the UI accordingly.

Use Redux or Context API

For managing state in your React application, consider using Redux or the Context API. Redux is excellent for large-scale applications, while the Context API simplifies state management for smaller projects.Here's a simple example of using the Context API for state management:

// Create a context
const MyContext = React.createContext();

// Wrap your app with the context provider
function App() {
  const [state, setState] = useState(initialState);

  return (
    <MyContext.Provider value={{ state, setState }}>
      {/* Your components */}
    </MyContext.Provider>
  );
}

// Access the context in child components
function ChildComponent() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>Value from context: {state.value}</p>
      <button onClick={() => setState({ value: 'Updated' })}>Update</button>
    </div>
  );
}

Folder Structure

Organize your React components into a clear folder structure. A common structure includes folders for components, containers, and utility files:

/src
  /components
    Button.js
    /Header
      Header.js
      Header.css
  /containers
  /utils

This structure makes it easy to locate and manage your components as your project grows.

Component File Naming

Follow a consistent naming convention for your component files, such as PascalCase for components and camelCase for their corresponding files. For example:
MyComponent.js
myComponent.css

Code Splitting

Optimize your React application's performance by implementing code splitting. This allows you to load only the necessary code chunks when a user navigates to a specific route. You can use React's built-in lazy and Suspense:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Use PropTypes

Use PropTypes or TypeScript to check the types of your props. Props are the data that you pass from a parent component to a child component⁴. Checking the types of your props can help you avoid bugs, document your components, and enforce consistency. PropTypes is a built-in library that lets you specify the types of your props as well as whether they are required or optional⁵. TypeScript is a superset of JavaScript that adds static type checking and other features⁶.

Use ESLint and Prettier

Use ESLint and Prettier to enforce code style and quality.ESLint and Prettier are essential tools for maintaining a consistent code style in your React projects. ESLint is a tool that analyzes your code and finds potential errors and bad practices⁷. Prettier is a tool that formats your code according to a set of rules⁸. Together, they can help you write consistent, clean, and error-free code.

Install ESLint and Prettier as development dependencies:

npm i eslint prettier --save-dev

Create ESLint and Prettier configurations:

// .eslintrc.js
module.exports = {
  extends: ['airbnb', 'prettier'],
  parser: 'babel-eslint',
  rules: {
    // Add any custom rules or overrides here
  },
};// .prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
};

Integrate ESLint and Prettier with your code editor for real-time linting and formatting.

Use Jest and other React Testing Library

Use Jest and React Testing Library to test your components. Jest is a testing framework that lets you write and run tests for your code⁹. React Testing Library is a library that helps you test your React components in a way that simulates how users interact with them. They can help you ensure that your components work as expected and prevent regressions.

Tools

Tools are the software applications or libraries that you use to assist your development process. They can help you create, edit, debug, test, deploy, and optimize your code. Here are some tools that we recommend for React developers:

Create React App is a tool that sets up a modern React project for you with no configuration¹¹. It provides you with a preconfigured environment that includes webpack, Babel, ESLint, Jest, and other tools. It also handles hot reloading, code splitting, service workers, and other features for you.

1 Create React App:

npx create-react-app my-react-app

2 Install dependencies:

cd my-react-app
npm install eslint prettier eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y --save-dev

3 Start App:

npm start

Or You can use Vite. For React developers looking for a lightweight and high-performance alternative, Vite is an excellent choice. Vite's development server leverages native ES modules, enabling rapid reloading of your application.

1 Create Vite App using React template:

npx create-vite my-vite-app --template react
cd my-vite-app

2 Install required :dependencies:Similar to Create React App, you can set up ESLint and Prettier for Vite, as mentioned earlier.

3 Start your Vite project:

npm run dev

React Developer Tools is a browser extension that lets you inspect and debug your React components in the browser¹². It adds a new tab to your browser's devtools where you can see the component tree, the props and state of each component, and the performance of your app.

Storybook is a tool that lets you develop and test your React components in isolation from your app¹³. It provides you with a UI where you can browse and interact with your components in different states and scenarios. It also supports addons that can enhance your component development experience.

Consider using the Airbnb JavaScript style guide for React projects. It provides a well-defined set of rules and best practices for writing clean and maintainable code. You can install the Airbnb ESLint config:

npx install-peerdeps --dev eslint-config-airbnb

React Styleguidist is a tool that lets you document and showcase your React components in an interactive style guide. It allows you to write Markdown documentation for each component along with live examples that you can edit and run in the browser. It also supports hot reloading, code highlighting, prop types validation, and other features.

Next.js is a framework that lets you build fast and scalable web applications with React. It supports server-side rendering, static site generation, routing, code splitting, image optimization, internationalization, and other features out of the box. It also has a rich ecosystem of plugins and integrations that can extend its functionality.

1 Create Next App:

npx create-next-app my-next-app

2 Start development server

cd my-next-app
npm run dev

3 Build and Deploy:

npm run build

This command will create an optimized production build of your Next.js app.To deploy your Next.js app, you can choose from various hosting options, including Vercel, Netlify, or your own server.

React is a powerful library for building user interfaces, but it also requires some best coding practices and tools to make the most of it. In this blog post, I have shared some tips and resources that can help you write clean, maintainable, and performant code with React. I hope that this post has been useful for you and that you will apply these practices and tools in your next React project.

How to create a ripple effect with Tailwind Elements React

Ajay Shukla — Mon, 25 Sep 2023 08:09:40 +0000

Tailwind Elements is a library of UI components for React that are built with Tailwind CSS, a utility-first CSS framework. One of the components that Tailwind Elements offers is the Ripple component, which creates a ripple effect when you click on an element. In this blog post, I will show you how to use the Ripple component and customize its appearance and behavior.

Before we dive into the implementation, ensure that you have Node.js version 16.17.0 or 18.1.0 (or higher) installed. If you encounter issues with vite.config.js, consider using Vite version 4.3.9.

Create a Vite Project

Start by creating a new Vite project or use an existing one. If you're creating a new project, follow these commands

npm create vite@latest my-project -- --template react-ts
cd my-project

Install Tailwind CSS

Next, install Tailwind CSS and its dependencies and initialize the Tailwind configuration file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind

In the tailwind.config.js file add paths to your HTML files and customize your Tailwind settings according to your project's needs.

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/tw-elements-react/dist/js/**/*.js"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [require("tw-elements-react/dist/plugin.cjs")]
}

Add Tailwind Directives

Include the necessary Tailwind directives in your src/index.css file to enable the use of Tailwind classes in your project.

/* src/index.css */
@tailwind base;

@layer base {
  html {
    @apply text-neutral-800;
  }
  html.dark {
    @apply text-neutral-50;
    @apply bg-neutral-800;
  }
}

@tailwind components;
@tailwind utilities;

Install Tailwind Elements React

Install the tw-elements-react package to access a wide range of stylish UI components.

npm install tw-elements-react

Import CSS

In your src/main.tsx file, import the tw-elements-react CSS file to apply the styles to your components.

// src/main.tsx
import "tw-elements-react/dist/css/tw-elements-react.min.css";

Start Building

With everything set up, you can now start building your web app. Utilize components like TERipple from tw-elements-react to add interactive and stylish elements to your project.

import React from "react";
import { TERipple } from "tw-elements-react";

export default function RippleBasicExample(): JSX.Element {
  return (
    <TERipple>
      <button
        type="button"
        className="block w-full rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
      >
        Button
      </button>
    </TERipple>
  );
}

Follow this for more examples

Run Your App

Finally, start your Vite app and witness your fast and stylish web application in action!

npm run dev

Conclusion: With Vite's speed and Tailwind Elements' stylish components, you can create web applications that not only load quickly but also look great. This combination of tools simplifies the development process, allowing you to focus on building the best user experience possible. Give it a try, and you'll be amazed at how easy and efficient web development can be with Vite and Tailwind Elements. Happy coding!

Forem: Ajay Shukla

Context-Aware Text Sanitization in JavaScript: Best Practices for Modern Web Apps

Table of Contents

Common Text Sanitization Challenges

A Better Approach to Text Sanitization

Real World Implementation in React

Serverless API Validation Example

Comparison of Popular Sanitization Libraries

Best Practices for Text Sanitization

Conclusion

Why Rust is Not Just Hype: Embracing Both Sides of the Programming Coin

The Impact on Development: Speed, Safety, and Simplicity

Rust vs. Zig: A Tale of Two Contenders

Rust: More Than Just Hype

Comment down your thoughts

The Challenges of Full Stack Development

Working with Multiple Technologies

Managing Front End and Back End Development

Testing and Debugging Code

Conclusion

Best Coding Practices and Tools for React Developers

Coding Practices

Use functional components

Use hooks

Use custom hooks

Use Redux or Context API

Folder Structure

Component File Naming

Code Splitting

Use PropTypes

Use ESLint and Prettier

Use Jest and other React Testing Library

Tools

How to create a ripple effect with Tailwind Elements React

Create a Vite Project

Install Tailwind CSS

Configure Tailwind

Add Tailwind Directives

Install Tailwind Elements React

Import CSS

Start Building

Run Your App