<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Fala pessoal, eu recentemente comecei uma <a href="https://www.youtube.com/watch?v=1dNNL95BsJE&#x26;list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO">série de vídeos com dicas bem rápidas</a> lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)</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/H5XBjyoU1E0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="utilizando-com-svg-puro-ou-componentes-reactvue"><a href="#utilizando-com-svg-puro-ou-componentes-reactvue" class="anchor">Utilizando com SVG puro ou componentes React/Vue</a></h2>
<p>O <a href="https://tholman.com/github-corners/">projeto oficial</a> é chamado de GitHub Corners e disponibiliza um código em SVG bem simples que você consegue colocar em qualquer site de forma simples.</p>
<p>Mas se você quiser, também pode utilizar este <a href="https://projects.skratchdot.com/react-github-corner/">componente em React</a> ou este <a href="https://gluons.github.io/vue-gh-corners/">componente em Vue</a>.</p>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no <a href="https://www.youtube.com/WillianJustenCursos/">canal do YouTube</a> para essa e mais outras dicas.</p>


Já pensou como o pessoal sempre usa aquele ícone bonitinho no canto? Agora vai saber!

Adicionando ícone de GitHub nos projetos opensource

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

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

## Utilizando o poder do `as` polymorphic

Dentro do Styled Components existe um método muito bacana, que é a [polymorphic prop](https://styled-components.com/docs/api#as-polymorphic-prop), que serve para criar um componente e determinar que ele se comporte `como (as)` a tag que você desejar.

Isso é muito legal, pois permite que criemos diferentes estilos, mas sem perder a semântica das tags e não fiquemos reféns a usar `div` em tudo.

No vídeo acima eu mostro como utilizar o `attr` junto ao `as` exatamente para determinar estilos visuais e também que tipo de tag deve ser.

## Exemplo de código

Ao trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria:

```javascript
const theme = {
  colors: {
    white: '#eee',
    black: '#111',
    gray: '#333',
    lightGray: 'CCC'
  },
  sizes: {
    xsmall: '1rem',
    small: '1.2rem',
    medium: '1.6rem',
    large: '2.4rem',
    xlarge: '3.2rem',
    xxlarge: '4.0rem'
  }
}
```

Se você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo:

```typescript
export type HeadingProps = {
  color?: keyof typeof theme.colors
  size?: keyof typeof theme.sizes
  fontWeight?: 100 | 400 | 700
  level?: 1 | 2 | 3 | 4 | 5 | 6
}
```

E aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados:

```typescript
export const Heading = styled('h1').attrs<HeadingProps>(({ level }) => ({
  as: `h${level}`
}))<HeadingProps>`
  ${({
    color = 'white',
    size: 'medium',
    fontWeight: 700
  }) => css`
    font-size: ${theme.sizes[size]};
    color: ${theme.colors[color]};
    font-weight: ${fontWeight};
  `}
`
```

Note que nós utilizamos um `level` exatamente para poder determinar qual vai ser a tag semântica e aí fazemos um concatenação da string no `as`  para ter nosso `h${level}` que pode ir de 1 a 6.

Com o componente pronto, você pode usar da seguinte maneira:

```javascript
<Heading>Esse é o h1 padrão branco, size medium e negrito</Heading>
<Heading level={2} size="xxlarge" color="gray">Esse é um h2 bem grande e cinza</Heading>
```

Como você pode ver, esse foi um exemplo bem rápido e simples, mas você pode criar toda uma estrutura para seus Headings, textos e etc. É essa maneira que bibliotecas maiores como o Material Design utilizam.

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.

Utilizando o poder do polymorphic no styled-components

Criando componente de Tipografia com styled-components

## Introdução

Fala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

## Vídeo

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

## Apresentando o Japanese Words

Atualmente eu estou estudando japonês e pensando nisso, eu resolvi fazer um projetinho para me ajudar no vocabulário e pronúncia. Tem um site chamado [mainichi](https://mainichi.me/) que tem uma extensão com várias palavras, então parti dali. Como pode notar, meu card é uma cópia descarada deles xD

Mas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras.

## Web Speech API

Você pode ver o projeto inteiro no [repositório oficial](https://github.com/willianjusten/japanese-words), mas vou me ater somente as partes que utilizei da Web Speech, que é bastante simples.

Os passos são:

- Primeiro pegamos as vozes disponíveis no device/browser usando o método [SpeechSynthesis.getVoices()](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices)

```javascript
const voices = window.speechSynthesis?.getVoices()
```

- Depois nós filtramos essa lista para encontrar a voz que tenha a pronúncia da língua desejada, no nosso caso, o japonês.

```javascript
const jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang))
```

- Com as vozes, nós definimos o [Utterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance), que seriam as configurações da leitura.

```javascript
const utterance = new SpeechSynthesisUtterance()


utterance.text = word // word é a palavra que desejamos pronunciar
utterance.lang = 'ja-JP' // língua a pronunciar
utterance.voice = voice // voz defina acima
utterance.rate = 0.8 // velocidade de fala
```

- Já com a voz determinada e as configurações de voz, agora é só usar o método para falar, que é o [speechSynthesis.speak](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak)

```javascript
window.speechSynthesis.speak(utterance)
```

## Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.

Nesse post eu vou mostrar como utilizei a Web Speech API para meu projeto Japanese Words.

Willian JustenSoftware Engineer

Introdução

Vídeo

Utilizando com SVG puro ou componentes React/Vue

Conclusão