Sempre construindo, sempre aprendendo: a jornada de Cyd Stumpel pela web moderna | Codrops

Sou Cyd, desenvolvedor criativo freelancer, palestrante técnico e professor de meio período baseado em Amsterdã, Holanda. Eu construo sites acessíveis e premiados para empresas, estúdios e indivíduos, mas também ensino a próxima geração de desenvolvedores web na Universidade de Ciências Aplicadas de Amsterdã (AUAS). Gosto de blogar de vez em quando e tenho gostado muito de falar em conferências ao longo dos anos.

O que mais adoro no desenvolvimento é ver designs planos ganhando vida com movimento e usá-los como uma ferramenta para contar histórias.

Trabalho selecionado

Rotgans Media House

Michiel Rotgans é um fotógrafo holandês com um belo trabalho. É sempre mais fácil criar portfólios para pessoas com visuais impressionantes.

Adoro especialmente a transição da página inicial para o caso e como ela funciona ao contrário ao navegar de volta.

Este projeto foi desenvolvido por Tim Borst . Neste projeto usei transições de visualização CSS para filtragem, transições de página e animações de carregamento. Também usei o posicionamento de âncora CSS para uma pequena microinteração nos botões de filtro. É construído em WordPress usando Swup com transições de visualização nativa. Swup é incrível se você deseja ter controle sobre suas diferentes transições entre páginas, muito mais fácil e com melhor suporte do que as abordagens nativas com visualizar tipos de transição e eventos de troca de páginas no momento.

Studio Sallali

Hamid Sallali é um diretor criativo com quem trabalhei algumas vezes ao longo dos anos. Ele projetou este site e me deu total controle criativo sobre o movimento.

A animação de rolagem (feita com GSAP ScrollTrigger) foi baseada em um tutorial aqui mesmo no Codrops. Isso tudo foi antes das transições de visualização, então a animação dos cliques nos cases é feita com GSAP Flip. Este também é um site WordPress.

De Visdeurbel

De Visdeurbel (ou campainha de peixe) é um projeto do ecologista holandês Mark van Heukelum. Ele notou que muitos peixes estavam sendo bloqueados durante a migração por uma eclusa em Utrecht, na Holanda. Ele colocou uma câmera subaquática na fechadura, fez um site que mostrava a transmissão ao vivo e uma campainha que os usuários podiam apertar sempre que um peixe estivesse visível. Nos primeiros anos, um e-mail era enviado ao cadeado com uma captura de tela da transmissão ao vivo para que ele pudesse abrir a fechadura manualmente. Com mais de 250.000 impressoras por ano, eventualmente tivemos que construir algo um pouco mais sofisticado do que enviar e-mails para um cadeado.

Não é o site mais criativo em termos de movimento, mas mesmo assim é um dos meus projetos favoritos, porque da comunidade que criou. Milhões de visitantes assistem à transmissão de um pequeno cadeado em Utrecht todos os anos.

De Visdeurbel também apareceu no Last Week Tonight with John Oliver, o que foi realmente surreal.

Foi redesenhado por um dos meus estúdios favoritos para trabalhar, Studio Moan , ano passado e eu cuidei da reconstrução.

Depois de apenas dois dias percebemos quantas pessoas estavam visitando De Visdeurbel, e quantas pessoas simplesmente gostavam de apertar um botão (e honestamente, quem pode culpá-los?). Isso me forçou a pensar em maneiras de reduzir a quantidade de capturas de tela vazias, que trouxe para o Okay Dev Slack, uma comunidade cheia de alguns dos desenvolvedores criativos mais úteis que você pode encontrar. Comecei a implementar algum tipo de algoritmo de detecção de borda e escrevi uma postagem no blog sobre isso.

Este ano também estamos coletando mais dados sobre como a campainha de peixe é usada, meus alunos do Minor Web Development estão realmente explorando o que poderíamos fazer com esses dados enquanto conversamos. Fique atento!

Sophie Zwartkruis

Sophie Zwartkruis é consultora de governança corporativa. Ela queria um site minimalista com transições de página e animações de rolagem sutis. Às vezes é mais difícil ser pequeno do que grande, mas foi um projeto muito agradável.

Este site foi desenhado por Hamid Sallali. Ele criou uma paleta básica de cores complementares, adicionou uma fonte serifada distinta e profissional e me pediu para trazer animações sutis para criar um site profissional que convida você a continuar explorando.

Sobre mim

Estudei Design de Comunicação e Multimídia na AUAS e estava planejando me tornar designer. Durante os cursos técnicos, porém, percebi como a codificação pode ser divertida. Infelizmente para mim, isso não significa que eu fosse imediatamente bom nisso, mas com muitas horas de trabalho duro e depois de um Minor em Web Design e Desenvolvimento me tornei muito melhor.

No meu último ano na universidade consegui um estágio frontend na Matise, uma pequena agência digital em Amsterdã. Foi também aí que encontrei pela primeira vez o design e a animação como ferramentas para contar histórias. Recebi uma oferta de emprego depois de me formar em 2018 e trabalhei lá até 2020, quando o Matise fechou as portas. Depois disso, comecei a trabalhar como freelancer.

Depois de encontrar alguns de meus ex-palestrantes em uma conferência em 2022, fui convidado a me juntar a eles como professor no novo Associate Degree Frontend Design & Development de dois anos na AUAS.

Em 2024 Falei pela primeira vez em uma conferência, a conferência Awwwards em Valência, e desde então falei em alguns dos meus eventos favoritos sobre CSS e desenvolvimento criativo, como Beyond Tellerrand, CSS Day e JS Heroes. Tenho mais algumas palestras no calendário para este ano, incluindo Fronteers Dark mode .

Filosofia

Acredito muito em “promessa insuficiente, entrega excessiva”. Acho que é por isso que a maioria dos meus novos projetos vem de referências. Acredito também que a acessibilidade pode ser uma oportunidade para ser mais criativo e conseguir mais projetos. Ainda é um nicho bastante importante para os desenvolvedores criativos saberem qualquer coisa sobre acessibilidade, infelizmente, mas com a nova legislação na UE isso está se tornando cada vez mais importante.

Acho que é muito importante acompanhar as novas especificações, o CSS adicionou muitos novos recursos interessantes para substituir o JavaScript, como índice de irmãos, posicionamento de âncora, transições de visualização e animações orientadas por rolagem. Tento implementá-los em novos projetos como melhorias sempre que possível, mas sempre os experimento primeiro em meu portfólio. Construir portfólios se tornou uma espécie de hobby meu. Basicamente, construo um novo portfólio a cada ano.

Ferramentas e fluxo de trabalho

Embora eu tenha construído praticamente todas as estruturas modernas, eu construo a maioria dos sites para meus próprios clientes em WordPress. Eu sei que não parece sofisticado, mas é a opção mais econômica e fácil de usar para mim e meus clientes.

Eu realmente gosto de usar o SvelteKit e o Astro, e costumo procurá-los se não precisar de um CMS. Eu adoro essas estruturas especificamente porque elas ficam próximas do JavaScript básico, embora o SvelteKit tenha adicionado muita complexidade nos últimos anos.

Atualmente aprendendo

Ultimamente tenho tentado substituir muitas animações JavaScript por soluções CSS. Em 2024, eu senti que realmente precisava apressar meu novo portfólio para aquele ano porque eu tinha certeza que todos entrariam no movimento das transições de visualização e da animação baseada em rolagem e que meu portfólio não seria mais especial. Dois anos depois, no entanto, parece que o grupo de desenvolvedores criativos de JavaScript ainda está na terra do JS. O suporte básico para os recursos também demorou mais do que eu esperava, então isso pode ter algo a ver com isso. Ainda acho que as animações CSS assumirão cada vez mais animações JavaScript à medida que o suporte do navegador crescer, então definitivamente vale a pena investir tempo.

Desafios atuais

Meu maior desafio atualmente é equilibrar todas as coisas que quero fazer ao mesmo tempo: ensinar, falar em conferências e realmente construir coisas para os clientes. Vou tirar uma folga do ensino pelo menos no próximo semestre para obter um equilíbrio mais saudável entre vida pessoal e profissional.

Considerações finais

É uma época estranha para ser um desenvolvedor web, para dizer o mínimo, com as pessoas dizendo que não vale mais a pena perder tempo aprendendo novas especificações porque a IA assumirá a maior parte do nosso trabalho de qualquer maneira. Algumas empresas estão até forçando seus desenvolvedores a se tornarem ‘engenheiros imediatos’.

Acho importante dar um passo para trás, permanecer resiliente e perceber que a poeira ainda não baixou, estamos bem no início da IA. Nossos papéis como desenvolvedores provavelmente mudarão, mas ainda não está claro como exatamente.

O cenário mais provável, a meu ver, será que nós, como desenvolvedores, seremos cada vez mais pressionados a assumir o papel de árbitros de gosto, qualidade e segurança. Será cada vez mais importante focar nos fundamentos do desenvolvimento web; saber a diferença entre código ‘bom’ e ‘ruim’, aplicar princípios como DRY e ficar de olho no desempenho, aprimoramento progressivo e acessibilidade.

Acho que nossa relevância e poder em comparação com a IA estará em ver o contexto inteiro do trabalho, quem irá usá-lo, como eles irão usá-lo e por quê. Portanto, meu conselho é: gaste algum tempo nos próximos meses para reaprender o básico.