DEV Community: Ary Barros

Meet React 18 and the new updates on 2023

Ary Barros — Wed, 27 Dec 2023 14:14:50 +0000

React, a popular JavaScript library for building user interfaces, continues to evolve in 2023 with various improvements and innovations. Let's explore some of the key updates that make React even more powerful and efficient.

1. Dual Mode Concurrency

React has introduced the concept of "Dual Mode Concurrency" to enhance the user experience in applications with large volumes of data. This functionality allows React to dynamically adjust the priority between rendering and user interactions, resulting in a faster and smoother response, even in high-load environments.

import React, { unstable_createRoot } from 'react';

const App = () => {
  const root = unstable_createRoot(document.getElementById('root'));

  root.render(<YourComponent />);
};

2. Automatic Code Generation

Automatic Code Generation in React simplifies development by allowing React to generate part of the necessary code based on common patterns. This approach significantly reduces boilerplate code, increasing developer productivity.

// Before
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    // ... data fetching logic ...
    this.setState({ data: fetchedData });
  }

3. Advanced Hooks

New hooks have been added to provide more refined control over the component lifecycle and state logic. This includes hooks for handling asynchronous data more elegantly and efficiently, contributing to cleaner and more understandable code.

import { useState, useEffect, useAsync } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = useAsync(async () => {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    setData(data);
  }, []);

  useEffect(() => {
    fetchData.execute();
  }, []);

  return <div>{data}</div>;
};

4. Enhancements in Server-Side Rendering

React has improved server-side rendering to provide a faster and more efficient experience, especially in applications heavily dependent on SEO. Enhancements include optimizations in the initial HTML generation and the ability to reuse initial state on the client.

// Server-side rendering with React 17
import { renderToString } from 'react-dom/server';

const App = () => {
  // ... main component ...
};

const html = renderToString(<App />);

5. Incremental Rendering

Incremental rendering in React allows only the changed parts of an interface to be updated, minimizing performance impact. This approach is particularly beneficial in large applications where frequent small updates are necessary.

import React, { useState } from 'react';

const IncrementalRenderingComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

These are simplified examples to illustrate the concepts. Remember to adapt the code as needed for your application context. Stay tuned for regular updates to make the most of these advancements and enhance your React applications.

Liked the article? Make sure to follow for more posts about the front-end world.

Conheça o React 18 e suas atualizações em 2023

Ary Barros — Wed, 27 Dec 2023 14:06:54 +0000

O React, uma biblioteca JavaScript popular para construção de interfaces de usuário, continua evoluindo em 2023 com diversas melhorias e novidades. Vamos explorar algumas das principais atualizações que tornam o React ainda mais poderoso e eficiente.

Concorrência de Modo Duplo

O React introduziu o conceito de "Concorrência de Modo Duplo" para melhorar a experiência do usuário em aplicativos com grandes volumes de dados. Essa funcionalidade permite que o React ajuste dinamicamente a prioridade entre renderização e interações do usuário, resultando em uma resposta mais rápida e suave, mesmo em ambientes de alta carga.

import React, { unstable_createRoot } from 'react';

const App = () => {
  const root = unstable_createRoot(document.getElementById('root'));

  root.render(<YourComponent />);
};

Geração Automática de Código

A Geração Automática de Código no React simplifica o desenvolvimento, permitindo que o próprio React gere parte do código necessário com base em padrões comuns. Essa abordagem reduz significativamente a quantidade de código boilerplate, aumentando a produtividade dos desenvolvedores.

// Antes
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    // ... lógica de busca de dados ...
    this.setState({ data: fetchedData });
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

// Depois (com Geração Automática de Código)
import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // ... lógica de busca de dados ...
    setData(fetchedData);
  }, []);

  return <div>{data}</div>;
};

Hooks Avançados

Novos hooks foram adicionados para proporcionar um controle mais refinado sobre o ciclo de vida dos componentes e a lógica de estado. Isso inclui hooks para manipulação de dados assíncronos de maneira mais elegante e eficiente, contribuindo para um código mais limpo e compreensível.

import { useState, useEffect, useAsync } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = useAsync(async () => {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    setData(data);
  }, []);

  useEffect(() => {
    fetchData.execute();
  }, []);

  return <div>{data}</div>;
};

Melhorias na Renderização Server-Side

O React aprimorou a renderização server-side para proporcionar uma experiência mais rápida e eficiente, especialmente em aplicações que dependem fortemente de SEO. As melhorias incluem otimizações na geração de HTML inicial e a capacidade de reutilizar o estado inicial no cliente.

Copy code
// Renderização server-side com React 17
import { renderToString } from 'react-dom/server';

const App = () => {
  // ... componente principal ...
};

const html = renderToString(<App />);

Renderização Incremental

A renderização incremental no React permite que apenas as partes alteradas de uma interface sejam atualizadas, minimizando o impacto no desempenho. Essa abordagem é particularmente benéfica em grandes aplicações, onde pequenas atualizações frequentes são necessárias.

Copy code
import React, { useState } from 'react';

const IncrementalRenderingComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Incrementar</button>
    </div>
  );
};

Estes são exemplos simplificados para ilustrar os conceitos. Lembre-se de adaptar o código conforme necessário para o contexto da sua aplicação. Fique atento às atualizações regulares para aproveitar ao máximo esses avanços e aprimorar suas aplicações.

Gostou do artigo? Deixe sua curtida e me siga para mais publicações sobre o mundo do front-end.

React Fiber, Virtual DOM and Shadow DOM - The Ultimate Front-End Interview Questions Guide Pt: 2

Ary Barros — Fri, 03 Jun 2022 19:36:10 +0000

Welcome to the Ultimate Front-End Interview Guide. In this series of posts you will find the most demanded topics in Front-End interviews for you to do well in all of them. Even if you are not preparing for an interview right now, this series of posts will keep you up to date and always prepared to explain complex topics related to the most derivative technologies of interface construction.

Are you feeling DOMinated?

If we ask someone who has minimal knowledge of the concept of the web, this person will know what HTML is and its structure. Between so many existing tags and the tree that builds what we see on the screen, we can see and understand the DOM concept.

According to the definition of the mdn web docs:

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document the nodes and objects; that way, programming languages can interact with the page.

In a nutshell, the DOM is a representation of the tree of elements parsed by our browser, whatever it may be. Any modification that changes the style, content or structure of our page represents a change to the DOM.

And where do the other nomenclatures come from? Now let's see the definition of each of them.

Shadow DOM

We can easily define the Shadow DOM as a smaller scale representation of the full DOM. The difference applies to the way they are created, the shadow DOM being divided into individual scopes that can be coupled to the complete tree and the DOM representing the global scope. This concept is used in componentization strategies on the web.
The advantage of using the shadow DOM is that it doesn't affect the global structure, even when talking about styles or event functions.

Virtual DOM

The virtual DOM is a tool implemented by frameworks like Vue and React to trigger a rendering. In practice, the virtual DOM is a representation of the original DOM stored in memory. This in-memory representation is synchronized with the original DOM from time to time, and if there is any difference between them, the framework will start a new rederization to synchronize the information. This process is called reconciliation.

Keeping a copy of the DOM in memory makes it easier to compare information and ensures that we will only use browser resources when they are actually needed.

React Fiber

React Fiber is an idea introduced by React in March 2013 and is a rewrite of the React rendering algorithm that may replace the Virtual DOM concept in a few years. Despite its performance, the current algorithm does not work well with some areas of the web such as animations, which motivated the creation of this new architecture.

The concept is a bit complex, but if you're interested in finding out how we might see React in a few years, you can read this documentation from the React page: https://github.com/acdlite/react-fiber-architecture

Conclusion

Today we discovered the concepts of DOM, Shadow DOM, Virtual DOM and React Fiber. These are extremely important and are often asked in many front-end interviews, so it's good to be prepared. If you have any questions, comment below and I'll be happy to answer.

This post is part of a series of posts, stay tuned and follow me here on dev.to for more posts on the Ultimate Front-end Interview guide.

Follow me on linkedin:
https://www.linkedin.com/in/aryclenio/

Unidirectional and Bidirectional Data Flow - The Ultimate Front-End Interview Questions Guide Pt: 1

Ary Barros — Mon, 30 May 2022 12:36:18 +0000

Unidirectional what?

The concepts of unidirectional and bidirectional data flow are somewhat easy to explain, but at the same time a bit tricky if you don't have the right words or a contrary use case to exemplify.

A front end data flow is a set of data that transits between two or more parts of a project when rendering a page. This data can be represented in several ways, but today it has been commonly used and known as state. Changing a state and the actions that the framework you use takes to change the state is how we define the data flow.

The most famous library for front-end development, ReactJS uses unidirectional data flow, and libraries like VueJS use bidirectional data flow. Let us now learn the difference between them.

Bidirectional Data Flow on VueJS and Angular

Frameworks like VueJS and Angular use two-way data binding,

Two-way data binding refers to sharing data between a component class and its template. If you change data in one place, it will automatically reflect at the other end.

This is a concept that exists natively in functions in Javascript through the .bind() method and that was implemented in these tools to control the flow of state bidirectionally.

Let's look at an example VueJS code that explores this concept:



new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

This is data in Vue that will change when typing in an input. To use two-way data binding in vue, we use the v-model attribute.



<div id='app'>
  <p>{{ message }}</p>
  <input v-model='message'>
</div>

In this case, the input will start with the default value 'Hello Vue.js'. When we change the value of the input field, we automatically trigger a change in the view, which will automatically trigger a change in the data. Likewise, if we change the default value of the data or modify it in the application, it will be reflected in the view due to the concept of two way data binding.

See a live example on CodePen

In a practical and summarized way, in these frameworks, when the state changes, the view changes, rendering again to apply the changes. Likewise, when the view receives a change, the state is forced to update and keep in sync with what is displayed on the screen.

Unidirectional Data Flow on React

In the React library we have the concept of Unidirectional Data Flow, that is, the data only transits between one of the parts to the other and not the reverse. In the case of React, the only way to change what we see on screen is through modifying the data (state). When modifying the view, the state does not change, unlike in Vue or Angular.

Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application.

Let's see an example code in practice:



const { useState } = React

const App = () => {

  const [input, setValue] = useState("");
  const [name, setName] = useState('Chris');

  handleInput = (event) => {
    setValue(event.target.value);
  }

  updateName = (event) => {
    event.preventDefault();
    setName(input);
    setValue("");
  }

  return (
    <div className="box">
      <h1>
        Hello, <span>{name}!</span>   
      </h1>

      <form className="form">

        <div class="field">
          <label for="name-1">Update Name</label>
          <div class="control">
            <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button onClick={updateName} class="button is-dark">Save</button>
          </div>
        </div>
      </form>

    </div>
  )
}

Let's look at the form above. The input is responsible for updating the name described in the h1 tag. Note that the only way we have to add the state is when we iterate with the button, which makes a call to the useState() hook. Even if we changed the value of the input or used the state as the value for it, it would have no effect without calling the function which changes the state. This represents that the flow is always unidirectional, the view cannot change the state and vice versa, everything goes a single flow.

See a live example on CodePen

Conclusion

Today we know two concepts that are somewhat complex, but that will become internalized as we practice and review the concepts. If you have any questions, send them here in the comments and I will be happy to answer.

This post is part of a series of posts, stay tuned and follow me here on dev.to for more posts on the Ultimate Front-end Interview guide.

Follow me on linkedin:
https://www.linkedin.com/in/aryclenio/

React Batching and how it can make your page faster

Ary Barros — Tue, 10 May 2022 16:22:19 +0000

From new to more experienced developers, they know that the biggest challenge with a React page is its quantity of rendering. The smaller, the faster your application will be and the more effective your user's feedback on the generated page will be.

In React, both hooks and changing a state can generate a new rendering on the page, which depending on its size, can take a few milliseconds crucial for the user experience. Let's look at a practical example:

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

In the example above, React renders the same component twice (depending on the prop structure, the page renders as well). By default, every setState that is locked in promises, async awaits and timeouts will be rendered unitarily.

This behavior also happens when we have async await calls in code that render a series of states in a row. Let's see the example below:

  const [name, setName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');

  const handleClickAsync = async () => {
    await setName('Ary');
    setLastName('Barros');
    setPhone('+5584999828379');
  }

This is a very common code when we want to call an API in useEffect and we use an asynchronous function to get the data. In the above function, every time we have an async block in the code, React will render every state change, in this case, rendering 3 times in a row unnecessarily.

So how can we get rid of the render loop? Through the concept of Batching.

Batching is the act of grouping tasks together, so you do them all at once, instead of switching between tasks that take place in different programs or areas. - Kelsey Jones

Forcing batching in React applications

ReactDOM, a library that works with React, has the unstable_batchedUpdates method in one of its features. With it, we can force a batch of a set of states, both inside and outside of async-await methods.

  const [name, setName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');

  const handleClickAsync = async () => {
    ReactDOM.unstable_batchedUpdates(() => {
      await setName('Ary');
      setLastName('Barros');
      setPhone('+5584999828379');
    )};
  }

Introducing Auto batching in React 18.0

New functionality in React 18.0 brought auto batching. In this case, any code blocks inside promises, async awaits and timeouts are now automatically batched to generate a single rendering and thus improve the performance of the page as a whole. Let's look at the official example from the React page:

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

So, we have two solutions, if your project can't upload the React version, use the unstable_batchedUpdates method. If there is the possibility of upgrading, always use the newest version of React and take advantage of the new features developed such as automatic batching.

Hope I helped you learn something new. See you next time.

A practical guide to web accessibility: Part 2: Implementing and developing an accessible page.

Ary Barros — Sun, 04 Oct 2020 13:06:51 +0000

In the past article we saw the importance of web accessibility and how we can see it in our own production.

In the second part, we will show the various structural elements of our HTML/CSS/JS in order to make our website accessible to everyone. All content covered here can be implemented in any front-end framework as well as in pure code.

So, are you ready? Let's get started!

1. The semantic HTML

HTML semantics is nothing more than using the right tags at the right times. It sounds simple doesn't it? But know that many of us don't use it properly.

Most sites are filled with a tangle of

tags and do not use the tag structure predefined by HTML. What's the matter with that? When a screen reader passes through the page, he will easily get lost in the positioning of the site, and can, as a result, access the footer before the nav, or the title of the text after its content , among several other problems caused by this bad structure.

HTML5 came with new tags that completely solve this structure. We can easily adapt the construction of our front so that it follows these guidelines. In addition to gaining better native page positioning, we’ll still be helping screen reader users find their way around.

2. Labels on Forms

Forms are always a problem for people with disabilities. Most of these problems are due to the bad association of labels with their respective inputs.

HTML has a natural solution for this, the for attribute for label tags. This attribute references the input in which it describes. However, it is unfortunately less used in most forms that we find on the web.

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Alternative image descriptions

Anyone who is already familiar with the use of frameworks like react or vue and has tried to insert an image in their code, has already encountered the mandatory alt attribute, right? The alt attribute refers to alternative description and is another way for the screen reader to receive the description of the image so that people with vision disabilities can understand the meaning of the image.

It is very important to always insert a succinct description about the image presented, because the presence of the description can, in some cases, generate conflicts of understanding due to its bad description.

Descriptive titles

In addition to the description in images, our front-end allows all elements to be better described. This is done through the title attribute and is activated when the component receives focus. Using it is a good alternative to better describe certain complex areas of your project.

Integrations with sign languages

Deaf users who only have the ability to communicate using sign language may need to use it to navigate your website. Fortunately, there are countless alternatives depending on the country you live in and the audience you want to reach. Most plugins are just imports of Javascript code in the head tag. Others may require installation of packages.

The image below is an example of HandTalk, a Brazilian sign language translation plugin.

Color adaptation

Something that has become very fashionable in the new interfaces is the presence of dark themes. They reduce the intensity of the light in our eyes, keeping them more comfortable.

In addition to the dark theme, there are many other features that we can create to include visual impairment or color blind users on our website. One of them, very common in operating systems is the high contrast theme.

The high contrast serves to reduce the amount of colors in an application so that, like the dark theme, its characteristics become more visually perceptive and less harmful to the human eye. However in this case the choice of colors is selective.

The colors shown above are used in the Windows system for auto contrast themes. Several studies show that this palette is extremely effective for users with low vision to better see the elements of the site.

From the construction of a theme with a low amount of colors, it is possible to create several branches of it to also include users with color blindness.

So, where do I start?

After we have seen all this and understand the importance of accessibility, where can we start?

The answer is, simply get started. We don't need to include all the features covered here, but if we include at least one of them, we can change the life of a user of our system and, with that, influence new people to include them as well.

Thanks for reading.
Follow me on dev.to and linkedin

A practical guide to web accessibility: Part 1: Is my website accessible?

Ary Barros — Sun, 04 Oct 2020 12:49:11 +0000

What is web accessibility?

Web accessibility involves a series of resources that make it possible for everyone to browse, understand and interact on the Internet, regardless of their difficulties or limitations.
This means that websites, tools and technologies are properly designed, developed and coded so that people with permanent disabilities or those with momentary disabilities can use them. In this way, people, regardless of their limitations, can perceive, understand, navigate, interact and contribute to the environment in which that page or program is made available on the web.

Why should I care about accessibility?

Disabled people represent 15% of the world population. Sites or systems that do not have specific adaptations for this audience, in addition to suffering from this lost share of users, are still subject to legal penalties in certain countries.

Web accessibility guidelines

The Web Content Accessibility Guidelines (WCAG), created in 2014 and renewed in 2018, is a list of features to be followed for a website or web system to become accessible. Among the elements to be discussed in these guidelines are:

Clean navigation
Tab order
Landmarks and site maps
HTML structure
Expressive titles
Well-placed and defined headings
Content lists
Text
Contrast
Color
Descriptive images

Each of these items represents a functionality of building a page (involving HTML + CSS + JS) that can be implemented in order to help the final understanding of the website.

How do I know if my website is accessible?

To test whether our website or system is accessible or not, we can imagine the following scenarios:

Blind people

Blind users use websites through a screen reader, which is navigated exclusively by the keyboard. To do this test, consider browsing your website with the TAB key. Check if you can reach all possible inputs and buttons, perform actions with them sequentially.

People with low vision or color blind

Users with color blindness or low vision use high contrast functions or color adaptations for images and texts. Does your page have any of these options?

People who are deaf or have impaired hearing

Deaf people make use of the sign language text transcriber integrated in the website and also of video descriptions. Does your website have any free sign language translation options?

Dyslexia and other intellectual disabilities

This group of people has difficulty interacting with very small or complex screen elements, such as menus in navbars or badly positioned buttons. Does your website have these well positioned elements?

What is your result?

If your website or system has not passed one, or none of the following, don't worry. In the next part of this article, we will discuss how we can prepare our front-end for these diverse situations, using simple and easily accessible tools in the community. Are you ready?

Thanks for reading! :)

Um guia prático da acessibilidade web: Parte 2: Implementando e desenvolvendo uma página acessível.

Ary Barros — Sat, 03 Oct 2020 19:58:44 +0000

No artigo passado vimos a importância da acessibilidade web e como podemos enxergar ela em nossa própria produção.

Na segunda parte, vamos abordar os vários elementos estruturais do nosso HTML/CSS/JS de forma a tornar nosso site, acessível a todos. Todos os conteúdos abordados aqui podem ser implementados em qualquer framework front-end assim como em código puro. E ai? Estão prontos?

O HTML semântico

A semântica HTML é nada mais do que utilizar as tags certas, nas horas certas. Parece simples não é? Mas saiba que muitos de nós não a utilizamos da forma correta.

A maioria dos sites é repleto de um emaranhado de tags

e não utiliza a estrutura de tags pré-definidas pelo HTML. Qual o problema disso? Quando um leitor de tela passar pela página, ele se perderá facilmente no posicionamento do site, e pode, por consequência disso, acessar o footer antes da nav, ou o título do texto após o seu conteúdo, dentre vários outros problemas acarretados dessa má estruturação.

O HTML5 veio com novas tags que resolvem completamente essa estrutura. Facilmente podemos adequar a construção do nosso front de forma que ele siga essas diretrizes. Além de ganharmos um melhor posicionamento nativo da página, ainda estaremos ajudando os usuários de leitores de tela a se localizarem.

Labels em Formulários

Os formulários sempre são um problema para o publico das pessoas com deficiência. A maioria desses problemas se dá em virtude da má associação das labels a seus respectivos inputs.

O HTML tem uma solução natural para isso, o atributo for para as tags label. Esse atributo referencia o input na qual ele descreve. Porém, ele é infelizmente pouco utilizado na maioria dos formulários que encontramos na web.

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Descrições alternativas de imagem

Quem já é familiarizado com o uso de frameworks como react e já tentou inserir uma imagem em seu código, já se deparou com a obrigatoriedade do atributo alt, certo? O atributo alt se refere a alternative description e é mais uma forma de o leitor de tela para pessoas com deficiência visual receber como dado a descrição da imagem no qual ele lê em tela.

É muito importante sempre inserirmos uma descrição sucinta sobre a imagem apresentada, pois, a presença da descrição pode em alguns casos gerar conflitos de entendimento em virtude de sua má descrição.

Titulos descritivos

Além da descrição em imagens, o nosso front-end permite que todo e qualquer elemento seja melhor descrito. Isso é feito através do atributo title e é ativado quando o componente recebe foco. Usa-lo é uma boa alternativa para descrever melhor certas áreas complexas do seu projeto.

Integrações com linguagens de sinal

Usuários surdos que somente possuem a capacidade de se comunicar por meio de linguagem de sinais pode precisar usa-la para navegar no seu site. Felizmente, existem inúmeras alternativas dependendo do pais que você more e do publico na qual quer atingir. Grande parte dos plugins são apenas importações de código Javascript na tag head. Outros podem exigir instalação de pacotes.

A imagem abaixo é um exemplo do HandTalk, biblioteca de tradução para língua brasileira de sinais.

Adaptação de cores

Algo que tem entrado muito na moda das novas interfaces é a presença dos dark themes. Eles reduzem a intensidade da luz nos nossos olhos, mantendo-os mais confortáveis.

Além do tema escuro, existem muitos outros artifícios que podemos criar para incluir pessoas com deficiência visual ou com daltonismo em nosso site. Um deles, muito comum em sistemas operacionais é o tema de alto contraste.

O alto contraste serve para reduzir a quantidade de cores em uma aplicação de forma que, assim como o tema escuro, suas características se tornem visualmente mais perceptivas e menos danosas ao olho humano. Porém neste caso a escolha das cores é seletiva.

As cores mostradas acima são utilizadas no sistema Windows para os temas de auto contraste. Vários estudos mostram que essa paleta é extremamente efetiva para usuários de baixa visão possam enxergar de forma melhor os elementos do site.

A partir da construção de um tema com baixa quantidade de cores, é possível criarmos diversas ramificações dele para incluir também usuários com daltonismo.

E então, por onde começo?

Depois de virmos tudo isso e entender a importância da acessibilidade, por onde podemos começar?

A resposta é, simplesmente começar. Não precisamos incluir todas as funcionalidades abordadas aqui, mas se incluirmos ao menos uma delas, podemos mudar a vida de um usuário do nosso sistema e com isso, influenciar novas pessoas a inclui-las também.

Obrigado pela leitura.
Me siga no dev.to e no linkedin

Um guia prático da acessibilidade web: Parte 1: Meu site é acessível?

Ary Barros — Sat, 03 Oct 2020 19:58:24 +0000

O que é a acessibilidade web?

A Acessibilidade web envolve uma série de recursos que possibilitam a navegação, a compreensão e a interação de todas as pessoa na internet, independentemente de suas dificuldades ou limitações.
Isso significa que sites, ferramentas e tecnologias são projetados, desenvolvidos e codificados adequadamente para que pessoas com deficiências permanentes ou com incapacidades momentâneas possam usá-los. Dessa forma as pessoas, independentemente de suas limitações, podem perceber, entender, navegar, interagir e contribuir para o ambiente em que aquela página ou programa é disponibilizado na web.

Porque eu deveria me preocupar com a acessibilidade?

As pessoas com deficiência representam 15% da população mundial. Sites ou sistemas que não possuem adaptações especificas para esse publico, além de sofrerem com essa fatia de usuários perdida, ainda está sujeito a penalidades legais em certos países.

As diretrizes da acessibilidade web

A Web Content Accessibility Guidelines (WCAG), criada em 2014 e renovada em 2018 é uma guideline de diretrizes a serem cumpridas para que um site ou sistema web se torne acessível. Dentre os elementos a serem discutidos nessas diretrizes estão:

Navegação limpa
Ordem de tabulação
Marcos e mapas do site
Estrutura do HTML
Títulos expressivos
Cabeçalhos bem inseridos e definidos
Listas de conteúdo
Texto
Contraste
Cor
Imagens descritivas

Cada um desses itens representa uma funcionalidade da construção de uma página (envolvendo HTML+CSS+JS) que pode ser implementada de forma a auxiliar o entendimento final do site.

Como saber se meu site é acessível?

Para testar se nosso site ou sistema é acessível ou não, podemos imaginar os seguintes cenários:

Pessoas cegas

Usuários cegos utilizam sites por meio de um leitor de tela, que é navegado exclusivamente pelo teclado. Para fazer esse teste, considere navegar em seu site com a tecla TAB. Verifique se você consegue chegar em todos os inputs e botões possíveis, realizar ações com eles de forma sequencial.

Pessoas com baixa visão ou daltônicas

Usuários com daltonismo ou baixa visão utilizam funções de alto contraste ou adaptações de cores para imagens e textos. Sua página possui alguma destas opções?

Pessoas surdas ou com audição comprometida

Pessoas surdas fazem uso do transcritor de texto em língua de sinais integrado ao site e também, de descrições em vídeos. Seu site possui alguma opção de tradução livre em língua de sinais?

Dislexia e outras deficiências intelectuais

Esse grupo de pessoas possui dificuldade em interagir com elementos da tela muito pequenos ou de acesso complexo, como menus em navbars ou botões mal posicionados. Seu site possui esses elementos bem posicionados?

Qual o seu resultado?

Se seu site ou sistema não passou em uma, ou nenhuma das situações a seguir, não se preocupe. Na próxima parte desse artigo, abordaremos como podemos preparar nosso front-end para essas diversas situações, usando ferramentas simples e de fácil acesso na comunidade. Está preparado?

The new features of Javascript in 2020 (ES11)

Ary Barros — Sun, 20 Sep 2020 13:48:37 +0000

Javascript is a sensation, largely due to the explosion of web development today. Many are inserted in it and others, at one time or another, will have to learn it to integrate certain features into their projects. According to the StackOverflow Survey 2020 Javascript is the most used language today, and the number of its users grows very strong.

Despite this, it is known to a large part of its users that the beginning of Javascript was really troubled in its construction, generating even several jokes on the internet about its functionalities. Today everything has changed, and several versions of EcmaScript (European association for standardizing information and communication systems) have emerged to standardize these functionalities.

In 2020, a new version of EcmaScript appeared, and with it, several features were added natively to browsers. In this article, we will browse through each one and discover its uses. Are you ready?

BigInt

The number of integer representations was one of the features included in the new version of ES11. Before, the maximum representative number in javascript was the number 9007199254740991.

Now, with bigInt, we can go beyond that number.

Dynamic import

Now, with Javascript, we can import modules dynamically through variables. With that, the variables that receive the modules are able to encompass the namespaces of these modules in a global way.

let Dmodule;

if ("module 1") {
  Dmodule = await import('./module1.js')
} else {
  Dmodule = await import('./module2.js')
}

/* It is possible to use Dmodule. (Methods)
throughout the file globally */
Dmodule.useMyModuleMethod()

Exporting modules

A new syntax was added allowing the export of modules similar to import that already existed, see an example below:

// Existing in JS
import * as MyComponent from './Component.js'

// Added in ES11
export * as MyComponent from './Component.js'

Optional Chaining

Optional Chaining, known to babel users, is now supported natively by Javascript. This functionality removes the need for conditionals before calling a variable or method enclosed in it.

const user = {
  "name": "Aryclenio Barros",
  "age": 22,
  "alive": true,
  "address": {
    "street": "Hyrule street",
    "number": 24,
  }
}

// Without optional chaining
const number = user.address && user.address.number

// With optional chaining
const number = user.address?.number

Nullish Coalescing Operator

A new operator was added to Javascript. It came to cause a discrepancy between Javascript's falsey value. We use the falsey condition with the || operator. The falsey values are:

0
undefined
null
false
NaN

The new operator only allows undefined and null, allowing variables to encompass the rest of the values as true in a conditional. Note that, different from the case above, the values of 0, NaN and false are persisted even though a non-falsey value is passed.

Promise.AllSettled

The Promise.AllSettled attribute allows you to perform a conditional that observes whether all promises in an array have been resolved. See an example below:

const myArrayOfPromises = [
    Promise.resolve(myPromise),
    Promise.reject(0),
    Promise.resolve(anotherPromise)
]

Promise.AllSettled(myArrayOfPromises).then ((result) => {
   // Do your stuff
})

matchAll

The matchAll method is a feature that better details regex comparisons within a string. Its result is an array that indicates the positions, as well as the string group and the source of the search. See an example of a regex that allows values from 0 to 5 with the matchAll method.

Conclusion

In addition to these features, some others have been included, you can see the complete set of changes on Ecma's official website.

I hope you enjoyed it and thank you for reading. I invite you to read my other articles and follow me here on dev.to.

Follow me on linkedin

Best Regards!! :)

As novas funcionalidades do Javascript em 2020 (ES2020)

Ary Barros — Sat, 19 Sep 2020 16:09:44 +0000

Javascript é uma sensação, grande parte em virtude da explosão do desenvolvimento web nos dias de hoje. Muitos estão inseridos nela e outros, uma hora ou outra terão que aprende-la para integrar determinadas funcionalidades a seus projetos. Segundo o StackOverflow Survey 2020 o Javascript é a linguagem mais utilizada hoje em dia, e o numero de seus usuários só cresce.

Apesar disso, é do conhecimento de boa parte de seus usuários que o inicio do Javascript foi realmente conturbado em sua construção, gerando até varias piadas na internet sobre suas funcionalidades. Hoje tudo mudou, e varias versões do EcmaScript (European association for standardizing information and communication systems) foram surgindo para padronizar essas funcionalidades.

Em 2020, uma nova versão do EcmaScript surgiu, e com ela, varias funcionalidades foram incluídas nativamente aos browsers. Nesse artigo, vamos navegar por cada uma delas e descobrir suas utilidades. Está pronto?

BigInt

O numero de representações de inteiro foi uma das funcionalidades inseridas na nova versão do ES11. Antes, o máximo numero representativo no javascript era o número 9007199254740991.

Agora, com o bigInt, podemos ir além desse número.

Importação dinâmica

Agora, com o Javascript, podemos importar módulos dinamicamente módulos por meio de variáveis. Com isso, as variáveis que recebem os módulos conseguem englobar o namespaces desses módulos de uma forma global.

let Dmodule;

if("react") {
  Dmodule = await import('react')
}else{
  Dmodule = await import('vue')
}

/* É possivel utilizar Dmodule.(métodos) 
em todo o arquivo de forma global */

Exportação de módulos

Uma nova sintaxe foi adicionada permitindo a exportação de módulos semelhante ao import que já existia, veja um exemplo abaixo:

// Já existente no JS
import * as MyComponent from './Component.js'

// Adicionado no ES11
export * as MyComponent from './Component.js'

Optional Chaining

O Optional Chaining, conhecido pelos usuários do babel agora é suportado nativamente pelo Javascript. Essa funcionalidade remove a necessidade de condicionais antes de chamar uma variável ou método englobado a ela.

const user  = {
  "name": "Aryclenio Barros",
  "age": 22,
  "alive": true,
  "address": {
    "street": "Hyrule street",
    "number": 24,
  }
}

// Sem optional chaining
const number = user.address && user.address.number

// Com optional chaining
const number = user.address?.number

Nullish Coalescing Operator

Um novo operador foi adicionado ao Javascript. Ele veio para causar discrepância entre o valor falsey do Javascript. Utilizamos a condição de falsey com o operador ||. Os valores falsey são:

0
undefined
null
false
NaN

O novo operador somente engloba undefined e null, permitindo com que variáveis englobem os restantes do valores como true em uma condicional. Perceba que diferente do caso acima, os valores de 0, NaN e false são persistido em virtude de um valor não falsey.

Promise.AllSettled

O atributo Promise.AllSettled permite que você realize uma condicional que observa se todas as promises em um array foram resolvidas. Veja abaixo um exemplo:

const myArrayOfPromises = [
    Promise.resomve(myPromise),
    Promise.reject(0),
    Promise.resolve(anotherPromise)
]

Promise.AllSettled(myArrayOfPromises).then((result) => {
   // Do your stuff
})

matchAll

O método matchAll é uma funcionalidade que detalha de uma forma melhor comparações de regex dentro de uma string. Seu resultado é um array que indica as posições, assim como grupo de string e a origem da pesquisa. Veja um exemplo de um regex que permite valores de 0 a 5 com o método matchAll.

Conclusão

Além dessas funcionalidades, algumas outras foram englobadas, você pode ver o conjunto completo de mudanças no site oficial da Ecma.

Espero que vocês tenham gostado e muito obrigado pela leitura. Convido vocês a lerem meus outros artigos e me seguirem aqui no dev.to.

Best regards!! :)

Internationalizing your React app with i18next

Ary Barros — Sun, 06 Sep 2020 20:36:25 +0000

Nowadays, our applications have taken on proportions never before imaginable, and the web has given us the possibility to make it accessible all over the world. This is where many developers face a problem...

How do I get my app translated quickly and efficiently?

To our happiness, libraries like React have extremely easy alternatives to implement this functionality, and today, we are going to meet one of them, the i18next plugin.

Implementing internationalization

To start, let's go to our facilities. If you want to start an app from scratch, let's use the command below and create a new react app:

yarn create react-app i18napp --template typescript

If you already have a project or have just created yours, install the dependencies that we will need for i18next to work properly:

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Okay, now we already have the packages we need. Let's get your hands on the code!!!

Configuring i18next

To indicate to our app the use of internationalization and properly activate the hooks in it, we must prepare a file that will be next to our index.js, it will be called i18n.js and will contain the following lines:

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  // Enables the i18next backend
  .use(Backend)
  // Enable automatic language detection
  .use(LanguageDetector)
  // Enables the hook initialization module
  .use (initReactI18next)
  .init({
    // Standard language used
    fallbackLng: 'en',
    debug: true,
    //Detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    }
  })

export default i18n;

After that, we should import it into our index.js, which will look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

All set, react i18next is enabled and ready to use. Now the next step is to incorporate our translations.

Incorporating locales

Internationalizations on the web work on the basis of json with word sections. In this app, we will incorporate English and Portuguese.

For this, in our /public folder we will add the /locales folder that will have two subfolders, /en and /pt, both with a translation.json file that will contain the object with the translations. See an example of the file in English and the structure of the produced folder:

{
  "title": "Welcome to an internationalized APP",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and portuguese using buttons above."
  }
}

Locales folter structure

That done, let's get down to business with our homepage.

Customizing the App.js

Now let's go to our final part, building our home page. For this, we will delete the original content of App.js and leave only one div.

Importing the translation hook

To import the i18next hook we use the following code:

import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();

The t attribute is used to incorporate our translation and i18n to observe changes in the state of the localization.

Using translation in tags

To use an attribute of our object, we just call the t() function that we have destructured above:

   <div><h1>{t("title")}</h1></div>

See how easy it is?

We will complete our app with the code below by adding two buttons that will change the language and see the magic in real time...

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("pt")}>PT</button>
      <hr />
      <div><h1>{t("title")}</h1></div>
      <div>{t("description.part1")}</div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

Observing the magic

If you entered the code correctly, the magic below should happen to your app. Translation is done at runtime.

Did you liked? The code is available on my github.

Thanks for reading!!!