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
2. @roy
5. better box model
6. * { box-sizing: content-box; } ! .element { width: 800px; padding: 100px; border: 10px; }
7. ! .element margin border padding width: 1020px width: 800px
8. * { box-sizing: border-box; } ! .element { width: 800px; padding: 100px; border: 10px; }
9. .element margin border padding width: 800px
10. great for percentage based layouts
11. margins
12. .element { margin: 100px; }
13. .element 100px .element
14. .element 200px .element
15. that’s just the way it is
16. positioning
17. .element { position: static; }
18. .element { position: relative; }
19. .element { position: relative; left: 100px; }
20. .element { position: fixed; }
21. positioning is hard
22. inline block elements
23. li li li li ul
24. li { display: inline-block; margin: 0; }
25. li li ul li li
26. ul { font-size: 0; } ! li { display: inline-block; margin: 0; font-size: 12px; }
27. li ul li li li
28. no more floats to clear
29. vertical alignment
30. <table> <tr> <td> content goes here </td> </tr> </table>
31. table { width: 100%; height: 100%; } ! td { vertical-align: middle; text-align: center; }
32. tables > css
33. <div class=“element”> <div class=“content”> content goes here </div> </div>
34. .element { display: table; width: 100%; } ! .content { display: table-cell; vertical-align: middle; text-align: center; }
35. semantic markup, behaving like tables
36. pretty buttons
37. vs <input type=“submit” value=“Submit”> <button type=“submit”>Submit</button>
38. <button type=“submit”> <strong>important</strong> button </button>
39. just use <button>
40. pseudo elements
41. .element::before { content: “string”; } ! .element::after { content: “\2764”; }
42. .element:before { content: “string”; } ! .element:after { content: “\2764”; }
43. a[href^=“https”]:after { content: “ (uses SSL)”; }
44. a[href^=“https”]:after { content: “”; display: inline-block; width: 12px; height: 12px; background: image-url(“lock.png”); }
45. *, *:before, *:after { box-sizing: border-box; }
46. less markup, more responsive
47. css selectors
48. vs cycle() :nth-child(odd) :nth-child(even)
49. tr:nth-child(even) td { background: gray; }
50. a[href$=“.pdf”]:after { content: “ (PDF)”; }
51. :target { background: red; }
52. <p id=“foo”> Some content </p> ! http://example.com/#foo
53. a spec worth reading
54. css animations
55. a { color: red; transition: color .5s; } ! a:hover { color: blue; }
56. .sidebar { width: 0; transition: width 1s; } ! .sidebar.active { width: 200px; } ! $(‘.sidebar’).toggleClass(‘active’);
57. .element { transform: translateZ(0); }
58. hardware acceleration
59. fluidity
60. .element { min-width: 320px; max-width: 1280px; margin: 0 auto; }
61. low hanging fruit
62. power of sass
63. %underline-on-hover { text-decoration: none; ! &:hover { text-decoration: underline; } } ! .some-link { @extend %underline-on-hover; }
64. $sass-list: ( “locked”: “lock.png”, “error”: “exclamation-mark.png” ); ! @each $key, $value in $sass-list { .#{$key} { background: image-url($value); } }
65. it’s like programming
66. svg
67. retina friendly, compresses well
68. Front-End: Fun, Not Frustration
70. Questions? @roy roy@appsignal.com slides: roy.io/railsconf
71. Image credits: ! https://www.flickr.com/photos/kunfy/6801036541 ! https://www.flickr.com/photos/cmichel67/9428306062