A quick look
Get the 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
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
$("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
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 all 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 (not available in Safari, cannot be polyfilled). The idea is that you can extend support by using polyfills, depending on your needs.
- Pick the tradeoff of support-size that matches your needs, not what was chosen for you.
- Use polyfills now, remove them later when not relevant anymore, resulting in a smaller codebase with zero refactoring.
Here is a list of suggested polyfills that will help extend Bliss’ browser support and the current browser support of these features, to determine if you need one:
Note that apart from Promises, all other polyfills can be loaded conditionally, by using Bliss’ $.include().
Download
Choose your download:
Bliss Full
Adds $() and ?() global methods and a _ property on elements and arrays, for convenience. Also wraps addEventListener and removeEventListener to track events.
Perfect for when you control the environment.
Bliss Shy
Does not touch the host environment in any way, except to add one global Bliss variable.
Perfect for inclusion in a third-party library, or any other case where you don’t control the environment. Slightly smaller size.
Compression level:
Minified
Development
Download
