/
index.jade
300 lines (226 loc) · 15.2 KB
/
index.jade
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
!!! 5
html
head
script(type='text/javascript')
var _sf_startpt=(new Date()).getTime()
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title LiveReload
link(href='http://fonts.googleapis.com/css?family=Lora:regular,bold&v1', rel='stylesheet', type='text/css')
link(href='http://fonts.googleapis.com/css?family=Caudex:regular,bold&v1', rel='stylesheet', type='text/css')
link(href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold&v1', rel='stylesheet', type='text/css')
// <link href='http://fonts.googleapis.com/css?family=Droid+Serif&v1' rel='stylesheet' type='text/css'>
link(rel='stylesheet', href='css/livereload.css', type='text/css', media='screen', title='main stylesheet', charset='utf-8')
script(type='text/javascript')
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24459554-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
body
header
.content
.left
p LiveReload 2 proudly presents…
h1 The Web Developer Wonderland
p.subtitle (a happy land where browsers don't need a Refresh button)
h2 CSS edits and image changes apply live.
h2
:markdown
CoffeeScript, SASS, LESS [and others](#compilers) just work.
p.citizenship
| Citizenship is granted through the Mac App Store.
br
| Windows permanent residency issues are being worked out,
br
| temporary stay already allowed.
.right
img(src="images/LiveReload_350.png")
section.what-is-livereload
.left
img(src='images/screenshot.png')
.right
h2 What does LiveReload do?
:markdown
LiveReload monitors changes in the file system. As soon as you save a file, it is [preprocessed as needed](#compilers), and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.
section#testimonials.testimonials
script(id="brag-widget", src="http://www.getbrag.com/api/testimonials/165715091/widget.js")
section.download-section
a(name='download')
.left
h2 Downloads
h3
span Mac?
a.download(href='http://itunes.apple.com/us/app/livereload/id482898991?mt=12') Get LiveReload 2 on the Mac App Store
:markdown
Requires OS X 10.6 or later. $9.99. 64-bit only. [Got old 32-bit Mac?](http://go.livereload.com/32bit)
Don't miss: [Getting started](#getting-started), [compilers](#compilers), [plugins](#plugins), [post-processing](#postprocessing), [support](#support).
p.after-download(style='display: none')
| Thanks! Please also sign up for our newsletter to receive new build
| notifications and useful updates.
// Included plugins:
h3
span Windows?
a.download-win(href='http://download.livereload.com/windows/LiveReloadSetup.exe') Try LiveReload 0.9.2 Alpha
:markdown
(Updates automatically. Requires XP+. [Getting Started info here](http://go.livereload.com/win).)
h3 Linux?
:markdown
Try [guard-livereload](https://github.com/guard/guard-livereload), they use our browser extensions and are pretty cool. Not limited to Linux either; if GUI is not your thing, guard-livereload is the next best choice.
.right
h2 Wonderland green card application
.greencard-sent(style='display: none')
| Thanks!
form.greencard(action='http://andreytarantsov.createsend.com/t/r/s/fjkujj/', method='post')
p Tell the truth, or face the consequences!
p
label(for='fjkujj-fjkujj') Your e-mail address:
br
input#fjkujj-fjkujj.email(type='text', name='cm-fjkujj-fjkujj')
p
label(for='About') Tell us about yourself (optional!)
br
textarea#About.message(name='cm-f-pyuhyi', rows='4')
p
label(for='Platforms') Platforms you're interested in:
br
input.checkbox(type="checkbox", name="cm-fo-mljhly", id="cm2462888", value="2462888")
label.checkbox(for="cm2462888") Mac OS X
input.checkbox(type="checkbox", name="cm-fo-mljhly", id="cm2462889", value="2462889")
label.checkbox(for="cm2462889") Windows
input.checkbox(type="checkbox", name="cm-fo-mljhly", id="cm2462890", value="2462890")
label.checkbox(for="cm2462890") Linux
p
label(for='About') Prerelease builds:
br
input.checkbox(type="checkbox", name="cm-fo-mluuyy", id="cm2467775", value="2467775")
label.checkbox(for="cm2467775") I want early access to (and receive news about) prerelease builds
p
input.submit(type='submit', value='Apply and subscribe to citizen news')
section.source-section
a(name='source')
.left
h2 Wanna see the source?
:markdown
The full source code of LiveReload 2 is available on GitHub: [LiveReload2](https://github.com/livereload/LiveReload2) (Mac on master branch, Windows on node branch), [livereload-plugins](https://github.com/livereload/livereload-plugins), [livereload-js](https://github.com/livereload/livereload-js), [livereload-extensions](https://github.com/livereload/livereload-extensions).
Why? Because curiosity is the most basic and important quality of good developers. I believe that everyone benefits from being able to study and tinker with other people's software.
There is no formal license attached. You are free to tinker with it and share the results with your friends, but please don't distribute binaries publicly without my permission. I still expect every user to pay for a license, unless you have a good reason not to.
The browser extensions and livereload.js are under MIT. If you find a nice generic class or a piece of code you'd like to reuse, I will probably be happy to release it under MIT.
Optional: [Behind the scenes story on this decision, GPL and indie software](http://tarantsov.com/blog/2012/02/the-third-definition-of-open/).
.right
<a class="forkme" href="http://github.com/livereload/LiveReload2"><img style="border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
section.getting-started-section
a(name='getting-started')
.left
h2 Getting Started, or<br>N things you need to know about LiveReload
:markdown
1. LiveReload lives in your menu bar.
2. It works with Safari, Chrome, Firefox and Mobile Safari. Also Opera if you [enable web sockets](http://techdows.com/2010/12/enable-websockets-in-opera-11.html).
3. Yes, you heard that right, LiveReload <3 iPhones, iPads and their Simulators if you [insert a JavaScript snippet](http://go.livereload.com/integration).
4. If adding a tag is not your thing, and you're only interested in desktop browsers, only on your computer, [use our browser extensions](http://go.livereload.com/extensions).
5. VMs or testing from other PCs? Same as with mobile devices, really; the JavaScript snippet is your friend. (It is displayed in the LiveReload window, btw, so you can't possibly miss it.)
6. How do you stop that snippet from making it into production, then? Well, simple: add an IF and check location.host, and then feel free to commit and deploy.
7. What happens if there's a hideous error in your shiny CoffeeScript or SASS file? LiveReload will display an error notification. It will also detect which editor you are using and display a corresponding “Edit in Submate Wrangler” button.
8. That edit button goes to great lengths to jump to the exact error location. One would expect any text editor since sed to be able to jump to a specific line number from the command line. Alas, guys like Coda and Espresso make it hard (as in, emulate-command-L-typing-a-number-pressing-enter hard), which works just as well as it sounds.
9. Back to basics. It is important to know that LiveReload only monitors files with specific extensions. A nice fat list is hard-coded, but you can add your own ones in monitoring settings.
1. LiveReload has been tested with [Rails](http://go.livereload.com/using/with/rails), [Drupal](http://go.livereload.com/using/with/drupal), [WordPress](http://go.livereload.com/using/with/wordpress), [Joomla](http://go.livereload.com/using/with/joomla) and [ExpessionEngine](http://go.livereload.com/using/with/ee), all of which are links to articles with useful framework-specific information.
1. Working with file: protocol? @import quirks? Keyboard shortcuts? Explore our [knowledge base](http://go.livereload.com/kb) to find out more.
1. If you are ever stuck, there's a nice friendly question mark button in the title bar. Think of it as a modern version of DON'T PANIC.
section.compilers-section
a(name='compilers')
.left
h2 Compilers
:markdown
If you are using stuff like CoffeeScript, SASS or LESS (and you should!), LiveReload will compile them for you all right. Just turn it on; LiveReload is controlled by two main checkboxes, so you won't get lost.
LiveReload ships with the following compilers: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade.
If you're using any of the following compilers, please read additional details on our knowledge base:
* [More about SASS and Compass support](http://feedback.livereload.com/knowledgebase/articles/86203-sass-compass)
* [More about LESS support](http://feedback.livereload.com/knowledgebase/articles/86170-less).
section.plugins-section
a(name='plugins')
.left
h2 Plugins
:markdown
The compilers supported by LiveReload aren't set in stone; they are provided by bundled plugins, and you can add your own ones too. (We even look for them in Dropbox/Library, to save you some trouble if you're using Dropbox and multiple Macs.)
No coding is invoked: write a JSON manifest, copy required files and there you go. You can find all the docs you need in [livereload-plugins](https://github.com/livereload/livereload-plugins) repository.
section.postprocessing-section
a(name='postprocessing')
.left
h2 Post-processing
:markdown
LiveReload can invoke a Terminal command after processing changes. Run a Rake/Cake task, a Shell script or anything else you need.
Protip: If you're working with some Ruby stuff and want to use RVM, pick the correct Ruby interpreter in compilation options (which also affect post-processing).
section.support-section
a(name='support')
.left
h2 Support
:markdown
Use the Help & Support button here or visit [feedback.livereload.com](http://feedback.livereload.com) to read knowledge base articles, vote for features and contact the developers.
section.friends-section
a(name='friends')
.left
h2 Acknowledgements
:markdown
LiveReload has been inspired by XRefresh, an old Firebug plugin made by our friends at BinaryAge. Their [TotalFinder](http://totalfinder.binaryage.com/) product is awesome, and you might find [FireQuery](http://firequery.binaryage.com/) and [other free tools](http://www.binaryage.com/) useful too.
section
.left
h2 Who are we?
:markdown
LiveReload 2.x is developed by Andrey Tarantsov, with an occasional help by Timofey Vasenin.
You can read [the history of the first year of LiveReload here](http://tarantsov.com/blog/2011/07/the-story-of-livereload-the-first-anniversary).
Cheers!
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js')
script(type='text/javascript')
var _sf_async_config={uid:23639,domain:"livereload.com"};
(function(){
function loadChartbeat() {
window._sf_endpt=(new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src',
(("https:" == document.location.protocol) ? "https://a248.e.akamai.net/chartbeat.download.akamai.com/102508/" : "http://static.chartbeat.com/") +
"js/chartbeat.js");
document.body.appendChild(e);
}
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ?
loadChartbeat : function() { oldonload(); loadChartbeat(); };
})();
script(type='text/javascript')
var mp_protocol = (('https:' == document.location.protocol) ? 'https://' : 'http://'); document.write(unescape('%3Cscript src="' + mp_protocol + 'api.mixpanel.com/site_media/js/api/mixpanel.js" type="text/javascript"%3E%3C/script%3E'));
script(type='text/javascript')
try { var mpmetrics = new MixpanelLib('c172b6e3eb5bf1de17f8d0c590fa561e'); } catch(err) { null_fn = function () {}; var mpmetrics = { track: null_fn, track_funnel: null_fn, register: null_fn, register_once: null_fn, register_funnel: null_fn }; }
script
mpmetrics.set_config({ track_links_timeout: 1000 });
function track_link_as_event(className, name, detail) {
$(className).click(function(e) {
_gaq.push(['_trackEvent', 'Link', name, detail]);
});
var data = {};
if (detail)
data.link = detail;
mpmetrics.track_links(className, name, data);
}
function track_link_as_pageview(className, name, url) {
$(className).click(function(e) {
_gaq.push(['_trackPageview', url]);
});
mpmetrics.track_links(className, name);
}
mpmetrics.track('Load homepage');
track_link_as_pageview('.download-mas', 'Download', '/download/mac-app-store');
track_link_as_pageview('.download-win', 'Download for Windows', '/download/windows');
track_link_as_event('.binaryage-link-totalfinder', 'Go to BinaryAge', 'TotalFinder');
track_link_as_event('.binaryage-link-firequery', 'Go to BinaryAge', 'FireQuery');
track_link_as_event('.binaryage-link-other', 'Go to BinaryAge', 'other');
script(type='text/javascript')
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/YXNL6PDw9j18AagcnPT9Q.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();