Close to the Edge / Front in Rio 2013

C5df370a883b65279af5a7ca94a5eed7?s=47 Jean Carlo Emer
June 15, 2013
Technology
9
420

Close to the Edge / Front in Rio 2013

Os front-ends estão rodeados por uma série de ferramentas e técnicas. Além da necessidade de conhecê-las a fundo, é preciso fazer as escolhas certas para cada projeto.

Esta palestra aborda ferramentas, grids, pré-processadores e sobretudo o estado da arte do HTML de uma maneira bem crítica, como você nunca viu!

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

June 15, 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

Other Decks in Technology

See All in Technology
55c9804c185f493816433678393cbe92?s=48 sumihiro3
0
180
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
9
1.1k
404b6b310d5fc7680a62ef09a463a794?s=48 yutakakinjyo
0
440
0e742980c48d689f31700b208f22fd5a?s=48 k_koheyi
3
400
2cf373725ded741824c50fd571eda6e1?s=48 udzura
9
3.4k
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
420
74948d1118cd84528f7861a3069dd8d9?s=48 qryuu
8
2.4k
F866c47f0761aac633225b6919538e1c?s=48 matsuji
8
420
229b1596ce57cd0935a2bacd410d87a0?s=48 aaaddress1
1
320
Cb4d62dd7c1d325863696c45e9b6484d?s=48 yaminoma
1
150
9a22d09f92d50fa3d2a16766d0ba52f8?s=48 fabpot
3
1.3k
467edb2e221a47426f19405f53aa51ca?s=48 nakaly
5
2.6k

Featured

See All Featured
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
190
8.2k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
2
240
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
164
18k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
330
29k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
100
5.7k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
10
3.8k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
12k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k

Transcript

  1. close to the edge

  2. jean carlo emer @jcemer artesão da internet codeminer42

  3. ferramentas metodologias técnicas ∞

  4. atenção bastante conteúdo e todo ele recheado com minha opinião

    =)

  5. templates

  6. HTML5 Boilerplate HTML5 Reset Sophisto Boilerplate

  7. html5 boilerplate html com scripts no rodapé favicon e apple

    icons

  8. html5 boilerplate define viewport com largura igual a device-width

  9. html5 boilerplate <head> <meta name="viewport" content="width=1024"> viewport para site não

    responsivo

  10. html5 boilerplate inclui Modernizr com todas as detecções ou o

    Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head>

  11. página de erro 404 utf-8 para css e js entrega

    de arquivos compactados http://gzipwtf.com define expiração dos arquivos html5 boilerplate ~ apache

  12. X reset normalize

  13. /** * 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 tornam-se iguais

  14. /*! 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 preserva a aparência padrão ao invés de removê-la corrige alguns bugs comuns

  15. frameworks

  16. Foundation Twitter Bootstrap Gumby 2 960 Grid System Skeleton Pure

    Bourbon Neat

  17. 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 é só aparecer uma div ou td que toda a herança do tamanho da fonte é perdida

  18. <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>

  19. 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

  20. <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>

  21. <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

  22. css on steroids

  23. Pré-processadores Otimizadores de CSS

  24. pré-processadores linguagem para adicionar açucar sintáticos não nativos ao css

    retorna algo que os browsers possam entender nova camada que precisa ser trans- compilada para css

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

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

  26. pré-processadores // Code body { background: lighten($color-secondary, 10); max-width: $site-width;

    margin: 0 auto; } .box { @include border-radius(5px); p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } } // CSS Code body { background: white; max-width: 960px; margin: 0 auto; } .box { -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; }

  27. @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%); } less padrão do Twitter Bootstrap repetições bastante estranhas e engessadas

  28. 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; } stylus mixins transparentes mixins e componentes com Nib muita liberdade causa confusão projeto parece abandonado

  29. styl Work-in-progress CSS preprocessor. Spiritual successor of Stylus. Built on

    top of Rework.

  30. $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 sass projeto maduro bibliotecas poderosas como Compass e Bourbon duas sintaxes que não podem se misturar

  31. organizando... @import "nib" @import "variables" @import "mixins" // Core @import

    "core/normalize" @import "core/typography" @import "core/structure" // Shared @import "shared/header" @import "shared/board" @import "shared/toolbar" @import "shared/footer" // Content @import "component/carousel" @import "component/grade" @import "component/map"

  32. atenção não reescreva a árvore de elementos do html no

    css

  33. html { body { background: black; section { padding: 20px;

    p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; } } } } } } http://josh.github.io/css-explain html body section p a:hover
  34. None

  35. 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; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); } Exemplo usando o framework Bourbon Neat

  36. .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 { @include outer-container; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }

  37. ops?! agora temos muitas propriedades de css repetidas

  38. 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} http://bem.info/tools/csso

  39. 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 } http://bem.info/tools/csso

  40. npm install csso -g csso test.css csso Flour já possui

    suporte Grunt através de https://github.com/t32k/grunt-csso

  41. considerações

  42. frameworks use apenas os mixins e funções para pré-processadores de

    css aproveite a vontade código javascript não atrelado a classes <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); }

  43. frameworks de grids Gumby 2, isto é dar suporte? Agora

    sim! Valeu, Bourbon Neat para layouts usando porcentagens, tenho real suporte a nested grids?

  44. css on steroids deixe de bobagem e turbine seu workflow

    prefira o pré-processador que sua equipe se sente mais a vontade não custa nada ativar o csso, mas teste bem antes de aplicar em projetos em andamento

  45. mobile first layout mobile é mais simples no fim, códigos

    particulares de maiores resoluções contidos em media queries específicas isto não significa necessariamente fazer a versão mobile antes

  46. tabelas responsivas display: none; display: table-cell; display: block; .schedule-slot:before {

    content: attr(data-grade); display: block; }

  47. além do penhasco

  48. cuidado vamos falar do universo dos sonhos daqui para frente

    =P

  49. não mais ies brincadeira, salve a diversidade! a internet é

    de todos ie9+

  50. a buzzword da vez no universo front-end é modularizar media

    queries são globais, com base na viewport media queries?!
  51. None

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

  53. None

  54. Meu produto módulos

  55. Meu produto layout responsivo

  56. Meu produto layout responsivo

  57. Meu produto layout responsivo

  58. None

  59. make it so, internetz element level media queries imagens responsivas

    pra ontem! event emitter nativo no javascript vertical align sem frescura

  60. you’re the operator with your pocket calculator obrigado! @jcemer vídeos:

    http://dakotalapse.com fonte dos títulos: Falta Alguma Coisa - AACD Unique Types