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

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

O importante é que seu produto funcione e entregue valor

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

...tenha uma manutenção descomplicada

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

esta palestra é especialmente destinada a você!

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

Quero saber como começo meu projeto ?

Boilerplates

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

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

HTML Deﬁne viewport para projetos responsivos

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

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

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

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

/*! 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

/** * 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

X reset normalize

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

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

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

Frameworks de CSS

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

Cuidado, não existe uma maneira de testar CSS

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

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

Usar frameworks engessa o HTML a sua maneira

<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

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

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

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

CSS on Steroids

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

$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

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? ?!

$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

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 ?!

$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

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

$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

@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

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

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

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

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

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

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

.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

%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

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

%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

@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

$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); }

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

@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

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

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

$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

<3 <3 <3

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

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

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); }

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

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>

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

CSS Layout

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

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

Flexbox model E que tal um novo modelo?

Flexbox: flex grown e shrink grown 0 0 1

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

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

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

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

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/

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

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

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); }

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

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

Obrigado! @jcemer

Desvendando os limites do universo front-end: u...

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

More Decks by Jean Carlo Emer

Other Decks in Technology

Featured

Transcript