<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Fala pessoal! Continuando as nossas <a href="https://willianjusten.com.br/series/#dicas-de-css">Dicas de CSS</a>, hoje iremos adicionar um novo amigo na parceria, que é o SVG e iremos criar uma linda animação de ondas.</p>
<p>Para gerar as ondas eu utilizei o site <a href="https://getwaves.io/">getwaves.io</a> e você pode ver <a href="https://labs.willianjusten.com.br/wave-svg-css-animation/">a demo do vídeo aqui</a> e o <a href="https://github.com/willianjusten/labs/blob/gh-pages/wave-svg-css-animation/index.html">código aqui</a>.</p>
<h2 id="vídeo"><a href="#v%C3%ADdeo" class="anchor">Vídeo</a></h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sf2Vs1PK8cA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se <a href="https://www.youtube.com/WillianJustenCursos?sub_confirmation=1">inscrever no canal do YouTube</a>, eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!</p>


Aprenda a animar ondas feitas em SVG somente com CSS puro e cria um hero muito mais criativo e bonito.

Criando uma animação de ondas com CSS e SVG


## Introdução

Fala pessoal, o post de hoje é sobre uma coisa bem interessante que eu não tinha a menor ideia e acabei de descobrir! Espero que também seja novidade para vocês, se num for, ~~finjam que é~~ tudo bem xD

Como hoje não tem vídeo, não posso deixar de postar uma playlist né? Para hoje, vai a [Evening Chill](https://open.spotify.com/playlist/37i9dQZF1DWZ0OzPeadl0h?si=ybpTtFbZTDO_reyTvED70Q), várias músicas bem legais e calmas.

## Atualização da barra do site

Um aluno [escreveu um tweet](https://twitter.com/brenonovelli/status/1257678890069307392) sobre um projeto que ele criou através do meu Curso de Gatsby. E eu notei que ele criou uma sidebar off-canvas no mobile que eu já estava há muito tempo para fazer no meu blog e sempre enrolava.

Aproveitei que estava com tempo livre e resolvi fazer. Se você nunca viu meu site no celular, segue abaixo um gif do antes/depois:

![Menubar antes/depois com mais e menos ícones e uma sidebar vindo da lateral](/assets/img/menubar-before-after.gif)

## Problema do iPhone X

Antes de lançar essa mudança, eu perguntei ao meu amigo [Guilherme Louro](https://github.com/guilouro) para dar uma testada e ele falou que tava muito ruim no iPhone X, pois como esse celular não tem botões de menu, mas sim uma barrinha na parte de baixo, acabava que ficava conflitando. Veja abaixo a imagem de como estava:

![Tela do iphone X mostrando uma barrinha branca logo acima da barra dos ícones](/assets/img/iphone-barra-antes.jpeg)

Antes mesmo o site já tinha problemas com isso, mas ninguém nunca havia me reportado. Foi aí que o próprio Guilherme comentou que no React Native existe uma coisa chamada [Safe Area View](https://reactnative.dev/docs/safeareaview) que é exatamente para solucionar esse problema. Só que meu site obviamente não usa native, então resolvi procurar sobre isso para web e encontrei a [documentação do webkit](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) falando como fazer e funciona mesmo!

## Resolvendo o problema da área útil

Para resolver esse problema é bem fácil até. A primeira coisa que precisamos fazer é identificar essa área útil e alterar o valor da `viewport` para identificar e ocupar toda a área, isso é feito adicionando o `viewport-fit=cover` na tag que utilizamos no nosso `head`:

```html
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
```

Depois disso, nós precisamos respeitar as chamadas `safe areas` do iphone, abaixo segue uma imagem explicando:

![Imagem do iphone indicando as variáveis de safe-area-inset para cada extremidade](/assets/img/safe-areas.png)

Cada um desses lados tem uma variável que podemos utilizar no nosso css, que são: `safe-area-inset-left`, `safe-area-inset-right`, `safe-area-inset-bottom` e `safe-area-inset-top`.

Sabendo qual variável precisamos trabalhar, é só escrever o css da seguinte forma:

```css
.menu-bar {
  padding-bottom: env(safe-area-inset-bottom);
}
```

Logo após fazer isso, o meu site já estava corrigido!

![Tela do iphone agora mostrando que as barras não colidem mais entre si](/assets/img/iphone-barra-depois.jpeg)

## Conclusão

Sei que é uma coisa bem específica e bem pequena, mas é sempre bom tratarmos nosso site da melhor forma e para todos. E eu confesso que fiquei bem feliz de descobrir uma coisa nova que resolvi escrever esse post.


Como lidar com o notch no topo e a navegação sem botões na parte inferior do iPhone num Web App.

Trabalhando com a tela útil do iPhone


## Introdução

Fala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje iremos aprender sobre um tema extremamente importante! Os famososo **textos responsivos**!

É muito normal utilizarmos vários media-queries para poder ter o nosso texto funcionando para diferentes tipos de tela, mas nem sempre fica tão legal ou fluido. Sem contar que escrevemos muito mais código para isso.

A maneira que vamos fazer aqui, nós iremos utilizar a viewport unit `vw`, que calcula uma porcentagem da largura (`width`) da tela e vamos usar as [funções matemáticas do CSS](https://caniuse.com/#feat=css-math-functions) de `min` e `max` para podermos ter os textos em seus tamanhos corretos.

Esse post foi inspirado [nesse tweet da Una Kravets](https://twitter.com/Una/status/1254906546179526657) e espero que gostem!

Você pode ver [a demo do vídeo aqui](https://labs.willianjusten.com.br/responsive-text/) e o [código aqui](https://github.com/willianjusten/labs/blob/gh-pages/responsive-text/index.html).

## Vídeo

<iframe width="560" height="315" src="https://www.youtube.com/embed/FDWmTsL8URA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!


Aprenda a deixar seus textos responsivos e fluidos em qualquer tela com viewport units e funções min-max do CSS.

Willian JustenSoftware Engineer

Introdução

Vídeo

Conclusão