A vaga pediu Sass e você só conhece CSS????

Leia essa thread e depois aceite a vaga 👇🧵 ✴️ 1º Conceito

Sass e SCSS são dois sabores do mesmo pre-processador, Sass não usa chaves {} e `;` , SCSS usa.

O exemplo abaixo é da doc do Sass, é bem tranquilo de ver a diferença entre as sintaxes
sass-lang.com/guide/

Precisamos falar sobre font-size.

Qual unidade usar?
Devemos usar `em` e `px` pois é o que está na spec da W3C ?
Devemos usar `rem` pq é o que tá na boca do povo ?
Devemos usar o que o coração mandar?

Segue a thread 🧵 O primeiro ponto - essa tabela que muitos se baseiam pra defender `em` e `px` é de janeiro de 2010


O primeiro Working Draft da CSS3 que cita `rem` é de 2006, mas sua primeira definição formal aconteceu em 2011
w3.org/Style/Examples…
w3.org/TR/2011/WD-css…

Se você escreve CSS mobile first, você está escrevendo CSS de 2009, pra resolver um problema que em 2012 já haviam outras formas de resolver, vivendo em 2024, quando não faz mais sentido escrever CSS assim.

Nessa thread vamos fazer a autópsia dessa relíquia histórica do CSS 🧵 Na minha ultima thread eu abordei como surgiu o termo "design responsivo". Mobile first é irmão gêmeo dessa solução, nascido com meses de diferença em 2009. Em minhas pesquisas, a primeira ocorrência sólida desse termo foi por Luke Wroblewski +

https://x.com/lixeletto/status/1803452271025414565

Se você acha que responsividade é criar media queries de acordo com os dispositivos, isso aqui é pra você:

24 anos de história do design resposivo em uma thread, a thread 🧵👇 Em 2010 Ethan Marcotte escreveu o que seria a primeira menção à design responsivo, o artigo Resposive Web Design fala como arquitetura e instalações de arte que "respondem" à interação de usuários trouxe a inspiração do termo pra ele

alistapart.com/article/respon…

Estive estudando HORRORES sobre CSS nesses últimos meses, nessa thread aqui vou reunir o que mais me explodiu a cabeça até então.

Olha a thread ai 🧵 Cyclomatic Complexity: Logic in CSS
Nesse aqui o Harry Roberts mudou a forma que eu via os seletores e tratava complexidade.
"Think of your selectors as mini programs" SIM!



Leitura adicional: Conditional CSS por Ahmad Shadeed
csswizardry.com/2015/04/cyclom…
ishadeed.com/article/condit…

No meu CV eu troquei aquelas métricas esquisitas de habilidade

Javascript: • • • • - -

Por algo mais descritivo:
- Meus pontos fortes são
- Conheço e me dou bem com
- Sou capaz de dar suporte em

No meu fixado tem a versão antiga disso, e eu mudei por um motivo simples: Usava linguagem passiva.

Eu queria separar meu conhecimento em 3 categorias:
- Sou bom nisso, me contratem pra isso
- Não pegaria uma vaga só disso, mas sei mexer, então posso pegar task de ou migrar de tecnologia com o tempo
- Não manjo TANTO mas se precisar, sei pelo menos ler

Que isso aqui é balela todo mundo sabe

Mas qual é o golpe?

Quem tá ganhando com isso?

Vem de thread -> 🧵 Quando o @lucas_montano postou lembrei de uma reportagem que tinha o mesmo cunho no headline, mas abrindo o link as vagas eram de semicondutores, então fui cavar mais fundo
+

CARALH0
Como eles fizeram esse site em 1996?????

A thread -> 🧵🤔 Começo promissor

O atributo alink era do HTML 3.2, definia a cor dos links selecionados, depreciado no HTML 4.1 junto com vlink, que era cor dos links visitados e com background diretamente no elemento

Se você trabalha com front, provavelmente você usa um design system.

Ou uma lib que tem seu próprio design system.

Ou uma biblioteca de componentes reproduz um.

Ou um framework baseado em design tokens.

Bora falar sobre isso? Vem de thread 🧵 Um dos primeiros livros que li na faculdade de design foi Design Pra Quem não é Designer da Robin Williams.

Ele começava com 4 princípios básicos que se aplicam desde um cartão de visitas até um produto consolidado.

Proximidade, alinhamento, repetição e contraste

Tag <img> ou background-image?

Nessa thread vamos aprender como tomar essa decisão sem chutar!

Segue ai -> 🧵 TLDR
Prefira usar background-image quando a imagem gabaritar (ou quase) essa lista:
- Não for a maior imagem da página
- Não tenha que ser a primeira a carregar
- Tenha sido previamente comprimida
- For meramente decorativa
- Necessita de uma composição complexa (overlays)

Gente, eu vou cometer o pecado de dar minha opinião sobre Tailwind

Eu vou ser o mais técnico possível, as xixas que falarem que é hate vão se ver com meu advogado.

Enfim
Autópsia do Tailwind, a thread -> 🧵 Primeiro minha opinião PESSOAL >pessoal< INTIMA o que eu sinto

Gosto de Tailwind? Não. Trabalharia com Tailwind? Se me pagassem, sim. Acho Tailwind útil? Pro problema que ele resolve, sim. Usaria em projeto pessoal? Prefiro smt.

E a fanbase é toxica.

Agora vamos aos fatos

Sobre essa pergunta aqui, bora falar de semântica?

Inclusive, sabiam que semântica não é só um conceito, mas uma API?

Bora construir juntos essa thread -> 🧵

https://twitter.com/lixeletto/status/1667225736111857670

O que é significado pra gente? O que é significado pros robôs?

O que entendemos como significado em semântica é construído por 3 informações, que pra simplificar chamaremos de

Name, Role e State

Pessoa Jr se sua referência de profissional tá ocupada demais cagando regra, a chance é que ela n tenha nada pra te oferecer que outras pessoas não possam também, ainda sendo legais

Essa galera só parece muito em cima pq coloca os outros pra baixo pra se tornarem relevantes Tem muita gente foda na bolha pra vcs justificarem certos discursos, passarem panos e ficar catando feijão em algumas falas

Ficar na barra de gente escrota, mas influente nunca me levou tão longe quanto minha autoestima depois que parei de andar com gente prepotente

Não sou detentor da verdade, nem o zika do pântano, mas resolvi escrever essa thread pra pessoas que estão começando agora no front, especialmente CSS

Coisas que me ajudaram até aqui e talvez ajudem vcs com CSS

Segue a thread -> 🧵 - Entenda que CSS é difícil
E eu não falo isso pra te frustrar não viu? Mas eu passei os bons primeiros anos me sentindo mal que meus layouts esfarelavam. Conforme fui estudando fui entendendo que na vdd a parada não era simples e minha dificuldade só refletia isso

Então, acho interessante as câmeras reconhecerem urls sim, mas o papel do QR code como imagem auxilia em questões de acessibilidade pra algumas pessoas

🧵 ->

https://twitter.com/FelippeRegazio/status/1666496962428821510

Pessoas TEA, com dislexia, idosos ou baixa visão podem se beneficiar de não precisar ler e digitar uma URL um pouco mais longa, se o QR code respeitar os critérios de acessibilidade corretamente, segundo uma pesquisa da tetralogical (link no final)

Dicas de como escolher seu primeiro projeto de front com o básico de HTML, CSS e Javascrito

A thread -> 🧵 Primeiro uma parábola, um conto.

Láaa atrás eu desenvolvi com meu amigo um gerador de paleta de cores aleatórias usando a Color API

allyhere.github.io/color-scheme-g…

A API
thecolorapi.com

A thread de hoje é sobre :focus

Porque usamos :focus? O que um indicador de foco precisa ter?
Nessa thread vou me aprofundar nos conceitos por detrás do foco, então se você é de UI talvez te ajude também!

Segue a thread -> 🧵
Focus Pra começar, foco é uma ferramenta de semântica de interatividade. A web é uma superfície, logo questões como ergonomia e affordance se aplicam a ela.

As semânticas de ergonomia são as características que tornam um elemento interativo operável.

"Pessoas frontend TEM QUE saber design?"

Você vai trabalhar de forma autônoma?
Os cargos que você tá competindo tão pedindo noções de design?
Vc tá buscando vagas de "Fullstack designer"? Não? Então não.

É bom? É. Agrega? Sim. Obrigatório ou essencial? Nem fodendo

+ Design e Layout são responsabilidades bem diferentes e por si só são dois trabalhos que demandam muito. Pessoas de front tomando decisões de design fora desses contextos que citei geralmente são indicativos de uma estrutura de trabalho pouco organizada ou bem embrionária
+

Como criar exercícios de HTML

Uma thread pra que tá ensinando, mas serve pra quem está aprendendo

https://twitter.com/chaveprimaria/status/1657152365496090626

- Use referências atuais e completas
MDN, WHATWG e W3C ou fontes que bebem desses lugares de forma oficial

Caso precise de uma lista, a da MDN é incrível
developer.mozilla.org/en-US/docs/Web…

Hoje a thread é sobre fazer bons botões.

Eu sei que você já deve ter criado uma centena até então, mas prometo que você vai aprender pelo menos uma coisa nova nessa thread!

Bora lá de -> 🧵 Botões precisam ter um texto interno por questões de acessibilidade. Botões de ícone podem ter um texto descritivo também se você usar uma classe `.sr-only`

A classe Screen Reader Only faz com que o texto seja apenas "visível" pra leitores de tela
gist.github.com/ffoodd/000b59f…

Quando se fala em layout responsivo, as pessoas, até as mais experientes recorrem imediatamente às media queries.
Layouts como o da imagem abaixo viriam com breakpoints determinados, que seriam reproduzidos na forma @Media no código.

Nessa thread vamos aposentar as media queries Há 10 anos atrás, quando íamos executar um layout, precisávamos de instruções precisas de como ele iria ficar nos dispositivos mais populares da época, protótipos como pequenos retratos - cada retrato de um tamanho, um breakpoint.