Caminho do FrontEnd - Meetup HTML

Transcript

1. Boa Noite Meetup HTML-SP!!!
6. AVISO! Tudo o que será falado aqui não é nenhum tipo de "receita de bolo". São dicas baseadas em experiências próprias! Siga algumas dessas dicas, mas crie o seu próprio caminho =]
7. 1 ano e 4 meses atrás...
10. O que é preciso aprender?
12. HTML HTML é parte essencial da web, sem ela a Web não existe. Portanto, aprenda HTML. - Começando a fazer de "qualquer jeito"; - Até entender todo seu contexto, semântica e organização de informação.
13. CSS “CSS é muito fácil de aprender, mas leva muito tempo para se tornar um mestre” - Começando a remover sublinhado dos links - Até criando animações, interações e responsividade
14. JAVASCRIPT Você tem que aprender Javascript para usá-lo com interações e eventuais comportamentos nas páginas do seu projeto. - Desde a validação de formulários - Até melhorar a experiência do usuário e utilizar Javascript no lado de servidor.
17. - Muitas ferramentas - Cultura de testes - Transpiladores - Pré-Compiladores - Várias possibilidades de stack e workflow - Aparente enorme barreira de entrada
19. Integração - Diferentes Navegadores - Diferentes Versões - Diferentes Resoluções - Diferentes Dispositivos
20. Responsividade e Adaptatividade: qual a diferença?
22. Padrões - Ponto e Vírgula; - Aspas simples vs Aspas Duplas - Nomenclatura para funções, classes, etc... - Espaço vs Tabulação - .editorconfig é seu amigo
23. Controle de Versão - Trabalhar com Repositórios - Entender Branches, Tags - Pull Request - Issues - Merge x Merge c/ Rebase
25. Terminal
26. SEO - Content Matters - Meta tags - Palavras Chave - HTML Semântico - Structured Data (schema.org) - Otimização, Performance, Social Media Integration, Mobile Friendly
27. Template Engine - Padronização - Modularização - Evita repetição Nunjucks
31. Frameworks Front-End - Aparência - Boa documentação - Desenvolvimento + Rápido - Responsividade - Diversos componentes prontos
35. Pré-Processadores - Produtividade na escrita de CSS - Facilidade de trabalhar com módulos, variáveis, @imports - Uso de mixins, placeholders, funções, condicionais
40. PostCSS PostCSS pode ser usado como pré ou pós processador, substituindo ou sendo usado junto com um pré-processador. Ele sozinho apenas torna o CSS acessível em JavaScript possibilitando uma infinidade de plugins e ferramentas personalizadas.
41. PostCSS https://medium.com/@neysimes/o-que-%C3%A9-o-postcss-be462ab b5298#.weq8dndcd
42. +
43. Fazendo Mal com CSS Péssimas práticas de escrita com CSS podem ser pioradas com Pré-processadores
46. Arquitetura CSS - OOCSS, BEM, SMACSS, etc… - Componentes reutilizáveis - Tudo escrito como .classe - Evita problemas como aninhamento - Segue padrões de nomenclatura bem definidos
48. Gerenciamento de Dependências - Facilita a Atualização - Melhor Modularização - Simples instalação de Dependências - Node + NPM - Bower
49. Gerenciamento de Dependências
50. Automação de Tarefas - Minificar e concatenar arquivos - Gerar Sprites - Assistir atualizações e rodar tarefas automaticamente - Rodar Lints - Compilar arquivos
51. Automação de Tarefas
52. Automação de Tarefas
53. Automação de Tarefas
54. Performance - Front-end é responsável por 80% da performance de um website - Performance ruim reduz conversão, reduz engajamento e aumenta taxas de rejeição
56. Dicas de Performance - Estilos no topo, scripts no rodapé - Comprima seu CSS e JS - Combine vários arquivos de CSS e JS em um só - Use CSS Sprites - Otimize suas Imagens - Lazy Load - Critical CSS - Server Stuff E muito mais...
60. Case de Performance
62. Frameworks JS - Ajudam na estruturação do seu projeto - Implicam em melhores aplicações - Não existe bala de prata - O seu problema deve caber no framework, não o contrário
65. Full Stack Javascript - Javascript de ponta a ponta no seu projeto - Desde o front-end até o server e banco de dados - API Rest com Express - JSON no banco, server e client
66. http://wbruno.com.br/nodejs/construindo-uma-api-rest-com-expressjs-nodejs/
67. Soft Skills - Comunicação - Saber ouvir - Ter atitude - Pensamento Crítico - Big Picture Think
68. Mais Dicas!
69. Planeje seus projetos
70. Seja proativo
71. Seja curioso
72. Não diga SIM para tudo...
73. Mas não diga NÃO toda hora
74. Invista nas suas Skills https://www.novatec.com.br/l ivros/nodejs/
75. Encontre um Mentor - Amigos - Seu tech-leader - Co-Workers - Aquele bróder que você tem na lista de amigos do Facebook