Velocityjs - Effects

For your heavy-duty JavaScript animations, I recommend Velocityjs, since it has many features and great documentation.
Here are some simple effects that I find useful if you have chosen to use Velocityjs:

Pulsate / Throb

Grow and Shrink Element for Five Times
1
$('#my-element').velocity({ scale: 2 }, { loop: 5});

Pulsate Demo

Show and Rotate

Appear, Spins, and Disappear
1
2
//Complete animation within half a second
$('#my-element').velocity({ scale: 3, opacity: 1, rotateZ: "360deg" }, {duration: 500});

Spin Demo

Stagger Elements

Group Zoom-in
1
2
//Assumes that the UI Pack (velocity.ui.js) is in place
$('.group-of-elements').velocity('transition.whirlIn', {stagger: 500});

Stagger Group Demo

Meteor - Quick Tips #4

Filtering Differences between Minimongo and Mongo

Minimongo is Meteor’s client-side implementation of Mongodb, while Mongodb is refer to as Mongo.

In Mongo, when limiting the fields of the return documents, there are two parameters. Minimongo also takes two parameters, but the second parameter needs a field wrapper to denote the fields to return.

Cut Down Documents Field Return
1
2
3
4
5
//Mongodb
CollectionName.find({}, {'onlyThisField':1});

//Minimongo
CollectionName.find({}, {fields: {'onlyThisField':1}});

Return Template in Template Helper

Template helpers only return a string when outputting to the templates, so an object output is not possible. The closest thing to rendering a template out to another template is to use Blaze.toHTML. The spacebar template needs to have the triple braces for raw output to convert a string to an actual element.

Blaze Returns a Html String
1
2
3
4
5
6
7
8
9
10
11
12
//Rendered
Template.blank.onRendered(function(){
this.data.rv = new ReactiveVar("");
this.data.rv.set(Blaze.toHTML(Template.postInfo));
});

//Helpers
Template.post.helpers({
info: function() {
return Template.instance().data.rv.get();
}
});
Output the Html String
1
2
3
<template name="post">
<div class="reading">{{{info}}}</div>
</template>

Meteor - Quick Tips #3

Template Helpers and Subscriptions

Templates helpers format data onto your templates, but one must ensure that subscription data is fully loaded before the template helpers have a chance to render.

With the help of Iron Router, use the ‘this.ready()’ check inside the data option.

Router.js
1
2
3
4
5
6
7
8
9
10
11
12
Router.route('/post/:_id', {
waitOn: function() {
return Meteor.subscribe('post', this.params._id)
},
data: function () {
if (this.ready()) {
return {
post: Posts.findOne({_id: this.params._id});
}
}
}
});

Once the above is in place, a template helper can now safely rendered the subscription data.

Template.js
1
2
3
4
5
Template.post.helpers({
post: function() {
return Template.currentData().post;
}
});

Remove Event Listeners From Blaze Templates

As of Meteor 1.0.4.2, this can not be done. The Blaze to HTML looked promising, but this only creates static html element from a template, it does not provide the ability to render an active Blaze template inert.

For example the following template has a click event listener attached, but there is not way to undo or remove the click event listener.

Click Event Listener
1
2
3
4
5
Template.my-template.events({
"click #container a": function(evt) {
//do some stuff here
}
});

Meteor - Quick Tips #2

Blaze Template Removal

Instead of using jQuery to perform DOM removal operations, Meteor’s Blaze remove can do the same thing with the following

Remove Element with Blaze
1
Blaze.remove(Template.instance().view);

The above can be ran in the Template’s render function or in a Template event handler. Most likely, the removal will take place in an event handler.

Attach Template’s Local Variables to Template Instance

Since all Templates files variables are encapsulated within a closure, there might be possibilities of memory leaks. To ensure that local variables are properly cleaned up, attached a data store object to the Template instance. When the Template instance is destroy so will all the references to it variables.

DataStore Object on Template Instance
1
2
3
4
5
6
7
8
var ds = {
thing1: 1,
thing2: 2
};

Template.myTemplate.created = function() {
this.ds = ds;
};

Meteor - Quick Tips #1

Redirecting for Non-Logged-In Users

When an app has more than one url and any other url other than the /home url is restricted for logged in users, than this requireLogin function will direct users back to the home url when the user is not logged in. This is assuming that the IronRouter package is used.

Force Login for Privileged Areas
1
2
3
4
5
6
7
8
9
10
11
var requireLogin = function() {
if(!Meteor.user()) {
if(!Meteor.loggingIn()){
this.redirect('home');
}
} else {
this.next();
}
}

Router.onBeforeAction(requireLogin, {except: 'home'});

JSON Data for Fixtures

Assuming that “exercise.json” is stored in your /private directory in the root of the Meteor project, the fixture.js file in your /server folder makes use of Assets.getText in conjunction with JSON.parse to get the data in a form that can be readily accessed.

Get Private JSON Data
1
2
3
4
5
6
7
8
9
10
var exercises = JSON.parse(Assets.getText("exercises.json"));

for (var i = 0, len = exercises.length; i < len; i++) {
var exercise = exercises[i];

Exercises.insert({
name: exercise.name,
type: exercise.type
});
}