As 3 etapas para melhorar sua vida cotidiana como desenvolvedor

Introdução

Você já se irritou com a ideia de ter que passar novamente por todas as etapas do desenvolvimento de cada novo projeto do zero, sentindo que o peso da monotonia está te puxando para baixo? É uma frustração comum entre os desenvolvedores – a sensação de que todo projeto segue o mesmo processo tedioso, deixando pouco espaço para a criatividade.

Mas e se eu lhe dissesse que existe uma maneira de sair desse ciclo e transformar sua experiência de desenvolvimento de Webflow em uma fonte de prazer e satisfação? O segredo é usar as melhores práticas e inovações que permitirão que você leve o fluxo de trabalho de desenvolvimento do Webflow para o próximo nível.

Neste guia detalhado, veremos técnicas que você pode usar para agilizar as etapas rotineiras de desenvolvimento, superar coisas comuns e desbloquear todo o potencial da plataforma. Então, apertem os cintos e prepare-se para entrar em um mundo onde a eficiência reina.

Etapa 1 - Preparando o cenário para o sucesso

Quando você inicia seu novo projeto de Webflow, ele precisa ter uma base sólida e eficiente para escalar a partir daí. Embora esta seja uma fase preparatória, o desenvolvimento já começou e há pontos importantes a considerar que irão prepará-lo para o sucesso.

1.1 Guia de estilo

Se você pensar em um guia de estilo como um modelo para o seu projeto, sua primazia ficará clara. A criação de um guia de estilo marca o início do seu projeto, garantindo que as classes e os estilos se comportem de maneira previsível. Portanto, antes de mergulhar no desenvolvimento de páginas específicas, reserve um tempo para trabalhar nos estilos. Existem 2 abordagens para criar um guia de estilo:

• crie seu próprio projeto base do zero, de acordo com suas preferências, ou
• use estruturas de código aberto prontas, como Finsweet , Relume ou Wizardry ou qualquer outra.

1.2 Variáveis

Graças a uma atualização recente do Webflow, o uso de variáveis tornou-se ainda mais intuitivo e eficiente. Ao organizar as variáveis em grupos bem projetados, você pode simplificar o desenvolvimento e aumentar a eficiência. Eu recomendo considerar a criação de grupos como:

• Cores comuns
• Fundo
• Texto
• Tamanho do texto
• Tamanho do texto Móvel
• Contêiner (largura máxima)
• Tamanhos de ícone

Depois que esses grupos forem criados e associados às classes correspondentes, você poderá prosseguir para o desenvolvimento de páginas da web com facilidade e confiança.

Trabalhar na criação de variáveis sempre foi uma prática recomendada, e o Webflow continua essa tradição no domínio do desenvolvimento de baixo código. Esses grupos predefinidos fornecem uma base sólida para qualquer projeto, permitindo um processo de desenvolvimento mais tranquilo e estruturado. E se um cliente voltar até você com um pedido para alterar o esquema de cores de escuro para claro, você ficará grato por ter usado variáveis.

1.3 Priorizando a acessibilidade

A acessibilidade é muitas vezes deixada para as fases finais de um projeto, mas a sua importância não pode ser exagerada. Desde o início do seu projeto, a integração de recursos de acessibilidade deve estar em sua mente, influenciando cada decisão e elemento que você adicionar.

O Webflow disponibilizou publicamente um checklist , após estudá-lo cuidadosamente você terá uma ideia dos principais pontos deste assunto.

Um dos principais benefícios do Webflow é o painel de acessibilidade integrado, que fornece informações visuais sobre como seu projeto é percebido por pessoas com deficiência visual. Este recurso permite visualizar seu projeto através de múltiplos filtros de acessibilidade, simulando diferentes condições de visualização e destacando possíveis áreas de melhoria.

Trata-se de criar um ambiente digital mais equitativo e inclusivo. Ao priorizar a acessibilidade desde o início, você não apenas melhora a usabilidade do seu projeto, mas também demonstra o compromisso de equalizar o acesso ao seu projeto para todos os membros do seu público, independentemente de suas habilidades.

Etapa 2 – Dominar o Processo de Desenvolvimento

Agora você está entrando na fase de desenvolvimento direto de todas as páginas de acordo com o design. Aqui estão algumas recomendações para ajudá-lo a passar por esse estágio com sucesso:

2.1 Código Personalizado

"Parar. Por quê? Para quê? Mas como pode ser isso?! Afinal, o futuro já chegou e por que precisamos do código agora?” - você pode dizer. Mas sejamos honestos: sem conhecimento de código, você pode começar a entender o desenvolvimento web e começar rapidamente sua carreira, mas permanecendo competitivo e criando coisas extraordinárias com a simples funcionalidade de arrastar e soltar do no-/. plataformas de baixo código não parecem ser verdade. Portanto, seja bem-vindo ao desenvolvimento e aprendizado sem fim de que falei em meu artigo anterior .

2.1.1 HTML

Ao trabalhar em plataformas de baixo código como o Webflow, é tentador confiar apenas em divs e elementos de texto para criar estrutura. Mas é aqui que nos diferenciamos de ontem, que, no mínimo, depois de ler o meu artigo, assumimos a responsabilidade pela qualidade do produto acabado. Certifique-se de que sua marcação siga as convenções semânticas usando elementos como <header>, <nav>, <main>, <aside>, <footer> e outros e corrija o nível dos títulos para melhorar a clareza e acessibilidade.

2.1.2 CSS:

• divida mentalmente todo o seu código futuro em global e local. Adicione CSS global ao componente Navbar. Desta forma você terá acesso a ele de qualquer página, e também verá como os estilos são aplicados antes mesmo de publicar o projeto.

• Escreva estilos para estados de foco no código, usando consultas de mídia. Este método garante que a posição do haver seja exibida apenas na área de trabalho:

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• Escreva estilos separados para telas amplas de 1024 pixels para resolver problemas de layout exclusivos específicos para dispositivos desse tamanho específico.

  Embora seja fácil criar um design responsivo no Webflow, os layouts dos tablets começam com 991 pixels de largura. Acontece que a tela 1024 aplica todos os estilos da área de trabalho a si mesma. No entanto, ainda não tive um único projeto em que não tivesse que escrever estilos separadamente para uma tela 1024. Eu consideraria este item obrigatório para verificação. Registrar ou não estilos separadamente depende de cada projeto individual.

• Adicione comentários ao seu código CSS para melhorar a legibilidade e facilitar a colaboração com outros desenvolvedores. Facilite a vida para você e para outros desenvolvedores durante as edições subsequentes do projeto. Deixe o projeto do jeito que você gostaria de vê-lo se o tivesse herdado de um desenvolvedor anterior.

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Em vez de depender apenas de animações de fluxo da Web, recomendo fortemente o uso de animações CSS para tornar sua página mais fácil e eficiente sem afetar o desempenho da página.

  A ferramenta de animação integrada do Webflow torna mais fácil para um iniciante criar um bom site com inúmeras interações. Porém, se estamos falando de métodos avançados de desenvolvimento, é importante ressaltar que as animações CSS são extremamente leves e não deixam a página lenta com sua presença. Por outro lado, as animações de fluxo da web, que visam essencialmente apenas alterar as propriedades CSS dos elementos, funcionam por meio de JS e, portanto, tornam a página mais lenta. Isso não é perceptível em projetos pequenos, mas é perceptível em projetos grandes. De qualquer forma, aconselho usar CSS o máximo possível em qualquer projeto, ao invés de animações Webflow nativas, mesmo para prática. Lembramos que um hábito surge após inúmeras repetições . Vamos formar isso.

• Se a interação do usuário com animações lottie não for planejada, é muito melhor usar o arquivo mp4 em vez de .json e até mesmo .json otimizado. O desempenho no Safari agradecerá por isso.

2.1.3 JavaScript:

Estas são as melhores práticas que há muito são tidas como certas:

• Siga as práticas recomendadas para posicionamento de JavaScript, incluindo o uso de configurações globais para scripts de projetos globais e configurações de página para scripts locais.

• Use os atributos <async> e <defer> para scripts que podem ser carregados em paralelo para otimizar o tempo de carregamento da página.

  
  

2.2 Componentes do fluxo da Web

Com que frequência, ao estudar o design do seu projeto, você se pergunta: quais elementos repetidos do projeto posso usar como modelos em páginas diferentes? Os componentes do Webflow permitem manter um fluxo de trabalho de design consistente, eficiente e escalonável, criando blocos personalizáveis a partir de elementos e elementos filhos. Você pode reutilizar esses blocos em seu site e modificá-los em um único local para evitar a revisão individual de cada layout recorrente (fonte - https://university.webflow.com/lesson/components?topics=layout-design ).

Muitas vezes isso pode ser:

• Barra de navegação
• Rodapé
• Botão - se não for padrão, possui design e efeitos personalizados e/ou estrutura ramificada.
• Banner CTA - uma ou duas de suas variedades são frequentemente utilizadas ao longo do projeto.
• E meu símbolo mais usado é Seção - deve haver uma seção vazia com uma tag e uma classe, dentro dela todas as classes padrão incluindo um container, Título 2, parágrafo e vários blocos div vazios. Este é o componente mais comumente usado que você usará, eu prometo. Basta adicioná-lo, desvincular e finalizar a parte de desenvolvimento. Ao adicioná-lo como base, você pode economizar muito tempo em vez de adicionar cada bloco div separadamente.

Usando código, você pode expandir os recursos dos componentes do Webflow e fornecer ao cliente um sistema de gerenciamento de projetos incrivelmente flexível, sem acesso à estrutura da página HTML. Esta é uma abordagem completamente nova para desenvolvimento web que permite ao cliente controlar muitos aspectos de design do projeto após o desenvolvedor ter concluído o projeto. No futuro, o cliente poderá criar facilmente novas páginas de forma independente, com base em componentes já criados. E somente se houver necessidade de desenvolver elementos fundamentalmente novos será necessária a contratação de um desenvolvedor. Ao trabalhar com componentes, os clientes praticamente não têm chance de destruir sua estrutura HTML perfeitamente preparada (no entanto, nossos clientes geralmente são muito capazes).

2.3 Agrupando ativos de mídia

Use o agrupamento de ativos onde for mais fácil encontrá-los e gerenciá-los. Por exemplo, você tem uma barra de navegação enorme e contém muitos links com ícones. O designer já preparou algumas delas, prometeu terminar a outra parte em 3 dias, e a última parte ainda está em análise pelo cliente. Enquanto o designer desenha novas opções, depois o cliente analisa metade delas, faz edições e aprova a outra metade, e por fim envia para você desenvolver, muito provavelmente você já terá muitas outras imagens no painel de ativos. As imagens dos ícones serão quebradas e encontrá-las/substituí-las no futuro será inconveniente. Nesse caso, agrupar ativos facilitará a vida. O agrupamento permite que você mantenha todas as mídias do seu projeto limpas e organizadas.

2.4 Armazene uma pasta de arquivo para salvar:

• versões estáticas de páginas dinâmicas do СMS . Em caso de alguma alteração ou edição, será muito mais fácil fazê-lo em uma versão estática e depois transferi-lo para a página СMS. A peculiaridade das páginas СMS no Webflow é tal que ao conectar todos os elementos necessários aos campos correspondentes da Coleção, não será possível copiar o elemento em que esta conexão está presente e transferi-lo para uma página estática.

• Uma página com versões iniciais dos elementos. A prática frequente de inúmeras edições nos obriga a ter cuidado e não retirar do projeto o que já foi construído. Mova isso para a página de arquivo e deixe até tempos melhores.

• Página de teste para experimentos.

  
  

Etapa 3 – Edições finais

O que é importante fazer ao final do projeto antes de transferi-lo para o cliente, para não deixar a sensação de que seu projeto realmente subiu de nível agora:

3.1 Limpando o projeto:

• remova classes e animações não utilizadas.

• remova o código comentado e não utilizado.

• remova a mídia não utilizada. Se houver muitas coisas desnecessárias no painel e não for possível removê-las individualmente, sugiro um hack : exclua todos os ativos - publique o projeto - recarregue o webflow - e entre no ativo do painel apenas as mídias que são usadas no projeto.

  
  

3.2 Crie um manual do usuário do projeto para o cliente.

Além da página do guia de estilo, deve haver uma página descrevendo como usar o projeto finalizado. Um bom desenvolvedor é aquele que pensa em como o cliente irá administrar o projeto no futuro. Quão fácil será fazer alterações e que grau de liberdade o cliente terá para gerenciá-las. Graças ao webflow, isso pode ser o mais próximo possível da perfeição. Tendo conhecimento de CSS e compreensão dos princípios de funcionamento dos componentes do webflow, você pode montar um projeto no qual será fácil alterar as páginas atuais ou criar novas.

3.3 Dê nomes exclusivos aos backups.

O princípio da descritividade se aplica a tudo o que você, como desenvolvedor, dá um nome. Qualquer parte do projeto deve ser intuitiva para você e seus colegas no futuro.

Conclusão

Concluindo, vamos resumir brevemente os principais pontos que você deve focar para melhorar seu dia a dia como desenvolvedor.

Etapa 1 - Preparação

• Crie um guia de estilo para garantir consistência e previsibilidade nos elementos de design.
• Configure variáveis para agilizar o desenvolvimento e aumentar a eficiência
• Priorize a acessibilidade desde o início para criar sites inclusivos e fáceis de usar.

Etapa 2 – Desenvolvimento Direto

• Adicione o poder da codificação como um conjunto valioso de habilidades para desbloquear possibilidades infinitas no desenvolvimento web.
• Use componentes do Webflow como ferramentas poderosas para preparar seus projetos para o futuro.
• Organize ativos de mídia em grupos para fácil acesso e gerenciamento.
• Mantenha uma pasta Archive para armazenar elementos não utilizados para uso posterior.

Etapa 3 – Direto para casa

• Limpe elementos e ativos não utilizados para otimizar o desempenho do projeto.
• Crie um Guia do Cliente para facilitar a transferência e o gerenciamento de clientes.
• Salve um backup significativo de seus projetos para protegê-los contra perda de dados e garantir a continuidade.

A adoção das melhores práticas é essencial para maximizar a eficiência e produtividade no desenvolvimento de Webflow. Seguindo essa abordagem, você não apenas economizará tempo em tarefas repetitivas, mas também liberará recursos valiosos para relaxamento, autodesenvolvimento e criação de projetos inovadores. Vamos transformar nossos fluxos de trabalho e liberar nossa criatividade para construir coisas ainda mais legais.

Obrigado por ler!

Fico feliz em compartilhar minhas idéias e experiências para ajudar a tornar a vida mais fácil para outros desenvolvedores. Ao compartilhar o que aprendi, espero tornar o processo de desenvolvimento mais tranquilo e criar experiências melhores para todos.