Permanecer conectado e aprender uns com os outros

O espaço digital obviamente tem seus desafios, mas também oferece oportunidades incríveis para nos conectarmos e aprendermos de maneiras que simplesmente não conseguiríamos fazer de outra forma. A situação com o COVID-19 nos desafiou a considerar maneiras de oferecer uma experiência SmashingConf semelhante e acesso a especialistas, assim como em um workshop presencial - sem precisar sair de sua mesa.

Com dicas perspicazes, exercícios, acesso a slides, gravações e perguntas e respostas amigáveis, já foi uma experiência incrível! Tivemos literalmente pessoas de todo o mundo colaborando em exercícios em grupo – algo que nunca conseguiríamos com um evento presencial.

E estamos apenas começando! Já temos uma agenda de workshops online prontos para você, para que você possa começar a marcar seus calendários e juntar-se a nós quando quiser. Que melhor maneira existe para aumentar suas habilidades on-line e aprender insights práticos e acionáveis ​​de especialistas do setor - ao vivo!

Você gosta do que vê, mas está preocupado em tirar uma folga do trabalho? Bem, você certamente não achou que deixaríamos seu enforcamento? Sabemos o quão difícil às vezes pode ser, e por isso preparamos um modelo legal de Convencer-Seu-Chefe para ajudá-lo. Boa sorte!

• Siga @smashingconf no Twitter
• Assine o boletim informativo da SmashingConf
• Assista aos vídeos anteriores do SmashingConf

Pronto para o próximo livro sensacional?

Isso mesmo! Clique de Paul Boag! Incentivar cliques sem truques obscuros está atualmente em sua fase final de produção e o pré-lançamento começa em 12 de maio . Este guia prático tem 11 capítulos cheios de conselhos que podem ajudá-lo a começar a melhorar sua taxa de conversão em apenas alguns passos simples. Você pode se inscrever para um desconto de pré-encomenda e ser um dos primeiros a colocar as mãos no livro. Fique ligado!

Quanto ao livro anterior, cópias impressas do The Ethical Design Handbook fizeram seu caminho ao redor do mundo, e pudemos ver algumas respostas felizes e críticas atenciosas. Se você também quiser uma cópia, você pode baixar um trecho em PDF gratuito (5 MB) para ter uma primeira impressão do livro - temos certeza de que você não ficará desapontado!

Além disso, caso você tenha perdido, há um episódio do Smashing Podcast com dois dos autores do livro: Trine Falbe e Martin Michael Frederiksen. Eles discutem o que significa para um design ser ético e como podemos fazer melhorias em nossos próprios projetos.

Drew também entrevistou Laura Kalbag, Eduardo Boucas, Stephanie Walter e muitos outros. Você pode se inscrever e sintonizar a qualquer momento com qualquer um dos seus aplicativos favoritos!

• Episódios anteriores do Smashing Podcast (incluindo transcrições)
• Siga @SmashingPod no Twitter

Trending Topics no SmashingMag

Todos os dias publicamos um novo artigo sobre vários temas atuais na indústria da web. Aqui estão alguns que nossos leitores gostaram mais e recomendaram mais:

• “Melhores Práticas com Hooks React”
  por Adeneye David Abiodun
  Este artigo aborda as regras do React Hooks e como começar a usá-los efetivamente em seus projetos. Observe que, para seguir este artigo em detalhes, você precisará saber como usar React Hooks.
• “Decisões de design inspiradas com erva Lubalin”
  por Andy Clarke
  Como podemos combinar elementos para desenvolver cabeçalhos e chamadas para ação poderosos? Como usamos texto HTML pré-formatado e o elemento de texto em SVG para controle preciso sobre o tipo? Como podemos otimizar SVGs e tornar o texto SVG acessível? Neste artigo, vamos explorar exatamente isso.
• “Colocando dados estruturados no processo de design”
  por Frederick O'Brien
  A adaptação da otimização do mecanismo de pesquisa só leva você até certo ponto. À medida que os metadados ficam mais inteligentes, é mais importante do que nunca integrá-los ao processo de design desde o início.
• “Como tornar a vida mais fácil ao usar o Git”
  por Shane Hudson
  Você não precisa conhecer suas árvores de suas bolhas penduradas. Se você usa o Git todos os dias e sente que é um malabarismo, aqui estão alguns truques e dicas para ajudar a tornar sua vida um pouco mais fácil.

Melhores escolhas do nosso boletim informativo

Seremos honestos: a cada duas semanas, lutamos para manter as edições do Smashing Newsletter em um tamanho moderado - há tantas pessoas talentosas por aí trabalhando em projetos brilhantes! Parabens a todos os envolvidos!

Interessado em patrocinar? Sinta-se à vontade para conferir nossas opções de parceria e entrar em contato com a equipe a qualquer momento - eles certamente entrarão em contato com você imediatamente.

Dicas para liderar uma equipe remota

Liderar uma equipe de design remota pode parecer um pouco assustador, especialmente se for sua primeira vez. Felizmente, outras pessoas já se encontraram na mesma situação antes e desenvolveram estratégias para manter a equipe produtiva e eficaz, não importa onde todos estejam. Mark Boulton é um deles.

À luz dos eventos recentes, quando muitas equipes precisam mudar para o trabalho remoto, Mark resumiu algumas abordagens simples, mas úteis, que o ajudaram a liderar equipes remotas por anos. Desde continuar os rituais de sua equipe até lidar com as expectativas de disponibilidade e treinar as pessoas nos altos e baixos que o trabalho remoto traz, as dicas de Mark não são difíceis de adotar, mas podem fazer uma diferença real. (cm)

Conhecendo as unidades de viewport CSS

As unidades CSS Viewport nos fornecem uma maneira de dimensionar as coisas de maneira fluida e dinâmica, sem a necessidade de JavaScript. Se você ainda não se aprofundou no tópico, Ahmad Shadeed escreveu um guia útil para unidades CSS Viewport.

Começando com uma visão geral das unidades de janela de visualização vw , vh , vmin e vmax , o guia aborda como as unidades de janela de visualização diferem de porcentagens e explora casos de uso práticos para unidades de janela de visualização e como implementá-las em seus projetos. Apenas o empurrão que você pode ter precisado para fazer a troca. (cm)

Um melhor carregador de arquivos para a Web

Construindo um uploader de arquivos melhor para a web. Essa foi a ideia por trás do uploader de imagens JavaScript Uppload. Criado por Anand Chowdhary, o uploader de imagens é de código aberto e pode ser usado com qualquer back-end de upload de arquivos. E com mais de 30 plugins, também é altamente personalizável.

Os usuários podem arrastar e soltar seus arquivos para carregá-los ou importá-los de uma câmera, URL ou mídia social e vários outros serviços (há até a opção de fazer e enviar uma captura de tela apenas digitando uma URL). Durante o processo de upload, os usuários podem aplicar efeitos às imagens e ajustar filtros como brilho, contraste e saturação. Se isso for um exagero para o seu projeto, você pode selecionar apenas o que precisa e fazer o treeshake do resto, é claro. O upload suporta navegadores até o IE10. Prático! (cm)

Plugin Flip Counter de código aberto

Deseja fazer uma contagem regressiva para um evento, visualizar uma campanha de arrecadação de fundos ou mostrar um relógio ou balcão de vendas? Então o Flip Counter de Rik Schennink pode ser para você. O plug-in é de código aberto, compatível com dispositivos móveis, fácil de configurar e funciona sem dependências.

Além de sua facilidade de uso e flexibilidade, Flip brilha com a animação lindamente suave que é usada para virar os números nas cartas. Dependendo do seu caso de uso, existem várias predefinições que você pode usar como ponto de partida para construir seu contador de fliperama. O estilo visual pode ser personalizado com CSS. Um pequeno detalhe encantador. (cm)

Como escrever um bom código de e-mail

Talvez você já tenha passado por essa situação antes em que teve que codificar um e-mail em HTML, mas teve dificuldades com as práticas recomendadas de código de e-mail. Para ajudá-lo a superar o desafio, Mark Robbins criou uma biblioteca para um bom código de e-mail. Você pode simplesmente copiar e colar o código e usá-lo em seus e-mails ou aprender mais sobre a teoria por trás dele.

A prioridade é garantir que o código seja semântico, funcional, acessível e atenda às expectativas do usuário, como aponta Mark. A consistência entre os clientes de e-mail e o design perfeito de pixel também são importantes, mas sempre secundários. Um para os marcadores. (cm)

Uma solução completa para dicas de ferramentas, popovers e listas suspensas

Se você está procurando uma solução rápida e fácil para dicas de ferramentas, popovers, menus suspensos e menus, você pode dar uma olhada em Tippy.js. A biblioteca fornece a lógica e o estilo envolvidos em todos os tipos de elementos que emergem do fluxo do seu documento e são sobrepostos na interface do usuário.

O Tippy.js é otimizado para evitar inversão e estouro, é compatível com WAI-Aria, funciona em todos os navegadores modernos e, portanto, a promessa, ele oferece alto desempenho em dispositivos de baixo custo. Você pode estilizar os elementos com CSS personalizado e o TypeScript também é suportado imediatamente. Prático! (cm)

Ferramenta de código aberto para fazer maquetes de produtos animados

O que você faz quando está faltando uma ferramenta para um propósito específico? Você mesmo constrói. Foi o que Alyssa X fez quando procurava uma ferramenta para fazer GIFs e vídeos animados para mostrar um produto. Sua opinião sobre o assunto: Animockup.

Com o Animockup, você pode mostrar seu produto em ação em uma maquete de dispositivo. Basta arrastar algumas imagens da tela para a ferramenta baseada em navegador e o Animockup a coloca automaticamente na maquete desejada. Você pode adicionar texto, imagens e ajustar o estilo e escolher entre uma seleção de predefinições para otimizar seu modelo para compartilhamento no Twitter, Dribble, Instagram e similares. Um pequeno ajudante útil. (cm)

Crie gradientes de cores CSS com facilidade

A escolha manual de cores para criar um gradiente de cores requer experiência em design e um bom entendimento da harmonia de cores. Se você precisa de um gradiente para um plano de fundo ou para elementos de interface do usuário, mas não se sente confiante o suficiente para realizar a tarefa sozinho (ou se estiver com pressa), o gerador de gradiente de cores que o pessoal do My Brand New Logo criou tem te protegeu.

Alimentado por algoritmos de gradiente de cores, o gerador cria gradientes bem equilibrados com base em uma cor selecionada. Existem quatro estilos diferentes de gradientes que vão do sutil ao efeito madrepérola e um gradiente de cores intenso e profundo. Você pode ajustar o gradiente com controles deslizantes e, quando estiver satisfeito com o resultado, copie e cole o código CSS gerado para usá-lo em seu projeto. Agradável! (cm)

Diagramas Colaborativos

Caneta e papel geralmente são difíceis de superar quando você deseja visualizar uma ideia com um diagrama rápido. Se você está procurando uma alternativa digital que seja tão direta e fácil de usar quanto suas ferramentas analógicas, você pode conferir o Excalidraw.

Excalidraw é um quadro branco virtual no qual você pode desenhar. Você pode escolher entre um conjunto de formas, conectá-las com setas ou linhas, adicionar texto e cor. Existem outras opções de estilo também, mas a ferramenta é bastante simples para que você possa se concentrar no que é realmente importante: visualizar sua ideia. Um ótimo recurso que é especialmente útil agora que muitas equipes trabalham remotamente: você pode compartilhar uma sessão de colaboração ao vivo com os membros de sua equipe ou seus clientes. As opções de exportação e salvamento também estão incluídas, é claro. (cm)

Dominando convenções de nomenclatura BEM

O BEM torna seu código escalável e reutilizável, evita que ele fique confuso e facilita o trabalho em equipe. No entanto, mesmo desenvolvedores de CSS experientes às vezes lutam com as convenções de nomenclatura. Para evitar que você se perca no cosmos do BEM, o pessoal da 9elements montou a folha de dicas do BEM com sugestões de nomes para alguns dos componentes da web mais comuns: navegação por trilha de navegação, botões, cartões, listas, guias, caixas de seleção de formulários, barras laterais e mais.

Se você quiser se aprofundar ainda mais na metodologia BEM, Luke Whitehouse compartilha dicas para enfrentar um problema sempre presente no BEM: netos, ou seja, elementos que estão atrelados a outro elemento, e não ao próprio bloco. Luke explora três abordagens diferentes para superar o desafio: achatar os netos e tratá-los como se não tivessem relação com o elemento pai, criando novos blocos e estendendo a convenção de nomenclatura BEM. Uma boa leitura. (cm)

Uma reserva para jogos clássicos

Você se sente nostálgico quando pensa nos videogames que jogou nos anos 80 e 90? Bem, por que não fazer uma pequena viagem de volta àqueles dias em que os jogos eram tão divertidos sem os efeitos extravagantes com os quais brilham hoje?

ClassicReload preserva mais de 6.000 jogos retrô antigos e OD/interfaces abandonadas que você pode jogar direto no seu navegador. Você pode pesquisar seu favorito ou navegar pelos jogos por nome, ano, gênero e plataforma para descobrir algo novo. Não importa se é The Oregon Trail, Prince of Persia ou Dangerous Dave que você deseja há tanto tempo, se você tem um ponto ideal para jogos, o site o manterá entretido por um bom tempo. (cm)

Gerenciando HTML DOM e alternativas jQuery

Como você gerencia HTML DOM apenas com JavaScript vanilla? Phuoc Nguyen coletou 100 trechos de scripts DOM nativos junto com explicações sobre como usá-los. Os snippets são rotulados por dificuldade e variam do básico (por exemplo, detectar se um elemento está focado) a tarefas mais intermediárias, como exportar uma tabela para CSV e, finalmente, casos de uso avançados, como criar um controle deslizante de intervalo.

Falando em baunilha: se você estiver usando jQuery em seus projetos, pode ser uma boa ideia verificar se você realmente precisa da dependência adicional ou se algumas linhas de código utilitário podem resolver o problema. “Você pode não precisar do jQuery” lista trechos de código alternativos úteis que ajudam você a abandonar o jQuery. (cm)

Paletas de cores excessivamente descritivas

Você já pensou em combinar rosa suave com ritmo de caracol com mogno não selado e melancia ruim como um esquema de cores para o seu próximo projeto? Bem, o que pode soar um pouco estranho no começo, é o conceito por trás do colors.lol, um site de inspiração de cores com “paletas de cores excessivamente descritivas”, como descreve seu criador Adam Fuhrer.

Criadas como uma maneira divertida de descobrir combinações de cores interessantes, as paletas são selecionadas manualmente pelo bot do Twitter @colorschemez. O feed gera combinações de cores aleatoriamente e combina cada cor com um adjetivo de uma lista de mais de 20.000 palavras. Escondendo-se por trás dos nomes incomuns estão, é claro, valores de cores hexadecimais reais que você pode usar imediatamente - #FDB0C0 , #4A0100 e #FD4659 no caso de rosa suave com ritmo de caracol e seus companheiros, por exemplo. Um divertido assumir a cor. (cm)

Máscaras SVG de repetição flexíveis

Às vezes é uma pequena ideia, um pequeno detalhe em um projeto que você mexe e que você não pode deixar de lado até encontrar uma solução sob medida para fazer acontecer. Nada que pareça grande coisa à primeira vista, mas que exija que você pense fora da caixa. No caso de Tyler Gaw, esse pequeno detalhe era um cabeçalho flexível com um pequeno rabisco na parte inferior em vez de uma linha reta. A reviravolta: para tornar o componente à prova de futuro, Tyler queria usar um padrão de repetição horizontal contínuo que ele pudesse colorir com CSS em qualquer cor que quisesse.

Para fazer o trabalho, Tyler optou por máscaras SVG de repetição flexíveis. O SVG fornece a forma, o CSS lida com a cor e mask-image faz o trabalho pesado, ocultando qualquer coisa na div subjacente que não faça interseção com a forma. Uma abordagem inteligente que pode ser usada como base para alguns experimentos divertidos. (cm)

Como forma de agradecimento, Vitaly Friedman lançou seu próprio “Smart Interface Design Checklists”, um deck em PDF com mais de 150 perguntas para fazer ao projetar e construir qualquer coisa, de hambúrgueres a carrosséis e mesas. Assine a newsletter abaixo e receba na sua caixa de entrada imediatamente!

Bits úteis de front-end e UX, entregues uma vez por semana.

Com ferramentas para ajudá-lo a fazer seu trabalho melhor. Assine e receba o PDF das listas de verificação de design de interface inteligente da Vitaly por e-mail.

Seu e-mail (esmagador)

No front-end e UX. Confiado por 190.000 pessoas.