No Chrome Dev Summit 2014, vários tópicos e APIs novas foram abordados, mas nem tudo é novo e brilhante.
Se você é um desenvolvedor Web iniciante ou até mesmo um desenvolvedor experiente prestes a explorar novas APIs, provavelmente seguirá estas três etapas: aprender, criar e iterar.
Matt Gaunt aborda os esforços contínuos para resolver esses problemas da equipe da Plataforma para Desenvolvedores do Chrome.
Aprender
Os Fundamentos da Web são um conjunto de documentação orientada por casos de uso que abrange vários tópicos. O objetivo principal é fazer com que os desenvolvedores, que têm pouco ou nenhum conhecimento, implementem as práticas recomendadas o mais rápido possível.
Um dos principais objetivos do Web Fundamentals é garantir que, se você for iniciante em um assunto, as orientações reduzam o máximo possível a "paralisia de escolha". Addy Osmani explica isso perfeitamente no Pastry Box.
Se você encontrar algum problema com o site ou o conteúdo dele ou quiser que os Fundamentos da Web abordem um determinado tópico, envie seu feedback no GitHub.
Criar
Para ajudar você a iniciar um novo projeto da Web, criamos o Kit de ferramentas da Web. Ele tem tudo o que você precisa:
- Um processo de build sólido
- HTML do boilerplate
- Guia de estilo
O processo de build
Para quem está começando a usar processos de build, a maneira mais fácil de pensar em um processo de build é como um programa que pega um conjunto de arquivos, executa certas tarefas neles e gera novas versões em um local diferente. As tarefas otimizam os arquivos para melhorar os tempos de carregamento, verificar possíveis erros ou processar tarefas que podem ser automatizadas.
No Web Starter Kit, temos os seguintes processos:
Reduzimos e concatenamos CSS e JavaScript para que o navegador possa buscar o arquivo rapidamente. O JavaScript também é executado pelo JSHint para verificar as práticas recomendadas do JavaScript e erros comuns de programação. As imagens são minimizadas com o imagemin e você pode ter reduções enormes no tamanho do arquivo usando isso. Também temos um processo para criar o CSS dos guias de estilo.
Boilerplate para HTML de vários dispositivos
O primeiro conjunto de HTML que você escreve para uma nova página é bastante padrão e é provável que você tenha uma maneira de acessar rapidamente um arquivo HTML padrão que funcione bem em vários dispositivos e tamanhos de tela.
No Web Starter Kit, queríamos adicionar suporte a recursos que desfocam a linha entre a plataforma e seu site. Por isso, adicionamos suporte para adicionar à tela inicial e telas de abertura para Android, Windows Phone, iOS e Opera Coast.
Guia de estilo
A última parte do Web Starter Kit é o guia de estilo.
Isso oferece a qualquer projeto novo um ótimo conjunto de estilos e componentes padrão que incentivam o desenvolvimento orientado a estilos. Você pode alterar os estilos atuais para elementos e adicionar os seus.
Na próxima versão do WSK, que será lançada no início do ano que vem, estamos trabalhando muito para simplificar a forma como o guia de estilo se encaixa e mudar para um visual e uma sensação de design de material. Mattmostrou ummockup inicial de como isso pode ficar na Chrome Dev Summit. Confira um exemplo abaixo.
Iterar
Depois de começar a colocar seu novo conhecimento em prática, use as Ferramentas do desenvolvedor para depurar, melhorar e manter seu trabalho.
Há alguns recursos novos incríveis chegando ao DevTools, e Matt analisa os recursos a seguir.
Modo do dispositivo
O modo de dispositivo é uma nova seção nas Ferramentas do desenvolvedor que permite conferir rapidamente como o site funciona em diferentes dispositivos móveis, enquanto você analisa as consultas de mídia no CSS.
Um dos grandes recursos do modo de dispositivo é a capacidade de limitar as velocidades da rede, permitindo simular a experiência de um usuário em uma conexão GPRS, EDGE, 3G, DSL ou Wi-Fi.
Paint Profiler
Se você já abriu a guia "Linha do tempo" e pressionou o botão de gravação, provavelmente notou alguns eventos de pintura na cascata. Normalmente, isso seria uma caixa preta sem nenhuma maneira de saber por que o navegador fez isso ou o que ele estava fazendo.
O Paint Profiler não oferece mais informações sobre o que exatamente o navegador está fazendo durante a pintura.
Rastreamento de invalidação
O DevTools agora mostra o motivo de uma pintura ou layout ter ocorrido sempre que possível. Isso é útil para quem está aprendendo sobre a linha do tempo, os comportamentos do navegador e permite otimizar o código para evitar problemas de desempenho.
Visualização do gráfico de chama
Essa é uma maneira muito diferente de visualizar as informações disponíveis na linha do tempo. Isso facilita muito a visualização de como as tarefas se sobrepõem e qual comportamento do navegador ocorreu como resultado de outras tarefas.
Leitor de frames
Na visualização do gráfico de chamas, é possível selecionar um frame específico e, nele, conferir quais elementos da página foram promovidos para uma camada composta e por que foram promovidos.
Aprenda. Crie. Iterar
Estes são alguns dos esforços da equipe do Chrome para ajudar os desenvolvedores a se atualizarem com o desenvolvimento da Web. Confira os Fundamentos da Web, o Kit de ferramentas da Web e os novos recursos do Chrome DevTools.