Forem: Paula Marín S

How I make my apps more accessible: axe Accessibility Linter

Paula Marín S — Tue, 21 Feb 2023 20:18:17 +0000

Last time I talked to you about axe DevTools and how to use it to improve the accessibility of your site.

Now I want to talk to you about the "brother": axe Accessibility Linter. This is an extension for VSCode and here you can get it.

This one is so easy to use that I'm kinda shocked that more people don't use it. You just have to install it and it starts working right away. You could put more thought into it and add a axe-linter.yml configuration file, but for me it works great right out of the box.

Works with most languages that we use in the front nowadays.

Checks React (.js .jsx .ts .tsx), Vue (.vue), Angular (.component.html), HTML (.html .htm), and Markdown (.md .markdown) files so you can avoid common accessibility defects. Inline Angular templates are not currently supported.

I can't say enough how much I like this one, I like it because this way you can avoid many accessibility issues before you even deploy your site.

Axe-linter is now available on a multitude of other platforms! We currently provide integrations for:

GitHub Actions

Git Pre-Commit Hooks

SonarQube

Jenkins, Azure DevOps, CircleCI, and more!

The idea is that while you are coding you get errors right there in your VSCode. So let me show you some examples, for this I just have a simple html form but remember that this extension also works with javascript and typescript.

The first error that I get is because I didn't set up the language of my page.

And this matters because if you have a screen reader you need to tell it how the words have to sound.

Next we have an error in our title:

Screen readers alert users to the presence of a heading tag. If the heading is empty or the text cannot be accessed, this could either confuse users or even prevent them from accessing information on the page's structure.

Some other errors that you can detect may be related to interactive controls, like this one where you have a link inside a button

Then this one I have seen a million times, images without an alt, a screen reader will say that is an image but the user has no way of knowing what it is about.

Then you can have errors where you try to use a role that is not meant to be for the element that you have, like this.

When a text node is split by markup, VoiceOver will treat it as two separate phrases instead of just one. Adding role="text" around the elements solves the problem. However, it also overrides the role of the element and all descendants and treats them all as text nodes. If one of the descendant elements is also focusable it would create an empty tab stop. That is, you could tab to the element but VoiceOver would not announce its name, role, or value.

These are just some examples of what you can detect, I hope it helps you!

Well I think that is it for now.

Cheers!

How I make my apps more accessible: axe DevTools

Paula Marín S — Mon, 20 Feb 2023 19:43:51 +0000

There are different tools that can help to make your app accessible. Today I want to talk to you about axe DevTools.

I use the plugin for Chrome

Axe DevTools delivers unparalleled accuracy in testing page and component accessibility while you code. Our rules engine is based on Web Content Accessibility Guidelines (WCAG). Our browser extension finds 57% of the issues by itself. Use our Intelligent Guided Testing (IGT) to achieve 80% or more of the issues with no additional training required. Axe DevTools brings accessible coding to the next level.

This is a deque tool that I discovered when I assisted to a webinar about accessibility.

Find and fix more accessibility issues during website development with axe DevTools.
The free axe DevTools browser extension is a fast, lightweight, yet powerful testing tool driven by the world’s most trusted accessibility testing engine, axe-core, developed by Deque.

This is how it looks

Some of the functionalities are totally free and some you have to go Pro, these are the paid ones.

★ Intelligent Guided Testing™ (IGT)
Perform more advanced testing without having to become an accessibility expert. Using a simple question and answer format, IGT leverages machine learning to help you quickly find and fix issues that are not detectable by automated testing alone. Adding IGT can get you 8o% coverage or more—while you code.

★ Component-level testing
Make your testing more agile by focusing only on the specific parts of a page relevant to your immediate work. Reduce patching and retesting by finding accessibility bugs that could break existing use cases.

★ Export, Save and Share
Collaborate across your dev team! With one click, create a customized URL with all issue description information to share with colleagues or your issue tracking software of choice. Save the rest of your team time and effort and help them build inclusive experiences.

★ What’s left to test?
After you’ve finished automated and Intelligent Guided Tests, now you can generate and share a “What’s left to test” report, listing what’s left for manual testers. Accessibility experts can pick up exactly where you left off to catch the remaining complex issues.

What I usually do is to scan all the page, for this example I'm going to go to a random page from GAP: https://www.gap.com/browse/product.do?pid=549216022&cid=15207&pcid=8792&vid=1#pdp-page-content

This is what I got

From this I can see that there are 28 issues, from those I see 9 criticall, 14 serious, 2 moderates and 2 minor.

If you click the humber 9 in critical you can filter the lists of issues and only see the critical ones

If you click the title of the issue you can see more details about it

With the icon next to the title of the issue (the target?) you can select the element that has the issue

And looking more into detail it also tells you how to fix the issue, in this case we have to fix ARIA attribute is not allowed: aria-checked="false"

Let's see some other examples.

In this case the issue is Invalid ARIA attribute value: aria-controls="popover-1" and also notice that this issue is happening in 7 parts of the code.

And the last critical issue is a bad one if you ask me.

In this case there is some kind of button but is hidden if the user is using a screen reader app then the user is going to have a really bad time trying to figure out what that button is for since the screen reader won't have any reference or information to give to the user. All of this and more you can see in the section about how to solve the problem.

Let's see some examples about serious issues.

In this next issue you can see that the problem is all about the colors that they chose to use in the design. It should have more contrast so users with visual difficulties can use the site anyway.

The next issue is about how they chose to implement the clickable photos and again it is not taking into account assistive technologies.

The 2 moderate issues are related to how a user can interact with a scrollable section.

And the 3 minor issues are related to the id of elements in the page.

Another option that sometimes is really useful is the more info button.

This is great because it takes you to the documentations about the issue and this documentation is really complete, I love it.

Finally something that is really useful for me as a developer is the inspect issue button.

This button takes me to the code, which gives me more context on what part of my code has the issue specially in big sites that might be part of different microfontends.

Anyways, this is just an example of what you can do with the free choices that you have and like I said before there is lots more that you can do with the paid version.

That is it for now.

Cheers!

Rome

Paula Marín S — Tue, 14 Feb 2023 20:12:56 +0000

Today we are going to talk about Rome. According to their github page

Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS.

Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.

Rome unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.

Rome has strong conventions and aims to have minimal configuration. Read more about our project philosophy.

Rome is written in Rust.

Rome has first-class IDE support, with a sophisticated parser that represents the source text in full fidelity and top-notch error recovery.

Rome is MIT licensed and moderated under the Contributor Covenant Code of Conduct.

That is what it wants to be, but for now it is a formatter and linter, but it still intrigues me.
It was founded by the creator of Babel and Yarn and in the future it promises to be a:

Compiler - March 2023
Bundler - March 2023
Testing - June 2023

Rome unifies your development stack by combining the functionality of separate tools.
Single configuration file, amazing performance, and works with any stack.

For now it works with Javascript and Typescript, it will work with:

Json - Dec 2022
HTML - June 2023
Markdown - Nov 2023
CSS - Nov 2023

So for now I want to see how easy it is to start working with it and compare it in a month when they will launch the compiler and bundler functionalities.

First we have to have a folder with a package.json, so I will start a react project like always.

npx create-react-app my-rome-app

So I have this in my folder

Now we are going to get Rome npm install --save-dev rome

And I already have 6 high vulnerabilities, I don't like that very much.

But, now we should be able to run Rome npx rome

They do recommend to create a rome.json configuration file for each project npx rome init

And this is my new file

Let's check a file npx rome check ./src/App.js

Well, I was expecting more...

Let's try something else, they do recommend installing our editor integration to get the most out of Rome. So I'm going to install the extension for VSCode

And now I have the option to format with Rome

Well that did changed the quotes in my file

Rome’s an opinionated formatter that has the goal to stop all ongoing debates over styles. It follows a similar philosophy to Prettier, only supporting few options to avoid that debates over styles turn into debates over Rome options. It deliberately resists the urge to add new options to prevent bike-shed discussions in teams so they can focus on what really matters instead.

And here you can learn more about the formatter. I used the command npx rome format --help and this is what I got.

And for the lint options npx rome check --help

Recommended rules are enabled by default and emit diagnostics with the error severity. Rules that are not recommended are disabled by default, but they can be enabled via configuration. The diagnostics emitted by these rules are displayed with the warning severity in the documentation.

Well, for now in my opinion Rome is cute, but I'm going to be waiting when they do add more functionalities.

Cheers!

Green Software SDK

Paula Marín S — Mon, 13 Feb 2023 21:45:39 +0000

Today I want to see something different of what I have been doing.

Some of you may know that Thoughtworks regularly releases their Technology Radar. According to Thoughtworks:

The Radar is a document that sets out the changes that we think are currently interesting in software development — things in motion that we think you should pay attention to and consider using in your projects. It reflects the idiosyncratic opinion of a bunch of senior technologists and is based on our day-to-day work and experiences. While we think this is interesting, it shouldn’t be taken as a deep market analysis.

The radar basically suggest what techniques, tools, platforms, languages and frameworks one might want to adopt, try, assess or hold implementing in our projects.

I usually take a look at the radar every time it comes out, bookmark whatever calls my attention and then when I have time I can go more into detail.

That is where I found the Carbon Aware SDK
and also recently I got a certification from the Linux foundation on Green Software, so it was like it called to me.

If you want to reduce your software carbon footprint there are only a few ways to do it. And the obvious way is to use cleaner energy.

You can reduce the carbon footprint of your application by just running things at different times and in different locations. That is because not all electricity is produced in the same way. Most is produced through burning fossil fuels, some is produced using cleaner sources like wind and solar.
The Carbon Aware SDK helps you build the carbon aware software solutions with the intelligence to use the greenest energy sources. Run them at the greenest time, or in the greenest locations, or both! Capture consistent telemetry and report on your emissions reduction and make informed decisions.

The Carbon Aware SDK has a WebApi and a Command Line Interfave (CLI)

The WebApi is the preferred deployment within large organisations to centralise management and increase control and auditability, especially in regulated environments. It can be deployed as a container for easy management, and can be deployed alongside an application within a cluster or separately.

The CLI tends to be handy for legacy integration and non-cloud deployments, where a command-line can be used. This tends to be common with legacy DevOps pipelines to drive deployment for integration testing where you can test your deployment in the greenest location.

The Carbon Aware SDK is a project part of the Green Software Foundation (GSF) and the GSF Open Source Working Group. And here you can see the contribution guide

I will try to run the Web API. So first we have to have the prerequisites.

Docker Desktop/CLI ( instructions for windows or mac)
VSCode (it is recommended to work in a Dev Container and more explanations here)
Remote Containers extension for VSCode: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

Now we have to follow this steps to get the Web API running

Set up the repository git clone https://github.com/Green-Software-Foundation/carbon-aware-sdk.git
Change directory cd carbon-aware-sdk
Open VSCode code .
Open VSCode Command Palette cmd + shift + P
Run the command Dev Containers: Open Folder in Container and select the current folder. You should see that the Dev Container is starting
Change directory to cd src/CarbonAware.WebApi/src
Run the application dotnet run

Here is going to depend on your configuration

The SDK supports multiple data sources for getting carbon data. At this time, only a JSON file, WattTime and ElectricityMaps are supported.

So I'm going to use the JSON file to get data and I'm going to get it from an example file /workspaces/carbon-aware-sdk/src/data/data-sources/mycustomfile.json

Now that I have my data source I can do a GET request and for this I like Postman and I'm going to use this to make the request http://localhost:5073/emissions/bylocations/best?location=westus&location=eastus&location=westus3&time=2022-08-23T00%3A00&toTime=2022-08-23T23%3A59

And there you have it, obviously you can play with it more now that it is working, but I'm telling you this is going to be asked by more and more industries/companies, they will want to know and show their CO2 consumption so that customers can prefer greener options, so having an open source options is really awesome.

That is it for now :-)

Cheers!

Next.js ready to go

Paula Marín S — Thu, 09 Feb 2023 20:34:42 +0000

So far I have been trying Next.js with different configurations and tools but in the day to day of things I want my project to be able to do all of that at the same time.

That's why now I want to create a project with everything ready to go, but looking at the documentation of Next.js only a few options can be set with the Create Next App command.

There are two ways of doing this just using the command npx create-next-app@latest and answering some questions or you can add arguments to the command line (see here more detail). I'm going to go with the first option.

This are the basics that I want to have

ESLint and Typescript I should have because it asked me and I said yes. And indeed I have config files for both.

And I do have everything that I need in the package.json

I still want to check that everything is running ok, before I do anything else.

Everything looks ok, so I'm going to follow the instructions in https://dev.to/celest67/nextjs-with-jest-react-testing-library-3cc6 and do some testing.

Great, no issues, so I will add cypress following the instructions in Next.js with Cypress

And again no trouble at all

This was really easy and now I can have a template for when I need to start a project for some project or something, you can see the repo here https://github.com/celest67/full-nextjs

That is it for now, next I want to try to see how easy it would be to do a demo or a POC of some library.

Cheers.

Next.js with ESLint

Paula Marín S — Wed, 08 Feb 2023 20:16:24 +0000

One of the things that really helps when working in teams is having some kind of standard or agreement regarding the code formatting, this way is so much easier for everyone to read the code and onboard new team members. For this ESLint in my opinion is essential.

That's why I want to see how does Next.js work with ESLint.

ESLint is an open source project that helps you find and fix problems with your JavaScript code.

Reading the documentation for Next.js you are going to find that

Next.js provides an integrated ESLint experience out of the box.

We just need to add next lint as a script to the package.json. So that is what I'm going to do now.

And run the script

Looks like it detected that I don't have ESLint and we have to configure it. I'm going to go with the recommended configuration.

This modifies our package.json

After installing looks like we can run our lint.

Looks like there is a Warning that we can improve in our code.

By default, Next.js will run ESLint for all files in the pages/, components/, lib/, and src/ directories

This was really easy, so I kept reading what else we could do and found this

ESLint also contains code formatting rules, which can conflict with your existing Prettier setup. We recommend including eslint-config-prettier in your ESLint config to make ESLint and Prettier work together.

So I could install eslint-config-prettier. But I don't usually format my code with prettier and that made me think of another thing. I have my VSCode configured to format my code on save and this was not happening. I just added some extra tabs, saved and nothing happened.

So looks like I'm missing something. I don't see ESLint in my package.json but that's supposed to be OK. Still I want to check and make sure, so if I try to make an initial configuration it should warn me if it isn't installed.

But no error appeared, I'll try to do the whole configuration and see what happens. First I will select to enforce de code style.

I use JS modules so...

I use React

I am not using Typescript, I run my code in browser and just to test I will try a popular style guide, I like semicolons so I think I'm going to go with the AirBnB one but for a comparison you can check this link it has a image of a table comparison that is very good.

And I already have a json for configuration so I will go with that option

Looks like I'm missing some things so I'll install them.

And that is it, now I'm getting all kind of errors.

If I save the file, ESLint fixes what it can.

Since the new config replaced the old one please remember to re-add Next.js validations.

The next configuration already handles setting default values for the parser, plugins and settings properties

If you run lint now you are going to see more errors

So I'm not really happy with ESLint basic configuration that comes with Next.js so you will have to tweak it a little bit the way that you or your team needs it.

That's it for now, hope it helps someone and any feedback is welcome.

Cheers.

Next.js with Jest + React Testing Library

Paula Marín S — Tue, 07 Feb 2023 19:52:10 +0000

I have to admit that Jest with React Testing Library is my favorite way of doing unit testing. Enzyme was never my thing. I love the approach of React Testing Library that tries to make you test like an user, it even helps you detect accessibility issues.

Well what I'm trying to say is that I'm really excited to try to do this integration. As always I'm going to follow the documented published in Next.js site and hope for the best, here we go.

There are different ways to get your Next.js project with Jest and React Testing Library running, first you can just create a project from zero with this command.

npx create-next-app@latest --example with-jest with-jest-app

But, I want to try to integrate it to the same project that I have been working on. So according to the documentation I can set up Jest with Rust or Babel.

Rust is a memory-safe compiled programming language for building high-performance systems. It has the simplicity of high-level languages (Go, Python), but the control of low-level languages (C, Cpp)

If you want to know more about Rust, here is a small video by Fireship that explains it. Also the github associated to the video is really good.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments (https://babeljs.io/)

I think I'm going to go with Rust.

Since the release of Next.js 12, Next.js now has built-in configuration for Jest

So I'm going to install jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom using the following command

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Then we have to create the following jest.config.js file

Under the hood, next/jest is automatically configuring Jest for you, including:

Setting up transform using SWC

Auto mocking stylesheets (.css, .module.css, and their scss variants), image imports and @next/font

Loading .env (and all variants) into process.env

Ignoring node_modules from test resolving and transforms

Ignoring .next from test resolving

Loading next.config.js for flags that enable SWC transforms

The I'll add a script for testing in the package.json

Following Jest's convention I'll create a __tests__ folder and add a test to check if the <Home /> component successfully renders a heading:

And I'm going to run the testing script to see if everything is ok.

The documentation also says that I can add snapshots tests, I know that many people don't like them but for I have to admit that more than once snapshots allowed me to catch changes that I didn't made on purpose. So I want to see how to include them now. So I'll create a new file called snapshot.js

And now I run my testing script again

If you are reading this as part of the serie of Trying Next.js you can see that before this I tried Next.js with Cypress so I think I'll do something similar and test the same, I'll change my index with a message that reads "This is 0" and a button that everytime you click it the number in the message increments by one. And of course every test fails.

So let's update the test file for the index and update the snapshot

And there you have it, tests running OK and I think that is it for now.

Any comments or questions are welcome

Cheers!

Next.js with Cypress

Paula Marín S — Tue, 07 Feb 2023 15:48:50 +0000

Hello! As part of my learning experience trying Next.js I thought it would be a good idea to try some testing tools that I really like, so now we are going to talk about Cypress.

Cypress is a test runner used for End-to-End (E2E) and Integration Testing.

For this we are going to follow the instructions in Next.js site, there is a way to have a project in from scratch that also has Cypress running the following command

npx create-next-app@latest --example with-cypress with-cypress-app

But I already have a project that I created before I decided that I wanted Cypress, so we are going to try a manual setup. First check if you have Cypress installed.

npm install --save-dev cypress

And after a minute or so everything is ready to start

Next we have to add Cypress to the package.json scripts field by adding this "cypress": "cypress open" like so

Final step is to run cypress to

npm run cypress

A window will open

I will go with the E2E Testing option and it will add some files to my project

Then it give 2 options to choose a browser

I'll choose Chrome and click the button to start the testing. This will open the cypress window with options to generate examples of tests or you also have the option to create a new test.

If you choose to see the examples you are going to get a window like this

Then you can see all this different examples of different things that you may want to test

Well, I actually don't have nothing interesting to test in my project right now so I'm going to change my index with a message that reads "This is 0" and a button that everytime you click it the number in the message increments by one.

So now we need a small test of the functionality described above.

And finally we can see that the test is passing

I think that is for now, this is the branch with the code. Any questions or anything please let me know!

Cheers!

Next.js and Typescript

Paula Marín S — Tue, 31 Jan 2023 20:29:59 +0000

I have been trying Next.js in different aspects, for example you can read more about deployment here but now I want to check out how does Next.js behave with Typescript, maybe ts is not that necessary in small projects but in big projects with many developers for me is a must, that is why I just had to test it.

Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.

If you are just starting a project with Next.js you can just run this command below and it will create you a project from scratch.

npx create-next-app@latest --ts

But I already created a project here so I want to try and transform this project, following the instructions. First I have to create an empty file called tsconfig.json and then run npm run dev

Next.js will automatically detect TypeScript usage and install the required packages

Now if I look at my tsconfig.json this is what I see

This process also created a file next-env.d.ts and added the necessary dependencies to my package.json

Next we have to update my javascript files into Typescript, this means that now my index.js is going to be index.tsx and the app should keep working the same as before, because I just have the basic project from the beginning.

So, now I want to try to build something that actually checks types. Since my goal is not actually teaching you typescript I'm going to follow a project by @WebDevSimplified here you can get more details in this video. But to give you an idea the description of the video is

Select components are one of the most important components you will use in React, but how exactly do you create a good select component. In this video I will breakdown how to create a select component in React using only TypeScript and no additional React libraries.

The code for this is available in WebDevSimplified Github

Following Next.js guidelines I'm going to create a folder called components where I will create my select component.

Then I'm going to import it to my index.

And just to make sure that everything is working properly and validating types as it should, I'm going to change one of my variables from an array to a number and as you can see my IDE let's me know of my error

But also I can see the error if I try to run npm run dev

So we are really working with typescript and you have all the benefits that come from it.

Everything that we have seen here is in my github in this branch, so if you want to play with it you can and also if you know how to fix the issue in components/select.tsx ln 42 let me know!! Because if you try to build the app you are going to get an error!

That is it for now ;-)

Cheers!

Deployment with Next.js

Paula Marín S — Mon, 30 Jan 2023 15:17:56 +0000

As I said in the last post Trying Next.js, one of the things that really intrigues me is the deployment of this apps that I can get running so fast. In the site it says

The easiest way to deploy Next.js to production is to use the Vercel platform developed by the creators of Next.js.

For those who haven't heard of Vercel:

Vercel is a serverless platform for static and hybrid applications built to integrate with your headless content, commerce, or database. We make it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default. You can start using it for free — no credit card required.

And that sounds great in my head, build a small app with something that I want to show and I don't even have to show it running on my machine I can also show it in a public URL that I can just share and it is supposed to be easy.

First I want to build my app and check that everything looks OK.

According to the documentation now I'm going to get a .next folder with this content

.next/static/chunks/pages – Js files with corresponding pages
.next/static/media – Statically imported images from next/image
.next/static/css – Global CSS files for all pages
.next/server/pages – The HTML and JavaScript entry points pre-rendered from the server.
.next/server/chunks – Shared JavaScript chunks used in multiple places throughout the application
.next/cache – Output for the build cache and cached images, responses, and pages from the Next.js server.

Looks like we have to have a GitHub account if we want to deploy to Vercel

So, I'm going to go to my GitHub and create a repository called nextjs-try1 (same as my project) and I am not going to initialize it

Next, I'm going to initialize my repo

Now it is time to push my project to my github

git remote add origin https://github.com/celest67/nextjs-try1.git

I'm going to do an initial commit with everything in my project and push it

Since we are deploying to Vercel, make sure to have an account here https://vercel.com/signup

Once inside Vercel it looks like we just have to import the correct repository by pressing the button import. (I had to install Vercel for GitHub and give it access)

When deploying to Vercel, the platform automatically detects Next.js, runs next build, and optimizes the build output for you, including:

Persisting cached assets across deployments if unchanged

Immutable deployments with a unique URL for every commit

Pages are automatically statically optimized, if possible

Assets (JavaScript, CSS, images, fonts) are compressed and served from a Global Edge Network

API Routes are automatically optimized as isolated Serverless Functions that can scale infinitely

Middleware are automatically optimized as Edge Functions that have zero cold starts and boot instantly

Then it gives me some configuration options which I'm not going to change and click Deploy

Then I can see a screen with some feedback of the process

And in less than a minute I get a success message

If I go to the dashboard I can see where my app is https://nextjs-try1.vercel.app/

Well I think that is for today, seems to me like indeed it was easy, what do you think? what do you want to see next?

Cheers!

Trying Next.js

Paula Marín S — Thu, 26 Jan 2023 20:58:54 +0000

Have you ever have to do a POC or something like it, where you need to get an app running as easy and pretty as possible?
Lately talking to different friends and colleagues I got many comments about Next.js, so I decided to give it a try and see how fast I could get something running.
According to their web site

Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds