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

C5df370a883b65279af5a7ca94a5eed7?s=47 Jean Carlo Emer
August 30, 2013
1k

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

Palestra apresentada na QConSP 2013.

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

August 30, 2013
Tweet

Transcript

  1. Desvendando os limites do universo front-end: um panorama de ferramentas

    e técnicas
  2. Buenas?!

  3. Jean Carlo Emer artesão da internet github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer

  4. None
  5. None
  6. Atenção! O importante é que seu produto funcione e seja

    fácil de manter
  7. Mas... Se você acha que pode ir além no seu

    fluxo de desenvolvimento, esta palestra é para você!
  8. Conte-me mais! Quero saber como começo meu projeto!

  9. Boilerplates

  10. Base sólida e reusável para seu projeto entalhada com boas

    práticas
  11. 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
  12. HTML Define viewport para projetos responsivos

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

  14. Inclui Modernizr com todas as detecções apenas html5shiv (IE8,7) ou

    o Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head> HTML
  15. Página de erro 404 UTF-8 para CSS e JS Entrega

    de arquivos compactados http://gzipwtf.com Define expiração dos arquivos Apache
  16. Na versão 2.0.0 mudou de Reset.css para Normalize.css CSS

  17. /*! normalize.css v2.1.2 | MIT License | git.io /** *

    Correct `block` display not defined in IE 8/ */ article, aside, details, figcaption, figure, fo header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined i */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `aud * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ Normalize Institui uma aparência padrão para cada elemento Corrige alguns bugs comuns normalize.css http:/ /necolas.github.io/normalize.css
  18. /** * 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 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
  19. X reset normalize

  20. Sophisto Boilerplate Browsers modernos (IE9+) Stylus: pré processador de CSS

    Rye.js: biblioteca JS leve substituta da jQuery Build tool e script de deploy Sophisto Boilerplate https:/ /github.com/grifo/sophisto-boilerplate
  21. None
  22. Aparência inicial Diversas APIs Suporte offline Firefox OS Boilerplate App

    Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App
  23. Hmmm... Mas ainda não abordamos aparência e como construir componentes!

  24. Frameworks de CSS

  25. Guia de estilo com componentes reusáveis e configuráveis para seu

    projeto
  26. Cuidado! Não existe uma maneira de testar folhas de estilo

  27. 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
  28. Pure CSS Seu formulário deve sempre terminar com um radio

  29. Cuidado! Usar frameworks engessa a marcação a sua maneira

  30. <div class="border4px m10 clearfix"> <p> <i class="red">Este é um exemplo</span>

    <span class="left">bem interessante</span> <span class="green">daquilo que não devemos fazer.</span> </p> <p class="right darktext">Isto é consenso?</p> </div>
  31. <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
  32. 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
  33. Legal E agora como eu reuso e organizo meu código

    CSS?
  34. CSS on Steroids

  35. Pré-processadores // Variables $site-width: 960px; $color-primary: red; $color-secondary: #EEE; //

    Code .container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 auto; @include border-radius(5px); } // Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } }
  36. Pré-processadores // CSS Code .container { background: white; max-width: 960px;

    margin: 0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .box p { margin-bottom: 1em; } .box a { font-weight: bold; } .box a:hover { background: #eeeeee; } // Code .container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 auto; @include border-radius(5px); } .box { p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } }
  37. Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS

    Resultam em CSS nos padrões das especificações Nova camada que precisa ser trans- compilada
  38. @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c;

    -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumbe .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .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 Repetições bastante estranhas e engessadas Mantido por desenvolvedores desconhecidos
  39. border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments body font: 12px

    Helvetica, Arial, sans-serif background: linear-gradient(top, white, blac a.button border-radius: 5px @keyframes foo { from { color: black } to { color: white } } button { color: rgba(red, .5) border-radius: bottom 10px; } .nav { fixed: bottom 10px right 5px; } Mixins transparentes Mixins e componentes com Nib Sintaxe bastante livre Muita liberdade causa confusão
  40. $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 Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar Sintaxe SASS
  41. $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; } Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar Sintaxe SCSS
  42. <3 <3 <3

  43. Atenção! Não reescreva a árvore de elementos do HTML no

    CSS
  44. 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; } } } } } } html body section p a:hover
  45. Organizando o CSS // Libraries @import "nib" @import "settings" @import

    "helper" // Core @import "core/normalize" @import "core/structure" // Shared @import "shared/header" @import "shared/footer" // Modules @import "modules/grade" @import "modules/map" // Pages @import "pages/home" @import "pages/about"
  46. None
  47. Mixins e helpers são muito úteis para definir grids Grid

    semântico
  48. 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); }
  49. .header { @include outer-container; } .brand { @include span-columns(3); }

    .menu { @include span-columns(9); } Grid semântico .tool { @include outer-container; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }
  50. .tool { @include outer-container; } .tool-title { @include span-columns(3); }

    .tool-content { @include span-columns(9); } .header { @include outer-container; } .brand { @include span-columns(3); } .menu { @include span-columns(9); } Grid semântico .brand { display: block; float: left; margin-right: 2.35765%; width: 23.23176%; } .brand:last-child { margin-right: 0; } .tool-title { display: block; float: left; margin-right: 2.35765%; width: 23.23176%; } .tool-title:last-child { margin-right: 0; } .tool-title { @include span-columns(3); } .brand { @include span-columns(3); }
  51. Ops?! Agora temos muitas regras de CSS repetidas

  52. CSSO body { padding: 0; color: red; } .element {

    color: blue; color: red; } .element { padding: 0; } input { border: none; } button { border: none; } .container, .container { color: red; } body,.element{padding:0;color:red} input,button{border:none}.container{ color:red} CSSO http:/ /bem.info/tools/csso
  53. CSSO body { padding: 0; color: red; } .element {

    color: blue; color: red; } .element { padding: 0; } input { border: none; } button { border: none; } .container, .container { color: red; } body, .element { padding:0; color:red } input, button { border:none } .container { color:red } CSSO http:/ /bem.info/tools/csso
  54. 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">[...]</h1> <div class="tool-content">[...]</div> </article> // Mixins em LESS do Twitter Bootstrap .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }
  55. CSS on steroids conclusão Deixe de bobagem e turbine seu

    workflow Prefira o pré-processador que sua equipe se sente mais a vontade Não custa muito ativar o CSSO, mas teste bem antes de levar para produção
  56. Entendi... E o que faço com a disposição dos elementos

    do meu layout?
  57. CSS Layout

  58. Box model Define tamanhos, margens, paddings... Posiciona elementos em relação

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

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

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

    horizontal (inline)
  62. Flexbox model Não usa floats Agnóstico de direção Meios de

    alinhar facilmente elementos
  63. Flexbox: flex grown e shrink grown 0 0 1

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

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

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

    0 1 grown
  67. Flexbox: align itens flex-start flex-end center stretch

  68. Flexbox: justify content flex-start flex-end center space-between

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

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

    Flexible_boxes
  71. Flexbox Flexbox é ideal para componentes W3C Candidate Recommendation Compatível

    com Chrome 29+ e IE 11 @mixin flexbox() { 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/
  72. Grid Ideal para layouts completos Promissor para definir disposição dos

    componentes Especificação da Microsoft compatível apenas com IE 10+
  73. 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 estável Learn CSS Layout http:/ /learnlayout.com
  74. Legal! E as media queries, podemos falar um pouco disto?

  75. Media Queries

  76. História Primeira especificação é de 2002 iPhone foi lançado em

    2007 W3C recommended standard em 2012
  77. Layout responsivos Termo usado por Ethan Marcotte em artigo Responsive

    Web Design em A List Apart
  78. Acessibilidade Media queries também ajudam na acessibilidade http:/ /sergiolopes.org/media-queries-zoom

  79. Modularização A buzzword da vez no universo front-end é modularização

    Media queries são globais, com base na viewport
  80. Cuidado! Vamos falar do universo dos sonhos desde aqui para

    frente
  81. http://ianstormtaylor.com/media-queries-are-a-hack

  82. None
  83. Meu produto Módulos

  84. Meu produto Layout responsivo

  85. Meu produto Layout responsivo

  86. Meu produto Layout responsivo

  87. None
  88. Make it so, internetz Element level media queries Acelerar a

    implementação de flexbox e grid Imagens responsivas pra ontem! Pensar em soluções, testar e prototipar
  89. Obrigado! @jcemer