Olá a todos! Antes de começarmos, gostaria de dizer que é muito difícil escolher os favoritos no CodePen. Não porque, como cofundador do CodePen, eu me sinta como um pai escolhendo o filho de que mais gosta (RUDE). Mas porque simplesmente há tanta coisa boa trabalho no CodePen. Dez simplesmente não são suficientes. Felizmente, posso escolher novos trabalhos incríveis para mostrar todos os dias, que é o que acontece na página inicial do CodePen. Portanto, escolherei apenas algumas canetas excepcionais que foram publicadas recentemente.
Karim Maaloul’s “Chill the Lion” (Chill the Lion) explodiu em popularidade outro dia, mas confira também algumas de suas canetas anteriores, como “Mighty fish”:
Veja a caneta Peixes poderosos por Karim Maaloul (@Yakudoo) em CodePen.
Recentemente, fiquei impressionado com o “Responsive Animated Infographic” (Infográfico animado responsivo) de Sarah Drasner. Ela pegou alguns dados sobre diferentes soluções potenciais para o aquecimento global e criou um infográfico interativo a partir deles. O resultado não é apenas impressionante e divertido, ele realmente fornece as informações de uma maneira supereficaz. O usuário percorre as opções em ordem de probabilidade e, ao mesmo tempo, vê o quanto elas são eficazes e caras. Sem falar que são… responsivas. Uau.
Veja a caneta Infográfico animado responsivo. por Sarah Drasner (@sdras) em CodePen.
O CodePen pode ser um ótimo lugar para ensinar e aprender. Eu aplaudo a Mozilla por usá-lo dessa forma com o jogo “Power Surge” que eles criaram. A ideia é que o jogo seja divertido e jogável, mas tenha alguns problemas de desempenho (propositalmente). O senhor usa as ferramentas de desempenho disponíveis no DevTools para analisá-los e corrigi-los.
Veja a caneta Surto de energia por Mozilla Hacks (@mozhacks) em CodePen.
Chris Gannon faz um trabalho incrível com animação SVG. É sempre de bom gosto e moderno. Isso faz com que o senhor deseje que o design de interação na Web seja sempre tão divertido, como esta demonstração “Line Loader”:
Veja a caneta Carregador de linhas SVG (sucesso) por Chris Gannon (@chrisgannon) em CodePen.
Rachel Smith está arrasando blogando sobre como fazer coisas incríveis com JavaScript ultimamente, tornando assuntos complicados como física e curvas de Bézier mais fáceis de entender e divertidos. Sua energia é contagiante quando o senhor confere suas canetas divertidas, como esta “Floaty fluttery rainbow stars”:
Veja a caneta Estrelas do arco-íris flutuantes e esvoaçantes por Rachel Smith (@rachsmith) em CodePen.
A conta CodePen de Jake Albaugh realmente se tornou autoconsciente há pouco tempo e programou a si mesma. Então, sim, essa foi a primeira vez.
Veja a caneta caneta#PwLXXP por Jake Albaugh (@jakealbaugh) em CodePen.
Tiffany Rayside é incrivelmente prolífica no CodePen. Uma coisa superinteressante que ela tem feito ultimamente é começar com um código base e “remixá-lo” para criar demonstrações visuais totalmente diferentes. No caso de sua Coleção de partículas Fooo código da partícula é idêntico, mas apenas os valores e as opções de design mudam. Um exemplo:
Veja a caneta Foo Particles Four por Tiffany Rayside (@tmrDevelops) em CodePen.
As demos de Jack Rugile muitas vezes parecem que deveriam fazer parte de introduções de filmes de Hollywood. Incrivelmente artísticas, performáticas, belas, surpreendentes e elegantes.
Veja a caneta Grade do arco-íris por Jack Rugile (@jackrugile) em CodePen.
As demonstrações criadas especificamente para ensinar um conceito são sempre muito queridas para mim. Essa bela demonstração interativa para ensinar o modelo de caixa em CSS, feita por Caroline Artz, é incrível:
Veja a caneta diagrama de modelo de caixa interativo angular por Caroline Artz (@carolineartz) em CodePen.
O trabalho de Gerard Ferrandez é cativante. É lindo, ao mesmo tempo em que abraça o absurdo e faz o senhor pensar. Aparentemente transparente é um bom exemplo disso, mas vale a pena dar uma olhada em todas as suas demonstrações. Esta é uma das minhas favoritas, que aborda o visual “glitch”, do qual não me canso:
Veja a caneta mojo funcionando por Gerard Ferrandez (@ge1doot) em CodePen.
