Share
Embed
Interpretando Style Guides
Projeto open source não é bagunça! Nesta palestra, você vai conhecer o caminho para começar a contribuir no front-end seguindo as boas práticas dos projetos, entendendo os style guides antes de começar a codar e entendendo as atividades que vão fazer mais sentido.
Jessilyneh
February 28, 2023
Transcript
20 slides
-
interpretando style guides @jessilyneh outubro 2022, São Paulo para contribuições
consistentes em projetos open source -
@jessilyneh Jess - Ela/A Lead de Frontend na Lacrei Saúde
(voluntariado: plataforma de acesso a saúde clínica da comunidade LGBTQIAPN+) Organizadora do Nerdzão/NerdGirlz (voluntariado: comunidade de tecnologia) 31 anos Instrutora Frontend na Sirius Educação (part-time: neouniversidade) Organizadora do Woman that React (voluntariado: comunidade de tecnologia) -
Como parece ser: Ganhar camiseta; "Estou fazendo um favor, trabalhando
de graça na minha hora de lazer"; Fazer um "PRzinho"; Alterar qualquer coisa de qualquer jeito - não tem P.O.mesmo, só tem dev Participar de projetos open source: Como é: Ler a wiki do projeto; Contribuição open source é tão sério quanto o seu trabalho; Discutir qualquer possivel alteração, por menor que seja, com a equipe; Seguir o style guide e garantir qualidade do código; Cobertura de testes; Atualizar documentação; Interpretando Style Guides @jessilyneh -
Interpretando Style Guides Todo grande projeto de código aberto tem
seu próprio guia de estilo (style guide): um conjunto de convenções (às vezes arbitrárias) sobre como escrever código para esse projeto. É muito mais fácil entender uma grande base de código quando todo o código nela está em um estilo consistente. @jessilyneh https://google.github.io/styleguide/tsguide.html -
Interpretando Style Guides Style Guide cobre muitas definições, desde “use
camelCase para nomes de variáveis” até “nunca use variáveis globais” ou “nunca use exceptions”. Se você estiver modificando um projeto, certamente vão te direcionar para ver os guias de estilo que se aplicam ao projeto. @jessilyneh https://google.github.io/swift/ -
Interpretando Style Guides Você não precisa - e nem deve
tentar - decorar as orientações no style guide. O objetivo é consulta-lo de acordo com a necessidade. Observe tudo que você vai precisar realizar na sua tarefa (criar um novo arquivo, refatorar uma função, etc) e busque no guia quais as boas práticas para a atividade. @jessilyneh https://google.github.io/styleguide/jsguide.ht ml#naming-rules-common-to-all-identifiers Preciso saber tudo antes de começar? -
Para projetos open source que usem sites, vale a pena
dar atenção para Core Web Vitals! Interpretando Style Guides @jessilyneh -
Interpretando Style Guides @jessilyneh Performance Insights no Dev Tools Identificam
problemas como solicitações de bloqueio de renderização, mudanças de layout e tarefas longas que podem afetar negativamente o desempenho de carregamento da página do seu site e, especificamente, as pontuações do Core Web Vital do site. https://developer.chrome.com/blog/performance-insights/ -
Interpretando Style Guides @jessilyneh Performance Insights no Dev Tools Temos
uma linha do tempo de rastreamento e podemos inspecionar os dados, mas também temos uma lista do que o DevTools considera os principais "Insights" que valem a pena pesquisar. https://developer.chrome.com/blog/performance-insights/ -
Interpretando Style Guides @jessilyneh Performance Insights no Dev Tools Também
oferece sugestões acionáveis para melhorar as pontuações de CWV e fornece links para outros recursos e documentação https://developer.chrome.com/blog/performance-insights/ -
Interpretando Style Guides @jessilyneh Aba Performance no Dev Tools Analisa
o desempenho da sua página quando está em execução, em oposição ao carregamento, nos ajudando a encontrar problemas de performance para corrigir https://developer.chrome.com/docs/devtools/evaluate-performance/ -
Interpretando Style Guides @jessilyneh PageSpeed Insights https://pagespeed.web.dev Apresenta um report
do desempenho de uma página em dispositivos móveis e desktop e fornece sugestões sobre como essa página pode ser aprimorada. https://developers.google.com/speed/docs/insights/v5/about -
Interpretando Style Guides @jessilyneh Todos os aspectos que podem ser
otimizados são mostrados com uma estimativa de quanto tempo de carregamento pode ser otimizado se as melhorias forem aplicadas. -
@jessilyneh Interpretando Style Guides Por onde começar? https://developers.google.com/learn/pa thways/web-vitals Além
de ler a documentação, existe uma trilha de artigos e exercícios no site Developers Google.