Posts with the tag: browser

Using HAR files to analyze performance over time

When I consider the performance of a website, the first things that come to mind are; looking at the requests of a page, understanding what resources are being loaded, and how long these resources take to be available to users. The network tab will give you a table containing all assets loaded on the page, as well as relevant information about their origin (domain, HTTP status code, size), who initiated the request, and the order in which they were loaded in a waterfall representation.

Exploring device detection for better user experiences in 2020

A few months ago I watched a great talk in Chrome Dev Summit about performance in slow devices. It blew my mind all the work done by Facebook in identifying devices to create a better user experience. Fast-forward to now, I decided to study a bit more the topic and see what I could do at Thinkific. User agents User agents are well-known by developers. We use them to detect bots, redirect users to a specific version of our website or append CSS classes on our page so we can create different experiences.

Disabling autofill in Chrome

Autofill in form elements is a very useful feature in browsers. Creating new accounts or shopping in an online store are examples of this feature saving us time.

However, the autofill feature can be a problem for SaaS products. Imagine that you want to edit the email address of one of your users. You hit edit in one screen and once you get a form with your user data Chrome will replace their email to your email. This is not a good user experience.

MDN has an article showing “How to turn off form autocompletion”. The solution is using the autocomplete attribute with an off value. This doesn’t work in Chrome.

Digging in Stackoverflow and Google results, I found a bug issued in 2015 about the topic. Here is the TL,DR (from March 2016):

Useful Chrome extensions to developers

First of all, you must see Dev Tips: developer tips delivered daily in your email.

Now, these are some useful extensions that I’ve been using in Chrome to help me to develop webapps:

Para agilizar o desenvolvimento do frontend

Uso o Chrome como browser padrão em minha máquina e algumas extensões interessantes para desenvolvedores. Kingsquare HTML Validator: faz validação do seu código usando o Tidy. Se você usa o Safari, não deixe de conhecer o Tidy Validator Secure Shell: um terminal em seu browser – atualmente prefiro o iTerm ligado em um monitor extra e com várias telas divididas. PageSpeed Insights: uma espécie de YSlow do Google. Descobri em um vídeo (slides) do Ilka Grigorik.

Personalizando o scrollbar com WebKit

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.

Extensões para o Safari 5

A guerra dos browsers continua: a versão 4 do Firefox já saiu em fase beta – com interface parecida com o Chrome, eu diria – mas o que me motivou escrever esse post foram as extensões do Safari 5. Sim, extensões como as dos outros browser e antes tarde do que nunca. Vamos as preferidas: Ostrich: um cliente de twitter na sua barra de ferramentas Safari140: um botão que você adiciona a sua barra de ferramentas para twittar links direto do Safari.

IETester

IETester é coisa linda de Deus: um aplicativo que emula as versões 5.5, 6, 7 e 8 do IEca. Ótimo para você perder o dia sofrendo com os bugs de layout!

Data URI

Spoiler: o conteúdo abaixo não funciona no Internet Explorer.

Em 2005 o Irapuan Martinez falou do Acid 2 e de um recurso interessantíssimo, que acabei de testar: Dat URI (que existe desde 98).

Dat URI, em poucas palavras, é a possibilidade de inserir conteúdo dentro de um arquivo HTML sem a necessidade de linkar o arquivo. Assim, a imagem ao lado poderia ser inserida com:

Lançado Safari 4

Andei twitando a respeito do lançamento do Safari 4, lançado ontem, justamente no mesmo dia do aniversário de Steve Jobs. O browser gerou um mimimi profundo por todo lado e não é por pouco: implementou algumas coisinhas vindas do Chrome, mas tudo de forma bem sofisticada, como tudo que vem de Cupertino. O Safari traz o “Top Sites”, como no Chrome, e incorpora o Coverflow para favoritos e itens do histórico.