This repository has been archived by the owner on Jun 28, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
presentation.html
139 lines (119 loc) · 3.9 KB
/
presentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Sample CSSS presentation</title>
<!-- Don't alter this, CSSS needs it to work -->
<link href="slideshow.css" rel="stylesheet" />
<!-- Theme-specific styles go here (themes can be reused in multiple talks) -->
<link href="theme.css" rel="stylesheet" />
<!-- Talk-specific styles go here -->
<link href="talk.css" rel="stylesheet" />
</head>
<body data-duration="45">
<header id="intro" class="slide">
<h1>
Rails 3.1: Asset Pipeline
<img src= "img/intro.png"/>
</h1>
<p class="attribution">By Bradley Priest</p>
</header>
<section>
<header class="slide">
<h1>What we're currently doing wrong</h1>
</header>
<section class="slide">
<h2>Organisation</h2>
<ul>
<li class="delayed">Currently most Rails apps treat CSS/JS/Images as second-class citizens</li>
<li class="delayed">They get lumped together into a couple of giant folders inside /public</li>
<li class="delayed">Mixture of custom code, 3rd party assets</li>
</ul>
</section>
<section class="slide">
<h2>Optimization</h2>
<ul>
<li class="delayed">It's currently quite an effort to optimize JS and CSS easily</li>
<li class="delayed">Jammit is a great answer, but not enough people use it</li>
<li class="delayed">Minified/Concatenated CSS/JS is always better</li>
</ul>
</section>
</section>
<section>
<header class="slide">
<h1>The Asset Pipeline and You</h1>
</header>
<section class="slide">
<h2>Organisation</h2>
<ul>
<li class="strike">Currently most Rails apps treat CSS/JS/Images as second-class citizens</li>
<li class="strike">They get lumped together into a couple of giant folders inside /public</li>
<li class="strike">Mixture of custom code, 3rd party assets</li>
</ul>
The asset pipeline moves your assets out of the public folder:
<ul>
<li>app/assets</li>
<li>lib/assets</li>
<li>vendor/assets</li>
</ul>
</section>
<section class="slide">
<h2>Optimization</h2>
<ul>
<li class="strike">It's currently quite an effort to optimize JS and CSS easily</li>
<li class="strike">Jammit is a great answer, but not enough people use it</li>
<li class="strike">Minified/Concatenated CSS/JS is always better</li>
</ul>
<ul>
<li>The asset pipeline provides the gem "Sprockets" which automatically concatenates and minifies your JS/CSS</li>
<li>It's still in it's infancy so it has a few bugs.</li>
</ul>
</section>
</section>
<section>
<header class="slide">
<h2>Shiny Things</h2>
<img src="img/gemfile.jpg" />
</header>
<section class="slide">
<h2>Sane Defaults</h2>
<a href="https://github.com/rails/rails/compare/9333ca7...23aa7da" target="_blank">The iconic commit</a>
<p>Rails 3.1 also brought some new defaults with it:</p>
<ul>
<li>jQuery instead of Prototype</li>
<li>Sass</li>
<li>Coffeescript</li>
</ul>
</section>
<section class="slide">
<img src="img/scss.jpg" class="right">
<h2>Sass</h2>
<ul>
<li>Variables</li>
<li>Nesting</li>
<li>Mixins</li>
</ul>
</section>
<section class="slide">
<img src="img/coffee.jpg" class="right">
<h2>CoffeeScript</h2>
<p>Nothing but the good stuff</p>
<img src="img/js-good.jpg" />
</section>
</section>
<footer class="slide">
<h2>Thank you!</h2>
<p>Closing remarks</p>
</footer>
<script src="slideshow.js"></script>
<!-- Make sure the reference to -prefix-free works -->
<script src="prefixfree.min.js"></script>
<!-- Uncomment the plugins you need
<script src="plugins/css-edit.js"></script>
<script src="plugins/css-snippets.js"></script>
<script src="plugins/css-controls.js"></script>
-->
<script>var slideshow = new SlideShow();</script>
</body>
</html>