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 , | 1 comentário

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 | 1 comentário

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

O atributo classList

classList é um novo atributo da especificação do DOM4 que nos da o poder de manipular as classes de um elemento de uma forma muito mais elegante do que nos últimos tempos. Adicionar/remover ou verificar se uma classe existe a partir de agora, se torna a tarefa mais fácil do seu dia-a-dia programando em JavaScript :D
Continue lendo

Publicado em DOM4 | 1 comentário

O estilo do meu CSS

Não sei o que você pensa sobre o assunto, mas quando se trata de indentação de código (vamos focar aqui em CSS) eu sou uma pessoa extremamente exigente, nunca pensei que chegaria a este nível de exigência comigo mesmo quanto à qualidade do meu código.

Gostaria de mostrar neste post como eu indento o meu CSS e também algumas outras formas de indentar que eu não concordo. Como isso é muito a minha opinião, eu gostaria muito de também saber a sua opinião sobre o que vou mostrar aqui. Continue lendo

Publicado em css | 28 comentários

Como migrar uma aplicação WordPress de um servidor para outro?

wordpress-logo

Neste tutorial vamos aprender como fazer parar migrar uma aplicação WordPress para outro servidor. A ideia de escrever este tutorial partiu da necessidade, é claro, quando precisei criar um ambiente de desenvolvimento para um WordPress que só estava em  ambiente de produção, e no caso precisei criar um ambiente de desenvolvimento no qual acabou sendo o meu servidor local.

Continue lendo

Publicado em wordpress | 31 comentários

Slides de Front-end do OlhóSEO

Nos dias 3 e 4 de maio(2013) aconteceu o OlhóSEO em Floripa, eu infelizmente não pude ir ;´( mas pelo o que acompanhei no Twitter, o evento foi muito bom.

Como eu vivo estudando mais e mais, resolvi escrever um post para citar todos os slides de Front-end do OlhóSEO, vamos lá.
Continue lendo

Publicado em Slides | Deixar um comentário

Como fazer um build customizado do jQuery

jquery-logoO jQuery é uma lib que contem muitos funções que tornam fazem nosso trabalho ser executado com grande velocidade, a pergunta que eu quero que você reflita é: Precisamos de todas as funcionalidades do jQuery ou apenas de algumas?
Continue lendo

Publicado em javaScript, jquery, Node.js | Com a tag , , , | 6 comentários