Como perder peso (no browser)

Escrito por Matheus Piscioneri. Em Css, Html, Javascript, JQuery

Idealizado pelo desenvolvedor Zeno Rocha e com a colaboração de vários outros desenvolvedores “de peso”, o Como perder peso (no browser) é um do projeto cujo a ideia é simples, criar um guia de forma prática e divertida de como melhorar a performance do seu projeto front-end.

“E se juntássemos os feras que trabalham em grandes portais para criar o guia definitivo de performance para front-end?

Mas nada daqueles guias chatos feitos para robôs, que tal fazer algo divertido? Que tal juntar Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), Sérgio Lopes (Caelum) e o idealizador, Zeno Rocha (Liferay) para criar a melhor referência possível?

Foi isso mesmo que fizemos! E iremos te ajudar nessa batalha de criar sites cada vez mais rápidos.”

E foi assim que Zeno Rocha lançou Como Perder Peso (no browser). Com um timão de profissionais de grandes empresas, saiu do forno no RioJS e caiu na web. São várias dicas, desde melhorias no HTML, CSS, JavaScript, Jquery,  até em imagens, para melhorar a perfomance front-end de seus sites. E tudo isso para construir uma web melhor – e mais rápida!

Alguns dos temas abordados são:

  • Performance importa mesmo?
  • Evite código inline/incorporado
  • Estilos no topo, scripts no rodapé
  • Experimente o async & defer
  • Comprima sua folha de estilo
  • Combine vários arquivos css em um só
  • Prefira <link> a @import
  • Carregue código de terceiros de forma assíncrona
  • Guarde o tamanho do array
  • Evite document.write
  • Minimize repaints e reflows
  • Evite manipulações desnecessárias no dom
  • Comprima seu script
  • Combine vários arquivos js em um só
  • Use sempre a última versão do jquery
  • Use for ao invés de each
  • Não use jquery sempre…
  • Use css sprites
  • Data uri
  • Não escale imagens direto no código
  • Otimize suas imagens
  • Ferramentas de diagnóstico: suas melhores amigas
 

Como perder peso no browser

Data e Hora no WordPress

Escrito por Matheus Piscioneri. Em Wordpress

Algumas funções tag do WordPress são usadas para mostrar ou retornar informações de data e hora; the_date() e the_time() são exemplos disto. Algumas dessas funções aceitam um parâmetro chamado de uma seqüência de formato que lhe permite determinar como a data vai ser exibida. A seqüência de formato é um modelo em que várias partes da data são combinadas (usando os “caracteres de formato”) para gerar uma data no formato especificado.

Por exemplo, o formato: cria uma data como:  

Aqui está o que cada caractere de string de formatação acima representa:

  • j = Dia do Mês.
  • \d\e = Mostra a palavra de.
  • F = Nome completo do mês.
  • Y = Ano no formato de 4 dígitos.
 

WordPress é escrito na linguagem de programação PHP. A formatação de data no WordPress usa funções embutidas de formatação de data do PHP. Você pode usar a tabela de caracteres de formato de data no site do PHP como referência para a construção de cadeias de formato de data para uso em WordPress. Aqui está uma tabela de alguns dos itens mais úteis encontradas lá:

Dia do Mês
d Numérico, com zeros 01–31
j Numérico, em zeros 1–31
S Sufixo Ordinal Inglês, use depois de j st, nd, rd or th
Dia da Semana
l Nome Completo  (minúsucula ‘L’) Domingo – Sábado
D Nome com três letras Dom – Seg
Mês
m Numérico, com zeros 01–12
n Numérico, sem zeros 1–12
F Completo em texto Janeiro – Dezembro
M Três letras Jan – Dez
Ano
Y Numérico, 4 dígitos Ex.: 1999, 2003
y Numérico, 2 dígitos Ex.: 99, 03
Hora
a Minúscula am, pm
A Maiúscula AM, PM
g Hora, 12-hora, sem zeros 1–12
h Hora, 12-hora, com zeros 01–12
G Hora, 24-hora, sem zeros 0-23
H Hora, 24-hora, com zeros 00-23
i Minutos, com zeros 00-59
s Segundos, com zeros 00-59
T Abreviação de Fuso Horário Ex.: EST, MDT …
Data/Hora Completa
c ISO 8601 2004-02-12T15:19:21+00:00
r RFC 2822 Ter, 21 Dez 2011 16:01:07 +0200

Exemplos

Alguns exemplos de formatação de data.
  • F j, Y g:i a – Janeiro 6, 2010 12:50 am
  • F j, Y – Janeiro 6, 2010
  • F, Y – Janeiro , 2010
  • g:i a – 12:50 am
  • g:i:s a – 12:50:48 am
  • l, F jS, Y – Sábado, Janeiro 6th, 2010
  • M j, Y @ G:i – Nov 6, 2010 @ 0:50
  • Y/m/d \\a\\t g:i A – 2010/11/06 at 12:50 AM
  • Y/m/d \\a\\t g:ia – 2010/11/06 at 12:50am
  • Y/m/d g:i:s A – 2010/11/06 12:50:48 AM
  • Y/m/d – 2010/11/06
 

Combinado com the_time(), o código abaixo:

 

Mostra o seguinte:

 

Observe que ao usar palavras acentuadas nos arquivos do WordPress, deverá usar o código da entidade de caractere. Saiba mais lendo o artigo HTML_ISO-8859-1 onde há também uma tabela de caracteres.

Localização

Para usar outros formatos de datas e hora, veja sobre a função date_i18n().

Se quiser converter formatos de datas em strings de acordo com formatações regionais/territoriais, use __(), _e() etc demonstrado com get_the_date(__(…)):

  Data e Hora no WordPress Fonte: www.codex.wordpress.org

Media Queries

Escrito por Matheus Piscioneri. Em Css, Html

Utilizando o Media Queries, é possível ter diferentes comportamentos e formatações do HTML e CSS, de acordo com as características do dispositivo no qual está sendo vizualizado.

 

Media types

Desde muito tempo o CSS tem suporte para se definir regras que só valem em certo contexto. Os media types permitem que se use estilos diferentes em situações diferentes e sempre foram muito usados para distinguir a renderização na tela da impressão:

 

Todos os navegadores modernos suportam esse media type print que é aplicado apenas quando vamos imprimir uma página (útil para esconder o menu de navegação ou aumentar a fonte do texto, por exemplo).

Alguns celulares antigos suportavam também o tipo handheld para estilos específicos para sites mobile. Os smartphones modernos como iPhone e Android, porém, ignoram o media type handheldpois são capazes de renderizar sites completos e não apenas as versões simples feitas para os celulares antigos.

Como então escrever CSS específico para mobile pensando em smartphones e tablets que não se encaixam no media querie handheld? Novos media queries!

CSS3 media queries

Melhor do que separar os dispositivos em desktop (screen) e mobile (handheld), os novos media queries permitem que foquemos principalmente no tamanho da tela onde vamos exibir o conteúdo.

É possível criar um CSS que só se aplique a tamanhos de tela de, no máximo, 320px por exemplo (como um iPhone em modo retrato):

 

Existem diversas opções de media queries com bastante suporte. Além da max-width, podemos usarmin-width, width e device-width – e todas as variações delas com height.

A diferença entre width e device-width é se estamos pensando em CSS pixels ou no tamanho do viewport. Geralmente não é boa prática depender do tamanho físico do aparelho então não usamos tanto device-width.

Uma decisão que precisa ser tomada é de se usar max-width ou min-width. O max é bom para quando temos um layout Desktop pronto e queremos adaptá-lo para dispositivos menores – vamos então definindo novas regras que se aplicam só aos dispositivos de no máximo certo tamanho. Já o minpode ser útil quando criamos um site só mobile ou começamos pelo mobile – nesse caso, é mais fácil ter um layout base e ir customizando para dispositivos maiores, com no mínimo certo tamanho.

Mais media queries

Além dos media queries de tamanho, aparelhos mais modernos suportam também um media querie que pega a orientação do dispositivo:

 

Isso pode ser útil para customizar a experiência do site de acordo com como o usuário está segurando o aparelho. É sabido, por exemplo, que um celular em modo retrato é mais usável com navegação na parte de baixo à esquerda; e, no modo paisagem, com navegação no topo e nas laterais.

 

Além de declarar as media queries na tag <link> no HTML, podemos também fazer direto dentro do arquivo CSS (podemos juntar tudo num arquivo CSS só e economizar requests):

 

Há ainda como mirar dispositivos de alta resolução (como iPhones e iPads com Retina Display) comdevice-pixel-ratio para provermos imagens de melhor qualidade quando elas forem úteis. Ou ainda a opção (color) que permite distinguir entre dispositivos coloridos ou não (como um ereader ou Kindle).

Temos muitas outras opções de media queries na especificação do W3C e várias delas já disponíveis nos aparelhos de hoje.

Media queries comuns

E quais valores usar no projeto para adaptar para diferentes larguras? O ideal seria fazer as adaptações conforme seu layout exige (seria até possível fazer um layout só com porcentagens e sem media querie nenhum que funcione em diversos tamanhos de tela).

Mas se você pensa nos dispositivos mais comuns de hoje, existem algumas combinações de media queries famosas. O projeto 320andup por exemplo sugere que você faça um layout base pensando em 320px e depois adapte para outros tamanhos com:

 

Há a regra para impressão e outras 4 pensando em tamanhos comuns de smartphones e tablets. A última regra foca em dispositivos com alta resolução como os Retina Display e Android modernos. (o uso da keyword only serve apenas para esconder essas regras de navegadores antigos que não suportem media queries mas suportam o media type screen).

Conclusão

As novas media queries do CSS3 são muito úteis para adaptar nosso site a diferentes resoluções. E o melhor é que contam com excelente suporte nos navegadores mobile.

 Fonte: www.caelum.com.br

CSS – box-sizing: border-box

Escrito por Matheus Piscioneri. Em Css

O box model padrão do CSS é uma das coisas mais contra-intuitivas que existem. Mas você pode trocá-lo com o box-sizing do CSS3. E, melhor, funciona em todos os navegadores – até no IE8!

Todo elemento no HTML é uma caixa. Controlamos seu tamanho com width, sua borda com border e ainda temos as margens externas e internas com margin e padding. Box model é como todas essas propriedades se relacionam pra determinar o tamanho final do elemento.

E o box model tradicional da especificação tem uma regra bastante confusa: diz que a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).

Isso quer dizer que, se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona fazer border: 10px solid #555; width:50%. O tamanho final do elemento terá 20px mais metade do tamanho do pai.

CSS box-sizing border-box  

É assim que as coisas funcionam mas certamente não é assim que nós pensamos. Se você pensa no tamanho de uma caixa, você não pensa só no conteúdo dela. Uma caixa termina em sua borda e isso deveria ser considerado seu tamanho.

Por padrão, todos os elementos têm o valor box-sizing: content-box o que indica que o tamanho dele é definido pelo seu conteúdo apenas – em outras palavras, é o tal box model padrão que vimos antes. Mas podemos trocar por box-sizing: border-box que indica que o tamanho agora levará em conta até a borda – ou seja, o width será a soma do conteúdo com a borda e o padding.

CSS box-sizing border-box  

Usando o novo box-sizing

O suporte nos navegadores é excelente, indo até o IE8 – e há um polyfill pra IE6 e IE7 se você precisar. O Firefox ainda precisa do prefixo -moz- e versões mais antigas do Chrome, Safari e Android, do -webkit-.

 

Fonte: www.sergiolopes.org

“As mentes são como paraquedas: só funcionam se estiverem abertas.” - Ruth Noller