blissfuljs
Version:
Lightweight helper library for modern browsers.
301 lines (239 loc) • 12.3 kB
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>