Chamando todos os desenvolvedores da web: aqui está o porquê você deve estar usando o Firefox

Eu não sei quantos anos você tem; mas, como alguém que nasceu no final dos anos 80, eu me lembro bem da ascensão – e queda – do Firefox.

O Firefox surgiu como um concorrente de código aberto para o Internet Explorer 6. Foi incrível porque tinha opções : por exemplo, os usuários poderiam adicionar recursos com várias extensões e alterar os temas visuais. Todo mundo adorou.

Alguns anos depois, no entanto, outro jogador entrou no ringue. Foi chamado – você adivinhou – Chrome. A adoção do Chrome disparou, superando rapidamente seus concorrentes. Na verdade, o Chrome tem sido usado por tantas pessoas, em um período tão curto de tempo, que se tornou um dos ativos mais valiosos do Google. Tenho certeza que muitos de vocês estão usando isso para ler isso agora.

Mas vamos voltar por um minuto. Como desenvolvedor, sei o quão difícil pode ser para agradar os usuários.

E com o desenvolvimento de tecnologias da Web cada vez mais complexas, aplicativos e software em geral, problemas com alta RAM e uso de CPU estão começando a surgir.

Deniz, da equipe de desenvolvimento do JotForm , comentou recentemente:

“Eu tenho um computador com a configuração mais recente do Macbook Pro. Ao desenvolver (enquanto o Chrome DevTools está aberto), a bateria é drenada muito rápido ”.

E, se você é um desenvolvedor também, tenho certeza de que você mesmo fez comentários semelhantes – ou os ouviu de pessoas ao seu redor.

Você pode até ter pensado em ir mais longe e mudar para um navegador que não seja o Chrome.

E isso, meus amigos, é onde entra o novo e melhorado Firefox: o Firefox Quantum.

Em 2017, a Quantum foi lançada para usuários de Android, Linux, iOS, Mac e Windows – mais de uma década depois que a Mozilla lançou a icônica primeira edição do Firefox.

Além de ter um novo visual belamente moderno, há rumores de carregar sites duas vezes mais rápido do que o Firefox 6 – enquanto usa 30% menos memória do que o Chrome.

Após 10 anos no jogo, a Mozilla teve que descobrir novas maneiras de diferenciar o Firefox de seus concorrentes sem perder seu poder. Não é pouca coisa.

Assim, para aproveitar ao máximo o poder de processamento de um computador, quase 4 milhões de linhas de código foram reescritas com a ajuda de tecnologias de ponta como Servo , Rust e Quantum / Stylo .

E isso valeu a pena.

Na minha opinião, o Firefox Quantum tem um desempenho superior em comparação com outros navegadores.

Aqui está o porquê…

Novas tecnologias

WebAssembly

A execução de aplicativos on-line grandes, chamativos ou complexos é o sonho de muitos desenvolvedores. Além disso, com o recente aumento de tecnologias, como edição de fotos e vídeos, edição de jogos em 3D e VR / AR, as expectativas dos usuários on-line aumentaram consideravelmente.

WebAssembly
O WebAssembly é um novo tipo de código que pode ser executado em navegadores modernos – é uma linguagem de montagem de baixo nível… developer.mozilla.org

Mecanismos JavaScript como Google V8, Mozilla SpiderMonkey e Microsoft Chakra foram desenvolvidos para alcançar um desempenho mais rápido para esses tipos de operações.

No final de 2017, tornou-se possível rodar os mecanismos Unity e Unreal no Firefox. E agora, os outros grandes scanners deram seu apoio também.

A-Frame e WebVR

Uma das maiores inovações recentes é a Realidade Virtual – a VR. E com telefones celulares, navegadores e produtos como o Oculus Rift e HTC Vive, grandes progressos continuam a ser feitos.

A Mozilla desempenhou um papel enorme no desenvolvimento da infraestrutura do WebVR, mas também trabalhou duro para aprimorá-la com seu novo navegador da web. Graças ao A-Frame (suportado pelo Mozilla), um excelente framework para usar o WebVR já foi disponibilizado para nós.

A-Frame – Faça o WebVR
Um framework web para construir experiências de realidade virtual. Faça WebVR com HTML e Entity-Component. Funciona no Vive… aframe.io
Mozilla VR
Realidade Virtual para a Web livre e aberta. mixedreality.mozilla.org

Voz Comum do Projeto

O Apple Siri, o Microsoft Cortana, o Amazon Echo e o Google Home adotam uma abordagem proprietária / de parede fechada para a tecnologia de reconhecimento de fala que sustenta a capacidade desses produtos de responder a comandos falados.

E adivinha? A Mozilla lançou agora o Common Voice, uma iniciativa de código aberto para tornar o reconhecimento de voz disponível para todos.

Voz comum por Mozilla
O Common Voice é um projeto para ajudar a tornar o reconhecimento de voz aberto a todos. Agora você pode doar sua voz para nos ajudar… voice.mozilla.org

Qualquer pessoa pode contribuir para o Common Voice lendo frases em voz alta e ensinando dicas para a máquina. Você também pode verificar as transcrições de voz comuns para garantir que o mecanismo de reconhecimento esteja no caminho certo.

Devtools do Firefox

Teste, aprenda e construa com o Firefox DevTools
Aprenda sobre CSS Grid Layout, Firefox Debugger e muito mais com o playground Firefox DevTools. mozilladevelopers.github.io

Após as alterações no Firefox que mencionei acima, você não ficará surpreso ao saber que muitas melhorias foram feitas no DevTools. Debugger.html é um deles. A melhor parte? Debugger.html é um projeto de código aberto hospedado no GitHub, então qualquer um pode contribuir para o seu desenvolvimento.

Agora, vamos examinar os novos recursos do debugger.html, um por um.

Geral – Ferramenta Inspecionar

Mudar tema

A nova ferramenta de desenvolvimento vem com três opções de temas diferentes: escuro, claro e Firebug. A muito amada ferramenta Firebug ainda é usada por muitas pessoas, embora o desenvolvimento ativo tenha cessado.

Há até uma postagem em um blog para comparar o uso da cor: Postagem aprofundada do blog no Firefox Nightly News.

Grade CSS

Uma das mais recentes inovações em CSS é o CSS Grid Layout. Com o DevTools, você pode ver seus elementos em destaque "display: grid". Você também pode ativar ou desativar facilmente recursos como números de linha, nomes de área ou estender linhas infinitamente.

Para mais informações, visite: https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

Modelo de caixa

Os valores de margem e preenchimento nos elementos podem, às vezes, se tornar quebra-cabeças. Com a estrutura do modelo de caixa, você pode ver facilmente – e alterar – quanto espaço está ocupado por propriedades como margem, preenchimento e borda.

Para mais informações, visite: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Introduction_to_CSS/Box_model

Variáveis ??CSS

Outra inovação CSS é a introdução de variáveis. Embora nem todos os navegadores suportem variáveis ??ainda, seu uso, sem dúvida, aumentará com o tempo. Como o nome indica, você pode atribuir qualquer valor a uma variável. Quer verificar qual é o valor? Basta passar o mouse sobre ele.

Para mais informações, visite: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_variables

Adicionar / Remover Classe

Ao pressionar o botão .cls no lado direito do painel do DevTools, você pode facilmente adicionar e remover classes CSS do elemento HTML que está inspecionando.

Flutuar

Quando você pressiona o botão ao lado da tecla .cls no lado direito, é possível testar facilmente os estados de foco, ativo e foco do elemento atual.

Família de fontes

Ao inspecionar um elemento, você também pode ver qual fonte é usada nesse elemento e como ela foi adicionada.

Animações

Animações são outro desenvolvimento popular. Na minha história " Como usar animações CSS como um profissional ", escrevi uma breve introdução à animação. Você pode reproduzir as animações lentamente ou acompanhar como elas estão se movendo.

XPath

Todos os outros desenvolvedores terão ouvido o termo "web scraping" . Se você quiser usar um raspador para extrair algum conteúdo de uma página da Web, poderá obter facilmente o local do elemento na página por meio do XPath. Você pode ver o que quero dizer no GIF acima.

CONSOLE

Log do console

Quando nos movemos para a seção do console, você pode examinar facilmente os objetos. Além disso, a chave de estrutura de árvore facilita a seleção de objetos e impede que eles desapareçam.

Console.group

Você sabia que pode tornar os eventos mais organizados e legíveis com o console.group () e o groupCollapsed ()?

Depurador

Ponto de parada

Boas ferramentas para depuração de JavaScript são indispensáveis. Com o Breakpoint, você pode inserir rapidamente os pontos de interrupção e examinar os detalhes do escopo.

Mapas de origem

SCSS, WebAssembly, TypeScript, Babel… estas compilações JavaScript ou CSS estão se tornando muito populares. Como resultado, a estrutura de código que acaba no navegador muitas vezes foi processada em algo bem diferente do que foi originalmente escrito. Você pode se concentrar em trabalhar com os arquivos de origem originais usando mapas de origem.

Função de pesquisa – pesquisa de projeto

Uma das melhores maneiras de descobrir nossos erros é poder procurá-los em nossos muitos arquivos.

Editor de estilo

Neste editor, você pode ver tudo o que você escreveu para CSS, como o uso de pontos de interrupção.

atuação

Para garantir que nossas páginas sejam renderizadas com rapidez e suavidade, principalmente quando a animação está envolvida, a regra de 60 fps não deve ser esquecida. Com isso, você pode controlar quanto tempo cada quadro leva para se exibir.

Monitor de rede

CSS, JavaScript, imagens e muitos outros recursos são carregados na seção Network Monitor para que a página possa ser interpretada e exibida corretamente pelo navegador.

Você pode usar esta seção especificamente para desempenho: observando o status dos arquivos, quanto tempo eles levam para carregar, e se podem ou não ser carregados com sucesso.

Armazenamento

Usamos cookies ou armazenamento local para manter as informações sobre os usuários quando eles acessam seu website.

Esta seção oferece a oportunidade de inspecionar, editar, adicionar ou excluir essas informações.

Pensamentos finais

Os modelos de negócios das grandes empresas dependem de usuários que mudam de produtos de terceiros para suas próprias ofertas proprietárias, a fim de manter os consumidores presos em seu próprio ecossistema de software.

Por exemplo, se você quiser assistir a uma apresentação do Apple Keynote na Web, só poderá abrir a página com o Safari. Se você quiser mudar do iOS para o Android, você terá que dizer adeus ao iMessage.

Mas o Mozilla Firefox não faz parte de um 'jardim murado' proprietário. É por isso que mudar o seu navegador para o Firefox é muito mais fácil do que fazer as coisas mencionadas acima.

Sim, sei que ainda é difícil fazer a jogada. Você tem que mudar hábitos, atalhos, extensões de navegador e senhas salvas. Mas eu prometo, vale a pena.

Dê ao Firefox outra chance.

PS

Tenho boas notícias para quem ler até o final do artigo. Temos a capacidade de gerenciar as notificações que nos cansamos de ver em todos os lugares.

Certifique-se de assinar a newsletter abaixo. Não vamos enviar spam, prometo.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *