DEV Community: Marcelo Arias

Create a ChatGPT Plugin to retrieve NASA images

Marcelo Arias — Thu, 13 Apr 2023 04:06:19 +0000

Do you want to learn more about ChatGPT Plugins? Check out LaunchPlugins.

ChatGPT Plugins are a great way to extend the capabilities of ChatGPT!

So if you just received access to ChatGPT Plugins, this is the place where you can start.

Let's create a plugin that will retrieve information from NASA API. It will get the NASA Astronomical Picture of the Day (APOD) and it will also allow us to search for images in NASA's Image Library to retrieve a list of images based on a search query.

In this article I'll be using Autocode. Autocode is an automation software suite with a great developer experience. I think you will love it.

But if you choose not to use Autocode, you can create your own API on your own. I'll guide you in that process, it's very simple.

🎥 Demo of the plugin

Check how the plugin should work with this video:

Demo: https://youtu.be/A7MC3e9_rKk

🧬 Structure

This is a quick overview of the process of a ChatGPT Plugin:

🌄 Check this image in detail

A ChatGPT Plugin could be installed by specifying a URL. This URL has three components:

OpenAPI Specification: A YAML file that describes the API
Manifest: A JSON file that describes the plugin
API: The API itself where we can send receive requests from ChatGPT

I believe OpenAPI Specification is the most important part of a ChatGPT Plugin. Whenever ChatGPT receives a message that matches the plugin's manifest, it will look at the OpenAPI Specification to know how to interact with the API. It works like a channel between ChatGPT and the API.

The manifest is a JSON file that describes the plugin. It contains the name, description for humans and for the model, and the OpenAPI Specification URL. It should be place in /.well-known/ai-plugin.json.

A couple of weeks ago, I discovered Autocode, a suite of tools that allows you to develop and launch many software projects with one of the best Developer Experience (DX) I've ever seen. I was so impressed by the DX that I decided to create a plugin for ChatGPT using Autocode.

If you already use Autocode, you can use this template and start explore the plugin architecture as you read this article.

Now let's create the plugin:

If you're working with Autocode, you can use this template to start.
If you're not, create a new API project. Do you like to use Express? Flask? Django? Spring Boot? The library/framework is up to your preference. But create one to start.

🗒 Creating the Manifest (ai-plugin.json)

If you're working with Autocode the Manifest should be included in www folder. In that folder create a .well-known folder, and finally create a ai-plugin.json.

If you're not working with Autocode, you need to create the .well-known folder as well as the ai-plugin.json file inside the public or static directory of your API. So you can access to that file from the URL <URL_OF_API>/.well-known/ai-plugin.json.

{
  "schema_version": "v1",
  "name_for_human": "Astrodaily",
  "name_for_model": "astrodaily",
  "description_for_human": "Plugin for getting the pictures from NASA!",
  "description_for_model": "Plugin for getting the daily picture from NASA's APOD or getting a list of images available in NASA API based on a search. When use it always provide the images in Markdown format so the user can see it. Do not add links, only images.",
  "auth": {
    "type": "none"
  },
  "api": {
    "type": "openapi",
    "url": "<URL_OF_API>/openapi.yaml",
    "is_user_authenticated": false
  },
  "logo_url": "<URL_OF_API>/logo.png",
  "contact_email": "legal@example.com",
  "legal_info_url": "<URL_OF_API>/legal"
}

You can name the plugin whatever you want. I named it Astrodaily. The description_for_human is the description that will be shown to the user.

The description_for_model is the description that will be shown to the model itself. Which it's a description + series of instructions that the model will use to know when to use the plugin.

ChatGPT Plugins can also support authentication. But we won't need it for this plugin. So we'll set the auth to none.

📑 Creating the OpenAPI Specification

OpenAPI is a specification for describing REST APIs. It's a standard that is used by many tools. OpenAI Plugins request an OpenAPI YAML file to check the description of the API. So we'll need to create an OpenAPI Specification for our plugin.

If you're working with Autocode this should be place in /www/openapi.yaml.

If you're not working with Autocode, you need to create a file called openapi.yaml in the root of your public or static directory. So you can access to that file from the URL <URL_OF_API>/openapi.yaml.

So, our plugin, will work with two endpoints: /image and /search. The /image endpoint will return the NASA Picture of the Day. The /search endpoint will return a list of images based on a search query:

openapi: 3.0.1
info:
  title: Astrodaily
  description: A plugin for getting the daily picture from NASA's APOD and searching the NASA Image and Video Library
  version: 'v1'
servers:
  - url: <URL_OF_API>
paths:
  /image:
    get:
      operationId: getImage
      summary: Get the NASA Picture of the Day
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/getImageResponse'
  /search:
    get:
      operationId: searchImages
      summary: Get images from NASA based on a query
      parameters:
        - name: q
          in: query
          description: The search query
          required: true
          schema:
            type: string
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/searchImagesResponse'

components:
  schemas:
    getImageResponse:
      type: object
      properties:
        imageURL:
          type: string
          description: The URL of the NASA Picture of the Day.
    searchImagesResponse:
      type: object
      description: The response containing the list of images from the NASA Image Library.
      properties:
        title:
          type: string
          description: The title of the image.
        description:
          type: string
          description: The description of the image.
        location:
          type: string
          description: The location of the image.
        date_created:
          type: string
          description: The date when the image was created.
        image_url:
          type: string
          description: The URL of the image. It must be displayed as an image in Markdown format.

🪐 Setting up the API endpoints

Up to here, we have the OpenAPI Specification and the Manifest. With this is enough to create a plugin. But we'll create the API endpoints as well so our plugin can be used.

You need a NASA API key to retrieve the images from NASA. You can get a NASA API key here:

If you're not working with Autocode, you can start creating those /image and /search endpoints to process GET requests. I'll show you the code, you can translate it to your preferred API framework.

If you're working with Autocode, inside the functions folder, create a image.js and a search.js file. These files will contain the code for the endpoints:

The image endpoint will return the NASA Picture of the Day:

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

// Make a request to the NASA APOD API
let todayImage = await lib.http.request['@1.1.7'].get({
  url: `https://api.nasa.gov/planetary/apod`,
  queryParams: {
    'api_key': process.env.NASA_API_KEY
  }
});

let imageUrl = todayImage.data['url']

return { "image_url": imageUrl };

The search endpoint will return a list of images based on a search query. Here the process takes more lines of code. But it's not that complicated. We'll make a request to the NASA Image Library API. Then we'll filter the results to keep only the images. And finally, we'll return the 10 items that we want to show to the user.

const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});

// Retrieve the search query parameter
const query = context.params.q;

// Make a request to the NASA Image and Video Library API
let searchResults = await lib.http.request['@1.1.7'].get({
  url: `https://images-api.nasa.gov/search`,
  queryParams: {
    'q': query
  }
});

// Extract the search results
let results = searchResults.data;

// Filter the items array to keep only image items
let imageItems = results.collection.items.filter(item => {
  return item.data[0].media_type === 'image';
});

// Restructure the filtered items array for the GPT response
// Also return the first 10 items
let structuredItems = imageItems.map(item => {
  return {
    title: item.data[0].title,
    description: item.data[0].description,
    location: item.data[0].location,
    date_created: item.data[0].date_created,
    image_url: item.links[0].href
  };
}).slice(0, 10);

return structuredItems.slice(0, 10);

Proving with more information like title, description, location, and date_created will make the results more useful for the ChatGPT to write a descriptive response.

Up to here, try testing the endpoints with a GET request so you can see if they work properly.

🚀 Adding your plugin to ChatGPT

This is the last step! We have our plugin ready. Now we need to add it to ChatGPT. I'll give you tips on how to do it without getting errors through the process.

Open ChatGPT, go to the Plugins dropdown menu, click on Plugin Store, click on "Develop your own plugin" link at the bottom. Then you will see this screen:

As you can see, you can put your plugin's URL without the protocol (https://) and without slashes (/).

If you're working with Autocode: Autocode automatically creates a URL for the API that is like this:

<ENVIRONMENT>--<SERVICE_NAME>--<USERNAME>.autocode.dev

# Example:
dev--astrodaily--macky360.autocode.dev

I put my ChatGPT plugin domain under api.360macky.com, you can customize the URL in Hostnames. It will work in both cases.

If you tried the above URL (dev--astrodaily--macky360.autocode.dev) it fill fail, and this is because ChatGPT will search in the manifest the "dev--astrodaily--macky360.autocode.dev" server. But since I use the "api.360macky.com" URL, that would not match. If in the future I change the URL to "api.360macky.com", I will need to change the manifest and the OpenAPI Specification.

But if everything went well, we will see this:

⚙️ Troubleshooting

The first filter your plugin will go through is the Manifest (the ai-plugin.json file). Make sure it's accessible and in the correct folder.

If I'm using the "api.360macky.com" URL:

api.360macky.com/plugin/ai-plugin.json ❌ (wrong folder)
360macky.com/.well-known/ai-plugin.json ❌ (wrong subdomain)
api.360macky.com/.well-known/ai-plugin.json ✅ (correct folder)

If you're working from a server, and it's not accessible, check CORS policies. It needs to allow requests from chat.openai.com.

If something it's not working on localhost and you can't figure out why, try to use the ngrok tool. It will create a tunnel to your localhost and you can use it to test your plugin. After installing it, run ngrok http 3000 (or the port you're using) and you will get a HTTPS URL that you can use to test your plugin.

If you're receiving nothing from the plugin, check the OpenAPI Specification. Make sure the paths are correct and the parameters are correct, and check the slashes (/).

Can ChatGPT help you with this? Yes, it can. Actually, there is already a plugin to create plugins. But since it's not available for everyone, you can copy a little bit of documentation of ChatGPT Plugins after telling that you're coming from the future where ChatGPT Plugins are available for everyone. Of course, I suggest you to use the GPT-4 model for better results.

Conclusion

Overall, ChatGPT Plugins are... (just kidding 😉).

So, I hope you have enjoyed this article. If you have any questions, feel free to ask them in the comments. And if you have any suggestions, I would love to hear them. Follow me on Twitter at @360macky or Mastodon at @360macky@mastodon.social to stay updated with GPT models and any other AI-related stuff.

And my GitHub account @360macky if you want to see my future projects.

🚀 Thanks for reading! 🙏

Do you want to learn more about ChatGPT Plugins? Check out LaunchPlugins.

Build your next website with Astro

Marcelo Arias — Thu, 16 Feb 2023 00:55:34 +0000

The last two weeks I’ve been moving websites made with only React to Astro. The developer experience was fantastic, even for a new tool with alpha/beta integrations.

Let’s explore what Astro does for you in web development:

Astro is similar to a static site generator. You can create markdown files and templates. Which is quite useful for websites like news journals, blogs, and so on.

But Astro is more than that. It's a tool that allows you to use React, Vue, Svelte, and other frameworks to create those static sites.

If you use React or Vue to generate a list of posts, with Astro the list will be rendered in build time and exported as static HTML. This means that the user will see the list of posts immediately, without needing to wait for the JavaScript to load. This is a huge performance boost.

But what if you want to use React to render a modal or a carousel and keep the rest of the page static. Astro allows you to do that kind of interactivity with Astro Islands:

🏝 Astro Islands

Astro Islands is a feature that allows you to insert dynamic content (content that uses JavaScript) into a static page. In order to achieve that interactivity in the frontend, Astro will insert JavaScript but only for the dynamic content. The rest of the page will be static. Garantying speed with a reduced bundle size.

Astro Islands accepts any library that can be used in the browser!

This approach also allows using many ways of loading JavaScript with Client Directives.

⚡️ Client Directives

By default if you insert a React or Vue component in a page, Astro will render it in build time and export it as static HTML. But you can use Client Directives to change this behavior.

Load

This will load the component with their JavaScript bundle associated as soon as the page loads. This is useful for components that need to be rendered immediately in your page.

<MyReactComponent client:load />

IDLE

This will load the component with their JavaScript bundle associated when the browser finishes loading the page and the requestIdleCallback event is triggered. This is useful for components that don’t need to be rendered immediately in your page, but need to be present at the beginning of the user interaction.

<Button client:load />

Visible

This will load the component with when the component is visible in the viewport. That means when the users sees the component in the screen.

<MyImage client:visible />

Media

Loading the component after matching a media query. This is useful for components that need to be rendered only in specific devices or screen sizes. You need to specify the media query in the directive.

<SidebarMobile client:media="(max-width: 1024px)" />

Only

In this case, the component will not render in build time. It will only be rendered in the browser. So you need to tu specity the library or framework in the directive.

<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />

👩‍💻 Developer Experience in Astro

Integrating Astro with React, Vue, Svelte, and other frameworks is very easy. You don't even need to change your code manually beacuse the Astro CLI will do it for you.

While in this article, I will not build a whole website with Astro, this is how you start:

# Install the Astro CLI and create a new project

npm create astro@latest

It will ask you a few questions like the name of the project, if you want to use a template, if you want to use TypeScript, if you want to initialize a git repository, and so on:

Adding React or any framework it’s as easy as type

astro add <library/framework>

It will install the dependencies, and if you want it will modify the Astro configuration file to accept React components.

Conclusion

If you want to build a website with many interactive elements, that uses JavaScript in many places. You probably should not use Astro. Since it will force you to activate the Astro Islands in many components, using another approach would be fine.

But if you want to build a website like a landing page or a personal website. Something that has zero or little interactivity with JavaScript on it, try Astro.

The developer experience is awesome. I think you will love it.

Enhance your READMEs with native Mermaid diagrams

Marcelo Arias — Mon, 16 Jan 2023 23:00:26 +0000

Many times when we think about how to solve a problem we choose to draw a flowchart or another type of visualization with the aim that everything is clear and that we don't miss anything by the end.

When explaining this part to our friends, it can be very helpful for them to also have clear diagrams of the core parts of a system. And on GitHub, we have a native solution within our Markdown files (like READMEs) for creating these diagrams:

READMEs are a great way to provide a visual description of how your project works, from overall architecture to specific details. With flowcharts, you can illustrate the sequence of steps in a process, the different components of a system, or the relationship between elements (like classes).

What is Mermaid?

Mermaid is a popular library for creating diagrams and flowcharts from text. It is easy to use and can be used to create diagrams using simple text commands. It's also open source and you can use it in GitHub.

In this article you will know how to use Mermaid to design diagrams with examples using the mermaid tags.

How to use Mermaid tags?

All you need to do is to define the diagram using a simple text-based syntax and then render the diagram using the mermaid tag.

For example, let's say I want a flowchart diagram of 4 components. The "A" node will have arrows to "B" and "C", and both "B" and "C" have arrows with a "D" node. I could represent this in code like this:

flowchart TD
A --> B;
A --> C;
B --> D;
C --> D;

And this code will render the following diagram:

As you can see, the syntax is quite simple and easy to understand.

Mermaid Basics

The Mermaid flowcharts are composed of nodes: shapes, edges, arrows and lines.

You need to define the flowchart orientation at the beggining. In the example of above the diagram will go from top to the bottom. But other orientations are:

TB - top to bottom
TD - top-down/ same as top to bottom
BT - bottom to top
RL - right to left
LR - left to right

In addition to flowcharts, Mermaid can also be used to create a variety of other diagrams, such as sequence diagrams.

Sequence Diagrams

To draw a Sequence Diagram, you need to write "sequenceDiagram" in the first line.

After that, you can connect with arrows two nodes. Using the characters:

-->

Here is an example of a sequence diagram created with Mermaid:

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

State Diagrams

A state diagram is used to describe the flow of a variable. And you can also create a State Diagram using Mermaid. Starting with the stateDiagram and making connections between nodes with the characters: -->.

stateDiagram
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

The result will be the following:

Class Diagram

A class diagram is a great way to visualize relationships between classes. In this case, you will need to write the classes methods and you can add relationships between classes using other type of arrows.

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }

Creation of other diagrams dynamically

How can you make the process of drawing diagrams even easier?

With Mermaid Live Editor you can create diagrams directly on the web. Using this website, every change you make on the code editor in the left side is reflected on the result in the right side. Like a CodePen.

How do TensorFlow.js models load in the browser?

Marcelo Arias — Sat, 31 Dec 2022 16:15:14 +0000

In a previous post I wrote about TensorFlow.js and how it can be used to build and deploy deep learning models in the browser. In this post I will focus on how TensorFlow.js models are loaded in the browser.

Most of the times Machine Learning models are used from an API. But TensorFlow.js brings those models to the user browser. The process behind this is very interesting.

Toxicity Model

There are many ways to load and use TensorFlow.js models.

Let's say you want to load the Toxicity model. Toxicity is a model that can detect toxicity in text.

This is the kind of model you can load directly from an NPM package after install it.

import * as toxicity from "@tensorflow-models/toxicity";

So, now you can load the model by calling toxicity.load().

Toxicity.load() it's a wrapper around tf.loadGraphModel().

tf.loadGraphModel() is a function that loads a TensorFlow.js model from a URL or a local file.

Process of loading the model

Even when you install a model with NPM, the model is not inside the package. When you need to use the model this will fire a network call to download the model.

Because the model is loaded asynchronously, you need to wait for the model to load before you can use it.

const model = await toxicity.load();

This is something we can see from the Network tab in Chrome Developer Tools:

Shards

The Toxicity model is a large model, so it's split into multiple files. The files are called shards. The shards are loaded in parallel, and then they are combined into a single model.

This allows you to load the model more efficiently, especially when loading large models over a slow connection. TensorFlow.js automatically handles the process of downloading and combining the shards to create the full model.

Not all the models are split into shards, some models can be loaded as single files because they are not very large.

Storage

This model will be storaged in local memory, so you don't need to worry about downloading the model each time you run your application.

Once the model is complete, you can start using it through your app.

This was the internal process of loading machine learning models in the browser using TensorFlow.js.

The Benefits of Pair Programming for Problem-Solving

Marcelo Arias — Mon, 19 Dec 2022 23:23:56 +0000

Pair programming is when two developers work together at one workstation. Not necessarily on the same computer, but they work together on the same programming task. In remote work I love to use Visual Studio Live Share ❤️.

This approach can have numerous benefits, such as increased efficiency and knowledge sharing, but in certain situations it may also have some disadvantages.

Let's explore the benefits and disadvantages of pair programming in more detail, and how it can help you with problem-solving.

👀 Increased Efficiency

Pair programming can significantly increase the efficiency with which a software development task is completed.

This is because two sets of eyes are better than one when it comes to spotting errors or finding better solutions.

The two individuals are able to bounce ideas off each other, come up with creative solutions, and quickly identify any mistakes that may have been made. This can save a lot of time and effort in the long run.

✅ Improved Quality of Work

Pair programming can also help to improve the quality of work produced.

This is because two people are able to review each other's work and offer constructive criticism.

This can help to identify any mistakes or areas of improvement, which can be addressed quickly and effectively.

📖 Knowledge sharing

Another advantage of pair programming is that it promotes knowledge sharing and learning.

By working with a partner, developers can learn from each other and expand their skills and expertise.

This is especially useful for junior developers who are learning the ropes, as they can get real-time feedback and guidance from more experienced team members.

But also...

😬 Disadvantages

One potential disadvantage is that it can be slower than working individually. When two people are working on a task together, there may be more discussion and collaboration involved, which can slow down the pace of work.

Another potential disadvantage is that pair programming may not work well for all personalities or work styles. Some people may find it difficult to work closely with another person for extended periods of time, and may prefer to work independently.

In conclusion, while pair programming can be a powerful tool for problem-solving, it may not be the best fit for every situation or team. It is important to carefully consider the pros and cons and determine whether it is a viable option for your specific needs.

Rendering Web Methods in Next.js

Marcelo Arias — Fri, 09 Dec 2022 15:12:21 +0000

I've been developing web applications for over seven years now, and I've seen a lot of different methods for rendering webpages.

I started with PHP, and for a long time, server-side rendering was the only option. In PHP the server is responsible for generating the HTML of the page, and it is send directly to the client.

This worked well, but then two years later I learned Node.js and Next.js. This was a paradigm shift for me, as I was now able to do client-side rendering, but also static side generation and (again) server-side rendering.

In this article, you'll discover the most common rendering web methods: client side rendering, server side rendering, and static site generation with its advantages and disadvantages.

Client Side Rendering (CSR)

CSR is the process of rendering the content of a web page in the browser, using JavaScript. It works by sending a request to the server for HTML and other resources, then rendering the page in the browser.

✅ Easy development.

❌ Search engine optimization (SEO) can be a challenge since crawlers may not be able to index the content.

Server Side Rendering (SSR)

SSR is the process of generating HTML on the server and sending it to the browser. The main advantage of SSR is that it allows for full page rendering, including the ability to render different content depending on the user, such as language or device type.

✅ Content is generated on the server and sent to the client, making it easier to optimize for SEO.

❌ The initial page load can be slower, as the server needs to generate the HTML, CSS and JavaScript files.

Static Site Generation (SSG)

SSR works by pre-rendering the application on the server and creating a set of static HTML files which can be served directly to the browser.

✅ The main advantage of SSG is that it can improve performance and reduce the amount of time needed to render the page in the browser.

❌ Because static sites are built from pre-generated files, it can be more difficult to make changes to the design and layout of a static site than it is to make changes to a dynamic site.

Recommendations

So which you should use? A CSR web app is very easy to develop. Now, if you have the time to develop a SSR. But because of the advantages that SSR presents, if you have resources (time) to spend, you should consider switching to SSR.

Finally, checking the Next.js documentation we can found the following statement:

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

Power up your web apps with TensorFlow.js

Marcelo Arias — Sun, 04 Dec 2022 23:30:57 +0000

Are you looking to add the power of machine learning to your web applications? Look no further than TensorFlow.js, the open-source library that brings the capabilities of TensorFlow to JavaScript.

TensorFlow.js is a library for developing and training machine learning models in JavaScript. It allows web developers to create and train models directly in the browser.

What can be achieved with TensorFlow on the Web?

For a few months I have been watching "Made with TensorFlow.js", a series of videos where they present products made with this library like:

Imagine yourself developing engaging and interactive user experiences using machine learning-powered features such as object recognition, natural language processing, and predictive analytics...

What do you need to learn to use TensorFlow.js?

I've launched my first web application with this technology. And I'm currently reading the "Learning TensorFlow.js" book.

So far, I believe that to understand TensorFlow.js, you should have a basic understanding of machine learning concepts and techniques. This includes understanding how to train and evaluate machine learning models. It would highly recommended some knowledge of the mathematics behind common machine learning algorithms.

With this I do not mean that you should know specifically how to develop a neural network, but having an understanding of the core concepts of machine learning is a requirement.

To guide you better, this is a list of questions that you should be able to answer:

What is a neural network?
What is a machine learning model?
What is the difference between supervised and unsupervised learning?
What are the differences between classification and regression?
What is the purpose of normalization?

Conclusion

Learning TensorFlow.js can be a valuable investment for anyone interested in using machine learning in their web applications. With its powerful, flexible API and easy-to-use tools, TensorFlow.js makes it possible to build intelligent, interactive web applications that can run on any platform.

Whether you're a machine learning expert looking to incorporate your models into web apps, or a web developer interested in incorporating the power of AI into your projects, TensorFlow.js offers a great way to get started.

So why wait? Start learning TensorFlow.js and unlock the potential of machine learning for your web applications.

What makes Web Accessibility so important?

Marcelo Arias — Fri, 02 Dec 2022 01:17:21 +0000

One day, when I was in high school developing my first websites, I wondered how would people with disabilities access a computer, application or website? It is then that I discovered the concept of Web Accessibility or Web a11y.

Web accessibility is important because it enables people with disabilities to access the same information, services, and opportunities available to everyone else. It ensures that they can effectively and independently use the web.

It also helps to improve the user experience for all users, regardless of their abilities.

Accessible websites are easier to navigate, and are more user-friendly.

In addition, web accessibility helps to increase the visibility of websites and web applications, improving their potential reach. By making sure that websites are accessible, companies can ensure that their work reaches the maximum number of people.

Making a web accessible

ARIA

ARIA (Accessible Rich Internet Applications) is a set of attributes that developers can add to HTML elements to make them more accessible to users with disabilities.

ARIA works by adding extra information to HTML elements that helps assistive technologies, such as screen readers, in understanding how elements on the page are used and how they relate to each other.

This extra information allows assistive technologies to more accurately interpret the page and provide a better experience for users with disabilities.

Google Lighthouse

Google Lighthouse, an automated tool for improving web accessibility, provides a checklist of criteria that web developers should consider when building websites. These criteria ensure that people with disabilities can properly interact with websites.

If you want to start, there are a few things you can do, such as using descriptive link text, providing alternative text for images, and using a semantic markup language. You can also use tools such as screen readers and screen magnifiers to make sure everything works good.

Making an entire (already built) website accessible takes much more.

But it is worth it!

As web developers, it is our responsibility to make sure that our work is accessible to everyone. It is an important part of creating an equal digital experience.