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.

Transcript

1. Front-End:
   Fun, Not Frustration
   

   View Slide

2. @roy
   

   View Slide

3. View Slide

4. View Slide

5. better box model
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. .element
   margin
   border
   padding
   width: 800px
   

   View Slide

10. great for percentage
    based layouts
    

    View Slide

11. margins
    

    View Slide

12. .element {
    margin: 100px;
    }
    

    View Slide

13. .element
    100px
    .element
    

    View Slide

14. .element 200px .element
    

    View Slide

15. that’s just the way it is
    

    View Slide

16. positioning
    

    View Slide

17. .element {
    position: static;
    }
    

    View Slide

18. .element {
    position: relative;
    }
    

    View Slide

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

    View Slide

20. .element {
    position: fixed;
    }
    

    View Slide

21. positioning is hard
    

    View Slide

22. inline
    block elements
    

    View Slide

23. li
    li
    li
    li
    ul
    

    View Slide

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

    View Slide

25. li li
    ul
    li li
    

    View Slide

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

    View Slide

27. li
    ul
    li li li
    

    View Slide

28. no more floats to clear
    

    View Slide

29. vertical
    alignment
    

    View Slide

30. 
    
    
    content goes here
    
    
    
    

    View Slide

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

    View Slide

32. tables > css
    

    View Slide

33. 
    
    content goes here
    
    
    

    View Slide

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

    View Slide

35. semantic markup,
    behaving like tables
    

    View Slide

36. pretty buttons
    

    View Slide

37. vs
    
    Submit
    

    View Slide

38. 
    important button
    
    

    View Slide

39. just use
    

    View Slide

40. pseudo
    elements
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. less markup,
    more responsive
    

    View Slide

47. css selectors
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. :target {
    background: red;
    }
    

    View Slide

52. 
    Some content
    
    !
    http://example.com/#foo
    

    View Slide

53. a spec worth reading
    

    View Slide

54. css animations
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. hardware acceleration
    

    View Slide

59. fluidity
    

    View Slide

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

    View Slide

61. low hanging fruit
    

    View Slide

62. power of sass
    

    View Slide

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

    View Slide

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

    View Slide

65. it’s like programming
    

    View Slide

66. svg
    

    View Slide

67. retina friendly,
    compresses well
    

    View Slide

68. Front-End:
    Fun, Not Frustration
    

    View Slide

69. View Slide

70. Questions?
    @roy
    roy@appsignal.com
    slides: roy.io/railsconf
    

    View Slide

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

    View Slide