Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jean Carlo Emer
August 30, 2013
1.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.

Jean Carlo Emer

August 30, 2013
Tweet

Transcript

  1. Mas... Se você acha que pode ir além no seu

    fluxo de desenvolvimento, esta palestra é para você!
  2. 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
  3. 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
  4. Página de erro 404 UTF-8 para CSS e JS Entrega

    de arquivos compactados http://gzipwtf.com Define expiração dos arquivos Apache
  5. /*! 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
  6. /** * 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
  7. 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
  8. Aparência inicial Diversas APIs Suporte offline Firefox OS Boilerplate App

    Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App
  9. 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
  10. <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>
  11. <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
  12. 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
  13. 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; } } }
  14. 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; } } }
  15. 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
  16. @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
  17. 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
  18. $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
  19. $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
  20. 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
  21. 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"
  22. 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); }
  23. .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); }
  24. .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); }
  25. 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
  26. 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
  27. 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); }
  28. 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
  29. 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/
  30. Grid Ideal para layouts completos Promissor para definir disposição dos

    componentes Especificação da Microsoft compatível apenas com IE 10+
  31. 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
  32. Modularização A buzzword da vez no universo front-end é modularização

    Media queries são globais, com base na viewport
  33. 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