Charts for easy choosing your Famo.us easing functions

Famo.us provides 30 different easing functions for tweening animations. Choosing the most appropriate one will give you the best results possible before creating your own if none matches your expectations.

With these charts, choosing is going to be far more easier:

See the Pen Famo.us easing functions by Pierre-Eric Marchandet (@PEM--) on CodePen.

Flare demo in Famo.us

A very simple Famo.us demo inspired from the 3d demo of Julian Shapiro.

See the Pen Flare 3D demo in Famo.us by Pierre-Eric Marchandet (@PEM--) on CodePen.

Atom is getting ready for Meteor 1.0.0

Thanks to Ben Strahan, Atom.io is getting ready for the upcoming Meteor-1.0.0 with the Meteor-Helper package.

There are also few others fixes  and enhancements that you can see on the release notes: https://github.com/PEM--/meteor-helper/releases

A mind blowing talk from Douglas Crockford at Nordic.js 2014

This is just great. Hard to ingest. It is mind blowing but so true. Though, the video is titled the better parts, the bad parts are really interesting and worth hearing many times.

Setup a Famo.us experiment using Codepen.io

I've created a CodePen for easing creation of experiments with Famo.us. It uses Jade and CoffeeScript as its defaults and imports Famo.us and jQuery in their minified version. Fork it and play with it. Happy coding!

See the Pen Famo.us simple physic box by Pierre-Eric Marchandet (@PEM--) on CodePen.

Create your slide deck using Famo.us and Meteor

Introduction

Yesterday, there was the Paris Famo.us Meetup organized by AdFab and Meetic France. I was presenting the first part, which consists of a live coding or demo showcasing. I intended to demonstrate some basic techniques on Famo.us's physic engine. Live coding is tough. There are always some "demo effect" and time runs out very quickly.

Fortunately, for this demo preparation, I created some slides. As the meetup was about Famo.us, I decided to code my slide deck using... Famo.us and Meteor.

The slides are deployed on Meteor: MeetupFamousSlides.

The core components

If you think about a presentation tool, it only consists of static pages that you present one after the other. This is definitely the job of iron:router.

Creating each slide is easily done when you are using a templating system with emphasis on semantic. Jade and Markdown fit very well in this equation. Therefore, I ended up choosing mquandalle:jade. Each slide is a single Jade file. Thanks to the power of Meteor, you can write additional logic in the template for animating the slide's content.

Speaking of animations, modern slide deck use some of them. Famo.us is really a nice framework for this task. But coupling Meteor and Famo.us is a bit tedious. This is where enters gadiccohen:famous-views. It bridges both worlds with an incredible ease of use. I strongly recommend you to have an eye on it.

Conclusion and code reuse

In less than 2 hours, the presentation engine was ready and I had a basic presentation. Adding slides was a no brainer simply consisting in updating the router and adding a Jade file.

You can find the code of the engine and the slide deck on this Github repository.

Create your CSS styles in CoffeeScript for Meteor

I've created my first Meteor package today: CSSC. This package eases the creation of CSS stylesheets in CoffeeScript.

For using it, adds the package into your Meteor's project:

meteor add pierreeric:cssc

Once done, just create your stylesheets using DOM and CSSOM notation. For instance, I will create 2 classes selected and unselected:

if Meteor.isClient
  Meteor.startup ->
    css = new CSSC

    css.add '.selected',
      margin: CSSC.x 3
      border: "3px solid #{CSSC.yellow}"
      borderRadius: CSSC.x 5
    css.add '.unselected',
      color: CSSC.yellow

As you can see it, the syntax is close to what you would use in Stylus or SASS (when using .sass notation).

I've also created 2 plugins for this package:

• CSSC-Colors which allows inclusion of a nicer set of colors

• CSSC-Famous which avoids you from including CSS files from Famo.us.

With Meteor, this package and its plugins, you don't have to send CSS files to your client. Everything is packed within a single JS file.