Compactação GZIP com Node.js

Introdução

Em tempos de servidores compartilhados onde cada recurso utilizado dói no bolso no final do mês, é muito importante compactar arquivos, seja para servi-los e economizar na transferência, seja para armazenar em disco. Existem algumas alternativas, uma delas é o Brotli, um projeto do Google que eu escrevi aqui, outra que também é suportada pela maioria dos navegadores é o GZIP e para isso existe uma ferramenta muito tranquila de implementar e que também pode ser utilizada no shell.

Solução

A ferramenta em questão é o Gzipme mantida por Caio Ribeiro Pereira sob licença MIT.

Implementação

No diretório do seu projeto, instale o pacote com o npm.

npm install gzipme

import gzipme from 'gzipme'

// Comprime "file.txt" para "file.txt.gz" no mesmo diretório.
gzipme("file.txt");

// Comprime "file.txt" e sobrescreve o arquivo "file.txt" no mesmo diretório
gzipme("file.txt", true);

// Comprime "file.txt" com o nome "compressed.txt" no mesmo diretório
gzipme("file.txt", "compressed.txt");

// Comprime "file.txt" usando o modo de "melhor" compressão (arquivo menor mas a compressão é lenta).
gzipme("file.txt", false, "best");

// Comprime "file.txt" usando o modo "rápido" de compressão (arquivo maior mas compressão rápida)
gzipme("file.txt", false, "fast");

Para usar no shell do seu sistema operacional, basta instalar em modo global.

npm install -g gzipme

Os comandos são bem semelhantes às funções.

# O mesmo que 'gzipme("file.txt")'.
gzipme file.txt
# O mesmo que 'gzipme("file.txt", true)'.
gzipme -o file.txt
# O mesmo que 'gzipme("file.txt", "compressed.txt")'.
gzipme -O compressed.txt file.txt
# O mesmo que 'gzipme("file.txt", false, "best")'.
gzipme -c best file.txt
# O mesmo que 'gzipme("file.txt", false, "fast")'.
gzipme -c fast file.txt

É isso aí! Tente aplicar esse conhecimento conforme o seu projeto necessita 🙂

Grande abraço!

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!

Live preview no Visual Studio Code

E aí galerinha do café, tranquilasso?

Hoje em dia, existem diversas ferramentas para auxiliar o nosso trabalho, principalmente com o front-end, na verdade acho que é a área mais “frenética” no momento em que escreve esse post (Set/2017). Fato é que além de frameworks, precisamos também de uma boa IDE, porque só maluco vai de VI, VIM ou Notepad 😀

Por muito tempo eu usei o Brackets pura e simplesmente porque ele tem a função de live preview, que é aquela função espetacular em que altera o arquivo no navegador na medida em que tu estás editando e com isso o desenvolvimento fica muitooo³ mais rápido e talvez até com mais qualidade.

Hoje em dia, ando tendo uma relação de paixão pelo Visual Studio Code da Microsoft, que apesar de ser Microsoft, é gratuíto e funciona em Mac e Linux também.

Esse editor tem uma interface bacana, te ajuda com debug e tem um terminal integrado, na verdade ele usa o terminal da sua máquina dentro da IDE, de qualquer forma, é uma mão na roda!

Hoje eu estava com o Brackets aberto e o Visual Studio Code também, quando me deparei, pera aí, deve ter alguma extensão de Live preview para esse cara e aí eu uno o útil ao agradável (pra mim, pelo menos).

Eis que então achei a extensão “Live HTML Previewer“, que está disponível aqui.

Para instalar é bem tranquilo. Lógico que tu precisas ter instalado antes o Visual Studio Code e para isso, basta seguir as instruções no site deles.

Depois de instalado o VS, pressione CTRL + P e digite o seguinte comando:

ext install live-html-previewer

Escolha a extensão na lista e clique em install.

Recarregue o Visual Studio Code

Pronto!

Para usar em uma aba no Visual Studio Code, pressione F1 ou CTRL + Q + S e digite:

Show side preview

Para usar em “tela cheia”, CTRL + Q + F ou pressione F1 e digite:

Show full preview

E, por fim, no navegador, CTRL + Q + W,

ou F1 e digite:

Open in browser

ou clique com o botão direito do mouse no editor e selecione

Open in browser

Feito!

Espero que tenham gostado.

Grande abraço!

Double screen – Comercial do Banco Sicredi

Screenshot de campanha de Natal do Banco Sicredi

E aí gurizada do café! Sussa?

Vocês víram? No Natal do ano passado, 2016, o Banco Sicredi inovou junto com a empresa DZ Estúdio e fizeram uma publicidade em “double screen”, isto é, ao entrar no endereço http://juntospelonatal.com.br/ no desktop e http://natal.am no celular, posicionar o dispositivo à direita do desktop, inserir o código fornecido, confirmar a execussão nos dos devices e curtir um show de inteligência, competência e criatividade.

Na minha experiência não ficou totalmente sincronizado, mas vamos e venhamos, alem do meu celular ser uma “lesma”, isso é bem complicadinho de sincronizar.

No passado empresas como a Samsung, se não me engano já usou essa técnica também com muita inteligência e também foi um sucesso, pelo menos no meu mundo nerd hehe

Confere lá, antes que saia do ar (eu não tiraria nunca…) pq eu estou atrasado e o bom velhinho já passou faz tempo… hehe

Tecniquês

Se você quer usar essa técnica, estude Javascript, HTML e alguma linguagem de servidor (PHP por exemplo). Se houver uma demanda legal, eu faço um tutorial.

Grande abraço!

Esse post foi escrito ao som de Pretinho Básico (Rádio Atlântida) e ao sabor de um bom café orgânico moído na hora e coadinho na xícara (sempre sem açúcar e bem forte 😉 #fikdik)

Como forçar a versão do PHP no .htaccess

E aí galerinha do café, tranquilo?!

Em tempos de mudança da versão do PHP, as vezes precisamos forçar a versão antiga ou garantir que o servidor, nesse caso apenas o Apache, tenha instalado a versão mais nova, tanto faz, o procedimento é o mesmo.

Por isso, hoje trouxe para vocês esse artigo rapidão para mostrar como fazemos para forçar determinada versão do PHP direto no .htaccess.

Primeiramente, verifique na raiz do seu projeto ou no diretório em que você deseja determinar essa configuração, se já existe o arquivo .htaccess, caso contrário, crie-o.

Insira nele as seguintes linhas:

AddHandler Application/x-httpd-php55 .php

Prontinho, basta alterar a versão do php que você precisa em php55.

Grande abraço e até a próxima.

Imagens redondas com CSS

Fala gurizada, tranquilo?

Está muito em alta colocar imagens em formato redondo, mas tem muita gente fazendo isso em editores gráficos. Não é proibido, mas além de dar um trabalhão, imagina se o Google+ tivesse que ter funcionários para ficar fazendo mascaramento nas imagens de perfil… não dá né?!

Existe uma forma de fazer isso cross-browser somente com o CSS. Podemos utilizar essa técnica em DIV’s, inputs, imagens, etc.

Bom, sabemos fazer que para fazer um arredondamento de bordas com CSS, precisamos utilizar a propriedade border-radius. A técnica consiste exatamente em aumentar o ângulo do border-radius até que forme um círculo (50%).

Mãos à obra!

Primeiramente vamos testar com um DIV. Para isso, crie um div como o HTML abaixo:

<div class="redondo">Jucabala</div>

Agora vamos estilizar esse DIV para que ele fique redondo.


.redondo {
   width: 200px;
   height: 200px;
   background-color: #000;
   color: #FFF;

   /* Agora a mágica */
   border-radius: 50%;
}

E agora com imagem…

<img src="http://www.lorempixel.com/300/300/people" />

Estilizando…


.redondo {
   /* Agora a mágica */
   border-radius: 50%;
}

Para treinar, experimente brincar com a pseudo-classe hover e transition… cria um efeito bem legal.
Postem seus resultados, outro dia eu posto um exemplo assim.

Abraço!

Lorempixel – Mais um poderoso placeholder

Buenas gurizada!

Apresento mais um place holder, dessa vez um poderoso mecanismo!
Para quem não sabe o que é place holder, escrevi não faz muito sobre o assunto no post do placekitten.com, confere lá…

Imagem que mostra as configurações do LorenPixel

Agora apresento outro place holder, o lorempixel, semelhante ao loremipsum, mas com imagens. Você consegue configura-las, inclusive com o tipo de imagem que vai aparecer. E cá pra nós, é melhor contextualizar o conteúdo da imagem com o conteúdo do trabalho do que apresentar um monte de gatinhos pro cliente… heheh

Para gerar as imagens, basta digitar diretamente no navegador a URL com as configurações que tu queres, por exemplo: Para gerar uma imagem de 640 pixels de largura (width), 480 de altura (heigth) e da categoria abstrata, basta digitar a seguinte URL: http://lorenpixel.com/640/480/abstract

As configurações podem ser feitas também pelo painel contido no site http://lorenpixel.com

Espero, como sempre, ter ajudado!

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!

BrowserShots – Como testar seu site?

Você conheçe o BrowserShots?

Muitas vezes queremos verificar como o site se comporta visualmente em diversos navegadores, mas nem sempre é possível ter todas as versões em nossa estação de trabalho, então utilize o browsershots.

Basta digitar a sua URL no campo solicitado, selecionar os navegadores que queres testar e sistemas operacionais e aguardar 15 minutos. Em breve terás os screenshots do seu site com as configurações especificadas.

URL: http://browsershots.org/

Como criar um XML com PHP

Introdução

Com o advento do XML se faz necessário saber como criar esse tipo de arquivo. Pelo fato não precisar de um editor específico para manipular esse tipo de arquivo, muitos desenvolvedores criam a estrutura em uma variável e jogam o conteúdo na função file_put_contents, por exemplo.

Exemplo de criação de XML com parsing

$content = '<root>';
$content .= '<nodeOne>valueOne</nodeOne>';
$content .= '<nodeTwo>valueTwo</nodeTwo>';
$content .= '</root>';

file_put_contents('filename.xml', $ontent);

Tudo bem, essa é uma maneira de fazer esse trabalho, entretanto, no meu ver, é bem trabalhosa e soa como um ‘workaround’, isto é, uma ‘gambiarra’ bem sacana.

O PHP 5 oferece-nos um objeto prontinho para trabalharmos com XML, veja um exemplo comentado:

Exemplo de criação de XML com DOMDocument

//Instanciamos o objeto passando como valor a versão do XML e o encoding (código de caractéres)
$dom = new DOMDocument('1.0','UTF-8');

//Nesse ponto, informamos para o objeto que não queremos espaços em branco no documento
$dom->preserveWhiteSpaces = false;

//Aqui, dizemos para o objeto que queremos gerar uma saída formatada
$dom->formatOutput = true;

//Pronto! Configurações inicias realizadas, agora partiremos para a criação dos elementos que compõe a árvore do documento XML
//Criação do elemento root (elemento pai)
$root = $dom->createElement('root');

//Vamos criar o elemento nodeOne, conforme o exemplo anterior
$nodeOne = $dom->createElement('nodeOne');

//Agora o elemento nodeTwo
$nodeTwo = $dom->createElement('nodeTwo');

//criados os elementos, vamos adicionar um valor para cada um deles
$nodeOneTxt = $dom->createTextNode('valueOne');
$nodeTwoTxt = $dom->createTextNode('valueTwo');

//Pronto! Elementos criados, o próximo passo é organizar essa bagunça, para isso, usaremos o método appendChild() e diremos quem é elemento pai e quem é elemento filho
$nodeOne->appendChild($nodeOneTxt);
$nodeTwo->appendChild($nodeTwoTxt);
$root->appendChild($nodeOne);
$root->appendChild($nodeTwo);
$dom->appendChild($root);

//Dessa forma, dissemos que os elementos nodeOne e nodeTwo são filhos do elemento root, isto é, estão dentro de root ou um nível abaixo de root.

//Para imprimir na tela, utilizamos o método saveXML()
$dom->saveXML();

//Por fim, para salvarmos o documento, utilizamos o método save()
$dom->save('filename.xml');

Se você utilizar exatamente esse código, você terá uma saída idêntica a saída mostrada abaixo.

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <nodeOne>valueOne</nodeOne>
  <nodeTwo>valueTwo</nodeTwo>
</root>

Ainda podemos escrever um atributo em um determinado elemento, para isso, basta utilizar o método setAttribute(), que possui como parâmetros o nome do atributo e o valor do mesmo, respectivamente. Vejamos um exemplo.

Exemplo de um elemento com atributo


...

//Apenas modificando o exemplo acima, vamos acrescentar a seguinte linha de código logo após a linha 18
$nodeTwo->setAttribute('attr','valueAttr');

...

Alterando o código, a saída fica assim

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <nodeOne>valueOne</nodeOne>
  <nodeTwo attr="valueAttr">valueTwo</nodeTwo>
</root>

Video-aula: Escrevendo XML com PHP 5 (DOMDocument) por lemissel no Videolog.tv.

Buenas! Espero ter ajudado os colegas.