Forem: Cleyson Leal Braga

How to maintain software quality with minimal effort

Cleyson Leal Braga — Wed, 09 Jun 2021 11:47:30 +0000

As software scales, one of the greatest challenges is to maintain quality to match. Luckily we have tools and techniques that can help us

This challenge does not have to be painful, and there are ways to achieve satisfactory results with minimal effort.

Tools

Before looking at more complex techniques, we can implement tools that make our software scale consistently; I usually say that quality software development is when all developers are on the same page, working with consistenty and using standardised procedures.

Linter

Linter is a tool that analyses source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
For example, when you forget a variable that has never been used.
Linting improves readability, code review discussion level, and it looks like the code was written by one person.

Code Formatter

Imagine having to remember the style guide standards like indentation, tabs vs. spaces, line breaking before column count, trailing commas vs. no trailing commas, etc.
We would certainly miss something, no matter how many Linters there are to help us.
For that, the code formatter exists, applying rules automatically for your code to follow the code style.

Test

Writing tests is the best way to know if your code really works
the way it should and helps to find bugs in advance.
Writing tests also helps to improve the implementation and thought process about the architecture you are implementing...

If it is difficult to test, it is difficult to maintain.

Typecheck

Some languages already have Typecheck natively and if you work or have worked with these languages you already know the power that Typecheck gives you.
Whereas other languages, like Javascript, do not have natively, we can use tools like Flow, type-check or typescript - they all have the same mission for your typed code - to avoid passing incorrect strings. For example, to avoid passing a string where there should be a number or if there is any missing value in the object that was passed.
But Typecheck goes far beyond that, also serving as documentation and helping us to think better about the architecture and building of our applications.

Pre-commit

Pre commits are scripts that run all the previous tools to find out if everything is right with your code before committing to your branch, and if something is wrong it will alert you and prevent you from committing something that is not right.

Code Review

It is not a tool but a technique, the code review in my opinion is the one that most helps when keeping all developers on the same page, it also helps in sharing knowledge of the code in addition to preventing architecture problems and errors that the tools did not find.

Maintaining the quality of a software needs to be a priority for every developer who creates and maintains a code base, but using tools to help us should not be painful, I hope these tips help you to keep things in order - that's all folks

Criando temas com custom hook + variáveis CSS 👨‍💻

Cleyson Leal Braga — Wed, 19 May 2021 12:32:30 +0000

Hoje em dia, uma funcionalidade muito requisitada em sites e apps é a aplicação de temas - normalmente usando o tão aclamado “Dark mode”. Com um clique, podemos mudar toda a cor do app/site para um tema escuro. Seus usuários dizem ser mais agradável aos olhos, e até mesmo trazer mais produtividade.

A aplicação de um tema pode ser algo ainda maior, se pensarmos no estilo do site como um tema, trazendo mais flexibilidade e padronização. Mesmo que ainda não exista um modo escuro, por exemplo. Também podemos aplicar técnicas que estão muito em alta, como o design token.

Iniciando o projeto 🚀

Vamos começar iniciando o projeto instalando e criando nossa aplicação usando o create-react-app

$ npx create-react-app theme-app
$ cd theme-app
$ npm start

Com isso, teremos uma estrutura assim:

Podemos excluir os arquivos logo.svg, App.test.js e o App.css. Não precisaremos deles nesse tutorial.

Criando nosso tema ✨

Vamos criar nosso CSS com o tema primeiro, pois vamos precisar dele dentro do custom hook.
Vamos criar o arquivo theme.module.css no caminho

./src/styles/

Inicialmente, vamos criar somente duas variáveis que serão usadas para aplicar as cores que desejamos.

.defaultTheme {
  /* Format: --theme + type + color + variant */

  /* Colors */
  --theme-background-color-primary: #fff;
  --theme-text-color--primary: #333333;
}

.darkTheme {
  /* Colors */
  --theme-background-color-primary: #333333;
  --theme-text-color--primary: #fff;
}

A lógica aqui, é usar o custom hook para trocar a classe do tema - e com isso, os valores das variáveis, aplicando como um todo na aplicação.

Criando nosso custom hook 👨‍💻

Para criar nosso custom hook, vamos usar as API’s de context e useState, arquitetando todas as funcionalidades dentro dele, e exportando somente o que vamos utilizar para controlar a troca de tema.

Vamos criar o nosso arquivo themeContext.js no caminho

./src/contexts/themeContext

Nosso themeContext.js será assim:

import React, { useState, createContext, useContext } from "react";
import styles from "../../styles/theme.module.css";

const themeContext = createContext();

// exportamos o useTheme com as funções que controlam a troca de tema
export const useTheme = () => {

  const context = useContext(themeContext);

  const [isDarkmode, setIsDarkmode] = context;

  const setDarkmodeOn = () => {
    setIsDarkmode(true);
  };

  const setDarkmodeOff = () => {
    setIsDarkmode(false);
  };

  const toggle = () => {
    setIsDarkmode((prev) => !prev);
  };

  return { isDarkmode, setDarkmodeOn, setDarkmodeOff, toggle };
};

// exportamos o ThemeProvider que aplica a classe do tema na div que vai englobar toda a aplicação
export const ThemeProvider = (props) => {
  const [isDarkmode, setIsDarkmode] = useState(false);
  const theme = isDarkmode ? styles.darkTheme : styles.defaultTheme;

  return (
    <themeContext.Provider value={[isDarkmode, setIsDarkmode]}>
      <div className={theme}>{props.children}</div>
    </themeContext.Provider>
  );
};

Aplicando nosso tema ✅

Para usar nosso useTheme, vamos criar uma funcionalidade básica só para entender o fluxo de como as coisas funcionam.

Vamos criar um arquivo chamado Home.js dentro de ./src e também um arquivo chamado styles.module.css dentro de ./src/styles

No Home.js importamos o useTheme para poder usar nossa função de toggle que troca os temas e nossa variável isDarkMode para saber se o dark mode está ligado ou não.

Home.js

import React from "react";
import { useTheme } from "./contexts/themeContext/themeContext";
import styles from "./styles/styles.module.css";

export const Home = () => {
 const { isDarkmode, toggle } = useTheme();

 return (
   <div className={styles.wrapper}>
     <h1>{`Dark mode on? ${isDarkmode}`}</h1>
     <button onClick={toggle}>Trocar tema</button>
   </div>
 );
};

No styles.module.css aplicamos nossas variáveis (design tokens) que aplicam os valores do tema selecionado.

styles.module.css

.wrapper {
 height: 100vh;
 background-color: var(--theme-background-color-primary);
 color: var(--theme-text-color--primary);
}

h1 {
 margin: 0;
}

Agora podemos usar o provider no nosso App.js e chamar nosso componente Home.js

App.js

import { ThemeProvider } from "./contexts/themeContext/themeContext";
import { Home } from "./Home";
export default function App() {
 return (
   <ThemeProvider>
     <Home />
   </ThemeProvider>
 );
}

Resultado 🤩

Conclusão

Usando o context + custom hook fica simples controlar e compartilhar em todo o nosso app os controles de tema, podemos ir além do dark mode e criar outros temas para personalizar nossas aplicações.
Espero que tenham gostado do post e
até a próxima

Leadershipt in dev teams, how to become a tech leader?

Cleyson Leal Braga — Tue, 05 May 2020 20:12:55 +0000

Hello, I've been working as a developer for just over 9 years, and I realized for a while that I like the leadership part, even without being a tech leader, I end up taking responsibilities for myself, managing, giving feedbacks, etc., I would like tips on how to specialize in this area, content (video, books, podcasts) and I would also like to hear your experience with this subject! : D

Best youtube channels to Devs and Designers

Cleyson Leal Braga — Sat, 22 Sep 2018 15:38:29 +0000

It's been a while since I've followed youtube channels about the day to day developers and designers, it's very interesting to see what these people's routine is like in their professional lives.
I came to share some of the ones I accompany, and to know which ones you like :D

Developers

Mayuko

MPJ - Fun fun function

Dev Tips

Wes Bos

Life of Luba

Designers

Charlie Marie

Hello, I`m Alexa

Hello :D

Cleyson Leal Braga — Thu, 08 Feb 2018 11:19:33 +0000

Hello, my name is Cleyson and I'm a Software developer from Brazil!
my english is not very well.. I'm sorry for that.
I'm work with Ruby on Rails, Javascript and Frontend stuffs, I love Design, UX and Psychology, nice to meet you guys :)

my blog (portuguese): cleyson.co