Ao utilizarmos a técnica de image replacement, aplicando valores negativos na propriedade CSS text-indent, o Firefox adiciona uma borda pontilhada envolvendo toda a região iniciando no link até a margem esquerda da tela, como no exemplo abaixo:
Para retirar a borda, basta alterar a propriedade CSS outline do link para none:
a{
outline: none;
}
E voilà!
As 14 regras, segundo Steve Souders (Chief Performance Yahoo!), para otimizar o desempenho de sites web:
- Rule 1 – Make Fewer HTTP Requests
- Rule 2 – Use a Content Delivery Network
- Rule 3 – Add an Expires Header
- Rule 4 – Gzip Components
- Rule 5 – Put CSS at the Top
- Rule 6 – Move Scripts to the Bottom
- Rule 7 – Avoid CSS Expressions
- Rule 8 – Make JavaScript and CSS External
- Rule 9 – Reduce DNS Lookups
- Rule 10 – Minify JavaScript
- Rule 11 – Avoid Redirects
- Rule 12 – Remove Duplicate Scripts
- Rule 13 – Turn Off ETags
- Rule 14 – Make AJAX Cacheable and Small
A otimização do Front-End é o fator chave para um alto desempenho:
There are three main reasons why front-end performance is the place to start.
- There is more potential for improvement by focusing on the front-end. Cutting it in half reduces response times by 40% or more, whereas cutting back-end performance in half results in less than a 10% reduction.
- Front-end improvements typically require less time and resources than back-end projects (redesigning application architecture and code, finding and optimizing critical code paths, adding or modifying hardware, distributing databases, etc.).
- Front-end performance tuning has been proven to work. Over fifty teams at Yahoo! have reduced their end-user response times by following our performance best practices, often by 25% or more.
Our performance golden rule is: optimize front-end performance first, that’s where 80% or more of the end-user response time is spent.
Algumas ferramentas online para auxiliar no desenvolvimento de sites e aplicações web:
Favikon – ferramenta para criar favicons. Pode-se fazer upload de imagens nos formatos gif, jpg e png ou, informar a URL de uma imagem.
FavIcon Generator – ferramenta para criar favicons. Aceita os formatos de imagem gif, jpg, png e bmp.
CSSType – ajuda na escolha tipográfica para sites e aplicações web. Permite visualizar um texto personalizado nas fontes web safe (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Tahoma -WIN e Lucida Grande – OSX), podendo aplicar várias propriedades CSS para o texto, como, diferentes tamanhos (em ems), espaçamentos entre linhas, palavras e letras, alinhamentos, cores do texto e do background.
CSS Docs – localiza propriedades CSS na documentação do W3C. São sugeridas as propriedades que coincidem com o texto que está sendo digitado.
W3C CSS Validation Service – serviço do W3C para validação de CSS
CSS Optimize – otimizador de código CSS.
Premailer – muito útil para desenvolver e-mails utilizando CSS. A ferramenta automaticamente converte todos os estilos para inline.
Pretty Printer – formatador de código fonte para PHP, Java, C++, C, Perl, JavaScript e CSS
HTML Purifier – ferramenta open-source para remover código malicioso (XSS) e ajustar o código dentro dos padrões W3C.
Ajaxload – gera gifs animados para utilizar nos estados de espera das requisições ajax.
Instant Color Schemes – Esquemas de cores
Colr – esquemas de cores a partir de uma imagem ou de um website. Possibilidade de selecionar uma imagem.
Feed icons – disponibiliza o ícone nos formatos AI, EPS, SVG, PSD, PDF, PNG, JPG e GIF
Instacalc – calculadora de operações matemáticas, conversão de unidades, programação (conversão binário/hexadecimal, comparação lógica, operadores binários), matemática avançada (trigonometria, logaritmos,…), BMI, salário, website bandwidth, …
Gera gráficos. Exibe o resultado no mesmo momento em que se está digitando.
Em Calculator – conversor de pixel para em.
Project Draw – ferramenta da autodesk que permite criar vários tipos de diagramas
Data Generator – gerador de dados para utilizar em testes com softwares. O resultado pode ser em HTML, Excel, CSV, XML ou SQL.
/webdev 