<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 vamos aprender a fazer uma micro interação bem legal ao criar um tooltip.</p>
<p>E para criar nossa interação, nós vamos utilizar o <code>clip-path</code>, se você nunca utilizou, não se preocupe, no vídeo vamos aprender. Fica aqui também, <a href="https://willianjusten.com.br/mask-e-clip-com-css-e-svg/">um post completo</a> explicando como utilizar o <code>clip-path</code> com CSS e também SVG.</p>
<p>Você pode ver todo o <a href="https://github.com/willianjusten/labs/blob/gh-pages/tooltip-clip-path/index.html">código da demo aqui</a> e pode ver <a href="https://labs.willianjusten.com.br/tooltip-clip-path/">a demo rodando 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/g0qr8ZGAtMw" 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 fazer uma micro interação bem sútil, mas que vai fazer toda a diferença no seu layout.

Criando um tooltip animado com CSS clip-path 


## Introdução

_Deixando claro que esse não é um post patrocinado e eu não ganho nada por isso. É somente para divulgar esse belo trabalho do Zeno Rocha._

Já tem um certo tempo que eu resolvi migrar para o Windows/Linux e utilizar um desktop ao invés do meu Macbook Pro. Inclusive fiz [um curso sobre ambiente de Desenvolvimento no Windows](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) e falei um pouquinho sobre isso [nest post](https://willianjusten.com.br/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows/).

E uma coisa chata que acontece quando você está migrando, é que precisa configurar tudo de novo e isso inclui os temas, as vezes nem lembramos que cores usávamos. Além disso, cada lugar fica de uma cor diferente, o que causa até um certo atrito.

Sem mais delongas, vamos lá, enquanto escrevo esse post vou ouvindo uma [cantora australiana incrível](https://open.spotify.com/artist/355SqtHY4qKt2wIXrWku0c?si=6im3rYbcS7GJR0EfavE9ZA).

## Conhecendo o Dracula

O [Dracula Theme](https://draculatheme.com/) foi criado pelo [Zeno Rocha](https://zenorocha.com/) em 2013 quando ele teve o seu laptop roubado e ele precisou reconfigurar tudo.

Desde então, esse é um dos temas mais utilizados de todos, tem mais de **12 mil stars no Github** e o tema foi portado para mais de **100 aplicações**! Indo desde o Sublime Text, VS Code, até mesmo o Telegram!

## Dracula PRO

Mesmo depois de todo esse sucesso, o Zeno achou que ainda faltavam coisas que poderiam ser melhoradas e aplicadas, com um tratamento mais **premium**. E foi assim que nasceu o [Dracula PRO](https://draculatheme.com/pro/).

Para o Dracula PRO, ele fez um estudo mais profundo na teoria de cores, para escolher cores que tivessem um bom contraste (inclusive testado pela WCAG 1.0 level AA spec) e que permitissem ter uma melhor legibilidade.

Além disso, ele escolheu 4 fontes que funcionassem perfeitamente com o tema e que dessem suporte a ligatures, você pode ver no vídeo abaixo o que é:

<video autoplay muted loop style="display: block; margin: 20px auto; max-width: 80%">
  <source src="https://draculatheme.com/static/video/ligatures.mp4" type="video/mp4">
</video>

Além disso, ainda o pacote vem com um ebook sobre produtividade, um screencast sobre produtividade usando o Alfred, wallpapers e outras coisinhas mais.

E claro, com a vantagem que você poderá ter todas as suas aplicações utilizando o mesmo sistema de cores, diminuindo muito a fricção ao mudar de janela.

## Conclusão

Se você estava procurando uma solução para ter um tema unificado nas suas diversas aplicações, dá uma olhada no [Dracula PRO](https://draculatheme.com/pro/), certeza que vai se impressionar com a qualidade.


Deixe seu editor, terminal e muito mais com seu tema favorito.

Um tema para todos os lugares: Dracula PRO


## 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.

Willian JustenSoftware Engineer

Introdução

Vídeo

Conclusão