DEV Community: Lucas Anselmo Moraes Da Silva

Desenvolvimento Orientado a Testes

Lucas Anselmo Moraes Da Silva — Mon, 18 Dec 2023 15:59:47 +0000

Durante o desenvolvimento de um software, é essencial entregar um software que funcione corretamente, com qualidade e no prazo estabelecido. Para garantir estes pontos, é importante testarmos nossos softwares com o intuito de encontrar possíveis falhas. E com essas possíveis falhas encontradas, poderemos corrigir esses problemas antes de chegar ao usuário final.

Mas, testar um software corretamente não é algo tão simples como pode parecer. Por isso, existem diversas metodologias que visam testar os diferentes componentes de uma solução de software de maneira correta. Algumas destas metodologias visam testar a integração entre os componentes de um software, enquanto outras visam testar cada um dos componentes de maneira isolada.

Uma das metodologias que mais estou utilizando no desenvolvimento dos meus projetos é o TDD. No TDD, você codifica o teste antes mesmo do código existir.

O que é a sigla TDD?

TDD é uma sigla para Test Driven Development, ou Desenvolvimento Orientado a Testes.
A ideia do TDD é que você trabalhe em ciclos. Estes ciclos ocorrem na seguinte ordem:

Primeiro, escreva um teste unitário que inicialmente irá falhar, tendo em vista que o código ainda não foi implementado;
Crie o código que satisfaça esse teste, ou seja: implemente a funcionalidade em questão. Essa primeira implementação deverá satisfazer imediatamente o teste escrito no ciclo anterior;
Quando o código estiver implementado e o teste satisfeito, refatore o código para melhorar pontos como legibilidade. Logo após, execute o teste novamente. A nova versão do código também deverá passar sem que seja necessário modificar o teste escrito inicialmente.

Vale ressaltar que TDD não é uma forma de escrever teste: ele é uma metodologia para desenvolvimento e escrita código.

Ciclo do TDD

A representação mais clara sobre como funciona o TDD, pode ser visualizada na imagem abaixo:

Perceba a existência dos três ciclos:

Red: escreva um pequeno teste automatizado que, ao ser executado, irá falhar;
Green: implemente um código que seja suficiente para ser aprovado no teste recém-escrito;
Refactor: refatore o código, a fim dele ser melhorado, deixando-o mais funcional e mais limpo.

Para realizar o teste em cada funcionalidade do seu código, você sempre irá seguir estes ciclos. Estes ciclos são comumente referenciados como red-green-refactor ou red-green-blue.

A ideia é que você utilize estes ciclos para testes unitários ⇾ testes estes que visam avaliar o comportamento de classes e métodos em específico. Você irá identificar quais são os comportamentos esperados dos métodos a serem desenvolvidos. Ao invés de implementar o código inicialmente, você irá criar o código de teste ligado a essas classes e métodos que você deseja implementar.
Como esse código ainda não estará devidamente implementado, o teste irá falhar (red), para que em seguida você faça a implementação dessa funcionalidade. Com a implementação, é esperado que esse teste passe (green). No final, você pode melhorar esse código, evitando duplicidade e trechos de código desnecessários (refactor) e irá fazer o teste novamente, onde ele deve passar. Assim você terá um código funcional e já devidamente testado.

Quais os benefícios?

Existem diversos benefícios ao escrevermos os testes antes mesmo de realizar uma implementação. Um dos benefícios é que, como você vai saber o que o código precisa fazer antecipadamente, você acaba evitando escrever código demasiadamente complexo ou que não siga os pré-requisitos de negócio.

Além disso, se você for deixar para testar as funcionalidades do seu código depois, você pode acabar não realizando os testes como deveria. Isso aumenta o risco de, por exemplo, realizarmos alterações no código por conta de testes que não passaram, aumentando substancialmente a possibilidade de introduzirmos problemas com estas alterações. Escrevendo os testes na etapa inicial, pode até parecer que acabamos tendo uma tarefa a mais a ser desempenhada; porém, no fim, seu software terá menos possibilidade de falhas, além de você acabar desenvolvendo código com mais qualidade.

Ferramenta para escrita dos testes de unidade

Para as principais linguagens e bibliotecas de programação, cada uma possuem sua própria ferramenta para escrita dos cenários de teste de unidade, onde se utiliza a metodologia TDD de forma prática. Abaixo, é listado alguns exemplos:

.NET - NUnit
PHP - PHPUnit
Node (JavaScript) - Jasmine
Java - JUnit
Python - PyUnit
React - Jest, Testing-Library, Vitest

HTML Best practices 2 - The continuation on how to put best practices in your HTML code

Lucas Anselmo Moraes Da Silva — Fri, 18 Feb 2022 19:40:25 +0000

As mentioned in the previous post, HTML is the basis of any web application, it is the backbone of development, and because it is one of the main elements of our website, it is important that we develop this structure with the best practices of writing in code.

So in this post, we will continue the good practices or writing in HTML.

Let's go 🏃‍♂️

In case you haven't read the previous post where we mentioned the first 3 practices, just click here to read.

4 - Don't use divs for creating footers and headers

Using <div> to create footers and headers is not good practice. The recommended elements for creating this are semantic HTML elements that mark the structure of a document most significantly on a web page. We soon concluded that it is a good practices to use these semantic elements for the proper assembly of the web page.

The semantics to use instead of divs are tags:

<header> - header

<footer> - footer

The <header> element shows the navigation or opening part of the web page.

The <footer> element displays copyright information or application navigation links.

Therefore, we conclude that it is not recommended to do this ⬇️:

<div class="header">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</div>  

<div class="footer">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</div>

In this example, we use the <div> tags as a container to represent our <header> and <footer>. Doing it this way will work, but it won't achieve the goal, which is the best code writing.

So the correct thing to do is to do it this ⬇️:

<header>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</header>  

<footer>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contatc</a>
</footer>

The importance of adding <header> and <footer>, is that these semantic elements are responsible for:

Makes your code easier to read.
Provides a better user experience for web visitors. It will be easier for web visitors who use screen readers to understand the content of your web page.

5 - Avoid using 'b' and 'i' tags for bold and italicized text

The <b> and <i> tags are known as the bold and italic tag. They are used to highlight words in text on a web page.

We shouldn't use these tags because they don't have a semantic meaning. Start using the font-weight CSS property or use the <strong> / <em> tags.

Use the <strong> tag makes text imortant on a web page. It highilights the bold in a page text. The <em> tag emphasizes the text on your page. It also displays text in iatlics as the <i> tag.

So we shouldn't do that ⬇️:

<p><i>Incorrect way to make text italic</i></p>

<p><b>Incorrect way to make text bold</b></p>

These displayed texts will be italicized and bold in the example above. It will not matter to the web user using a screen reader. It has no semantic meaning.

The HTML5 specification says that the <b> and <i> tags should only be used as a last resort, and if possible, avoided as much as possible.

Som the right thing to do is to do it this way ⬇️:

<p><strong>Correct way to make text bold</strong></p>

<p><em>Correct way to make the text italic (highlighted)</em></p>

6 - Don't put block-level elements inside inline elements

Block-level elements start on a new line on a web page. They extend from the beginning to the end of the line on a web page. Therefore, we will not be able to add more inline content to a block element without using some styling (CSS).

These block elements that we mentioned, taking 3 as examples, are:

<p>
<h1> - <h6>
<div>

The inline element covers the smallest area on a web page. They don't start on a new line on the page.

The <span>, <em> and <a> elements are some examples of inline elements.

We shouldn't put block elements inside inline elements

So it's bad practice to do that ⬇️:

<a href="#">
  <p>Visit our purchase page to see our offers</p>
</a>

No you must wrap <p> inside a <a> element because <p> is a block-level element and <a> is an inline element.

So, the correct way is to do it as follows ⬇️:

<p>
  Visit <a href="https://buy.html">our purchase page</a> to buy see our offers
</p>

The example above is the best way to align inline elements within a block-level element.

It is important to note that:

Block-level element cannot be nested inside an inline element.
Inline element can be nested inside a block-level element.
The inline and block-level element can be nested inside the block-level element.

Conclusion on good practices

I hope that this post, along with the previous post, has helped you understand how HTML is important for our applications, and the advantages we gain by writing a structure with good practices, correct writing and respecting the rules of HTML.

And I leave here a mission for you reader, which is to start putting these good manners in your code and day-to-day development.

Thanks for reading 💙 & take the opportunity to comment below, what other good HTML practice do you know that was not mentioned here.

And take the opportunity to follow me on: Twitter and LinkedIn - let's network 🤝

HTML Best practices - Acorrect way to build an HTML based website

Lucas Anselmo Moraes Da Silva — Tue, 15 Feb 2022 19:13:44 +0000

HTML is the basis of any web application existing on the internet today, without it, websites would not exist.
As development depends on HTML, it is important to follow good practices throughout development, in order to create a good experience for the user who is browsing your site.

In this post, we're going to talk about the best practices you should start implementing in your coding.

Let's go 🏃‍♂️

HTML coding best practices

These practices that we are going to recommend in this post are fundamental rules that will help you create websites that are easy to maintain with a pleasant and easy-to-read structure.

1 - Use only one `<h1>` element for a code page

There are six header tags (titles) in HTML, from <h1> to <h6> with <h1> being the main title of the page and decreasing the degree of importance to the end, which is the <h6> tag.

The order of values of these tags is drawn as follows ⬇️:


<h1> > <h2> > <h3> > <h4> > <h5> > <h6>

It is important to point out that it is necessary to avoid as much as possible the use of more than one <h1> element for a code page, that is, a bad practice is to develop HTML in this way ⬇️:


<main>
  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>  

  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>
</main>

In this example above, we use two <h1> tags. Coding this way will work your code as expected, but this is not the best practice related to good manners.

To conform to best practices, do it this way ⬇️:


<main>
  <div>
    <h1>Main title of this element</h1>
    <p>Paragraph text</p>
  </div>  

  <div>
    <h2>Main title of this element</h2>
    <p>Paragraph text</p>
  </div>
</main>

Using just one <h1> element on a web page is vital for SEO - Search Engine Optimization. It helps search engines understand what a web page is and built on best practices.

2 - Don't skip title levels in HTML

When using header tags, it is important to continue the ascending sequence of tags:

<h1> - <h2> - <h3> - <h4> - <h5> - <h6>

When using <h1>, don't jump straight to <h3> when working with header tags. It is important to avois this mistake, as it is difficult for web visitors using a screen reader to understand the content of your web page when you skip through the title levels.

Therefore, it is bad practice to write the code this way ⬇️:

<h1>First title<h1/>
<h3>Second title</h3>
<h5>Third title</h5>

And it should be written as follows ⬇️:

<h1>First title<h1/>
<h2>Second title</h2>
<h3>Third title</h3>

3 - Use the `<figure>` element to add caption to your images

It is recommended to use the <figure> element to add captions to your images. And you also need to use the <figcaption> element together with the <figure> element, for it to work.

So don't do it ⬇️:

<div>
  <img src="image.png" alt="Image of a computer on a table" />
  <p>This is an incorrect way to put captions on your images.</p>
</div>

This example above will work as you expect, but it's not the best way to do it. In an everyday situation, the image may not load, so you will have the alt text and the <p> tag text displayed on the screen. Thus, it will be difficult for a web visitor using a screen reader to tell the difference between alt and <p>.

Always keep in mind that even if your code works, it doesn't mean you're following best practices.

So do it ⬇️:

<figure>
  <img src="image.png" alt="Image of a computer on a table" />
  <figcaption>This is a correct way to put captions on your images.</figcaption>
</figure>

This example above is the correct way to add captions to your images.

It is very important to add captions to your images for the following reason:

Search Engine Optimization - It's easier to find your images in search engines.
It's easier for web visitors who use screen readers to understand the content of your web page.

I hope this article was important to you. Enjoy and follow me on Twitter

Enhacing your applications's front-end performance with lazy loading

Lucas Anselmo Moraes Da Silva — Fri, 04 Feb 2022 17:14:19 +0000

The <img /> tag, responsible for allowing the inserction of images on your site, sometimes it many saem like a harmless tag to the front-end of the site, but this tag, in most cases, sometimes it may be responsible for the long loading delay of your apllication.

But why this happen?

This happens because the moment someone accesses your page, the browser reads your HTML code and them starts making requests to download the images you are using.

So, the result is that the user stays here, with the page loading, until all the images you use on the page are downloaded.

But what's the problem with the user waiting for the site to load?

The problem is that in addition to harming SEO, the user does not have much patience to wait for the site to load, that is, the chances of it closing the site before loading is very high.

Ok, but how to solve this?

One of the best ways to solve this problem is to allow loading of images is done on demand, as the user scrolls down the page, the browser will download only the images that the user will see!!

We call this lazy loading

In this case, if there is a very heavy image (file size) in the footer of the site, and the user does not scroll to the end, that image will never be downloaded!!

How to add this lazy loading attribute in my applications?

You need to add the loading attribute to the img tags, like this:

After adding this attribute to the image, the browser will only download it when it is close to appearing on the screen, which means that even loading the image on demand, when it comes time for it to appear, it will have already been loaded!!

Conclusion on using this attribute

We can conclude that with the use of this attribute, in addition to gaining performance in our application, we do not harm the site's SEO and avoid loading all the images on our site at once.

Snippets Css

Lucas Anselmo Moraes Da Silva — Tue, 01 Feb 2022 13:39:11 +0000

One of the advantages of having a snippets is avoiding the repetition of writing the same block code, this in addition to generating a small delay in relation to the duration of the development of the code you are writing, it may happen that we copy a block of code from another project and not changing the variables and not realizing this, our code at the time of executation or compilation would end up failing.

With the intention of ending this problem of always repeating the same structure of the code block, we can generate a custom snippet, from which it would be enough to type just one word and our code block will already be built for us!!

This generates a greater time gain, since it is no longer necessary to copy and paste the same structure.

The snippet that we are going to create will be useful in the CSS language, as it will be responsible for creating a structure for resetting the styles for the HTML tags.

And to generate this snippet is very easy, just follow the steps below and your snippet will be working!!

How to create our snippet

Click on the File option from the top menu of VSCode.
Among the options suggested by File, click on Preferences.
In the Preferences options click on User Snippets.
After clicking on User Snippets a block will appear with options to create a snippet or select an existing snippet.
A list of several programming languages will also appear, as you can create a snippet for a specific language (which is what we are going to do) or you can also create a global snippet that will work regardless of the language you are coding.
In the input field, type css and click on the css.json (CSS) option.
After clicking this option, a css.json file will open in your editor.
In this file, just copy and paste the content below in your css.json file.

{
    // Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "Reset Css": {
        "prefix": "reset-css",
        "body": [
            "* {",
                "\tmargin: 0;",
                "\tpadding: 0;",
                "\tbox-sizing: border-box;",
            "}",

            "",

            "body {",
                "\tfont: 400 1rem '$1', sans-serif;",
            "}",

            "",

            "ul,",
            "li {",
                "\tlist-style: none;",
            "}",

            "",

            "a {",
                "\ttext-decoration: none;",
            "}",

            "",

            "img {",
                "\tdisplay: block;",
                "\tmax-width: 100%;",
            "}",
        ],
        "description": "Create a structure to reset the styling of html tags"
    },
}

After copying and pasting this content in the css.json file, just save it, and create a file with .css extension.
After creating this file, just type reset-css and press "enter" and that's it, your snippet is already working.

Explaining the snippet structure

In the part that says "Reset Css" is just the title of your snippets (this is not the title that appears when you type in the .css file)
prefix: This is the title references for you to type in the .css files that will be responsible for generating the structure of you snippets.
body: Structure you want to generate.
description: Description of what your snippets do.
"\t" - Creates a space for indentation.
"" - Quote alone is responsible for generating a line break (skips a line).
$1 - Responsible for indicating to the mouse cursor where to appear to start typing.

Comments

Since we generated the snippet in the css.json file, this snippet will only work on files with the .css extension. If you want this snippet to be global, for all languages, just click on the New Global Snippets file option instead of typing css in step 6 of the tutorial.
The names of the structures that form the snippets (prefix, body, description) must not be changed.