Forem: Alisson Leal

Como eu uso Github Flow no dia a dia como dev

Alisson Leal — Thu, 06 Feb 2025 18:24:13 +0000

O GitHub Flow é uma metodologia de desenvolvimento que simplifica a colaboração e o controle de versão, promovendo um fluxo de trabalho ágil e eficiente.

Através do uso estratégico de branches e pull requests, as equipes podem gerenciar o desenvolvimento de novas funcionalidades, correções de bugs e melhorias de forma organizada e previsível.

Visão Geral do GitHub Flow:

Branch Principal (main): Serve como a versão estável do projeto, refletindo o estado de produção.
Feature Branches: Para cada nova funcionalidade ou correção, cria-se uma branch específica a partir da main.
Commits: As alterações são registradas através de commits claros e descritivos na branch correspondente.
Pull Requests: Após concluir o desenvolvimento ou a correção, abre-se um pull request para revisão e discussão.
Revisão e Merge: Após a aprovação, a branch é mesclada de volta na main, garantindo que apenas código validado seja integrado.
Implantação: A main é implantada em produção, garantindo que as últimas alterações aprovadas estejam disponíveis.

Exemplo Prático:

Abaixo, apresentamos um diagrama que ilustra um fluxo de trabalho seguindo o GitHub Flow:

Análise do Diagrama:

Inicialização do Projeto: O projeto é iniciado com dois commits na branch main: "feat: init project" e "feat: initial settings".
Desenvolvimento da Funcionalidade ABC: Uma nova branch feat/TASK-123 é criada a partir da main. Nessa branch, são realizados dois commits: feat: implement feature ABC e fix: adjust bug on ABC endpoint.
Desenvolvimento da Funcionalidade XYZ: Outro desenvolvedor cria uma nova branch, feat/TASK-124, é criada a partir da main. Nesta branch, são feitos três commits: feat: implement feature XYZ, fix: adjust bug in XYZ screen e test: update tests in XYZ endpoint.
Integração das Funcionalidades: Após o desenvolvimento e testes, as branches de funcionalidades são ~~mergeadas~~ mescladas de volta na main através de pull requests.

Benefícios do GitHub Flow:

Simplicidade: Um fluxo de trabalho linear e fácil de seguir.
Integração Contínua: Facilita a integração contínua de código, reduzindo conflitos.
Colaboração Eficiente: Uso de pull requests para revisão e discussão de código.
Desenvolvimento Ágil: Permite iterações rápidas e entrega contínua de valor.

Ao adotar o GitHub Flow, as equipes de desenvolvimento podem manter um processo organizado e eficiente, garantindo a qualidade e a estabilidade do código em produção.

Fontes:

https://docs.github.com/en/get-started/using-github/github-flow
Experiência prática de desenvolvimento de software.

How to separate your work and personal commits in git (Fix and prevent)

Alisson Leal — Thu, 21 Apr 2022 17:35:24 +0000

You're a developer and you want to separate your work from your personal commits. You want to make sure that you don't accidentally commit to work using your personal email, or even worse, commit to an open source project using your work email.

Surely you know you can use git config user.name "Your Name" and git config user.email "your@email.com" to set your name and email for each project, but that gets tedious and error-prone if you work on a lot of repositories, I'm looking at your microservices each on their own repository and not on a mono-repo.

To fix this is actually very simple.

Fixing wrong email/name in commits

Just run this command in your terminal inside the repository folder, changing the variable WRONG_EMAIL to your wrong email, NEW_NAME to your new name and NEW_EMAIL to your new email.

This only fixes past problems, below this is a more general solution to prevent future problems.

Preventing wrong email/name in commits

Create a work and a personal folder

You must separate your work and personal projects in different folders, I for example have my work folder ~/work and my personal folder ~/personal. All the repositories that I work on are in the ~/work folder. All the repositories that are personal to me are in the ~/personal folder.

Create a gitconfig for each folder

Create a gitconfig file in both folders. The file must contain the following lines:

# ~/work/gitconfig
[user]
  name = "Your Work Name"
  email = "your@work.email"

# ~/personal/gitconfig
[user]
  name = "Your Personal Name"
  email = "your@personal.email"

Setup your global .gitconfig

You probably already have a .gitconfig file in your home folder, but if you don't, just create one in the root of your home folder.
It probably contains the following lines:

[user]
  name = "Your Name"
  # add your email if you will clone a repository in other folders other than your work or personal folder
  email = "your@default.email"

To finish the setup, just add the following lines to your .gitconfig file:

# for your work repositories
[includeIf "gitdir:~/work/**"]
  path = ~/work/gitconfig

# for your personal repositories
[includeIf "gitdir:~/personal/**"]
  path = ~/personal/gitconfig

How it works

When you clone a repository, the .gitconfig file in the root of the repository is read. If the repository is in your work folder, the gitconfig file in the work folder is read. If the repository is in your personal folder, the gitconfig file in the personal folder is read. The best part is if you have different ssh keys for your work and personal git, you can use setup them in each gitconfig file, like this:

# ~/personal/gitconfig
[core]
    sshCommand = ssh -i ~/.ssh/personal
[user]
  name = "Your Personal Name"
  email = "your@personal.email"

# ~/work/gitconfig
[core]
    sshCommand = ssh -i ~/.ssh/work
[user]
  name = "Your Work Name"
  email = "your@work.email"

That's it!

Sources:

man git config inside the includes part
- https://www.git-scm.com/docs/git-config#_includes
https://meleu.sh/git-multiconfig/ in pt-br
https://www.git-tower.com/learn/git/faq/change-author-name-email/

If you wanna check out what I'm currently working on: brapi.dev

Type-Safe Styled-Components Theming for React.js and Next.js 💅

Alisson Leal — Mon, 20 Dec 2021 13:25:31 +0000

We all know and love styled-components and Typescript, but when a library is not typed, it can be difficult to use and seem very hacky. You can and should add the types from @types/styled-components but it doesn't seem to work very well with custom themes. This post will help you with that.

If you tried using styled-components with custom theming, you must've had errors like this:
Styled-Components-Typescript: Property 'backgroundColor' does not exist on type 'DefaultTheme', which is a very common error if you're using a custom theme with Typescript and apparently they don't maintain the types.

There are at least two solutions to this problem:

The official way, which is very manual
The easy way, which everything works automatically

The official way (Very manual)

If you go to the styled-components documentation, you'll see a super small section about Typescript in there, which is fine until you need to make a lot of changes to your theme.

The way it's done in the official documentation to make your theme type-safe is:

Create a declarations file (styled.d.ts)
Import the DefaultTheme from styled-components
Extend it with your custom theme

Something like this:

// import original module declarations
import "styled-components";

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

// source: https://styled-components.com/docs/api#create-a-declarations-file

Then you create a custom theme and reference the DefaultTheme interface you just created, like this:

// myTheme.ts
import { DefaultTheme } from "styled-components";

const myTheme: DefaultTheme = {
  borderRadius: "5px",

  colors: {
    main: "cyan",
    secondary: "magenta",
  },
};

export { myTheme };

// source: https://styled-components.com/docs/api#create-a-theme

It works fine, the problem is that everytime you need to add/remove something from your theme, you'll need to also update the declarations file.

The easy way (very automatic)

The way I do is to just create a custom theme file and then automatically create an interface for it. This way you don't need to update the declarations file everytime you add something to your theme.

The steps are:

Create a custom theme file
Create a declarations file (styled.d.ts)

Create your theme

// myTheme.ts
export const myTheme = {
  borderRadius: "5px",

  colors: {
    main: "cyan",
    secondary: "magenta",
  },
};

Create the declarations file

Here's the fun part. When you create the declarations file, you'll need to import the DefaultTheme from styled-components like before, but instead of creating a new interface, you'll just extend the type of your theme (myTheme) with the DefaultTheme.

// styled.d.ts
import "styled-components";
import { myTheme } from "./theme";

declare module "styled-components" {
  type MyTheme = typeof myTheme;

  interface DefaultTheme extends MyTheme {}
}

I know it's not the most elegant way to do it, but it works.

Using the theme

I know it's not the purpose of this post to explain how to create and use the theme, but I'll do it anyway.

You're probably using React.js, so you have an App.tsx or _app.jsx in Next.js. In that file you just need to create a ThemeProvider and pass your theme to it. Something like this:

// With React.js
import { ThemeProvider } from "styled-components";
import { myTheme } from "./theme";

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <h1>Hello World!</h1>
    </ThemeProvider>
  );
}

export default App;

And for Next.js people, you just need to change a little bit the default _app.tsx file they give you.

// With Next.js
import { ThemeProvider } from "styled-components";
import type { AppProps } from "next/app";
import { myTheme } from "./theme";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={myTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

With that done, you can easily access your theme in your components.

// Box.tsx
import styled from "styled-components";

const BoxContainer = styled.div`
  display: flex;
  border-radius: ${(props) => props.theme.borderRadius};
  color: ${(props) => props.theme.colors.main};
  background-color: ${(props) => props.theme.colors.secondary};
`;

const Box = () => <BoxContainer>Hello World!</BoxContainer>;

Or a more direct approach with object destructuring:

// Box.tsx
import styled from "styled-components";

const BoxContainer = styled.div`
  display: flex;
  border-radius: ${({ theme }) => theme.borderRadius};
  color: ${({ theme }) => theme.colors.main};
  background-color: ${({ theme }) => theme.colors.secondary};
`;

const Box = () => <BoxContainer>Hello World!</BoxContainer>;

Here you can see the autocompletion of the theme in your components without the need to update the declarations file.

I hope this post helped you with your styled-components and typescript problems. If you have any questions, please don't hesitate to ask me in the comments. I'm always happy to help.

If you wanna check out what I'm currently working on: brapi.dev