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

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

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

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

October 26, 2013
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

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

    View Slide

  2. jcemer.com
    github.com/jcemer
    twitter.com/jcemer
    speakerdeck.com/jcemer

    View Slide

  3. View Slide

  4. O importante é que seu
    produto
    funcione e
    entregue valor

    View Slide

  5. ...mas se você quer que
    ele seja prático de
    desenvolver

    View Slide

  6. ...tenha uma
    manutenção
    descomplicada

    View Slide

  7. ...e sobretudo, ir além
    no seu fluxo de
    trabalho

    View Slide

  8. esta palestra é
    especialmente
    destinada a você!

    View Slide

  9. A Serious Man
    http:/
    /www.imdb.com/title/tt1019452

    View Slide

  10. Quero saber como
    começo meu
    projeto
    ?

    View Slide

  11. Boilerplates

    View Slide

  12. Base sólida e
    reusável para seu
    projeto entalhada com
    boas práticas

    View Slide

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

    View Slide

  14. HTML
    Define viewport
    para projetos
    responsivos

    View Slide


  15. content="width=1024">
    Viewport para site não
    responsivo
    HTML

    View Slide

  16. Inclui Modernizr
    com todas as
    detecções
    apenas html5shiv
    (IE8,7) ou o Modernizr
    customizado
    que inclui o html5shiv
    <br/>

    HTML

    View Slide

  17. Página de erro 404
    UTF-8 para CSS e JS
    Entrega de arquivos
    compactados
    Define expiração dos
    arquivos para estratégia
    de cache
    Apache

    View Slide

  18. Na versão 2.0.0 mudou
    de Reset.css para
    Normalize.css
    CSS

    View Slide

  19. /*! normalize.css v2.1.2 | MIT License | gi
    /**
    * Correct `block` display not defined in I
    */
    article, aside, details, figcaption, figure
    header, hgroup, main, nav, section, summary
    display: block;
    }
    /**
    * Correct `inline-block` display not defin
    */
    audio, canvas, video {
    display: inline-block;
    }
    /**
    * Prevent modern browsers from displaying
    * Remove excess height in iOS 5 devices.
    */
    audio:not([controls]) {
    display: none;
    height: 0;
    }
    /**
    * Address styling not present in IE 8/9.
    */
    Normalize.css
    Institui uma
    aparência padrão
    para cada elemento
    Corrige alguns
    bugs comuns
    normalize.css
    http:/
    /necolas.github.io/normalize.css

    View Slide

  20. /**
    * 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.css
    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

    View Slide

  21. X
    reset normalize

    View Slide

  22. Sophisto Boilerplate
    Browsers modernos (IE9+)
    Stylus: pré processador de
    CSS
    Rye.js: biblioteca JS leve
    substituta da jQuery
    Build task e script de
    deploy via Git
    Sophisto Boilerplate
    https:/
    /github.com/grifo/sophisto-boilerplate

    View Slide

  23. View Slide

  24. Aparência inicial
    Diversas APIs
    Suporte offline
    Firefox OS Boilerplate App
    Firefox OS Boilerplate App
    http:/
    /github.com/robnyman/Firefox-OS-Boilerplate-App

    View Slide

  25. Quero saber de
    aparência e como
    definir componentes
    ?

    View Slide

  26. Frameworks
    de CSS

    View Slide

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

    View Slide

  28. Cuidado,
    não existe uma maneira
    de testar CSS

    View Slide

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

    View Slide

  30. Pure CSS
    Seu formulário deve
    sempre terminar com
    um radio

    View Slide

  31. Usar frameworks
    engessa o HTML
    a sua maneira

    View Slide



  32. Ótimo, muito bom!

    E o quanto isto é diferente
    daquilo?



    Twitter Bootstrap 2.3
    Marcação usando
    classes nomeadas
    pelo framework

    View Slide

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

  34. CSS to the heaven: classes
    .button
    .small-button
    .secondary-button
    .remove-button
    .margin10px
    .row
    .span4
    .post
    .dark-slider
    .left
    .active
    .video-title
    .btn, .ctnr, .act
    estado tá
    valendo :)
    diagramação
    é aparência
    sem
    abreviaturas, pf

    View Slide

  35. E agora, como eu
    reuso e organizo
    meu código?
    ?

    View Slide

  36. CSS on
    Steroids

    View Slide

  37. body {
    width: 960px;
    }
    .wrapper {
    width: 940px;
    }
    .speaker-list {
    width: 480px;
    }
    Largura do site
    Largura do site
    menos respiro
    Meia largura ?!

    View Slide

  38. $site-width: 960px;
    $site-gap: 20px;
    body {
    width: $site-width;
    }
    .wrapper {
    width: $site-width - $site-gap;
    }
    .speaker-list {
    width: $site-width / 2;
    }
    Variáveis
    Qualquer
    mudança reflete
    em todo projeto

    View Slide

  39. body {
    color: #3F4955;
    }
    .about {
    background: #3F4955;
    }
    .contact a:hover {
    color: #3F4956;
    }
    .speaker-list {
    border: 1px solid #3F4955;
    }
    PSD estava com
    uma pequena
    variação :P
    Que diabo de cor
    é essa?
    ?!

    View Slide

  40. $grey-color: #3F4955;
    $main-color: $grey-color;
    body {
    color: $main-color;
    }
    .about {
    background: $main-color;
    }
    .contact a:hover {
    color: $main-color;
    }
    .speaker-list {
    border: 1px solid $main-color;
    }
    Variáveis
    Muito mais
    organizado e fácil
    de entender

    View Slide

  41. body {
    color: #3F4955;
    }
    .slider {
    color: #293038;
    }
    .carousel {
    background: rgba(63, 73, 85, 0.8);
    }
    Você não faz
    ideia, mas sou o
    cinza escuro
    E eu sou cinza com
    transparência
    ?!

    View Slide

  42. $grey-color: #3F4955;
    $grey-dark-color: darken($grey-color, 10);
    $transparent-grey-color: rgba($grey-color, .8);
    body {
    color: $grey-color;
    }
    .slider {
    color: $grey-dark-color;
    }
    .carousel {
    background: $transparent-grey-color;
    }
    Funções
    transforma em rgb
    e adiciona o alpha

    View Slide

  43. .slider {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%); /*
    background: -webkit-gradient(linear, left top, right top, color-stop
    background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Op
    background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* I
    background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#
    }
    Ultimate CSS Gradient Generator
    http:/
    /www.colorzilla.com/gradient-editor
    Manutenção bem
    fácil #sqn
    ?!

    View Slide

  44. $blue-color: #1E5799;
    $light-blue-color: #7DB9E8;
    .slider {
    $gradient: linear-gradient($blue-color, $light-blue-color);
    @include background-image($gradient);
    }
    Mixins: vendor prefixes
    Bourbon.io
    http:/
    /bourbon.io/docs/#linear-gradient-function

    View Slide

  45. @mixin user-select($arg: none) {
    -webkit-user-select: $arg;
    -moz-user-select: $arg;
    -ms-user-select: $arg;
    user-select: $arg;
    }
    .editor {
    @include user-select(none);
    }
    Mixins: vendor prefixes
    CSS user-select: none
    http:/
    /caniuse.com/#search=user-select

    View Slide

  46. .slider p {
    margin-bottom: 1em;
    }
    .very-easy-to-add-rules-between {
    color: white;
    }
    .slider a {
    font-weight: bold;
    }
    .slider a:hover {
    background: $color-secondary;
    }
    Ops, um
    intruso aqui!
    ?!

    View Slide

  47. .slider { }
    .slider p {
    margin-bottom: 1em;
    }
    .slider a {
    font-weight: bold;
    }
    .slider a:hover {
    background: $color-secondary;
    }
    Seletor vazio :(
    ?!

    View Slide

  48. .slider {
    p {
    margin-bottom: 1em;
    }
    a {
    font-weight: bold;
    &:hover {
    background: $color-secondary;
    }
    }
    }
    Nested rules
    Mais fácil de ler e
    modularizar

    View Slide

  49. Não reescreva a
    árvore de elementos do
    HTML no CSS

    View Slide

  50. 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;
    }
    }
    }
    }
    }
    }
    Repara no resultado:
    html body section p a:hover

    View Slide

  51. View Slide

  52. .address {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    }
    // ...
    .profile {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    font-size: 20em;
    }
    Código repetido
    ?!

    View Slide

  53. .address {
    width: $box-width;
    height: $box-height;
    background: $box-color;
    color: white;
    }
    // ...
    .profile {
    @extend .address;
    font-size: 20em;
    }
    Extend
    .address, .profile {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    }
    // ...
    .profile {
    font-size: 20em;
    }
    É estranho que o
    profile estenda o
    addresss

    View Slide

  54. %box {
    width: $box-width;
    height: $box-height;
    background: $box-color;
    color: white;
    }
    .address {
    @extend %box;
    }
    // ...
    .profile {
    @extend %box;
    font-size: 20em;
    }
    Placeholders
    Este primeiro
    bloco é apenas
    uma abstração

    View Slide

  55. .profile {
    position: relative;
    width: 100px;
    background: red;
    }
    .profile:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    left: 50%;
    margin-left: -7px;
    top: -13px;
    border-bottom: 7px red solid;
    }
    Eu não tenho
    ideia doque isto
    representa
    ?!

    View Slide

  56. %arrow-top {
    position: relative;
    &:before {
    content: "";
    position: absolute;
    width: 0; height: 0;
    border: 7px solid transparent;
    left: 50%;
    margin-left: -7px;
    top: -13px;
    border-bottom: 7px red solid;
    }
    }
    .profile {
    width: 100px;
    background: red;
    @extend %arrow-top;
    }
    Helpers
    A cor da nossa
    seta está estática

    View Slide

  57. @mixin arrow-top-color($color) {
    &:before {
    border-bottom-color: $color;
    }
    }
    .profile {
    width: 100px;
    background: blue;
    @extend %arrow-top;
    @include arrow-top-color(blue);
    }
    Helpers
    Tudo o que recebe
    argumentos é
    um mixin
    The Extend Concept
    http:/
    /css-tricks.com/the-extend-concept

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. $distance: (100% - $size) / 2;
    &:#{$type} {
    content : '';
    position: absolute;
    z-index: 1;
    @if $mode == horizontal {
    left: $distance; right: $distance;
    height: $thickness;
    } @else {
    top: $distance; bottom: $distance;
    width: $thickness;
    }
    }
    }
    @mixin line-gradient($pos, $opacity) {
    @include radial-gradient($pos, rgba(black, $opacity)
    }
    @mixin left-line($size, $opacity: .15, $thickness: 10p
    @include line(vertical, before, $size, $thickness);
    &:before {
    left: 0;
    @include line-gradient(left center, $opacity);
    }
    }
    @mixin bottom-line($size, $opacity: .15, $thickness: 1
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: 0;
    @include line-gradient(center bottom, $opacity);
    }
    }
    @mixin top-line($size, $opacity: .15, $thickness: 10px
    @include line(horizontal, before, $size, $thickness)
    &:before {
    top: 0;
    @include line-gradient(center top, $opacity);
    }
    }
    @mixin inverse-bottom-line($size, $opacity: .15, $thic
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: -$thickness;
    @include line-gradient(center top, $opacity);
    }
    }
    @mixin hide-bottom-line {
    &:after {
    display: none;
    Helpers
    Line helpers
    https:/
    /gist.github.com/jcemer/7130218
    .section-title {
    font-size: rem(28px);
    color: $blue;
    @include inverse-bottom-line(80%);
    }
    .collaborate-item:last-child {
    @include left-line(90%);
    padding-left: 10%;
    }
    .address-map {
    @include top-line(100%, .25);
    @include bottom-line(100%, .25);
    }

    View Slide

  62. View Slide

  63. Pré-processadores
    Linguagem para adicionar
    açucar sintático não
    nativos ao CSS
    Resultam em CSS
    Nova camada que precisa
    ser trans-compilada

    View Slide

  64. @base: #f938ab;
    .box-shadow(@style, @c) when (iscolor(
    box-shadow: @style @c;
    -webkit-box-shadow: @style @c;
    -moz-box-shadow: @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when
    (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @a
    }
    .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
    Não possui
    placeholders
    Repetições bastante
    estranhas e
    engessadas

    View Slide

  65. border-radius()
    -webkit-border-radius: arguments
    -moz-border-radius: arguments
    border-radius: arguments
    body
    font: 12px Helvetica, Arial, sans-se
    background: linear-gradient(top, whi
    black)
    a.button
    border-radius: 5px
    @keyframes foo {
    from {
    color: black
    }
    to {
    color: white
    }
    }
    button {
    color: rgba(red, .5)
    border-radius: bottom 10px;
    }
    Mixins
    transparentes
    Mixins com Nib
    (vendor prefixor)
    Sintaxe bastante
    livre
    Muita liberdade
    causa confusão

    View Slide

  66. Projeto maduro
    Bibliotecas
    poderosas como
    Compass e
    Bourbon
    Duas sintaxes que
    não podem se
    misturar
    $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;
    }
    Sintaxe
    SCSS

    View Slide

  67. $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
    Sintaxe
    SASS
    Projeto maduro
    Bibliotecas
    poderosas como
    Compass e
    Bourbon
    Duas sintaxes que
    não podem se
    misturar

    View Slide

  68. <3 <3 <3

    View Slide

  69. Libsass: biblioteca
    escrita em C/C++
    Módulo node-sass já
    utiliza esta biblioteca e
    compila nativamente
    seu arquivo

    View Slide

  70. Mixins e placeholders
    são muito úteis para
    definir grids
    Grid semântico

    View Slide

  71. Grid semântico


    Bourbon Neat



    Neat é um framework
    de grid semântico.


    Sass e Bourbon são
    seus requisitos.



    .tool {
    @include outer-container;
    }
    http:/
    /neat.bourbon.io
    .tool-title {
    @include span-columns(3);
    }
    .tool-content {
    @include span-columns(9);
    }

    View Slide

  72. Organizando o CSS
    // Libraries
    @import "compass";
    @import "settings";
    @import "helper";
    // Core
    @import "core/normalize";
    @import "core/layout";
    // Shared
    @import "shared/header";
    @import "shared/footer";
    variáveis
    mixins e
    placeholders
    estilizar
    , ,
    elementos
    comuns

    View Slide

  73. Organizando o CSS
    // ... continuação
    // Modules
    @import "modules/grade";
    @import "modules/map";
    // Pages
    @import "pages/home";
    @import "pages/about";
    modularização!
    regras muito específicas
    que são guiadas por uma
    classe no

    View Slide

  74. E o que faço com a
    disposição dos
    elementos do meu layout?

    View Slide

  75. CSS Layout

    View Slide

  76. Box model
    Define tamanhos,
    margens, paddings...
    Posiciona elementos
    em relação a outros
    ou fixa eles na
    viewport

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  80. Flexbox model
    E que tal um novo
    modelo?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  85. Flexbox: align itens
    flex-start flex-end
    center stretch

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  89. Flexbox model
    Flexbox é ideal para
    componentes
    W3C Candidate
    Recommendation
    Compatível com
    Chrome 29+ e IE 11
    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/

    View Slide

  90. Grid model
    Ideal para definir
    disposição dos
    componentes
    Especificação compatível
    apenas com IE 10+

    View Slide

  91. View Slide

  92. Boilerplates conclusão
    Boas práticas são sempre
    bem vindas
    Nunca esqueça do reset.css
    ou normalize.css

    View Slide

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

    [...][...]

    // Mixins em LESS do Twitter Boot
    .tool {
    .makeRow();
    }
    .tool-title {
    .makeColumn(3);
    }
    .tool-content {
    .makeColumn(9);
    }

    View Slide

  94. Pré processadores conclusão
    Deixe de bobagem e
    turbine seu workflow
    Prefira o pré-processador
    que sua equipe se sente
    mais a vontade

    View Slide

  95. 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 concluída
    Learn CSS Layout
    http:/
    /learnlayout.com

    View Slide

  96. Obrigado!
    @jcemer

    View Slide