Home
Explore
Submit Search
Upload
Login
Signup
Advertisement
Check these out next
It's Javascript Time
Davidson Fellipe
Engenharia de front end de alta performance
Anderson Solano
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Edmo Jeova
Você não precisa de uma sopa de letrinhas para criar web apps
William Oliveira
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
William Oliveira
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Gustavo Zimmermann
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
1
of
115
Top clipped slide
Guia do Front-end das Galáxias
Aug. 3, 2014
•
0 likes
148 likes
×
Be the first to like this
Show More
•
17,528 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download Now
Download to read offline
Report
Software
Guia do front end das galaxias
Davidson Fellipe
Follow
Senior Front-end Engineer
Advertisement
Advertisement
Advertisement
Recommended
O Papel do desenvolvedor Front End
Rael Max
19.9K views
•
16 slides
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
5.2K views
•
96 slides
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
5.6K views
•
19 slides
O que você precisa saber para se tornar um dev front-end
Diego Eis
10.6K views
•
36 slides
Primeiros passos para estruturar uma equipe front-end
Diego Eis
2.9K views
•
44 slides
Os cuidados e os limites do Responsive Web Design
Diego Eis
4.2K views
•
82 slides
More Related Content
Slideshows for you
(20)
It's Javascript Time
Davidson Fellipe
•
1.5K views
Engenharia de front end de alta performance
Anderson Solano
•
1.3K views
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Edmo Jeova
•
702 views
Você não precisa de uma sopa de letrinhas para criar web apps
William Oliveira
•
635 views
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
William Oliveira
•
1.1K views
Guia prático de desenvolvimento front-end para django devs
Davidson Fellipe
•
2.6K views
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Gustavo Zimmermann
•
572 views
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
•
1.6K views
Criação Web com Bootstrap e Material Design
Daniel Brandão
•
2.1K views
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
•
334 views
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Anyssa Ferreira
•
3.7K views
Método The bridge
Daniel Coscarelli
•
7.1K views
Usando a programação web para mobile com Twitter Bootstrap
Flavio Souza
•
818 views
Mini-Curso sobre Bootstrap 3
Diego Doná
•
4.9K views
Construindo um framework CSS
Diego Eis
•
3.4K views
A utilização do Bootstrap Para a Otimização de Páginas
Ramon Sousa
•
3K views
Design Responsivo
Rennan Martini
•
5.1K views
Desenvolvimento Ágil com Twitter Bootstrap
Flavio Souza
•
1.9K views
CMS e Midias Sociais
Edney Souza
•
505 views
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
Sergio Costa
•
6.9K views
Similar to Guia do Front-end das Galáxias
(20)
SPA's com Blazor e .NET Core
Gustavo Bellini Bigardi
•
2.8K views
Desenvolvedor Front-End
Anderson Silva Andrade
•
250 views
Produtividade
Elcio Ferreira
•
1.9K views
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
iMasters
•
722 views
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Bunee.io - Hiring with Intelligence
•
11.6K views
ASP.NET 5, MVC 6 e além
Fabrício Lopes Sanchez
•
1.4K views
Java Web Fácil com VRaptor
Frederico Maia Arantes
•
3.1K views
Front end - the right way
Vinicius Dacal Lopes
•
729 views
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
•
255 views
ASP.NET MVC para desenvolvedores Web Forms (TechEd)
Giovanni Bassi
•
1.2K views
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
•
838 views
A Semântica do HTML5: a web 3.0
Campus Party Brasil
•
963 views
TechEd Brasil 2015 - Novidades do SQL Server 2016 para Business Intelligence
Diego Nogare
•
1.1K views
Canal Coding Night - Sua primeira aplicação com Blazor
Gustavo Bellini Bigardi
•
63 views
#Moving br workshop
Fernanda Ferreira
•
57 views
Criando e Usando Helpers
JoaoVagner
•
197 views
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
•
261 views
Front-end o que é preciso saber?
João Praia
•
57 views
ASP.NET Web Forms X ASP.NET MVC
guest489a65e
•
5.3K views
Curriculo para Designer leonildo wagner - 08-2016
Léo Dias
•
1.6K views
Advertisement
More from Davidson Fellipe
(18)
O melhor da monitoração de web performance
Davidson Fellipe
•
2.7K views
Workflow para desenvolvimento Web & Mobile usando grunt.js
Davidson Fellipe
•
3K views
Como é trabalhar na globocom?
Davidson Fellipe
•
2.5K views
Practical guide for front-end development for django devs
Davidson Fellipe
•
2.1K views
Esse cara é o grunt
Davidson Fellipe
•
2.4K views
Frontend Engineers: passado, presente e futuro
Davidson Fellipe
•
1.4K views
Turbinando seu workflow para o desenvolvimento de webapps
Davidson Fellipe
•
2K views
Workflow Open Source para Frontend Developers
Davidson Fellipe
•
1.7K views
Os segredos dos front end engineers
Davidson Fellipe
•
1.4K views
Javascript Cross-browser
Davidson Fellipe
•
1.7K views
performance em jQuery apps
Davidson Fellipe
•
2.1K views
RioJS - Apresentação sobre o grupo
Davidson Fellipe
•
1.1K views
frontend {retirante: nordestino;}
Davidson Fellipe
•
975 views
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
•
1.6K views
Canvas element
Davidson Fellipe
•
1.2K views
Tutorial Crição De Imagens Panoramicas Hugin
Davidson Fellipe
•
988 views
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe
•
23.2K views
Sistema De Comunicação Bluetooth Usando Microcontrolador PIC
Davidson Fellipe
•
6.2K views
Recently uploaded
(20)
01.Introdução a Lógica de Programação.pdf
Silvano Oliveira
•
3 views
MAPA - EDU - HISTÓRIA DA EDUCAÇÃO FÍSICA - 52/2023
DlAssessoriaacadmica
•
6 views
MAPA - GQ - COMUNICAÇÃO EMPRESARIAL E NEGOCIAÇÃO - 52/2023
DlAssessoriaacadmica
•
5 views
10 Linguagens de programação essenciais
Alexandre Oliveira
•
86 views
Um dos maiores desafios em uma empresa ou organização é a realização da produ...
AssessoriaDlacadmica
•
4 views
ATIVIDADE 1 - PSICOLOGIA DA EDUCAÇÃO - 52/2023
AssessoriaDl
•
7 views
Aula 12 - ADOLESCENCIA 4ª Período_230511_182632.pdf
LeonardoAmaraldeOliv1
•
3 views
Aula 2.pptx
José Tartanhar
•
1 view
MAPA - FUNDAMENTOS HISTÓRICOS E FILOSÓFICOS DA EDUCAÇÃO - 52/2023
AssessoriaDlacadmica
•
3 views
Certificado em PDF.pdf
LeeMarcosCruzdeSouza
•
2 views
CERTIFICADO EM LINGUAGEM DE PROGRAMAÇÃO EM C.pdf
BravosRt
•
3 views
留信网认证可查【伦敦大学亚非学院文凭证书毕业证购买】
32lkhng
•
2 views
ATIVIDADE 1 - BIO - PARASITOLOGIA CLÍNICA - 52/2023
AssessoriaDl
•
3 views
certificado dos Alunos.pdf
LeeMarcosCruzdeSouza
•
3 views
INTRODUÇÃO AO HACKING E PENTEST - SOLYD.pdf
BravosRt
•
11 views
MAPA - PSICOLOGIA ORGANIZACIONAL - 52/2023
AssessoriaDlacadmica
•
2 views
Seminario infor..pptx
RaylisonSilva2
•
2 views
MAPA - GO - PROJETO DE VIDA - 52/2023
DlAssessoriaacadmica
•
19 views
MAPA - PSICOLOGIA ORGANIZACIONAL - 52/2023
AssessoriaDl
•
3 views
MAPA - GO - PROJETO DE VIDA - 52/2023
AssessoriaDlacadmica
•
7 views
Advertisement
Guia do Front-end das Galáxias
GUIA DO FRONT-END DAS GALÁXIAS Davidson Fellipe
v4
Front in Cuiabá
2015 Frontend Carioca 2014 Rupy Natal 2014 Front in Aracaju 2014 me apresentada em
HTML ~ 2001 senior
front-end engineer globo.com ~ 2010 mais em fellipe.com me
marvin, Quer ser front-end
ELE ERA CURIOSO…
curiosidade É um importante
combustível para aprender mais, testar coisas novas, e lidar com o tentativa e erro.
FRONTEND DEVELOPER UI ENGINEER WEB
DEVELOPER PROJETISTA DE INTERFACES FRONTEND ENGINEER
FRONT-END UNICORN FRONT-END UX
NINJA FRONT-END NINJA
MAS O QUÊ FAZ
UM?
HTML
html começando do fazer
de qualquer jeito ao código com sua devida semântica
CSS
css começando do remover sublinhado
de links até sua relevância para apresentar visual, animações e interações e responsividade
JAVASCRIPT
javascript da validação de
formulários até ferramenta de grande relevância para melhoria da experiência do usuário
diferentes navegadores diferentes versões diferentes
resoluções diferentes dispositivos integração
começou a seguir referências…
GRANDES GRINGOS DA
ÁREA @leaverou @paul_irish @codepo8 @souders @slicknet @stoyanstefanov @stubbornella @addyosmani @rauchg @sindresorhus @cowboy @mathias @valueof @rmurphey
@zenorocha @marcelduran @maujor @bergbrandt @fabiomcosta @eduardolundgren @jaydson @almirfilho @leobalter @millermedeiros @caio_gondim @felipenmoura NOMES brazucas DA
ÁREA @sergio_caelum @jcemer
O QUE PRECISO APRENDER?
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?
HTTP://I1- NEWS.SOFTPE
https://twitter.com/slicknet/status/292103833327370240
COMO POR EM PRÁTICA?
ESCOLHENDO UM EDITOR
CRIO UM PADRÃO?
BUSCO POR UM PADRÃO?
http://html5boilerplate.com/
O que aprendo? Boa
organização de arquivos Estrutura do HTML, CSS e JS Projetos em constante evolução
GRANDES PROBLEMAS
http://cubic-bezier.com/#.17,.67,.83,.67
COMO ORGANIZAR MEU PROJETO?
definindo uma estrutura
padrões ponto e vírgula; espaços
vs tabulações aspas simples vs aspas duplas nomenclaturas para functions, Object Literal, conditional statement...
https://github.com/rwaldron/idiomatic.js/
https://github.com/airbnb/javascript
COMO ORGANIZAR MEU CSS?
css nãããããããão
CSS VS PRÉ-PROCESSADOR
vantagens produtividade facilidade de trabalhar com
módulos e variáveis uso de mixins e placeholders
PÉSSIMAS PRÁTICAS COM CSS,
PODEM SER PIORADAS COM PRÉ-PROCESSADORES
fazendo o mal
com css .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
http://csslint.net/
COMO ORGANIZAR MEU JS?
APRENDA ALGORITMOS!!!
http://eloquentjavascript.net/
https://github.com/braziljs/eloquente-javascript também em português
HTTP://I1- NEWS.SOFTPE <3
NÃO DESPREZE OS CUSTOS
DO LADO FRONT-END!
MUITAS VEZES OS CUSTOS
PODEM SER MAIS ALTOS QUE OS DO BACK-END!
aprenda Design Patterns Inheritance Prototype e
Promises Memoize, Throttle e Debounce Detalhes do JSLint Escopo de variáveis
http://www.jshint.com/ JSHINT
ESQUEÇA FTP COM GUI
ESQUEÇA SVN
git, mercurial… TRABALHAR COM
REPOS ENTENDER BRANCHES, TAGS PULL REQUEST ISSUES
https://github.com/
https://bitbucket.org/
COMO GERENCIO MEU TEMPO?
https://trello.com/
http://www.yast.com/
https://wakatime.com/
https://www.rescuetime.com
COMO MANTENHO MEU PROJETO?
http://jasmine.github.io/
http://qunitjs.com/
http://visionmedia.github.io/mocha/
INTEGRAÇÃO CONTÍNUA
processo de deploy
TASK RUNNERS
MAKE ANT RAKE CAKE GULP GRUNT SHELL JAVA RUBY COFFEE JS JS
$ 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
tasks testes pré-processadores js/css lint criar sprites concatenação otimização
de imagens
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
https://github.com/vigetlabs/grunt-complexity
executando $ grunt compass:dev $
grunt compass:prod
https://github.com/davidsonfellipe/grunt-workflow
http://bower.io/
http://yeoman.io/
automatize suas configurações https://github.com/davidsonfellipe/dotfiles
PERFORMANCE
Qual impacto da performance? baixas
conversões baixo engajamento altas taxas de rejeição
https://github.com/davidsonfellipe/awesome-wpo
http://browserdiet.com/pt
https://github.com/davidsonfellipe/keepfast/
OTIMIZAR A EXPERIÊNCIA DO USUÁRIO
QI de 30 bilhões
de vezes superior ao de um ser humano
COMO SE MANTER ATUALIZADO?
http://braziljs.org/
http://web-design-weekly.com/
http://html5weekly.com/
http://javascriptweekly.com
Aprenda com o tempo código
limpo testes preocupação com manutenibilidade e extensibilidade
fellipe.com/talks github.com/davidsonfellipe twitter.com/davidsonfellipe obrigado pelos peixes
Advertisement