DEV Community: Sérgio Roberto Sanchez Filho

O começo

Sérgio Roberto Sanchez Filho — Thu, 19 May 2022 17:45:58 +0000

Foi disponibilizado para nós um layout em Figma, fornecido por Ilana Mallak, com todas as cores, ícones, imagens, hoovers e fontes que utilizaremos, incluindo cores claras e escuras. Esse projeto terá a versão Mobile e a versão Desktop, por isso a responsividade foi pensada para trazer uma melhor experiência ao usuário. Este projeto é simples, mas abrange muitas tecnologias Full-Stack, para que possamos adquirir o máximo de conhecimento. Vamos aprender React, React Native, Node, Tailwind CSS, Headless UI, TypeScript, Testes Automatizados, banco de dados e muito mais.

Primeiramente, temos que configurar nosso ambiente de desenvolvimento, instalando o Node.js, disponível aqui, ou um gerenciador de pacotes, como Homebrew. Além disso, usaremos o VSCode.

Um SPA, ou Aplicação de Página Única traz uma melhor experiência ao usuário através da sensação de navegar entre as páginas muito mais rápido. Os aplicativos SPA são sempre executados no lado do cliente – neste caso, o navegador. Back-end e Front-end são separados, então o back-end recebe requisição e renderiza de acordo com o front-end do dispositivo. Quando novas páginas precisam ser carregadas, não há necessidade de uma nova solicitação ao servidor: essas páginas são carregadas por meio de rotinas JavaScript, eliminando a necessidade de solicitações ao servidor para obter o novo conteúdo a ser renderizado: desde o primeiro carregamento de da aplicação, toda interação para carregamento de conteúdo acontece exclusivamente no lado do cliente por meio de JavaScript. Como exemplo de SPA temos Twitter, Gmail, Google Maps e Trello.

SSR, ou Renderização do lado do Servidor, reverte o processo de renderização, trazendo parte do esforço de renderização do aplicativo SPA para o servidor, semelhante ao carregamento tradicional. O SSR pode fornecer aos usuários um carregamento de aplicativos mais eficiente, pois parte da renderização é feita no servidor. O back-end e o front-end empilham juntos. Como exemplo temos Wordpress, Magenta, GitHub e outros.

Então vamos começar!

No terminal digitamos npm create vite@latest, escolhemos o nome web para o projeto, depois escolhemos o Framework que iremos utilizar, caso selecionemos React e React with TypeScript. Assim, o projeto está criado. Basta executar o código. para abrir o VSCode.

O Vite é uma ferramenta que faz com que nosso navegador entenda o JavaScript mais moderno. Depois disso, executamos o npm install para instalar as dependências do nosso projeto. Fizemos uma limpeza nos arquivos criados em nosso diretório, e rodamos npm run dev.

Antes de prosseguirmos, temos que saber duas coisas sobre o React: componentes e propriedades. Componentes é uma função que retorna HTML. Ele deve ter uma primeira letra maiúscula para não retornar uma tag HTML. Propriedades é como um atributo do componente.

Depois disso, vamos configurar nosso aplicativo com Tailwind CSS. É um framework CSS utilitário com classes como flex, pt-4, text-center e rotate-90 _que podem ser compostas para construir qualquer design, diretamente em nossa marcação. Ele nos traz muita produtividade, e para instalá-lo entre no site oficial e instale usando _PostCSS. Pode ser que nosso código não fique tão bonito, mas ganhamos muito em produtividade. Mas podemos criar classes da forma tradicional do CSS também, basta colocar @apply e todas as propriedades dessa classe no arquivo .css.

Vamos começar a fazer a interface móvel. Essa técnica é chamada de Mobile first. Mobile first é um projeto que cria projetos da web e sites primeiro em dispositivos móveis, e depois os adapta para desktop e outras plataformas, e traz algumas vantagens como melhor classificação no Google, melhor experiência do usuário, aumento da credibilidade da marca, otimização de carregamento de página, entre muitos outros.

Criamos uma pasta na pasta src, nomeada componentes e, em seguida, um arquivo .tsx chamado Widget. Exporte a função no arquivo App.tsx. Vamos criar um Trigger Button para dar Feedback, e os ícones podem ser encontrados no site Phosphor icons, e eles têm integração direta com o React, então podemos instalar rodando npm install phosphor-react no terminal do VSCode. Dessa forma podemos importar diretamente para o nosso projeto utilizando o ícone como um componente, com diversas propriedades, como peso, tamanho entre outras.

Vamos começar passando uma aula para ele. É muito importante para o nosso projeto conhecer o conceito de unidades rem em CSS, que é uma unidade de tamanho relativo com excelente suporte a navegadores. 1rem é igual ao tamanho da fonte do elemento html, que, para a maioria dos navegadores, tem um valor padrão de 16px. O uso de rem pode ajudar a garantir a consistência do tamanho da fonte e do espaçamento em toda a nossa interface do usuário (UI). Com isso em mente, comece a codificar o design deste botão, e é impressionante as facilidades que o Tailwind nos traz. Com algumas linhas de código finalizamos a funcionalidade do primeiro componente. Este botão é usado para abrir/fechar algo, então esse algo vai mudar com uma ação, e isso se chama Estado no React, que é uma variável como qualquer outra em JS, mas o React olha essa variável e toda vez que ela tem seu valor alterado ele irá criar a interface deste componente novamente, com este novo valor.

É muito importante para o nosso projeto pensar em acessibilidade, e isso é mais fácil de pensar desde o início do projeto, e serve de auxílio para que sites, ferramentas e tecnologias sejam pensadas e desenvolvidas para que pessoas com ou sem deficiência possam usar, navegar, interagir e compreender o conteúdo, com autonomia. No nosso caso, podemos navegar pela página usando o teclado, mas ele não nos avisa quando um novo elemento aparece na tela. Para corrigir isso,
podemos usar as tags ARIA, Aplicativos avançados de Internet acessíveis, que definem formas de tornar o conteúdo e as aplicações web mais acessíveis a pessoas com deficiência. Mas temos várias bibliotecas em React que facilitam nosso trabalho, como o reakit, feito por um brasileiro, que será chamado de ariakit; radix-ui, também é uma biblioteca de acessibilidade, e headlessui, que usaremos em nosso projeto, pois ela foi projetada para se integrar lindamente com Tailwind CSS. Execute npm install @headlessui/react no terminal para instalar e importe o Popover em nosso Widget.tsx. O mais legal é que o popover controla toda essa parte do estado, então não precisamos definir uma função para falar quando ela estiver aberta/fechada. Fazendo as modificações necessárias, conforme documentação, nosso projeto passou a ter diversas acessibilidades ARIA.

E assim concluímos a primeira aula deste evento, na qual aprendemos a configurar o ambiente de desenvolvimento, como funcionam um SPA e um SSR, conceitos importantes de React, usar e configurar Tailwind CSS, rem, usar React States, conceitos de acessibilidade, uso de diferentes bibliotecas e muito mais.

The begining

Sérgio Roberto Sanchez Filho — Thu, 19 May 2022 16:15:18 +0000

Was made available to us a layout in Figma, provided by Ilana Mallak, with all the colors, icons, images, hoovers and fonts we will use, including light and dark mode colors. That project will have the Mobile version and the Desktop version, so the responsiveness was thought to bring a better experience to the user. This project is simple, but it covers many Full-Stack technologies, so we can acquire the most knowledge. We will learn React, React Native, Node, Tailwind CSS, Headless UI, TypeScript, Automated Tests, database and much more.

First of all, we have to configure our development environment, installing Node.js, available here, or a package manager, as Homebrew. Besides that, we will use VSCode.

A SPA, or Single Page Application brings a better user experience through the feeling of navigating between pages much faster. SPA applications are always run on the client side – in this case, the browser. Back-end and Front-end are separate, so the back-end receive requisition and renders according to the device front-end. When new pages need to be loaded, there is no need for a new request to the server: these pages are loaded through JavaScript routines, eliminating the need for requests to the server to obtain the new content to be rendered: from the first load of the application, all interaction for loading content happens exclusively on the client side through JavaScript. As example of SPA we have Twitter, Gmail, Google Maps and Trello.

SSR, or Server Side Rendering, reverses the rendering process, bringing some of the SPA application rendering effort to the server, similar to traditional loading. SSR can provide users with more efficient application loading as part of the rendering is done on the server. Back-end and Front-end stacks together. As example we have Wordpress, Magenta, GitHub and others.

So lets start!

In terminal we digit npm create vite@latest, choose name web to the project, then choose the Framework that we will use, in case we select React and React with TypeScript. So, the project is created. Just run code . to open VSCode.

Vite is a tool that makes our browser understand the most modern JavaScript. After that, we run npm install to install the dependencies of our project. We made a clean in the files created in our directory, and run npm run dev.

Before we proceed, we have to know two things about React: components and properties. Components is a function that returns HTML. It must have a capital first letter capitalized, not to return a HTML tag. Properties is like a atribute of the component.

After that, we will configure our app with Tailwind CSS. It is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in our markup. It bring us a lot of productivity, and to install it enter in the official site and install using PostCSS. It may be that our code doesn't look so pretty, but we gained a lot in productivity. But we can create classes in the tradicional way of the CSS too, Just put @apply and all properties of that class in the .css file.

We will begin making the mobile interface. This technique is called Mobile first. Mobile first is a project that creates web projects and websites first on mobile devices, and then adapts them to desktop and other platforms, and it brings some vantages like better ranking on Google, best user experience, increase in brand credibility, page loading optimization, among many others.

We create a folder in the src folder, named components, and then a .tsx file named Widget. Export the function in the App.tsx file. We will create a Trigger Button for Feedback, and the icons can be found in Phosphor icons, and they have direct integration with React, so we can install running npm install phosphor-react in the terminal of VSCode. That way we can import directly into our project using the icon as a component, with various properties, like weight, size among others.

Let's start by passing him a class. Its very important for our project to know about the concept of rem units in CSS, which is a relative sizing unit whit excellent browser support. 1rem equals the font size of the html element, which, for most browsers, has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout our user interface (UI). With that in mind, start to code the design of this button, and it is impressive the facilities that Tailwind brings us. With a few lines of code we finish the functionality of the first component. This button is used to open/close something, so that thing will change with an action, and this is called State in React, which is a variable like any other in JS, but React looks at this variable and every time it has its value changed it will create the interface of this component again, with this new value.

It is very important for our project to think about accessibility, and this is easier to think about from the beginning of the project, and it serves as an aid for websites, tools and technologies to be designed and developed so that people with or without disabilities can use, navigate, interact and understand the content, with autonomy. In our case, we can navigate the page using the keyboard, but it doesn't warn us when a new element appears on the screen. To fix this,
we can use the tags ARIA, Accessible Rich Internet Applications, that define ways to make web content and applications more accessible to people with disabilities. But we have several libraries in React that make our work easier, like reakit, made by a brazilian, which will be called ariakit; radix-ui, it is also an accessibility library, and headlessui, that we will use in our project, because she is designed to integrate beautifully with Tailwind CSS. Run npm install @headlessui/react in terminal o install and import Popover in our Widget.tsx. The coolest thing is that the popover controls all this part of state, so we don't need to define a function to speak when it's open/closed. Making the necessary modifications, as per the documentation, our project now has several ARIA accessibility.

And so we concluded the first class of this event, in which we learned to configure the development environment, how a SPA and an SSR work, important concepts of React, use and configure Tailwind CSS, rem, use React States, concepts of accessibility, use of different libraries and much more.

New start

Sérgio Roberto Sanchez Filho — Wed, 18 May 2022 18:45:05 +0000

Today I will start two new projects. First is this one here, start registering my evolution as a developer.
Some months ago I started a course of Python and Web Developing using Django Rest Framework, and that was awesome. I learn soo much and I noticed that I want to join this area.
A few weeks ago I participate in an event of Front-End, call
"Next Level Week", introduced by Rocketseat, and I was blown away. I made the Origin trail, and that wasn't the first time I have contact with the Front-End stack, but was the first I made a project till the end, and im very proud of what I made.
Soo I decided to start my Second Project. In the same event, i will join the Impulse trail, and document some of this project. The project is a Feedback Widget, or FeedGet as the tutor said. So let's get it started!