HTML e CSS também 'computam': a virada na web
JS não é mais o único 'cérebro' da página.
Resposta direta
JS não é mais o único 'cérebro' da página — o núcleo do material original é direto: A rede tem três línguas, HTML, CSS e JavaScript. Que dessas línguas tem um semento? Você é provavelmente uma pessoa normal e dizendo, sim, JavaScript faz e os outros não. Bem, isso acabou de mudar. CSS agora tem uma função se. Sim, realmente. Ok, HTML tecnicamente faz, mas não estamos chegando a semânticas. Isso é um semento tradicional literal e tradicional em CSS que oferece um monte de composibilidade e coisas complexas que...
O que o material mostra de fato
No material original, o ponto de partida não é teoria abstrata: é uma sequência concreta ligada a «HTML e CSS também 'computam': a virada na web». Essa é, infelizmente, a realidade de muitas soluções de curso. Elas não são feitas por expertos de indústria. A menos que você cheque o sponsor de hoje, Frontend Masters. Frontend Masters está pagando outras pessoas para escrever seus cursos, mas não são algumas pessoas raras que não sabem como codificar. São expertos de indústria, pessoas que você provavelmente já viu aqui, porque estão construindo coisas incríveis, como a Lydia, lá na página de casa. Ou, se olharmos os cursos, ...
Detalhe do transcript que não pode virar genérico: você verá alguns nomes ok, para ser justo, primogen pode não ser o melhor desenvolvedor mas supostamente ele trabalhou no hulu ou algo, mas todas essas outras pessoas são legendas como brian holt richard que construiu um editor de texto de fora em rosto como quem mais vai te contar sobre compiladores e ver melhor do que isso scott moss da netflix ou katie um dos mais legendares devs nativos de reac eu sei que é sempre divertido escalar por esta lista porque é um monte de pessoas com quem eu sou amigos com quem eu não chatei há um tempo Inclusive Kevin Powell, um dos líderes da indústria na CSS.
Contexto e motivação
O contexto importa porque a mesma ideia muda de preço conforme ferramenta, fase do produto ou disciplina pessoal. Ele correu tantas coisas que eu estava errado no passado. Adoro esse cara. Honestamente, eu provavelmente deveria pegar esse. Esses caras até tem empregados do Google fazendo cursos sobre Angular. Se você está terminando uma empresa usando Angular e não está familiarizado, isso é provavelmente um dos melhores lugares para começar e modernizar com seu stack Angular. Os subscritores têm acesso a mais de 200 desses cursos, feitos por dozentas expertas da indústria. Eles são realmente bons. E pelo preço que você está pagando, é meio insano.
Detalhe do transcript que não pode virar genérico: Especialmente se você tem um budgeto de educação no seu trabalho. E se você não perguntar ao seu chefe, você provavelmente conseguirá um. É basicamente gratuito para você. Não tem dinheiro para a empresa. E você vai só elevar um monte como desenvolvedor. Os assuntos de time também são muito baratos. Então, se você é um gerente que quer que seu time seja onboardado ou se mova um pouco mais rápido, isso é uma das coisas que você deve considerar gastar dinheiro.
Como funciona na prática
Em vez de colecionar slogans, trate o conteúdo como checklist operacional: o que fazer nesta semana, o que medir, o que descartar. Se você usar o meu link, você terá 25% de desconto. Então, veja-o hoje em soydev.link. CSS Condicionals com a nova função IF. Como sempre, essas coisas do CSS muito divertidas estão sendo escritas e mostradas a mim pela Una. Ela é incrível, uma dev muito talentosa na Google. Ela até tomou o tempo de colocar um vídeo no YouTube. E eu pensei, que melhor jeito de começar do que assistir isso juntos e usar como base de referência. Também, meu chat está se assustando com isso.
Detalhe do transcript que não pode virar genérico: Especificamente, o Igor do Axiom está tão hip. As pessoas do estilo estão tão animadas com isso. So I've been playing with the new CSS if function, which is pretty cool that we have this capability in CSS now, and this is landing in Chrome 137. So with if you can essentially use custom property values and style queries to write logical styles based on custom property values.
Erros comuns e armadilhas
Onde isso quebra na prática: quem tenta atalho sem o mecanismo descrito no transcript perde consistência rápido. So the classic example is light and dark, but I wanted to take that a step further and really thought about how would I actually use this in a UI. If I'm building something, I'm probably using React or some other kind of library, we're in the DOM, I'm structuring things using props. And so I wanted to do an example here where I have these different cards with data status on them. So each of these has a status, pending, complete, or inactive. So I have three different statuses.
Detalhe do transcript que não pode virar genérico: And then I'm using those data attributes to convert this data into CSS. And the way that I'm doing that is using custom properties. and I'm using the new attribute funcionalidade onde eu posso, na verdade, castar esses valores usando um tipo. Então, eu estou colocando essa propriedade de custom status usando adder, eu estou colocando o status de dados e então eu estou colocando isso em um valor de tipo de identificar custom.
Checklist de aplicação
Na prática, isso vira rotina: escolha um experimento curto, documente antes/depois e só então escale. Ok, eu vejo onde isso vai, eu tive a sensação, mas como o grande ganho aqui vai ser que você pode configurar quais valores estão sendo aplicados sem ter que mudar os nomes da classe. Vai fazer coisas como... ClassNames, CLSX e tudo isso para nós, usuários do Tailwind, vai fazer a vida muito melhor. Vamos terminar esse vídeo rápido e depois eu vou entrar em todos os detalhes grudosos sobre todas as coisas legais que podemos fazer com ele.
Detalhe do transcript que não pode virar genérico: Então agora para cada uma dessas cartas, nós temos uma propriedade de custo de status que é uma identificadora de custo baseada no status de dados que está dentro do DOM. Agora que nós temos esse status, nós podemos realmente setar alguns estilos, então eu estou colocando cor de borda, cor de fundo e coluna de grado baseada nesta propriedade de custo de status.
Information gain
Ganho específico deste material (6212): preserve a especificidade de «HTML e CSS também 'computam': a virada na web» — números, ferramentas e narrativa do source, sem genificar.
Próximo passo concreto
Feche o ciclo com um próximo passo observável — sem isso, o artigo vira entretenimento e some na timeline. Então primeiro eu tenho este se-estatement dentro da valorização para cor de borda, então eu posso dizer se que estou usando uma a query se a query de estilo, que é o status, for pende, então chequei para este custom então isso é mais eu sei que é chamado se, mas isso é quase um estudo de troca da maneira que o sintaxe funciona, o que é realmente realmente legal obviamente o sintaxe é estranho porque o css o sintaxe nunca foi bom, você tem a ideia, mesmo coisa para a cor de fundo se o status for pende um fundo azul liso se for completo, como verde, ou como verde liso.
Detalhe do transcript que não pode virar genérico: E, finalmente, eu estou configurando a coluna de grado. Então aqui, se for pende, coloque na primeira coluna. Se for completo, coloque na segunda coluna. Se não for, coloque na terceira coluna. Isso é uma coisa muito inteligente que eu não tinha pensado. Assinar em que coluna algo vai, baseado em um valor. Isso é realmente, realmente legal. Então, isso costumava não ser acessível. Fazer algo assim, onde eu estou visualmente mudando o domínio, costumava não ser acessível. E a razão é porque você tem sua estrutura DOM, certo?