Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas [revisada]

1.

Desvendando os limites do universo front-end: um panorama de ferramentas
e técnicas revisada

2.

jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer

3.

None

4.

O importante é que seu produto funcione e entregue valor

5.

...mas se você quer que ele seja prático de desenvolver

6.

...tenha uma manutenção descomplicada

7.

...e sobretudo, ir além no seu ﬂuxo de trabalho

8.

esta palestra é especialmente destinada a você!

9.

A Serious Man http:/ /www.imdb.com/title/tt1019452

10.

Quero saber como começo meu projeto ?

11.

Boilerplates

12.

Base sólida e reusável para seu projeto entalhada com boas
práticas

13.

Boa organização de arquivos Estrutura inicial de HTML, CSS e
JS Robots.txt e humans.txt Favicon e apple icons HTML5 Boilerplate http:/ /html5boilerplate.com

14.

HTML Deﬁne viewport para projetos responsivos

15.

<head> <meta name="viewport" content="width=1024"> Viewport para site não responsivo HTML

16.

Inclui Modernizr com todas as detecções apenas html5shiv (IE8,7) ou
o Modernizr customizado que inclui o html5shiv <script src="html5shiv.min.js"> </script> </head> HTML

17.

Página de erro 404 UTF-8 para CSS e JS Entrega
de arquivos compactados Deﬁne expiração dos arquivos para estratégia de cache Apache

18.

Na versão 2.0.0 mudou de Reset.css para Normalize.css CSS

19.

/*! normalize.css v2.1.2 | MIT License | gi /** *
Correct `block` display not defined in I */ article, aside, details, figcaption, figure header, hgroup, main, nav, section, summary display: block; } /** * Correct `inline-block` display not defin */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ Normalize.css Institui uma aparência padrão para cada elemento Corrige alguns bugs comuns normalize.css http:/ /necolas.github.io/normalize.css

20.

/** * Eric Meyer's Reset CSS v2.0 */ html, body,
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; Reset.css Remove toda a aparência Elementos de título, parágrafo e lista com mesma aparência CSS Tools: Reset CSS http:/ /meyerweb.com/eric/tools/ css/reset

21.

X reset normalize

22.

Sophisto Boilerplate Browsers modernos (IE9+) Stylus: pré processador de CSS
Rye.js: biblioteca JS leve substituta da jQuery Build task e script de deploy via Git Sophisto Boilerplate https:/ /github.com/grifo/sophisto-boilerplate

23.

None

24.

Aparência inicial Diversas APIs Suporte oﬄine Firefox OS Boilerplate App
Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App

25.

Quero saber de aparência e como deﬁnir componentes ?

26.

Frameworks de CSS

27.

Guia de estilo com componentes reusáveis e conﬁguráveis para seu
projeto

28.

Cuidado, não existe uma maneira de testar CSS

29.

body, div, dl, dt, dd, ul, ol, li, h1, h2,
h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; } Foundation 3.0 Divs ou tds não herdam o tamanho da fonte de seus elementos pais

30.

Pure CSS Seu formulário deve sempre terminar com um radio

31.

Usar frameworks engessa o HTML a sua maneira

32.

<div class="row"> <div class="span9"> Ótimo, muito bom! <div class="row"> <div
class="span6">E o quanto isto é diferente</div> <div class="span3 text-left">daquilo?</div> </div> </div> </div> Twitter Bootstrap 2.3 Marcação usando classes nomeadas pelo framework

33.

CSS to the heaven Tags e classes devem se referir
ao seu conteúdo e não a sua aparência Seletores devem ser o mais globais possíveis ou função, caso esteja projetando componentes

34.

CSS to the heaven: classes .button .small-button .secondary-button .remove-button .margin10px
.row .span4 .post .dark-slider .left .active .video-title .btn, .ctnr, .act estado tá valendo :) diagramação é aparência sem abreviaturas, pf

35.

E agora, como eu reuso e organizo meu código? ?

36.

CSS on Steroids

37.

body { width: 960px; } .wrapper { width: 940px; }
.speaker-list { width: 480px; } Largura do site Largura do site menos respiro Meia largura ?!

38.

$site-width: 960px; $site-gap: 20px; body { width: $site-width; } .wrapper
{ width: $site-width - $site-gap; } .speaker-list { width: $site-width / 2; } Variáveis Qualquer mudança reﬂete em todo projeto

39.

body { color: #3F4955; } .about { background: #3F4955; }
.contact a:hover { color: #3F4956; } .speaker-list { border: 1px solid #3F4955; } PSD estava com uma pequena variação :P Que diabo de cor é essa? ?!

40.

$grey-color: #3F4955; $main-color: $grey-color; body { color: $main-color; } .about
{ background: $main-color; } .contact a:hover { color: $main-color; } .speaker-list { border: 1px solid $main-color; } Variáveis Muito mais organizado e fácil de entender

41.

body { color: #3F4955; } .slider { color: #293038; }
.carousel { background: rgba(63, 73, 85, 0.8); } Você não faz ideia, mas sou o cinza escuro E eu sou cinza com transparência ?!

42.

$grey-color: #3F4955; $grey-dark-color: darken($grey-color, 10); $transparent-grey-color: rgba($grey-color, .8); body {
color: $grey-color; } .slider { color: $grey-dark-color; } .carousel { background: $transparent-grey-color; } Funções transforma em rgb e adiciona o alpha

43.

.slider { background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left,
#1e5799 0%, #7db9e8 100%); /* background: -webkit-gradient(linear, left top, right top, color-stop background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Op background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* I background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='# } Ultimate CSS Gradient Generator http:/ /www.colorzilla.com/gradient-editor Manutenção bem fácil #sqn ?!

44.

$blue-color: #1E5799; $light-blue-color: #7DB9E8; .slider { $gradient: linear-gradient($blue-color, $light-blue-color); @include
background-image($gradient); } Mixins: vendor prefixes Bourbon.io http:/ /bourbon.io/docs/#linear-gradient-function

45.

@mixin user-select($arg: none) { -webkit-user-select: $arg; -moz-user-select: $arg; -ms-user-select: $arg;
user-select: $arg; } .editor { @include user-select(none); } Mixins: vendor prefixes CSS user-select: none http:/ /caniuse.com/#search=user-select

46.

.slider p { margin-bottom: 1em; } .very-easy-to-add-rules-between { color: white;
} .slider a { font-weight: bold; } .slider a:hover { background: $color-secondary; } Ops, um intruso aqui! ?!

47.

.slider { } .slider p { margin-bottom: 1em; } .slider
a { font-weight: bold; } .slider a:hover { background: $color-secondary; } Seletor vazio :( ?!

48.

.slider { p { margin-bottom: 1em; } a { font-weight:
bold; &:hover { background: $color-secondary; } } } Nested rules Mais fácil de ler e modularizar

49.

Não reescreva a árvore de elementos do HTML no CSS

50.

CSS Explain http:/ /josh.github.io/css-explain html { body { background: black;
section { padding: 20px; p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; } } } } } } Repara no resultado: html body section p a:hover

51.

None

52.

.address { width: 200em; height: 300em; background: #666; color: white;
} // ... .profile { width: 200em; height: 300em; background: #666; color: white; font-size: 20em; } Código repetido ?!

53.

.address { width: $box-width; height: $box-height; background: $box-color; color: white;
} // ... .profile { @extend .address; font-size: 20em; } Extend .address, .profile { width: 200em; height: 300em; background: #666; color: white; } // ... .profile { font-size: 20em; } É estranho que o proﬁle estenda o addresss

54.

%box { width: $box-width; height: $box-height; background: $box-color; color: white;
} .address { @extend %box; } // ... .profile { @extend %box; font-size: 20em; } Placeholders Este primeiro bloco é apenas uma abstração

55.

.profile { position: relative; width: 100px; background: red; } .profile:before
{ content: ""; position: absolute; width: 0; height: 0; border: 7px solid transparent; left: 50%; margin-left: -7px; top: -13px; border-bottom: 7px red solid; } Eu não tenho ideia doque isto representa ?!

56.

%arrow-top { position: relative; &:before { content: ""; position: absolute;
width: 0; height: 0; border: 7px solid transparent; left: 50%; margin-left: -7px; top: -13px; border-bottom: 7px red solid; } } .profile { width: 100px; background: red; @extend %arrow-top; } Helpers A cor da nossa seta está estática

57.

@mixin arrow-top-color($color) { &:before { border-bottom-color: $color; } } .profile
{ width: 100px; background: blue; @extend %arrow-top; @include arrow-top-color(blue); } Helpers Tudo o que recebe argumentos é um mixin The Extend Concept http:/ /css-tricks.com/the-extend-concept

58.

None

59.

None

60.

None

61.

$distance: (100% - $size) / 2; &:#{$type} { content :
''; position: absolute; z-index: 1; @if $mode == horizontal { left: $distance; right: $distance; height: $thickness; } @else { top: $distance; bottom: $distance; width: $thickness; } } } @mixin line-gradient($pos, $opacity) { @include radial-gradient($pos, rgba(black, $opacity) } @mixin left-line($size, $opacity: .15, $thickness: 10p @include line(vertical, before, $size, $thickness); &:before { left: 0; @include line-gradient(left center, $opacity); } } @mixin bottom-line($size, $opacity: .15, $thickness: 1 @include line(horizontal, after, $size, $thickness); &:after { bottom: 0; @include line-gradient(center bottom, $opacity); } } @mixin top-line($size, $opacity: .15, $thickness: 10px @include line(horizontal, before, $size, $thickness) &:before { top: 0; @include line-gradient(center top, $opacity); } } @mixin inverse-bottom-line($size, $opacity: .15, $thic @include line(horizontal, after, $size, $thickness); &:after { bottom: -$thickness; @include line-gradient(center top, $opacity); } } @mixin hide-bottom-line { &:after { display: none; Helpers Line helpers https:/ /gist.github.com/jcemer/7130218 .section-title { font-size: rem(28px); color: $blue; @include inverse-bottom-line(80%); } .collaborate-item:last-child { @include left-line(90%); padding-left: 10%; } .address-map { @include top-line(100%, .25); @include bottom-line(100%, .25); }

62.

None

63.

Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS
Resultam em CSS Nova camada que precisa ser trans-compilada

64.

@base: #f938ab; .box-shadow(@style, @c) when (iscolor( box-shadow: @style @c; -webkit-box-shadow:
@style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @a } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); } Padrão do Twitter Bootstrap Não possui placeholders Repetições bastante estranhas e engessadas

65.

border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments body font: 12px
Helvetica, Arial, sans-se background: linear-gradient(top, whi black) a.button border-radius: 5px @keyframes foo { from { color: black } to { color: white } } button { color: rgba(red, .5) border-radius: bottom 10px; } Mixins transparentes Mixins com Nib (vendor preﬁxor) Sintaxe bastante livre Muita liberdade causa confusão

66.

Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes
que não podem se misturar $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } @mixin table-base() { th { text-align: center; font-weight: bold; } td, th { padding: 2px; } } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; } Sintaxe SCSS

67.

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%)
.border padding: $margin / 2 margin: $margin / 2 border-color: $blue @mixin table-base th text-align: center font-weight: bold td, th padding: 2px @mixin left($dist) float: left margin-left: $dist #data @include left(10px) @include table-base Sintaxe SASS Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar

68.

<3 <3 <3

69.

Libsass: biblioteca escrita em C/C++ Módulo node-sass já utiliza esta
biblioteca e compila nativamente seu arquivo

70.

Mixins e placeholders são muito úteis para deﬁnir grids Grid
semântico

71.

Grid semântico <article class="tool"> <h1 class="tool-title"> Bourbon Neat </h1> <div
class="tool-content"> <p> Neat é um framework de grid semântico. </p> <p> Sass e Bourbon são seus requisitos. </p> </div> </article> .tool { @include outer-container; } http:/ /neat.bourbon.io .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }

72.

Organizando o CSS // Libraries @import "compass"; @import "settings"; @import
"helper"; // Core @import "core/normalize"; @import "core/layout"; // Shared @import "shared/header"; @import "shared/footer"; variáveis mixins e placeholders estilizar <body>, <p>, <a> elementos comuns

73.

Organizando o CSS // ... continuação // Modules @import "modules/grade";
@import "modules/map"; // Pages @import "pages/home"; @import "pages/about"; modularização! regras muito especíﬁcas que são guiadas por uma classe no <body>

74.

E o que faço com a disposição dos elementos do
meu layout?

75.

CSS Layout

76.

Box model Deﬁne tamanhos, margens, paddings... Posiciona elementos em relação
a outros ou ﬁxa eles na viewport

77.

Box model Ordena os elementos em direção vertical (block) ou
horizontal (inline)

78.

horizontal (inline)

79.

horizontal (inline)

80.

Flexbox model E que tal um novo modelo?

81.

Flexbox: flex grown e shrink grown 0 0 1

82.

Flexbox: flex grown e shrink grown 0 0 1

83.

Flexbox: flex grown e shrink shrink 1 1 0 0
0 1 grown

84.

Flexbox: flex grown e shrink shrink 1 1 0 0
0 1 grown

85.

Flexbox: align itens ﬂex-start ﬂex-end center stretch

86.

Flexbox: justify content ﬂex-start ﬂex-end center space-between

87.

Flexbox: flow e order Holy Grail Layout example https:/ /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
Flexible_boxes

88.

Flexbox: flow e order Holy Grail Layout example https:/ /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
Flexible_boxes

89.

Flexbox model Flexbox é ideal para componentes W3C Candidate Recommendation
Compatível com Chrome 29+ e IE 11 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); A Complete Guide to Flexbox http:/ /css-tricks.com/snippets/ css/a-guide-to-flexbox/

90.

Grid model Ideal para deﬁnir disposição dos componentes Especiﬁcação compatível
apenas com IE 10+

91.

None

92.

Boilerplates conclusão Boas práticas são sempre bem vindas Nunca esqueça
do reset.css ou normalize.css

93.

Frameworks de CSS conclusão Use apenas os mixins e funções
para pré-processadores de CSS Aproveite a vontade código JavaScript não atrelado a classes HTML <article class="tool"> <h1 class="tool-title">[...]</h <div class="tool-content">[...] </article> // Mixins em LESS do Twitter Boot .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }

94.

Pré processadores conclusão Deixe de bobagem e turbine seu workﬂow
Preﬁra o pré-processador que sua equipe se sente mais a vontade

95.

CSS Layout conclusão Box model ainda é o caminho, aprenda
ao máximo! Use ﬂexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especiﬁcação não concluída Learn CSS Layout http:/ /learnlayout.com

96.

Obrigado! @jcemer

Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas [revisada]

Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas [revisada]

Want more?

Transcript