Website accessibility means making digital content usable for everyone — including those with visual, hearing, motor, or cognitive impairments. In the European Union, accessibility isn’t just best practice — it’s legally required. You’ve already got the EU Web Accessibility Directive and EN 301 549 (based on WCAG 2.1 AA), and now a new regulation is taking effect on 28 June 2025 that further expands these rules.

From that date, the European Accessibility Act (EAA) will apply not just to public-sector websites, but also to a wide range of digital services and products — e.g. e-commerce platforms, banking apps, ticketing machines, and more — that are sold or provided in the EU.

But accessibility is more than just compliance. It improves user experience, strengthens SEO, and expands your audience. In this article, we’ll cover what the EU requires, the key principles of accessible design, and practical tips to help you build websites that work for everyone.

The 4 Principles of Accessible Websites (WCAG 2.1)

So, how do you actually make a website accessible? The good news is that you don’t have to guess.

Accessibility is based on a clear set of rules called the Web Content Accessibility Guidelines (WCAG). At the heart of WCAG are four key principles, often remembered by the word POUR. Let’s break them down:

1. Perceivable

People need to be able to see or hear your content, depending on how they access the web. That means:

• Adding alt text to images so screen readers can describe them

• Using captions for videos

• Making sure color contrast is high enough for text to be readable

2. Operable

Your website should be easy to use, even if someone can’t use a mouse.

• Can you navigate everything using just a keyboard?

• Do all buttons, links, and forms have clear focus indicators when selected?

• Avoid things like flashing animations that could trigger seizures

3. Understandable

Websites should be clear and predictable.

• Use simple, consistent navigation

• Make sure forms have clear labels and helpful error messages

• Avoid using technical jargon when plain language will do

4. Robust

Your website should work well with a wide range of devices and assistive technologies, like screen readers.

• Use clean, semantic HTML

• Test your site with different browsers and devices

• Use ARIA (Accessible Rich Internet Applications) attributes carefully to help screen readers

In the next section, we’ll dive into practical steps you can take to make your website more accessible.

Practical Steps to Build Accessible Websites

Now that you know the key principles of accessibility, let’s talk about how to actually put them into practice. The good news? Many accessibility improvements are simple to add — and they often make your website easier to use for everyone.

Here are some of the most important things to focus on:

1. Use Alt Text for Images

Alt text is a short description of an image that helps people using screen readers understand what’s being shown. If the image is decorative and doesn’t add meaning, you can leave the alt text empty — but for important images, write something short and descriptive.

❌ Bad: alt text is missing

✅ Good: alt text is present:

<img src="product.jpg" alt="Black leather backpack with silver zippers" />

2. Check Your Color Contrast

Text should stand out clearly against the background. Use high-contrast colors, especially for buttons, links, and body text. There are free online tools to check if your color combinations meet the recommended contrast ratio.

❌ Bad: Light gray text on a white background:

{
    color: #ccc; 
    background: #fff;
}

✅ Good: Dark gray text on white background:

{
    color: #333; 
    background: #fff;
}

ℹ️ For checking color contrast, use tools like WebAIM Contrast Checker.

3. Make Sure Everything Works with a Keyboard

Some users can’t use a mouse and rely entirely on a keyboard to navigate. Test your site by pressing Tab and Shift + Tab to move around. Can you reach every link, button, and form field? Can you clearly see which element is currently selected?

✅ Good: When you tab to a button, you see a clear outline or highlight around it.

❌ Bad: The focus indicator is missing, and you don’t know what’s selected.

button:focus {
  outline: 2px solid #97D3F2;
}

4. Use Clear Labels and Error Messages on Forms

Forms are often frustrating for everyone — and even more so if they aren’t accessible. Make sure each form field has a label that tells the user what to enter, and provide helpful error messages when something goes wrong.

❌ Bad: Error: Invalid input.

✅ Good: Please enter a valid email address (example@domain.com).

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span class="error">Please enter your email address.</span>

5. Structure Your Content with Headings

Use headings (<h1>, <h2>, <h3>, etc.) in the correct order to create a clear structure for your pages. Screen readers use these headings to help people jump quickly to the sections they need.

❌ Bad: Avoid skipping levels like jumping from <h1> straight to <h4>.

✅ Good:

<h1>Our Services</h1>
  <h2>Web Development</h2>
    <h3>Frontend</h3>
    <h3>Backend</h3>
  <h2>Consulting</h2>

6. Add ‘Skip to Content’ Links

This simple link at the top of the page lets keyboard users skip repetitive navigation (like menus) and go straight to the main content. It’s a small thing that makes a huge difference in usability.

❌ Bad: Missing button for skipping to content

✅ Good: Button with link to the content:

<body>
  <a href="#main-content" class="skip-link">Skip to main content
  </a>

  <header class="site-header">
    <!-- Rest of your header code, like navigation menus, goes here -->
  </header>

  <main id="main-content">

    <h1>Heading</h1>
    <p>This is the first paragraph</p>

  </main>

</body>

✅ Use CSS to make it visible when focused by a keyboard user.

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
}

7. Use ARIA Labes and Roles

ARIA stands for Accessible Rich Internet Applications. It’s a set of attributes you can add to HTML to help screen readers and other assistive technologies understand parts of your website that aren’t already clear from the HTML alone.

❗ The first rule of ARIA use is: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

There are many ARIA attributes that can be used. Here are examples of the most common ones:

Example 1: aria-label

Provides an invisible label for screen readers if there’s no visible text.

<button aria-label="Close menu">
  <svg>...</svg> <!-- An icon-only button -->
</button>

✅ Use this for icon-only buttons so screen readers know what they do.

Example 2: aria-hidden

Hides content from screen readers that doesn’t add value or may be confusing.

<span aria-hidden="true">*</span> <!-- Decorative symbol, not meaningful -->

❗ Tip: Never use aria-hidden="true" on important content that people need to understand.

Example 3: role

Defines the type of element when you’re using a non-semantic element like <div> or <span> for a custom component.

<div role="button" tabindex="0" onclick="doSomething()">Click Me</div>

❌ BUT — it’s better to just use:

<button onclick="doSomething()">Click Me</button>

✅ Use roles only when there’s no suitable semantic HTML element.

Example 4: aria-live

Announces dynamic changes (like form validation or loading messages) to screen readers automatically.

<div aria-live="polite">Your changes have been saved.</div>

aria-live can have following values:

• off (default):

  • Updates to this region are not announced by screen readers.

  • When to use: For content that updates but doesn’t need to be announced to users.

• polite:

  • Updates will be announced when the user is idle (won’t interrupt the current speech).

  • When to use: For non-critical updates that are useful but not urgent.

• assertive:

  • Updates will be announced immediately, interrupting whatever the screen reader is currently reading.

  • When to use: For important or urgent updates where the user needs to know right now.

Conclusion

Website accessibility isn’t just about ticking boxes — it’s about making sure everyone can use what you build. By following accessibility principles and using practical steps like good color contrast, proper alt text, and keyboard-friendly navigation, you’re not only creating better experiences for people with disabilities — you’re improving your site for all users.

Plus, with regulations like the EU accessibility directive, it’s not just good practice — it’s becoming a legal requirement too.

Thank you for reading!

In this guide, we will build a cooperative AI team that simulates the workflow of professionals, increasing efficiency on repetitive or time-consuming tasks. This can be useful for designers, product managers, and business owners looking to optimize their creative processes and plannings.

What are we building?

We will define a set of AI agents working together:

• Image Analysis Agent: Describes the content of an image.

• Design Improvement Agent: Reviews the image description and suggests improvements.

Product Management Agent: Creates and prioritizes user stories based on the image and suggested improvements.

The AI crew will analyze and process the following image:

The result is a simulation of a typical workflow in IT industries, such as web development. It begins with analysis, suggests UX design based on the requirements, and creates user stories that are ready for development.

Let's get started!

Setting Up

Before we start implementing the AI team, we need to install CrewAI package and its dependencies. Follow these steps to set up your environment:

Step 1: Check Your Python Version

CrewAI requires Python >=3.10 and <3.13. To check your Python version, run the following command:

python3 --version

If your Python version does not meet the requirements, you may need to upgrade or install a compatible version.

Step 2: Set Up a Virtual Environment (Optional but Recommended)

python -m venv crewai_env
source crewai_env/bin/activate  # On Windows use `crewai_env\Scripts\activate`

Step 3: Install Required Packages

pip install crewai crewai_tools pillow python-dotenv
pip freeze

Step 4: Set Up Your API Key

This project requires an OpenAI account and some credits to use their models. CrewAI needs an OpenAI API key to work. Create a new API key and save it in a .env file in your project directory.

OPENAI_API_KEY=your_openai_api_key_here

The Coding Part

Step 1: Import Modules

Create a new file main.py and import the necessary modules:

import os
from PIL import Image
from crewai import Agent, Task, Crew, Process, LLM
from crewai_tools import VisionTool
from dotenv import load_dotenv

Step 2: Load API Key

Let's load the environment variables into the project and add a simple error check for when the OpenAI API key is missing:

load_dotenv()

api_key = os.getenv("OPENAI_API_KEY")

if api_key is None:
    raise ValueError("OPENAI_API_KEY not found in .env file")

os.environ["OPENAI_API_KEY"] = api_key

Step 3: Initialize LLM, Image Path and VisionTool

For this use case, we use gpt-4o model from OpenAI, which is efficient and relatively affordable. However, feel free to use other models if you prefer. Also, setting the temperature to a higher value will generate more creative and diverse results.

llm = LLM(model="gpt-4o", temperature=0.8)

Download the input image from the GitHub repository or use your own image. Place it in the root directory.

# Replace 'image1.png' with the actual filename of your uploaded image
image_path = "image1.png"

image = Image.open(image_path)

Next, create an instance of Vision Tool from CrewAI, which is capable of extracting text from images.

vision_tool = VisionTool()

Step 4: Define AI Agents

As CrewAI docs say, an Agent is an autonomous unit that can perform specific tasks, make decisions based on its role and goal or collaborate with other agents. Think of an agent as a specialized team member with specific skills, expertise, and responsibilities.

Let's define our first Agent.

Agent 1: Image Analyzer

image_analyzer_agent = Agent(
    role="Image Describer",
    goal=f"Describe the content of the image {image_path} accurately and comprehensively.",
    backstory="Expert Designer working for a B2B Restaurant Startup.",
    verbose=True,
    tools=[vision_tool],
    llm=llm
)

You can adapt the Agent's attributes to fit your specific use case.

Next, let's define additional two agents - Designer and Product Manager.

Agent 2: Designer

designer_agent = Agent(
    role="Design Improvement Suggestion Agent",
    goal=f"Review image descriptions and provide actionable improvement suggestions to the described scene in {image_path}.",
    backstory="You are an expert designer with a keen eye for detail, specializing in B2B restaurant design.",
    verbose=True,
    llm=llm,
    tools=[vision_tool]
)

Agent 3: Product Manager

product_manager_agent = Agent(
    role="Product Manager",
    goal=f"Create user stories and prioritize them based on the image {image_path}.",
    backstory="You are a product manager experienced in B2B restaurant solutions.",
    verbose=True,
    llm=llm,
    tools=[vision_tool]
)

Step 5: Define Tasks

In CrewAI, a Task is a specific assignment completed by an Agent. In each task you define all the necessary details for execution.

We will use sequential execution flow, in which Tasks are executed in order they are defined.

Task 1: Describe Image

task_describe_image = Task(
    description="Describe the content of the image.",
    expected_output="A detailed description of the image",
    agent=image_analyzer_agent
)

Task 2: Suggest Design Improvements

task_suggest_improvements = Task(
    description="Review the image description and suggest improvements to the image. Focus on design and visual elements.",
    expected_output="A list of actionable suggestions.",
    agent=designer_agent,
    context=[task_describe_image]
)

Task 3: Create User Stories

task_create_user_stories = Task(
    description="Create user stories based on the design improvements suggested. Prioritize these user stories based on impact and feasibility.",
    expected_output="A prioritized list of user stories.",
    agent=product_manager_agent,
    context=[task_describe_image, task_suggest_improvements]
)

Step 6: Define and Run the AI Team

Now that we defined Agents and Tasks, we are ready to define a Crew and start the execution.

ai_team = Crew(
    agents=[image_analyzer_agent, designer_agent, product_manager_agent],
    tasks=[task_describe_image, task_suggest_improvements, task_create_user_stories],
    process=Process.sequential,
    verbose=True
)

result = ai_team.kickoff()

Step 7: Save the Output

We stored the outcome in result variable, but for better readability, it would be helpful to write it in Markdown and save it to a new file called output.md:

with open("output.md", "w") as md_file:
    md_file.write("## Crew Execution Results in Markdown:\n")

    for idx, task_output in enumerate(result.tasks_output):
        md_file.write(f"Agent {idx + 1}: {task_output.agent}\n{task_output.raw}\n\n")

Step 8: Run the app & refine

Finally, it's time for executing and see the results:

python3 main.py

🚀 Voila! The result should be stored in the output.md file, written in Markdown.

  ## Crew Execution Results in Markdown:
  Agent 1: Image Describer
  The image shows a user interface of a restaurant management system, tailored for a restaurant named "Pizza Real." The interface features a theme setup section where users can manage different elements of the restaurant's website appearance. Key components visible in the interface include:

  1. **Social Media Links**: There are options to manage links to various social media platforms, including TikTok, Facebook, Instagram, and YouTube. These appear to be essential elements for connecting the restaurant's online presence with social media.

  2. **Cover Logo Section**: There is a designated area for uploading the restaurant's cover logo, which is crucial for branding purposes.

  3. **Background Customization**: Users can choose between setting a background color or an image for the website. The interface indicates a specific color code, #102d50, which is selected for the menu background, suggesting a preference for a particular aesthetic.

  4. **Layout and Navigation**: The interface is organized with a left sidebar that likely serves as a navigation menu. The sidebar allows users to switch between different settings and sections within the management system.

  Overall, the user interface is designed to provide a comprehensive set of tools for customizing and managing the visual theme of the restaurant's online presence, focusing on branding, aesthetic consistency, and social media integration.

  Agent 2: Design Improvement Suggestion Agent
  Based on the description of the user interface for the restaurant management system in "Pizza Real," here are some actionable design improvement suggestions:

  1. **Enhance Visual Hierarchy**: Ensure that the most critical features, such as the cover logo and social media links, are prominently displayed with distinct visual separation. This could be achieved through size variation, color contrasts, or using dividers.

  2. **Social Media Link Customization**: Provide customization options for social media icons, such as size, color, and shape, to align with the restaurant's brand identity, making them more visually integrated with the overall theme.

  3. **Cover Logo Optimization**: Allow for different display options and sizes for the cover logo to ensure it displays optimally across different devices. Consider adding a preview function so users can see how their logo appears on the site.

  4. **Background Customization Preview**: Introduce a live preview feature for background changes (color or image) to allow users to see the impact of their choices in real time. This helps in maintaining aesthetic consistency and making informed decisions.

  5. **Sidebar Enhancement**: If the sidebar is used for navigation, consider making it collapsible to maximize the workspace in the main area, especially on smaller screens. Use icons alongside text for better recognition and quicker access.

  6. **Color Palette and Theme Consistency**: Offer a set of pre-defined color palettes that users can choose from to maintain a cohesive theme throughout the site. Encourage the use of complementary colors to the #102d50 code to enhance visual appeal.

  7. **Tooltips and Help Guides**: Integrate tooltips or a help guide to assist users in understanding different features and settings quickly. This can improve user experience, especially for those new to the system.

  8. **Responsive Design Considerations**: Ensure that the user interface is fully responsive. This involves optimizing the display for various devices such as tablets and smartphones, ensuring accessibility and ease of use on any platform.

  Implementing these suggestions can lead to a more intuitive and visually appealing user interface, enhancing the management capabilities and overall online presence of "Pizza Real." 

  Agent 3: Product Manager
  Based on the design improvements suggested for the "Pizza Real" restaurant management system interface, here is a prioritized list of user stories:

  1. **Responsive Design Optimization**
     - As a user, I want the interface to be fully responsive so that it can be easily accessed and used on any device, ensuring accessibility and ease of use.

  2. **Cover Logo Display Options**
     - As a user, I want different display options and sizes for the cover logo to ensure it appears optimally across devices, and I want a preview function to see how my logo looks on the site.

  3. **Sidebar Enhancement**
     - As a user, I want the navigation sidebar to be collapsible to maximize workspace on smaller screens, with icons alongside text for better recognition.

  4. **Social Media Icon Customization**
     - As a user, I want to customize social media icons (size, color, shape) so they align with the restaurant's brand identity and integrate with the theme.

  5. **Background Customization Live Preview**
     - As a user, I want a live preview for background changes so I can see the impact of my color or image choices in real-time, ensuring aesthetic consistency.

  6. **Enhance Visual Hierarchy**
     - As a user, I want critical features like cover logo and social media links to be prominently displayed with visual separation for easy access.

  7. **Color Palette Options**
     - As a user, I want a set of predefined color palettes to maintain a cohesive theme, using complementary colors to the #102d50 code.

  8. **Tooltips and Help Guides Integration**
     - As a user, I want tooltips or a help guide to assist me in understanding different features and settings quickly, improving my user experience.

  These user stories are prioritized based on their impact on user experience and feasibility of implementation. Responsive design and cover logo optimization are top priorities due to their significant impact on usability and branding. Sidebar and social media icon enhancements follow due to their role in navigation and brand alignment. Live previews and visual hierarchy improvements are also important for maintaining an intuitive and visually appealing interface. Color palette options and help guides are prioritized last, as they are enhancements to existing functionalities.

Feel free to adjust the definitions of Agents and Tasks to achieve the desired outcome.

Conclusion

By leveraging CrewAI, we built a team of AI agents that:

• analyze images,

• suggest design improvements,

• and generate user stories.

This project demonstrates the power of multi-agent collaboration in solving real-world problems efficiently. Implementing such AI-powered workflows can significantly enhance productivity, allowing professionals to focus on strategic decision-making while AI handles the repetitive tasks.

I encourage you to experiment with different models, expand the team’s capabilities, and customize the AI agents to fit your specific needs.

Here is the complete GitHub repository for reference.

Thank you for reading!

Since these problems can be frustrating and time-consuming, I want to share the insights I gathered to help you set up Google Sign-In quickly and avoid common pitfalls.

Step 1: Install Expo Google Sign-In

Install @react-native-google-signin/google-signin package by running command:

npx expo install @react-native-google-signin/google-signin

• it will install required package for authentication in Expo

• it will update app.json plugins

Step 2: Set Up Your Google Cloud Project

• Open Google Cloud Console and create a new project.

Configure the OAuth Consent Screen

• Navigate to APIs & Services > OAuth consent screen.

• Choose External for the user type

• Fill out the necessary information, such as App name, User support email, and Developer contact information.

• Add Test users -> from my experience, this is required for correct iOS setup in development.

• Click Save.

Create Client ID For Web

• Select Web application as the application type.

• Enter appropriate Name.

• Click Create. The generated Client ID will be used in your Expo app.

Create Client ID For Android

• Select Android as the application type.

• Enter your Package Name from your app.json / app.config.js / app.config.ts file (e.g., com.myorg.myapp).

• When creating SHA-1 certificate fingerprint there are currently 2 options:

Option 1 - Recommended by Google (worked for me):

• Get the fingerprint certificate by running:

keytool -keystore path-to-debug-or-production-keystore -list -v

• where path-to-debug-or-production-keystore is your path to android build: ./android/app/debug.keystore

• Hit Enter. For keystore password, leave it empty (used for development)

• Find and copy the SHA-1 fingerprint into the appropriate field in the Google Cloud Console.

• Click Create.

Option 2: Recommended by Supabase (official way)

This solution is stated in Supabase documentation. However, for some reason this did not work for me, but at a time you reading this it might work again:

• Run command eas credentials from the project root and select Android to retrieve the SHA-1 fingerprint.

• Find and copy the SHA-1 fingerprint into the appropriate field in the Google Cloud Console.

Create Client ID For iOS

• Select iOS as the application type.

• Enter the Name you like

• Modify your app.json to add this configuration:

"expo": {
  "ios: {
    "bundleIdentifier": "com.<YOUR_USERNAME.APP_SCHEME>"
  },
  "plugins": [
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "<YOUR_IOS_URL_SCHEME>"
        }
      ]
    ],
}

• In Google Cloud Console, enter Bundle ID**,** which should match with the bundleIdentifier in app.json (if not there, add it)

• Copy iOS URL Scheme from Google Cloud Console and paste it app.json under plugins

Step 3: Configure Supabase

• In your Supabase project, go to Authentication > Sign-in/ Up > section Auth Providers > Google.

• Enable Sign in with Google

• Copy both OAuth Client ID for web and Android from your Google Cloud console and paste it to the Authorized Client IDs field, separting by comma.

• Copy the Client Secret from web client ID and paste it to the field Client Secret (for OAuth)

• Enable Skip nonce checks**.** By default, Supabase Auth implements nonce validation during the authentication flow.

• From field Callback URL (for OAuth) copy the value and paste the URI in the Google Cloud Console -> Web Client ID -> Authorized redirect URIs. This ensures that your Supabase project is valid for Google authentication.

Step 4: Update Your Expo App

Now the coding part. To implement Google button, you should use the one from @react-native-google-signin/google-signin.

Here is an example:

// GoogleSignIn.tsx

import {
  GoogleSignin,
  GoogleSigninButton,
} from "@react-native-google-signin/google-signin";
import React from "react";
import { supabase } from "@/utils/supabase";
import { router } from "expo-router";
import { useAuthStore } from "@/store/auth.store";

GoogleSignin.configure({
  webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
  iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID,
});

const GoogleSignIn = () => {
  const { authLoading, setAuthLoading, setUser } = useAuthStore();

  const handleSignIn = async () => {
    try {
      setAuthLoading(true);
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();

      if (userInfo.data?.idToken) {
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: "google",
          token: userInfo.data.idToken,
        });

        if (error) {
          console.error(error);
        }

        const user = data?.user;

        if (user) {
          setUser({
            id: user.id,
            email: user.email || "",
            name: user.user_metadata.name,
            fullName: user.user_metadata.full_name,
            avatarUrl: user.user_metadata.picture,
          });
          router.replace("/");
        }
      } else {
        throw new Error("no ID token present!");
      }
    } catch (error: unknown) {
      console.error(error);
    } finally {
      setAuthLoading(false);
    }
  };

  return (
    <GoogleSigninButton
      size={GoogleSigninButton.Size.Wide}
      color={GoogleSigninButton.Color.Light}
      onPress={handleSignIn}
      disabled={authLoading}
    />
  );
};

export default GoogleSignIn;

Be careful when configuring GoogleSignIn.configure:

• in webClientId paste client ID from Web Client ID, NOT Android Client ID.

• in iosClientId paste client ID from iOS.

Step 4: Build and Test

• Build your app using expo prebuild:

npx expo prebuild --clean

• Now you can run your app on both Android and iOS (either simulator or physical device).

• Make sure you use development build as this is a requirement of google-signin package.

npx expo run:android

On another terminal window:

npx expo run:ios

• Go to your device and click the Google Sign-In button and verify that you can sign in successfully.

Common Issues and Troubleshooting

• Error: DEVELOPER_ERROR

  • This error often indicates a problem with the SHA-1 certificate fingerprint or the OAuth client configuration.

  • Try to use options mentioned above.

• Error: Must specify an idToken or an accessToken

  • This usually means the wrong client ID is being used. Ensure you are using the Web client ID from the Google Cloud Console.

Conclusion

Setting up Google Sign-In in an Expo project with Supabase can be tricky. The most common pitfalls involve incorrect OAuth credentials, missing SHA-1 fingerprints, or using the wrong client ID.

By following this guide, you should be able to set up authentication smoothly and avoid wasting hours debugging.

If you run into issues or need further assistance, feel free to reach out to me. You can also check out the full source code in my GitHub repository for a complete working example:

👉 GitHub Repository

Happy coding! 🚀

As Douglas Crockford, an author of JavaScript: The Good Parts, once said:

JavaScript is the world’s most misunderstood programming language.

To truly master JavaScript and stand out, you need to understand its core principles and one of the most powerful among them is closures.

I guarantee that learning how closures work will ease your life and save nerves when solving daily problems. If you truly grasp the point, you can implement it in your project as a good practice and I’m sure other team members will appreciate your hard work.

I will explain to you how closures work by providing simple examples and giving you two real cases when they are useful. Big thanks belong to Andrei Neagoie, who gave me huge inspiration for writing this article.

The requirements are familiarity with functions and Javascript runtime environment.

If you want to grasp the main point of why closures are useful, the prerequisite is good knowledge of functions and lexical scoping (or lexical environment). A combination of these two aspects is the core of closures.

So let’s take it over one by one.

Functions

I am pretty sure that you have at least a basic knowledge of functions if you code in Javascript. Otherwise, it would be like baking a cake without cooking tools.

However, you should also know the term which is closely bound with closures and that is higher-order functions.

Higher-order function (HOC)

It’s a type of function that either takes a function as an argument, returns a function as its return value, or both.

Here is a basic example from daily praxis:

If you work with arrays, I suppose you came across array methods such as Array.map(), Array.filter() or Array.reduce(). All of them take a function as an argument. All of them are higher-order functions.

Let’s write another example:

 const handleFamily = () => {
  const myGrandpa = 'grandpa';

  return sayHello = () => {
    const myFather = 'father';
    return 'Hello there!';
  }
}

The handleFamily function is using a fat arrow function expression, which was introduced in ECMAScript 2015 (ES6). Inside this function, we have declared a variable myGrandpa and returned another function sayHello, so it is a Higher Order function.

If we call (invoke) handleFamily(), this is what we get:

==> Function sayHello

That is pretty logical — we get another function. So in order to get the desired output, we have to call it like this:

handleFamily()()

==> 'Hello there!'

These two brackets one after another basically mean that whatever we return from handleFamily, we call again. We could also assign the called handleFamily to a variable so it would be like this:

const holdFamily = handleFamily();

holdFamily();

We tend to use HOC all the time. If you’re a JavaScript programmer or if you’ve ever done any JavaScript, you’ve probably used them all over the place.

Execution scope

It’s also required to know what really happens if a function is called. In Javascript, every function creates its local execution scope (or also the so-called local execution context). What does it mean?

• It means, that every variable, which is declared in this scope is also local to this scope.

• The outer scope of the function — in our case, global scope — has no access to these variables.

• On the other hand, the local scope can access variables from its outer scope. The reason is because of closures, which I explain later in this story.

• It is a good practice to write variables, where they are needed. Therefore you might avoid side-effects and memory overloading of the Javascript engine.

In our example, the local execution scope of handleFamily is where the first opening curly bracket is and ends with the last closing bracket. Its local variables are myGrandpa and sayHello.

The sayHello function has of course also its local execution scope, where myFather is declared. This means if you want to access this variable from handleFamily (the outer scope) you get an error because Javascript won’t see it.

Lexical scope

It is a quite fancy name, but yet easy to understand. The best way how to explain to you this term is by dividing these words:

• lexical — means where is a code written,

• scope — what variables we have access to.

What do I mean by that?

In the first phase, even before executing the code, the Javascript engine will save all variables to the temporary memory of the Javascript engine (also called memory heap) for future usage. At the same time, the engine will recognize which function has access to which variables. This is done by determining function execution scopes and chaining them properly (often so-called scope chaining).

Eventually, in terms of scoping it matters, where a function is written, not where is called.

The coherence

Now, since we are familiar with functions and lexical scoping, let’s combine them. I will modify our handleFamily function in the following manner:

const handleFamily = () => {
  const myGrandpa = 'grandpa';

  return sayHello = () => {
    const myFather = 'father';
    return `Hello ${myGrandpa} and ${myFather}!`
  }
}

const hold = handleFamily();
hold();

What do you expect the result would be?

==> 'Hello grandpa and father!'

If you work with JavaScript I assume you are familiar with such behavior, but I think it’s quite important to understand why this happens. So let’s dismantle the whole process.

Dismantling the execution

When I had assigned handleFamily to a variable hold, its execution context was executed and popped off the call stack. When this happens, it usually means that the variable environment is destroyed as well. However, every function creates a closure, which has reserved space in the memory heap. If some variable is being referenced in one of the inner functions, the variable is saved in the closure memory waiting for use.

By calling hold() we execute sayHello function. The myFather variable is declared in the same scope and immediately used. On the other hand, myGrandpa is declared in the outer scope. That means the Javascript engine will go up to the outer scope and search for the myGrandpa in the closure memory. In our case, the variable is present there.

Theoretically, if myGrandpa wouldn’t be declared in the outer scope, it would go up to another level (in our case in the global scope) and search for the variable there. If it's still absent, it would return an error.

This is quite a unique behavior compared to other languages. Javascript engine will always make sure that functions have access to all of the variables outside the function using closures.

Finally, after calling sayHello, it’s popped off the call stack, and variables that are not referenced anywhere are cleaned up from memory by a cleaning mechanism of the Javascript engine called garbage collection.

Why so much enthusiasm

Now you might be thinking that closures are just big hype. But I will show you two cases when they could improve your code in terms of performance and security. I am talking about memory efficiency and data encapsulation.

Memory efficiency

Consider the following function called produceCandy:

const produceCandy = (index) => {  
  const candyFactory = new Array(7000).fill('sweet candy');

  console.log('the candy factory was established');  
  return candyFactory[index];
}

• The variable candyFactory creates an array, which has 7000 items.

• It logs the text in the console whenever the function is called and returns an item with the desired index.

Now, what is the main problem with this function?

Consider we need to return any items from candyFactory. In practice, it could be some data we need to get from a database and do something with it:

candyFactory(34);
candyFactory(4574);
candyFactory(875);

// returns ==> the candy factory was established the candy factory was established the candy factory was established sweet candy

It means, candyFactory is created in the memory heap before execution and destroyed after execution every time it is called.

In our case, it’s not a big issue, but imagine you would call it ten thousand times. It would create the variable and destroy it ten thousand times, which is memory inefficient and might cause performance issues.

So what could be a solution? You’re guessing right — using closures.

I would modify our function like this:

const produceCandyEfficiently = () => {
  const candyFactory = new Array(7000).fill('sweet candy') 
  // candyFactory is stored in the closure memory, 
  // because it has reference in execution scope of inner function below
  console.log('the candy factory was established');
  return (index) => {
      return candyFactory[index];
  }
}

const getProduceCandyEfficiently = produceCandyEfficiently();

getProduceCandyEfficiently(1243);
getProduceCandyEfficiently(6832);
getProduceCandyEfficiently(345);

And after calling getProduceCandyEfficiently 3 times this is the output:

==> the candy factory was established sweet candy

So candyFactory is created only once no matter how many times you call getProduceCandyEfficiently. After the last call, this function is eventually removed from the memory.

In tasks such as processing an immense amount of data, it can significantly improve performance. Cool, right?

Data encapsulation

This is another case when closures might be useful.

Suppose we have another candy factory, which monitors the duration time of its production since the function monitorProductivityTime has been called.

We will store this amount of time in the variable timeWithoutReset. The value is incremented every second in setInterval. Along with that, we’d like to also have a function, which would reset this duration time if needed. Let’s call it reset.

This is what would it look like (try to test it in the browser console to receive proper results):

const monitorProductivityTime = () => {
    let timeWithoutReset = 0;
    const productivityTime = () => timeWithoutReset++;
    const totalProductivityTime = () => timeWithoutReset;
    const reset = () => {
      timeWithoutReset = -1;
      return 'production time has been restarted!';
    }

    setInterval(productivityTime, 1000);
    return {
      totalProductivityTime, 
      reset
    }
  }
const holdTime = monitorProductivityTime();
holdTime.totalProductivityTime();

When we call holdTime.totalProductivityTime() In the last line, we are measuring the duration of time from this moment. If you’d like to reset this time, just call holdTime.reset().

Because reset function is inside monitorProductivityTime, it uses closure for accessing the variable timeWithoutReset.

However, the main problem with this function is that everybody can access reset. It could be your new team member, who is not acquainted with the project yet and could mess some things up. Or any third party from outside of your company. This can cause many troubles and security issues in practice, therefore some data or functions should not be directly exposed.

For this reason, you should always keep in mind the principle of least privilege, which is one of the security principles you should observe. It means that data can be accessed only by competent individuals.

The solution to this example might be to return reset, only if it’s appropriate, e.g. user has a competent role to access this function.

Summary

There’s no question, closures are one of the core principles in Javascript. It brings developers huge benefits if they’re used in the right way, but many times they’re used in code unknowingly.

Therefore, you should catch the following points about closures:

• Every function has reserved space in the memory heap for closures.

• Javascript engine will always make sure that functions have access to all of the variables outside the function.

• When you’re processing an immense amount of data you can optimize memory usage.

• When you’re working with sensitive data you can observe the principle of least privilege using encapsulation.

• Closures can significantly improve the performance and security of your code.

Thank you for reading.