Transferir como PDF, PPTX
Carregado porDavidson Fellipe
Guia do Front-end das Galáxias
Este documento fornece uma introdução sobre o que é desenvolvimento front-end, incluindo as principais tecnologias (HTML, CSS e JavaScript), boas práticas de organização de código e projetos, ferramentas, e como se manter atualizado na área.
Mais conteúdo relacionado
Semelhante a Guia do Front-end das Galáxias
Guia do Front-end das Galáxias
- 1.
- 2. Front in Cuiabá2015 Frontend Carioca 2014 Rupy Natal 2014 Front in Aracaju 2014 me apresentada em
- 3. HTML ~ 2001 seniorfront-end engineer globo.com ~ 2010 mais em fellipe.com me
- 10.
- 11.
- 12. curiosidade É um importantecombustível para aprender mais, testar coisas novas, e lidar com o tentativa e erro.
- 13. FRONTEND DEVELOPER UI ENGINEER WEBDEVELOPER PROJETISTA DE INTERFACES FRONTEND ENGINEER
- 14. FRONT-END UNICORN FRONT-END UXNINJA FRONT-END NINJA
- 15.
- 16.
- 17. html começando do fazerde qualquer jeito ao código com sua devida semântica
- 18.
- 19. css começando do remover sublinhadode links até sua relevância para apresentar visual, animações e interações e responsividade
- 20.
- 21. javascript da validação deformulários até ferramenta de grande relevância para melhoria da experiência do usuário
- 22. diferentes navegadores diferentes versões diferentesresoluções diferentes dispositivos integração
- 23.
- 24. GRANDES GRINGOS DAÁREA @leaverou @paul_irish @codepo8 @souders @slicknet @stoyanstefanov @stubbornella @addyosmani @rauchg @sindresorhus @cowboy @mathias @valueof @rmurphey
- 25.
- 26.
- 27. HTML, CSS, JAVASCRIPT,FEATURE DETECTION, REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP, CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES, SVG, CANVAS, LOCALSTORAGE, WEBCOMPONENTS, WEBSOCKETS, SHADOW DOM, FERRAMENTAS PARA DEBUG, SISTEMAS DE GRIDS, SCHEMA.ORG, SEO... GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE CÓDIGO, TASK RUNNERS, PERFORMANCE... E PORQUE NÃO?
- 28.
- 29.
- 30.
- 31.
- 36.
- 37.
- 40.
- 41. O que aprendo? Boaorganização de arquivos Estrutura do HTML, CSS e JS Projetos em constante evolução
- 42.
- 43.
- 44.
- 45.
- 46. padrões ponto e vírgula; espaçosvs tabulações aspas simples vs aspas duplas nomenclaturas para functions, Object Literal, conditional statement...
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. vantagens produtividade facilidade de trabalhar commódulos e variáveis uso de mixins e placeholders
- 57. PÉSSIMAS PRÁTICAS COM CSS,PODEM SER PIORADAS COM PRÉ-PROCESSADORES
- 58. fazendo o malcom css .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. NÃO DESPREZE OS CUSTOSDO LADO FRONT-END!
- 66. MUITAS VEZES OS CUSTOSPODEM SER MAIS ALTOS QUE OS DO BACK-END!
- 67. aprenda Design Patterns Inheritance Prototype ePromises Memoize, Throttle e Debounce Detalhes do JSLint Escopo de variáveis
- 68.
- 69.
- 70.
- 71. git, mercurial… TRABALHAR COMREPOS ENTENDER BRANCHES, TAGS PULL REQUEST ISSUES
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 85.
- 86.
- 88.
- 89. $ make grunt-config MAKEFILE grunt-config: @echo'✖ installing node'; brew install node; @echo '✖ installing grunt'; sudo npm install -g grunt-cli; @sudo npm i --save-dev make
- 90.
- 91. task compass:prod MAKEFILE grunt.initConfig({ compass: { dev: {/* ... */ }, prod: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); js
- 92.
- 93. executando $ grunt compass:dev $grunt compass:prod
- 94.
- 95.
- 96.
- 97.
- 98.
- 99. Qual impacto da performance? baixasconversões baixo engajamento altas taxas de rejeição
- 100.
- 101.
- 102.
- 103.
- 105. QI de 30 bilhõesde vezes superior ao de um ser humano
- 106.
- 107.
- 108.
- 109.
- 110.
- 113. Aprenda com o tempo códigolimpo testes preocupação com manutenibilidade e extensibilidade
- 115.