Oxygen Builder para equipes e agências: como colaboramos

O Oxygen Builder é uma ferramenta incrivelmente poderosa, mas quando se trata de colaboração em equipe em termos de criação do site, as coisas podem ficar um pouco difíceis. Oficialmente, a equipe por trás do construtor de páginas recomenda fortemente que apenas um usuário edite por vez. Infelizmente, para agências com grandes projetos, isso é impossível e pode assustar alguns de usar essa ferramenta.

Em nossa opinião, os prós superam em muito esses contras, e encontramos várias maneiras de contornar essas limitações. Neste artigo, discutiremos como nossa equipe colabora ao criar sites com o Oxygen Builder. Ao longo do ano passado, passamos a criar 100% de todos os sites e projetos de nossas agências em Oxygen, obtendo uma compreensão bastante decente da melhor forma de fazer isso.

Atualização de abril de 2022: agora usamos o Collaboration Plugin by DPlugins, que resolve o problema de edição de vários usuários no Oxygen Builder. Leia nossa crítica aqui.

Primeiro, entenda os limites do construtor

Antes mesmo de começar a considerar a colaboração usando o Oxygen Builder, é importante entender as limitações e por que exatamente é difícil para vários usuários criar efetivamente um site com o Oxygen.

Primeiro, você deve ler este artigo publicado pela equipe Oxygen, que afirma exatamente por que o Edit Locking existe (o mecanismo que faz com que apenas um usuário possa editar por vez). Aqui estão as coisas importantes:

“Devido à maneira como o Oxygen salva estilos, classes e configurações globais, a edição multiusuário ou multiguia com Oxygen é altamente desencorajada.

Recomendamos o uso de uma única guia ao trabalhar com o Oxygen para evitar problemas em que uma guia está salvando dados mais antigos do que a outra, resultando na substituição de suas novas alterações. O mesmo cenário pode ocorrer quando dois ou mais usuários estão trabalhando no Oxygen ao mesmo tempo.”

Essencialmente, tudo é armazenado em um local central. As guias não conversam entre si, portanto, se um dev adiciona uma classe personalizada ou css personalizado na folha de estilo global, e outro dev não, mesmo que o primeiro salve, se o segundo dev salvar depois, as classes e estilos será substituído e perdido. Não é bom para colaboração.

Se você precisa trabalhar em equipe, é importante entender por que isso funciona, para que você possa contornar melhor esse problema. Novamente, as duas coisas que serão substituídas: 1) Classes personalizadas adicionadas e 2) CSS adicionado à folha de estilo global.

Contanto que seja apenas um usuário em uma página/modelo salvando, a estrutura será salva, assim como qualquer estilo definido para o ID individual do elemento ficará bem. Mas se você adicionar classes (importante, porque isso economiza muito tempo), elas podem ser substituídas.

Se você não precisa editar tudo de uma vez, não faça. Mas se isso for essencial para sua empresa ou projeto, experimente algumas das técnicas discutidas abaixo.

Edite mesmo assim (ou desative isso)

A primeira coisa a notar é que você tecnicamente pode substituir o Edit Locking, que é exatamente o que fazemos. Não há configurações para ativar, basta clicar no link Editar mesmo assim. Isso significa que toda a nossa equipe pode inicializar tecnicamente o construtor de uma só vez, mas eu consideraria ler mais sobre como fazemos isso. Ainda precisamos considerar os problemas de substituição aqui.

Uma coisa legal a notar é que com o Hydrogen Pack (um dos nossos principais addons para Oxygen, nós o usamos todos os dias), você pode desativar o recurso “Edit Locking”, ocultando o “Edit Anyway” todos juntos. Isso é apenas esteticamente agradável, mas não afeta realmente o fluxo de trabalho.

Use uma estrutura

O framework é uma mentalidade, que deve ser considerada durante todo o processo de concepção e construção de um website em Oxygen. Uma estrutura é uma coleção de classes CSS que trabalham juntas para ajudá-lo a estruturar seu site de maneira consistente. Os frameworks são muito prevalentes em toda a indústria de web design. Por exemplo, há Bootstrap, Tailwind e muito mais.

Com uma atualização recente do Swiss Knife, você pode fazer upload em massa de classes para o construtor, chamar a folha de estilo da estrutura e usar praticamente qualquer coisa para a qual tenha a lista de classes.

Para nós, usamos uma estrutura específica do Oxygen chamada Core CSS. Isso está incluído no OxyNinja Core, que é um dos nossos plugins favoritos por causa desse framework. Aqui está a proposta de venda, do site:

“Tornar um site perfeitamente consistente nunca foi tão fácil em combinação de classes de utilitário Core e Oxygen Builder. Colunas de grade CSS, cartões, tipografia, dimensionamento e espaçamento, cores e muito mais já estão definidos!”

Com a estrutura, podemos aplicar facilmente Tamanhos de fonte, preenchimento e muito mais, sem a necessidade de adicionar novas classes CSS e mantendo a consistência sem precisar de um guia de estilo digital central. Como as classes são instaladas no site desde o início do desenvolvimento, nenhuma nova classe precisa ser adicionada, o que significa que nada é sobrescrito.

Escrever CSS fora do construtor

Como agência, adoramos usar CSS para criar interações exclusivas e efeitos de foco. Portanto, geralmente temos uma tonelada de CSS personalizado que cada um de nossos desenvolvedores escreve. Seria bom adicionar à folha de estilo global se fosse apenas um usuário no site por vez, mas normalmente há vários desenvolvedores trabalhando, então precisamos de uma maneira de contornar o problema de substituição.

Para fazer isso, simplesmente escrevemos CSS em um plugin de terceiros chamado Advanced Scripts. Isso é criado pelo mesmo desenvolvedor por trás do pacote de hidrogênio e é um dos nossos plugins favoritos por aí. Cada desenvolvedor tem sua própria folha de estilo na qual escreve seu CSS. Ao salvar, os estilos são aplicados globalmente ao site. No final do projeto, todos os estilos são combinados em uma única folha de estilo principal.

Comunique-se Constantemente

Existem muitos casos em que precisamos adicionar classes CSS específicas a elementos individuais dentro do edifício. Ao trabalhar em equipe, isso é arriscado devido aos problemas em que as coisas são sobrescritas. Para acertar e não perder nenhum trabalho, todos nós colaboramos usando o slack, você tem um único desenvolvedor em todos os estilos necessários em um momento do dia. Este talvez seja o maior incômodo com este construtor, mas se gerenciado corretamente todos os dados serão salvos.

Como todos os CSS associados às classes estão em folhas de estilo, tudo o que precisamos fazer é adicionar as classes e os estilos serão aplicados de acordo.

Também estamos experimentando vários conceitos. Por exemplo, podemos criar um repositório do Github que contém uma folha de estilo CSS central e usar o recurso Live Share no VS Code para que todos possam escrever estilos juntos. Podemos então usar Scripts Avançados e Estaticamente para entregar os estilos ao nosso site. Também adotamos recentemente o upload de classe em massa que vem com o Swiss Knife.

Você faz coisas diferentes que resultam em um fluxo de trabalho colaborativo ainda melhor no Oxygen? Deixe-nos saber nos comentários aqui!