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!

Transcript

1. close to
   the edge
   

   View Slide

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

   View Slide

3. ferramentas
   metodologias
   técnicas
   ∞
   

   View Slide

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

   View Slide

5. templates
   

   View Slide

6. HTML5 Boilerplate
   HTML5 Reset
   Sophisto Boilerplate
   

   View Slide

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

   View Slide

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

   View Slide

9. html5 boilerplate
   
   content="width=1024">
   viewport para site não
   responsivo
   

   View Slide

10. html5 boilerplate
    inclui Modernizr com
    todas as detecções
    ou o Modernizr
    customizado
    incluíndo html5shiv
    <br/>
    
    

    View Slide

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
    

    View Slide

12. X
    reset normalize
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. frameworks
    

    View Slide

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

    View Slide

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
    

    View Slide

18. 
    
    Este é um exemplo
    bem interessante
    daquilo que não devemos fazer.
    
    Isto é consenso?
    
    

    View Slide

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
    

    View Slide

20. 
    
    Este é um exemplo
    bem interessante
    daquilo que não devemos fazer.
    
    Isto é consenso?
    
    

    View Slide

21. 
    
    Ótimo, muito bom!
    
    E o quanto isto é diferente
    daquilo?
    
    
    
    twitter bootstrap 2.3
    

    View Slide

22. css on
    steroids
    

    View Slide

23. Pré-processadores
    Otimizadores de CSS
    

    View Slide

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
    

    View Slide

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;
    }
    }
    }
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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"
    

    View Slide

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

    View Slide

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
    

    View Slide

34. View Slide

35. grid semântico
    
    
    Bourbon Neat
    
    
    
    Neat é um framework de
    grid semântico.
    
    
    Sass e Bourbon são
    seus requisitos.
    
    
    
    .tool {
    @include outer-container;
    }
    .tool-title {
    @include span-columns(3);
    }
    .tool-content {
    @include span-columns(9);
    }
    Exemplo usando o
    framework Bourbon Neat
    

    View Slide

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);
    }
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

40. npm install csso -g
    csso test.css
    csso
    Flour já possui suporte
    Grunt através de
    https://github.com/t32k/grunt-csso
    

    View Slide

41. considerações
    

    View Slide

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
    
    [...]
    [...]
    
    // Mixins em LESS do Twitter Bootstrap
    .tool {
    .makeRow();
    }
    .tool-title {
    .makeColumn(3);
    }
    .tool-content {
    .makeColumn(9);
    }
    

    View Slide

43. frameworks de grids
    Gumby 2, isto é
    dar suporte?
    Agora sim! Valeu,
    Bourbon Neat
    para layouts usando
    porcentagens, tenho
    real suporte a nested
    grids?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. tabelas responsivas
    display: none;
    display: table-cell;
    display: block;
    .schedule-slot:before {
    content: attr(data-grade);
    display: block;
    }
    

    View Slide

47. além do
    penhasco
    

    View Slide

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

    View Slide

49. não mais ies
    brincadeira, salve a
    diversidade!
    a internet é de todos
    ie9+
    

    View Slide

50. a buzzword da vez no
    universo front-end é
    modularizar
    media queries são globais,
    com base na viewport
    media queries?!
    

    View Slide

51. View Slide

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

    View Slide

53. View Slide

54. Meu produto
    módulos
    

    View Slide

55. Meu produto
    layout responsivo
    

    View Slide

56. Meu
    produto
    layout responsivo
    

    View Slide

57. Meu produto
    layout responsivo
    

    View Slide

58. View Slide

59. make it so, internetz
    element level media
    queries
    imagens responsivas
    pra ontem!
    event emitter nativo
    no javascript
    vertical align sem
    frescura
    

    View Slide

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
    

    View Slide