Comprimir imagens com o Trimage

Trimage - Logo

Trimage

Eu gosto muito de pensar em alguns detalhes quando estou desenvolvendo um projeto, pequeno ou grande. Claro, que não dá pra pensar em tudo, porém tento. Hoje quero sugerir o Trimage a todos que sempre precisaram comprimir imagens seja pra colocar em projetos de sites ou pra enviar por email uma imagem que antes tinha 15Mb que enviaram mas o email não aceita fazer upload de arquivos tao grandes.

Quem é usuário do MAC OS  já deve conhecer o ImageOptim, onde você arrasta a imagem e facilmente ela é comprimida. No entanto, como ficam os usuários de Linux? Pensando nisso criaram o Trimage que funcionar de forma muito similar. Claro que se você é um usuário linux pode dizer que já faz isso por linha de comando, sim, fique a vontade, mas acho muito mais prático clica e arrastar o que desejo comprimir. Infelizmente ainda não tem suporte pra Windows, apesar de que como é feito em Python talvez consiga instalar e usa-lo, porém gostaria de deixar a dica do RIOT que faz o mesmo, porém oferece mais opções de otimização de imagem.

De forma básica o Trimage é um compressor de imagem de forma gráfica que suporta os formatos de imagens mais populares e que trabalha com o processamento por threads para acelerar o processamento de imagens em grande quantidade.

Veja mais em: http://trimage.org/ (em inglês)

Espero que essa dica acelere seu trabalho, como acelera o meu.

Abraço 😀

Como carregar arquivos css e javascript em um request com PHP?

HTML 5, CSS 3, Javascript

HTML 5, CSS 3, Javascript

Fala galera, hoje venho dar uma dica simples, que pode ajudar em alguns projetos de sistemas, acredito que para usar em site não deva ajudar muito, pois vai ficar criando processamento no servidor de forma desnecessária. Leia até o final que apresento uma alternativa para fazer o mesmo sem usar PHP. Mas então vamos direto ao ponto que todos querem ver, acredito eu.

Para fazer isso basta chamar todos os seus arquivos css e javascripts em um único arquivo com PHP, eu sugiro que crie 1 arquivo php para cada tipo de conteúdo assim pode separar e facilitar até mesmo na manutenção. Pensando assim, segue abaixo exemplo de código para retornar todos os arquivos de css em um único request:

<?php
/**File: css.php */

/** Caminho para pasta do css, não url e sim a pasta. */
$path_css = __DIR__.'/assets/css/';

$relative_styles = array(
	'bootstrap.min.css',
	'fontawesome.min.css',
	'style.css'
);

/** Definir o Header para navegador saber o tipo de conteudo */
header('Content-type: text/css');

/** Joga todos os arquivos em somente 1 request para o navegador */
foreach ($relative_styles as $style) {
	
	// verifica se existe o existe para evitar erros
	if (file_exists($path_css.$style)){

		readfile($path_css.$style);

	}
}

?>

Depois de criar esse arquivo basta chama-lo da mesma forma que chamaria todos os outros arquivos via html, veja abaixo exemplo:

<link rel="stylesheet" type="text/css" href="/css.php">

Agora que já sabe como funciona pode fazer o mesmo para javascript, apesar de saber que poderia alterar, vou facilitar para você que gosta de copiar e colar de forma mais fácil e rápida, veja abaixo como ficaria o mesmo exemplo para javascript:

<?php
/**File: javascripts.php */

/** Caminho para pasta do javascript, não url e sim a pasta. */
$path_css = __DIR__.'/assets/javascript/';

$relative_js = array(
	'bootstrap.min.js',
	'jquery.min.js',
	'jquery.ui.min.js',
	'app.js'
);

/** Definir o Header para navegador saber o tipo de conteudo */
/** Lembrando de usar o 'application/javascript' pois text/javascript é obsoleto, 
  *	veja mais em: https://www.iana.org/assignments/media-types/media-types.xhtml
  */
header('Content-type: application/javascript');

/** Joga todos os arquivos em somente 1 request para o navegador */
foreach ($relative_js as $js) {
	
	// verifica se existe o existe para evitar erros
	if (file_exists($path_css.$js)){

		readfile($path_css.$js);

	}
}

?>

E sendo assim, o html para chamar esse arquivo de javascript ficaria assim:

<script src="/javascripts.php"></script>

Espero que isso possa lhe ajudar de alguma forma, e sinceramente se quiser otimizar ainda mais pode até mesmo adicionar compressão dos arquivos, retornando para o navegador um conteúdo todo compactado para fazer isso basta adicionar a seguinte linha no inicio do código que irá compactar quando for feito o request e até mesmo transmitir os arquivos de forma mais rápida.

<?php
ob_start ("ob_gzhandler");

/** ... */

?>

Caso não ache isso muito de se fazer, você tem muitas outras alternativas para poder reduzir o consumo de banda ou de requests ao servidor, você pode fazer coisas como:

  • Você pode comprimir os arquivos diretamente no Apache usando o .htaccess;
  • “Compilar” seus arquivos css e/ou javascript em único arquivo que não será necessário compacta-lo a cada request;
  • Pode trabalhar com ferramenta como LESS/SASS para compactar seus arquivo CSS para você de forma mais prática;
  • Pode também trabalhar mais com módulos do NodeJS como o GrunJS que facilitam esse tipo de processo;

Como pode perceber sempre tem uma forma de melhora nosso desenvolvimento e oferecer um produto melhor ao nosso cliente. Claro, que nem sempre conseguiremos fazer da melhor forma inicialmente, porém o importante a nossa constante busca por melhorar nossos projetos que irá nos trazer melhores resultados.

Espero ter ajudado.

Abraços 😀

Yes.js – Biblioteca básica para Javascript

Github - wallacesilva/yes.js

Github – wallacesilva/yes.js

Finalmente, após tempos sem postar venho trazer uma novidade que nem é bem uma novidade. Estou falando do Yes.js uma pequena biblioteca javascript que criei para facilitar trabalho com javascript em pequenos sites. Foco é todo em tempo de carregamento e não ter um grande uso de memória nem processamento. Você pode afirmar que já existem várias bibliotecas e frameworks similares e ai terei que concordar com você.

A ideia não é criar o mais inovador e melhor projeto do gênero e sim mostrar aos desenvolvedores que é sim possível não depender de nenhum elemento do gênero visto que até mesmo o javascript básico já possui coisas que antes só tínhamos usando jQuery. Sendo assim, podemos pensar um pouco diferente e tentar optimizar o processamento de várias páginas, ainda mais hoje em dia que criamos projetos responsivos.

Quero que entenda que não é obrigado a adotar tais metologias ou usar bibliotecas e frameworks que agilizem o processamento de páginas, pois também sei que em muitas vezes é bem mais rápido e prático usar jQuery ou mootools para facilitar o trabalho e até mesmo em um projeto no qual inicialmente isso não irá fazer muita diferença o problema só aparece quando o cliente cresce mesmo.

Queria citar brevemente alguns motivos para preocupar com o processamento de seu código javascript:

  • Criação de sites/projetos responsivos não ficarem lentos em mobile;
  • Poder criar maiores projetos ainda mais quando se faz muito cache no navegador do usuário;
  • Página carregar mais rapidamente. Isso ajuda a reduzir a taxa de rejeição ao visitar o site;
  • Melhorar a experiência do usuário, navegação poderá ser mais fluída até mesmo em dispositivos de baixo custo;
  • Reduzir consumo de banda, visto que está carregando menos código para fazer somente o que precisa;

Poderia citar outros pequenos itens que ajudam, porém espero que tenha tido como entender a ideia. Como podem ver não tem logo nem site especifico para o projeto eu uso o próprio github para hospedar os códigos, então deixo aberto para quem quiser ajudar com logo, design, melhorias de código, sugestões ou seja, toda forma de ajuda é bem vinda. Lembrando que a licença é a MIT então fiquem a vontade pra melhorar e criar suas próprias versões. Infelizmente ainda não tem suporte a NodeJS, mas agradeço quem quiser ajudar a dar suporte.

Espero que tenha ajudado.

Abraços 😀

 

Crie seu próprio PirateBay com o OpenBay

Old Pirate Bay (IsoHunt) - Logo

Old Pirate Bay (IsoHunt) – Logo

Você já deve ter ouvido falar de torrent e redes P2P, é possível que até conheça o The Pirate Bay, que atualmente ainda está fora do ar, porém se você nunca imaginou criando um sistema do gênero, você pode repensar isso. Pois após a polícia ter apreendido os servidores do PirateBay, o isohunt pouco tempo depois lançou uma versão deles para o PirateBay, chamada de Old Pirate Bay (http://oldpiratebay.org/).

Continue lendo »

Como salvar senhas de forma segura no banco de dados?

Hackers Security Password

Seguranças de Senhas no Banco de Dados

Quando aprendemos a programar em uma linguagem de programação ficamos sedentos para aprender a fazer as coisas e aprender e aprender e aprender, porém ignoramos muitas coisas no inicio para encurtar a margem do tempo de aprendizado, no entanto, quando passa um tempo vemos que temos que nos preocupar com algumas coisas importantes como a segurança de nossas aplicações.

Um dos itens de seguranças que nos preocupamos inicialmente é como salvar as senhas dos usuários de forma segura no banco de dados, mesmo que o banco de dados seja em um arquivo. Então vou mostrar uma das várias formas que você pode fazer para salvar suas senhas de forma segura. Existem outras formas porém quero somente deixar essa alternativa para vocês. Eu irei mostrar com códigos PHP, porém a lógica pode ser aplicada em outras linguagens de programação.

 

Continue lendo »