-
Notifications
You must be signed in to change notification settings - Fork 101
/
index.html
300 lines (239 loc) · 12 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bliss.js — Heavenly JavaScript!</title>
<link rel="shortcut icon" href="style/twitter-avatar.png" />
<link rel="stylesheet" href="style/prism.css" />
<link rel="stylesheet" href="style/style.css" />
</head>
<body class="language-javascript">
<header>
<a href="index.html">
<h1>Bliss</h1>
<p>Heavenly JavaScript</p>
</a>
</header>
<section id="intro">
<p>Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you.</p>
<ul>
<li><strong>No lock-in, <a href="http://lea.verou.me/2015/04/jquery-considered-harmful/">no wrapper objects</a></strong> Designed to work with Vanilla JS, not replace it.</li>
<li><strong>Light as a feather</strong> Only <a href="#download">3KB minified & gzipped!</a></li>
<li><strong>Chaining without prototype pollution</strong> Only adds one <code>_</code> property (optional, customizable)</li>
<li><strong>Extensible</strong> <a href="docs.html#fn-add">Adding new blissful methods</a> is easy as pie!</li>
<li><strong>(Mostly) readable source</strong> Know what you’re running. Excellent for learning!</li>
<li><strong>Built with modern standards</strong> <a href="#browser-support">Use polyfills to extend browser support.</a></li>
</ul>
<nav>
<a href="#download">Download</a>
<a href="docs.html">Read the docs</a>
</nav>
</section>
<section id="quick-look">
<h1>A quick look</h1>
<p>Get the <code><button></code> element with the class 'continue' and change its content to 'Next Step...' <a href="http://jquery.com">[example credit]</a></p>
<div class="comparison">
<pre class="vanilla"><code>document.querySelector("button.continue")
.textContent = "Next Step...";</code></pre>
<pre class="bliss"><code>$("button.continue").textContent = "Next Step...";</code></pre>
</div>
<p>Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked <a href="http://jquery.com">[example credit]</a></p>
<div class="comparison"><pre class="vanilla"><code>var hiddenBox = document.querySelector("#banner-message");
document.querySelector("#button-container button")
.addEventListener("click", function(event) {
hiddenBox.style.display = "block";
});</code></pre>
<pre class="bliss"><code>var hiddenBox = $("#banner-message");
$("#button-container button")
.addEventListener("click", function(event) {
hiddenBox.style.display = "block";
});</code></pre>
</div>
<p>Ok, these were easy even with plain Vanilla JS. <strong>Nobody needs a library for that!</strong> Shall we move on to more realistic examples?</p>
<p class="runnable">Remove the following pink <code><pre></code> element from the DOM with a fade out and shrink transition, then display a message:</p>
<div class="comparison">
<pre class="vanilla" id="transition-demo"><code>var demo = document.querySelector("#transition-demo");
demo.style.transitionProperty = "opacity, transform";
demo.style.transitionDuration = "400ms";
var callback = function() {
demo.removeEventListener("transitionend", callback);
clearTimeout(t);
this.parentNode.removeChild(this);
alert("Removed! Inspect the DOM to verify :)");
};
demo.addEventListener("transitionend", callback);
// Failsafe
var t = setTimeout(callback, 450);
demo.style.opacity = "0";
demo.style.transform = "scale(0)";</code></pre>
<pre class="bliss"><code>$("#transition-demo")._.transition({
opacity: 0,
transform: "scale(0)"
})
.then($.remove)
.then(function(element) {
alert("Removed! Inspect the DOM to verify :)")
});</code></pre>
</div>
<p class="runnable">Wrap all headings with links to their section (check this section’s heading after running):</p>
<div class="comparison"><pre class="vanilla"><code>var h1s = document.querySelectorAll("section[id] > h1");
for (var i=0; i<h1s.length; i++) {
var h1 = h1s[i];
var a = document.createElement("a");
a.href = "#" + h1.parentNode.id;
a.title = "Permalink";
a.className = "permalink";
a.addEventListener("click", function(evt) {
// Use History API if available
if (history.pushState) {
evt.preventDefault();
history.pushState(null, "", this.href);
}
});
h1.parentNode.insertBefore(a, h1);
a.appendChild(h1);
}</code></pre>
<pre class="bliss"><code>
$$("section[id] > h1").forEach(function(h1) {
$.create("a", {
href: "#" + h1.parentNode.id,
title: "Permalink",
className: "permalink",
events: {
click: function(evt) {
// Use History API if available
if (history.pushState) {
evt.preventDefault();
history.pushState(null, "", this.href);
}
}
},
around: h1
});
});</code></pre>
</div>
<p class="runnable">Look up the UK postcode <input value="OX49 5NU" id="postcode" /> with <a href="http://postcodes.io">postcodes.io</a> and print the results here: <span id="uk-area"></span></p>
<div class="comparison">
<pre class="vanilla"><code>var txt = document.querySelector("#postcode");
var out = document.querySelector("#uk-area");
(txt.oninput = function() {
var url = "http://api.postcodes.io/postcodes/"+txt.value;
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";
document.body.setAttribute('data-loading', url);
xhr.onload = function() {
document.body.removeAttribute('data-loading');
if (xhr.status === 0
|| xhr.status >= 200 && xhr.status < 300
|| xhr.status === 304) {
var json = xhr.response.result;
out.textContent = [
json.parliamentary_constituency,
json.admin_district,
json.country].join(", ");
}
else {
out.textContent = xhr.statusText;
}
};
xhr.onerror = function() {
out.textContent = xhr.statusText;
};
xhr.send(null);
})();</code></pre>
<pre class="bliss"><code>var txt = $("#postcode");
var out = $("#uk-area");
(txt.oninput = function() {
var url = "http://api.postcodes.io/postcodes/"+txt.value;
$.fetch(url, {
responseType: "json"
}).then(function(xhr) {
var json = xhr.response.result;
out.textContent = [
json.parliamentary_constituency,
json.admin_district,
json.country].join(", ");
}).catch(function(error) {
out.textContent = error;
});
})();</code></pre>
</div>
</section>
<section id="browser-support">
<h1>Browser support</h1>
<p>Bliss is just a collection of helpers and light syntactic sugar over Vanilla JS. It does not account for browser bugs or lack of support of certain APIs, although it only uses features that are both supported across most modern browsers <strong>and</strong> can be polyfilled. For example, it uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> throughout (supported by all latest browsers, can be polyfilled), but — despite the temptation — <strong>not</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> (syntactic extension, cannot be polyfilled). The idea is that you can extend support by using polyfills, depending on your needs.</p>
<p>We have partnered with the awesome service <a href="http://polyfill.io">polyfill.io</a> by the Financial Times to provide a <code>blissfuljs</code> alias that only bundles the necessary polyfills for Bliss, and nothing more.
In addition, due to how polyfill.io works, only the ones needed for the current browser will be loaded, so you can support older browsers without penalizing modern browsers with extra KBs.
You just include it before Bliss, like so:</p>
<pre><code class="language-markup"><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=blissfuljs"></script>
<script src="bliss.js"></script></code></pre>
<details>
<summary>
<h2>Manual polyfilling</h2>
</summary>
<p>If you don’t want to load a polyfill bundle, but prefer the flexibility of loading your own polyfills, here is a list of polyfills that you might want to include for Bliss:</p>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Browser_compatibility">Promises</a></dt>
<dd><a href="https://github.com/jakearchibald/es6-promise/">github.com/jakearchibald/es6-promise</a></dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/URL#Browser_compatibility">URL</a></dt>
<dd><a href="https://github.com/Polymer/URL/blob/master/url.js">github.com/Polymer/URL</a></dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">element.classList</a></dt>
<dd><a href="https://github.com/eligrey/classList.js/">github.com/eligrey/classList.js</a></dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest">element.closest()</a></dt>
<dd><a href="https://github.com/jonathantneal/closest">github.com/jonathantneal/closest</a></dd>
<dt><a href="http://caniuse.com/#feat=es5">ES5</a></dt>
<dd><a href="https://github.com/es-shims/es5-shim">github.com/es-shims/es5-shim</a></dd>
</dl>
<p class="note">Note that apart from Promises, all other polyfills can be loaded conditionally, by using Bliss’ <code>$.include()</code>.</p>
</details>
</section>
<section id="download">
<h1>Download</h1>
<form>
<div class="bliss-type">
<p>Choose your download:</p>
<input name="type" value="" type="radio" checked id="type-full" />
<label for="type-full">
<strong class="logo">Bliss <span>Full</span></strong>
Adds <code>$()</code> and <code>$$()</code> global methods and a <code>_</code> property on elements and arrays.
Wraps <code>addEventListener</code> and <code>removeEventListener</code> to call <code>$.bind()</code> and <code>$.unbind()</code>, to track events and more expanded syntax.
Good for when you control the environment.
</label>
<input name="type" value=".shy" type="radio" id="type-shy" />
<label for="type-shy">
<strong class="logo">Bliss <span>Shy</span></strong>
Does not touch the host environment in any way, except to add one global <code>Bliss</code> variable.
Perfect for inclusion in a third-party library, or any other case where you don’t control the environment. Slightly smaller size.
</label>
</div>
<div class="bliss-compression">
<strong>Compression level:</strong>
<label><input type="radio" name="compression" value=".min" checked> Minified</label>
<label><input type="radio" name="compression" value=""> Development</label>
</div>
</form>
<a href="bliss.js" download class="button">Download</a>
</section>
<footer>
By <a href="http://lea.verou.me">Lea Verou</a> and <a href="https://github.com/LeaVerou/bliss/graphs/contributors">all these awesome people</a> • <a href="http://lea.verou.me/2015/12/introducing-bliss-a-3kb-library-for-happier-vanilla-js/">Blog post</a>
<a href="https://github.com/LeaVerou/bliss" class="github-ribbon" target="_blank">Fork me on GitHub</a>
<iframe src="https://ghbtns.com/github-btn.html?user=leaverou&repo=bliss&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true" class="github-star"></iframe>
<a href="https://twitter.com/blissfuljs" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @blissfuljs</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</footer>
<script src="https://polyfill.io/v3/polyfill.min.js?features=blissfuljs"></script>
<script src="bliss.js"></script>
<script src="transform.js"></script>
<script src="index.js"></script>
<script src="style/prism.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71026615-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>