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

C5df370a883b65279af5a7ca94a5eed7?s=47 Jean Carlo Emer
August 30, 2013
11
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

More Decks by Jean Carlo Emer

See All by Jean Carlo Emer
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
1
110
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
0
73
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
0
200
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
1
130
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
1
190
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
1
66
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
3
510
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
8
480
C5df370a883b65279af5a7ca94a5eed7?s=48 jcemer
0
430

Featured

See All Featured
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.5k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
1k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.3k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
298
30k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
308
21k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.3k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
621
40k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.2k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
770k

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