Sprinkles is the ActiveSupport of Vanilla JS.

The goal of this project is to isolate a small collection of helpers and extensions to make our lives as front-end engineers a little easier — just like ActiveSupport has done for Ruby on Rails engineers.

What you'll find in this project is:

• Array extensions:
  • flatten()
• Cookies
  • setItem(), getItem()
  • removeItem()
  • clear()
• Date extensions:
  • beginningOfDay(), endOfDay()
  • beginningOfMonth(), endOfMonth()
  • monthName(), dayName()
  • tomorrow(), yesterday()
• String inflections:
  • ordinalize()
• XHR helpers:
  • get()
  • getJSON()

What you won't find in this project is:

• Effects or animation (e.g., fadeOut())
• Browser backwards-compatibility
• Heavy-handed DOM manipulation (e.g., wrapAll())
• DOM selection (e.g., Sizzle)
• Anything a modern browser can alrady do

Sprinkles is of the opinion that selectively extending existing JavaScript objects is manageable. You may disagree and I'd love to know why.

This project is under active development so things will change dramatically as it matures. For contributions, please fork and submit pull requests.

Your browser is all grown up! Let it loop(), map(), and reduce() your arrays.

var pies = ["apple", "pecan", "cherry"];

pies.forEach(function(pie, i) {
  alert("Do you like " + pie + " pie ?");
});

pies.map(function(pie, i) {
  return pie + " pie";
}); // Returns ["apple pie", "pecan pie", "cherry pie"]

pies.reduce(function(previousPie, currentPie) {
  return previousPie + "," + currentPie;
}); // Returns "apple,pecan,cherry"

Sprinkles adds flatten() to Array.prototype.

[[1], [2], [3]].flatten(); // Returns [1, 2, 3]

Working with cookies isn't very fun if all you have is document.cookie. Sprinkles adds a cookies object that makes managing cookies a little easier. The API is designed to closely match that of localStorage.

cookies.setItem("foo", "bar"); // Write a cookie, "foo", with value "bar"
cookies.getItem("foo");        // Returns "bar"
cookies.removeItem("foo");     // Remove cookie, "foo"
cookies.clear();               // Remove all cookies

Sprinks always assumes the path on all your cookies is / and does not support cookies that specify domain, max-age, expires, or secure — maybe one day.

The date helpers in Sprinkles are built right onto Date.prototype because d.tomorrow() reads much better than DateExtensions.tomorrow(d).

var d = new Date(1986, 0, 24, 20, 25); // Jan 24th, 1986 at 20:25
d.beginningOfDay();                    // Jan 24th, 1986 at 00:00
d.endOfDay();                          // Jan 24th, 1986 at 23:59
d.beginningOfMonth();                  // Jan  1st, 1986 at 00:00
d.endOfMonth();                        // Jan 31st, 1986 at 23:59
d.tomorrow();                          // Jan 25th, 1986 at 20:25
d.yesterday();                         // Jan 23rd, 1986 at 20:25
d.monthName();                         // "January"
d.dayName();                           // "Friday"

Sprinkles won't do things a modern browser can already do, even if that means a bit more typing.

var results = document.querySelector("#results"), // Retrieve an element
    result  = document.createElement("div");      // Create an element

result.classList.add("result");                   // Add a class to an element
result.textContent = "One more thing...";         // Set the content of an element

results.appendChild(result);                      // Add an element as a child

If you do a lot of this, maybe you should write a function like createElement(name, content, parent).

ActiveSupport has a bunch of slick string inflections. Sprinkles just has the one for now.

"1".ordinalize()  // "1st"
"22".ordinalize() // "22nd"

Creating an XMLHttpRequest object from scratch is tedious, so get() and getJSON() have been added as methods on window as convenience.

window.get("http://example.com/plain-text",
  function(text) { console.log(text) },     // success
  function(text) { console.log(text) }      // error
);

window.getJSON("http://example.com/json",
  function(object) { console.log(object) }, // success
  function(object) { console.log(object) }  // error
})

Sprinkles uses Grunt to run development-oriented tasks. Grunt relies on Node Packaged Modules (NPM). You can install NPM with Homebrew. With NPM installed and from inside the Sprinkles project root run:

npm install

This is the Ruby equivalent of running bundle install. Now you can run the following tasks individually:

• grunt concat
• grunt qunit
• grunt jshint
• grunt uglify

You can also run grunt test to validate syntax and test. When you're work is done, run grunt to validate, test, concatenate, and minify.