DEV Community: John Au-Yeung

Exploring React UI Libraries

John Au-Yeung — Thu, 05 Jun 2025 00:59:06 +0000

React gives you the flexibility to build UIs however you want—but with that flexibility comes a big question: which UI library should you use? There are tons out there, each with different philosophies, features, and trade-offs.

Some are full design systems. Others are just solid sets of base components.

Picking the right one can depend on what kind of app you're building, how much customization you need, or just what feels right to code with.

Let’s dive into a few of the most popular React UI libraries and show off one or two standout features for each—with actual code so you can get a taste of what using them feels like.

MUI

Starting with MUI—formerly known as Material-UI—it’s one of the most full-featured libraries available.

You get a deep component set, strong accessibility support, and Google’s Material Design baked in. One of the first things developers love is how fast you can get a sleek layout together.

Here’s a simple MUI form with a button:

import { TextField, Button, Container } from '@mui/material';

function LoginForm() {
  return (
    <Container maxWidth="sm">
      <TextField label="Email" fullWidth margin="normal" />
      <TextField label="Password" type="password" fullWidth margin="normal" />
      <Button variant="contained" color="primary">Login</Button>
    </Container>
  );
}

Everything looks good out of the box. You barely need to write custom styles. If you want to tweak things, the theme system gives you deep control—but you can ignore it if you just want to move fast.

Chakra UI

Now jump over to Chakra UI, which has a different vibe. It emphasizes simplicity and composability using “style props.”

You can apply spacing, colors, and layout just by passing props—no CSS file or styled-components needed.

And everything is accessible by default.

Here’s the same kind of form using Chakra:

import { Box, Input, Button, Stack } from '@chakra-ui/react';

function LoginForm() {
  return (
    <Box maxW="sm" mx="auto" mt={8}>
      <Stack spacing={4}>
        <Input placeholder="Email" />
        <Input placeholder="Password" type="password" />
        <Button colorScheme="teal">Login</Button>
      </Stack>
    </Box>
  );
}

It’s concise and readable, and you get responsive, accessible components with almost no boilerplate.

Chakra also makes theming feel natural. If you’re building something modern and lightweight, it’s a great experience.

Tailwind and Headless UI

While we’re talking about styling and control, let’s bring in Tailwind CSS—and more specifically, Headless UI, which is made to pair with it.

Headless UI gives you functional components without styling, but with full accessibility.

For example, here’s how a dropdown menu looks using Headless UI and Tailwind:

import { Menu } from '@headlessui/react';

function Dropdown() {
  return (
    <Menu as="div" className="relative inline-block text-left">
      <Menu.Button className="px-4 py-2 bg-blue-600 text-white rounded">Options</Menu.Button>
      <Menu.Items className="absolute mt-2 w-48 bg-white border rounded shadow-lg">
        <Menu.Item>
          {({ active }) => (
            <button className={`${active ? 'bg-blue-100' : ''} w-full px-4 py-2 text-left`}>
              Profile
            </button>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  );
}

You control all the styling with Tailwind, but you don’t have to write any of the keyboard or ARIA logic.

That’s a big win if you like to design your own look but still want accessibility to be handled well.

Now, let’s talk about Ant Design, or AntD. It’s widely used in enterprise apps and internal dashboards. It gives you advanced components out of the box, including things like tables with filtering and pagination, or date pickers with locale support.

Here’s how fast you can build a data table:

import { Table } from 'antd';

const data = [
  { key: '1', name: 'John Doe', age: 32, email: 'john@example.com' },
  { key: '2', name: 'Jane Smith', age: 28, email: 'jane@example.com' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Email', dataIndex: 'email' },
];

function UserTable() {
  return <Table dataSource={data} columns={columns} />;
}

That’s it. You get sorting, styling, and responsiveness with barely any code. AntD leans opinionated, so it shines when you want consistency and don't need to heavily restyle every component.

React Bootstrap

Then there’s React Bootstrap, which brings the classic Bootstrap framework into the React world. If you’ve used Bootstrap in the past, it’ll feel familiar.

It’s not trendy, but it’s steady and well-documented.

Here’s a simple layout using React Bootstrap:

import { Form, Button, Container } from 'react-bootstrap';

function ContactForm() {
  return (
    <Container>
      <Form>
        <Form.Group controlId="formName">
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Enter your name" />
        </Form.Group>
        <Form.Group controlId="formMessage" className="mt-3">
          <Form.Label>Message</Form.Label>
          <Form.Control as="textarea" rows={3} />
        </Form.Group>
        <Button className="mt-3" variant="primary" type="submit">
          Send
        </Button>
      </Form>
    </Container>
  );
}

It’s simple and structured. If your team is used to Bootstrap, or you're maintaining an older UI with new React features, React Bootstrap is an easy win.

Mantine

Now for a slightly newer contender: Mantine. It’s modern, modular, and offers both components and custom hooks.

You get thoughtful defaults, dark mode support, and nice utility features like modals and notifications built right in.

Let’s check out a color picker with Mantine:

import { ColorInput } from '@mantine/core';

function ThemeSettings() {
  return <ColorInput label="Pick a primary color" placeholder="#ffffff" />;
}

Or a notification, which is shockingly simple:

import { showNotification } from '@mantine/notifications';

showNotification({
  title: 'Success!',
  message: 'Your form was submitted',
  color: 'green',
});

These kinds of helpers make Mantine feel like it’s thinking ahead for you.
It’s gaining popularity quickly, especially for teams that want built-in solutions without sacrificing customizability.

And finally, if you want to go as low-level as possible while still avoiding accessibility pitfalls, look at Radix UI. Radix provides primitive components—like popovers, sliders, or tabs—but leaves all the styling to you.

Here’s a simple example of a popover:

import * as Popover from '@radix-ui/react-popover';

function HelpPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className="bg-gray-200 p-2 rounded">?</Popover.Trigger>
      <Popover.Content className="bg-white border p-4 rounded shadow-md">
        Here's some helpful info.
      </Popover.Content>
    </Popover.Root>
  );
}

It handles positioning, focus trapping, accessibility—but not styles.

It's perfect if you want to bring your own design system but still want accessibility and usability covered.

Conclusion

Each of these libraries shines in its own way. MUI gives you polish and structure.

Chakra offers intuitive styling. Headless UI and Radix give you raw power and accessibility.

AntD is great for enterprise needs. React Bootstrap offers legacy familiarity. Mantine brings convenience and elegance.

There’s no universal answer. It’s about matching the library to your needs—how much freedom you want, how much you want to customize, and what kind of project you’re building.

A Practical Guide to Prettier

John Au-Yeung — Thu, 05 Jun 2025 00:52:05 +0000

If you've spent any time working with JavaScript, you know how quickly formatting differences can spiral out of control. One person uses double quotes, someone else prefers single; some files end in semicolons, others don’t; indentation seems to shift with the wind. Before long, you’re spending more time on formatting debates than on actual development.

This is where Prettier comes in—and it’s a game changer.

Prettier is an opinionated code formatter that takes the burden of formatting off your plate. It parses your JavaScript and rewrites it with consistent style rules—rules that are enforced uniformly across every file.

It doesn’t ask for your opinion; it just gets the job done. At first, that can feel restrictive. But the longer you use it, the more you appreciate that consistency.

Prettier doesn’t just clean up your code; it reduces friction in your workflow and in your team.

Let’s walk through how you can get Prettier up and running in a JavaScript project.

First, make sure you have Node.js installed. Once that’s ready, open your terminal, navigate to your project folder, and run:

npm init -y

This initializes a package.json file if you don’t already have one. Then, install Prettier as a development dependency:

npm install --save-dev prettier

Once that’s done, you can run Prettier directly from the command line using:

npx prettier .

This will format all compatible files in your current directory. But usually, you'll want to configure it to suit your preferences a bit. While Prettier doesn’t allow deep customization (by design), it does let you tweak a few options like line width, tabs vs. spaces, and quote style.

Create a configuration file in your project root. You can use .prettierrc, and inside that file, add something like this:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

This tells Prettier to use semicolons, single quotes, 2-space tabs, and trailing commas where valid in ES5.

You can also create a .prettierignore file—similar to .gitignore—to exclude certain files or folders from formatting. For example:

node_modules
dist
build

Now, for a smoother experience, especially during development, it’s worth integrating Prettier with your code editor. If you’re using Visual Studio Code, search for the "Prettier – Code formatter" extension in the Extensions tab and install it. Once installed, open your VS Code settings and enable “Format on Save.” This way, every time you save a file, Prettier will auto-format it in the background.

Next, consider adding a formatting script to your package.json so anyone working on your project can quickly run Prettier:

"scripts": {
  "format": "prettier --write ."
}

Now, you can run npm run format to format the entire codebase. This is especially helpful before committing changes or merging branches.

If you’re working on a team or planning to contribute to open source, you can go a step further by integrating Prettier into your version control process. Tools like Husky and lint-staged let you run Prettier on staged files before every commit. That way, no code enters the repository without being cleaned up first.

To do this, first install Husky and lint-staged:

npm install --save-dev husky lint-staged

Then, add the following to your package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["prettier --write"]
}

This setup will automatically format JavaScript files when you commit them, helping you and your team maintain a clean, consistent codebase with very little overhead.

Once Prettier is part of your project, using it becomes second nature. You stop worrying about indentation or bracket placement and just write code. Prettier handles the polish.

It’s easy to underestimate how much mental clutter formatting decisions create until it’s gone. Prettier clears that clutter. And not just for individuals—it simplifies collaboration, speeds up code reviews, and helps onboard new developers faster. Instead of guessing how code should look, everyone follows the same rules, enforced by the same tool, automatically.

Yes, Prettier is opinionated. And sure, it might clash with your preferences now and then. But what it gives you in return—consistency, clarity, and peace of mind—is more than worth it.

Most developers who try it end up sticking with it, not because they lose control, but because they gain focus.

So if you haven’t tried Prettier yet, now’s a perfect time. Add it to a small project.

Let it reformat your scripts. Watch how it cleans things up. It won’t take long before you start wondering how you ever coded without it.

The Best ESLint Rules for Clean and Consistent JavaScript Code

John Au-Yeung — Thu, 05 Jun 2025 00:49:00 +0000

ESLint has become a crucial part of modern JavaScript development. It helps maintain code quality, consistency, and readability by enforcing specific rules.

The tool acts like a virtual pair of eyes that examines your code for patterns that may lead to errors or suboptimal practices. With thousands of possible rules available, developers often struggle to choose the most beneficial ones.

In this article we explore some of the best ESLint rules that strike a balance between rigor and flexibility—without overwhelming you.

no-unused-vars

One of the first and most helpful rules to consider is no-unused-vars.

This rule prevents the declaration of variables that are never used. While it may seem harmless to leave a variable lying around, it can signal unfinished logic or unnecessary clutter in your codebase.

It also leads to cognitive overhead for other developers trying to understand why a variable exists.

eqeqeq

Another critical rule is eqeqeq, which enforces the use of strict equality operators (=== and !==) instead of their loose counterparts (== and !=).

Loose equality can lead to unexpected type coercions, which often cause bugs that are hard to trace.

By enforcing strict equality, your code becomes more predictable and less prone to subtle errors.

no-console

The no-console rule is often debated. In production code, it makes sense to disallow console.log() statements because they clutter the output and can leak sensitive information.

In development environments, this rule can be relaxed, but it’s still wise to flag them so they don’t end up in final builds unnoticed.

no-magic-numbers

One particularly helpful rule for readability is no-magic-numbers.

Magic numbers are numeric literals that appear in your code without explanation, such as if (score > 42).

This rule encourages the use of named constants, which make your code self-documenting and easier to update later. Instead of 42, defining a constant like const PASSING_SCORE = 42 instantly makes your intent clearer.

indent

Consistency in formatting can make or break the maintainability of a codebase.

The indent rule enforces consistent indentation. Whether your team prefers two or four spaces, having the rule in place ensures everyone follows the same structure, preventing merge conflicts and visual confusion.

semi

The semi rule is another formatting-related setting that dictates whether semicolons are required at the end of statements.

While JavaScript allows you to omit them in many cases, enforcing a consistent semicolon policy can prevent bugs related to automatic semicolon insertion, which can behave unpredictably in some scenarios.

prefer-const

For developers working with modern JavaScript, the prefer-const rule is incredibly useful.

It suggests using const instead of let for variables that are never reassigned. This helps convey intent clearly and minimizes the risk of accidental reassignment, which can lead to hard-to-find bugs.

no-var

The no-var rule promotes the use of let and const over var. With the advent of ES6, var has become largely obsolete due to its function-scoping behavior, which often leads to confusing results. let and const are block-scoped and offer more predictable behavior, making your code easier to reason about.

no-param-reassign

A rule that emphasizes best practices in function handling is no-param-reassign. This rule prevents you from reassigning function parameters.

While it might seem convenient to modify parameters directly, doing so often leads to unexpected behavior, especially in asynchronous code or closures.

Copying the parameter to a new variable before changing it is generally the safer route.

curly

If you care about the clarity and structure of your code blocks, the curly rule is worth enabling. It enforces the use of curly braces for all control statements, even if they contain only a single line.

This might seem excessive, but it helps avoid bugs that occur when additional statements are added later and braces are forgotten.

arrow-body-style

The arrow-body-style rule encourages concise arrow functions when possible.

For example, instead of writing const add = (a, b) => { return a + b; }, it suggests simplifying it to const add = (a, b) => a + b;. This results in more succinct code that’s easier to scan and understand.

object-curly-spacing

Another rule that promotes better readability and maintainability is object-curly-spacing. This rule enforces consistent spacing inside curly braces of object literals and destructuring assignments.

Whether you choose { foo: bar } or {foo: bar}, what matters is consistency throughout the codebase.

comma-dangle

The comma-dangle rule might seem like a nitpick, but it has practical implications. It enforces or disallows trailing commas in object and array literals.

When enabled to require trailing commas, it makes diffs cleaner in version control and simplifies the process of adding new elements to these structures.

quotes

Among stylistic preferences, quotes is a useful rule for enforcing consistency in the use of single or double quotes. Again, the main value here is in uniformity, which reduces distractions and keeps the focus on what the code does rather than how it’s styled.

no-shadow

The no-shadow rule prevents variable declarations from shadowing variables declared in the outer scope.

Shadowing can make it extremely difficult to track which variable is being referenced, especially in larger functions or nested scopes.

Avoiding it reduces bugs and makes your code easier to debug.

A strong rule for clarity is consistent-return, which enforces that every code path in a function either returns a value or doesn’t return at all.

This prevents scenarios where some branches return a result and others return undefined, leading to inconsistent outcomes that can break your program.

default-case

The default-case rule ensures that switch statements have a default branch.

Even if you think you've handled every case, the default ensures your code behaves predictably if an unexpected value shows up. This is especially useful when dealing with external data or user inputs.

no-async-promise-executor

For async programming, the no-async-promise-executor rule is essential.

It disallows using async functions as Promise executors, which can cause unhandled rejections or misinterpreted promise behavior.

This rule protects developers from common pitfalls when working with asynchronous logic.

yoda

Finally, the yoda rule governs the style of conditional expressions, specifically the order of literals and variables.

While often a matter of preference, enforcing one approach across the codebase—typically placing variables on the left—improves code scanning and reduces cognitive overhead.

Conclusion

Each of these ESLint rules contributes something valuable to your codebase.

Together, they help enforce consistency, prevent subtle bugs, and promote best practices.

The key is not to enforce every rule but to choose the ones that align with your team's style and goals.

ESLint allows for fine-tuning, meaning you can warn, error, or turn off rules depending on the context.

Using ESLint effectively isn’t just about catching mistakes, it’s about codifying your development standards so that every contributor can write code that feels cohesive, clean, and professional.

Automating JavaScript Security Testing

John Au-Yeung — Thu, 05 Jun 2025 00:42:40 +0000

In the fast-paced world of web development, security can’t be an afterthought.

While best practices like input validation and avoiding dangerous APIs are essential, they only go so far without regular and automated security testing.

Fortunately, there’s a growing ecosystem of tools designed to help JavaScript developers detect vulnerabilities early—before they ship code.

In this article, we’ll walk through some of the best tools for automating JavaScript security testing and provide guidance on how to secure two of the most widely used JavaScript frameworks: React and Angular.

Why Automated Security Testing Matters

Manual code reviews are important, but not scalable or foolproof. Automated security testing tools identify known vulnerabilities in dependencies.

They detect risky coding patterns and insecure practices.

They integrate into CI/CD pipelines to catch issues before production.

And they can continuously scan for new threats** even after deployment.

npm audit

Every project using Node.js and npm already has access to npm audit.

It scans your project’s package-lock.json file for known vulnerabilities.

It Uses the GitHub Advisory Database and other sources. And it suggests fixes or updated versions for vulnerable packages.

To use it we run

npm audit
npm audit fix

It's ideal for any Node.js-based JavaScript project like React, Vue, Angular apps using npm.

Snyk

Snyk is a powerful security tool that scans open-source dependencies and container images.

It scans for vulnerabilities in package.json, Dockerfiles, and GitHub repos.

Snyk can alert for license issues and high-severity flaws.

And it integrates with GitHub, GitLab, Bitbucket, and CI/CD tools like Jenkins and CircleCI.

It has a free tier available for small teams. And integrates with GitHub to auto-scan every pull request.

Teams managing complex dependency trees or using microservices can use this to scan for any security issues.

ESLint Security Rules

ESLint is widely used for code quality, but it can also help with security.

We can usee plugins like eslint-plugin-security to detect potentially dangerous patterns (e.g., use of eval() or insecure regex).

To use it we run

npm install eslint-plugin-security --save-dev

Then add it to your .eslintrc:

{
  "plugins": ["security"],
  "extends": ["plugin:security/recommended"]
}

It's suitable for projects where linting is already in place. And catching mistakes during development.

Retire.js

Retire.js is a specialized tool that scans for known vulnerabilities in JavaScript libraries (client-side and server-side).

It supports scanning both Node modules and front-end scripts. And it works via CLI, Grunt/Gulp, or browser extension.

Also it maintains a vulnerability database updated frequently.

To use it we run

npm install -g retire
retire

It's suitable for projects with a mix of frontend and backend JavaScript.
And detecting outdated libraries like jQuery or Bootstrap is easy with this.

OWASP ZAP (Zed Attack Proxy)

ZAP is a dynamic security testing tool that simulates real-world attacks on your application.

It intercepts web traffic and looks for vulnerabilities like XSS and CSRF.
And it offers automation via APIs and CI/CD plugins.

Also it provides passive and active scanning modes.

It's good for more advanced teams looking for penetration testing automation And integrates info CI environments for end-to-end testing.

Securing React Applications

React is known for its component-based architecture, which adds some natural protection (e.g., auto-escaping outputs), but it still has vulnerabilities if misused.

React Security Tips:

Avoid `dangerouslySetInnerHTML`

React escapes content by default. Using dangerouslySetInnerHTML bypasses this.

// BAD
<div dangerouslySetInnerHTML={{ __html: userInput }} />

Instead, use libraries like DOMPurify when rendering HTML.

Use ESLint Plugins

eslint-plugin-jsx-a11y: Improves accessibility, which contributes to security.
eslint-plugin-react-security: Adds React-specific security linting rules.

Secure API Access

We should never hardcode tokens in React code. And it's best to use environment variables securely via a .env file and proxy calls to a backend.

Enable Strict CSP

We can use Helmet for secure HTTP headers if serving React via Node.js/Express. And also avoid loading scripts from CDNs or third-party domains unless trusted.

Securing Angular Applications

Angular is more opinionated than React and includes built-in security mechanisms, but it still requires developer discipline.

Angular Security Tips:

Use Angular’s Built-in Sanitization

Angular automatically sanitizes HTML in templates, but explicitly bypassing it is dangerous.

// BAD
this.sanitizer.bypassSecurityTrustHtml(userInput);

Use only when absolutely necessary, and validate the input string.

Avoid InnerHTML Binding

Like React’s dangerouslySetInnerHTML, Angular’s [innerHTML] can lead to XSS if misused.

Use HTTP Interceptors

For secure API calls, use interceptors to attach tokens and manage headers centrally.

Enable Security Headers

We can use Angular Universal with Express to serve Angular apps.
And add security headers with libraries like helmet or via server configuration.

Integrating Security Tools Into CI/CD

For optimal protection, plug these tools directly into your build pipeline.

Example CI Setup:

Run npm audit or snyk test on every PR.
Lint with ESLint + security plugins.
Use ZAP or similar tools for dynamic scanning on staging builds.
Monitor your GitHub repo for dependency alerts.

Conclusion

Securing JavaScript applications goes far beyond writing clean code—it requires proactive scanning, framework-specific awareness, and seamless integration into your workflow.

Tools like Snyk, Retire.js, and ESLint security plugins automate a huge chunk of the process, while frameworks like React and Angular offer built-in safety mechanisms if used correctly.

By adopting these tools and techniques, you not only reduce the risk of vulnerabilities but also build a development culture where security is baked into every line of code.

Security Best Practices in JavaScript

John Au-Yeung — Thu, 05 Jun 2025 00:32:19 +0000

JavaScript has become the backbone of modern web applications, enabling rich, interactive experiences across billions of websites worldwide. But with this power comes significant security risks.

Since JavaScript runs on the client side and often communicates directly with servers, it’s a prime target for attackers seeking to exploit vulnerabilities.

Ignoring security best practices in JavaScript can lead to data breaches, compromised user accounts, and damaged reputations.

In this article, we’ll explore fundamental security principles and best practices every JavaScript developer should know to build safer, more resilient applications.

Understanding the Security Landscape in JavaScript

JavaScript faces unique challenges compared to server-side languages because it executes directly in users’ browsers, making it vulnerable to attacks that target both the client and server.

Common security threats include:

Cross-Site Scripting (XSS): Malicious scripts injected into web pages, executed in other users’ browsers.
Cross-Site Request Forgery (CSRF): Unauthorized commands transmitted from a user’s browser without their consent.
Insecure Direct Object References: Access to data or resources without proper authorization.
Code Injection: Execution of unauthorized code due to unsanitized inputs.

Knowing these attack vectors is crucial to understanding why certain security practices matter.

Sanitize and Validate Inputs

One of the most basic but critical security rules is to never trust user input. Attackers can manipulate forms, URLs, or APIs to send malicious data that compromises your app.

Validate all inputs on the server side to ensure they match expected formats and values.

Remove or encode characters that could be interpreted as executable code—especially in inputs rendered back into HTML.

And use libraries like DOMPurify to clean HTML inputs safely.

XSS attacks rely on injecting malicious JavaScript into inputs or URLs that the app then executes.

Proper validation and sanitization stop harmful code from ever running.

Use Content Security Policy (CSP)

Content Security Policy (CSP) is an HTTP header that instructs browsers which sources of content (scripts, styles, images) are allowed to load.

Implement a strict CSP to restrict inline JavaScript and loading of scripts from untrusted domains.

Avoid the use of 'unsafe-inline' and 'unsafe-eval' directives, which undermine CSP effectiveness.

Report violations using the report-uri directive to monitor potential attacks.

CSP is a powerful defense against XSS attacks by limiting where scripts can come from and preventing inline execution.

Avoid Dangerous APIs

JavaScript provides powerful APIs, but some are more risky when abused.

We should avoid using eval(), new Function(), or similar functions that execute arbitrary code strings.

Be cautious with innerHTML or document.write() which can inject untrusted HTML and scripts.

And we should use safer alternatives like textContent or innerText when inserting user-generated content.

Because executing strings as code opens up huge attack surfaces, allowing injection of malicious payloads.

Secure Cookies and Local Storage

Web applications commonly use cookies and localStorage or sessionStorage to store user information.

We should use HttpOnly and Secure flags on cookies to prevent JavaScript access and ensure transmission over HTTPS.

And avoid storing sensitive data (like authentication tokens) in localStorage since it’s accessible via JavaScript and vulnerable to XSS.

We should use short expiration times and refresh tokens frequently.

If attackers can access tokens or session data, they can impersonate users or hijack sessions.

Implement Proper Authentication and Authorization

JavaScript apps often interface with backend APIs to authenticate users and access data.

We should use strong authentication methods like OAuth or JWT (JSON Web Tokens).

And we should validate all authorization on the server side, never trust client-side checks alone.

APIs should be protected with rate limiting and monitoring to prevent brute force or abuse.

This matters because weak or client-only authentication can allow unauthorized access to sensitive information or actions.

Use HTTPS Everywhere

Serving your JavaScript app over HTTPS is a must.

HTTPS encrypts data in transit, preventing man-in-the-middle (MITM) attacks.
Modern browsers increasingly block or warn about insecure HTTP content, which can degrade user trust.
Enable HTTP Strict Transport Security (HSTS) to force HTTPS usage.

Why this matters: Without HTTPS, attackers can intercept and modify scripts, injecting malicious code or stealing data.

Keep Dependencies and Libraries Updated

Modern JavaScript development relies heavily on third-party libraries and frameworks.

We should regularly audit and update dependencies to patch security vulnerabilities.

To do this, we can use tools like npm audit or Snyk to identify known issues.

And we should avoid importing unnecessary or untrusted libraries.

Attackers frequently exploit vulnerabilities in outdated or poorly maintained libraries.

Apply Principle of Least Privilege

Grant only the minimal permissions necessary for your JavaScript code and related backend services.

We should limit access scopes for API keys and tokens.

Avoid exposing sensitive data unnecessarily in the frontend.

Use roles and permissions for fine-grained access control.

Reducing privileges limits the damage attackers can cause if they gain access.

Monitor and Log Suspicious Activity

Security doesn’t stop at deployment.

Implement logging for critical actions, authentication attempts, and errors.

And we can monitor logs for unusual activity, failed login attempts, or spikes in traffic.

Set up alerts to notify your team of potential security incidents.

Early detection allows faster response to threats before damage escalates.

Educate and Foster a Security Culture

Finally, security is a mindset, not a checklist.

Stay informed about the latest JavaScript vulnerabilities and fixes.

Follow best practices and guidelines from trusted organizations like OWASP.

Conducting regular security reviews and code audits.

And encourage a culture of security awareness among developers is important since the best tools and practices fail if developers are unaware or complacent about security risks.

Conclusion

JavaScript’s versatility and ubiquity make it a powerful tool for web developers, but it also demands careful attention to security.

By sanitizing inputs, enforcing strict content policies, avoiding dangerous functions, securing cookies, implementing robust authentication, and maintaining vigilance through updates and monitoring, developers can significantly reduce the risk of security breaches.

Security is an ongoing commitment, not a one-time effort. As web technologies evolve, so do attack techniques. Staying proactive and embracing best practices will help you build safer applications that protect your users and your reputation.

New Features with JavaScript in 2025

John Au-Yeung — Thu, 05 Jun 2025 00:24:45 +0000

JavaScript continues to evolve rapidly, keeping pace with modern development needs and enabling developers to write cleaner, faster, and more efficient code.

As we dive into 2025, the language has embraced several exciting new features and improvements that enhance productivity, readability, and performance.

Here’s the most notable latest features in JavaScript:

Top-Level Await in Modules

One of the biggest convenience improvements is the support for top-level await in JavaScript modules. Previously, you could only use await inside async functions, but now you can write:

// top-level-await.js
const data = await fetch('https://api.example.com/data').then(res => res.json());
console.log(data);

This simplifies asynchronous initialization logic without wrapping everything in an async function.

The Temporal API

Handling dates and times in JavaScript has been historically tricky. The new Temporal API aims to provide a modern, comprehensive, and reliable alternative to the Date object.

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // 2025-06-04T14:30:00

Temporal offers precise handling of time zones, durations, and calendar systems, drastically improving date-time manipulation.

Records and Tuples (Stage 3)

JavaScript is introducing Records and Tuples, immutable data structures that help enforce immutability and value equality.

Record: An immutable object

Tuple: An immutable array

Example:

const record = #{ name: "Alice", age: 30 };
const tuple = #[1, 2, 3];


console.log(record.name); // Alice

This feature encourages safer data handling patterns, especially in functional programming.

do Expressions (Stage 3)

do expressions allow you to use statements as expressions, providing a way to write complex logic inline:

const result = do {
  if (condition) {
    'yes';
  } else {
    'no';
  }
};
console.log(result); // "yes" or "no"

This makes conditional logic inside expressions cleaner and more expressive.

findLast and findLastIndex

New array methods have been added to find the last element matching a condition:

const numbers = [1, 3, 7, 9, 7];
console.log(numbers.findLast(n => n < 8)); // 7
console.log(numbers.findLastIndex(n => n < 8)); // 4

These methods complement existing find and findIndex, improving array searching capabilities.

findLast Returns the last element in an array that satisfies a given testing function.

findLastIndex Returns the index of the last element in an array that satisfies a given testing function.

These methods are the counterparts to the well-known find and findIndex, which return the first matching element or index. findLast and findLastIndex work from the end of the array backward, enabling more flexible searching patterns.

Error.cause Property

Error handling has become more informative with the introduction of the cause property in error objects, helping track the root cause of errors:

try {
  throw new Error("Original error");
} catch (err) {
  throw new Error("New error", { cause: err });
}

This allows better error chaining and debugging.

The cause property is a relatively new addition to the JavaScript Error object that allows developers to associate an underlying cause with an error.

This enables better error chaining and debugging by providing context about why an error occurred.

Prior to cause, it was common to lose track of the original error when wrapping or rethrowing errors. Error.cause makes it easier to preserve the error chain.

Ergonomic Brand Checks for Private Fields (Stage 3)

Private fields in classes are easier to check with the new syntax:

class Person {
  #name = "Alice";
  hasNameField(obj) {
    return #name in obj;
  }
}

Private fields are a way to declare properties on a class that are truly private — meaning they cannot be accessed or modified outside the class’s own methods.

This provides true encapsulation, preventing external code from accidentally or intentionally interfering with internal state.

Before private fields, developers relied on naming conventions (like prefixing with _) or closures to simulate privacy, but these were not enforced by the language.

Private fields use a special syntax that guarantees privacy.

Private fields are declared by prefixing the field name with a # character inside a class body:

class Person {
  #name;  // private field

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

Conclusion

The latest JavaScript features focus on making the language more expressive, efficient, and easier to work with.

From asynchronous programming improvements like top-level await, to robust new APIs such as Temporal for date-time handling, and immutable data structures like Records and Tuples, these updates help developers write cleaner and more maintainable code.

Additional enhancements in error handling and private field management further improve debugging and encapsulation.

How to search array of arrays with JavaScript?

John Au-Yeung — Mon, 14 Nov 2022 23:35:23 +0000

To search array of arrays with JavaScript, we use the array some and every methods.

For instance, we write

const ar = [
  [2, 6, 89, 45],
  [3, 566, 23, 79],
  [434, 677, 9, 23],
];

const val = [3, 566, 23, 79];

const bool = ar.some((arr) => {
  return arr.every((prop, index) => {
    return val[index] === prop;
  });
});

to call some with a callback that searches every element of the nested array to check if they're equal with every.

We call every with a callback that check the index of arr to see if it's equal to prop in the nested array.

How to remove item from array using its name / value with JavaScript?

John Au-Yeung — Mon, 14 Nov 2022 23:35:02 +0000

To remove item from array using its name / value with JavaScript, we use the filter method.

For instance, we write

const COUNTRY_ID = "AL";

countries.results = countries.results.filter((el) => {
  return el.id !== COUNTRY_ID;
});

to call filter with a callback to return an array within the countries.results array without the object with id not equal to COUNTRY_ID.

How to alert an array with JavaScript?

John Au-Yeung — Mon, 14 Nov 2022 23:34:08 +0000

To alert an array with JavaScript, we convert it to a string before calling alert.

For instance, we write

alert(JSON.stringify(aCustomers));

to call JSON.stringify to convert the aCustomers array to a JSON array string.

Then we call alery with the string to show an alert box with the array string.

How to find if object property exists in an array with Lodash and JavaScript?

John Au-Yeung — Mon, 14 Nov 2022 23:33:50 +0000

To find if object property exists in an array with Lodash and JavaScript, we use the has method.

For instance, we write

const countries = { country: { name: "France" } };
const isExist = _.has(countries, "country.name");

to call has with the countries object and the property to look for in each object.

Therefore, isExist is true since country.name is in the countries object.

How to move to prev/next element of an array with JavaScript?

John Au-Yeung — Mon, 14 Nov 2022 23:33:22 +0000

To move to prev/next element of an array with JavaScript, we can define our own array class.

For instance, we write

class TraversableArray extends Array {
  next() {
    return this[++this.current];
  }
}

to define the TraversableArray class that extends the Array class.

In it, we add the next method that returns the object at the current index after incrementing it by 1.

How to update the attribute value of an object using the map function in JavaScript?

John Au-Yeung — Sun, 13 Nov 2022 06:53:31 +0000

To update the attribute value of an object using the map function in JavaScript, we return the updated object.

For instance, we write

const editSchoolName = (schools, oldName, name) =>
  schools.map((item) => {
    if (item.name === oldName) {
      return { ...item, name };
    } else {
      return item;
    }
  });

to define the editSchooName function that returns a new version of the schools array that has entries mapped from schools with the objects updated if they have name property equal to oldName.

DEV Community: John Au-Yeung

Exploring React UI Libraries

MUI

Chakra UI

Tailwind and Headless UI

React Bootstrap

Mantine

Conclusion

A Practical Guide to Prettier

The Best ESLint Rules for Clean and Consistent JavaScript Code

no-unused-vars

eqeqeq

no-console

no-magic-numbers

indent

semi

prefer-const

no-var

no-param-reassign

curly

arrow-body-style

object-curly-spacing

comma-dangle

quotes

no-shadow

default-case

no-async-promise-executor

yoda

Conclusion

Automating JavaScript Security Testing

Why Automated Security Testing Matters

npm audit

Snyk

ESLint Security Rules

Retire.js

OWASP ZAP (Zed Attack Proxy)

Securing React Applications

React Security Tips:

Avoid dangerouslySetInnerHTML

Use ESLint Plugins

Secure API Access

Enable Strict CSP

Securing Angular Applications

Angular Security Tips:

Use Angular’s Built-in Sanitization

Avoid InnerHTML Binding

Use HTTP Interceptors

Enable Security Headers

Integrating Security Tools Into CI/CD

Conclusion

Security Best Practices in JavaScript

Understanding the Security Landscape in JavaScript

Sanitize and Validate Inputs

Use Content Security Policy (CSP)

Avoid Dangerous APIs

Secure Cookies and Local Storage

Implement Proper Authentication and Authorization

Use HTTPS Everywhere

Keep Dependencies and Libraries Updated

Apply Principle of Least Privilege

Monitor and Log Suspicious Activity

Educate and Foster a Security Culture

Conclusion

New Features with JavaScript in 2025

Top-Level Await in Modules

The Temporal API

Records and Tuples (Stage 3)

do Expressions (Stage 3)

findLast and findLastIndex

Error.cause Property

Ergonomic Brand Checks for Private Fields (Stage 3)

Conclusion

How to search array of arrays with JavaScript?

How to remove item from array using its name / value with JavaScript?

How to alert an array with JavaScript?

How to find if object property exists in an array with Lodash and JavaScript?

How to move to prev/next element of an array with JavaScript?

How to update the attribute value of an object using the map function in JavaScript?

Avoid `dangerouslySetInnerHTML`