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]

Um panorama de ferramentas e técnicas front-end. Abordando templates, boilerplates, frameworks, processadores e muito mais. A função aqui é elevar seu projeto a altos níveis de abstração para garantir melhor qualidade e agilidade no desenvolvimento.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

October 26, 2013
Tweet

Transcript

  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 fluxo 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 Define 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 Define 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 offline Firefox OS Boilerplate App

    Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App
  25. Quero saber de aparência e como definir componentes ?

  26. Frameworks de CSS

  27. Guia de estilo com componentes reusáveis e configurá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 reflete 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 profile 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 prefixor) 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 definir 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íficas 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 Define tamanhos, margens, paddings... Posiciona elementos em relação

    a outros ou fixa eles na viewport
  77. Box model Ordena os elementos em direção vertical (block) ou

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

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

    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 flex-start flex-end center stretch

  86. Flexbox: justify content flex-start flex-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 definir disposição dos componentes Especificaçã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 workflow

    Prefira 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 flexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especificação não concluída Learn CSS Layout http:/ /learnlayout.com
  96. Obrigado! @jcemer