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.

Transcript

1. interpretando style guides @jessilyneh outubro 2022, São Paulo para contribuições consistentes em projetos open source
2. @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)
3. 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
4. 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
5. 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/
6. Interpretando Style Guides https://google.github.io/styleguide/ @jessilyneh
7. Interpretando Style Guides https://github.com/kognise/water.css/blob/master/.g ithub/CONTRIBUTING.md#add-or-change-styles @jessilyneh
8. Interpretando Style Guides https://kubernetes.io/docs/contribute/style/ @jessilyneh
9. Interpretando Style Guides @jessilyneh https://mermaid-js.github.io/mermaid/#/theming?id=list-of-themes
10. 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?
11. Para projetos open source que usem sites, vale a pena dar atenção para Core Web Vitals! Interpretando Style Guides @jessilyneh
12. 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/
13. 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/
14. 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/
15. 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/
16. 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
17. 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.
18. Interpretando Style Guides @jessilyneh
19. @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.
20. Obrigada! @jessilyneh outubro de 2022, São Paulo