Uma das maneiras que gosto de fazer desenvolvimento é construir algo, clicar bastante , fazer ajustes, clicar mais, mais ajustes, mais cliques, etc., até que eu finalmente considere concluído.
Clicar em uma tonelada é a parte importante. Se for uma transição de página, isso significa ir e voltar uma tonelada. Clique, botão voltar. Clique, clique com o botão direito no menu de contexto, “Voltar”. Clique, navegação no aplicativo para voltar (se houver uma). Clique, atalho de teclado para voltar. De novo e de novo e de novo. Você entendeu a ideia.
É uma espécie de tática de controle de qualidade em certo sentido, apenas clique e tente quebrar as coisas. Mas eu gosto de pensar nisso como algo mais parecido com marcenaria. Você tem uma tábua de madeira e a passa pela lixadeira de cinta para alisar todas as coisas grandes e ásperas. Então você pega a lixadeira manual, lixa um ponto, passa a mão sobre ele, sente se há farpas, lixa um pouco mais, repetidamente, até ficar satisfeito com o resultado.
Com software, o fato é que às vezes há muitas variáveis para conhecer, testar e suavizar. Então, eu clico por aí, usando a UI repetidamente, até que finalmente não consigo mais me dar farpas.
Outro dia eu estava trabalhando em uma lista de opções de rádio, coisas bem comuns:
- Crie um
<label>com um associado<input type="radio">. - Coloque-os na mesma linha, centralize-os e deixe um espaço entre o controle e o rótulo.
- Etc.
Como alguém antigo que costumava usar floats em CSS, ainda fico surpreso quando consigo usar o flexbox para fazer essas coisas — é tão fácil!
<div class="container">
<label for="control">Foo</label>
<input id="control" type="radio">
</div>
<style>
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
</style>
Enquanto eu fazia minhas coisas — clicando um pouco, tentando pegar algumas farpas — percebi que havia um ponto morto na interface do usuário, um lugar entre o rádio e o rótulo onde clicar não alternava o controle como eu esperava.
“O quê?”, pensei. “Tenho meu atributo <label> e <input> associado for, por que isso não está funcionando?” Então pensei, “ gapno meu display flex deve estar o culpado!”
Com certeza, era. Enquanto o flexbox tornou super fácil adicionar algum espaçamento visual entre o controle e seu rótulo, esse espaçamento se tornou uma zona morta de interação, embora não fosse minha intenção!
Provavelmente há um milhão de maneiras diferentes de resolver esse problema — porque CSS é incrível — mas eu apenas removi gape adicionei um pouco de preenchimento ao meu rótulo, e pronto!
Colocar preenchimento no rótulo, em vez do flexbox de contenção, tornou tudo clicável sem uma zona morta.
Mais alguns cliques e as coisas estavam funcionando conforme o esperado.
É uma coisa pequena, mas muitas lascas pequenas levam a uma experiência agonizante.
Então minha receita é: lixe, sinta a textura, pegue uma lasca, lixe novamente e repita até ficar liso.