A quick look

Get the <button> element with the class 'continue' and change its content to 'Next Step...' [example credit]

document.querySelector("button.continue")
	.textContent = "Next Step...";

$("button.continue").textContent = "Next Step...";

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked [example credit]

var hiddenBox = document.querySelector("#banner-message");
document.querySelector("#button-container button")
	.addEventListener("click", function(event) {
		hiddenBox.style.display = "block";
	});

var hiddenBox = $("#banner-message");
$("#button-container button")
	.addEventListener("click", function(event) {
		hiddenBox.style.display = "block";
	});

Ok, these were easy even with plain Vanilla JS. Nobody needs a library for that! Shall we move on to more realistic examples?

Remove the following pink <pre> element from the DOM with a fade out and shrink transition, then display a message:

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)";

$("#transition-demo")._.transition({
	opacity: 0,
	transform: "scale(0)"
})
.then($.remove)
.then(function(element) {
	alert("Removed! Inspect the DOM to verify :)")
});

Wrap all headings with links to their section (check this section’s heading after running):

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);
}


$$("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
	});
});

Look up the UK postcode with postcodes.io and print the results here:

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);
})();

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;
	});
})();

Browser support

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 and can be polyfilled. For example, it uses Promises throughout (supported by all latest browsers, can be polyfilled), but — despite the temptation — not arrow functions (syntactic extension, cannot be polyfilled). The idea is that you can extend support by using polyfills, depending on your needs.

We have partnered with the awesome service polyfill.io by the Financial Times to provide a blissfuljs 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:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=blissfuljs"></script>
<script src="bliss.js"></script>

Manual polyfilling

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:

Promises: github.com/jakearchibald/es6-promise
URL: github.com/Polymer/URL
element.classList: github.com/eligrey/classList.js
element.closest(): github.com/jonathantneal/closest
ES5: github.com/es-shims/es5-shim

Note that apart from Promises, all other polyfills can be loaded conditionally, by using Bliss’ $.include().

A quick look

Browser support

Manual polyfilling

Download