Slide 1

Slide 1 text

interpretando style guides @jessilyneh outubro 2022, São Paulo para contribuições consistentes em projetos open source

Slide 2

Slide 2 text

@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)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

Interpretando Style Guides https://google.github.io/styleguide/ @jessilyneh

Slide 7

Slide 7 text

Interpretando Style Guides https://github.com/kognise/water.css/blob/master/.g ithub/CONTRIBUTING.md#add-or-change-styles @jessilyneh

Slide 8

Slide 8 text

Interpretando Style Guides https://kubernetes.io/docs/contribute/style/ @jessilyneh

Slide 9

Slide 9 text

Interpretando Style Guides @jessilyneh https://mermaid-js.github.io/mermaid/#/theming?id=list-of-themes

Slide 10

Slide 10 text

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?

Slide 11

Slide 11 text

Para projetos open source que usem sites, vale a pena dar atenção para Core Web Vitals! Interpretando Style Guides @jessilyneh

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Interpretando Style Guides @jessilyneh

Slide 19

Slide 19 text

@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.

Slide 20

Slide 20 text

Obrigada! @jessilyneh outubro de 2022, São Paulo