Capitã Marvel causando nostalgia em desenvolvedores

E aí galerinha do café, tudo tranquilo?

O desenvolvimento web que conhecemos hoje tem um passado nebuloso… hehehe

Hoje em dia temos muita gente nova que provavelmente nem ouviu falar em MIcrosoft Frontpage (eca!), já que na época em que ele “resolvia” alguns problemas, a maioria do pessoal estava nascendo…

Na época, mesmo com uma baita ascensão da internet, programadores web eram vistos com desdenho por programadores desktop, que era o que mais havia. A frase mais comum era “PHP não é linguagem, é tecnologia”, “ASP é gambiarra”, “HTML só formata”, “progama em C que nem gente grande”, etc…

Fato é que a gente não dava muita bola (mesmo eu já programando em C também nessa época heheh) e desenvolvíamos coisas “incríveis” para os sites da escola, da turma, do condomínio, da família e para tudo o que mais poderia haver, sempre com muitos códigos copiados e alterados de diversos tutoriais e upados com o velho FTP.

Recentemente,  iria fazer um comparativo de sites que eu fazia na época para os que rola hoje (a diferença é enorme!!!) para uma talk que fiz na trilha Inspire do TDC, mas a Marvel resolveu isso pra mim. Como o filme da Capitã Marvel rola nos anos 90, eles fizeram o site oficial bem do jeitinho – horrível – que a gente fazia na época. Isso deu uma baita nostalgia!

Confere lá: https://www.marvel.com/captainmarvel/

A web melhorou não é? hehehe

Valeu, grande abraço!

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

Logo do LorenPixel

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á…

Configurações do LorenPixel
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

Resultado do LorenPixel

Espero, como sempre, ter ajudado!

Abração 😉

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

Estudo

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?

BrowserShots

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/