No Chrome Dev Summit 2014, houve uma série de temas e temas sobre as novas APIs, mas o foco não é só a nova e incrível API.
Se você é um desenvolvedor Web novo ou um desenvolvedor experiente prestes a embarcar na exploração de novas APIs, é provável que siga estas três etapas: aprender, criar e iterar.
Matt Gaunt cobre os esforços contínuos da equipe da Plataforma de desenvolvedores do Chrome para resolver esses problemas.
Aprendizado
Os Fundamentos da Web são um conjunto de documentos orientados por casos de uso que abrangem vários tópicos. O objetivo principal é ajudar os desenvolvedores com pouco ou nenhum conhecimento a implementar as práticas recomendadas o mais rápido possível.
Um dos principais objetivos dos Fundamentos da Web é garantir que, se você for novo em um tema, a orientação reduzirá o máximo possível a "paralisia de escolha". Addy Osmani fala sobre isso no canal Pastry Box.
Se você detectar algum problema com o site ou com o conteúdo dele ou quiser que os Fundamentos da Web abordem um tópico específico, envie feedback no GitHub.
Criar
Para ajudar você a iniciar um novo projeto da Web, criamos o Web Starter Kit. Ela tem tudo o que você precisa:
- Um processo de build sólido
- HTML padrão
- Guia de estilo
O processo de compilação
Para quem não sabe criar processos, a maneira mais fácil de pensar em um processo de build é pensar nele como um programa que usa um conjunto de arquivos e executa determinadas 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.
O Web Starter Kit tem os seguintes processos:
Minimizamos e concatenamos CSS e JavaScript para que o navegador possa buscar o arquivo rapidamente. O JavaScript também é executado por meio do JSHint para verificar as práticas recomendadas do JavaScript e erros comuns de programação. As imagens são reduzidas com imagemin, e você pode conseguir reduções enormes no tamanho do arquivo com esse recurso. Também temos um processo para criar o CSS com guias de estilo.
Texto padrão para HTML para vários dispositivos
O primeiro conjunto de HTML que você cria para uma nova página é bastante padrão, e é provável que você tenha alguma maneira de armazenar rapidamente um arquivo HTML de estoque que funcione bem em vários dispositivos e tamanhos de tela.
No Web Starter Kit, queríamos adicionar suporte a todos os recursos que desfocassem a linha entre a plataforma e seu site. Por isso, adicionamos suporte a adicionar à tela inicial e telas de apresentação para Android, Windows Phone, iOS e Opera Coast.
Guia de estilo
A última parte do Web Starter Kit é o guia de estilo.
Isso dá a qualquer projeto novo um ótimo conjunto de estilos e componentes padrão que incentivam o desenvolvimento orientado por estilos. Você pode alterar estilos existentes para elementos e adicionar seus próprios estilos.
Na próxima versão da WSK, que deve ser lançada no início do ano que vem, estamos trabalhando para simplificar a forma como o guia de estilo se encaixa e mudar para um visual do Material Design. Mattmostrou umsimulação de como isso pode acontecer na Conferência de Desenvolvedores do Chrome, e você pode conferir um exemplo abaixo.
Faça ajustes
Depois de começar a colocar seus novos conhecimentos em prática, use o DevTools para depurar, melhorar e manter seu trabalho.
Vários novos recursos enormes chegam ao DevTools, e Matt pode conferir os novos recursos a seguir.
Modo dispositivo
O Device Mode é uma nova seção no DevTools que permite conferir rapidamente como o site funciona em diferentes dispositivos móveis, enquanto visualiza as consultas de mídia no CSS.
Um dos melhores recursos do Device Mode é 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.
Criador de perfil de pintura
Se você já abriu a guia da linha do tempo e apertou o botão de gravação, provavelmente já viu alguns eventos de pintura acontecerem na cascata. Normalmente, isso seria uma caixa preta sem como você saber por que o navegador fez 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.
Acompanhamento de invalidação
O DevTools agora explica por que uma pintura ou um layout ocorreu sempre que possível. Isso é útil para qualquer pessoa que saiba mais sobre a linha do tempo e os comportamentos do navegador e permite otimizar o código para evitar problemas de desempenho.
Visualização do Flame Chart
Essa é uma maneira muito diferente de ver as informações disponíveis na linha do tempo. Isso facilita muito a visualização de como as tarefas se sobrepõem e o comportamento do navegador que aconteceu como resultado de outras tarefas.
Leitor de frames
Na visualização "Flame Chart", você pode selecionar um frame específico e, dentro dele, explorar quais elementos da página foram promovidos a uma camada composta, bem como por que foram promovidos.
Aprenda. Crie Faça ajustes
Esses são alguns dos esforços da equipe do Chrome para ajudar os desenvolvedores a acelerar o desenvolvimento da Web. Portanto, confira os Fundamentos da Web, o Web Starter Kit e os novos recursos no Chrome DevTools.