Nivelando o site de retiros do Flywheel: o conto de um desenvolvedor

Como você deve saber, se você acompanha o Flywheel um pouco, temos um retiro semestral para todas as empresas que chamamos carinhosamente de Fly Fest. (E se me permite: é uma explosão.)

À medida que o Flywheel cresceu, o Fly Fest tornou-se um evento cada vez maior, com um número cada vez maior de atividades, sessões e oportunidades para subir de nível profissionalmente e se conectar com nossos colegas Flywheelers de todo o mundo.

Em um certo ponto, percebemos que havia muito o que acompanhar – onde eu deveria estar? Quando começa? Como eu chego lá? Quais são minhas escolhas para sessões de breakout?

Então, para evitar que alguém se confunda, ou se perca, ou apareça em Las Vegas com o tamanho errado de sapatos (se você sabe que sabe), foi decidido que o Fly Fest precisava de um site dedicado. Foi um privilégio servir como desenvolvedor do site Fly Fest e compartilhar um pouco sobre esse projeto!

Os requisitos do projeto

Foi uma decisão fácil construir o site Fly Fest no WordPress, por vários motivos. Obviamente, o Flywheel é focado no WordPress, por isso é um forte candidato logo de cara. Mas o Fly Fest também tem várias partes interessadas internas importantes que precisam ser capazes de editar o site em tempo real (trocadilho intencional), devido a possíveis alterações de última hora nos horários, detalhes ou locais.

Além disso, o site tem alguns tipos diferentes de conteúdo que precisam ser editáveis ​​e classificáveis ​​de forma independente e flexível. O site do Fest apresenta uma programação geral, alguns tipos diferentes de eventos e uma seção de perguntas frequentes que precisam ser vinculadas de forma coesa.

Por fim, o site precisava funcionar bem em dispositivos móveis, pois era muito provável que os participantes pegassem seus telefones para verificar horários, locais e outros detalhes do evento ao longo do dia. (Por esse motivo, optamos por um layout de página única, para manter o número de cliques e carregamentos de página no mínimo absoluto.)

Dados esses requisitos, escolher um site e tema WordPress personalizados, usando tipos de postagem personalizados e campos personalizados avançados, “não era um acéfalo” (para emprestar a frase do fundador Rick Knudtson).

Tema e plugins

Os tipos de postagem personalizados criados para o site incluíam itens de programação (que preenchem a programação do evento com horários, locais, etc.); Breakouts (para cada uma das sessões de breakout); Sociais (para todas as atividades extracurriculares); e Things to Know , que completam a seção de perguntas frequentes no site.

Embora existam plugins disponíveis para facilitar a criação de tipos de postagem personalizados (ou CPTs), para manter as coisas enxutas, optei por codificar os CPTs diretamente no tema do site – que, aliás, decidimos construir do zero, já que o site é pouco mais do que uma página inicial. Isso significava que não eram necessários muitos arquivos de modelo, então um tema filho ou mesmo um tema inicial provavelmente seria um exagero. Na verdade, a versão final do tema acabou usando apenas cinco arquivos de template básicos no total: um para o rodapé e um para o cabeçalho; um arquivo de funções, naturalmente; o arquivo de modelo de primeira página e, claro, o arquivo de índice apenas para um substituto. (Além disso, não há muito que eu goste mais do que um campo verde.)

Mudando para plugins: como você já sabe se já trabalhou com Advanced Custom Fields (e se não trabalhou, está perdendo!), o plugin torna a experiência de edição imensamente mais suave e fácil para os administradores do site. Cada tipo de postagem personalizada tem seu próprio conjunto único e simples de campos personalizados a serem preenchidos e instruções a serem seguidas para facilitar a atualização do site para qualquer pessoa. Além disso, uma página geral de opções de administração foi criada com o ACF (um dos meus recursos favoritos da versão Pro do plug-in).

Além dos campos personalizados avançados, os únicos plugins que optamos por usar foram o Post Types Order (para permitir que os editores de conteúdo arrastem e soltem coisas como as perguntas frequentes para reordená-las conforme necessário, em vez de classificá-las por data); e meu plug-in de compressão de imagem favorito, Compress JPEG & PNG images by TinyPNG (obrigatório quando os usuários farão upload de suas próprias imagens de quem sabe onde). É isso!

Dando vida à marca

Chega de coisas técnicas. Este ano, o tema do Fly Fest foi “Level Up”. Nossos designers estelares criaram um novo visual (trocadilho intencional) para o evento, referenciando esse tema em uma referência aos videogames retrô dos anos 80. A marca vibrante animou todos os aspectos do retiro, desde o swag até a sinalização e o design ambiental.

O site foi naturalmente projetado para capturar essa mesma sensação caprichosa, até a fonte pixelizada. Eu tenho que agradecer aos nossos designers fenomenais Bryan e Rese pelo visual e layout; Fiz o meu melhor para recriar fielmente seus lindos modelos de alta resolução. Mas o trabalho deles foi tão bom que me inspirou a ir ainda mais longe como desenvolvedor do site, para ver que outras oportunidades poderiam existir para dar ainda mais vida à visão.

Primeiro: colaboramos em maneiras de fazer a visualização inicial do site parecer a tela inicial de um jogo de arcade, e eu não poderia estar mais feliz com o resultado (veja abaixo!). Os designers me forneceram uma animação de fogos de artifício de 8 bits sobre o logotipo do Fly Fest, bem como um dos nossos mascotes do Fest (apelidado de “Fly Kid”). Eu adicionei um pouco de movimento e uma trilha colorida mais longa para Fly Kid usando quadros-chave CSS, apenas para adicionar um pouco de personagem (trocadilho ainda intencional). Assista o suficiente e Fly Kid se vira e corre de volta para o outro lado, o que parecia muito arcade para mim.

O toque final foi fazer o texto “Enter para começar” piscar, para dar a toda a tela inicial aquela doce vibração retrô, como se você tivesse acabado de chegar a um gabinete de fliperama com o punho cheio de moedas quando chegasse ao site:

Obviamente, para qualquer site, a navegação é importante. Isso é especialmente verdade aqui, onde os Flywheelers podem entrar no site a qualquer momento para verificar os principais detalhes do evento em andamento.

Para atingir esse objetivo e levar a inspiração ainda mais longe, decidi fazer o menu de navegação parecer e se comportar como uma tela de pausa de videogame; pressione o ícone do menu de hambúrguer na barra de navegação e você ouvirá um efeito sonoro familiar quando a tela de “pausa” (ou seja, o menu de navegação) se abrir no site:

Eu poderia falar muito mais sobre a miríade de pequenos floreios que deram vida à marca, mas quero destacar especialmente o trabalho dos designers nos cursores personalizados e nos ativos e ícones animados em todo o site; as estrelas brilham, as naves voam e as ondas... uh, onda, eu acho!

Também me orgulho do jogo “color flood” próximo ao final da página, que – curiosidade – é uma CodePen incorporada que construí no React há algum tempo, adaptada à marca do site. Sentimos que ter um jogo real no site ajudou a levar toda a experiência para o próximo nível. (Quer saber? Vamos apenas dizer que todos os trocadilhos são intencionais.)

Desafios técnicos

Estou sempre disposto a encontrar maneiras criativas de resolver problemas no código, e este site ofereceu algumas oportunidades interessantes.

Uma das minhas partes favoritas do design foram esses componentes de botão de acordeão. Eles começariam como caixas (para fornecer aos usuários uma visão geral fácil do conteúdo), mas poderiam ser tocados/clicados para revelar mais informações:

O desafio que esses elementos do acordeão apresentavam estava na espessa sombra inferior/direita. CSS não tem nenhuma maneira de gerar bordas como essa (muito menos de uma maneira que funcionaria se o acordeão estivesse recolhido ou expandido), então eu tive que ser um pouco criativo.

A solução foi perceber que o CSS permite definir vários valores de sombra de caixa . A “borda” que você está vendo são, na verdade, duas sombras; um deslocamento para a direita, um ligeiramente para a direita e para baixo. Essa declaração fica assim:

box-shadow: 14px 0 0 var(--black), 2px 12px 0 var(--black)

(A propósito, se você não estiver familiarizado com a sintaxe var(–black) : essas são variáveis ​​CSS; elas são incríveis, e você pode ler mais sobre elas aqui!)

Falando de acordeões, no entanto:

Esses elementos sanfonados são usados ​​na maioria das seções do site, o que significa que cada seção pode ser muito curta, muito alta ou em qualquer lugar entre eles, apenas com base em quantos elementos o usuário decide inspecionar enquanto navega na página.

Na maioria dos sites, isso não seria um problema, pois o plano de fundo normalmente seria apenas uma cor estática. Mas aqui, onde há tantas coisas interessantes acontecendo no fundo, eu queria ter certeza de que não importa a altura da seção, os elementos decorativos pseudo-aleatórios desmoronaram ou expandiram com ela, e você nunca viu muito ou muito pequena.

A solução para este desafio foi posicionar absolutamente cada elemento de fundo dentro de sua seção pai e, em seguida, definir suas propriedades superior e esquerda dinamicamente com a função CSS calc, usando uma combinação de viewport e unidades de porcentagem, algo assim:

svg.star:nth-of-type(4){
 left: 90%;
 top: calc(16vh + 20%);
}

A combinação calculada de unidades de viewport e unidades de porcentagem ajudou a dar uma sensação de aleatoriedade ao layout, além de explicar o tamanho da tela do usuário.

ovos de Páscoa

Observadores astutos podem ter notado a contagem de moedas no menu de pausa, e isso não é apenas decorativo. Eu me diverti muito criando referências a franquias clássicas de videogame no site, e foi uma delícia ver meus colegas de trabalho postarem sua surpresa no Slack enquanto desbloqueavam esses pequenos ovos de Páscoa.

Não vou estragar muito aqui, mas direi que existem algumas maneiras de adicionar ao seu total de moedas e que você deve ter o som ligado quando estiver procurando por segredos. Olhe bem de perto, e você encontrará muitas referências a jogos da Nintendo, Capcom e Konami... ah, e também há uma pequena homenagem de 8 bits a uma faixa favorita do Flywheel escondida no site, que eu criei usando onlinesequencer.net.

Boa caça e obrigado por ler!

Continue lendo: O fluxo de trabalho de desenvolvimento perfeito

Desenvolver sites WordPress não precisa ser difícil. Na verdade, com as ferramentas certas e alguns softwares simples, seu fluxo de trabalho de desenvolvimento pode ser absolutamente delicioso! Desde o desenvolvimento local até a ativação dos sites, compilamos nossas melhores dicas e truques para simplificar o processo e manter os sites nos próximos anos.

Faça o download abaixo!