Programação – Blog Goweb Agency

DRY vs WET Coding

goweb — Fri, 10 Jan 2020 15:55:27 +0000

Don’t Repeat Yourself (DRY) é um princípio de desenvolvimento de software, cujo objetivo principal é reduzir a repetição de código.
Write Everything Twice (WET) é uma abreviação arrojada para significar o oposto, ou seja, código que não segue o princípio DRY.

Um programador que se esforça para manter seu código DRY, portanto, não repeti-lo, geralmente segue a melhor prática. Mas há momentos em que adicionar um pouco de WET ao seu código poderá facilitar a vida de todos os programadores.

O computador já tem muito o que fazer, então, porquê escrever código que fará com que perca mais tempo na compilação?

A memória também é fundamental. Esgotar a memória, ou usar a memória desnecessariamente, é uma forma de colocar o código no lixo. Tornando o código WET pode também ajudar a chegar lá – ao lixo! Os primeiros tempos dos computadores, quando o armazenamento nem chegava a um kilobyte, recorda-se? Nada é ilimitado.

= DRY – Exemplo Simples =

Supondo que temos muitos lugares no código que precisam de ser executados com base na função do user atual. Por exemplo, criarPagina() só pode ser executado se o user for um editor ou administrador, apagarPagina() somente se o user for um administrador, etc.

Em vez de disseminar a lógica de verificar a função de um usuário em criarPagina() e apagarPagina(), podemos usar uma única função permissao() como abaixo.

// busca do utilizador
$utilizador = utilizadorActual();

if (permissao($utilizador)) {
// pode apagar a página
} else {
// bloqueia a função de apagarPagina()
}

Mantendo a lógica de permissao() num local, evita assim a duplicação e também habilita a reutilização do código. A vantagem adicional é a separação da lógica, ou seja, criarPagina() e apagarPagina() não precisam de saber como a permissão é verificada.

= Vantagens do DRY =

1. Manutenção
O maior benefício do uso de DRY é a manutenção.
Se a lógica da verificação da permissão foi repetida em todo o código, torna-se difícil corrigir os problemas que surgem no código repetido. Quando se corrige um problema num lugar só, pode-se facilmente esquecer de corrigi-lo noutras ocorrências.
Além disso, se precisar de modificar a lógica, precisará de copiar e colar em todo os sítios. Por ter código não repetido, só precisará de manter o código num único local. Novas lógicas e correções de bugs podem ser feitas num sítio apenas, em vez de em muitos sítios. Isto torna um software robusto e confiável.

2. Legibilidade
Frequentemente, o código DRY é mais legível. Isso não se deve ao próprio princípio DRY, mas ao esforço extra que o programador dedica ao código para fazê-lo seguir certos princípios, como o DRY.

3. Reutilização
O DRY promove a reutilização de código porque estamos a utilizar duas ou mais instâncias de repetição de código num único bloco de código.
O código reutilizável é pago a longo prazo, à medida que acelera o tempo de desenvolvimento.

4. Custo
Se a gestão da empresa precisar de ser convencida sobre investir mais tempo na melhoria da qualidade do código, então é isto: mais código custa mais.
Mais código demora mais tempo para os técnicos manterem e resolverem erros. Mais tempo para desenvolver e mais erros tornam um cliente infeliz.

5. Testes
Quanto mais caminhos e funções tiver que cobrir utilizando os testes, mais código será necessário escrever para os testes.
Se o código não for repetido, apenas precisará de testar um caminho principal, sendo que, comportamentos diferentes ainda precisam de ser testados, obviamente.

= Cuidados a ter =

Com todas as vantagens de usar o DRY, existem, porém, algumas armadilhas:

1. Nem todo o código precisa de ser “misturado” numa única porção. Algumas vezes, duas partes do código podem parecer semelhantes, mas com diferenças subtis. Quando misturar essas porções de código numa só e quando deixá-las separadas, deverá ser cuidadosamente pensado.

2. Se o código estiver “muito seco”, torna-se difícil de ler e compreender. Muitos programadores tentam aplicar o princípio DRY, mesmo quando há apenas uma instância de um bloco de código.

3. Frequentemente esquecido, o DRY não se limita apenas ao código. Deve ser aplicado em igual medida ao design da base de dados, documentação, código de teste, etc.

= Opinião Pessoal =

Pessoalmente, “as coisas parecem mais feias” quando um código é muito WET. Muitas vezes, faz-me sentir de imediato que o código não está limpo, organizado e que tem, por isso, má leitura.
Mais coisas, como implementar OOP (Object Oriented Programming) – Herança, polimorfismo, são boas práticas para evitar o código WET.

PS: O código não é temperamental!

The post DRY vs WET Coding appeared first on Blog Goweb Agency.

14 experimentos com HTML 5 de cair o queixo

goweb — Mon, 04 Sep 2017 09:30:41 +0000

Nos últimos meses, o HTML 5 vem ganhando destaque por conquistar cada vez mais um espaço que até então parecia exclusivo das aplicações em Flash. Embora o software da Adobe continue sendo usado por uma grande quantidade de sites, a falta de suporte à tecnologia em produtos Apple e, futuramente, também no Windows 8, faz com que surjam dúvidas quanto a seu futuro.

É fácil entender os motivos pelos quais o HTML 5 ganha cada vez mais espaço e conquista a preferência das fabricantes. Dispensando totalmente a instalação de qualquer espécie de plugin, a tecnologia permite inserir vídeos, jogos e conteúdos interativos em sites de uma forma simples para o desenvolvedor e mais confortável para o usuário.

Para tornar o processo de desenvolvimento mais simples, a linguagem utiliza tags objetivas que dispensam o uso de códigos complicados para o desenvolvimento de sites mais interessantes. Nesse artigo, apresentamos alguns exemplos do que pode ser feito por essa tecnologia que deve mudar de forma substancial a internet nos próximos anos.

The Wilderness Downtown

Nesse endereço, basta digitar o nome de uma cidade qualquer para transformá-la em uma peça importante dentro de um videoclipe. Para tornar o resultado mais interessante, são abertas diversas abas com tamanho variável no navegador, cada uma mostrando um ângulo diferente da ação.

Para obter um filme com mais elementos, é indispensável escolher uma localização que esteja retratada no serviço Google Street View. Depois de assistir ao resultado final, é possível compartilhá-lo com amigos através de sites como o Facebook e o Twitter.

Flower Power

Exemplo da interatividade, o FlowerPower é um site que permite aos usuários escrever ou desenhar qualquer coisa usando flores que desabrocham com um simples clique do mouse.

Controladores na parte superior da tela permitem alterar o tamanho da escrita e até mesmo a velocidade com que as flores surgem. O resultado é só uma mostra do que o HTML 5 pode entregar sem em nenhum momento interferir no desempenho de um navegador.

WebGL Water Simulation

Recomendado somente para quem possui instalada uma placa de vídeo um pouco mais atual, o WebGL Water Simulation é um belo exemplo das capacidade 3D do HTML 5. Esse experimento mostra uma interação com a água extremamente realista, incluindo uma fonte de luz que se adapta ao posicionamento de cada elemento e ao ângulo de visualização escolhido pelo usuário.

ROME

Um surpreendente videoclipe interativo que mistura filmagens com atores reais, animação em 3D e desenhos tradicionais, ROME guia o usuário por uma viagem surreal em que nada é o que realmente parece ser.

A interação com os elementos presentes na tela se dá através do ponteiro do mouse, que pode ser usado para mudar o ângulo da câmera, revelando detalhes que normalmente passariam despercebidos. Além disso, também podem ocorrer transformações em elementos do cenário, com resultados bastante coloridos e surreais. Para obter um melhor desempenho, é imprescindível o uso do navegador Google Chrome.

Voxels

Uma espécie de LEGO virtual no qual é possível adicionar uma grande quantidade de peças das mais variadas cores. Usando somente o ponteiro do mouse, o usuário pode mudar rapidamente o ângulo de visão e mudar o nível de zoom dos elementos apresentados na tela.

Google Sphere

Que tal se, em vez de apresentar os resultados de uma busca na forma de listas, o Google aproveitasse melhor o espaço em branco disponível em sua página inicial? É justamente isso que faz o Sphere, transformando qualquer busca em uma verdadeira nuvem de tags interativa.

Conductor

Diversas linhas se movem de forma totalmente aleatória pela tela e, ao se cruzarem, resultam na reprodução de diferentes notas musicais. O usuário possui a liberdade de usar o ponteiro do mouse para interagir com qualquer elemento da tela, em uma experiência que impressiona pela criatividade.

Asteroids

Uma recriação em três dimensões do jogo clássico lançado pela Atari em 1979, essa versão de Asteroids apresenta gráficos atualizados que rodam diretamente no navegador, dispensando a instalação de qualquer plugin. Ideal para passar o tempo em uma tarde de tédio.

Ball Pool

Nessa bela experiência com HTML 5, o usuário tem à disposição bolas de diversos tamanhos que pode movimentar da maneira que deseja pela tela. O projeto se destaca pela física realista e pela interação que possui com o navegador.

Não deixe de testar ações como clicar duas vezes sobre um objeto, selecionar o plano de fundo ou literalmente chacoalhar o navegador para ver as bolas saltando de um lado para o outro da tela. A experiência é interessante o bastante para justificar a perda de uma boa quantidade de minutos em frente ao computador.

Magnetic

Aprenda mais sobre a forma como ímãs atuam sobre partículas presentes no ambiente e entre si mesmos. Além de arrastar os elementos da tela, o usuário pode adicionar novos ímãs com tamanhos variáveis usando um duplo clique do mouse em qualquer lugar do ambiente.

Z-Type

Teste sua velocidade de digitação nesse jogo viciante em que o objetivo é escrever o mais rápido possível as palavras que surgem na tela. Cada letra correta garante um tiro, e é preciso uma boa habilidade no teclado para derrotar os inimigos que surgem nos estágios mais avançados do título.

BreakDOM

Nesse remake do game Breakout, o jogador utiliza uma barra de rolagem para controlar uma bola responsável por eliminar diversas caixas de seleção. Os controles são simples e podem ser efetuados tanto através do mouse quanto pelas setas do teclado.

Trail

Faça desenhos coloridos na tela do navegador usando traços que acompanham a movimentação do ponteiro do mouse. Para expandir o raio dos traços que ficam girando de forma constante, basta pressionar e segurar o botão esquerdo do dispositivo.

Typographic Rain

Uma verdadeira chuva de caracteres vai inundar seu navegador neste experimento que mostra como diferentes elementos de HTML 5 podem interagir entre si. Cada uma das letras que “chove” na tela é constituída por um código diferente, que responde de forma realista aos demais elementos da tela.

Além de contar com uma espécie de guarda-chuva que bloqueia determinados caracteres, o usuário pode alterar o tamanho das letras, a frequência com que elas caem e até mesmo o nível da gravidade presente no ambiente.

Origem: https://goo.gl/KZVdj9

The post 14 experimentos com HTML 5 de cair o queixo appeared first on Blog Goweb Agency.

HTML5: surpreenda-se com as possibilidades gráficas de Canvas

goweb — Wed, 30 Aug 2017 09:30:38 +0000

Nenhum software externo é usado nestas animações. (Fonte da imagem: Reprodução/Codepen.Io)

Se você é programador, entusiasta a web designer ou apenas gosta de ficar por dentro do “mundo mágico da programação”, estas demonstrações do poderio gráfico de Canvas certamente vão lhe chamar a atenção.

E detalhe: os códigos listados a seguir são também um convite a quem “gosta de brincar com a física”, conforme comenta o próprio criador das animações.

Mas estamos falando do quê? O Canvas é um elemento de HTML5 capaz de delimitar uma área específica na página para a renderização dinâmica de gráficos. A linguagem mais utilizada por esse recurso é a Javascript – que permite, portanto, a criação de animações através de códigos de programação dinâmica.

Para visualizar e até mesmo interagir com os códigos elencados abaixo, clique sobre a opção “Ver demo” (ao lado do título de cada uma das animações); você será automaticamente direcionado ao site Develop Mozila ou ao Codepen.Io – endereços responsáveis por hospedar os recursos interativos.

1 – Zen Photon Garden (Ver demo)

Clique em “Ver demo” para acessar a animação. (Fonte da imagem: Reprodução/DeveloperMozila)

Esta demonstração permite que linhas sejam desenhadas na tela. Um tipo de feixe de luz branca fica ao fundo do monitor; os seus rabiscos vão funcionar como uma rede, filtrando alguns raios luminosos.

2 – Tear-able Cloth (Ver demo)