Compactando arquivos para a web com Brotli

Introdução

O assunto compactação normalmente é tratado na hora do deploy da aplicação, seja observando os relatórios de performance, como por exemplo o LigthHouse em caso de PWA ou seja simplesmente acessando o aplicativo e percebendo que ele está muito, as vezes muitooooo lento.

Fato é que esse assunto é o que envolve o maior número de engenheiros em empresas de desenvolvimento maiores e os navegadores já estão aptos à ajudar a resolver o problema e se não tiver, usa o GZIP mesmo.

A solução proposta aqui é o Brotli, um projeto Google que faz a compactação para você ter menos dores de cabeça com performance 🙂

Para usa-lo, utilize o gerenciador de pacotes do seu sistema operacional, eu estou usando um Ubuntu 16.04 LTS.

sudo apt-get install brotli

No caso de uma aplicação Angular, crie um arquivo no chamado Makefile no mesmo nível de onde está o seu package.json, copie o código abaixo e altere o que for necessário para adequar ao seu projeto.

build:
    ng build --prod --aot`

compress: 
    find dist -type f -exec sh -c "gzip < {} > {}.gz" \;
    find dist -type f -not -name "*.gz" -exec sh -c "bro --input {} --output {}.br" \;

Agora, executando os comandos make build no terminal, gera os arquivos de produção do Angular e o comando make compress gera os arquivos em GZIP e em BR (Brotli) compactados.

Não se preocupe que o seu servidor (Ngnx, Apache, etc) saberá o que fazer com eles 😀

Esse assunto sempre dá ibope, conte as suas experiências na seção de comentários…

Grande abraço!

Por onde começar com o desenvolvimento web [autodidatas]

Por onde começar com o desenvolvimento web

Buenas gurizada do café!

Se você chegou até esse post suponho que você gosta muito de internet, tem qualidades autodidatas e [logicamente] está interessado em aprender sobre desenvolvimento web.

A web normalmente fascina os desenvolvedores iniciantes, acredito que pela facilidade no desenvolvimento, entretanto, existe uma gama de conhecimentos que precisam ser adquiridos para que você seja um bom profissional. Claro que podemos nos especializar em determinadas camadas, como frontend, backend, design, etc, mas é muito importante sabermos o que todas essas camadas fazem para projetarmos e executarmos os jobs com qualidade e entendendo facilitado o trabalho de toda a equipe.

Eu como autodidata posso falar com propriedade que somos bem desorganizados com os estudos e geralmente estudamos o que queremos e pronto! Para ajudar os entrantes no mercado, resolvi criar esse post (e o blog também) para organizar esses estudos com base na experiência que tive.

Vamos lá!

Requisitos Qualidades interessantes….

Seria interessante que um profissional web tivesse, pelo menos, noção dos tópicos abaixo:

Inglês
Design
Ferramentas de manipulação de imagens
Usabilidade
Acessibilidade
Linguagens de marcação (HTML, XML, etc)
“Linguagens” de estilos (CSS)
Linguagens de programação/tecnologias (JSP, PHP, .NET, ASP, etc)
Banco de dados (MySQL, PostrgreSQL, SSQL, Oracle, MsSQL, Firebird, etc)

Podemos ainda definir outros tópicos como tópicos “avançados”, os quais devemos adquirir conhecimento após os supracitados.

Expressões regulares
Serviços/Servidores (httpd, ftp, etc)
Sistemas de arquivos de servidores (.htaccess, permissões em arquivos, cronjobs, etc)
SSl
Design patterns
Arquitetura de projetos (MVC, etc)
SEO/SEM
[…] e tudo mais o quê conseguirmos absorber 😀 […]

Nenhum desses itens é obrigatório, mas podem facilitar a sua vida… [e a de seus colegas]

Não precisamos ser fluentes em inglês, mas todo o desenvolvimento é em inglês, se pelo menos nós entendermos o que aquele comandinho safado está querendo dizer, teremos menos dores de cabeça.

Você também pode justificar que não precisa entender de design para projetar o backend, mas vai dizer que naquele projeto simples do seu “tio” que você pegou pra fazer entre às 00:00 e às 06:00 hrs você vai contratar um freela ou outro profissional? Vai perder os 30 pila (reais) que o teu tio gentilmente vai te ceder para desenvolver aquele mega e-commerce?

Essas são só algumas constatações do auxílio que esses tópicos podem nos dar, existem muitos outros, mas acho que já deu pra entender…

Ordem de estudo proposta

Quando eu estava começando tive muita³ dificuldade em saber qual caminho deveria seguir, tanto é que aprendi PHP antes de HTML, por exemplo. Então, como já falei antes, ninguém é obrigado a seguir essa ordem, somente entender que uma coisa vem antes da outra e assim o mundo segue… 😀

1º passo: Design e linguagem de marcação

Se você já tem noção de design e sabe colocar um projeto em prática (fazer um layout no Photoshop, por exemplo), você é um forte candidato a começar a aprender a transformar isso em um site.

Comece aprendendo HTML, não dói, não é difícil, demorado, nem ao menos custa nada. Preze pelos padrões web (Webstandards), acessibilidade e pelo semântica em seus códigos.

Mais tarde vou fazer alguns tutoriais para auxilia-los…

2º passo: CSS

CSS é muito útil!
Aprenda a estruturar, posicionar, colorir, enfim, deixar o seu site bonitinho do jeito que saiu no Photoshop e ainda reutilizar o código.

3º passo: Programação

Nesse passo, podemos ainda estruturar mais 3 subitens, que são: Lógica de programação, linguagem de programação (cliente-side e server-side) e banco de dados.

4º passo: Frameworks, bootstraps, CMS’s e pré-processadores

Facilite sua vida!

Aprenda diversos frameworks e pré-processadores, como: jQuery, ExtJs, Less, CodeIgniter, ZendFramework, etc.

E pense nisso: nesse ponto você já sabe programar, portanto, programe com qualidade e sem perder tempo, utilize os frameworks, CMS’s e pré-processadores que você confia e consiga um tempinho para tomar um café…

Exemplos de CMS’s são: Joomla, WordPress, Magento, etc.

Conclusão

Bom, se você chegou até aqui, ou tem T.O.C. de leitura ou então realmente está interessado. Supondo que você esteja interessado, não se assuste com a quantidade de conteúdo, ninguém aprendeu isso do dia pra noite e nem tudo foi criado ontem. Ainda existem muitas tecnologias e técnicas para aprendermos, por isso, é bom que sejamos autodidatas e que sempre estejamos interessados em aprender coisas novas.
Por fim, seja um profissional dinâmico e aberto a novas tendências. É assim que você chega lá!

Desejo a vocês uma boa carreira e que estudem sempre!

Acompanhem o blog que postarei diversas dicas e tutoriais para ajuda-los nessa caminhada.

Grande abraço!

HTML – Passado, Presente e Futuro!

Um pouquinho de internet…

Sabemos que a internet, assim como outras “maravilhas”, surgiu de uma iniciativa do governo de ligar órgãos militares na guerra fria na década de 60 e posteriormente entidades escolares com o intuito de levar informação de forma mais ágil, se protegendo de ataques da URSS que nunca existiram. No Brasil, chegou tardiamente, na década de 80. Em 1988 diversas universidades foram ligadas à “internet” (ARPANET) com entidades nos Estados Unidos, a partir de 1989 surge uma rede de nível nacional para atender as nossas universidades, sendo liberada para uso comercial – como é hoje – somente em 1995.

Até então, toda a informação trafegada era em modo texto. No final da década de 80 e início de 90, Tim Berners – Lee, que trabalhava na CERN (European Organization for Nuclear Research, em tradução livre, Organização Européia de Pesquisa Nuclear) desenvolveu um programa chamado ENQUIRE – eis o começo do HTML. Depois disso surgiu o HTML, o W3C, WHATWG (Web Hypertext Application Technology Working Group), guerra dos navegadores e por aí vai.

Mas o objetivo desse post não é explicar a história da internet, tão pouco do HTML e sim de informar a minha visão sobre a “caminhada” do HTML desde o seu surgimento até um futuro bem próximo. Se você quiser ter um conteúdo mais completo sobre as histórias, tanto do HTML quanto da Internet, nas referências tem ótimos sites e blogs que podem ajudar 😉

Levando a informação

Essa web era bem diferente da que conhecemos hoje. Nessa época o HTML era bem mais simples, com poucas imagens, poucas cores e um tanto quanto “feio”, mas funcional, o que atingia o objetivo proposto.

Disseminar a informação de forma mais eficiente e eficaz eram os objetivos dessa época atraindo o seu público principal: universidades e estudantes.

Com o tempo e a liberação para uso comercial, pelo menos no Brasil, todos puderam ter acesso e as empresas começaram a aproveitar esse “meio”.

Publicidade

Com o tempo, empresas foram tomando gosto da ideia e com isso, o intuito principal foi se tornando levemente secundário. Foi nessa época que começamos a ver belíssimas (?!) galerias de produtos em HTML estático.

Pelo fato do HTML ser de fácil compreensão, nessa “era” ainda é difícil encontrar empresas com desenvolvedores front-end, pelo menos dedicados somente à isso. Geralmente o desenvolvedor front-end era webdesign, web-writer, front-end, e por aí vai…

Informação³ + Publicidade³

Novamente tempo passou e os objetivos tomaram um novo rumo, mas agora um rumo buscou o objetivo principal: disseminar informação! Isso nunca deixou de ocorrer, mas acontecia em ritmo menos acelerado.

Nesse momento todos perceberam o verdadeiro potencial da internet, levando seus sistemas para plataformas web, criando e-commerce’s e até monetizando redes sociais, blogs, vlogs, etc…

Isso tudo foi a preparação do que ainda está por vir…

Informação³³ + Publicidade³³ + Sistemas = menor custo e maior agilidade

Agora o momento é outro! Esse momento está acontecendo mas a melhor parte ainda está por vir!

O acontecimento do HTML5 separa os “sobrinhos” dos verdadeiros profissionais FRONT-END e somado com o “boom” do Cloud Computing (Computação em Nuvens), tem tudo para escrever o futuro!

Ainda com sintaxe de fácil compreensão, mas com a engine reescrita em XML, o HTML5 nos trás muito mais do que simples marcação de texto. Dessa forma tornando necessário a profissionalização do profissional FRONT-END, sendo possível escrever até jogos e animações complexas no próprio HTML.

O que eu quero dizer com tudo isso?

Quero dizer que houve um ganho para a comunidade de verdadeiros desenvolvedores ou de estudantes que queiram ser desenvolvedores FRONT-END.

O trabalho que até bem pouco tempo, pra não dizer até hoje, era somado ao verdadeiro trabalho (programador BACK-END ou então um web design por exemplo), pelo simples fato de ser simples. Sei que não é a realidade de muitas empresas do ramo, mas também é a de outras muitas (pequenas).

Agora, parece estar dando a devida importância para esse assunto, seja pela semântica ou pelo estudo necessário para dominar esse assunto.

E o mercado está aí, nos aguardando para levar as maravilhas do HTML5 à todos os navegadores com muito mais interação e recursos.

Referências

robots.txt – Restrições aos buscadores

Por quê?

Muitas vezes precisamos “esconder” determinados diretórios, arquivos e até mesmo sites inteiros dos ~~gulosos~~ robôs de busca, também conhecidos como robots e webcrawlers. Com um simples arquivo texto chamado robots.txt, podemos fazer isso!

Esse arquivo deve ser salvo no diretório ROOT do seu servidor web com o nome de robots.txt de forma que possa ser acessível a todos como esse exemplo:

http://www.seusite.com.br/robots.txt

O que são Robot’s?

Robot (ou robô) é um programa de computador que percorre automaticamente as páginas da Internet em busca de documentos, a fim de indexá-los, validá-los ou monitorar alterações de conteúdo.
Hoje em dia, alguns robôs estão tão avançados que podem aceitar um sitemap e até preencher um formulário para ver a saída no navegador, como é o caso do GoogleBot, motor de busca do Google.
O arquivo robots.txt foi proposto como um padrão para esses mecanismos, onde nós, desenvolvedores podemos informar diretórios e arquivos que possam ou não ser indexados por eles. Não podemos confundir com possibilidade de acesso, esse arquivo, simplesmente faz como que o conteúdo não seja indexado. Para proibir acesso, utilizamos as permissões de arquivos e/ou o arquivo .htaccess.

O arquivo robots.txt

Existem alguns sites que geram esse arquivo conforme o preenchimento de um formulário, mas vou explicar aqui como você mesmo pode criar o seu.

Basicamente ele é dividido em três partes:

Definição dos motores
Permissões
Sitemap (somente para Yahoo, Google e MSN)

Você pode criar esse arquivo em qualquer editor de texto, como o NOTEPAD ou VI por exemplo.

1. Definições de motores

É possível setar diferentes permissões para motores de busca distintos, por exemplo, deixar o motor do Yahoo ver o diretório “produtos” mas o Google não. Essas definições são feitas com a diretiva:

User-agent

Possíveis valores para User-agent, são:

Google: User-agent: Googlebot
Yahoo: User-agent: Slurp
MSN: User-agent: msnbot
Todos os mecanismos: User-agent: *

Seguindo nosso exemplo, nosso robots.txt ficaria da seguinte forma:

User-agent:Slurp
Disallow: /
Allow: /produtos

User-agent:Googlebot
Allow: /
Disallow: /produtos

2. Permissões

As permissões são facilmente definidas pelas diretivas Allow e Disallow, para permitir e negar, respectivamente os diretórios ou arquivos sequentes.

User-agent:*
Allow:/
Disallow: /admin
Disallow: /fotos
Allow: /produtos
Allow: /artigos

O Exemplo acima utiliza o caractere “/” para definir todo o site e nega a indexação dos diretórios admin e fotos, liberando os diretórios produtos e artigos.

Assim como em expressões regulares, temos os caractéres “*” (asterísco) e “$” (sifrão), que indicam, “qualquer coisa” e “terminado com” respectivamente, alguns exemplos abaixo:

User-agent:*
Disallow:produtos/*.png$
Allow:produtos/
Disallow:admin/*.js
Disallow:fotos/*?*cat=cordas

O Googlebot, preenche os formulários contidos na página para verificar a resposta obtida. Para bloquearmos esse tipo de ação, caso estejamos utilizando o método GET, podemos fazer da seguinte forma.

</pre>
<form action="search.php?s=" method="get">...</form>
<pre>

Nesse caso precisamos negar a indexação de “search.php?s” para isso acrescentaremos a seguinte linha na seção do googlebot no nosso robots.txt

User-agent: Googlebot
Disallow: /search.php?s=*

Quando especificar mais de um motor ele ignora o resto e passa a utilizar somente as especificações daquele motor, isto é, NÃO HÁ HERANÇA!

Meta-tag’s e links

Também é possível especificar uma META-TAG para fazer a proibição diretamente na página:

<meta name="robots" content="noindex,nofollow">
<a href="foo.php" rel="nofollow">Foo</a>

O “parâmetro” noindex, diz ao bot que o site não deve ser indexado e o parâmetro nofollow, que o site no link não deve ser seguido.
Nofollow é muito útil em seções de comentários, onde os spans abusam da nossa paciência. Essa forma não é eficaz para acabar com essa praga, mas pelo menos o eles não ganham pontos com links no Googlebot por exemplo.

Links para testar

É possível testar se os caminhos especificados no robots.txt realmente existem. Fora a identificação de prováveis erros de sintaxe em arquivos muito grandes e gerados manualmente, não vejo muita utilidade nesses caras. Para testar utilize o próprio arquivo robots do Google, até nele eles apontam erros, principalmente relacionados ao ‘*’.

http://www.searchenginepromotionhelp.com/m/robots-text-tester/robots-checker.php
http://www.frobee.com/robots-txt-check

Exemplos

Podemos visualizar alguns bons exemplos nos links abaixo:

http://www.google.com.br/robots.txt
http://www.facebook.com.br/robots.txt (leia os direitos)
http://www.marketingdebusca.com.br/robots.txt
http://www.mestreseo.com.br/robots.txt (bem humorado hehe)

Segundo o site BrPoint, o seguinte robots.txt é ideal para quem utiliza WordPress.

User-agent: *
# remova os diretorios
Disallow: /cgi-bin/
Disallow: /tag/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /trackback/
Disallow: /feed/
Disallow: /tags/
User-agent: Googlebot
# remover scrips css e afins
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*.gz$
Disallow: /*.wmv$
Disallow: /*.cgi$
Disallow: /*.xhtml$
# qualquer endereco que contenha ?
Disallow: /*?*
# permitir o adsense em qualquer url
User-agent: Mediapartners-Google*
Disallow:
Allow: /*
#Sitemap
Sitemap: http://www.brpoint.net/sitemap.xml

Geradores de robots.txt

Fontes: