Resumindo o artigo anterior

Eu realmente acho que você deveria ler o artigo anterior (pelo menos, fazer uma varredura rápida) para entender o que está acontecendo.

O artigo anterior apresentou a metodologia do CSS Molecules , afirmando que é o equilíbrio perfeito entre duas formas antagônicas — comumente representadas pelo CSS Zen Garden e pelo Tailwind CSS .

Percebi que trechos de código não são suficientes para expor com clareza a metodologia e suas vantagens em relação a outras.

Portanto, decidi seguir o caminho do código real, criando uma réplica de um artigo imaginário do Medium.

Então convidei/desafiei outros desenvolvedores a fazerem o mesmo. Eu tinha dois propósitos em mente

1. entendendo um ao outro
2. aprendendo uns com os outros

A lista de contendores

1. Joana Borges Late (eu) — defendendo os princípios da Ciência Molecular CSS
2. Jason Knight — carregando a bandeira do CSS Zen Garden Temple (ou representando os Cavaleiros Templários)

Hors-Concours

Caso você queira mostrar sua réplica feita em JavaScript, ela será aceita como Hors-Concours: não realmente “disputando” o concurso - apenas surpreendendo o público respeitável com suas habilidades impressionantes.

O artigo *imaginário* — o kernel

Para deixar claro que o artigo imaginário não é um artigo Medium, vamos escrever “Tédio” ao invés de “Medium”. E modifiquei o logotipo e o favicon.

O título e subtítulo de tal artigo é este:

Em seguida, vem a FOTO dela (mostrada no início do artigo atual).

Essa imagem é seguida de tudo o que está escrito abaixo (ATÉ VOCÊ ENCONTRAR O SEPARADOR DE TRÊS PONTOS):

“Luxo Definido” – O Maxima GLE Sport Sedan 1996

Aqui você encontra o vídeo com legendas em português .

A verdadeira história: Um diretor de arte muito habilidoso criou este vídeo INCRÍVEL, transformando todos os defeitos de seu velho carro em vantagens para o comprador, bem diante de seus olhos! O vídeo fez tanto sucesso em todo o mundo que a Nissan decidiu comprar de volta o carro.

Minha avó me disse que esse negócio foi tão prejudicial para a Nissan que, como resultado, seu presidente foi demitido e o governo japonês o prendeu sob a acusação de corrupção .

Além disso, minha avó mais uma vez mostrou sua profunda sabedoria:

“Muito talentoso e dirigindo um carro ruim? Ninguém ganha dinheiro com publicidade, eu sempre te disse isso!”

História de amor do geco

Não posso dizer nada sobre a história por trás deste vídeo, exceto que William Shakespeare nunca morreu. Obviamente, ele ganha a vida como roteirista para a indústria de publicidade.

Minha avó também não pode dizer nada. Ela ainda está chorando. Como eu faço.

DIANA ROSS A última vez que o vi no Muppet Show

Minha avó acredita firmemente que este vídeo é a melhor mistura de entretenimento, melodia, diversão, interpretação (pessoa e marionetes) e sabedoria/amor/esperança (preste atenção na letra).

Posso testemunhar que ela realmente sente, do fundo do coração, que este é o melhor vídeo de todos.

Quando ela está sóbria.

Quando ela bebe, ela assiste a este o tempo todo.

Finalmente

Eu e minha vó esperamos que tenham gostado!

O artigo *imaginário* — o autor, os leitores e seus avatares

O artigo *imaginário* — as respostas

Waldorf CSS Expert para o autor: Eu gostaria de comprar aquele automóvel .

Gonzo HTML Expert para Waldorf CSS Expert: O carro não parece estar em boas condições .

Autor para Waldorf CSS Expert: Por quê? Você é um colecionador ?

Animal JS Expert para o autor: NÃO! ELE QUER LEVAR SUA AVÓ PARA PASSEAR HAHAHAHAHAHA !

O artigo *imaginário* — os artigos sugeridos (e seus ícones)

Quando a largura da tela permitir: 3 artigos na lateral direita e 3 artigos na parte inferior. Quando não, todos os 6 artigos na parte inferior.

Lista dos artigos (e seus autores):

1. 1500 frameworks JavaScript que você deveria estar usando hoje por Animal JS Expert
2. Por que parar de usar tags tornará seu código HTML muito mais limpo por Gonzo HTML Expert
3. Como aprender CSS em APENAS 5 horas e ser demitido em APENAS 5 minutos pelo Waldorf CSS Expert
4. Por que Linus Torvalds escolheu o JavaScript para escrever o kernel do Linux: “ A ferrugem não vem com o coletor de lixo :( “ por especialista em Animal JS
5. As diferenças sutis entre Markdown e Upside Down Markup por Gonzo HTML Expert
6. CSS NÃO é uma linguagem imperativa, então… F#$%K VOCÊ!!! por Waldorf CSS Expert

A página do artigo Medium tem alguns menus/partes móveis/caixas flutuantes.

Todas essas partes (PRIMEIRO GRAU) devem estar presentes na réplica e no trabalho. Mas as ramificações NÃO fazem parte da réplica.

Por exemplo, quando clico no meu avatar no canto superior direito da página do Medium, um menu aparece. Este comportamento a réplica deve fazer. Mas reagir a cliques dentro do menu não é tarefa da réplica.

A página da Web não é editável. O usuário lê, não escreve respostas.

JavaScript é aceitável para as partes móveis.

Os recursos (fontes e imagens)

Aqui está uma página simples que informa sobre as fontes de cada parte da réplica: cor e família/peso/estilo da fonte. Eu escolhi apenas fontes (públicas) do Google.

Essa página da Web incorpora todos os ícones e imagens necessários (alguns no formato SVG).

a avaliação

Todas as réplicas serão verificadas no validador W3C , PageSpeed ​​Insights e Lighthouse .

as réplicas

O ideal é que cada candidato escreva um artigo descrevendo as técnicas/métodos que usou, além de um link para a réplica em execução.

Vou postar todos os links aqui quando os tiver.