Como e instalar Package Control do Sublime Text 3

O Package Control do Sublime Text 3 serve para instalar vários plugins que incrementam, adicionam funcionalidades no Editor Sublime Text, para instalar basta seguir estes passos simples. Continue lendo

Publicado em Dicas | Com a tag | Deixar um comentário

Lidando com arquivos no Sublime Text, renomear, mover, copiar, de um jeito que você nunca viu

A primeira vez que abri o Sublime Text 2 ou 3 tive uma pequena decepção, na sidebar ao clicar em arquivos ou pastas essas são as 6 opções que o Sublime Text te da.

É claro que isso não é o suficiente, você quer muito mais do que criar um arquivo/pasta e renomea-los. Continue lendo

Publicado em Dicas | Com a tag | Deixar um comentário

Como buscar por um arquivo no Sublime Text?

Aprenda a buscar um arquivo pelo nome no Sublime Text, uma forma mais rápida de abrir arquivos no Sublime Text. Continue lendo

Publicado em Dicas, IDE | Com a tag | Deixar um comentário

Crie um gráfico da especificidade dos seletores de qualquer CSS

Se você é um bom desenvolvedor, com certeza você já conhece o que é a especificidade dos seletores do CSS, cada seletor tem um número que sugere o quão especifico é um seletor.

Pensando nisso pocketjoso desenvolveu uma ferramenta chamada “specificity-graph” em que você informa um CSS e a ferramenta gera um gráfico da especificidade dos seletores no CSS que você informou. Continue lendo

Publicado em css | Deixar um comentário

Ordenar propriedades em ordem alfabética diminui o tamanho do arquivo quando usado com gzip?

Hoje estava refatorando o CSS da firma usando uma ferramenta (bem interessante) chamada scss-lint, que tem uma opção chamada PropertySortOrder que por padrão, pede para você ordenar as propriedades do CSS em ordem alfabética, mas também pode ser determinada alguma outra ordem, como você pode conferir no link acima. Continue lendo

Publicado em css | 9 comentários

Como deixar o jQuery UI Datepicker em pt-br e vários outros idiomas

jquery-ui-logo
Pesquisando na internet, o primeiro resultado que encontramos sobre a tradução do datepicker do jQuery UI é um repositório no Google Code de 2009, acontece que isso está bem desatualizado, ai encontrei atual repositório do jQuery UI, onde tem uma pasta chamada i18n com muito mais idiomas e devidamente atualizados.

Bom, essa é a dica de hoje :)

Publicado em jquery | Com a tag , | 2 comentários

Como inserir elementos no HTML com JavaScript

Quando eu comecei a aprender JavaScript, aprendi a usar a propriedade innerHTML, usando innerHTML é muito fácil colocar elementos no DOM, porém é complicado de usar por exemplo quando você quer colocar um elemento no final de um elemento, ou no inicio. Neste post vou mostrar como inserir elementos no DOM usando innerHTML, insertBefore e insertAdjacentHTML fazendo um prepend como exemplo Continue lendo

Publicado em DOM4 | 4 comentários

Estilizando elementos com base no idioma

Em algumas circunstâncias, pode ser útil estilizar um elemento, em que o idioma é inglês, chinês ou qualquer outro idioma, neste post vamos ver como fazer isso. Continue lendo

Publicado em css | Com a tag , , , | 1 comentário

Como desativar os efeitos de hover durando scroll

Enquanto um usuário faz scroll em uma página, é disparado vários hovers em vários elementos e dependendo do efeito aplicado no :hover desses elementos podemos ter um problema de performance.

Para solucionar isso Ryan Seddon postou no blog The CSS Ninja uma dica muito boa usando pointer-events que basicamente é durante o scroll setar para todos os elementos com hover a propriedade pointer-events: none, como no exemplo:

.element {
    pointer-events: none;
}

Quando a propriedade pointer-events é setada para none, qualquer interação com o elemento é desabilitado (clicks, hovers), como se o elemento não existisse ou como se o elemento fosse “intocável”.

O problema que Ryan solucionou é que durante o scroll, o browser pode alcançar valores exorbitantes de frames por segundo(fps) como podemos observar nesse print:
scroll-60fps

Usando pointer-events conseguimos simplesmente duas vezes mais performance durante o scroll, como podemos observar no print abaixo:
scroll-60fps-depois

Para termos este resultado precisamos apenas deste snippet de JS:

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover')
  }
  
  timer = setTimeout(function(){
    body.classList.remove('disable-hover')
  },500);
}, false);

Que tudo o que faz é adicionar a class .disable-hover na tag body sempre que o usuário começar a fazer scroll, note que é usado um workaround com setTimeout para tentar descobrir quando o scroll parar.

Também precisamos definir a classe no CSS:

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

É usado * por que se qualquer elemento filho tiver com pointer-events: auto este elemento aceitara clicks e hovers e como neste caso não é isso que queremos, sobrescrevemos tudo com !important

Para ver esta dica funcionando você pode acessar o demo criado por Ryan ou assistir o screencast que ele fez

É isso.

Links:
CSS Tricks
Can I Use
The CSS Ninja
MDN

Publicado em css, Dicas | 2 comentários

Novidades no IE11

ie11-download No IEBlog saiu um post que eu devo compartilhar. Onde diz que o IE11 esta disponível para download para Windows 7 e coisa e tal. E neste post vou falar de algumas novidades citadas no post :D Continue lendo

Publicado em browsers | Com a tag , , | 2 comentários