DEV Community: Katherine Hebbler

Gamification in UI/UX

Katherine Hebbler — Mon, 14 Apr 2025 02:49:49 +0000

Gamification is the practice of using game design principles in non-game contexts (like websites or apps) to engage and influence user behavior. It incorporates familiar game-like elements like points, badges, streaks, and rewards to make tasks feel more enjoyable, motivating, or satisfying.

The goal isn’t to create a game, but to apply the psychology behind games (things like feedback, progress, and small wins) to real-world user interactions. This kind of design can help users stay motivated and achieve goals through positive reinforcement. When done well, gamification can take the experience of completing a task from feeling like an obligation to something that feels rewarding. It encourages users to return not because they have to, but because they want to.

Gamification Strategies

Progress Bars

visual feedback that shows users progress
uses our natural desire to complete tasks
encourages continued interaction by making progress feel achievable
breaks large goals into small milestones
uses color & animation to make progress satisfying

When users see progress, they want to finish what they started.

Example:

const progress = (completed / total) * 100;

This calculates the percentage of a task that’s been completed. It divides the number of completed steps by the total steps and multiplies by 100 to convert that fraction into a percentage.

Streaks

rewards users for doing something consistently
uses our fear of “breaking the chain”
forms habits and increases retention
creates a psychological commitment
encourages users to come back regularly

Apps like Duolingo use badges to keep users coming back every day.

Example:

const today = new Date().toDateString();
const lastVisit = localStorage.getItem("lastVisit");

if (today !== lastVisit) {
  incrementStreak();
}
localStorage.setItem("lastVisit", today);

This checks if the user visited today by comparing todays date to the last visit stored in local storage. If it’s a new day, it increases the streak count and updates the stored date to today.

Badges

visual rewards for milestones or accomplishments
give a sense of status, progress, and recognition
makes users feel seen and encourages them to keep engaging
encourages goal-setting and completion
encourages social sharing & competition

Example:

const AchievementBadge = ({ title }) => (
  <div className="badge">{title}</div>

{points >= 100 && <Badge title="100 Points!" />}

This is an AchievementBadge component that shows a badge with a title. It checks if the user has 100 or more points and if they do, it shows a badge that says “100 Points!”
'
Levels

represents status or skill progression
gives users a clear sense of advancement
encourage continued use by unlocking new challenges, statuses, or rewards
adds structure to long-term engagement by letting users know where they stand and where they’re headed
creates a feeling of mastery
uses familiar gaming logic (level up) breaks down large goals into smaller, achievable steps

Example:

if (xp >= level * 100) {
  level += 1;
  xp = 0;
}

This checks if the user's xp (experience points) are the required amount to level up. If they have, it increases the level by one and resets the xp to zero to start the next level.

Rewards give users something tangible or unlockable (like a new feature, a discount, or a prize) and make tasks feel worth completing.

Challenges break tasks into smaller, mini goals that feel more manageable and fun. They help keep momentum going.

Leaderboards add competition by showing users how they rank against other people which can drive motivation, especially in social apps.

Feedback Loops give real-time feedback to user actions (like animations or sounds) that reinforce behavior and keep them engaged in the moment.

Psychology of Gamification

To understand why gamification works, you have to understand the psychology of it.

Competence
People like feeling like they’re making progress or improving their skills in something. Gamification taps into this through features like progress bars, levels, and achievements. This sense of mastery keeps users engaged because they can see their growth.

Autonomy
Autonomy is about giving users a sense of control. When people feel like they’re making their own choices (like setting goals or choosing rewards) they’re more likely to stay invested. By offering flexibility and personalization, things can feel more empowering and user-friendly.

Relatedness
Humans are social and gamification can strengthen that social connection. Leaderboards, team challenges, badges, or the ability to compete with friends can create a sense of belonging. They make users feel like they’re part of a community even if they're in a digital space.

Instant Gratification
Immediate feedback is a powerful psychological tool and sounds, animations, pop-ups, or visual effects that appear right after an action make users feel rewarded in the moment. This kind of positive reinforcement triggers a dopamine response that can help drive interaction and satisfaction.

Variable Rewards
Not knowing exactly when or what a reward will be can actually increase engagement. This concept from behavioral psychology is the same principle behind slot machines. Surprise rewards or randomized unlocks can create anticipation and keep users coming back just to see what might happen next.

The Fogg Behavior Model
The Fogg Behavior Model explains that for any behavior to occur, three things must be present at the same time: motivation, ability, and a trigger. In gamification you build motivation through rewards, simplify tasks to increase ability, and use triggers (like a notification, animation, or message) to prompt an action. When all three are utilized then users are much more likely to engage.

TLDR

Gamification makes apps more engaging, motivating and fun by using things like streaks, badges and progress.

When used correctly it can improve retention, guide user behavior and create a more satisfying experience.

Sources

Dark Patterns in UX Design

Katherine Hebbler — Mon, 31 Mar 2025 01:47:19 +0000

What are Dark Patterns?

Dark patterns are choices made by designers that are meant to trick, pressure, or manipulate users into making decisions that benefit the company, usually at the expense of the user.

The term dark pattern was first used by UX designer Harry Brignull with the registration of darkpatterns.org to document patterns that rely on psychological manipulation instead of honest design.

Common Types of Dark Patterns

❓Trick Questions

phrased in a confusing way to make users accidentally choose “yes”
Example: "Uncheck this box if you don’t want to receive emails... unless you actually do, in which case re-check it."

🔄Bait and Switch

the user means to do one thing, but something totally different happens
Example: In 2016, Microsoft tried to get users to upgrade to Windows 10 by changing the meaning of the red “X” in a pop-up. Instead of closing the window like they thought, clicking the X confirmed the upgrade.

🔀Misdirection

using visual hierarchy to take attention away from what the company doesn’t want you to notice
Example: A giant colorful “Yes” button and a tiny grayed-out “No thanks” link in fine print.

💰Hidden Costs

only shown at the last step of checkout
Example: Unexpected fees like shipping, taxes, service fees

⏳Forced Continuity

free trial ends → surprise charge
Example: Adobe's annual plans involve early termination fees (ETFs) if you cancel after the initial 14-day period. According to Adobe's Subscription Terms "If you cancel within 14 days of your initial order, you’ll be fully refunded. Should you cancel after 14 days, you’ll be charged a lump sum amount of 50% of your remaining contract obligation..."

🧱Disguised Ads

ads that look like regular content or navigation
Example: Softpedia placed ads with fake “Download” buttons that looked almost exactly like the real ones. Users accidentally clicked the ad, thinking it was the actual download link.

😕Confirmshaming - making the user feel guilty for opting out

Example: ✅ “Yes, I want to save money.” ❌ “No thanks, I like wasting money.”

🪤The Roach Motel

looks easy to get into, but hard to get out of
Example: Subscribing to a service takes 1 click. Cancelling requires a phone call or an email.

🔓Privacy Zuckering

tricking users into sharing more personal data than they realize
Named after Mark Zuckerberg, this pattern can also make it harder for users to find and change their privacy settings.
Example: A website may make users navigate through multiple pages or menus to get to their privacy settings, making it less likely that they would

🛒Sneak into Basket

an extra product or service is automatically added to the cart unless you notice and remove it
Example: In 2015 SportsDirect.com was caught automatically adding a £1 magazine subscription to carts during checkout. Most people didn’t notice and had to remove it manually to avoid the charge.

Legality

Many types of deceptive patterns are illegal in the United States and Europe, and companies that use them have been in legal cases where they faced large fines and penalties.

In 2022, the company behind Fortnite Epic Games paid $245 million to settle charges from the U.S. Federal Trade Commission (FTC) for using "dark patterns to trick users into making purchases" in their payment system such as:

Misdirection - confusing button layouts that could lead to accidental purchases with one click
Roach Motel - difficulty cancelling or reversing charges
Sneak Into Basket/Forced Action - ability to make unauthorized charges without parental consent

In 2023, TikTok was fined €345 million by the Irish Data Protection Commission (DPC) for violations of Art. 5 GDPR relating to the processing of personal data. Their design choices were found to be manipulative and misleading, especially for children by:

Preselection - setting profiles to "public" by default, even for minors
Visual Interference - highlighting certain buttons like "Post Now" in bold colors to draw attention but making privacy options less noticeable
Forced Action - making it harder to opt out of sharing data

Why to Aviod Dark Patterns

Unethical – they exploit the user's trust and take advantage of them

Breaks Trust – users who feel tricked can be less likely to return

Legal Risk – regulators are now cracking down and the consequences can be expensive

Bad UX – manipulative design could have short-term benefits for the company but can lead to poor long-term user experience

⭐ Good design respects the user’s time, intent, and intelligence.

Sources

Tailwind CSS: A Utility-First Approach to Styling

Katherine Hebbler — Mon, 17 Mar 2025 00:08:54 +0000

Tailwind CSS is a "utility-first CSS framework for rapidly building modern websites without ever leaving your HTML".

Unlike traditional frameworks like Bootstrap or Bulma that come with pre-built components, Tailwind gives you a set of low-level utility classes to design your website however you want without writing tons of custom CSS from scratch.

Why Use Tailwind CSS?

1. Utility-First Approach

Instead of writing custom CSS for each of your components, Tailwind provides atomic utility classes that handle all sorts of things like padding, margins, colors, flexbox, and grids.

<button class="bg-blue-500 text-white px-4 py-2 rounded-md shadow-md
 hover:bg-blue-600">
  Click Here!
</button>

This single string replaces a lot of custom CSS and makes everything consistent across the UI.

2. Rapid Development

With predefined classes, you don’t need to constantly switch between HTML and CSS files and can build your layouts without writing a single line of CSS.

3. Customizable

Tailwind provides a configuration file (tailwind.config.js) where you can define your styles, themes, and responsive breakpoints.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
};

This makes it easy to keep a consistent design across your project.

4. Responsive Design

Tailwind uses a mobile-first approach with simple responsive prefixes.

<div class="p-4 md:p-8 lg:p-12">
  Responsive!
</div>

p-4 (default padding)
md:p-8 (medium screens)
lg:p-12 (large screens)

5. Optimization

Tailwind uses JIT (Just-In-Time) mode, which means that only the classes you used are included in the final CSS file. This helps your site load faster, keeping styles lightweight and optimized for production.

How to Use Tailwind

Step 1: Install Tailwind via npm

Run this command to install Tailwind in your project:

npm create vite@latest <your-app> --template react
cd <your-app>
npm install

Step 2: Install Tailwind CSS & Dependencies

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

This creates two files:

tailwind.config.js
postcss.config.js

Step 3: Configure Tailwind

Modify the tailwind.config.js file:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4: Include Tailwind in Your CSS

Add Tailwind to your main CSS file (ex. styles.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Start Using Tailwind Classes

Now you can apply Tailwind classes in your HTML:

<h1 class="text-3xl font-bold text-center text-blue-500">
Hello, World!
</h1>

Official Tailwind Installation Guide - step-by-step instructions for installing Tailwind

Tools & Resources

Tailwind CSS - official documentation
Tailwind Playground - try Tailwind in your browser
Heroicons - free icons from Tailwind's creators
Tailwind UI - paid premium components for Tailwind
Flowbite - open-source Tailwind component library
DaisyUI - prebuilt themes & components for Tailwind
Awesome Tailwind CSS - list of Tailwind resources, tools, & projects
Tailwind Cheat Sheet - quickly lookup Tailwind classes

Tailwind CSS makes styling websites simpler and more flexible by using utility classes instead of pre-built components. Unlike traditional frameworks it gives you full control over your design without having to write a lot of unnecessary CSS.

It has a bit of a learning curve but once you get the hang of it, it can make development faster, cleaner, and more efficient. Tailwind helps you build modern, responsive, and easily maintainable applications, so if you’re looking for a lightweight and scalable approach to styling, Tailwind is a great choice.

Sources

Tailwind

UX/UI Design: A Beginner's Guide

Katherine Hebbler — Mon, 03 Feb 2025 01:23:35 +0000

When building a product like a website or an app, two important aspects that should always be considered are the User Interface (UI) and User Experience (UX). These design elements don’t just control how the product looks, but also how easily and naturally a user can navigate and interact with it.

While closely related, the UI and UX both have their own important role in shaping a user’s experience. UI focuses on the visual and interactive elements, and UX focuses on the usability and functionality of the product. When used together effectively, they can help create designs that are both visually appealing and user-friendly.

User Interface (UI)

Every app and every website has a user interface, which is the part of the product that the user sees and interacts with. User Interface design focuses on how a product looks and responds to the user’s actions. It includes things like buttons, icons, color, and fonts, all working together to make the user’s experience easy to use and visually appealing.

UI basically has two main jobs: accepting a user’s input and showing them the results.

Input happens when a user interacts with the product by doing something like clicking a button, typing in text, or navigating a menu.
The UI responds by showing the results of that input by giving the user visual feedback (like highlighting the button or showing a progress bar), letting them know that their input has been submitted and registered.

History of UI
Early computers had simple user interfaces, relying on basic buttons and punched cards for input. The introduction of the Command Line Interface(CLI) let users work with computers by typing commands, letting them put in the instructions directly, instead of being limited to pre–punched, fixed inputs.

Later, Menu Driven Interfaces gave a more structured way to use software, which eventually led to the creation of the Graphical User Interface (GUI) by Xerox PARC and was improved by Apple and Microsoft. The GUI introduced visual elements like windows, icons, and buttons, making computers more accessible and user-friendly.

Elements of UI Design

💻Layout & Structure – organizing content in a clear way
🎨Typography & Colors – picking readable fonts and colors for usability
📲Buttons & Icons – making interactive elements easy to use
‼️Feedback & Responsiveness – acknowledging actions with animations, highlights, or messages
📑Consistency – keeping design elements the same in the product
👩🏽‍🦯‍➡️Accessibility – designing for all users, including people with disabilities (ex. color contrast, text size, and navigation aids)

User Experience (UX)

User Experience (UX) design focuses on how a product works, feels, and how easy it is to use. UX design lets a user complete tasks easily, efficiently, and without frustration.

Good UX design makes a product feel natural and intuitive, whether the user is browsing a website, using an app, or using software like word processors or design tools.

UX Design Process

Image Source: GeeksforGeeks – UX Design Process

💡 Problem/Product Definition – defining what the product will do, who its audience is, and what problems it needs to solve
🗺️ Roadmap to Get Started – planning the project by creating timelines, setting goals, and outlining the UX strategy. Also, creating user profiles and personas to identify the right audience for research
🔍 Research – conducting research on users through interviews, surveys, and competitor analysis to get insight about their behaviors, preferences, and pain points
📑 Analyze – interpreting the research data to refine personas and create journey maps, & problem statements to help designers understand how the users will interact with the product
🎨 Design – creating wireframes, prototypes, and layouts based on the research
✅ Validation – testing prototypes with users to improve the design before implementation
🏁 Handover – delivering the finished UX design to the dev team for implementation

Tools Used in UX Design

UX designers use tools to create wireframes, prototypes, and mockups. Two of the most popular tools used are:

Figma – a cloud-based tool that lets teams collaborate in real time, making it easier for remote projects
Adobe XD – a vector-based tool used to design and prototype interactive experiences for websites, apps, and software

These tools help designers visualize ideas, test interactions, and refine designs before development starts.

Good UI/UX is important for a product’s success. A clean and easy-to-use design keeps a user engaged, improves their satisfaction, and encourages them to return and use the product again. On the other hand, bad UI/UX can frustrate users, drive them away, and potentially hurt a business's performance. Whether you're building a website, app, or software, focusing on good UI/UX through research, testing, and thoughtful design creates a smoother and more enjoyable experience for the user.

Sources:

CSS Libraries: 7 Popular Options

Katherine Hebbler — Mon, 27 Jan 2025 00:22:22 +0000

Cascading Style Sheets, or CSS, is a stylesheet language that describes how HTML elements should look on our screen. With it, we can control the layout, colors, fonts, and more.

Instead of writing your own CSS, you can use prebuilt CSS libraries or frameworks to help you and keep your code organized. Below are some of the most popular options:

Bootstrap

Bootstrap is a popular CSS framework that was developed by Twitter in 2011. It has HTML and CSS design templates for things like typography, forms, buttons, tables, navigation and modals, as well as a number of premade themes built or reviewed by Bootstrap's creators. It also has predefined classes for easy layout options.

Bootstrap has a mobile-first fluid grid system that scales up to 12 columns as the device or viewport size increases, making it easy to build responsive pages that look good on any device.

📋Bootstrap Documentation

Bulma

Bulma is another popular framework, mainly because it's easy to learn and use, and also because you only need a CSS file- no JavaScript.

You can use one of Bulma's prebuilt alternative versions, and it even comes with an automatic dark mode feature.

📋Bulma Documentation

Pure CSS

Pure is a set of small, responsive CSS modules developed by Yahoo, built on top of Normalize CSS, with a focus on being "CSS with a minimal footprint" and keeping the file size as small as possible.

It's similar to Bootstrap, but Pure is better for small projects or one's that emphasize speed. Pure has a very minimalist style and also comes with some simple layouts. Pure was created with mobile in mind, meaning it's a good choice for responsive design.

📋Pure CSS Documentation

Animate.css

Animate is a library of "ready-to-use, cross-browser animations for use in your web projects [.]". It comes with easy-to-use utility classes for delay, speed, and repetition.

After you install Animate.css, you just add the class animate__animated to an element, and then the animation names. Their website even has a fun feature that let's you test them out by clicking on the animation name in the side bar and it will apply that animation to the Animate.css logo on the page.

📋Animate CSS Documentation

Tailwind

Tailwind is a modern, utility-first CSS framework designed to give you complete control over how your site looks.

Tailwind doesn't have predefined classes for elements like buttons or tables; instead, it provides low-level utility classes that let you build custom designs without writing any custom CSS.

📋Tailwind Documentation

Material UI

MUI (Material UI) is a React component library that implements Google's Material Design. It comes with premade components (buttons, sliders, etc.) that follow Google's Material Design guidelines.

It even has free Material UI templates, including a marketing page, a checkout flow, sign-in and sign-up pages, and a blog.

📋Material UI Documentation

Pico CSS

Pico is a minimalist, lightweight CSS library for semantic HTML (<header>, <footer>) with a focus on making every HTML responsive and elegant by default.

It's small in size, styling your HTML tags using less than 10 .classes. It also comes with a classless version.

📋Pico CSS Documentation

Sources

React Components

Katherine Hebbler — Mon, 20 Jan 2025 03:59:06 +0000

What are components?

All applications built using React are made up of components. These components are the building blocks of whatever application we are trying to build, as they each represent a part of the user interface (UI) that is visible to the client.

Instead of using HTML, React optionally uses JSX, (JavaScript XML) to describe the layout of the UI. JSX looks a lot like HTML, but it works inside your JavaScript code. React then turns this JSX into JavaScript and updates the page for you.

React components use props (short for properties) to share data. Props let you pass this data, like a username, from one component to another. This makes components reusable because they can show different information depending on what props they get. If you create a component to show a username, you don’t have to write different components for each user. Instead, you can just pass the username as a prop, and the component will change what it shows based on the value of the prop.

Types of React Components:

Functional Components
Class Components
Pure Components
High Order Components

Let’s focus on the two primary components:
Functional Components and Class Components.

Functional Components

Functional Components, also referred to as Stateless Functional Components, are just JavaScript/ES6 Functions.
They accept an object of properties (props) and return HTML-like code written in JSX that describes the UI.

For example, say you want to have a message that shows that a user has logged in. You could create a LoginMessage message component and use props to pass in a username. The component will dynamically update based on the username prop.

function LoginMessage(props) {
  return <p>{props.username} has logged in.</p>;
}

The LoginMessage component is a function that accepts props
The JSX inside the return statement uses props.username to dynamically display the username.

⭐ React component names are written in Pascal Case, meaning they always start with a capital letter (LoginMessage).

After LoginMessage is declared, you can nest it into another component like this:

function App() {
  return (
    <div>
      <LoginMessage username="Lucy" />
      <LoginMessage username="Stilton" />
      <LoginMessage username="Buddy" />
    </div>
  );
}

The App component uses the LoginMessage component three times.
Each LoginMessage gets a different username as a prop.

The output would look like this:

Lucy has logged in.
Stilton has logged in.
Bud has logged in.

To use a component later, you need to export it before you can import it to another component:

function LoginMessage(props) {
  return <p>{props.username} has logged in.</p>;
}

export default LoginMessage;

The export default keywords mark the main component you want to send from a file. (In this case, LoginMessage)

export default lets you import the component into another file without needing curly braces {} and also lets you name it whatever you want.

You can then import the function to the root component (in this case, App.js) by using the import declaration:

import LoginMessage from './LoginMessage';

function App() {
  return (
    <div>
      <LoginMessage username="Lucy" />
    </div>
  );
}

Class Components

Class Components, also referred to as Stateful Class Components, are built using ES6 classes.
They can accept properties (props), similar to functional components.
They have to have a render( ) method to return JSX.
Class components extend React.Component.

They can also maintain a private internal state. State is the data that a component can "remember" and change. This means the component can handle dynamic data, like a user's login status or the number of times a button is clicked.

Here, the same LoginMessage functional component can be written as a class component:

class LoginMessage extends React.Component {
  render() {
    return <p>{this.props.username} has logged in.</p>;
  }
}

The LoginMessage component is a class that extends React.Component.
It uses this.props.username to access the username prop.

Before React version 16.8, class components were used to manage state and lifecycle methods. With the introduction of React Hooks, functional components can now manage state and lifecycle methods, which makes class components less useful.

According to w3schools.com, "although Hooks generally replace class components, there are no plans to remove classes from React."

Conclusion

All applications are made up of components. React components are reusable _ that make up the user interface. They can be nested and contained in the root component.

Functional Components:

Simple functions that receive props and return a declaration
Most commonly used component, especially with React Hooks
Mostly used for UI

Class Components:

ES6 classes that extend React.Component
Can manage state and lifecycle methods
Used less since the introduction of React Hooks

Sources:

JSON.stringify() & JSON.parse()

Katherine Hebbler — Thu, 14 Nov 2024 00:31:23 +0000

JSON

JSON, or JavaScript Object Notation, is a text format for storing and transporting complex data. JavaScript includes simple methods for converting JSON text (stored as a String) to an Object or an Array, and JSON Objects and Arrays to JSON text.

This is useful when transferring data to be read by different systems, because sometimes only text can be stored or transmitted between them. For example, when sending data from a web app to a server via HTTP, it needs to be sent as a String. [.]

JSON.stringify() and JSON.parse() are built in Functions that can be used on JavaScript Objects and Arrays to convert them to and from JSON Strings.

JSON.stringify() converts a JavaScript Object or Array to a JSON String, which can be stored as text.

JSON.parse() converts a JSON String back into a JavaScript Object or Array.

Here, I have an Array called albums of album Objects, each containing two keys: "artist" and "title":

let albums = [
{
  "artist" : "Herbie Hancock",
  "title" : "Head Hunters",
},
{
  "artist" : "Beastie Boys",
  "title" : "Paul's Boutique"
},
  {
  "artist" : "The Cramps",
  "title" : "Bad Music for Bad People"
}
];

console.log(albums);

Logging albums gives the following output:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Herbie Hancock",
  "title": "Head Hunters"
},// [object Object] 
{
  "artist": "Beastie Boys",
  "title": "Paul's Boutique"
},// [object Object] 
{
  "artist": "The Cramps",
  "title": "Bad Music for Bad People"
}]

When calling console.log(albums);, the console sees that albums is an Array and shows [object Array] for the entire Array and [object Object] for each item inside of it. This shorthand is used by default.

JSON.stringify()

JSON.stringify() takes a JavaScript Array or Object and converts it into a JSON String (also called serialization).

Here, I'm converting the albums Array to a JSON String by invoking the JSON.stringify() method on albums, and assigning it to the variable jsonAlbumsString:

let jsonAlbumsString = JSON.stringify(albums);

console.log(jsonAlbumsString);

Logging jsonAlbumsString gives the following output:

"[{"artist": "Herbie Hancock", "title": "Head Hunters"}, {"artist": 
"Beastie Boys", "title": "Paul's Boutique"}, {"artist": "The Cramps", 
"title": "Bad Music for Bad People"}]";

This returns a JSON String representing an Array of three Objects, each with two properties.

⭐JSON has specific formatting, so Strings are wrapped in double quotes(""), and Object keys are also wrapped in double quotes("").

JSON.stringify() Parameters

The JSON.stringify() Function accepts up to three parameters:

Value: the Object or Array to convert to a JSON String (in this case, albums).
Replacer(Optional): a Function that lets you modify each key-value pair.
- Set to null if not needed.
Space(Optional): the number of spaces to use for indentation (in this case, 4).

let formattedAlbumString = JSON.stringify(albums, null, 4);

console.log(formattedAlbumString);

Logging formattedAlbumString gives the following output:

"[
    {
        'artist': 'Herbie Hancock',
        'title': 'Head Hunters'
    },
    {
        'artist': 'Beastie Boys',
        'title': 'Paul's Boutique'
    },
    {
        'artist': 'The Cramps',
        'title': 'Bad Music for Bad People'
    }
]"

Here, each Object is now formatted with indentation, making it easier to debug and improving readability.

Next, I've created a String, albumsString, representing three album Objects, each containing two keys: "artist" and "title":

(I've wrapped it in single quotes for readability.)

let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, 
{"artist": "A Tribe Called Quest", "title": "The Low End Theory"}, {"artist": 
"Nina Simone", "title": "Wild is the Wind"}]'

console.log(albumsString);

Logging albumsString gives the following output:

"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe 
Called Quest', 'title': 'The Low End Theory'}, {'artist': 'Nina Simone', 
'title': 'Wild is the Wind'}]"

Logging albumsString.length gives the following output:

console.log(albumsString.length); // length of String
172

The length is 172 because albumsString is a single string, even though it looks like an Array of Objects.

JSON.parse()

JSON.parse() takes a JSON String and converts it into a JavaScript Object or Array (also called deserialization).

Here, I'm converting albumsString to an Array of Objects by invoking the JSON.parse() method on it, and assigning it to the variable parsedAlbumsArray:

let parsedAlbumsArray = JSON.parse(albumsString);

console.log(parsedAlbumsArray);

Logging parsedAlbumsArray gives the following output:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Bad Brains",
  "title": "Bad Brains"
},// [object Object] 
{
  "artist": "A Tribe Called Quest",
  "title": "The Low End Theory"
},// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]

Logging parsedAlbumsArray.length gives the following output:

console.log(parsedAlbumsArray.length); // length of Array
3

Now, parsedAlbumsArray.length will be 3 because it is an Array with three elements.

JSON.parse() Parameters

The JSON.parse() Function accepts up to two parameters:

Text: the string to parse as JSON (in this case, albumsString).
Reviver: a Function that takes two parameters:
1. key: the key associated with the value
2. value: the value being parsed

The reviver Function is invoked recursively for each key-value pair.
"This reviver Function can be thought of as a filter Function." [.]

Here, I'm using JSON.parse() with a reviver Function to parse albumsString and filter its Objects so that I get only the albums by the artist "Nina Simone":

// initializing storage array
let ninaSimoneAlbums = [];
// parsing albumsString
  // using reviver to filter key-value pairs
JSON.parse(albumsString, (key, value) => {
  // if "artist" === "Nina Simone"
  if (key === "artist" && value === "Nina Simone") {
    // adding value to ninaSimoneAlbums
    ninaSimoneAlbums.push({ artist: value });
  }
  // returning value 
  return value;
});

console.log(ninaSimoneAlbums);

The reviver Function checks if the key is "artist" and the value is "Nina Simone".
If both conditions are true, it adds the Object { artist: value } to the ninaSimoneAlbums Array.

Logging ninaSimoneAlbums gives the following output:

// [object Array] (1)
[// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]

And if I want, I can convert ninaSimoneAlbums and parsedAlbumsArray back into JSON Strings using JSON.stringify() again.

console.log(JSON.stringify(ninaSimoneAlbums));
console.log(JSON.stringify(parsedAlbumsArray, null, 5));

Logging this code gives the following output:

"[{'artist':'Nina Simone'}]"
"[
     {
          'artist': 'Bad Brains',
          'title': 'Bad Brains'
     },
     {
          'artist': 'A Tribe Called Quest',
          'title': 'The Low End Theory'
     },
     {
          'artist': 'Nina Simone',
          'title': 'Wild is the Wind'
     }
]"

JSON.stringify() and JSON.parse() are essential methods for working with JSON data. They allow you to convert complex JavaScript Objects and Arrays into JSON Strings and back again, making it easier to store and transfer.

JSON.stringify() converts JavaScript Objects an Arrays into JSON Strings.
JSON.parse() converts JSON Strings back into JavaScript Objects or Arrays.

These Functions allow for easy data exchange between systems.

Sources: