O que são dependências? –save ou –save-dev?

Tenho usado node.js para algumas tarefas em meus projetos praticamente há um ano, principalmente para compilar stylus, que uso em conjunto com o watch do Gulp. Ao criar um projeto de node.js, um arquivo chamado package.json é gerado na pasta onde você iniciou o projeto.

O package.json

É um arquivo gerado pelo node que contem informações sobre o  projeto, como o nome, autor, repositório, versão, dependências, entre outras coisas. O arquivo é gerado quando o comando npm init é executado no terminal.

As dependências

O gulp é um módulo do nodejs que utilizo para automatizar algumas tarefas, como compilar stylus, juntar os arquivos css gerados em um só, e aplicar uglify (compressão) no mesmo. Para todas essas tarefas, além do gulp, utilizo o gulp-stylus, gulp-concat, gulp-filter, gulp-plumber e gulp-minify-css, cada uma com sua função. Logo, para que eu possa visualizar as alterações de estilo que tenho feito dependo de um arquivo css gerado pelas tarefas do Gulp. Como dependo dos módulos para que o gulp trabalhe, posso chamar esses módulos de dependências.

Eles podem ser salvos dentro do arquivo package.json caso você os instale e passe o parâmetro –save ou –save-dev. Assim, caso alguma outra pessoa que trabalhe no projeto precise instalar o necessário para trabalhar no projeto, ela poderá instalar tudo utilizando somente o comando npm install.

–save e –save-dev

Supondo que o atual projeto em que eu esteja trabalhando utilize o módulo socket.io e o módulo express para funcionar em um servidor node que rodará minha aplicação, eles também viram dependências.

Tá, mas e aí?

Os módulos do gulp são dependências diferentes do socket.io e do express, pois são utilizadas exclusivamente durante o desenvolvimento, e não precisam existir no servidor de produção, já que o que será enviado é o arquivo css gerado pelo gulp. Logo, quando os módulos do gulp forem instalados pela primeira vez no projeto, você deve utilizar o parâmetro –save-dev, por exemplo:

npm install gulp --save-dev

ou

npm i gulp --save-dev

Minha aplicação depende do socket.io e do express para rodar no servidor de produção, então utilizo o parâmetro –save ao instalar esses dois módulos. Um exemplo:

npm install socket.io --save

Quando seu ambiente precisar somente das dependências de produção, você pode utilizar o comando npm i --production para instalar os módulos. Os módulos de produção (do –save-dev) ficarão de fora.

 

Sobre o maravilhoso Blend Mode do CSS3

Alguns projetos que eu pego usam algum blend mode do Photoshop para deixar imagens com algum tom de cor baseado na paleta de cores do site. Na maioria das vezes algum designer ou alguém com photoshop fica com a responsabilidade de alterar essa imagem antes de subi-la como conteúdo do site. Não é um processo muito inteligente já que criamos mais um passo para que a tal imagem vá pro ar.

O CSS3 e o HTML5 estão cada vez mais completos, permitindo uma reprodução mais fácil do que fazemos nas ferramentas gráficas, como sombras, degradês, etc. Hoje em dia já podemos utilizar o blend mode do próprio CSS3. Mágico, não?

O código é simples, dá pra decorar em uma olhadinha. Vamos ao exemplo!

Multiply

Os seguintes efeitos de blend mode estão disponíveis: Darken, Lighten, Color-dodge, Color-burn, Hard-light, Soft-light, Difference, Excluse, Hue, Saturation, Color, e Luminosity.

Temos uma lista enorme pra reproduzir quase tudo que existe nos softwares gráficos, como o Photoshop:

Untitled-3

Gostou? Confira a documentação do blend mode!

 

Google Apresenta: Mobile Day

Hoje fui ao Senac assistir um documentário que o Google fez sobre essa mudança que o celular está fazendo na internet, tanto na parte de marketing, como design e engenharia de software. A apresentação, apesar de curta, tem um conteúdo incrível repassado por diversos especialistas, entre eles Fabrício Teixeira, do blog Arquitetura de Informação e Avinash Kaushik.

Um documentário de qualidade incontestável, rápido e até chocante para alguns perfis de profissionais. Há conteúdo na página do documentário pra quem quer aprender mais.

Foi meu primeiro evento do Google, e pela experiência posso falar com certeza que foi o primeiro de muitos outros. Se eu fosse você, me cadastraria pra receber essas idéias e convites para os eventos.

 

11 Leitores de RSS alternativos ao Google Reader

Ontem o Google anunciou que o Google Reader sairá do ar dia 1 de Julho. A compania está diminuindo seus produtos e já que o Google Reader está com usuários em queda, eles decidiram removê-lo para focarem melhor nos produtos mais utilizados.

Tudo bem que eu não acho que essa queda justifique fechar. Há quem dependa do Google Reader para estudar, se atualizar – eu, por exemplo – e agora terá que migrar. O Marco Gomes disse uma verdade sobre.

Separei algumas alternativas abaixo.

Netvibes

http://www.netvibes.com/en

Feedly

http://www.feedly.com/

Newsblur

http://www.newsblur.com/

FeedDemon

http://www.feeddemon.com/

Feedreader

http://feedreader.com/

Flipboard

Somente para iOS e Android

http://flipboard.com/

Reeder

Somente para iOS e Mac OS

http://reederapp.com/

Taptu

https://www.taptu.com/

Hivemined

http://hivemined.org/#main

Pulse

https://www.pulse.me/

Feedspot

http://feedspot.com/

 

Como remover o 22Find, Govome e Desk 365 do seu computador

Hoje fui infectado com três adwares/malwares no meu computador, o 22Find (Sistema de Busca), o Govome (Sistema de Busca também) e o Desk 365.

Como não é a primeira vez que preciso remover essas tralhas do computador, já sabia o caminho para resolver esse problema e vou dividir as dicas com vocês.

Extensão

Para remover das extensões do Firefox, aperte “CTRL+SHIFT+A” e na aba de Extensões, apague o 22Find, Desk 365 e/ou o Govome.

Página Inicial

Clique com o botão direito no ícone do Firefox, na ana “Atalho”, você verá o campo “Destino”.

No final desse campo, o adware colocou um parâmetro para iniciar o navegador em sua página, você pode remover todo o conteúdo após a aba do “firefox.exe”.

Desta maneira você remove o 22find e outros da página principal.

Busca Nativa (Barra de Endereço)

Digite “about:config” na barra de endereços. O Firefox vai dizer que é arriscado alterar algo ali. Prossiga clicando em “Serei cuidadoso, prometo!”.

Você verá uma tela com uma lista de configurações com uma barra de busca no topo. Busque por “browser.search”.

Em dois desses parâmetros de configuração estará o 22find/Govome, clique duas vezes e altere o valor para “Google”.

Li em alguns fórums que alguns softwares como Audacity e Foxit Reader estão abrindo vulnerabilidades no browser para que essas coisas sejam instaladas no computador. Recomendo que desinstalem.

 

Paginação do Cycle semanticamente correta

Durante meus últimos trabalhos o Cycle tem sido o meu plugin de slider favorito, por ser fácil, flexível, leve e ter uma documentação bacana, além de não ter problemas crossbrowser (Internet Explorer 7 +).

Como sou rígido com meus códigos, resolvi mudar um código que está semanticamente errado no cycle. Esse código é o que gera os bullets de navegação do slider.

Na linha 859 do arquivo jquery.cycle.all.js você encontrará esse conteúdo:

	a = ''+(i+1)+'';

Utilizar um anchor tag (<a>) para esse elemento não é o certo, já que o anchor tag deve ser utilizado somente em links – logo, o correto é mudarmos para outro elemento.

Eu costumo mudar para um list item (li), ja que os bullets são parte de uma lista. O código depois de alterado fica assim:

	a = '
  • ‘+(i+1)+’
';

O código acima vai gerar cada bullet em um li, então você deve inserir os bullets dentro de uma ul, e o código será gerado assim:

  • 1
  • 2
  • 3

Lembre-se que o bullet do banner visível tem a classe activeSlide, onde você pode deixar em um estilo diferente dos outros.

 

Tweets da Semana #1

Já que ultimamente estou com dificuldade de escrever ou encontrar assuntos pra posts no blog, decidi juntar alguns links interessantes e compartilhar com os meus poucos leitores do blog, já que são assuntos pertinentes à nossa área de atuação. Espero que ajude alguém!

 

Especificando classes no html conforme versão do Internet Explorer

Esse é um esquema utilizado com frequência na comunidade de desenvolvedores, está em vários boilerplates. É uma solução rápida e fácil pra quem precisa especificar algum estilo pra algum objeto somente no IE ou em algum versão dele.

O código abaixo exibe uma classe “ie” junto de uma “ie+versão do IE”. Ex: No Internet Explorer 8, ele vai exibir duas classes, são elas: “ie” e “ie8″.

	
	
	
	

Logo, o html no Internet Explorer 8 ficará assim:

	< html class="ie ie8">

E caso você vá usar um seletor específico pra corrigir algum pepino no IE, ficará assim:

	.ie SELETOR {
		/* estilos */	
	}
	.ie7 SELETOR {
		/* estilos */	
	}

Em breve posto a alternativa que eu costumo usar – que é feita em JS.

 

Utilizando RGBA do CSS3

Há um tempo atrás eu não utilizava CSS3 pra declarar cores por um motivo bem conhecido: Suporte no IE. O nosso amado navegador da Microsoft só implementou o suporte na versão 9. Resolvi começar a usar CSS3 com mais frequência e aplicar Progressive Enchancement nos projetos – e é claro, usar sempre um fallback pros usuários que usam o maldito IE.

O RGBA é uma declaração simples, que utiliza o RGB normal com uma última declaração – o “A” – para o alpha, que é responsável pela transparência.

Aplicando o RBGA

Declarando uma fonte com a cor vermelha com 50% de transparência.

.exemplo {
    color: rgba(255,0,0,0.5)
}

Pra pegar os valores com precisão, veja no layout a opacidade (opacity) e a cor do objeto que ja é exibida em RGB, entre outros. Ex: Na imagem abaixo.

Bem, por enquanto é isso! Comentem, perguntem, enviem feedbacks, whatever.

 

Será que realmente temos controle sobre nossas decisões?

Toda semana eu procuro assistir um ou dois TED Talks, e há um tempo encontrei um bem interessante, relacionado à comportamento – o que é bem relevante pra quem quer trabalhar com experiência de usuário.

Esse TED Talk é do Dan Ariely, um professor da universidade de Duke, que já teve dois livros publicados (e viraram best-sellers) e já ultrapassou a marca de 3 milhões de visualizações em seus TED Talks.

Gostou? Dá uma olhada na página dele no TED!