Forem: Henrique Rodrigues

Network Link Conditioner: Simulando Conexões Lentas

Henrique Rodrigues — Fri, 14 Mar 2025 18:11:57 +0000

Network Link Conditioner: Simulando Conexões Lentas

Quando desenvolvemos e testamos aplicações web ou móveis, é comum utilizarmos redes rápidas e estáveis.
No entanto, no mundo real, muitos utilizadores enfrentam conexões instáveis, como redes 3G, Wi-Fi fraco ou latência alta.
Para garantir uma boa experiência do utilizador em diferentes condições de rede, podemos simular conexões lentas utilizando o Network Link Conditioner (NLC).

🛠 O que é o Network Link Conditioner?

O Network Link Conditioner é uma ferramenta fornecida pela Apple que permite simular diferentes condições de rede no macOS e iOS.
Com ele, podemos testar como a nossa aplicação se comporta em cenários de alta latência, perda de pacotes ou largura de banda reduzida.

📥 Como instalar o Network Link Conditioner

1. Descarregar as ferramentas adicionais do Xcode

Se ainda não tens o Xcode instalado, podes instalá-lo a partir da Mac App Store.
Acede ao site Apple Developer e faz o download do Additional Tools for Xcode (certifica-te de escolher a versão correta para o teu Xcode).

2. Instalar o Network Link Conditioner

Abre o ficheiro DMG descarregado e navega até à pasta "Hardware".
Dá um duplo clique em Network Link Conditioner.prefPane para instalar.

3. Ativar e configurar

Acede às Preferências do Sistema no macOS.
Encontra o Network Link Conditioner e abre-o.
Escolhe um perfil de rede predefinido (como "3G", "Wi-Fi ruim", "DSL lento" ou cria um personalizado).
Ativa a opção Enable Network Link Conditioner.

📱 Como usar no iOS Simulator

Se estiveres a testar no iOS Simulator, podes ativar o Network Link Conditioner diretamente no dispositivo físico conectado via USB ou nas opções de simulação:

Acede a Ajustes no iPhone/iPad (se estiver a correr o Xcode).
Vai a Desenvolvedor e seleciona Network Link Conditioner.
Escolhe um perfil de rede e ativa.

🧪 Testes práticos com NLC

Com o Network Link Conditioner ativado, podes testar diferentes cenários na tua aplicação:

📉 Carregamento lento de páginas: Como a tua aplicação lida com uma conexão 3G?
⏳ Erros de time-out: Os teus pedidos HTTP falham graciosamente ou a aplicação fica presa?
🎬 Animações e carregamento de conteúdo: As animações estão sincronizadas com a latência?

🔄 Alternativas ao Network Link Conditioner

Se não estiveres num ambiente macOS, podes usar outras ferramentas para simular redes lentas:

Chrome DevTools → Aba "Network" permite simular redes como 3G/4G.
Clumsy (Windows) → Introduz latência e perda de pacotes.
Fiddler → Pode manipular tráfego e latência.

✅ Conclusão

O Network Link Conditioner é uma ferramenta essencial para testar aplicações em condições de rede adversas, garantindo uma experiência do utilizador mais confiável e robusta.
Se ainda não utilizas este tipo de teste, vale a pena incluí-lo no teu fluxo de desenvolvimento!

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Melhorando a Acessibilidade com :focus-visible no CSS

Henrique Rodrigues — Thu, 20 Feb 2025 16:08:17 +0000

A acessibilidade na web é um fator essencial para garantir que todos os usuários tenham uma boa experiência. Uma das melhorias mais significativas nos últimos anos é a introdução da pseudo-classe :focus-visible, que permite um controle mais inteligente da estilização do foco nos elementos interativos.

O Problema com `:focus`

Antes do :focus-visible, a principal forma de estilizar um elemento em foco era através da pseudo-classe :focus. No entanto, isso criava um problema: o foco era aplicado tanto para navegação via teclado quanto para cliques com o mouse, resultando em uma experiência visual indesejada.

Exemplo com `:focus`:

button:focus {
  outline: 3px solid blue;
}

Isso pode ser inconveniente porque o :focus afeta até usuários que estão apenas clicando nos botões com o mouse, criando um efeito visual desnecessário.

A Solução: :focus-visible

A pseudo-classe :focus-visible foi criada para solucionar esse problema, exibindo o foco apenas quando necessário — como ao navegar via teclado. Isso melhora a experiência do usuário, sem comprometer a acessibilidade.

Exemplo com :focus-visible:

button:focus-visible {
  outline: 3px solid blue;
}

Diferença entre :focus e :focus-visible

Pseudo-classe	Exibe foco ao clicar com o mouse?	Exibe foco ao navegar com teclado?
`:focus`	✅ Sim	✅ Sim
`:focus-visible`	❌ Não	✅ Sim

Exemplo em Formulário Acessível

Outro caso prático de :focus-visible é em formulários. Com ele, evitamos que usuários que apenas clicam nos campos vejam um destaque indesejado.

Exemplo:

input:focus-visible {
  border: 2px solid green;
}

Suporte dos Navegadores

Atualmente, :focus-visible é suportado na maioria dos navegadores modernos, incluindo Chrome, Edge, Firefox e Safari. Você pode verificar a compatibilidade no Can I Use.

Conclusão

A pseudo-classe :focus-visible é uma melhoria essencial para acessibilidade, garantindo que o foco seja exibido somente quando necessário. Se você ainda não está usando, considere adicioná-la ao seu projeto para melhorar a experiência do usuário! 🚀

CSS Nesting Nativo: A Revolução do Aninhamento de Estilos no CSS

Henrique Rodrigues — Thu, 20 Feb 2025 14:29:16 +0000

O CSS Nesting sempre foi uma funcionalidade popular em pré-processadores como Sass e LESS, permitindo aos desenvolvedores escreverem regras de estilo de forma hierárquica. Essa abordagem facilita a organização, melhora a legibilidade do código e torna o desenvolvimento de estilos mais intuitivo. Contudo, até recentemente, era necessário depender dessas ferramentas externas para utilizar o aninhamento no CSS.

Felizmente, em 2023, o CSS Nesting Module Level 1 foi aprovado, trazendo essa funcionalidade diretamente para o CSS nativo, sem a necessidade de pré-processadores. Desde 2024, esse recurso está disponível em todos os navegadores modernos, permitindo que você escreva CSS organizado e sem dependências adicionais.

Neste artigo, vamos explorar o que é o CSS Nesting nativo, como ele funciona, suas vantagens e como você pode começar a utilizá-lo em seus projetos.

O Que é CSS Nesting?

CSS Nesting é a prática de aninhar um seletor dentro de outro seletor, representando a estrutura hierárquica de um documento HTML. Com o aninhamento, podemos organizar melhor as regras de estilo, tornando o código mais limpo e fácil de manter.

Exemplo Tradicional com Sass:

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .description {
    font-size: 14px;
    color: #666;
  }

  .button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: #0056b3;
    }
  }
}

A ideia é simples: organizar o CSS em uma estrutura mais lógica e hierárquica. Cada classe .title, .description e .button está aninhada dentro de .card, refletindo a estrutura de um componente.

O Desafio Antes do CSS Nativo

Antes da chegada do CSS Nesting nativo, os desenvolvedores precisavam usar ferramentas como Sass ou LESS para conseguir escrever CSS de maneira hierárquica. Esses pré-processadores eram extremamente úteis, mas também traziam algumas complexidades, como a necessidade de configuração adicional e o passo de compilação para gerar o CSS final.

O Que Mudou com o CSS Nesting Nativo?

Com a introdução do CSS Nesting como parte da especificação CSS, agora podemos escrever o CSS de maneira hierárquica sem depender de pré-processadores. Isso foi oficializado pelo CSS Nesting Module Level 1, que foi aprovado em 2023 e se tornou disponível em todos os navegadores modernos em 2024.

A Nova Sintaxe

O recurso de CSS Nesting nativo utiliza a sintaxe simples de aninhamento, similar ao que já fazíamos no Sass. A principal diferença é que agora não precisamos de ferramentas externas para isso.

Exemplo de CSS Nesting Nativo:

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .description {
    font-size: 14px;
    color: #666;
  }

  .button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: #0056b3;
    }
  }
}

Aqui, o código está aninhado dentro do seletor .card, tornando o código mais limpo e fácil de manter.

O Que Isso Significa para os Desenvolvedores?

Agora, você pode usar CSS Nesting sem precisar configurar um pré-processador. Isso simplifica o fluxo de trabalho, melhora a legibilidade do código e ainda mantém a performance otimizada, já que o CSS é processado nativamente pelo navegador.

Vantagens do CSS Nesting Nativo

Organização de código: Com o aninhamento, podemos refletir a estrutura do HTML diretamente no CSS, o que torna o código mais fácil de entender e manter.
Sem dependências externas: Ao usar CSS nativo, não há mais necessidade de configurar pré-processadores como Sass ou LESS, o que simplifica o setup do projeto.
Compatibilidade futura: O CSS Nesting nativo foi oficialmente aprovado e está sendo implementado de forma estável em navegadores modernos. Isso significa que podemos contar com o suporte a longo prazo.
Performance: Como o aninhamento é suportado nativamente, o navegador pode otimizar a interpretação e aplicação do CSS sem a necessidade de compilar ou transformar o código.

Considerações Importantes

Embora o CSS Nesting nativo seja uma grande adição ao CSS, ainda é importante usar o aninhamento com moderação. Embora seja uma ferramenta poderosa para organizar o código, abusar do aninhamento pode levar a uma maior complexidade e dificultar a manutenção do código, além de aumentar o tamanho do CSS gerado.

Conclusão

O CSS Nesting nativo é uma funcionalidade extremamente útil que melhora a organização do código e elimina a necessidade de ferramentas externas. Agora que está amplamente disponível em todos os navegadores modernos, podemos aproveitar seus benefícios sem complicação.

Se você já usava Sass ou LESS, vai perceber como é fácil adaptar o aninhamento para o CSS puro. E se ainda não usava essas ferramentas, o CSS Nesting nativo é uma excelente oportunidade para melhorar a estrutura do seu código CSS sem complicação.

Fique de Olho nas Novidades

Embora o CSS Nesting esteja amplamente disponível, a especificação continua evoluindo. O futuro do CSS está cheio de novas funcionalidades e aprimoramentos que tornam o desenvolvimento front-end mais rápido e eficiente.

Como utilizar o Intersection Observer no React

Henrique Rodrigues — Thu, 24 Oct 2024 10:02:07 +0000

Hoje vamos explorar como utilizar a API do intersection observer no React com alguns exemplos.

Mozilla web documentation descreve a API intersection observer como:

permite que o código registe uma função de chamada de retorno que é executada sempre que um elemento que desejam monitorizar entra ou sai de outro elemento (ou da janela de visualização), ou quando o valor pelo qual os dois se cruzam muda de um valor solicitado. Desta forma, os sites já não precisam de fazer nada no thread principal para observar este tipo de interseção de elementos, e o browser fica livre para otimizar a gestão das interseções como achar melhor.

Resumindo, permite-nos detectar quando certo elemento está visível no viewport, isto só acontece quando o elemento cumpre a proporção de interseção desejada.

Como você pode ver, se fazer um scroll dow na pagina o intersection ratio aumentará até atingir o limite projetado e nesse momento é acionada a função que executa uma chamada de retorno.

Primeiro passo

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

O object construtor do intersection observer necessita de dois argumentos:

Uma função de callback
Opções

Apenas isso, estamos pronto para ver alguma ação, mais primeiro, precisamos saber o que cada opção significa, o argumento options é um objecto com os seguinte valores:

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

root: O elemento que é utilizado como viewport para verificar a visibilidade do alvo. Deve ser o antepassado do alvo. O predefinido é a janela de visualização do browser se não for especificado ou se for nulo.
rootMargin: Este conjunto de valores serve para aumentar ou diminuir cada lado da caixa delimitadora do elemento raiz antes de calcular as intersecções, as opções são semelhantes às da margem em CSS.
limite: Um único número ou uma matriz de números que indica em que percentagem da visibilidade do alvo o retorno de chamada do observador deve ser executado, varia de 0 a 1,0, em que 1,0 significa que cada pixel está visível na janela de visualização.

Utilizando no React

Agora vamos ver uma implementação da API do intersection observer no React.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

Comece por uma referência ao elemento que queremos observar, utilize o react hook useRef.
Crie uma variável de estado isVisible, vamos utilizá-la para apresentar uma mensagem sempre que a nossa caixa estiver na janela de visualização.
Declare a callback function que vai receber um array de IntersectionObserverEntries como parâmetro, dentro desta função pegamos na primeira e única entrada e verificamos se está a cruzar com a viewport e se estiver então chamamos setIsVisible com o valor do entry.isIntersecting (true/ FALSO).
Crie o objeto de opções com os mesmos valores da imagem.
Adicione o react hook useEffect e crie um construtor observador utilizando a callback function e as opções que acabámos de criar antes. É opcional no nosso caso, mas pode devolver uma função de limpeza para desobservar o nosso alvo quando o componente é desmontado.
Defina a variável useRef no elemento que queremos observar.

<div className="box" ref={containerRef}>Observe me</div>

Vamos adicionar um pouco de estilo nesse html.

Isso é tudo que precisamos, simples e fácil!

Relembrando, isso é apenas uma implementação básica e existe diversas maneiras de fazer isso.

Vamos agora implementar o mesmo código que fizemos anteriormente, mas separando toda a lógica nu hook chamado useElementOnScreen.

const useElementOnScreen = (options) => {
  const containerRef = useRef(null)
  const [isVisible, setIsVisible] = useState(false)

  const callbackFunction = (entries) => {
    const [entry] = entries
    setIsVisible(entry.isIntersecting)
  }

  useEffect(() => {
    const observer = new IntersectionObserver(callbackFunction, options)
    if (containerRef.current) observer.observe(containerRef.current)

    return () => {
      if (containerRef.current) observer.unobserve(containerRef.current)
    }

  }, [containerRef, options])

  return [containerRef, isVisible]

}

Crie uma nova função chamada useElementOnScreen com as opções de parâmetros
Mover o useRef, useState e useEffect inteiro dentro do nosso novo hook.
Agora, a única coisa que falta no nosso gancho é a instrução return, passamos isVisible e containerRef como um array.
ok, estamos quase lá, só precisamos de chamar no nosso componente e ver se funciona!


const [containerRef, isVisible] = useElementOnScreen({
  root: null,
  rootMargin: "0px",
  threshold: 1.0
})

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

1- Importe o hook criado recentemente para o nosso componente.
2 - Inicialize-o com o objeto de opções.
3 - Assim terminamos.

Parabéns, utilizámos com sucesso a API intersection observer e até criámos um gancho para a mesma!

Créditos

Intersection Observer using React, escrito originalmente por producthackers

Carrossel de logo infinito css puro

Henrique Rodrigues — Fri, 27 Sep 2024 10:11:10 +0000

Existem várias bibliotecas prontas que podem ser usadas para implementar um carrossel infinito em seu projeto. No entanto, se pararmos para analisar, nem sempre faz sentido adicionar mais complexidade e peso ao seu código, mesmo que seja uma biblioteca leve.

Agora, vamos ao que interessa.

Primeiro, vamos criar uma estrutura HTML com os logos.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding with Robby</title>

  </head>
  <body>
    <div class="logos">
      <div class="logos-slide">
        <img src="./logos/3m.svg" />
        <img src="./logos/barstool-store.svg" />
        <img src="./logos/budweiser.svg" />
        <img src="./logos/buzzfeed.svg" />
        <img src="./logos/forbes.svg" />
        <img src="./logos/macys.svg" />
        <img src="./logos/menshealth.svg" />
        <img src="./logos/mrbeast.svg" />
      </div>
  </body>
</html>

Sua página deve estar incrível assim! 😄

Vamos começar a trabalhar com o CSS.

Primeiro, vamos remover os espaçamentos da tela e adicionar uma cor de fundo à página.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

Agora, vamos ajustar todas as imagens para que fiquem com o mesmo tamanho.

.logos-slide img {
  height: 50px;
}

O próximo passo é alinhar todos os logos em uma única linha e ocultar a barra de rolagem.

.logos {
  overflow: hidden;
  white-space: nowrap;
}

Agora, para a satisfação da experiência do usuário (UX), vamos adicionar espaçamento entre os logos e uma cor de fundo. Para isso, faremos uma alteração no CSS que já criamos.

.logos {
  overflow: hidden;
  white-space: nowrap;
  padding: 60px 0;
  background-color: #FFFFFF;
}
.logos-slide img {
  height: 50px;
  margin: 0 40px;
}

Agora, precisamos adicionar um pouco de movimento aos logos. Vamos criar a animação do carrossel utilizando keyframes e animation.

A ideia é fazer o movimento ocorrer com o translateX de 0 a -100%, e então aplicar essa transição na animation.

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.logos-slide {
  animation: 35s slide infinite linear;
}

Como você pode ver, ao chegar ao final, há um espaço em branco e o carrossel salta de volta para o início.

Para resolver isso, basta duplicar a div do logos no HTML e adicionar display: inline-block no CSS da classe logo-slide."

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding with Robby</title>

  </head>
  <body>
    <div class="logos">
      <div class="logos-slide">
        <img src="./logos/3m.svg" />
        <img src="./logos/barstool-store.svg" />
        <img src="./logos/budweiser.svg" />
        <img src="./logos/buzzfeed.svg" />
        <img src="./logos/forbes.svg" />
        <img src="./logos/macys.svg" />
        <img src="./logos/menshealth.svg" />
        <img src="./logos/mrbeast.svg" />
      </div>
      <div class="logos-slide">
        <img src="./logos/3m.svg" />
        <img src="./logos/barstool-store.svg" />
        <img src="./logos/budweiser.svg" />
        <img src="./logos/buzzfeed.svg" />
        <img src="./logos/forbes.svg" />
        <img src="./logos/macys.svg" />
        <img src="./logos/menshealth.svg" />
        <img src="./logos/mrbeast.svg" />
      </div>
  </body>
</html>

.logos-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

É isso! Este é um ótimo exemplo de como criar um carrossel usando apenas CSS.
Como mencionei no início, podemos fazer isso utilizando bibliotecas prontas ou até mesmo JavaScript. No entanto, às vezes, não precisamos complicar nosso projeto — nem a nossa vida! 😄

Progressive Web apps: O futuro do desenvolvimento web

Henrique Rodrigues — Wed, 04 Sep 2024 15:55:38 +0000

Sobre o que é todo esse zumbido sobre o PWA?

Imagina isso: Você está no metrô, tenta entrar em um site no seu celular, mais o sinal da internet fica caindo. Frustrante, não?
Nisso entra o Progressive Web App, o super-herói do mundo web. Ele funciona offline, carrega na velocidade da luz e até envia notificações. É como dar superpoderes ao seu website!

A origem do PWA

Vamos voltar no tempo (tipo, em 2015), as opções eram: construir um website ou construir um app. Isso era com escolher entre uma bicicleta ou um carro. Mais então, algumas pessoas inteligentes da Google pensaram, "Porque não os dois?" e assim, nasceu o PWA!

Vamos construir nosso primeiro PWA: Começando a aventura

Vamos arregaçar as mangas e construir juntos um PWA simples.
Vamos criar uma aplicação de "Piadas ruins" porque, bem, quem não gosta de uma piada ruim?

Parte 1: O Básico - Apenas uma simples webpage

Primeiro, vamos criar um HTML básico. Esta é nossa "bicicleta" - funciona, mais ainda não é super poderosa.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dad Jokes PWA</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Dad Jokes</h1>
    <p id="joke">Click the button for a dad joke!</p>
    <button id="jokeBtn">Get New Joke</button>
    <script src="app.js"></script>
</body>
</html>

Parte 2: Adicionar alguns estilos - Porque toda piada ruim precisa de um visual bom.

Vamos adicionar um toque de CSS para tornar a nossa aplicação mais elegante:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
}

#joke {
    margin: 20px 0;
    font-style: italic;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

Parte 3: A magia do javascript = Request piadas ruins

Agora, vamos adicionar um pouco de javaScript para fazer um request em uma API que vai retornar as piadas:

const jokeElement = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');

async function fetchJoke() {
    try {
        const response = await fetch('https://icanhazdadjoke.com/', {
            headers: {
                'Accept': 'application/json'
            }
        });
        const data = await response.json();
        jokeElement.textContent = data.joke;
    } catch (error) {
        jokeElement.textContent = "Oops! Looks like the joke got stuck in dad's old briefcase.";
    }
}

jokeBtn.addEventListener('click', fetchJoke);

// Faz o request na API quando a página carrega
fetchJoke();

Passo 4: Transformando em PWA - Uma pitada de superpoderes

Agora, vamos transformar o nosso site normal num PWA. Primeiro, precisamos de um ficheiro manifesto. Crie um ficheiro chamado manifest.json:

{
    "name": "Dad Jokes PWA",
    "short_name": "DadJokes",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#4285f4",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Não se esqueça de adicionar o link do manifest no arquivo HTML

<link rel="manifest" href="manifest.json">

Passo 5: O molho secreto: Service Workers

Service workers são como pequenos mordomos invisíveis da web. Armazenam os seus ativos em cache e até funcionam offline. Crie um ficheiro chamado service-worker.js:

const CACHE_NAME = 'dad-jokes-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/style.css',
    '/app.js',
    '/icon.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

Agora, registre o service worker no seu arquivo app.js

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => console.log('ServiceWorker registered'))
            .catch(error => console.log('ServiceWorker registration failed:', error));
    });
}

Testando os superpoderes do PWA

Modo Offline: Desligue a internet e atualize a página. A sua aplicação ainda deve funcionar!
Prompt de instalação: nos browsers compatíveis, verá uma opção para instalar o seu PWA.
Auditoria Lighthouse: Utilize a ferramenta Lighthouse do Chrome para verificar os superpoderes do seu PWA.

O futuro é progressivo

Parabéns! Acabou de construir o seu primeiro PWA. É como ver o seu filho dar os primeiros passos, não é? (Por falar em piadas de ruim...)

À medida que avançamos para 2024, os PWAs estão a tornar-se mais poderosos. Podem aceder a funcionalidades do dispositivo, trabalhar offline e proporcionar uma experiência semelhante à de uma aplicação, sem o incómodo das lojas de aplicações.

Assim, da próxima vez que alguém lhe perguntar se pode criar um website ou uma aplicação, pode dizer: “Porque não os dois?” e apresente-os ao maravilhoso mundo dos PWAs!

Créditos

Progressive Web Apps: The Future of Web Development, escrito originalmente por Baransel

Desbloqueando o poder do React 19: aproveite o novo 'use' API

Henrique Rodrigues — Fri, 30 Aug 2024 14:11:21 +0000

React, a adorada biblioteca que revolucionou o desenvolvimento front-end, está prestes a dar mais um salto em frente. Com a próxima release o React 19, os programadores estão entusiasmados com a nova
"use" API. Mais o que exatamente é essa nova feature, e como isso
pode turbinar a sua aplicação em React? Vamos nós aprofundar nessa novidade adicionada no ecossistema do React!

Qual é a mágica sobre o 'use'?

Imagine escrever componentes React em que a pesquisa de dados é tão simples como usá-los.
Esta é a promessa da nova 'use' API. Ela foi concebida para facilitar
o trabalho em recursos assíncronos, diretamente na renderização do
seu componente. Podemos para de fazer malabarismo usando o useEffect, useState e loading complexo para controla o estado do componente. O 'use' API está aqui para simplificar nossa vida!

O cenário atual: uma atualização rápida

Antes de de aprofundar no 'use' API. vamos relembrar como nós lidamos com um request de data em um React componente hoje em dia:

function UserProfile() {
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/user')
      .then(response => response.json())
      .then(data => {
        setUserData(data);
        setIsLoading(false);
      })
      .catch(error => {
        setError(error);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Welcome, {userData.name}!</h1>
      <p>Email: {userData.email}</p>
    </div>
  );
}

Embora isso funciona, envolve um monte de boilerplate code e gestão de state. Com a chegada do 'use' API, vai revolucionar esse processo.

Como é que o 'uso' API vai fazer essa magia?

Vamos a um simples exemplo:

import { Suspense, use } from 'react';

async function fetchUserData() {
  const response = await fetch('https://api.example.com/user');
  return await response.json();
}

function UserProfile() {
  const userData = use(fetchUserData());

  return (
    <Suspense fallback={<div>Loading user data...</div>}>
      <h1>Welcome, {userData.name}!</h1>
      <p>Email: {userData.email}</p>
    </Suspense>
  );
}

Nesse código, estamos fazendo um request dos dados do usuário e renderizando em um componente que exibe as informações do usuário.

Mergulhando mais fundo: A mecânica do 'use'

O 'use' API funciona de mãos dadas com o Suspense no React. Eis o que acontece nos bastidores:

Quando o componente renderiza, o 'use' verifica se os dados estão disponíveis.
Se os dados ainda não estão pronto, o "suspends" do componente, lança um objeto especial que o React captura.
O React mostra o fallback do Suspense mais próximo enquanto aguarda pelos dados.
Quando o dados estivem pronto, o React re-renderiza o componente com os dados da requisição.

Porque é que vai se apaixonar pelo 'use' API

Código limpo: Diz adeus para o useEffect. Seu componente serão mais enxutos e mais focados no que importa.
Melhorar a reutilização: Com o 'use' o fluxo de requisição de dados e renderização ficaram mais claro de se entender. O teu futuro eu (e os companheiros de equipe) vão agradecer!
Menos erros: Ao suspender automaticamente durante a pesquisa de dados, o 'use' ajuda a evitar aqueles incómodos erros "undefined is not an object" que todos nós encontramos.
Simplicidade de lidar com os erros: Error boundaries pode detectar erros durante o processo de requisição, proporcionando uma forma centralizada de tratar e exibir os erros.
Tratamento automático das condições de race: o 'use' cuida das possíveis condições de race ao procurar dados, garantindo que renderiza sempre as informações mais atualizadas.

Utilizando no mundo real, isto vai fazer dizer "top!"

Sessão de comentário dinâmica: Imagine um blog que um componente te post que carrega e apresenta os comentários sem esforço. Com o 'use' isto vai ser mamão com açúcar para fazer.

function CommentSection({ postId }) {
     const comments = use(fetchComments(postId));
     return (
       <ul>
         {comments.map(comment => (
           <li key={comment.id}>{comment.text}</li>
         ))}
       </ul>
     );
   }

Dashboard com request em tempo real: Construir um dashboard com request em tempo real? O 'use' funciona fácil com conexão WebSocket, mantenha sua UI em sincronia com a versão mais recente dos dados.

 function LiveStockTicker() {
     const stockData = use(subscribeToStockUpdates());
     return (
       <table>
         {stockData.map(stock => (
           <tr key={stock.symbol}>
             <td>{stock.symbol}</td>
             <td>{stock.price}</td>
           </tr>
         ))}
       </table>
     );
   }

Lista infinita com scroll: Implemente um scroll infinito sem ter dor de cabeça, o 'use' faz paginação e request dados parecer um passei no parque.

   function InfiniteUserList() {
     const [page, setPage] = useState(1);
     const users = use(fetchUsers(page));

     return (
       <div>
         {users.map(user => (
           <UserCard key={user.id} user={user} />
         ))}
         <button onClick={() => setPage(page + 1)}>Load More</button>
       </div>
     );
   }

Potenciais armadilhas e melhores práticas

Embora o 'use' seja poderoso, é importante usá-lo com sabedoria:

Não abuse: nem toda a pesquisa de dados necessita de “use”. Para dados simples e não críticos, os métodos tradicionais podem ainda ser apropriados.
Cuidado com a cascata: tenha cuidado ao criar "cascatas de pesquisa" em que uma pesquisa depende de outra, tornando potencialmente a sua aplicação mais lenta.
Combinar com componentes de servidor: quando possível, tire vantagem dos componentes do React Server para ir buscar dados no servidor, reduzindo as requisições do lado do cliente.
Tratamento adequado de erros: envolva sempre os seus componentes de 'use' em limites de erro para manipular e exibir os erros de forma elegante.

Abraçando o futuro do React

A API 'use' é mais do que apenas uma nova funcionalidade; é um vislumbre do futuro do desenvolvimento do React. Representa uma mudança para formas mais intuitivas e declarativas de lidar com operações assíncronas nos nossos componentes.

Enquanto aguardamos ansiosamente pelo lançamento oficial do React 19, agora é o momento perfeito para começar a experimentar o 'use' nos seus projetos. Quem sabe? Pode tornar-se o seu novo superpoder favorito do React!

Preparar-se para o 'use'

Para se preparar para o'use' API:

Estude Suspense: Familiarize-se com a funcionalidade do Suspense no React, pois está intimamente ligada ao 'use'.
Refatore o código existente: procure oportunidades nos seus projetos atuais onde o 'use' possa simplificar a pesquisa de dados.
Mantenha-se atualizado: fique atento à documentação oficial do React e às notas de lançamento para obter as informações mais atualizadas sobre o 'use'.
Experimente em projetos paralelos: comece a incorporar o ‘use’ em projetos não críticos para ter uma ideia das suas capacidades e limitações. Lembre-se que o grande poder vem com uma grande responsabilidade. Embora o ‘use’ simplifique muitos aspetos da pesquisa de dados, é crucial compreender as suas implicações no desempenho e na arquitetura da aplicação. Tal como acontece com qualquer nova tecnologia, uma aplicação cuidadosa é fundamental.

Conclusão

O 'use' API no React 19 foi criado para revolucionar a forma como lidamos com operações assíncronas nos nossos componentes. Ao simplificar a pesquisa de dados e a gestão de estado, permite que os programadores se concentrem no que é mais importante: criar experiências de utilizador incríveis.

À medida que estamos à beira desta nova e excitante era no desenvolvimento do React, é crucial abordar o “use” com entusiasmo e cautela. Abrace o seu poder, mas também dedique algum tempo a compreender as suas nuances e melhores práticas.

Boa codificação, entusiastas do React! O futuro é risonho e cheio de 'use'!

Como foi o desafio Daily CSS Image

Henrique Rodrigues — Wed, 08 Dec 2021 16:58:52 +0000

Sempre gostei de desenhar mas infelizmente eu não tenho o talento de desenhar a mão, até que um dia vi o desenho feito em CSS do Homer Simpson do Bernard De Luna.

Cheguei a fazer alguns desenhos com CSS mas acabei abandonando esse hobby, até que um dia topei com o Desafio do Daily CSS Image, estava lá super enrolado no serviço, com um filho de 2 anos quase sem tempo para nada. Por que não fazer?
O desafio consiste em desenhar 1 desenho usando CSS por dia durante 50 dias.

A primeira semana até que foi tranquila.

Conforme ia chegando os temas os desenhos foram aumentando a dificuldade.

Então comecei a fazer eles durante um cache e outro da tarefas da agência e no horário do almoço, era tipo uma linha de código e uma colher de comida. rs

Confesso que teve dia que não consegui fazer e tiver que fazer 2 no dia seguinte, não conta para o criador do desafio e nem pro meu chefe. kkk

Ta, mais você vai usar isso no seu dia dia?

A resposta é simples: NÃO.

Então por que eu fiz isso?

A resposta também é simples: Porque é divertido.

Faça um desenho usando somente CSS e você vai ver como é muito divertido e quando você terminar e vê o resultado final, você fala C#@$@ eu fiz isso.

Mas deixando de lado a brincadeira, quando você faz esses desenhos usando CSS você aprende a usar um monte de propriedades do CSS como:

Position
Transform
Border-radius
z-index
Animations
Flex-box
Calc
Gradiente

O céu é o limite. :)

Agora isso sim vai fazer diferença no seu dia dia!

Confira todos os desenhos no Codepen

Como falei no começo que não tenho talento para fazer desenho a mão, mais através dos desenhos feito com CSS achei uma maneira de me expressar e aprender brincando.

Tenho muito para aprender sobre CSS e este é apenas o começo de uma longa viagem que vou continuar…

Espero que eu possa ter inspirado alguém a começar sua jornada!

Obrigado por parar um tempo para ler sobre a minha jornada. Se você conhece alguém que achou essa postagem útil ou inspiradora, compartilhe-a com elas e dê a esta postagem um coração verde.

Criando um monorepo com Lerna e Next.js

Henrique Rodrigues — Thu, 01 Jul 2021 00:18:22 +0000

Usar uma estrutura monorepo para seu aplicativo pode ser muito vantajoso. Uma estrutura monorepo pode tornar mais fácil gerenciar vários aplicativos ou pacotes dependentes.

O que é Lerna?

Lerna é uma ferramenta que otimiza o fluxo de trabalho em torno do gerenciamento de repositórios de vários pacotes com git e npm.

O que é Next.js?

Next.js é uma estrutura da web de desenvolvimento front-end React de código aberto criada por Vercel que permite funcionalidades como renderização do lado do servidor e geração de sites estáticos para aplicativos da web baseados em React.

Vamos começar instalando o Lerna globalmente

yarn global add lerna

Em seguida precisamos criar uma pasta para nosso projeto

mkdir poc-lerna

Agora podemos executar o comando init do Lerna na pasta que criamos

lerna init

Esse comando vai gerar essa estrutura no seu projeto

Criando o pacote de front-end

Vamos criar nossa aplicação front-end utilizando o Next.js dentro de packages

cd packages && yarn create next-app

Agora a estrutura do projeto vai ficar desse jeito

Criando o pacote de componentes

O pacote de componentes vai ficar dentro da pasta packages e é nele que vamos criar os componentes utilizando o React que sera consumido dentro da aplicação front-end

Para criar esse pacote vamos utilizar o comando do Lerna

lerna create components

na linha entry point coloque dist/index.js, caso não tenha colocado abra o arquivo package.json dentro de componente e altere o valor de main para dist/index.js

Agora a estrutura do projeto vai ficar desse jeito

Vamos adicionar microbundle ao nosso pacote de componentes

O que é microbundle?

Microbundle é um agrupador de zero configuração para módulos minúsculos, ele é um wrapper em torno de rollup.

cd packages/components && yarn add microbundle -D

Agora vamos alterar o script do pacote de componente para utilizar o microbundle

// packages/components/package.json

"scripts": {
   ..
   "dev": "microbundle watch --jsx React.createElement lib/*.js"
 },

Além disso, vamos adicionar um source apontando para um aquivo de index.js dentro de lib no arquivo package.json

// packages/components/package.json

"source": "lib/index.js",

Agora já podemos executar nossos pacotes utilizando o lerna, e caso tudo esteja certo vamos ver esse retorno no terminal

lerna run dev

Após esse comando conseguimos acessar nossa aplicação front-end acessando http://localhost:3000

Podemos também rodar nossos pacotes utilizando o comando acima passando --parallel, com isso conseguimos ver no terminal a compilação de ambos os pacotes mais detalhado.

Adicionando nosso pacote de componentes na aplicação front-end

Para fazer isso, podemos simplesmente adicionar o pacote de componentes no arquivo package.json do pacote front-end

// packages/front-end/package.json

"dependencies": {
   ..
   "components": "0.0.0"
 }

Estamos utilizando a versão 0.0.0 pois é a mesma versão que esta no package.json do nosso pacote de components

Criando um componente

Para criar nosso componente precisamos primeiro adicionar o React dentro pacote de componentes

cd packages/components && yarn add react -D

Vamos criar um componente Button e importa-lo em nossa aplicação

// packages/components/lib/Button/index.js

import React, { Fragment } from "react";

const Button = ({ onClick, children }) => {
  return (
    <>
      <button className="button" onClick={onClick}>{children}</button>
      <style jsx="true">
        {`
          .button  {
            margin: 20px 0;
            background-color: #0070f3;
            border: 0;
            cursor: pointer;
            color: #FFFFFF;
            font-size: 1.3em;
            padding: 8px 16px;
          }
        `}
        </style>
    </>
  );
};

export default Button;

export default Button;

Vamos criar um arquivo index.js dentro de lib e exportar esse componente

// packages/components/lib/index.js

"use strict";

import Button from "./Button";

module.exports = {
 Button
};

Agora, podemos importar este componente em nosso pacote de front-end

// packages/front-end/pages/index.js

import Head from "next/head";
import { Button } from "components";

const Home = () => (
 <div className="container">
     ..
     <Button 
       onClick={() => console.log("button clicked!")}
     >
       Click me
     </Button>
     ..
 </div>
);

export default Home;

Antes de rodar o projeto vamos rodar o comando do Lerna para vincular os pacotes locais e instalar as dependências de pacotes restantes

lerna bootstrap

Para finalizar vamos rodar novamente nosso projeto e visualizar a aplicação front-end no navegador, se você clicar no botão pode verificar no console que foi printado o texto button clicked!

lerna run dev

É isso! Esse é um exemplo simples de criar um monorepo com Lerna e Next.js e eu sei que existe outras maneiras de fazer isso, mais é uma base legal para entender um pouco de monerepo com Lerna e evoluir.

Aqui está o código completo deste artigo: lerna-with-nextjs

Caso queira se aprofundar no assunto

Lerna
Microbundle
Next.js

Criando uma biblioteca de componentes usando Create React App

Henrique Rodrigues — Fri, 28 Feb 2020 13:47:06 +0000

Atualização: Você pode usar o npm package create-component-lib para automatizar todas as etapas descrita neste post.

Create React APP é facilmente a melhor ferramenta para criar e desenvolver aplicações React. Com um pouco de trabalho, também é possível usar para criar uma biblioteca de componentes React que pode ser publicado no npm e outras aplicações React. Aqui está o que você precisa fazer:

1 - Criando um novo projeto usando create-react-app:

create-react-app simple-component-library

2 - Delete todos arquivos dentro da pasta src/. e depois crie um novo arquivo App.js com algum código inicial:

3 - Crie uma nova pasta src/lib e coloque seus componentes React dentro dele. src/lib vai servir como a pasta raiz do módulo publicado no npm. Aqui está o código para um componente exemplo:

// src/lib/components/TextInput.jsimport React from "react";

import "./TextInput.css";

const TextInput = ({
  type = "text",
  label,
  placeholder,
  value,
  onChange,
  helpText
}) => (
  <div className="simple-form-group">
    {label && <label className="simple-text-label">{label}</label>}
    <input
      type={type}
      className="simple-text-input"
      value={value}
      onChange={e => onChange && onChange(e.target.value)}
      placeholder={placeholder}
    />
    {helpText && <small className="simple-form-text">{helpText}</small>}
  </div>
);

export default TextInput;

O estilo pode ser feito inline, ou em um arquivo CSS separado:

// src/lib/components/TextInput.css

.simple-form-group {
  margin-bottom: 1rem;
}
.simple-text-label {
  display: block;
  color: red;
}
.simple-text-input {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 400;
  color: rgb(33, 37, 41);
}
.simple-form-text {
  color: #6c757d !important;
  display: block;
  margin-top: 0.25rem;
  font-size: 80%;
  font-weight: 400;
}

Por último, podemos exportar o componente do src/lib/index.js para facilitar o importe:

import TextInput from "./components/TextInput";

export { TextInput };

Opcional, você pode também escrever testes para os componentes dentro de src/lib:

//src/lib/components/TextInput.test.js

import React from "react";
import TextInput from "./TextInput";
import renderer from "react-test-renderer";

describe("TextInput", () => {
  it("renders properly", () => {
    const tree = renderer
      .create(<TextInput label="Email" placeholder="name@example.com" />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

4 - (Opcional) Use os componentes no src/App.js para criar exemplos para testes e debugging durante o desenvolvimento. Qualquer código colocado fora do src/lib não vai ser publicado no npm. Aqui está um exemplo usando o TextInput:

import React from "react";
import { TextInput } from "../lib";

const App = () => (
  <div style={{ width: 640, margin: "15px auto" }}>
    <h1>Hello React</h1>
    <TextInput label="Email Address" placeholder="name@example.com" />
  </div>
);

export default App;

Rode o comando npm start e navegue para http://localhost:300 para visualizar o resultado:

Dica: Use o react-live para criar um site de documentação editável ao vivo!

5 - Instale o babel-cli usando o comando npm i babel-cli — save-dev e crie um aquivo .babelrc na raiz do seu projeto com o seguinte conteúdo:

{
  "presets": ["react-app"]
}

6 - Altere o script build dentro do package,json com o seguinte conteúdo:

"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",

O comando npm run build agora transpilará o código dentro do src/lib (ignorando os testes e snapshots) dentro da pasta dist.

7 - Remova a linha “private”: true do package.json. Além disso remova o react-scripts, react e react-dom da dependencias, e coloque eles na devDependencies. Além disso você pode adicionar o react e react-dom como peerDependencies.

8 - Preparando a publicação, adicione o seguinte linha de código no package.json:

"main": "dist/index.js",
"module": "dist/index.js",
"files": [ "dist", "README.md" ],
"repository": {
  "type": "git",
  "url": "URL_OF_YOUR_REPOSITORY"
}

9 - Remova o texto default do arquivo README.md e crie um novo texto com alguma informação sobre a biblioteca.

# simple-component-library

A library of React components created using `create-react-app`.

## Installation
Run the following command: `npm install simple-component-library`

10 - Publicando no npm!

npm run publish

É isso! Agora você pode instalar sua biblioteca com o comando npm install simple-component-library e usar isso em qualquer projeto criado usando o Create React App.

Aqui está o código completo deste artigo:

Simple Component Library

Você pode clonar o repositório e usar ele para começar como ponto de partida para pular algumas dessas etapas. Espero que ajude!

Créditos

Creating a library of React components using Create React App, escrito originalmente por Aakash Rao N S

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter.

Criando gráficos com o React Google Charts

Henrique Rodrigues — Thu, 30 Jan 2020 23:57:39 +0000

Para quem não conhece, o Google Charts é uma ferramenta de gráficos poderosa, simples de usar e gratuita. Você pode escolher desde simples gráficos de dispersão a mapas

Criando um novo projeto usando create-react-app:



create-react-app react-google-charts

Vamos adicionar no projeto o Google Charts:



yarn add react-google-charts

Vamos abrir o arquivo src/App.js e remover os códigos que não vamos utilizar e fazer o import do Goolge Charts:



import React from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Agora vamos criar 2 states para controlar as informações do gráfico: um vai ser para os options e o outro para o data:



import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {}
  const [data, setData] = []
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

No options vamos adicionar o titulo e no data os valores do gráfico:



import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {
    title: 'Gráfico de Pizza'
  }
  const [data, setData] = [
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Para finalizar vamos adicionar o componente Chat e passar nosso state para ele:



import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  })
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

Agora só falta visualizar o gráfico, rode o comando abaixo na pasta do projeto e acesse o projeto no seu navegador http://localhost:3000/:



yarn start

O Google Chats tem diversos gráficos para você utilizar e você pode adicionar mais de um gráfico na pagina, como por exemplo, o de barra



import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  });
  const [optionsBar, setOptionsBar] = useState({
    title: 'Gráfico de Barra'
  });
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]);
  const [dataBar, setDataBar] = useState([
    ['Cidades', '2010 População', '2000 População'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div style={{display: "flex"}}>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="BarChart"
            data={dataBar}
            options={optionsBar}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

Atualize seu navegador e veja o novo gráfico

Como eu disse no começo do texto ele é bem simples de utilizar e bem poderoso, acesse o link do Google Chats e veja na documentação todos os modelos de gráficos e suas configurações

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter.

Forem: Henrique Rodrigues

Network Link Conditioner: Simulando Conexões Lentas

Network Link Conditioner: Simulando Conexões Lentas

🛠 O que é o Network Link Conditioner?

📥 Como instalar o Network Link Conditioner

1. Descarregar as ferramentas adicionais do Xcode

2. Instalar o Network Link Conditioner

3. Ativar e configurar

📱 Como usar no iOS Simulator

🧪 Testes práticos com NLC

🔄 Alternativas ao Network Link Conditioner

✅ Conclusão

Melhorando a Acessibilidade com :focus-visible no CSS

O Problema com :focus

Exemplo com :focus:

A Solução: :focus-visible

Exemplo com :focus-visible:

Diferença entre :focus e :focus-visible

Exemplo em Formulário Acessível

Suporte dos Navegadores

Conclusão

CSS Nesting Nativo: A Revolução do Aninhamento de Estilos no CSS

O Que é CSS Nesting?

Exemplo Tradicional com Sass:

O Desafio Antes do CSS Nativo

O Que Mudou com o CSS Nesting Nativo?

A Nova Sintaxe

Exemplo de CSS Nesting Nativo:

O Que Isso Significa para os Desenvolvedores?

Vantagens do CSS Nesting Nativo

Considerações Importantes

Conclusão

Fique de Olho nas Novidades

Como utilizar o Intersection Observer no React

Primeiro passo

Utilizando no React

Créditos

Carrossel de logo infinito css puro

Progressive Web apps: O futuro do desenvolvimento web

Sobre o que é todo esse zumbido sobre o PWA?

A origem do PWA

Vamos construir nosso primeiro PWA: Começando a aventura

Parte 1: O Básico - Apenas uma simples webpage

Parte 2: Adicionar alguns estilos - Porque toda piada ruim precisa de um visual bom.

Parte 3: A magia do javascript = Request piadas ruins

Passo 4: Transformando em PWA - Uma pitada de superpoderes

Passo 5: O molho secreto: Service Workers

Testando os superpoderes do PWA

O futuro é progressivo

Créditos

Desbloqueando o poder do React 19: aproveite o novo 'use' API

Qual é a mágica sobre o 'use'?

O cenário atual: uma atualização rápida

Como é que o 'uso' API vai fazer essa magia?

Mergulhando mais fundo: A mecânica do 'use'

Porque é que vai se apaixonar pelo 'use' API

Utilizando no mundo real, isto vai fazer dizer "top!"

Potenciais armadilhas e melhores práticas

Abraçando o futuro do React

Preparar-se para o 'use'

Conclusão

Como foi o desafio Daily CSS Image

Criando um monorepo com Lerna e Next.js

O que é Lerna?

O que é Next.js?

Criando o pacote de front-end

Criando o pacote de componentes

O que é microbundle?

Adicionando nosso pacote de componentes na aplicação front-end

Criando um componente

Criando uma biblioteca de componentes usando Create React App

Créditos

Criando gráficos com o React Google Charts

O Problema com `:focus`

Exemplo com `:focus`: