1.
GUIA DO
FRONT-END
DAS
GALÁXIAS
Davidson Fellipe v4

2.
Front in Cuiabá 2015
Frontend Carioca 2014
Rupy Natal 2014
Front in Aracaju 2014
me
apresentada em

3.
HTML ~ 2001
senior front-end engineer
globo.com ~ 2010
mais em fellipe.com
me

4.
marvin,
Quer ser
front-end

5.
ELE ERA
CURIOSO…

6.
curiosidade
É um importante combustível
para aprender mais, testar coisas
novas, e lidar com o tentativa e
erro.

7.
FRONTEND DEVELOPER
UI ENGINEER
WEB DEVELOPER
PROJETISTA DE INTERFACES
FRONTEND ENGINEER

8.
FRONT-END UNICORN
FRONT-END UX NINJA
FRONT-END NINJA

9.
MAS O QUÊ
FAZ UM?

10.
HTML

11.
html
começando do fazer de qualquer
jeito
ao código com sua devida
semântica

12.
CSS

13.
css
começando do remover
sublinhado de links
até sua relevância para
apresentar visual, animações e
interações e responsividade

14.
JAVASCRIPT

15.
javascript
da validação de formulários
até ferramenta de grande
relevância para melhoria da
experiência do usuário

16.
diferentes navegadores
diferentes versões
diferentes resoluções
diferentes dispositivos
integração

17.
começou
a seguir
referências…

18.
GRANDES GRINGOS DA ÁREA
@leaverou
@paul_irish
@codepo8
@souders
@slicknet
@stoyanstefanov
@stubbornella
@addyosmani
@rauchg
@sindresorhus
@cowboy
@mathias
@valueof
@rmurphey

19.
@zenorocha
@marcelduran
@maujor
@bergbrandt
@fabiomcosta
@eduardolundgren
@jaydson
@almirfilho
@leobalter
@millermedeiros
@caio_gondim
@felipenmoura
NOMES brazucas DA ÁREA
@sergio_caelum
@jcemer

20.
O QUE PRECISO
APRENDER?

21.
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?

22.
HTTP://I1-
NEWS.SOFTPE

23.
https://twitter.com/slicknet/status/292103833327370240

24.
COMO POR
EM PRÁTICA?

25.
ESCOLHENDO UM
EDITOR

26.
CRIO UM PADRÃO?

27.
BUSCO POR UM
PADRÃO?

28.
http://html5boilerplate.com/

29.
O que aprendo?
Boa organização de arquivos
Estrutura do HTML, CSS e JS
Projetos em constante evolução

30.
GRANDES
PROBLEMAS

31.
http://cubic-bezier.com/#.17,.67,.83,.67

32.
COMO
ORGANIZAR
MEU PROJETO?

33.
definindo uma estrutura

34.
padrões
ponto e vírgula;
espaços vs tabulações
aspas simples vs aspas duplas
nomenclaturas para functions, Object
Literal, conditional statement...

35.
https://github.com/rwaldron/idiomatic.js/

36.
https://github.com/airbnb/javascript

37.
COMO
ORGANIZAR
MEU CSS?

38.
css nãããããããão

39.
CSS
VS
PRÉ-PROCESSADOR

40.
vantagens
produtividade
facilidade de trabalhar
com módulos e variáveis
uso de mixins e placeholders

41.
PÉSSIMAS PRÁTICAS
COM CSS, PODEM SER
PIORADAS COM
PRÉ-PROCESSADORES

42.
fazendo o mal com css
.bisavo {
.avo {
.pai {
#wtf {
color: #f60;
}
}
}
}
.bisavo .avo .pai #wtf {
color: #f60;
}
SCSS CSS

43.
http://csslint.net/

44.
COMO
ORGANIZAR
MEU JS?

45.
APRENDA
ALGORITMOS!!!

46.
http://eloquentjavascript.net/

47.
https://github.com/braziljs/eloquente-javascript
também em português

48.
HTTP://I1-
NEWS.SOFTPE
<3

49.
NÃO DESPREZE OS
CUSTOS DO LADO
FRONT-END!

50.
MUITAS VEZES
OS CUSTOS PODEM
SER MAIS ALTOS QUE
OS DO BACK-END!

51.
aprenda
Design Patterns
Inheritance
Prototype e Promises
Memoize, Throttle e Debounce
Detalhes do JSLint
Escopo de variáveis

52.
http://www.jshint.com/
JSHINT

53.
ESQUEÇA
FTP COM GUI

54.
ESQUEÇA
SVN

55.
git, mercurial…
TRABALHAR COM REPOS
ENTENDER BRANCHES, TAGS
PULL REQUEST
ISSUES

56.
https://github.com/

57.
https://bitbucket.org/

58.
COMO GERENCIO
MEU TEMPO?

59.
https://trello.com/

60.
http://www.yast.com/

61.
https://wakatime.com/

62.
https://www.rescuetime.com

63.
COMO
MANTENHO
MEU PROJETO?

64.
http://jasmine.github.io/

65.
http://qunitjs.com/

66.
http://visionmedia.github.io/mocha/

67.
INTEGRAÇÃO
CONTÍNUA

68.
processo de deploy

69.
TASK
RUNNERS

70.
MAKE
ANT
RAKE
CAKE
GULP
GRUNT
SHELL
JAVA
RUBY
COFFEE
JS
JS

71.
$ 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

72.
tasks
testes
pré-processadores
js/css lint
criar sprites
concatenação
otimização de imagens

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

74.
https://github.com/vigetlabs/grunt-complexity

75.
executando
$ grunt compass:dev
$ grunt compass:prod

76.
https://github.com/davidsonfellipe/grunt-workflow

77.
http://bower.io/

78.
http://yeoman.io/

79.
automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles

80.
PERFORMANCE

81.
Qual impacto da
performance?
baixas conversões
baixo engajamento
altas taxas de rejeição

82.
https://github.com/davidsonfellipe/awesome-wpo

83.
http://browserdiet.com/pt

84.
https://github.com/davidsonfellipe/keepfast/

85.
OTIMIZAR A
EXPERIÊNCIA
DO USUÁRIO

86.
QI
de 30 bilhões de
vezes superior ao
de um ser humano

87.
COMO SE MANTER
ATUALIZADO?

88.
http://braziljs.org/

89.
http://web-design-weekly.com/

90.
http://html5weekly.com/

91.
http://javascriptweekly.com

92.
Aprenda com o
tempo
código limpo
testes
preocupação com
manutenibilidade e
extensibilidade

93.
fellipe.com/talks
github.com/davidsonfellipe
twitter.com/davidsonfellipe
obrigado pelos peixes