Responsive SVG devices for famo.us and Meteor

Introduction

When creating a landing page or when demonstrating an app, there are often some smartphone, tablet or desktop screenshots. This pattern of demonstration could be a bit enhanced if instead of simple screenshots, the real app could be demonstrated. That would be the power of HTML5 sets in motion.

The base component

Famo.us has a nice component that could be leverage for that: the ContainerSurface. It is basically a small context that can be clipped. By living in the same space of your main web site, it allows interesting demonstration patterns where you could demonstrate your app. The problem is to display this context exactly on the device that you want to present.

By using an adaptive or a responsive SVG, you can extract coordinates of the device screen where you want to present your app. You can then instantiates a ContainerSurface on this same coordinates and put you app as its content.

In this little plugin fview-devices for famous-views, a Meteor package, this is exactly what is done. Here is a little demonstration of it:

You can also play with it in this live demo: fview-devices.

Conclusion

Beyond this little example, some interesting points emerge such as the capability to mix SVG and Famo.us. It paves the way to further enhancements. For instance, CSS Transform and Animation are possible in SVG. Unfortunately, they are not hardware accelerated. Worst, some browsers have very uneasy bugs to circumvent. By extracting portions of SVG and putting them into Famo.us surfaces, you regain hardware acceleration and circumvent issues from wrong implementations. Basically, you open up wider the capability to use SVG to the mobile platforms.

It seems to me that a new story of apps using SVG, Famo.us and Meteor is about to begin. Happy coding.

Famo.us dot loader animation using Meteor's Famous-Views

A simple customizable dot loader ported for famous-views:

Source code: fview-dotloader

Demo site: fview-dotloader

Original work: LeXXik and Talves.

Famo.us FlexGrid in CoffeeScript with Meteor

Did I just post something similar few hours ago? Indeed very similar. But this time, this goes on a very different scale. The same demonstration is now reactive with datasources coming from a MongoDB, your session or any reactive dictionary that Meteor can provide. 

But wait... There's more. Actually, this is not a piece of code that you will paste into your Meteor project. It's a plugin. One command and one line of templating and it is set. One line of templating means: in just one single line of code.

This is all made possible thanks to the efforts of Gadi Cohen's excellent package's Famous-Views and his community (in which I contribute a bit).

Basically, here is how it works. Famo.us components are registered in the Meteor's templating engine. It can be regular components or home made ones. Using your favorite templating language, being Spacebar or Jade, you create the layout of your app. You connect your reactive datasource in your templating if they are already available or via small template helpers à la Meteor.  It's like Famo.us/Angular with a full stack JS framework. And if you are using Jade, it is like drawing the Famo.us rendering tree with your code and connect it with reactive data source.

As an example, here is the code required for creating the example displayed in the video:

// This is pretty basic for every mobile app. 
head
  title FlexGrid test
  meta(charset='utf-8')
  meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
  meta(name='apple-mobile-web-app-capable', content='yes')
  meta(name='apple-mobile-web-app-status-bar-style', content='black')
  meta(name='apple-mobile-web-app-capable', content='yes')
  meta(name='mobile-web-app-capable', content='yes')
body
  // Every Famo.us apps starts with a context.
  +famousContext id="mainCtx"
    // The code is divided into reusable templates
    // looking very much like web components.
    +flexGridExample

template(name='flexGridExample')
  // Now we create our 'render tree'.
  +Scrollview id='scrollview'
    // Here is the FlexGrid: it's indeed a single line of code!
    +FlexGrid id='flexgrid'
      // Here, I connect my datasource: a reactive array.
      +famousEach items
        // I use the available values in each item of the array
        // Note that CSS styles can be passed as reactive value,
        +Surface class='surf' properties=color
          // Or as reactive content.
          p= name

Simple. The community has also brought some others nice plugins that speeds up the creation of your app. The number of plugins available is growing fast.

Famo.us FlexGrid in CoffeeScript

A simple Pen to demonstrate how inheriting from a View by recreating Shu Liu's FlexGrid in CoffeeScript.

PS: Watch it in CodePen to better play with the viewport's size. It's nicely animated.

See the Pen FlexGrid in CS by Pierre-Eric Marchandet (@PEM--) on CodePen.

A better inheritance base class for Famo.us widget in Meteor

In former articles, I've proposed a base class for inheriting from Famo.us. There was something odd on the way I was using the DEFAULT_OPTIONS. Actually, it should be a static members. It makes the code even easier to write.

Here is my fixed example:

class @MyWidget extends famous.core.View
  DEFAULT_OPTIONS:
    size: [undefined, undefined]
    # ... Put your expected defaults here
  constructor: (@options) ->
    super @options
    # ... Put your remaining initialization code here

A reactive favico for Meteor: rxFavico

I've packaged the nice favico.js project for Meteor: rxFavico. The added bonus is that it's now reactive. You simply modify a reactive dictionary, your favico changes automatically and all your associated display as well. This is handy for coupling it with a mailbox widget or the results of tests while developing.

Here is how to install it:

meteor add pierreeric:rxfavico

Here is an example in CoffeeScript for using it:

rxFavico.set 'count', 10

The source are available on Github.

CSS color manipulation and normalize in CoffeeScript

Following my former article Create your CSS styles in CoffeeScript for Meteor, I've updated the CSSC packages to Meteor 1.0.0 and add some new features and plugins. You can now add multiple rules in one call and calls are chainable:

if Meteor.isClient
  Meteor.startup ->
  @maincss = new CSSC
  @maincss
    .add 'html',
      backgroundColor: CSSC.yellow
      fontFamily: 'Helvetica Neue, Arial, sans-serif'
    .add 'body',
      fontSize: CSSC.px 20
    .add ['h1', 'h2'],
      backgroundColor: CSSC.red

A new plugin allows to create the same rules as Normalize.css: CSSC-Normalize. Just add it classically:

meteor add pierreeric:cssc-normalize

The CSSC-Colors has been updated with color manipulation features:

# You can create basic RGB color from an hex String
c = new CSSC.Clr '#FF4136'
# From an hex string with alpha transparency
c = new CSSC.Clr ['#FF4136', .3]
# From the provided colors
c = new CSSC.Clr CSSC.yellow
# From some RGB value
c = new CSSC.Clr [255, 60, 0]
# From some RGB value with alpha transparency
c = new CSSC.Clr [255, 60, 0, .3]
# From some HSL value
c = new CSSC.Clr ['hsl', .5, 1, .5]
# From some HSL value with alpha transparency
c = new CSSC.Clr ['hsl', .5, 1, .5, .3]

# Once you have chosen your color, whatever the color schemes
#  that you use, you can modify its value.
# Lets add some 20% saturation
c.set 's', 1.2 * c.get 's'
# Lets lighten it by 30%
c.set 'l', 1.3 * c.get 'l'
# Lets make less opaque by 10%
c.set 'a', .9 * c.get 'a'

# Now that we are finished with it use as a simple string where you want.
# Through an automatic conversion
String c
# As a regular hex string
c.toString()
# As a CSS rgba value
c.rgba()  # rgba(255, 60, 0, .3)
# As a CSS hsl value
c.hsl()   # hsl(240, 100%, 50%)
# As a CSS hsla value
c.hsla()   # hsl(240, 100%, 50%, .3)