Forem: Belmiro Flávio

In the age of AI, Product Engineer is the new trend

Belmiro Flávio — Sat, 20 Sep 2025 19:45:49 +0000

In the age of AI, Product Engineer is the new trend

Hey frontenders, let’s talk about accessibility?

Belmiro Flávio — Thu, 15 Aug 2024 13:25:16 +0000

Introdution

When I started in this world of software development I had not ideia what accessibility was. It was just a topic that seemed really far from my knowledge and my dayly life, but sometimes I faced with something about it (Linkedin, Medium or job).

Everytime that I heart about it, the speeach was always the same. The why was that we should implement accessibility because some porcentage of theh population have any type of deficience or because this number is growing every year.

This is not the quantity approach that I would like to bring. Accessibility, for me, means that an application must be ✨ accessible ✨ and end. For the visually impaired, for the elderly grandma, for the autistic person, for the colorblind, for the student, the employee, and the unemployed. In short, to everyone. Accessibility is about democratizing information.

Accessibility is the ability for everyone, regardless of their condition, to access something.

I say that because accessibility is 100% related to the user experience, the famous UX. An accessible application means that it is easy to use, direct in its intentions, clear about the ideas and elegant in the implementation.

In the end, usability and accessibility are twin sisters.

If you’re not thinking about accessibility in your implementations today, start thinking about it, because it will certainly up the level of your deliveries.

“But dude, how I make my deliveries accessible”?

Making a accessible screen is not a monster as it may seem at first glance. Let’s list points and talk about:

HTML

This one is pretty objetive. Use it more correctly possible, like, respecting the semantic of the elements and their properties.

Respect the concepts, attributes, and properties of tags. Screen readers, screen magnifiers, and other assistive tools rely heavily on HTML to guide them.

Colors and contrast

Be careful with colors and their contrasts. Try to define the beginning and end of colors, and provide enough contrast to make them well-defined. This ensures that people with low vision or color blindness can see properly, and in general, makes it easier for everyone.

Images

Screen readers do not read images, so describe the image using the “alt” attribute of the “img” tag.

If the image is not important and is just decorative, leave the _“alt” _attribute blank. This way, the screen reader will know to skip the image.

Videos

You know that really cool video? Don’t forget to make it possible to watch it with subtitles as well.

Subtitles are really importants.

Hierarchy of texts

HTML has a hierarchy for text that must be followed. By respecting the hierarchy, you will make it clear that your interface has a reading flow to be followed.

Use the title, subtitle, paragraph, etc. tags appropriately.

Keyboard navigation

It is extremely important that your application can also be used by those who have some motor difficulty and therefore use the keyboard to navigate.

Maintain a hierarchical structure of HTML. Respect the HTML tags, so will be possible to use the keyboard to navigate through the application.

Links

Referring to the “Keyboard navigation” topic, links should be navigable so it will be easy to navigate through them using the tab key.

In addition, make sure that your link looks like a link (lol).

Forms

Forms have evolved towards a minimalist approach, which is good… but it can also be bad. Don’t hide the labels and boundaries.

Put labels on the fields to identify them, and use visual stuff (colors, messages, icons, etc.) to indicate the state of the form and notify the user of requirements, errors, and successes.

Fonts

Fonts can be a tricky subject. Please use common sense when choosing a font. A heavy and complex font will only make reading more difficult.

In addition, pay attention to the font sizes and line spacing, you don’t need to make everything small.

Linguagem

A language understood by all is ideal. Avoid difficult messages and complicated words. Write simply! Be clear!

Focus

Indicate the element that has focus, make this information visible using visual indicators.

ARIA

ARIA is a specification controlled by the W3C. ARIA is an extension of HTML that defines attributes, properties, and states to assist and improve the experience with assistive technologies.

This topic is extremely important, take a look in the documentation.

Landmarks

Landmarks works like reference points. Their usage is to identify important points in the application to allow the user to reach them more easily.

To use it, just include the “role” attribute in the element.

Javascript events

When possible, use JavaScript event handlers that are device-independent.

An example is the onMouseOver event, which is related to the mouse (and who doesn’t use a mouse?), in this case, change it to onFocus.

15 tips and good practises

Set the language of your application — and elements when it needs to be more specific;
Icon font sources are not good for accessibility — try to choose SVG;
Make links self-descriptive and easy to understand — avoid “click here” text;
Justified text can be problematic when reading;
Group radio buttons together;
Do not autoplay videos (especially with sound) and musics. It’s annoying and can scare people;
Do not use deprecated elements — such as summary (table), name (a), and border (img);
If adding a title to a table, use the caption tag inside the table tag — it makes it easier for screen readers;
Use the title tag properly — it’s useful for screen readers;
Avoid using images with text inside the image — opt for overlay when applicable;
Be aware of loop animations — they can be a distraction for some people;
Windows, dialog boxes, modals, etc. should be able to be closed with the escape key;
Do not disable zoom — many people use it to feel more comfortable;
Avoid using hyphens in sentence structure;
Avoid abbreviations.

Truths

a) Accessibility is not an impediment to innovation
Innovate. Be different. It is possible to be unique and still accessible.

b) Color is not the only way to convey information in a clean manner
Using color is not the only way to convey interactive information. Also use visual indicators and have a secondary communication channel.

c) Why be afraid to use white space?
Don’t keep everything too close, use whitespace to mark boundaries (simple!). Don’t be afraid to use clear spacing.

d) Performance also means being accessible
Not everyone has a fast internet.

e) ARIA serves to improve the experience
The objective of ARIA is to improve the experience, not to keep fixing accessibility issues caused by poorly written HTML.

f) What about responsiveness?
Responsiveness means making sure that a website or application is accessible on devices of different sizes. Make sure to test for it!

g) Be careful when using “x” and “@” for gender-neutral language
Screen readers may not know how to pronounce the word correctly. Additionally, not everyone may know how to read these symbols properly, making the text more complex and difficult to understand. There are techniques for non-sexist writing that can be used instead.

h) Are there people with disabilities in your company?
If the answer is no, maybe it’s time to think about why there isn’t and try to change that scenario now! If yes, get closer! Coexistence generates knowledge, empathy and friendship.

i) Unfortunately, you won’t be able to provide a perfect experience for everyone
But do your best!

Tools to help you

axe — Web Accessibility Testing
Accessibility checker for developers in Chrome.

Lighthouse
Open-source automated tool to improve performance, quality, and accessibility of your web applications.

BORREAU OF INTERNET ACCESSIBILITY — a11y Tool And Services for WCAG 2.0 Compliance
Analysis of the accessibility of your website.

WAVE Web Accessibility Evaluation Tool
Set of tools that helps authors make their web content more accessible for people with disabilities.

NVDA
Free screen reader.

Conclusion

I hope I have been able to provide some information, given some insight, and presented an important topic in a good way.

Of course, this is a huge topic and the intention is not to know everything about accessibility and how to implement it right away, but to know that it exists. It is important, and it must be present in applications. You will learn the rest gradually.

If you've enjoyed, consider buying me a coffee as a token of appreciation.

Original post.

Thanks a lot for reading!

References

Today's Internet

Belmiro Flávio — Wed, 14 Aug 2024 13:29:49 +0000

Thursday, 9 PM.

You access a website after a long day and wait for it to load… now you accept the default cookies, close the annoying window asking you to subscribe to the newsletter, look for the content among the ads, and what were you looking for?

You don’t remember anymore.

Your mistake was trying to browse the internet like you used to in 2010.

The UI is prettier, sure. But it’s not good. So many distractions and difficult.

Now is new times: cookies, newsletters, heavy websites, ads and subscriptions. When you decide to open a website, remember to know very well why you are doing it, otherwise you will waste your time.

Original post.

If you’ve enjoyed, consider buying me a coffee as a token of appreciation.

5 free and cool APIs for you

Belmiro Flávio — Tue, 13 Aug 2024 18:24:52 +0000

Check out these 10 APIs for you to play and code for fun. Programming doesn’t always have to be serious. Just relax.

1. Advice Slip
It’s an API that returns you an advice. Genius. Simply.

2. Fun Translations API
Albert Einstein would envy the IQ of whoever created this API. It’s an API that translates a text to another language.

But it is not just any language, it can be the language of the Minions or the Dothraki from Game of Thrones. There are many other languages for you to use.

3. The Dog API
Who does not love dogs? Come on! In this API, you can find several resources to consume about puppies.

It is worth checking out.

4. The Cat API
“Ugh, but I like cats.” Ok! There is also an API that provides you resources to consume about cats. Check it out!

5. Deck of Cards API
My friend… this API is disruptive! Whoever made it was able to abstract a deck of cards and turn it into an API for you. So cool!

There are many crazy methods for you to consume and create an online card game — just an idea.

Extra: Public APIs — Dev Resources

I will leave you a link where you can find hundreds (or thousands) of public APIs to play. That is where I got the ones I listed from.

I hope you enjoyed the APIs listed here in this article. Share it with other developers you know.

If you’ve enjoyed, consider buying me a coffee as a token of appreciation.

Thank you!

Original post.

React and CrossFit, what do they have in common?

Belmiro Flávio — Tue, 13 Aug 2024 01:49:47 +0000

What does a JavaScript library for building user interfaces have in common with an intense physical training program that uses functional training exercises?

I have been working with React for a few years and don't practice CrossFit, but I have friends who talk about CrossFit every day, and I ended up noticing that they share some characteristics that make them so popular and successful.

The first similarity is their numbers. The React repository on GitHub has over 220,000 stars and nearly 50,000 forks. The library has around 23 million weekly downloads on NPM. Now about CrossFit, according to Livestrong.com, CrossFit has more than 15,000 affiliate gyms in over 120 countries, and it is estimated that there are more than 5 million practitioners.

1. Community

In my opinion, this is the foundation **that keeps React and CrossFit at the top. Both React and CrossFit have been able to build a **collaborative and supportive base.

It's not a surprise to anyone that the React community shares tons of knowledge every day and provides and maintains solutions for many kind of problems. A large part of what exists about React was and continues to be created by the React community. Do you need to implement routing in your application? You'll find a community-maintained library that does that. Need animations? There will be various solutions for that and content produced to help you. Didn't find anything for what you need? You'll probably feel motivated to create a solution and share it with the community.

CrossFit has this same spirit of collaboration. CrossFit is practiced in groups that frequently motivate, teach, and help others.

Within these communities, everyone helps each other directly and indirectly. This promotes organic marketing, which contributes to the snowball effect where more and more people are influenced.

2. Flexibility

When you start to practise CrossFit, you'll quickly notice that it works well for everyone. It doesn't matter your skill level, your knowledge, or your physical condition. The exercises will be adapted for you. CrossFit is flexible and scalable for everyone.

The same is true for React. React is a tool that allows you to create interfaces with extreme flexibility,** regardless of the size, complexity, or domain.** React is flexible and scalable for everyone, just like CrossFit.

Both have small barriers to entry. Of course, there is still a difference between a professional and a beginner in both fields, but never mind.

3. Modularity

React and CrossFit benefit from modularity by design.

React has a component-based architecture that allows developers to create modular interfaces where each component can be built, tested, and maintained in isolation.

On the other hand, CrossFit has a modular approach in its workouts. Each exercise has its own technique that works towards an independent goal.

When these components and exercises are combined, they create varied and challenging interfaces and workouts.

4. Efficiency

This is a straightforward point - there's not much to elaborate on it. React and CrossFit were designed to be efficient in what they should do.

An efficient and effective solution for building user interfaces? React. This tool allows developers to build high-quality interfaces quickly and productively through its features.

An efficient and effective solution for improving physical conditioning? CrossFit. This program maximizes results and progress through high-intensity and functional workouts.

5. Innovation

To be honest, it's scary how innovative React and CrossFit are in what they aim to do. The speed of updates can sometimes be overwhelming, but things eventually settle down.

React constantly releases new updates, new featuress and improvements that that make life easier for developers, enhancing the way user interfaces are developed.

CrossFit follows a methodology where the workout constantly evolves with new techniques, movements, and challenges. It may seem a bit crazy to outsiders, but all of this helps keep CrossFitters engaged and on the path of progress.

These were the five similarities I noticed between React and CrossFit. I thought it was interesting to draw a parallel between two such different things that have so many similarities in my view.

I hope you enjoyed the read and found it helpful in some way. Remember, program and exercise - it doesn't have to be React and CrossFit.

Consider buy a coffee as a sign of appreciation.

Original post.

The best extension for Visual Studio Code

Belmiro Flávio — Tue, 13 Aug 2024 01:34:35 +0000

It's very common to see several posts listing the best extensions for VSCode or those that you must have installed.

Today is a different day. I'm here to actually tell you about the best extension ever for Visual Studio Code - the one you must install ASAP.

VS Code Pets

This extension puts a loved pet to your Visual Studio Code, giving a boost to your productivity. Your pet can be a happy dog, a kitten, or even a snake.

To install, search for vscode-pets in the extensions tab and then press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac and run the command "Start pet coding session".

Original post.

If you've enjoyed, consider buying me a coffee as a token of appreciation.

Forem: Belmiro Flávio

In the age of AI, Product Engineer is the new trend

Hey frontenders, let’s talk about accessibility?

Introdution

HTML

Colors and contrast

Images

Videos

Hierarchy of texts

Keyboard navigation

Links

Forms

Fonts

Linguagem

Focus

ARIA

Landmarks

Javascript events

15 tips and good practises

Truths

Tools to help you

Conclusion

References

More articles related

Today's Internet

5 free and cool APIs for you

React and CrossFit, what do they have in common?

The best extension for Visual Studio Code