Website icon
Website icon

cestari.codes

Home > Posts

Edição #03 da Newsletter

10/06/2022

Esse post foi escrito há mais de 2 anos

O que me fez rir essa semana

Nada me fascina tanto quanto coisas estranhas que passavam na TV nos anos 90 e 2000. Essa semana, por exemplo, fiquei vendo em loop a entrada do quadro "Posso Macetar" da Eliana. São tantos elementos que tonam o vídeo bom: a expressão da Eliana, a galera dançando como se não houvesse amanhã, o ritmo contagiante da música, enfim você não pode deixar de ver esse vídeo .

Untitled.png {1412x748}

Components Party 🍻

O component-party.dev é um dos meus sites preferidos ultimamente. Você escolhe os frameworks javascript que quer comparar (React, Svelte, Vue, Angular, SolidJS, Ember, Alpine e Qwik) e consegue ver o código que você precisa desenvolver em cada um para fazer coisas triviais como: loops, eventos, estilização, condicionais, props, estado, etc.

Disclaimer: você pode ficar com uma pontinha de inveja de como o svelte é mais conciso em declarar estado:

Untitled 1.png {1092x255}

Cores e mais cores no State of CSS 2022

No último Google IO que aconteceu em Maio, foi apresentado que os diferentes browsers estão se juntando para fazer a web mais compatível. Você pode ler o artigo, ou ver o vídeo.

Untitled 2.png {800x300}

Uma das novidades mais interessantes são as diferentes formas de lidar com cores:

  • hwb() - hue whiteness, blackness: Você passa a tonalidade (hue) e depois ajusta os níveis de branco (whiteness) e preto (blackness) de forma que fica muito mais fácil fazer aquele botão que fica mais claro/escuro no hover.
  • color-mix(): Quem usa/usava SASS sempre quis isso no CSS: a possibilidade de misturar cores dinamicamente duas cores. Por exemplo, dada uma cor da sua marca (brand), eu posso ter a sua versão mais escura ou mais clara, através de porcentagens de mistura com branco e preto, dinamicamente no browser.
.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}
  • color-contrast(): Pensa quantas vezes você passou pelo dilema de contraste entre cor da fonte e cor de fundo… agora é possível gerar cores acessíveis dinamicamente usando essa função: você pode passar uma cor de fundo, por exemplo, e várias cores de fonte: o navegador irá escolher automaticamente aquela que mais tem contraste. Mas atenção que essa ainda não está disponível ainda (estará até o final do ano).
  • lch(): Assim como o hwb(hue, whiteness, blackness), o lch() traz outras vantagens quando falamos de cores. Vale muito a pena a leitura do LCH colors in CSS: what, why and how?
  • accent-color: ou, “como finalmente conseguimos depois de 30 anos de web, colocar uma corzinha nos nossos radios e checkboxes”

Ajuda Luciano: Meu unique ID vai colidir!

Várias coisas me fazem gostar do Nano ID. Primeiro, a lib tem apenas 130 bytes. Depois, ela é mais rápida que o UUID, e customizável.

Mas o melhor mesmo é que o site deles é um alívio para os paranóicos de plantão que ficam surtados com a possibilidade de colisão de IDs no seu blog.

Calma lá, emocionado: seria preciso gerar 1000 IDs por hora em 150 bilhões de anos para que houvesse uma chance de 1% de colisão no seu blog. Tá mais tranquilo agora?

(e para os aventureiros que gostam de viver no limite, olha só: você pode até diminuir seus IDs de 21 caracteres para 15 caracteres, mas cuidado! Nesse caso a chance de colisão é perigosíssima: 570 mil anos gerando 1000 IDs por hora para uma chance de 1% de colisão #medo)

Untitled 3.png {1182x421}

Mas enfim, tudo isso para dizer que eles lançaram a v4 há dois dias e removeram suporte para CommonJS.

Gimme freebies!

Há alguns anos já não se fala mais em pagar por hospedagem estática (fuja daquele seu colega que quer vender hospedagem estática no cpanel, ok?). Depois de Github pages, Firebase, Azure, Netlify, Surge, Clouflare, Digital ocean, Vercel, Render e outros, já virou commodity: hospedagem estática na web é gratuita (… tudo bem, nostálgico, geoCities também fazia isso nos anos 2000).

Agora a trend (desculpe o termo tiktoker) é oferecer também backend gratuito (seja serverless functions, seja base de dados). De novo, talvez tenha começado com Heroku, Firebase e Vercel, mas parece que todo dia aparece um novo concorrente sempre com um "generous free tier”.

Provavelmente estão seguindo a receita de sucesso da Vercel: faça todo mundo usar seu serviço de graça e automaticamente sua empresa terá muitos milhões de investimento.

Alguns serviços de DB gratuitos que descobri há pouco tempo:

  • Railway (MySQL e outros serviços)
  • Supabase (PostgreSQL)
  • Neon (PostgreSQL, mas está em beta ainda)

Se souber de mais algum, manda pra mim :) afinal, quem não gosta de coisas gratuitas?

Atualizações, Novidades e Tutoriais