Forem: William Gonçalves

Funções Genéricas Inteligentes

William Gonçalves — Wed, 18 Jun 2025 11:00:00 +0000

O que faz uma lib parecer "mágica"? Inferência de tipos!

E você pode usar isso hoje!

Funções reutilizáveis são o coração de qualquer projeto ou lib

Imagine que precisamos retornar nome e idade de um usuário. A solução mais rápida seria essa:

type User = {
    id: string;
    name: string;
    age: number;
    email: string;
}

function getNameAndAge(user: User): { name: string; age: number } {
  return {
    name: user.name,
    age: user.age,
  };
}

const user: User = { 
    id: '1234', 
    name: 'William', 
    age: 36, 
    email: 'iwilldev@outlook.com.br'
}

const userNameAndAge = getNameAndAge(user);
// valor: { "name": "William", "age": 36 }
// tipo:  { name: string, age: number }

E qual é o problema nisso?

❌ A função só serve pra isso
❌ Você provavelmente não vai usar de novo
❌ Ela infere um tipo sem relação com o original
❌ Ou você vai declarar um novo tipo pro retorno

A mágica dos generics + inferência

Vamos criar uma função pick que aceita como parâmetro: (a) um objeto e (b) um array de chaves correspondentes a ele. Como retorno da função, um "partial" do tipo original.

function pick<T, K extends keyof T>(
  obj: T, 
  keys: K[]
): Pick<T, K> {
  const result = {} as Pick<T, K>;
  for (const key of keys) {
    result[key] = obj[key];
  }
  return result;
}

O resultado?

Uma implementação segura, precisa, flexível e reutilizável, mantendo referência ao tipo original

const user: User = { 
    id: '1234', 
    name: 'William', 
    age: 36, 
    email: 'iwilldev@outlook.com.br'
}

const userNameAndAge = pick(user, ["name", "age"])
// valor igual 🙃: { "name": "William", "age": 36 }
// tipo relacionado ao original: Pick<User, "name" | "age">

A partir daí, você vai ao infinito e além 👉

Uma função omit, para remover propriedades de um objeto

type OmitKeys<T, K extends keyof T> = {
  [P in keyof T as P extends K ? never : P]: T[P];
};

function omit<T, K extends keyof T>(
  obj: T,
  keys: K[]
): OmitKeys<T, K> {
  const result = { ...obj };
  keys.forEach(key => delete result[key]);
  return result;
}

const userWithoutId = omit(user, ["id"])
/* valor: {
  "name": "William",
  "age": 36,
  "email": "iwilldev@outlook.com.br"
} */
// tipo: OmitKeys<User, "id">

Uma merge, para combinar dois objetos diferentes

// const user: User = { ... }

type Role = {
  role: 'admin' | 'editor' | 'viewer';
  permissions: Array<'read' | 'write' | 'delete' | 'update'>;
};

const role: Role = {
    role: 'viewer',
    permissions: ['read']
}

const userWithRole = merge(user, role)
/* valor: {
  "id": "1234",
  "name": "William",
  "age": 36,
  "email": "iwilldev@outlook.com.br",
  "role": "viewer",
  "permissions": [
    "read"
  ]
} */
// tipo: User & Role

As possibilidades são infinitas

Com generics + inferência, você escreve:

✅ Código mais seguro
✅ Helpers mais inteligentes
✅ Implementações mais elegantes

😎

E claro: muitas libs trazem funções como essas.

Mas será que você precisa de uma lib inteira, pra resolver um problema pontual? Então domine seu código, abraçando o poder do TypeScript e tudo o que ele pode fazer pelo seu projeto!

Qual função você mais curtiu?

Me conta aí nos comentários!

🔁 Salve, compartilhe e siga para mais conteúdo

Por que eu amo Remix? (por Kent C. Dodds)

William Gonçalves — Thu, 26 Jan 2023 00:04:32 +0000

Esse artigo é uma tradução do post Why I Love Remix do Kent C. Dodds. Obrigado, Kent, por permitir a tradução do conteúdo e por compartilhar tanto conhecimento com a comunidade.

kentcdodds.com é totalmente feito por mim (e pelo time) usando Remix. Depois de escrever dezenas de milhares de linhas de código usando esse framework, criei grande apreciação pelo que ele pode fazer por mim e pelos usuários do meu site. E quero te falar um pouco sobre isso.

Em uma frase

Essa é a principal razão pela qual eu amo usar o Remix para construir sites:

Remix me permite construir experiências de usuário incríveis e ainda ficar feliz com o código que eu tive que escrever para chegar lá.

E o que isso significa? Vamos nos aprofundar...

A Experiência do Usuário

Há um monte de fatores que impactam a experiência do usuário quando eles usam nossos softwares. Na maior parte do tempo, acho que as pessoas estão focadas na performance/velocidade e, embora isso seja uma parte importante, é apenas um pedaço do todo. A experiência do usuário inclui uma série de outros aspectos do seu site. Aqui estão alguns:

Acessibilidade
Performance
"Reflow" de conteúdo (quando um navegador processa e remonta parte ou toda uma página, após uma atualização ou interação).
Confiabilidade e disponibilidade
Tratamento de erros
Gerenciamento de pendências
Gerenciamento de estado
Melhoria progressiva
Resiliência (comportamento em condições de rede ruins)
Layout
Clareza do conteúdo

Até mesmo a velocidade de desenvolvimento de features pode impactar a experiência do usuário. Então a UX é indiretamente impactada pela manutenibilidade do nosso código.

Remix nos ajuda com muitos desses aspectos. Alguns sem que eu precise pensar nisso. Em particular, alguns dos maiores desafios envolvendo gerenciamento de estado (race conditions de mutações e carregamento de dados) são totalmente gerenciados dentro do framework. Por causa disso, os usuários não se deparam com a necessidade de atualizar a página porque estão vendo dados desatualizados. Isso acontece sem que eu precise pensar nisso. É como o Remix funciona.

Remix faz muito para manter meu site rápido através do uso de tags <Link /> para pré-carregar recursos e dados no momento certo. Às vezes, fico impressionado com o fato de meu site parecer composto por arquivos estáticos em um CDN, mas na verdade é renderizado/hidratado no servidor e cada página é completamente única para cada usuário (portanto, um cache HTTP compartilhado em um CDN não seria possível).

Usar as APIs da plataforma é o que nos permite isso. É também o que faz o Remix ser tão resiliente e ótimo para melhorias progressivas. Em condições de rede ruins, onde o carregamento do JavaScript é lento ou falha, a API padrão do Remix para mutações (<Form />) vai funcionar mesmo antes do app ser hidratado. Isso significa que o usuário pode começar a fazer o trabalho com o app, mesmo que esteja em uma conexão ruim. Muito melhor do que um botão em que o handler do onClick ainda não foi carregado (que era o meu padrão antes do Remix)!

A forma declarativa do Remix tratar erros me permite lidar com eles no contexto em que eles acontecem. Combinado com o roteamento aninhado, o que você obtém é a capacidade de renderizar um erro contextual sem quebrar o resto do app.

E isso também funciona no servidor (que é sem igual no Remix), então os usuários terão a mesma experiência, independente do erro ter acontecido durante uma transição no client ou em um carregamento completo da página.

Remix traz a excelência como padrão da experiência do usuário. E é uma das principais razões pelas quais eu amo o framework.

O Código

Os apps que eu ajudei a construir são usados por milhões de pessoas pelo mundo. Construir sites com Remix me faz feliz com o código que coloco em produção. A maior razão para isso é que antes do Remix eu gastava muito tempo tentando resolver problemas de experiência do usuário. Pelo Remix ajudar tanto com a UX, lido com menos complexidades no código. Então tudo que me resta fazer é usar as APIs declarativas que Remix (e React) me dão, para construir meu app e a experiência do usuário é boa por padrão.

Quando uso Remix, posso deixar os truques em casa.

Francamente, esse é o maior ponto a se falar sobre o código: você percebe que códigos de demonstração são normalmente mais simples, ignorando nuances como estados pendentes, race conditions, tratamento de erros, acessibilidade, etc? Bem, meu código não é tão simples como um código de demonstração, mas o Remix deixa ele bem próximo, em simplicidade. Eu definitivamente ainda penso em acessibilidade (apesar das bibliotecas @reach-ui do Remix ajudarem bastante com isso) e estados pendentes/erros. Mas as APIs que o Remix me dá para essas coisas são simples e declarativas:

// app/events/$eventId/attendees.tsx

const loader: LoaderFunction = async ({request, params}) => {

  // isso é executado no servidor
  // erros inesperados de execução irão disparar o ErrorBoundary para ser renderizado
  // erros esperados (como 401s, 404s, etc) irão renderizar o CatchBoundary
  // caso contrário, retorno uma resposta e isso irá renderizar o componente padrão

  return json(data)
}

export default function AttendeesRoute() {
  const data = useLoaderData()
  return <div>{/* renderiza os dados em 'data' */}</div>
}

export function ErrorBoundary({error}) {
  return <div>{/* renderiza uma mensagem do erro inesperado */}</div>
}

export function CatchBoundary() {
  const caught = useCatch()
  return <div>{/* renderiza a mensagem de erro para respostas tipo 400 */}</div>
}

Ah! E para estados pendentes (seja mutações ou transições regulares) você pode colocar isso onde quiser que o efeito de Pending UI apareça (seja global ou local):

const transition = useTransition()

const text =
  transition.state === 'submitting'
    ? 'Saving...'
    : transition.state === 'loading'
    ? 'Saved!'
    : 'Ready'

Isso simplifica drasticamente o código React que eu escrevo, ao ponto de eu não escrever nenhum código React ligado a HTTP. Essa comunicação client-server é totalmente gerenciada pelo Remix de uma forma que otimiza a UX. E a fronteira entre cliente e servidor pode ser totalmente tipada, então eu gasto menos tempo indo e voltando entre o navegador e o editor para corrigir erros bobos.

Também amo o fato do Remix ser fundamentado nas APIs da Web. Essa função json que chamamos na loader é apenas uma função simples para criar um objeto Response. Isso mesmo! Se você quiser aprender a fazer algo com o Remix, gastará mais tempo na mdn do que na documentação do Remix e isso me leva a outra coisa que amo sobre o Remix:

Quanto melhor eu construo sites com Remix, melhor eu construo sites para a web.

Isso acontece naturalmente graças ao fato do Remix usar muito da plataforma web e recorrer, o máximo possível, às APIs da Web. (Isso é semelhante ao fato de quanto melhor eu me sinto com React, melhor eu me sinto com JavaScript.)

E pelo Remix ser fundamentado nas APIs da Web como a interface comum para o servidor, você pode implantar o mesmo aplicativo em qualquer plataforma (desde que o código que você traga junto funcione nessas plataformas) e tudo que você precisa fazer é mudar qual adapter você está usando. Se você quiser executar em serverless ou em um contêiner Docker, o Remix cuida de tudo.

Remix é o jQuery das plataformas de hospedagem. Ele normaliza as diferenças para que você possa escrever uma vez e hospedar em qualquer lugar.

Outro lance incrível da loader é que, como ela é executada no servidor, eu posso integrar com APIs que me dão muito mais dados do que eu preciso e filtrar apenas o que é necessário. Isso significa que eu posso eliminar o problema de overfetching (sobrecarga de dados) que nos leva a usar a complexidade do graphql, por exemplo. Quero dizer, você ainda pode utilizar o graphql com o Remix, mas já que ele gerencia a comunicação cliente-servidor pra você, não há a necessidade de enviar uma biblioteca graphql enorme e complexa para o navegador: é só confiar no Remix para fazer a coisa certa no momento certo (o que ele faz).

E se eu precisar de dados extras, basta voltar na loader e incluí-los na resposta. Tudo tipado e pronto para o código do lado do cliente. É fabuloso.

Eu mencionei o componente <Form /> anteriormente e como ele ainda funcionará mesmo antes do JavaScript ser carregado. E isso é ótimo para a experiência do usuário. E também é ótimo para a DX (Developer Experience - Experiência do Desenvolvedor), porque não preciso gerenciar um monte de fetch e estados para minhas mutações. Normalmente, tenho um onSubmit que adiciona um event.preventDefault(), fetchs, gerenciamento de race condition e invalidação de cache. Bem, com o Remix, tudo isso some e eu fico com uma API declarativa para as mutações:

// app/events/$eventId/attendees.tsx

const action: ActionFunction = async ({request}) => {

  /* isso é executado no servidor e eu posso lidar com os dados
  do formulário (formData) aqui, seja em uma interação direta com o
  banco de dados ou chamando um serviço downstream para realizar
  a mutação. É simplesmente brilhante. */

  return redirect(/* envie o usuário pra onde quiser, depois disso */)
}

export default function AttendeesRoute() {
  // Olha só! Nenhum event handler ou useEffect necessário!
  // Race conditions resolvidas.
  return (
    <Form method="post">
      <div>
        <label htmlFor="name-input">Name: </label>
        <input id="name-input" name="name" />
      </div>
      <div>
        <label htmlFor="email-input">Email: </label>
        <input id="email-input" name="email" type="email" />
      </div>
      <button type="submit">Add Attendee</button>
    </Form>
  )
}

Ah! E você quer validação, certo? Bem, se você quiser fazer isso no servidor, então pode colocá-la na action. E se você quiser validar no cliente também? Bem, você literalmente move a lógica de validação da action para uma função e chama-a tanto na action quanto no seu componente. É isso!

Conclusão

Eu poderia seguir em frente, falando mais. Há tantos posts e workshops dentro da minha cabeça. Eu nem falei sobre como é simples implementar o Optimistic UI com o Remix, autenticação segura, abstração (reuso de código), paginação, não precisar de componentes <Layout /> graças ao roteamento aninhado, e muito mais. Eu vou falar sobre tudo isso eventualmente, prometo.

E no fim do dia, tudo volta a isso:

Eu amo o Remix porque ele me permite construir experiências incríveis para o usuário e ainda ficar feliz com o código que escrevi para chegar lá.

E isso é algo que eu posso apoiar e impulsionar.

Quer se juntar a mim?

Intersection Observer - Lazy loading, animações em scroll e scroll infinito de forma nativa e sem libs

William Gonçalves — Thu, 22 Dec 2022 13:54:34 +0000

Salve, devs e divas!

Esse post inicia uma série que visa explorar as Web APIs, descobrindo e apresentando funcionalidades que podem ser alcançadas a partir delas.

E considerando o costume de utilizarmos abstrações que trazem o mesmo resultado, queremos empoderar as opções nativas a fim de reduzir dependências em projetos e aprofundar os conhecimentos sobre os recursos disponíveis na Web.

Como Front-Ender, já esbarrei em alguns desafios para aumentar a interatividade da página com infinite scrollings e animações de elementos quando eles entram e saem do viewport, ou até mesmo questões que impactam performance como lazy-loading em imagens, a partir das ações do usuário.

Em casos como esse, tudo se resumiria a verificar a intersecção entre um elemento alvo e um elemento pai ou até mesmo entre ele e o viewport (área visível para o usuário) do documento e, a partir do estado e da visibilidade do alvo observado, aplicar as mudanças necessárias.

Detectar a visibilidade de um elemento (ou entre dois deles) envolvia soluções não muito confiáveis e que tendiam a gerar problemas de performance nas páginas, já que precisávamos de handlers e loops aplicados a cada elemento afetado e chamando métodos como o Element.getBoundingClientRect(), o que gerava um peso na main thread da aplicação, deixando a página e o próprio navegador mais lentos.

Conceitos e uso

A Intersection Observer API fornece uma maneira de observar alterações de intersecção de forma assíncrona. Com sua implementação, o site não precisa mais lidar com essa responsabilidade na main thread e o navegador fica livre para gerenciar as observações como achar melhor.

É possível declarar uma função de callback que é executada nas seguintes circunstâncias:

Um elemento alvo cruza (total ou parcialmente, conforme configuração) com o elemento root.
A primeira vez que o Observer é solicitado a observar um elemento alvo.

Essa API tem compatibilidade total com todos os navegadores modernos, com ressalvas para o Safari (Desktop e iOS) e o Firefox for Android onde o elemento root não pode ser um documento.

Criando um Intersection Observer

Para criar um intersection observer você deve chamar seu construtor, enviando uma função de callback como primeiro parâmetro e um objeto options como parâmetro (opcional) seguinte:

let options = {
  root: document.querySelector('#rootElement'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

Intersection observer options

O objeto options passado no construtor IntersectionObserver() te permite controlar as circunstâncias em que a função de callback será executada:

root - Um elemento ancestral especificado ou o próprio viewport, na ausência de elemento declarado ou se o valor for null.
rootMargin - Define os limites de margem do elemento root, aumentando ou diminuindo a delimitação desse elemento, antes de computar uma intersecção. Pode ter valores similares ao CSS, como "10px 20px 30px 40px" (top, right, bottom, left).
threshold - A taxa de interseção (intersection ratio), que representa o percentual de visibilidade do elemento alvo em relação ao root: um valor entre 0,0 e 1,0. O callback será executado sempre que a visibilidade do alvo ultrapassar o valor declarado, para cima ou para baixo. Pode ser declarado como:
- Um número. Ex: 0.5. Callback executado quando a visibilidade ultrapassar 50%.
- Um Array de números: Ex: [0, 0.25, 0.5, 0.75, 1]. O callback será executado em cada percentual relacionado aos valores declarados. Nesse caso, a cada 25% de visibilidade.

Declarando um elemento para ser observado

Agora que criou o observer, você precisa declarar um elemento a ser observado por ele:

let target = document.querySelector('#targetElement');
observer.observe(target);

Nesse momento, o callback é executado pela primeira vez, mesmo que o elemento alvo não esteja visível.

Sempre que a visibilidade do alvo ultrapassar o valor de threshold, o callback é invocado, recebendo uma lista de objetos IntersectionObserverEntry e o próprio observer.

Esteja ciente de que esse callback, em si, será executado na main thread. Então tente não complicar a lógica executada nesse escopo:

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      /* Verificamos o estado da 'entry' e efetuamos
      as alterações necessárias caso ela esteja visível */  
    }
  });
};

Boa parte das aplicações desse Observer podem ser feitas verificando apenas a propriedade isIntersecting da entry, que retorna um boolean indicando se o elemento alvo está, ou não, cruzando com o elemento root, considerando os parâmetros declarados no objeto options.

Para ver mais propriedades da interface IntersectionObserverEntry, confira a documentação na MDN.

Partindo do princípio que temos a base necessária para avançar, vamos aos casos de uso.

Arquivos utilizados

Você pode usar o repositório desse artigo com os arquivos finais divididos em pastas para cada caso.

Lazy-loading

Imagine carregar todos os assets de uma página inteira e o usuário nem visualizá-los, porque decidiu desviar a navegação para outra página. Vira um desperdício de recurso para ele que no caso de estar em uma rede móvel, consumiu dados à toa e para você que precisou servir arquivos que não foram utilizados de fato.

Partindo disso, vamos criar uma página em que as imagens só serão carregadas se estiverem visíveis.

Começando pelo arquivo index.html:

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Lazy Loading</title>
</head>

<body>
  <section>
    <img class="lazy" src="placeholder.png" data-src="https://picsum.photos/300/200" />
  </section>
  <section>
    <img class="lazy" src="placeholder.png" data-src="https://picsum.photos/300/201" />
  </section>
  <section>
    <img class="lazy" src="placeholder.png" data-src="https://picsum.photos/300/202" />
  </section>
  <section>
    <img class="lazy" src="placeholder.png" data-src="https://picsum.photos/300/203" />
  </section>
  <script src="script.js"></script>
</body>

</html>

Nas tags img, declaramos um placeholder no atributo src, que será renderizado inicialmente. No atributo data-src, colocamos a URL da imagem desejada. Além disso, declaramos a classe lazy que será usada para selecionarmos as imagens.

Temperamos com o style.css:

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

html,
body {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f5f5f5;
}

section {
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

Agora precisamos observar as imagens e, quando elas estiverem visíveis, trocar o placeholder para a URL desejada. No arquivo script.js:

Começamos selecionando as imagens.

const images = document.querySelectorAll('.lazy');

Criamos nosso Observer.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      image.classList.remove('lazy');
      observer.unobserve(image);
    }
  });
});

Dentro do callback, usamos o forEach nas entries e para cada entry verificamos se ela está cruzando a área visível (entry.isIntersecting). Se positivo, declaramos o entry.target como image, substituímos o src pelo data-src, removemos a classe lazy da imagem e mandamos o observer deixar de observar a imagem.

Em seguida, utilizamos um forEach na NodeList gerada com nosso seletor do início, observando cada uma das imagens:

images.forEach(image => {
  observer.observe(image);
});

As imagens que já foram visualizadas têm o src com a URL desejada e as que ainda não apareceram na tela, seguem com o placeholder:

Abrindo a aba Rede/Network no Dev Tools, você verá as imagens sendo carregadas conforme aparecem na tela.

Você pode conferir o resultado nesse link.

Animações em scroll

Esse caso é interessante para aumentar a interatividade e imersividade da página. Quando um elemento se torna visível, adicionamos uma classe CSS dando o efeito desejado. Podemos ainda removê-la, caso o elemento não esteja mais visível, repetindo o efeito a cada novo scroll.

Começamos com o index.html:

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Lazy Loading</title>
</head>

<body>
  <section>
    <p class="animate">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, impedit explicabo sunt omnis veritatis quia
      soluta alias sed animi earum error recusandae maxime, at reiciendis amet magnam perspiciatis iure dolorem.
    </p>
  </section>
  <section>
    <p class="animate">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, impedit explicabo sunt omnis veritatis quia
      soluta alias sed animi earum error recusandae maxime, at reiciendis amet magnam perspiciatis iure dolorem.
    </p>
  </section>
  <section>
    <p class="animate">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, impedit explicabo sunt omnis veritatis quia
      soluta alias sed animi earum error recusandae maxime, at reiciendis amet magnam perspiciatis iure dolorem.
    </p>
  </section>
  <section>
    <p class="animate">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, impedit explicabo sunt omnis veritatis quia
      soluta alias sed animi earum error recusandae maxime, at reiciendis amet magnam perspiciatis iure dolorem.
    </p>
  </section>
  <script src="script.js"></script>
</body>

</html>

As tags p serão capturadas pelo observer através da classe animate.

Adicionamos o style.css, incluindo as classes animate e animate--active. Essa segunda será responsável pelo efeito desejado.

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

html,
body {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f5f5f5;
}

section {
  height: 100%;
  width: 100%;
  padding: 20px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.animate {
  width: 300px;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.5s ease-in-out;
}

.animate--active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease-in-out;
}

No script.js, começamos selecionando os textos através da classe animate.

const animatedTexts = document.querySelectorAll('.animate');

Criamos o observer e para cada entry, verificamos se ela está cruzando a tela. Se positivo, adicionamos a classe animate--active. Caso contrário, removemos essa classe.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate--active');
    } else {
      entry.target.classList.remove('animate--active');
    }
  });
});

Por fim, usamos o forEach na lista de textos, para adicioná-los ao observer.

animatedTexts.forEach(text => {
  observer.observe(text);
});

O efeito será o texto deslizando a partir da esquerda, até o centro do flex-container.

O resultado pode ser visto nesse link.

A partir desse conceito, você tem a liberdade de fazer o que quiser com qualquer elemento, seja adicionando ou removendo classes, ou até usando animações CSS, para chegar ao efeito desejado.

Scroll Infinito

Nesse caso, vamos criar uma página com rolagem infinita. Sempre que chegarmos ao último item da lista, novos itens serão adicionados, infinitamente.

É uma aplicação boa para lista de produtos, por exemplo, em que o usuário pode simplesmente rolar a página e continuar visualizando os itens disponíveis, sem precisar navegar ou usar paginação.

No index.html criamos uma div com a classe container, onde os itens serão adicionados. Abaixo dela, uma tag p com o texto loading... vai indicar o fim da lista, trazendo um retorno para o usuário de que há mais para ser visto.

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <main>
    <div class="container"></div>
    <p>loading...</p>
  </main>
  <script src="script.js"></script>
</body>

</html>

No style.css, incluímos os estilos, incluindo os das imagens que serão carregadas.

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

html,
body {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f5f5f5;
}

.container {
  height: 100%;
  width: 100%;
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

img {
  width: 320px;
  height: 320px;
  object-fit: cover;
}

No script.js, selecionamos o container:

const container = document.querySelector('.container');

Vamos criar uma função chamada getTenRandomImages, que vai retornar 10 imagens, com URLs aleatórias. Essa função será responsável por popular o container. Em cenários reais, ela pode ser substituída por uma chamada a uma API que retorna dados a serem usados no aplicativo, por exemplo.

const getTenRandomImages = () => {
  const images = [];
  for (let i = 0; i < 10; i++) {
    const image = document.createElement('img');
    image.src = `https://picsum.photos/300/300?random=${Math.random()}`;
    images.push(image);
  }
  return images;
};

Criamos o observer. No callback, se a entry observada (que será o último elemento filho do container) estiver cruzando a área visível, a função getTenRandomImages será usada para adicionar mais 10 imagens no container, a entry deixará de ser observada e o novo último filho (lastElementChild) do container passará a ser observado.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      container.append(...getTenRandomImages());
      observer.unobserve(entry.target);
      observer.observe(container.lastElementChild);
    }
  });
});

Por fim, adicionamos as 10 imagens iniciais no container e declaramos o último filho dele para ser observado, para que as novas imagens só sejam carregadas quando ele estiver visível.

container.append(...getTenRandomImages());
observer.observe(container.lastElementChild);

O resultado pode ser visto aqui.

Conclusão

Os casos apresentados aqui podem ser adaptados a contextos do mundo real, sem maiores dificuldades.

Considerando que a Intersection Observer API tira da main thread da aplicação essa responsabilidade de observar os elementos alvos, conseguimos escalar essa solução mesmo em aplicações com porte maior.

Ela também é aplicável a frameworks como React e Vue, desde que você saiba como selecionar os elementos nos DOMs que são gerados por eles. É basicamente substituir o querySelector e o querySelectorAll pela abordagem da ferramenta que você utiliza.

Para acompanhar outros posts, siga meus perfis nas redes sociais disponíveis em owillgoncalves.dev.

Um grande abraço e até a próxima!

Referências:

Intersection Observer API - Web APIs | MDN
Intersection Observer | W3C

Animando elementos quando saem e entram na tela com JavaScript

William Gonçalves — Thu, 14 Jan 2021 19:12:45 +0000

Como testar se um elemento está no viewport?

Existem muitas formas de se fazer isso, utilizando JavaScript. Essa funcionalidade pode ser útil para animar elementos que se tornam visíveis para o usuário, quando entram no viewport, otimizando a experiência e aumentando a imersão da sua aplicação.

Nesse tutorial, não vou focar na questão das animações, porque entendo que é um tópico muito particular, tanto do desenvolvedor, como do projeto.

A ideia é mostrar uma alternativa simples e fácil de ser implementada, para que você consiga capturar a posição de um elemento e animá-lo, seja na entrada ou na saída da janela.

Começamos pela estrutura básica (index.html). Utilizaremos um conjunto de 6 imagens aleatórias, através de uma API do Unsplash. Essas imagens serão animadas em duas situações: quando "saírem" para cima ou para baixo da área visível da janela, do viewport.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <img src="https://source.unsplash.com/random" class="image" alt="">
  <script src="script.js"></script>
</body>
</html>

Em seguida, adicionaremos estilos no style.css que são apenas demonstrativos, para o body e as imagens:

body {
  padding: 10rem 5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10rem;

  background: #121212;
  overflow-x: hidden;
}

img {
  width: 100%;
  max-width: 600px;
  height: 400px;
  object-fit: cover;

  transition: 0.5s;
}

Por último, ainda nos estilos, criaremos duas classes que serão aplicadas nas duas saídas possíveis do viewport:

.is-down, que será aplicada quando o elemento estiver abaixo da área visível
.is-up, que será aplicada quando o elemento estiver acima da área visível

Lembrando que as propriedades utilizadas aqui são apenas para efeito de demonstração. Sinta-se a vontade para criar suas próprias transições, dentro do resultado esperado.

.is-down {
  transform: translateX(25%);
  opacity: 0;
}

.is-up {
  transform: translateX(-25%);
  opacity: 0;
}

Capture e anime!

Já no script.js, vamos começar capturando nossa lista de imagens, utilizando o método querySelectorAll, que vai retornar uma lista com todas as imagens que têm a classe image:

const images = document.querySelectorAll(".image");

Em seguida, capturamos a altura da janela. Como queremos animar as imagens saindo acima e abaixo da área visível, saber a altura do viewport é fundamental para descobrir se um elemento está, ou não, na área visível para o usuário:

let windowHeight = window.innerHeight;

Criaremos uma função para animar as imagens. Ela vai utilizar o método forEach para percorrer a lista de imagens e aplicar as alterações necessárias.

Para cada imagem da lista, vamos criar uma variável chamada bounding a qual será atribuída o objeto DOMRect, retornado do método getBoundingClientRect().

Esse objeto conta com as dimensões do elemento, bem como com suas coordenadas em relação ao viewport. O código a seguir mostra um exemplo da estrutura desse objeto. Ele não fará parte do nosso exemplo.

Os valores das propriedades estão em pixels.

{
  bottom: -413.316650390625,
  height: 400,
  left: 491.5,
  right: 1091.5,
  top: -813.316650390625,
  width: 600,
  x: 491.5,
  y: -813.316650390625
}

A partir dessas coordenadas, que serão atribuídas a variável bounding, podemos definir se um objeto está dentro da área visível, partindo do seguinte raciocínio:

Como o eixo Y da página começa no topo, essa posição é igual a 0. A base da página será igual a altura que foi atribuída a variável windowHeight.

Se bounding.bottom, a base da imagem, for maior que windowHeight, a imagem não está dentro do viewport, mas abaixo da área visível, total ou parcialmente.

Se bounding.top, o topo da imagem, for menor que 0, a imagem não está dentro do viewport, mas acima da área visível, total ou parcialmente.

A partir daí, aplicamos as classes correspondentes. E caso nenhuma das lógicas seja verdadeira, removemos as classes da imagem, para que ela tenha sua aparência padrão, estando visível.

function animateImages() {
  images.forEach((image) => {
    let bounding = image.getBoundingClientRect();
    console.log(bounding);
    if (bounding.bottom > windowHeight) {
      image.classList.add("is-down");
    } else if (bounding.top < 0) {
      image.classList.add("is-up");
    } else {
      image.classList.remove("is-up");
      image.classList.remove("is-down");
    }
  });
}

E como queremos que esse efeito seja aplicado durante a rolagem da página, adicionamos um listener que vai capturar o scroll e executar a função animateImages().

document.addEventListener("scroll", function () {
  animateImages();
  document.removeEventListener("scroll", this);
});

Além disso, incluímos um listener que vai capturar o redimensionamento da janela, atribuindo a nova altura a variável windowHeight.

window.addEventListener("resize", function () {
  windowHeight = window.innerHeight;
  window.removeEventListener("resize", this);
});

E para que a aplicação já adicione as classes as imagens que não estão visíveis para o usuário, executamos a animateImages(), assim que a aplicação é iniciada.

animateImages();

Você pode ver a demonstração aqui

E como costumo dizer, aqui é só o ponto de partida.

Você pode explorar outras possibilidades, com o DOMRect do getBoundingClientRect().

Só pra deixar um outro cenário possível nesse exemplo, se você quiser que um elemento só passe por uma transição quando ele estiver totalmente fora do viewport, você pode mudar as condicionais para quando o bounding.bottom (base do elemento) for menor que 0 (saiu totalmente, acima), ou o bounding.top (topo do elemento) for maior que windowHeight (saiu totalmente, abaixo).

Você ainda pode adicionar áreas seguras para que seu elemento continue visível enquanto necessário. Pode aplicar as classes quando ele estiver a, por exemplo, 10% do fim da tela, acima ou abaixo.

Possibilidades infinitas que vão depender do que você pretende fazer com seus elementos.

Se você curtiu esse conteúdo, compartilhe com outras pessoas e ajude a espalhar a palavra!

Você pode me acompanhar nas minhas redes sociais:

Instagram
GitHub
LinkedIn

E conhecer mais sobre mim e meu trabalho no meu site:

owilliamgoncalves

Nos vemos na próxima!

Mudando tema da tela com CSS Puro (Dark/Light Mode)

William Gonçalves — Sun, 03 Jan 2021 11:22:49 +0000

We know the JS way

Mas e se não usarmos scripts para trocar o tema das nossas aplicações?

O caminho é uma relação entre cascata e seletores bem especificados.

Vamos do início:

HTML

O primeiro elemento da árvore será um input do tipo checkbox.

Seu irmão abaixo será o container da nossa aplicação. Ele é quem terá os estilos alterados para a mudança de tema.

Dentro dele, teremos um label relacionado ao nosso input lá de cima, dentro de uma div que será sua área de transição, servindo como nosso botão para mudar o tema.

<body>
  <input type="checkbox" id="theme-switcher">
  <div id="app-container">
    <div class="theme-switcher-area">
      <label for="theme-switcher" class="theme-switcher-button">
      </label>
    </div>
    <h1>Mudando tema com CSS Puro</h1>
    <p>O texto fica em contraste 
    com o fundo</p>
  </div>
</body>

CSS

Nos estilos, aplicamos os resets e declaramos as variáveis para as cores usadas no tema:

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

:root {
  --light: #cccccc;
  --dark: #151515;
}

Tornamos nosso input invisível, já que usaremos o label dele como acionador.

#theme-switcher {
  display: none;
}

E declaramos as propriedades do nosso container do app. Ele ocupará toda a tela, terá fundo claro e textos escuros, além de ser um flex-container. Esse último é opcional e só para facilitar a demonstração do resultado, centralizando o texto na tela.

#app-container {
  height: 100vh;
  background: var(--light);
  color: var(--dark);
  font-family: monospace;
  font-size: 1.5rem;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Declaramos a área por onde nosso botão vai deslizar, com posicionamento absoluto no topo:

.theme-switcher-area {
  border: 1px solid var(--light);
  background: var(--dark);
  border-radius: 2rem;
  width: 4.5rem;
  height: 2.5rem;
  padding: 0.2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

O botão, em si, que usará o estilo dashed na borda, criando um efeito similar aos raios do sol, para o tema claro.

.theme-switcher-button {
  position: relative;
  display: block;
  background: #f1aa02;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  border: 2px dashed var(--dark);
  transition: 0.3s;
}

E por último, um pseudo-elemento ::after sobre o botão. Ele terá a forma de um círculo menor que o elemento original, tornando-se uma sombra que transformará o acionador em uma lua, no tema escuro. Por isso, sua opacidade inicial será 0.

.theme-switcher-button::after {
  position: absolute;
  width: 80%;
  height: 80%;
  content: "";
  background: var(--dark);
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s;
}

E aí vem a mágica!

Como nosso input é o primeiro elemento da árvore, podemos usar a pseudo-classe ':checked', com os seletores apropriados, para mudar o estilo de qualquer elemento abaixo dele.

Quando ele for selecionado, essas propriedades serão aplicadas.

Começando pelo próprio acionador, transformando o sol em lua. Para isso, removemos a borda que veio para dar o efeito dos raios e deslocamos o botão para a direita.

#theme-switcher:checked + #app-container .theme-switcher-button {
    transform: translateX(100%);
    border: none;
}

Em seguida, mudamos a opacidade da sombra, o ::after, para gerar uma lua crescente, na mudança do botão.

#theme-switcher:checked + #app-container .theme-switcher-button::after {
    opacity: 1;
}

Por último e pelo efeito desejado, invertemos a cor de fundo e de texto do nosso container da aplicação:

#theme-switcher:checked + #app-container {
    background: var(--dark);
    color: var(--light);
}

E tá lá, onde a coruja dorme!

Esse tutorial é só o início do mergulho. Por isso, use sua criatividade a partir dessa base e mude os estilos como você achar melhor!

Se você curtiu esse conteúdo, compartilhe com outras pessoas e ajude a espalhar a palavra!

Você pode me acompanhar nas minhas redes sociais:

Instagram
GitHub
LinkedIn

E conhecer mais sobre mim e meu trabalho no meu site:

owilliamgoncalves

Nos vemos na próxima! 🧙

Texto “mágico” escrito automaticamente com JavaScript

William Gonçalves — Thu, 26 Nov 2020 16:51:43 +0000

“Raios, herege! Estás a me dizer que os escritos surgirão sozinhos? Isso não é feitiço, ou bruxaria?”

Não é mágica. É JavaScript. Vamos desenrolar isso abaixo:

Antes de tudo, precisamos criar, no nosso HTML, um elemento para receber o feitiço, digo, o texto criado. Pode ser um parágrafo (p) ou até um cabeçalho (h1, h2...). Basta ser de texto e ter um id. Lembrando que o id precisa ser exclusivo desse elemento.

<h1 id="magic-text"></h1>

Pro nosso caso, vamos usar um h1 com a id magic-text.

Em seguida, criamos e importamos o arquivo JavaScript que, pro nosso exemplo, será o script.js:

<script src="script.js"></script>

Já no script.js, vamos criar uma constante para interagir com nosso h1, usando o método querySelector, que nos permite selecionar elementos usando os mesmos seletores que vemos no CSS.

No nosso caso, vamos usar a id precedida pelo #.

const magicTextHeader = document.querySelector('#magic-text');

O método querySelector pode ser usado, tanto no documento, como em outros elementos, após declarados, selecionando seus respectivos filhos.

Em seguida, criamos uma constante com o texto a ser usado:

const text = 'Texto inserido automagicamente com JavaScript!';

Por fim, declaramos uma variável que servirá para nos ajudar a "percorrer" o texto:

let indexCharacter = 0;

A função que retornará o texto é a writeText():

function writeText() {
  magicTextHeader.innerText = text.slice(0, indexCharacter);
  indexCharacter++;
  if(indexCharacter > text.length - 1) {
    setTimeout(() => {
      indexCharacter = 0;  
    }, 2000);
  }
}

Na primeira linha, incluímos o texto na propriedade innerText do h1, utilizando o método .slice(), que percorrerá nossa constante text, letra a letra, como se ela fosse um array. A sintaxe do .slice() é .slice(a,b), onde a é a chave inicial do trecho a ser retornado e b é a chave final desse mesmo trecho. Como queremos retornar o texto desde o início, começamos com a chave 0 e finalizamos com o valor da indexCharacter, que é incrementada na linha seguinte, garantindo que a próxima execução da função retornará um caractere a mais e assim por diante.

Em seguida, usamos uma condicional para verificar se a indexCharacter é igual a última posição do texto (text.length - 1; como a primeira chave é 0, a última será o tamanho (length) do texto menos 1). Se a condição for verdadeira, a indexCharacter será zerada, depois de um setTimeout de 2000 milissegundos, fazendo com que o texto volte a ser "digitado" do início.

E para executar essa função de forma contínua, garantindo o incremento da indexCharacter e o efeito desejado para nosso texto, usamos um setInterval que executará a função writeText a cada 100 milissegundos:

setInterval(writeText, 100);

E a mágica está concluída!

Você pode ver um exemplo aqui.
E conferir minha versão do código aqui.

E, opcionalmente, usar os estilos que usei lá:

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

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

  background: darkred;
  color: #FFF;
}

h1 {
  font-size: 2rem;
  max-width: 400px;
  text-align: center;
}

Esse artigo foi inspirado em um vídeo do canal do Florin Pop, que tem tutoriais e desafios incríveis pra quem está iniciando. Conteúdo em inglês.

Nos vemos na próxima! Grande abraço!

Forem: William Gonçalves

Funções Genéricas Inteligentes

Funções reutilizáveis são o coração de qualquer projeto ou lib

E qual é o problema nisso?

A mágica dos generics + inferência

O resultado?

A partir daí, você vai ao infinito e além 👉

As possibilidades são infinitas

Qual função você mais curtiu?

Por que eu amo Remix? (por Kent C. Dodds)

Em uma frase

Remix me permite construir experiências de usuário incríveis e ainda ficar feliz com o código que eu tive que escrever para chegar lá.

A Experiência do Usuário

Remix traz a excelência como padrão da experiência do usuário. E é uma das principais razões pelas quais eu amo o framework.

O Código

Quando uso Remix, posso deixar os truques em casa.

Quanto melhor eu construo sites com Remix, melhor eu construo sites para a web.

Conclusão

Eu amo o Remix porque ele me permite construir experiências incríveis para o usuário e ainda ficar feliz com o código que escrevi para chegar lá.

Intersection Observer - Lazy loading, animações em scroll e scroll infinito de forma nativa e sem libs

Conceitos e uso

Criando um Intersection Observer

Intersection observer options

Declarando um elemento para ser observado

Arquivos utilizados

Lazy-loading

Animações em scroll

Scroll Infinito

Conclusão

Animando elementos quando saem e entram na tela com JavaScript

Como testar se um elemento está no viewport?

Capture e anime!

Mudando tema da tela com CSS Puro (Dark/Light Mode)

We know the JS way

Mas e se não usarmos scripts para trocar o tema das nossas aplicações?

HTML

CSS

E aí vem a mágica!

E tá lá, onde a coruja dorme!

Texto “mágico” escrito automaticamente com JavaScript