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

Front-End: Fun, Not Frustration

Front-End: Fun, Not Frustration

Front-end development should be fun. Here is a random list of 12 things that will help you battle front-end frustration.

Roy Tomeij

April 24, 2014
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

Transcript

  1. Front-End:
    Fun, Not Frustration

    View full-size slide

  2. better box model

    View full-size slide

  3. * {
    box-sizing: content-box;
    }
    !
    .element {
    width: 800px;
    padding: 100px;
    border: 10px;
    }

    View full-size slide

  4. !
    .element
    margin
    border
    padding
    width: 1020px
    width: 800px

    View full-size slide

  5. * {
    box-sizing: border-box;
    }
    !
    .element {
    width: 800px;
    padding: 100px;
    border: 10px;
    }

    View full-size slide

  6. .element
    margin
    border
    padding
    width: 800px

    View full-size slide

  7. great for percentage
    based layouts

    View full-size slide

  8. .element {
    margin: 100px;
    }

    View full-size slide

  9. .element
    100px
    .element

    View full-size slide

  10. .element 200px .element

    View full-size slide

  11. that’s just the way it is

    View full-size slide

  12. .element {
    position: static;
    }

    View full-size slide

  13. .element {
    position: relative;
    }

    View full-size slide

  14. .element {
    position: relative;
    left: 100px;
    }

    View full-size slide

  15. .element {
    position: fixed;
    }

    View full-size slide

  16. positioning is hard

    View full-size slide

  17. inline
    block elements

    View full-size slide

  18. li {
    display: inline-block;
    margin: 0;
    }

    View full-size slide

  19. li li
    ul
    li li

    View full-size slide

  20. ul {
    font-size: 0;
    }
    !
    li {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    }

    View full-size slide

  21. li
    ul
    li li li

    View full-size slide

  22. no more floats to clear

    View full-size slide

  23. vertical
    alignment

    View full-size slide




  24. content goes here



    View full-size slide

  25. table {
    width: 100%;
    height: 100%;
    }
    !
    td {
    vertical-align: middle;
    text-align: center;
    }

    View full-size slide

  26. tables > css

    View full-size slide



  27. content goes here


    View full-size slide

  28. .element {
    display: table;
    width: 100%;
    }
    !
    .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }

    View full-size slide

  29. semantic markup,
    behaving like tables

    View full-size slide

  30. pretty buttons

    View full-size slide


  31. important button

    View full-size slide

  32. pseudo
    elements

    View full-size slide

  33. .element::before {
    content: “string”;
    }
    !
    .element::after {
    content: “\2764”;
    }

    View full-size slide

  34. .element:before {
    content: “string”;
    }
    !
    .element:after {
    content: “\2764”;
    }

    View full-size slide

  35. a[href^=“https”]:after {
    content: “ (uses SSL)”;
    }

    View full-size slide

  36. a[href^=“https”]:after {
    content: “”;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: image-url(“lock.png”);
    }

    View full-size slide

  37. *,
    *:before,
    *:after {
    box-sizing: border-box;
    }

    View full-size slide

  38. less markup,
    more responsive

    View full-size slide

  39. css selectors

    View full-size slide

  40. vs
    cycle()
    :nth-child(odd)
    :nth-child(even)

    View full-size slide

  41. tr:nth-child(even) td {
    background: gray;
    }

    View full-size slide

  42. a[href$=“.pdf”]:after {
    content: “ (PDF)”;
    }

    View full-size slide

  43. :target {
    background: red;
    }

    View full-size slide


  44. Some content

    !
    http://example.com/#foo

    View full-size slide

  45. a spec worth reading

    View full-size slide

  46. css animations

    View full-size slide

  47. a {
    color: red;
    transition: color .5s;
    }
    !
    a:hover {
    color: blue;
    }

    View full-size slide

  48. .sidebar {
    width: 0;
    transition: width 1s;
    }
    !
    .sidebar.active {
    width: 200px;
    }
    !
    $(‘.sidebar’).toggleClass(‘active’);

    View full-size slide

  49. .element {
    transform: translateZ(0);
    }

    View full-size slide

  50. hardware acceleration

    View full-size slide

  51. .element {
    min-width: 320px;
    max-width: 1280px;
    margin: 0 auto;
    }

    View full-size slide

  52. low hanging fruit

    View full-size slide

  53. power of sass

    View full-size slide

  54. %underline-on-hover {
    text-decoration: none;
    !
    &:hover {
    text-decoration: underline;
    }
    }
    !
    .some-link {
    @extend %underline-on-hover;
    }

    View full-size slide

  55. $sass-list: (
    “locked”: “lock.png”,
    “error”: “exclamation-mark.png”
    );
    !
    @each $key, $value in $sass-list {
    .#{$key} {
    background: image-url($value);
    }
    }

    View full-size slide

  56. it’s like programming

    View full-size slide

  57. retina friendly,
    compresses well

    View full-size slide

  58. Front-End:
    Fun, Not Frustration

    View full-size slide

  59. Questions?
    @roy
    [email protected]
    slides: roy.io/railsconf

    View full-size slide

  60. Image credits:
    !
    https://www.flickr.com/photos/kunfy/6801036541
    !
    https://www.flickr.com/photos/cmichel67/9428306062

    View full-size slide