Aqui está uma interface do usuário do emoji finder que criei em baunilha JavaScript com algum CSS.
A interface do usuário do Twitter é ótima, no entanto … poucos teórico existem problemas:
- Difícil de navegar entre grandes grupos de Emojis. Às vezes, clicar em uma guia de grupo de emoticons não me ajuda a navegar até o Emoji em que estou pensando – ainda preciso navegar bastante para encontrar uma vez em uma categoria de filtro.
- As palavras nem sempre correspondem aos Emojis adequados. Aumentar o vocabulário seria definitivamente uma melhoria. Digito “estrelas” e os emojis de estrela única desaparecem porque a pesquisa plural / singular é muito rigorosa e não completa.
- Código de cores. Se eu digitar “amarelo”, quero ver uma lista inteira de todos os emojis amarelos. Eu quero ver estrelas, carros amarelos, limãoetc. Se você digitar “azul”, nem todos os itens em azul aparecerão na pesquisa filtrada.
Resolver esses problemas não é difícil do ponto de vista técnico. Eu só descobri que era levemente difícil de mapear 3200 emojis ao objeto e eventos JavaScript reais em termos de quanto tempo levou. Após o mapeamento, é fácil.
Folha de Sprite Emoji com 3200 itens
Existem 3200 emojis. Para evitar fazer milhares de solicitações HTTP, todos eles são armazenados em um único arquivo chamado Folha de sprite ou atlas de imagem. Aqui está uma vista parcial da folha oficial de sprites do Twitter emoji:
O real imagem oficial da folha de sprite do Twitter emoji é ainda maior que isso.
A ideia por trás de um Folha de sprite é armazenar todos os emoticons em um arquivo … sendo necessário apenas uma solicitação HTTP do servidor em vez de centenas. E, neste caso, milhares, porque existem 3200 emojis no Twitter em 17 de março de 2020.
Cada emoji individual é exibido em um único elemento DIV e navegado alterando esta propriedade:
Ao fornecer a essa propriedade um x e y deslocamento em pixels, podemos navegar para qualquer Emoji no conjunto. Só precisamos memorizar a posição de cada emoji e armazená-la em um objeto JavaScript.
Não é o tipo de trabalho mais divertido … mas você só precisa fazer uma vez.
Emoji Tabs
Comecei com a reconstrução do guias emoji interface. Eu simplesmente não concordo alguns escolhas de ícones feitas e o número de categorias. Então, eu aumentei o número de guias disponíveis. Há mais especificamente grupos de assuntos significativos do que as 9 guias que o Twitter oferece .. Natureza, Carros, Aviões, Trens… poderia ser mais específico.
Uma coisa importante aqui é que eu adicionei atributos personalizados tipo de dados (segurando o nome do tipo de guia que mais tarde será usado para filtrar emojis) e data-title, que simplesmente armazena uma descrição simples de cada conjunto.
É melhor gastar mais tempo navegando melhor categorias do que emojis difíceis de encontrar. Se não aumentarmos apenas o número de guias … podemos economizar tempo de pesquisa se as próprias guias forem categorizadas em um maneira mais significativa.
me separei positivo e negativo emojis. Quantas vezes você tenta escolher entre o conjunto positivo? É difícil traçar a linha entre os dois tipos distintos quando todas as emoções são mostradas ao mesmo tempo … e, no entanto, é uma distinção muito útil e prática.
Minhas insert_all_emoji A função é chamada uma vez após o término do carregamento do DOM.
Ele é responsável por criar fisicamente cada emoji na exibição principal dos resultados da pesquisa. Quando é executado pela primeira vez no tempo de inicialização do aplicativo … ele cria dinamicamente cada emoji como um
Mapeando IDs exclusivos para a posição de segundo plano e o tamanho do Emoji
Cada emoji tem um ID numérico único, variando de 0 a 3199 (já que existem 3200 emojis no total.) Também é importante observar … originalmente todos os emojis são configurados para serem visíveis por padrão. Quando cliques nas guias, eu uso outra função para “filtrar” os emojis indesejados dessa categoria.
A posição dos emojis é calculada usando CSS posição de fundo propriedade. Isso pode ser puro pesadelo com o conjunto de até 3200 emojis. Então eu tive que criar outro script que chamei Emoji Finder. Basicamente, mostra o conjunto inteiro como uma imagem. Clicar nele com o mouse renderá x e y deslocamento de fundo para esse emoji no console do desenvolvedor. Depois que obtive esses resultados, copiei-os com força bruta no meu CSS.
Sabendo que cada emoji é 48px por 48px é relativamente fácil mapear para a posição correta do plano de fundo com apenas uma matemática simples.
Criando guias clicáveis
Para criar cada guia, simplesmente cliquei no emoji diretamente na imagem e o script me deu um deslocamento preciso em toda a planilha do sprite. Eu então o codifiquei em minhas guias. Foi um processo doloroso, mas os resultados falam por si. Além disso, qual seria uma maneira melhor ou mais rápida de fazer isso? Eu consegui mapear todos os emojis favoritos em questão de 15 minutos.
Aqui está o CSS que eu acabei com:
Parece um pouco complicado, mas realmente não há muito mais que você possa fazer para alcançar essa funcionalidade. Normalmente, eu tento percorrer uma milha extra em questões que sei que, uma vez concluídas, nunca mais as tocarei. Justo.
Por que eu amo funções de ordem superior do JavaScript.
Funções de ordem superior são um salva-vidas para situações em que você precisa lidar com muitos itens. Não consigo imaginar escrever loops para casos como este. As funções HO também tornam meu código muito mais limpo e intuitivo por meio da abstração!
Lembre-se de que, na etapa anterior, um conjunto inteiro de emojis foi incorporado à exibição de resultados por padrão após o término do carregamento do DOM?
Agora precisamos filtrar esse conjunto. Adivinha, vou usar uma função de ordem superior chamada .mapa. Eu provavelmente poderia ter usado .filtro. Nesse caso em particular, não há diferença.
filter_emojis é a minha função favorita de todo esse projeto. Foi muito divertido escrever. Geralmente quando há um concreto problema a resolver, a codificação se torna muito mais gratificante. E este foi um desses casos!
Mas como a função de filtro sabe quais emojis manter e quais remover do conjunto? Todos os IDs são armazenados em matrizes individuais que representam esses emojis.
Criei um script que, quando clico em qualquer emoji na exibição principal, adiciona seu ID exclusivo a uma matriz. Percorrendo a lista inteira e clicando em emojis, eu consegui criar listas que eu achava que estavam associadas a qualquer guia específica. Um por um, criei cada lista simplesmente clicando em emojis. Os IDs gerados foram colocados nas matrizes vistas acima (positivo, negativo, gestos, relação, gatosetc.)
O que acontece agora é o primeiro a definir exibição para Nenhum para todo o conjunto. Então, eu uso ordem superior .mapa função para definir exibição de volta a bloco em linha mas apenas para todos os emojis contidos no conjunto selecionado.
o onclick O evento para esta função está vinculado a cada guia usando esta função:
Mas e a pesquisa?
Por enquanto é tudo. Preciso que tudo o que criei nos últimos dois dias afunde um pouco. Depois, adicionarei a pesquisa como parte II deste tutorial.
Então, da próxima vez que atualizar este tutorial, planejo escrever uma função de pesquisa emoji. Isso levará algum tempo … Preciso escrever uma lista de palavras-chave descrevendo 3200 emojis com mais palavras-chave que o Twitter.
Este é um passo necessário … e definitivamente será uma melhoria! Por exemplo, notei que a pesquisa do Twitter Emoji está quebrada em alguns lugares. Não há código de cores. Se você digitar “azul”, não receberá absolutamente todos os objetos azuis do conjunto. Mas o código de cores IMO é tão importante para algo assim.
Meus livros de codificação
Dicionário Visual CSS contém diagramas visuais para toda propriedade CSS Em uso comum. Gramática JavaScript contém o resumo do idioma do ponto de vista de um iniciante completo.
Minha oferta de pacote PDF
Este é meu página oculta onde você pode fazer um acordo apenas por ler meus artigos do Medium.
Download de PDFs (Veja detalhes)
Visualiza todas as propriedades CSS. Se você gosta dos meus tutoriais e deseja apoiar meu trabalho, pode ajudar comprando uma cópia.
baixar PDF $ 25 em cores Compre na Amazon US $ 24,99 [kindle or paperback]
Eu estou não Random House ou uma grande editora.
Como escritor independente, eu poderia usar toda a ajuda que conseguir!
Dedico tempo para projetar meu trabalho publicado como livros de presente. Não se trata apenas de codificação, mas de ter algo interessante em sua mesa para se relacionar como programador ou designer de interface do usuário – UX. Houve momentos em que esqueci algo e tive que abrir meu próprio livro para aprender. Eles podem ser usados como referência de mesa.
Obrigado Cirrus The Cat, por seu apoio eterno.
Agradeço a todos pelo apoio. Você também … Cirrus, o gato. 😊
