Hacking the Front End

Hi. I’m Michael.

As the list of my open-source projects continues to grow, they have finally reached a point where an overview might be helpful. That’s what this page is for.

What has made it on the list?

The projects below meet a certain standard. They are covered by an extensive test suite, I have reviewed them for their performance, and they are mature enough to have reached version 1.0, at the very least. All of them are safe to use in production.

If you are interested in experimental stuff as well, please head over to my regular Github page and check if anything is there.

Getting in Touch

Apart from Github, you can get hold of me in a couple of other places, where I show up at random.

	Twitter		Stack Overflow
	Google+		Zeilenwechsel.de

If you’d like to get in touch, please do. You are welcome.

Backbone and Marionette

Backbone.Select

A set of mixins for Backbone models and collections. Models gain the ability to be selected, and collections handle those selections.

• Collections either allow only a single model to be selected (Backbone.Select.One mixin), or cater for multiple selections (Backbone.Select.Many).
• Events communicate selections and deselections to other parts of your application.
• In model-sharing mode, models can be part of more than one collection. Backbone.Select will keep selections of shared models in sync and guarantee consistency in even the most complex scenarios.

Project on Github, documentation | code example | interactive demo (JSBin, Codepen)

Backbone.Cycle

A set of mixins for Backbone models and collections. Adds methods for selecting Backbone models, and for navigating collections.

Backbone.Cycle is built on top of Backbone.Select (see comparison).

• Models gain the ability to be selected, and collections handle those selections. See Backbone.Select.
• Models can be shared across multiple collections, and selections are synced among them.
• Methods for navigating a collection are also part of the package, such as model.ahead(3), collection.selectNext(), collection.prev(), collection.prevNoLoop().
• You can enable predefined, common behaviours, like always selecting the first item in a new collection, or selecting the previous model when a selected model is removed.

Project on Github, documentation | code example | interactive demo (JSBin, Codepen)

Backbone.Declarative.Views

Defines the DOM element of a Backbone view right in the template. Keeps the tag name, class name and other attributes of el out of Backbone.View Javascript code. (Read why.)

Core functionality:

• You can read the markup for the container element of a view directly from its template.
• Works entirely behind the scenes. Just load Backbone.Declarative.Views into your project, and start declaring the view attributes in the HTML of your templates.
• Fully compatible with existing code. Does not interfere with “traditional” ways to define an el in Javascript. Does not break existing templates.
• Works seamlessly with frameworks built on top of Backbone, such as Marionette.
• Is very fast, thanks to template caching.

Additional benefits:

• Provides a Javascript API for tapping into the template cache. Speeds up view creation, sometimes massively so.
• If you tell it which template compiler to use, it will compile the templates for you and cache the compiled version. Makes your app even faster.

Project on Github, documentation | code example | interactive demos: plain Backbone (JSBin, Codepen), Marionette (JSBin, Codepen)

Backbone.Marionette.Export

Exposes Backbone model and collection methods to templates.

• Provides a simple, declarative syntax to define which methods of a model, or of a collection, provide their output to templates.
• Adds hooks for modifying the data before it is handed to a template.

The name of the plugin has turned out to be a bit of a misnomer, though. Backbone.Marionette.Export does not depend on Marionette and is just as useful in projects based on plain Backbone.

Project on Github, documentation | code examples | interactive demo (JSBin, Codepen)

Marionette.Handlebars

Adds support for Handlebars and Mustache templates to Marionette.

• Does its job entirely behind the scenes – load it, and you are all set.
• Supports precompiled templates as well.
• Provides an extension point enabling you to lazy-load templates.

Project on Github, documentation

DOM and jQuery

jQuery.documentSize

Detects the real width and height of the document. And the real width and height of the browser window. (Read why this is necessary.)

• Works cross-browser, and returns the correct result in even the most exotic scenarios. It resolves the shortcomings of jQuery in that regard.
• Handles pinch zooming on mobile, and resolves iOS bugs, when determining the window size.
• Supports both the visual viewport and the layout viewport.
• Also returns the zoom level on mobile (pinch zooming).
• Is written in pure Javascript. You can use it without jQuery, too.
• An auto-generated, massive test suite covers all edge cases and combinations thereof, guaranteeing reliability.

Project on Github, documentation | interactive demo (JSBin, Codepen)

jQuery.isInView

Tells you if elements are in view inside a scrollable container, or inside a container hiding its overflow.

• Provides filters, boolean queries, and an :inViewport selector.
• Stringently optimized for performance and ridiculously fast.
• Fine-grained, intuitive options for full or partial visibility, box model, tolerance etc.
• Exposes useful helpers detecting the presence of scroll bars, and the space taken up by them.
• Works with respect to the viewport, iframes, or other scrollable elements.

Project on Github, documentation | code example | interactive demo (JSBin, Codepen) | performance test and comparison

jQuery.scrollable

Manages animated scrolling in windows, scrollable elements and iframes. (Read why jQuery.animate() isn’t enough.)

• Handles browser inconsistencies.
• Respects user actions. Stops if the user clicks, taps, or tries to scroll.
• Gives you a choice for handling overlapping calls.
• Provides flexible, intuitive scrolling options (relative targets, percentages, keywords, simultaneous or successive scrolling, etc).
• Supports smart speed adjustments, ensuring a fluid animation for short scroll distances.
• Runs in a dedicated animation queue so as not to interfere with other animations on the page.
• Exposes useful helpers to detect the maximum scrollable distance and the scrollable element.

Project on Github, documentation | interactive demo (JSBin, Codepen)

jQuery.Promises

Groups related jQuery Deferreds, managing them collectively.

• Helps to collect Deferreds and add new ones later on.
• Can block and delay the resolution of the collection, until the collection is unblocked later on at a convenient time.
• Because of that, Deferreds can be added to the collection piecemeal, even when the collection itself has already been passed to $.when. Is protected from premature resolution.

Project on Github, documentation | code example