
Quais são as ferramentas que mais usamos como pessoas desenvolvedoras front-end? Foi pra responder essa pergunta que organizei uma sala no 👋 Clubhouse, com Isadora Stangarlin (do [@papodedev](https://instagram.com/papodedev)) e [Eder Christian](https://instagram.com/ederchristian92). Toda a conversa que tivemos ao vivo foi muito interessante e me fez gastar uma página inteira do caderno só com os nomes das ferramentas citadas.

No Clubhouse as pessoas que estão ouvindo ao vivo podem pedir para participar e falar. Por causa disso, várias pessoas compartilharam suas ferramentas favoritas durante nossa uma hora de conversa.

Como toda pessoa desenvolvedora, usamos um editor de texto ou IDE para escrever boa parte do nosso código. O VS Code foi uma presença unânime como o editor favorito de todo mundo que estava na sala. Acho que não sobra muita dúvida sobre o porquê. Quase todo mundo da sala programava em JavaScript e o VS Code tem muitas ferramentas úteis para essa linguagem. Se me perguntassem no começo de 2020 qual era meu editor de texto favorito, com certeza falaria o Vim. Depois de 5 anos como meu editor padrão, troquei o Vim pelo VS Code quando comecei a programar em TypeScript — simplesmente não dá para ignorar que o VS Code é o melhor editor gratuito para trabalhar em projetos escritos com TypeScript.

Além de falar de editores de texto, também compartilhamos os navegadores que usamos, extensões na web, extensões do VS Code, aplicativos e sites favoritos. Aqui vai uma lista de todas as ferramentas que citamos na conversa:

[Hugo Bessa](https://instagram.com/triangulo_dev):

- [Chrome](https://www.google.com/intl/pt-BR/chrome/): navegador
- [Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb): extensão do Chrome que te deixa navegar pelo site sem utilizar o mouse, com atalhos inspirados pelo Vim
- [VS Code](https://code.visualstudio.com/): editor
- [vim-mode](https://github.com/VSCodeVim/Vim): extensão para emular o Vim dentro do VS Code
- [Figma](https://www.figma.com/): aplicativo gratuito de criação de designs com ferramentas de colaboração em tempo real
- [Codepen](https://codepen.io/): site para prototipação rápida com HTML, JS e CSS
- [Codesandbox](https://codesandbox.io/): editor completo online com ferramentas de execução de código sem instalar nada no seu computador
- [Browsersync](https://browsersync.io/): ferramenta de linha de comando que sincroniza a navegação em um site entre vários dispositivos
- [Dev.to](https://dev.to/): site artigos sobre programação

[Isadora Stangarlin](https://instagram.com/papodedev):

- [Chrome](https://www.google.com/intl/pt-BR/chrome/): navegador
- [VS Code](https://code.visualstudio.com/): editor
- [ColorPick](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg): extensão do Chrome para copiar a cor de qualquer elemento de um site
- [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=pt): extensão do Chrome para limpar todo o cache de um site
- [Cssmatic](http://www.cssmatic.com/): ferramentas para CSS
- [daily.dev](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied): extensão do Chrome que te mostra novidades da área de TI na tela de nova aba
- [Medium](https://medium.com/): site com muitos artigos sobre desenvolvimento
- [Panda](https://usepanda.com/): agregador de conteúdo
- [Udemy](https://www.udemy.com/pt/): plataforma de cursos

[Eder Christian](https://instagram.com/ederchristian92):

- [VS Code](https://code.visualstudio.com/): editor
- [Smashing Magazine](https://www.smashingmagazine.com/): site com ótimos artigos sobre programação, principalmente front-end
- [Vercel.app](https://vercel.app/): serviço para deploy de projetos front-end, ótimo para usar com Next.js
- [Frontend Masters](https://frontendmasters.com/): plataforma de cursos

[João Deroldo](https://instagram.com/joaoderoldo)

- [Emmet](https://code.visualstudio.com/docs/editor/emmet): extensão para escrever HTML rápido

[Daniel Filho](https://twitter.com/danielfilho)

- [Firefox](https://www.mozilla.org/pt-BR/firefox/): navegador
- [Multi Account Container](https://addons.mozilla.org/pt-BR/firefox/addon/multi-account-containers/): extensão do Firefox para isolar cookies e cache de sites
- [Envify](https://addons.mozilla.org/pt-BR/firefox/addon/envify/): extensão do Firefox para colorir o navegador baseado na URL (útil para diferenciar ambientes de desenvolvimento e producão)
- [VS Code](https://code.visualstudio.com/): editor
- [Live Share](https://visualstudio.microsoft.com/pt-br/services/live-share/): extensão do VS Code para fazer paired programming dentro do VS Code
- [All about Next.js](https://www.udemy.com/course/all-about-nextjs/): curso sobre o framework Next.js

[Lucas Viana](https://instagram.com/mechamobau):

- [colorhunt.co](https://colorhunt.co/): site para descobrir paletas de cores
- [getwaves.io](https://getwaves.io/): site para criar "ondas" em SVG, para usar como divisor de seções

[Andre Benatti](https://instagram.com/dotpegaso)

- [mobbin.design](https://mobbin.design/): coleções de inspirações para designs
- [Undesign](https://undesign.learn.uno/): ferramentas para design
- [Photopea](https://www.photopea.com/): site "Photoshop online"
- [uppbeat.io](https://uppbeat.io/): site com músicas sem DRM para utilizar em vídeos ou podcasts

[Násser Yousef](https://instagram.com/nasser.yousefali)

- [animaapp.com](https://www.animaapp.com/): plugin para transformar designs em código e protótipos responsivos
- [animista.net](https://animista.net/): site para criar animações CSS com uma ferramenta visual

Eu não conhecia muitas das ferramentas que o pessoal recomendou nessa conversa no Clubhouse. Dá uma olhada em cada uma e não se esqueça de ver também o perfil no Instagram/Twitter de quem contribuiu. Faltou alguma que você usa muito? [Manda pra mim](https://instagram.com/triangulo_dev).


Extensões, aplicativos, editores, sites e navegadores que desenvolvedores front-end recomendam para facilitar nosso dia-a-dia

Ferramentas Essenciais no Front-end - Undefined #2


Alguns dos métodos do Array já são bastante conhecidos por quem trabalha com JavaScript. Um deles é o `.map`, que tanto usamos para transformar valores em um Array. Entretanto, existem alguns métodos que eu quase nunca vi as pessoas usando, mesmo quando eles seriam perfeitos para o problema que elas estavam tentando resolver.

## `.some`

O método `.some` serve para você verificar se uma condição é verdadeira para pelo menos um valor dentro do Array – um caso de uso bastante comum. O `.some` recebe uma função `callbackFn` que deve testar cada um dos elementos do Array. A `callbackFn` recebe três argumentos:

- `element`: o valor do elemento;
- `index`: o índice deste elemento no Array;
- `array`: o Array sendo testado.

O valor retornado pela `callbackFn` deve ser _convertível_ para `true` ou `false` através da [coerção de tipos](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion).

Para mostrar um exemplo de como usar o método `.some`, criaremos um Array `fruits` e as funções `isApple` e `isKiwi` que testarão se um elemento é uma maçã ou um kiwi.

```js
let fruits = [🍎, 🍏, 🍌, 🍊, 🥥];

function isApple(fruit) {
  return fruit === 🍎;
}

function isKiwi(fruit) {
  return fruit === 🥝;
}
```

Podemos então usar o método `.some` no Array `fruits`, passando como `callbackFn` uma das duas funções que criamos. Esta chamada retornará `true` se as funções retornarem `true` para pelo menos um dos elementos em `fruits`.

```js
fruits.some(isApple); // => true
fruits.some(isKiwi); // => false
```

## `.every`

Parecido com o `.some`, o `.every` é usado para verificar se uma condição é verdadeira para todos os elementos de um Array. Esse método também recebe uma função `callbackFn`, com os mesmo argumentos `element`, `index` e `array`.

No exemplo a seguir, criaremos um Array de objetos com dados sobre pessoas e os testaremos com funções que verificam se os dados delas atendem à uma condição.

```js
let people = [
  { name: "João", age: 20 },
  { name: "Maria", age: 18 },
  { name: "Lucas", age: 22 },
];

function isOverAge(person) {
  return person.age >= 18;
}

function isMaria(person) {
  return person.name === "Maria";
}
```

A função `isOverAge` testará se `person.age` é maior do que `18`. Como esta condição é verdadeira para todos os elementos do Array, o método `.every` retornará `true` com essa condição.

```js
people.every(isOverAge); // => true
```

Já a função `isMaria` testará se `person.name` é `'Maria'`, o que não é verdadeiro para todos os elementos do Array `people`. A chamada do método `.every`, neste caso, retornará `false`.

```js
people.every(isMaria); // => false
```

## `.flat`

Algumas vezes temos um Array que tem outros Arrays dentro dele e precisamos transformar todos esses elementos em um grande Array com apenas um nível de profundidade. O método `.flat` faz exatamente isso. Ele recebe um único argumento opcional `depth`, que pode ser utilizado para configurar o nível de profundidade de sub-Arrays que devem ser concatenados em um único nível.

```js
let arrays = [1, 2, 3, [4, 5], [6, 7, [8, 9]]];

arrays.flat(); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]
arrays.flat(2); // => [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

Como por padrão `depth` é igual a `1`, a primeira chamada ainda retorna um array com um sub-array. Em casos em que você não tem ideia do nível de profundidade dos sub-arrays mas quer ter certeza que todos os elementos estarão em apenas um único nível, você pode passar `Infinity` como argumento para o método `.flat()`.

```js
let arrays = [[[[[[[[[[[1, 2, 3]], [[[[[[4]]]]]]]]]]]]]]];

arrays.flat(Infinity); // => [1, 2, 3, 4]
```

## `.flatMap`

Um dos casos de uso mais comuns para o método `.flat` é utilizá-lo logo após uma chamada ao `.map` que gerou sub-arrays. Podemos utilizar como exemplo exemplo listar todos os amigos (`.friends`) de todas as pessoas (`person`) em um Array.

```js
let people = [
  { name: "João", friends: [{ name: "Gabriel" }, { name: "Laura" }] },
  { name: "Maria", friends: [{ name: "Bruna" }, { name: "Luiza" }] },
  { name: "Rebeca", friends: [{ name: "Gustavo" }] },
];
```

Se usarmos apenas o método `.map` com uma função para retornar todos os amigos de cada uma das pessoas, teríamos um Array com sub-arrays.

```js
function getFriends(person) {
  return person.friends;
}

people.map(getFriends);
/* =>
[
  [{name: 'Gabriel'}, {name: 'Laura'}}],
  [{name: 'Bruna'}, {name: 'Luiza}],
  [{name: 'Gustavo}]
]
*/
```

Já com o método `.flatMap`, este Array retornado pela função `getFriends` será concatenado com os resultados anteriores, retornando um Array com apenas um nível de profundidade.

```js
people.flatMap(getFriends);
/* =>
[
  {name: 'Gabriel'},
  {name: 'Laura'}},
  {name: 'Bruna'},
  {name: 'Luiza},
  {name: 'Gustavo}
]
*/
```

Vale alertar que, ao contrário do método `.flat`, não é possível controlar a profundidade de sub-arrays que serão concatenados em apenas um nível. O método `.flatMap` concatenará elementos em apenas um nível de profundidade.

## `.concat`

Eu sinceramente não sei porquê poucas pessoas utilizam o `.concat`, mas se precisasse apostar seria por causa da grande quantidade de exemplos que vemos utilizando o operador de `spread` (`...`) para juntar elementos de diferentes Arrays em um só.

O método `.concat` pode ser utilizado para concatenar diferentes itens em um único Array. Ele recebe como argumento um ou mais itens que podem tanto ser valores quanto outros Arrays e retorna um novo Array com todos esses itens concatenados.

```js
[1].concat(2); //         => [1, 2]
[1].concat(2, 3); //      => [1, 2, 3]
[1].concat([2, 3]); //    => [1, 2, 3]
[1].concat(2, [3, 4]); // => [1, 2, 3, 4]
```

Sempre que você precisar verificar se um valor é ou não um Array antes de utilizar um operador `spread`, considere usar o método `.concat`.

```js
let item = 3;
[1, 2, ...(Array.isArray(item) ? item : [item])]; // ❌
[1, 2].concat(item); // ✅
```

Como o método `.concat` funciona tanto em valores como em Arrays, também podemos implementar uma função que se comporta como o método `.flat` facilmente:

```js
function flat(array, nestedArray) {
  return array.concat(...nestedArray);
}

flat([1, 2], [3, [4, 5]]); // => [1, 2, 3, 4, 5]
```

No exemplo acima, utilizamos o operador `spread` para usar cada um dos elementos de `nestedArray` como argumentos para a chamada do método `.concat`.

## Continue aprendendo

A classe Array tem muitos métodos úteis para facilitar a sua vida no JavaScript enquanto estiver trabalhando com Arrays. Quando utilizamos métodos como `.some` e `.every`, mostramos muito mais a intenção de um código do que quando os implementamos com loops `for` ou outros métodos mais genéricos como o `.reduce`. Para aprender mais sobre outros métodos disponíveis na classe Array, não deixe de visitar a [referência completa no MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) ou a própria [especificação oficial da classe Array](https://tc39.es/ecma262/#sec-properties-of-the-array-prototype-object).

Se você transforma muitos Arrays no seu código JavaScript e já acha que os métodos da classe Array nem sempre são suficientes, vale a pena usar bibliotecas como o [Lodash](https://lodash.com/).


A classe Array possue muitos métodos que podem facilitar muito a vida de quem trabalha com JavaScript, mas nem todo mundo usa alguns dos seus métodos como .some ou .every.

5 métodos do Array no JS que você deveria usar mais

Hoje usamos CSS para estilizar layouts muito diferentes do que imaginávamos na época que a web foi criada. De tabelas para divs, de floats para Flexbox, as ferramentas disponíveis para criarmos layouts na web evoluíram muito desde os anos 90. Agora, CSS Grid já é suportado em todos os navegadores mais atuais e podemos dizer com segurança que esse é o método de layout mais poderoso que já foi adicionado ao CSS.

O CSS Grid, ao contrário da maioria das outras técnicas para construir layouts, foi criado especificamente para possibilitar os layouts em duas dimensões (2D) que queremos implementar em nossos sites. Juntando cada uma das novas propriedades adicionadas ao CSS, podemos escrever um código de estilos muito claro e intencional. Além disso, os novos conceitos adicionados nos permitem implementar alguns layouts bastante complexos sem perdermos a cabeça ou usarmos vários hacks.

Para criar um contêiner grid, basta usar `display: grid`. Em um contêiner grid, todos os seus filhos diretos se tornam itens grid. Com um contêiner grid em mãos podemos começar a criar layouts usando colunas e linhas.

Neste primeiro exemplo, criaremos uma `div` com a classe `container` com seis elementos dentro.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>
</div>
```

Usando `display: grid`, transformaremos esta `div` em um contêiner grid.

```css
.container {
  display: grid;
}
```

Agora, cada um dos seis elementos que estão dentro do nosso contêiner são itens grid. Por padrão, temos apenas uma coluna, acompanhada de linhas criadas automaticamente para cada elemento. Nada muito diferente do que veríamos em uma `div` normal.

![Grid com valores padrão](/posts/css-grid-o-que-voce-precisa-saber/grid-com-valores-padrao.png)

## Trabalhando com colunas

Para criar colunas, usaremos a propriedade `grid-template-columns`, que recebe os valores de tamanho de cada coluna separados por espaço. Podemos, por exemplo, criar duas colunas com `200px` cada.

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px;
}
```

Agora, todos os nossos elementos estarão distribuídos entre duas colunas de um tamanho fixo. Usando `grid-template-columns` podemos implementar muitos outros layouts, misturando diferentes valores de tamanho.

![Contêiner grid com `grid-template-columns: 200px 200px`](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-200-200.png)

Podemos, por exemplo, criar um layout em que a primeira coluna ocupa um espaço fixo e a segunda ocupa todo o resto do espaço disponível. Isto é possível usando a unidade `fr`, introduzida exatamente para ser utilizada como valor de tamanho para linhas e colunas em contêineres grid.

```css
.container {
  display: grid;
  width: 500px;
  grid-template-columns: 150px 1fr;
}
```

![Contêiner grid com `grid-template-columns: 150px 1fr`](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-150-1fr.png)

A unidade `fr` representa uma **fr**ação do espaço livre disponível em uma linha ou coluna. Podemos misturar diversos valores `fr` para formar layouts automáticos que respeitam certas proporções.

```css
.container {
  display: grid;
  width: 500px;
  grid-template-columns: 2fr 1fr;
}
```

No exemplo acima, todo o espaço disponível será dividido entre duas colunas: a primeira terá o tamanho de 2/3 o espaço total disponível e a segunda 1/3.

![Contêiner grid com `grid-template-columns: 2fr 1fr`](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-2fr-1fr.png)

## Criando linhas com CSS Grid

Até agora trabalhamos apenas com colunas. Mas o real poder do CSS Grid se mostra quando usamos linhas e colunas em conjunto.

Para definir linhas no CSS Grid podemos usar a propriedade `grid-template-rows`. Da mesma forma que declaramos colunas com `grid-template-columns`, declararemos linhas usando valores separados por espaço.

```css
.container {
  display: grid;
  height: 300px;
  grid-template-rows: 3fr 1fr 3fr;
}
```

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

Dentro do nosso contêiner grid agora teremos 3 linhas declaradas com os valores de `3fr`, `1fr` e `3fr`. Assim como nossas colunas, o tamanho das linhas que acabamos de criar no nosso contêiner grid preenchem o espaço disponível proporcionalmente.

Juntando `grid-template-columns` com `grid-template-rows`, criaremos nosso primeiro contêiner grid em duas dimensões.

```css
.container {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 50px 1fr;
}
```

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>
</div>
```

![Contêiner grid com duas colunas e três linhas](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-rows.png)

Agora temos a combinação de duas colunas de tamanhos `2fr` e `1fr` com três linhas de tamanhos `1fr`, `100px` e `1fr`. Com apenas três declarações CSS, conseguimos criar um layout altamente flexível e bastante difícil de replicar com qualquer outra técnica CSS. **É na combinação de colunas, linhas e tamanhos flexíveis que CSS Grid se destaca de tudo o que já existiu** e põe na mão das pessoas que desenvolvem um poder imenso para criar layouts.

## Adicionando espaço entre itens grid

Mas… e se quiséssemos adicionar um espaço entre todas essas linhas e colunas? Normalmente conhecido como “gutter”, esse espaço pode ser declarado usando a propriedade `gap`.

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 100px 1fr;
  gap: 20px;
}
```

`gap` é uma forma abreviada de declarar os valores de `column-gap` (que define o espaço entre colunas) e `row-gap` (que define o espaço entre linhas). Para declarar valores diferentes podemos adicionar um segundo valor de tamanho (`gap: 10px 20px`) ou então escrever `column-gap` e `row-gap` separadamente.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 100px 2fr;

  gap: 10px 20px;
  /* ou então */
  column-gap: 10px;
  row-gap: 20px;
}
```

![Contêiner grid com `gap: 10px 20px;`](/posts/css-grid-o-que-voce-precisa-saber/gap-10px-20px.png)

Usando apenas essas três propriedades, podemos implementar uma quantidade gigantesca de interfaces de usuário que antes envolveriam muito mais trabalho manual.

# Explorando a grid implícita

Nem sempre todo o conteúdo de um contêiner grid será previsível. E se tivéssemos uma lista dinâmica? Começaremos vendo o que acontece quando temos mais itens do que o nosso conjunto de linhas e colunas comporta.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>

  
  <div>Sete</div>
  <div>Oito</div>
  <div>Nove</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 100px 1fr;
  gap: 10px;
}
```

![Elementos "Sete", "Oito" e "Nove" na grid implícita](/posts/css-grid-o-que-voce-precisa-saber/grid-implicita.png)

Os elementos “Sete”, “Oito” e “Nove” continuam organizados em colunas como os anteriores, mas eles já não seguem as mesmas regras para o tamanho das linhas. Isso acontece porque quando temos mais elementos do que células no nosso contêiner grid, os elementos que sobram criam novas células implícitas que ocupam as colunas disponíveis e criam novas linhas que não tinham sido declaradas.

O DevTools (ferramentas de desenvolvimento) do Firefox nos permite ver exatamente o que está acontecendo por baixo dos panos.

![Firefox DevTools com grid implícita](/posts/css-grid-o-que-voce-precisa-saber/grid-implicita-firefox.png)

As linhas representam a parte explícita do nosso grid. O tracejado representa a parte implícita, criada automaticamente para comportar o excesso de elementos.

Assim como temos `grid-template-columns` e `grid-template-rows` para controlar o grid explícito, podemos usar `grid-auto-columns` e `grid-auto-rows` para definir como o nosso grid implícito será disposto.

```css
.container {
  display: grid;
  gap: 10px;

  /* grid explícito */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 100px 100px 100px;

  /* grid implícito */
  grid-auto-rows: 50px;
}
```

Com o uso de `grid-auto-rows: 50px` definimos agora que todas as novas linhas terão `50px` de tamanho. A propriedade `grid-auto-rows` aceita muito mais do que apenas um valor. Se adicionarmos outros valores separados por espaço à essa declaração, podemos controlar de forma intercalada o tamanho de nossas linhas implícitas.

```css
.container {
  display: grid;
  gap: 10px;

  /* grid explícito */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 80px 80px 80px;

  /* grid implícito */
  grid-auto-rows: 50px 80px;
}
```

![Grid implícita `grid-auto-rows: 50px 80px`](/posts/css-grid-o-que-voce-precisa-saber/grid-auto-rows-50-80.png)

## Definindo a direção do fluxo de um contêiner grid

Por padrão, cada elemento em um contêiner grid automaticamente cria um nova linha. Então um contêiner grid com três elementos dentro dele teria uma coluna e três linhas.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

```css
.container {
  display: grid;
}
```

Como não declaramos nenhuma coluna ou linha com `grid-template-columns` ou `grid-template-rows`, toda a grid será implícita.

Cada elemento no nosso grid cria uma nova linha. Para mudar este comportamento e criar colunas, basta usar `grid-auto-flow: column`.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

```css
.container {
  display: grid;
  grid-auto-flow: column;
}
```

![Contêiner grid com `grid-auto-flow: column`](/posts/css-grid-o-que-voce-precisa-saber/grid-auto-flow-row.png)

Juntando `grid-auto-flow`, `grid-auto-columns` e `grid-auto-rows`, podemos criar layouts automáticos que guiam o conteúdo dinâmico para seguir um padrão que definimos. Um dos [três hábitos para escrever CSS escalável](https://triangulo.dev/posts/tres-habitos-css-escalavel) é deixar o conteúdo fluir para acomodar mudanças que nem sempre conseguimos prever enquanto estamos desenvolvendo.

## Continue aprendendo

O CSS Grid é uma ferramenta muito poderosa para criar layouts em duas dimensões. Neste artigo exploramos apenas uma pequena parte de todas as suas capacidades. Ainda faltou cobrir propriedades de alinhamento e distribuição de itens grid, formas de criar layouts responsivos com colunas e linhas automáticas, áreas, sobreposição de elementos e muito mais. Não deixe de conferir o [Basic Concepts of grid layout (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) para um tour completo pelas funcionalidades do CSS Grid ou o excelente [Complete Guide to Grid (css-tricks.com)](https://css-tricks.com/snippets/css/complete-guide-grid/).

Nosso Guia de Estudos CSS também conta com uma [seção dedicada para o CSS Grid](https://trello.com/c/Vf40uwRL/13-css-grid). Bons estudos!

CSS Grid é a ferramenta mais poderosa para criar layouts com CSS. Aprenda como utilizá-la com exemplos práticos e visuais.

CSS Grid: o básico que você precisa saber - display: grid;


O Flexbox é um dos módulos do CSS criados para facilitar a vida de quem precisa criar layouts na web. Com ele é possível controlar o tamanho, alinhamento e distribuição de um contêiner e seus elementos-filhos (chamados de itens). Esse conjunto de ferramentas torna o Flexbox extremamente capaz de resolver problemas de layout em uma dimensão.

Antes do Flexbox era bastante comum ouvir uma história de alguém que não conseguiu centralizar um elemento com CSS, já que as ferramentas de layout padrão (`block` e `inline`) não lidam muito bem com o alinhamento e distribuição de elementos. Outro problema bastante comum era não conseguir facilmente tornar o tamanho de um elemento flexível, já que a única forma de fazer isso era usando unidades em porcentagem e fazendo cálculos manuais com elas.

Este post de introdução vai te mostrar os principais conceitos por trás desse poderoso módulo do CSS e como utilizá-lo para estilizar seus projetos na web. Vamos começar criando um contêiner _flex_.

## Criando um contêiner _flex_

Para criar um contêiner _flex_, você precisa apenas utilizar `display: flex` em um elemento.

```css
.elemento {
  display: flex;
}
```

Ao aplicar a regra `display: flex`, o elemento se tornará um contêiner _flex_ e seus elementos-filhos serão do tipo _flex_. Do lado de fora, um contêiner _flex_ não é diferente de um outro elemento _block_, mas o comportamento de seus elementos-filhos é completamente modificado.

**Dica:** Isso pode ser explicado na especificação [Display Module Level 3](https://www.w3.org/TR/css-display-3/), que diz que a propriedade `display` especifica dois tipos de _display_: o externo e o interno. Usar `display: flex` é, então, a forma curta de `display: block flex`, que define o display do contêiner em si como `block` e de seus elementos-filhos como `flex`.

## Alinhando elementos com Flexbox

A partir do momento que você tem um contêiner _flex_, seus elementos serão dispostos ao longo do **eixo principal**, formando uma linha. Usando a propriedade `flex-direction`, podemos trocar a direção do eixo principal com `flex-direction: column`, onde o elementos formarão uma coluna. O padrão para esta propriedade é `flex-direction: row`.

```css
.container-row {
  display: flex;
  flex-direction: row; /* o eixo principal será uma linha */
}

.container-column {
  display: flex;
  flex-direction: column; /* o eixo principal será uma coluna */
}
```

![Conteiner flex e seus
eixos](/posts/introducao-flexbox/conteiner-flex.png)

A propriedade `flex-direction` recebe também valores que inverterão a ordem de disposição dos elementos de um contêiner _flex_: `row-reverse` e `column-reverse`.

![flex-direction com valores row, row-reversed, column e column-reversed](/posts/introducao-flexbox/flex-direction.png)

Para alinhar os elementos ao longo dos dois eixos, utilizamos três propriedades de alinhamento: `justify-content`, `align-items` e `align-content`.

### `justify-content`

A propriedade `justify-content` define o alinhamento do conteúdo do contêiner _flex_ ao longo de seu eixo principal. Cada um de seus possíveis valores afetará o alinhamento de todo o conteúdo, resolvendo o antigo problema de centralizar elementos ou distribuí-los de forma igual.

Seu valor padrão é `flex-start`, que define que o conteúdo será alinhado a partir do começo do eixo principal.

![justify-content flex-start](/posts/introducao-flexbox/justify-content-flex-start.png)

O valor `flex-end` define que o conteúdo será alinhado a partir do final do eixo principal.

![justify-content flex-end](/posts/introducao-flexbox/justify-content-flex-end.png)

Usando `center`, o conteúdo será alinhado ao centro do eixo principal.

![justify-content center](/posts/introducao-flexbox/justify-content-center.png)

Um outro valor bastante útil é o `space-between`, que alinha o conteúdo ao longo do eixo principal e adiciona um espaço padrão entre todos os elementos.

![justify-content space-between](/posts/introducao-flexbox/justify-content-space-between.png)

Já o `space-around` adiciona um espaço ao redor de todos os elementos.

![justify-content space-around](/posts/introducao-flexbox/justify-content-space-around.png)

Parecido com o `space-around`, o `space-evenly` adiciona um espaço ao redor de todos os elementos de forma igual, incluindo os das pontas.

![justify-content space-evenly](/posts/introducao-flexbox/justify-content-space-evenly.png)

Existem também [outros valores para `justify-content`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/justify-content) que não cobriremos neste artigo: `start`, `end`, `left` e `right`.

### `align-items`

Para alinharmos elementos ao longo do eixo transversal de um contêiner _flex_, usamos a propriedade `align-items`. Os seus valores principais são: `stretch`, `flex-start`, `flex-end`, `center`, e `baseline`.

`stretch` é o valor padrão para `align-items`. Traduzindo para português, "_stretch_" significa "esticar". Então, por padrão, os elementos serão esticados para ocupar todo o espaço disponível no eixo transversal. Isso é muito útil quando queremos que todos os elementos tenham o mesmo tamanho quando o conteúdo interno deles é diferente.

![align-items stretch](/posts/introducao-flexbox/align-items-stretch.png)

Com `flex-start`, todos os elementos do contêiner _flex_ se alinharão a partir do início do eixo transversal.

![align-items flex-start](/posts/introducao-flexbox/align-items-flex-start.png)

Já o `flex-end` definirá que os elementos se alinhem a partir do final do eixo transversal.

![align-items flex-end](/posts/introducao-flexbox/align-items-flex-end.png)

Usando o valor `center`, todos os elementos serão alinhados a partir do centro do eixo transversal.

![align-items center](/posts/introducao-flexbox/align-items-center.png)

O valor `baseline` distribuirá os elementos de certa forma que seus _baselines_ se alinhem ao longo do eixo transversal.

![align-items baseline](/posts/introducao-flexbox/align-items-baseline.png)

Neste artigo não cobriremos alguns dos [outros valores possíveis para `align-items`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-items) como: `start`, `self-start`, `end`, `self-end`, e os modificadores `safe` e `unsafe`.

### `align-content`

Ao invés de alinhar os elementos, é possível também alinhar todo o conteúdo de um contêiner _flex_ no eixo transversal. A propriedade `align-content` é menos utilizada que a `align-items`, mas muito útil em situações em que o contêiner _flex_ tem um tamanho pré-definido (`100vh` por exemplo) e não sabemos com antecedência o tamanho de todos os elementos-filhos.

O valor padrão para esta propriedade é `normal`, que funciona como se nenhum valor tivesse sido definido.

Com `flex-start`, o conteúdo será alinhado ao início do eixo transversal. Já `flex-end` alinhará o conteúdo do contêiner _flex_ ao final. Usando `center`, o conteúdo será alinhado ao centro.

![align-content flex-start, flex-end e center](/posts/introducao-flexbox/align-content-flex-start-end-center.png)

Também podemos utilizar o valor `space-between` para adicionar espaçamento entre as linhas de conteúdo, `space-around` para espaçamento ao redor destas linhas e `space-evenly` para espaçamento igual ao redor das linhas de conteúdo incluindo as pontas.

![align-content space-between, space-around e space-evenly](/posts/introducao-flexbox/align-content-space.png)

O valor `stretch` fará com que as linhas de conteúdo se estiquem para tomar todo o espaço disponível no eixo transversal.

![align-content stretch](/posts/introducao-flexbox/align-content-stretch.png)

Neste artigo não cobriremos alguns dos [outros valores possíveis para `align-content`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-content) como: `start`, `end` e os modificadores `safe` e `unsafe`.

### `align-self`

Podemos também utilizar `align-self` em elementos _flex_ para alterar seu alinhamento no eixo transversal de forma independente.

![align-self](/posts/introducao-flexbox/align-self.png)

A propriedade `align-self` recebe os mesmos valores que `align-items` ou `align-content`.

## Quebrando o conteúdo em novas linhas ou colunas

Por padrão, os elementos-filhos de um contêiner _flex_ serão dispostos ao longo dos eixos, sem quebrarem em novas linhas e colunas. Para controlar este comportamento, podemos utilizar a propriedade `flex-wrap`.

O valor padrão para esta propriedade é `nowrap`, que define que os elementos serão dispostos em uma única linha.

`wrap` definirá que os elementos irão ocupar novas linhas, em direção ao fim do eixo transversal.

Já o valor `wrap-reverse` especifica que os elementos irão ocupar novas linhas em direção ao início do eixo transversal

![flex-wrap](/posts/introducao-flexbox/flex-wrap.png)

## Definindo tamanhos flexíveis para os elementos _flex_

Além de ferramentas para distribuir e alinhar elementos-filhos em um contêiner _flex_, o Flexbox também tem propriedades para auxiliar na definição do tamanho de elementos. Assim como o nome deixa a entender, o forte dessas propriedades é poder escolher valores flexíveis. Com `flex-grow`, `flex-shrink` e `flex-basis` aplicados a um elemento-filho _flex_, podemos controlar o seu tamanho dentro um contêiner _flex_ e como ele lida com a sobra ou falta de espaço.

### `flex-grow`

A propriedade `flex-grow` recebe como valor um número que represente o "fator de crescimento". Esse número define como o elemento-filho reagirá à sobra de espaço em um contêiner _flex_. A sobra de espaço é calculada pelo o tamanho total do contêiner _flex_ menos o espaço base total ocupado pelos elementos-filhos. Por padrão, o valor de `flex-grow` é `0`.

Para entender um pouco melhor como essa propriedade funciona na prática, vamos utilizar um exemplo. Em um contêiner _flex_ com `300px` de tamanho, temos três elementos-filhos com `100px` de tamanho. Os dois primeiros têm o valor de `flex-grow: 1` e o terceiro tem o valor de `flex-grow: 2`. Nesse exemplo, teríamos uma sobra de espaço de `200px` que seria distribuída entre os três elementos-filhos de acordo com os seus fatores, de forma que no final o espaço ocupado por eles seja igual ao tamanho do contêiner. Já que o terceiro elemento tem um fator de crescimento `2`, e os dois primeiros têm um fator de crescimento `1`, o terceiro elemento crescerá duas vezes mais do que os outros dois.

![flex-grow](/posts/introducao-flexbox/flex-grow.png)

### `flex-shrink`

Assim como podemos tornar flexível o crescimento dos elementos-filhos, podemos também utilizar `flex-shrink` para definir os seus fatores de encolhimento.

Quando faltar espaço em um contêiner _flex_, os seus elementos-filhos são encolhidos de acordo com o fator de encolhimento. Por padrão, o valor de `flex-shrink` é `1`.

![flex-shrink](/posts/introducao-flexbox/flex-shrink.png)

### `flex-basis`

O tamanho dos elementos em um contêiner _flex_ é calculado também de forma flexível. Por padrão, esse tamanho é calculado de acordo com o tamanho do conteúdo do elemento ou pelo seu `width` ou `height`. Esse valor padrão ajuda a pessoa desenvolvedora a criar interfaces que se adaptam ao tamanho do conteúdo, mas pode ser um tanto confuso para quem não espera esse comportamento

![flex-basis auto](/posts/introducao-flexbox/flex-basis-auto.png)

A propriedade `flex-basis` pode ser alterada de seu valor padrão `auto` para qualquer unidade de medida de tamanho e porcentagem. Se o elemento tiver `width` ou `height` definidos e um `flex-basis` for definido, o valor de `flex-basis` tomará precedência no cálculo do tamanho base de um elemento _flex_.

![flex-basis com valores numéricos](/posts/introducao-flexbox/flex-basis-numero.png)

## Ordenando elementos-filhos de um contêiner _flex_

Outra propriedade que o Flexbox adicionou ao CSS foi a `order`, que controla a ordem dos elementos-filhos em um contêiner _flex_. Elementos em um contêiner serão ordenados de forma ascendente baseados no valor de `order` e sua posição no DOM.

O valor padrão de `order` é `0`. Você pode definir `order` com qualquer número inteiro.

![order](/posts/introducao-flexbox/order.png)

Vale alertar que a ordenação através de valores `order` não altera a ordenação desses elementos no DOM, o que cria uma diferença na ordem real dos elementos e sua ordem de exibição. Isso é um problema no uso da navegação por teclado, mas um problema ainda maior para usuários de softwares de leitura de tela. Evite utilizar `order` se a ordenação tiver efeitos hierárquicos que prejudicariam a acessibilidade do seu site.

## Suporte em diferentes navegadores

O Flexbox é suportado por grande parte dos navegadores. Mesmo assim, alguns bugs podem quebrar ou mudar o comportamento dos seus elementos de um navegador para outro. O projeto [flexbugs](https://github.com/philipwalton/flexbugs) possui uma lista de mais de 10 bugs, com dicas de como contorná-los.

Fora estes bugs, você pode esperar que o seu site estilizado com Flexbox seja renderizado corretamente em todos os navegadores mais utilizados do mercado. O site Can I Use [lista o módulo CSS de Flexbox](https://caniuse.com/flexbox) como sendo suportado nos navegadores de mais de 97% dos usuários no mundo.

## Continue aprendendo

Todas essas ferramentas do módulo CSS Flexbox trouxeram uma quantidade enorme de controle e flexibilidade para estilizar componentes e layouts com CSS. Em breve escreveremos um outro post com exemplos práticos utilizando todas as propriedades que cobrimos nesta introdução. Por enquanto, você pode dar uma olhada no [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/) para ver como o Flexbox resolve problemas clássicos de layout ou então jogar o [Flexbox Froggy](https://flexboxfroggy.com/) para aprender na prática.

Para escrever este post eu utilizei diversas referências, incluindo a especificação da W3. Para continuar aprendendo sobre Flexbox, recomendo:

- [Conceitos básicos do Flexbox (developer.mozilla.org)](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox)
- [A guide to Flexbox (css-tricks.com)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [What Happens When You Create A Flexbox Flex Container? (smashingmagazine.com)](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
- [CSS Flexible Box Layout Module Level 1 (w3.org)](https://www.w3.org/TR/css-flexbox-1/)

_Obrigado Jonathan Zanella por toda a ajuda na revisão e edição deste post._


Aprenda a utilizar o Flexbox para criar layouts com CSS, usando este guia ilustrado com todas as suas propriedades.

Guia completo de Flexbox - display: flex;


**A Jamstack é uma arquitetura criada para construir sites mais rápidos, que escalam com facilidade e que são mais seguros. Antes mais conhecidos como "sites estáticos", esses sites são geralmente um conjunto de arquivos HTML, CSS e JS que conversam com o servidor apenas quando necessário.**

Um dos motivos para a Jamstack estar se tornando tão popular é a explosão de ferramentas poderosas que permitem criar sites que vão além do que tradicionalmente sites "estáticos" faziam. Agora existem diversos CDNs especializados em entregar esses sites rapidamente para usuários de qualquer lugar do mundo, ferramentas para integração e publicação contínua, CMSs Headless perfeitos para sites Jamstack e ferramentas para criá-los sem dor de cabeça.

Neste guia completo para iniciantes, eu vou te explicar os porquês de usar esta arquitetura, ferramentas para construir e publicas sites Jamstack e também suas desvantagens.

## Arquitetura de um site JAMStack

Sites Jamstack utilizam uma arquitetura diferente de sites que utilizam um servidor backend tradicional. Sites que utilizam servidores – como Wordpress, Laravel ou Rails – geram uma resposta para cada vez que um usuário requisita uma nova página. Já sites Jamstack têm todas as suas páginas pré-renderizadas antes de serem publicadas e podem ser servidos diretamente de uma Content Delivery Network (CDN) assim como já fazemos com imagens, vídeos e outros arquivos estáticos.

O fato de sites Jamstack serem compilados para arquivos estáticos não os torna menos capazes do que sites renderizados no servidor. Um grande motivo para o pessoal da [Netlify](https://www.netlify.com/) ter criado o termo "Jamstack" foi fugir do termo "estático" – como disse Mathias Biilmann [em um episódio do _JAMStack Radio_](https://www.netlify.com/blog/2016/09/15/the-jamstack-origin-story/). Usando JavaScript e consumindo APIs, sites Jamstack são bastante dinâmicos e utilizam de arquivos estáticos apenas como uma forma de remover a necessidade de um servidor mais complexo.

As ferramentas utilizadas para criar sites Jamstack são comumente chamadas de geradores estáticos. Os geradores estáticos mais utilizados são o Hugo, Next.js e Gatsby. Para gerenciar o conteúdo destes sites, normalmente utiliza-se arquivos Markdown ou um Headless CMS.

## Por que construir um site usando Jamstack?

A primeira vantagem de utilizar esta arquitetura é a **performance**. Como o frontend já foi pré-renderizado antes da publicação e estes arquivos normalmente são servidos direto de uma CDN, o tempo de resposta de um site Jamstack tende a ser muito baixo. Utilizando ferramentas modernas como [Gatsby](#gatsby), o JavaScript utilizado dentro de cada página é altamente otimizado e leve – assim como o CSS é reduzido a apenas o necessário. É inclusive bastante comum ver sites Jamstack atingirem altas pontuações no [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=pt-br).

Uma outra vantagem de uma arquitetura baseada em arquivos estáticos é a **escalabilidade**. Enquanto sites tradicionais baseados em um servidor dinâmico dependem de camadas de cache para entregar páginas com rapidez em momentos de altas cargas de tráfego, sites Jamstack já foram pré-renderizados. Também não é necessária a criação de lógicas complexas de invalidação de cache, já que a arquitetura e os geradores estáticos tomam conta disto por você.

Como sites Jamstack são publicados como uma coleção de arquivos estáticos, eles também são **facilmente portáveis** para diferentes provedores como AWS, Netlify, Vercel e Google Cloud Platform.

## Principais ferramentas para construir um site Jamstack

Nos últimos anos muitas ferramentas surgiram para construir sites com esta arquitetura, incluindo o Next.js, Gatsby, Hugo e outros geradores estáticos. Existem opções para quem quer criar sites utilizando frameworks JavaScript como React e Vue ou até geradores estáticos com engines de templates mais tradicionais como Hugo e Jekyll.

Escolher entre todas essas ferramentas pode ser uma tarefa bastante difícil. Abaixo eu trouxe uma lista com as opções mais comuns e que eu recomendo para seu próximo projeto. Além destas três, existem muitas outras ferramentas listadas em [jamstack.org/generators/](https://jamstack.org/generators/).

### Next.js

O [Next.js](https://nextjs.org/) evoluiu muito desde sua primeira versão. Na minha opinião, ele é agora a ferramenta mais versátil para criar sites Jamstack. Criado pela Vercel, o Next.js é um framework JavaScript bastante conhecido que usa como base o React e o Node.js.

Com uma arquitetura simples e ferramentas de compilação pré-configuradas, você rapidamente poderá criar sites Jamstack com o Next.js. Além de páginas pré-renderizadas, você pode utilizá-lo também para criar páginas geradas no servidor e até rotas de API com Serverless Functions.

Toda a complexidade de configurar ferramentas como Webpack e Babel, otimizar bundles para publicar em produção, configurar um servidor para renderizar componentes React e criar todo um backend para algumas pequenas rotas de API somem ao usar o Next.js.

Se você utiliza Vue ao invés de React, também vale a pena conferir o [Nuxt.js](https://nuxtjs.org/).

### Gatsby

O [Gatsby](http://gatsbyjs.com/) é uma abordagem diferente para criar sites com React. Sua ideia principal é juntar uma arquitetura baseada em plugins com o poder do GraphQL (uma linguagem de consulta de dados).

Com mais de 2000 plugins, é bastante simples integrar o Gatsby com diferentes fontes de dados como arquivos Markdown, Headless CMSs, planilhas, e bancos de dados. Após adicionar e configurar um plugin, estes dados estarão disponíveis no GraphQL.

Assim como o Next.js, o Gatsby faz um grande trabalho por você para exportar um site Jamstack com alta performance sem que você tenha que passar muito tempo configurando o processo de compilação.

O [sistema de temas do Gatsby](https://www.gatsbyjs.com/plugins/?=gatsby-theme) também é bastante interessante. Temas do Gatsby juntam configurações e plugins em um único pacote, oferecendo uma forma ainda mais simples de criar sites como blogs, lojas e wikis.

### Hugo

Mais como um gerador de sites tradicional, o [Hugo](https://gohugo.io) é um projeto em Go criado para ser extremamente rápido e versátil para criar sites estáticos.

Sem instalar plugins você pode trabalhar com diversos tipos de conteúdo, taxonomias e conteúdo dinâmico de APIs. Além disso, o sistema de templates do Hugo é recheado de utilitários para criar layouts diferentes para cada página, trabalhar com SEO, internacionalização e até exportar o seu projeto para JSON ou AMP.

Existe uma grande quantidade de temas para Hugo, que vão desde os criados para sites pessoais até temas para criação de apresentação de slides. Ao contrário do Gatsby e do Next.js, Hugo não usa React como sua linguagem de templates o que pode ser uma grande vantagem para quem não planeja muitas interações renderizadas no lado do navegador ou não quer prender o seu site nesta biblioteca JavaScript.

## Os melhores Headless CMSs para seu projeto

Para o conteúdo que preenche os sites Jamstack, é bastante comum utilizar um Headless CMS. Estes CMSs são diferentes de CMSs mais tradicionais como o WordPress já que eles não tocam na implementação da interface de usuário que mostrará o conteúdo. Em vez disso, eles oferecem uma API para que você possa consumir e renderizar o conteúdo por conta própria.

A grande vantagem de utilizar um Headless CMS é separar bem a criação do conteúdo do código do site. Dessa forma, times diferentes dentro de um projeto podem trabalhar no código e no conteúdo. Headless CMSs também tendem a ser bastante flexíveis em como você pode organizar o conteúdo e oferecem hospedagem de arquivos como imagens e vídeos.

Alguns destes CMSs são o Netlify CMS, Strapi e Ghost. Você pode conferir uma lista completa em [jamstack.org/headless-cms/](https://jamstack.org/headless-cms/).

### Netlify CMS

Feito pela empresa que cunhou o termo Jamstack e têm trabalhado para difundir esta arquitetura, o [Netlify CMS](https://www.netlifycms.org/) é uma solução prática para criar conteúdo para sites Jamstack. Nele todo o seu conteúdo é armazenado dentro de um repositório git, te permitindo controlar o versionamento de conteúdo integrado com o código.

Além de ser open-source com uma licença MIT, o Netlify CMS pode ser extendido para acomodar as necessidades de edição de conteúdo do seu projeto. Como ele roda como um webapp embutido em seu site, você não precisa de um servidor para hospedá-lo.

### Strapi

Uma opção ainda mais poderosa para usar como Headless CMS é o [Strapi](https://strapi.io/). Com um plano gratuito praticamente completo e seu código-fonte open-source, o Strapi é uma boa alternativa para você auto-hospedar um Headless CMS.

Dentre as suas funcionalidades estão tipos de conteúdo ilimitados, APIs REST e GraphQL, armazenamento de arquivos e mídia, assim como controles de acesso de usuários. Você pode hospedar sua instância do Strapi em servidores de sua escolha como na AWS, Digital Ocean ou Heroku.

### Ghost

Mais um projeto de código aberto, o [Ghost](https://ghost.org/) é um CMS tradicional que também oferece APIs para consumo de conteúdo por geradores de sites Jamstack.

Além de poder criar seu conteúdo, escolher um tema, gerar seu site e hospedá-lo com o serviço de hospedagem oficial, você pode controlar tudo por conta própria assim como no Netlify CMS e Strapi. A grande diferença entre eles e o Ghost é que ele é bastante especializado em criar sites no estilo de blogs ou publicações de jornal.

O Ghost também conta com uma [grande quantidade de integrações](https://ghost.org/integrations/) para facilitar a sua vida e permitir que você construa um site bastante completo sem ter que sequer escrever uma única linha de código.

## Como publicar sites Jamstack

Sites Jamstack podem assumir diversas formas, dependendo das funcionalidades que você implementar e das ferramentas que utilizar. Porém, você provavelmente não precisará muito mais do que uma CDN para hospedá-los. Algumas boas opções de serviços que se especializaram em hospedar este tipo de sites são: [Netlify](https://www.netlify.com/) e [Vercel](https://vercel.com/).

As duas plataformas são muito similares e oferecem uma forma fácil de criar fluxos de integração contínua para seu repositório git e publicar arquivos estáticos ou funções serverless em produção. Com diversas funcionalidades configuradas por você, é relativamente simples apontar uma destas plataformas para o repositório do seu projeto, definir um domínio e publicar seu site.

Uma das funcionalidades que mais me chamou atenção nos dois foi o "deploy atômico". Para cada commit no seu repositório, o Netlify e o Vercel criam um novo deploy e um link que pode ser acessado pra sempre. Isso torna simples pré-visualizar mudanças antes de irem para produção ou comparar diferentes versões antigas do seu site.

Além dos serviços oferecidos pelos dois, a Netlify se destaca com alguns adicionais. Lá você pode criar fluxos de otimização de arquivos como .html e imagens, testes A/B, integrar com um Analytics do lado do servidor, implementar autenticação e até guardar dados de formulários sem criar APIs manualmente.

Apesar destas platformas tornarem muito fácil a publicação de sites Jamstack, você não precisa utilizá-las. Em vez de uma plataforma tudo-em-um, pode fazer sentido para você publicar e hospedar o seu site em lugares como na AWS S3 ou até em VPSs da Digital Ocean.

## Desvantagens de sites Jamstack

Todas as arquiteturas vêm com vantagens e desvantagens. Já que o foco do Jamstack é em pré-renderizar páginas e utilizar JavaScript consumindo APIs para torná-las dinâmicas, sites que possuem páginas com conteúdo que mudam muito não são os melhores candidatos para esta arquitetura.

Alguns exemplos de sites que seriam melhor implementados com outra arquitetura são:

- Webapps onde o conteúdo muda de usuário para usuário em experiências logadas, principalmente os que expõem conteúdo de acordo com níveis diferentes de permissão
- Sites em que o conteúdo se baseia em computação do lado do cliente, como ferramentas de edição de fotos ou blocos de notas.

Entretanto, isso não significa que as ferramentas que mencionamos aqui também não sejam úteis para estes tipos de sites. Com o Next.js, por exemplo, você pode implementar APIs, integrá-las na criação da parte estática do seu site e criar experiências que executam apenas no navegador – tudo integrado em uma arquitetura simples e pré-configurada.

Mesmo que você não esteja criando um site que combina perfeitamente com a arquitetura Jamstack, vale a pena utilizar alguns dos seus conceitos – como a pré-renderização de conteúdo – para melhorar a performance do seu projeto.

## Continue aprendendo

Neste artigo eu falei um pouco sobre o que é a arquitetura Jamstack, porquê utilizá-la, indiquei algumas ferramentas e também mostrei algumas desvantagens. Existe bastante conteúdo sobre o Jamstack, principalmente em inglês. Se você quiser continuar aprendendo, dá uma olhada nesta lista de recursos para seus estudos:

- [NextJS, Gatsby ou Create React App? Entendendo os conceitos de SSR, SSG e SPA](https://willianjusten.com.br/nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa/)
- [The issues with JAMStack: You might need a backend](https://www.browserlondon.com/blog/2020/04/20/issues-with-jamstack-you-might-need-backend/)
- [Jamstack Best Practices](https://jamstack.org/best-practices/)
- [The Jamstack origin story](https://www.netlify.com/blog/2016/09/15/the-jamstack-origin-story/)
- [Gatsby.js Tutorials](https://www.gatsbyjs.com/tutorial/)
- [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)


Conheça mais sobre a arquitetura feita para construir sites mais rápidos.

O que é a Jamstack? Guia completo para iniciantes


_Este artigo também está disponível como [slides][slides]._

Com cerca de 360 propriedades, não faltam muitas coisas para você conseguir
estilizar basicamente qualquer coisa usando a versão atual do CSS. O maior
problema na verdade está como solucionar problemas de estilização de uma forma
escalável. Escalável para que seu código seja flexível o suficiente para não
ter que ser completamente reescrito no próximo redesign que com certeza vai
acontecer, e também escalável para que seu time possa continuar mantendo
o código por muitos anos.

Em meio a tantos frameworks diferentes e técnicas como Flexbox, Grid CSS,
floats, e até CSS-in-JS, é difícil olhar através do superficial e achar as boas
práticas e hábitos essenciais para escrever CSS que dura.

Após muitos anos como desenvolvedor front-end acabei desvendando alguns
hábitos que me levam a escrever CSS mais escalável. Agora, quase sempre que
encontro estilos difíceis de lidar ou que dão bastante trabalho para refatorar,
percebo que eles não seguem um dos três princípios básicos que vou te ensinar.

Aprender a escrever CSS escalável é essencial, já que independente da sua
abordagem para criar interfaces de usuário na web, você vai precisar
estilizá-la. E, por mais bonita e bem planejada que seja, esta mesma interface
de usuário vai passar por muitas mudanças conforme o produto é alterado. Novas
funcionalidades precisam de espaço. O posicionamento de alguns elementos são
trocados para melhorar a experiência do usuário. Novas páginas são criadas.
Estilos mais "modernos" são propostos. Três hábitos podem nos ajudar a passar
por tudo isso com menos dor de cabeça.

## Abrir mão do posicionamento

Com CSS nós podemos posicionar qualquer elemento em qualquer lugar. Apesar
disso, não é sempre que devemos usar `position: fixed` ou `position: absolute`
para controlar exatamente em qual pixel na tela um elemento estará. Abrir mão
do posicionamento de um elemento vai ainda mais longe do que isso.

Cada vez que tentamos controlar o posicionamento de um elemento, este elemento
se torna menos reutilizável em diferentes contextos e talvez precise ser
refatorado quando o layout das páginas em que são utilizados forem alterados.

Vamos imaginar que temos um componente `Botao`. Por componente, eu quero dizer
um conjunto de HTML, CSS e JS que trabalham juntos – usando ou não um
framework. Este componente geralmente é utilizado em conjunto com outros botões
na nossa interface de usuário. Para posicionar estes componentes poderíamos
recorrer a seletores CSS como `.botao + .botao`, adicionando um pouco de
`margin` entre cada botão. Dessa forma, qualquer lugar que usasse `Botao` teria
o espaçamento entre eles padronizado.

O problema dessa solução é que ela não é escalável. No momento que quisermos
trocar um `Botao` por um `Link`, este espaçamento não seria mais aplicado.
Conforme estas excessões se tornam a regra, poderíamos acabar com diversos
seletores muito específicos: `.botao + .link`, `.link + .botao` e
`.link + .link`. É inviável tentar lidar com espaçamento automático entre
componentes porque não temos certeza de como eles serão utilizados em conjunto
no futuro.

![imagem com um botão e um link sem espaçamento entre
eles](/posts/tres-habitos-css-escalavel/botao-botao.png)

Uma forma melhor de espaçar componentes e evitar este problema com seletores
específicos é dar ao componente que os engloba a responsabilidade de
espaçá-los. Um componente de `Fomulario`, por exemplo, poderia ditar os estilos
de espaçamento entre cada `Botao`, `Link` e `Input`. Controlando o espaçamento
de cima pra baixo na hierarquia dos componentes torna o CSS muito mais
escalável por permitir que componentes de baixo nível possam ser utilizado em
contextos completamente diferentes ao mesmo tempo sem que eles tenham que ter
estilos específicos para cada um desses contextos.

## Abrir mão do tamanho

Assim como abrir mão do posicionamento, abrir mão do tamanho também é um ótimo
hábito para escrever CSS escalável. Em uma página de galeria, por exemplo, nós
poderíamos estilizar o componente `Figura` de tal forma que seu `width` estaria
fixo em `300px`, já que este é o tamanho exato deste elemento no design. Porém,
se decidirmos utilizar `Figura` dentro de um elemento maior ou menor, nós
teríamos problemas.

Ao abrir mão do espaçamento, delegamos ao máximo a definição real do tamanho de
um elemento na tela. Isso significa que quase todos os seus componentes seriam
estilizados com `width: 100%`, de modo que quem os engloba pode decidir seu
tamanho real final.

![images de uma galeria de imagens com Figura em diversos
tamanhos](/posts/tres-habitos-css-escalavel/galeria-diversa.png)

Existem alguns casos em que não é possível abrir mão do tamanho dos nossos
componentes. É, por exemplo, muito difícil estilizar um componente complexo
para comportar tamanhos muito grandes e muito pequenos sem o uso de _media
queries_. Não existe hoje uma forma de estilizar um componente baseado em seu
tamanho na tela, já que ainda não temos algo como [Container
Queries][container-queries] no CSS.

Mantenha sempre em mente que <mark>nenhuma solução técnica vem sem
desvantagens</mark>. Para componentes assim, talvez o ideal seja ter diferentes
versões dos seus estilos que podem ser utilizadas usando uma classe no elemento
principal para definir uma versão "enxuta" ou "completa".

## Deixar o conteúdo fluir

Conteúdo é quase sempre o centro de um design. E em muitas interfaces de
usuário dinâmicas, é muito difícil saber ao certo o tamanho de um texto, imagem
ou vídeo. Botões podem ter mais texto do que cabe em apenas uma linha. Imagens
talvez sejam estreitas e não quadradas. Títulos podem ter palavras que não
cabem inteiras na largura de um dispositivo móvel. Conteúdo é dinâmico, e seus
componentes devem deixá-lo fluir.

Existem basicamente duas maneiras de lidar com a diversidade de conteúdo:
forçar o conteúdo para se adaptar ao seu componente (abordagem controlada)
e adaptar o componente ao conteúdo (abordagem fluída).

### Abordagem controlada

Para forçar o conteúdo a se adaptar a um componente, podemos usar `overflow: hidden`, `width` e `height` fixos, `text-overflow: ellipsis` e muitas outras
regras. Esta abordagem normalmente é necessária quando temos que manter um
balanço e prevenir que um conteúdo gerado pelos usuários quebre a interface.

![imagem de uma figura com sua descrição incompleta](/posts/tres-habitos-css-escalavel/chicago-controlada.png)

O problema de tentar controlar o conteúdo é que uma mudança nos requerimentos
deste conteúdo pode nos forçar a refatorar todos os componentes que não se
adaptam ao conteúdo.

### Abordagem fluída

Uma outra forma de lidar com conteúdo é com uma abordagem fluída. Se quase
todos os nossos componentes seguirem essa abordagem, teremos uma interface de
usuário flexível que se adapta tanto ao conteúdo quanto ao dispositivo. O CSS
tende a nos levar por este caminho, já que a maioria dos valores padrão foram
definidos com o intuito de deixar o conteúdo fluir. Novas técnicas de layout
como Flexbox e Grid CSS também têm valores padrão onde o conteúdo é uma parte
bastante importante nas definições de posicionamento e espaçamento.

Pode ser um pouco assustador não ter o controle total de como um componente ou
toda a sua interface de usuário aparecerá para o usuário final. Ao usar algumas
regras como `overflow-wrap: break-word` e `min-width: 200px` definimos limites
de como o conteúdo vai fluir dentro dos nossos componentes, tendo um pouco mais
de controle, mas não o suficiente para limitar demais o conteúdo.

![imagem de uma figura com sua descrição completa](/posts/tres-habitos-css-escalavel/chicago-fluida.png)

É claro que você pode misturar a abordagem fluída com a controlada. Esta
é normalmente a forma que eu implemento componentes que recebem conteúdo
bastante diverso. Você pode precisar controlar o tamanho do título
e a quantidade máxima de palavras na descrição de uma imagem, guiando quem
escreve o conteúdo a se encaixar em um meio-termo entre liberdade e controle.

## Desenvolva os seus hábitos

Não é fácil desenvolver interfaces para a web, principalmente para produtos que
evoluem em um ritmo constante. Escrever sobre estes três hábitos é o resultado
de muitos anos trabalhando em diversos projetos dos mais variados tamanhos. Com
certeza existem muitos outros hábitos que podemos seguir para escrever CSS
escalável, talvez alguns que eu até siga sem mesmo perceber ou formalizar.

Documentar problemas e soluções encontradas pode ser um ótimo caminho para você
começar a descobrir os seus próprios hábitos. Lembre de utilizar cada uma das
360 propriedades do CSS com uma coisa em mente: nunca faltarão tarefas para
alterar interfaces de usuário. Abrir mão do posicionamento, abrir mão do
tamanho e deixar o conteúdo fluir são só algumas boas práticas que podemos
seguir para manter nossos projetos em ordem mesmo após anos de trabalho.

[container-queries]: https://alistapart.com/article/container-queries-once-more-unto-the-breach/
[slides]: https://speakerdeck.com/hugobessaa/tres-habitos-para-escrever-css-escalavel


O que você precisa saber para escrever CSS que escala junto com o seu projeto.

Alcance o próximo nível em desenvolvimento front-end

Blog

Ferramentas Essenciais no Front-end - Undefined #2

5 métodos do Array no JS que você deveria usar mais

CSS Grid: o básico que você precisa saber - display: grid;

Guia completo de Flexbox - display: flex;

O que é a Jamstack? Guia completo para iniciantes

3 hábitos para escrever CSS escalável

Guia de Estudos CSS