htop, a better CLI process viewer

Inside my CLI, I sometime like to see which process eats up my CPU or my RAM. top is generally a nice utility for that kind of tasks. But, there is a better and cleaner alternative: htop. A comparison picture is worth a thousand words.

Install it on OSX using:

brew install htop

Famo.us polaroid tutorial in CoffeeScript and within Meteor

Introduction

Since Famo.us v0.2.0, some new tutorials have been added to the Famo.us University. The 1st available project is a Polaroid tutorial which teaches you how to create your own app and widget with Famo.us. Just play this little video to check how incredible the animations are with plain simple HTML5 technologies. Note that, this example is completely responsive and I've tested it on smartphones, tablets and desktops.

This example project is not just beautiful. It works very well in iOS, Chrome on Android, Chrome, Safari and Opera. There are little flickers on Firefox but it seems more due to the browser than to the framework. Though, it is completely useable. As ever, the stock Android browser is definitely a knightmare. Meaning that, if you plan on encapsulating your WebApp in a native browser, Apache Cordova is the way to go for iOS but you will need to encapsulate Chromium if you plan on shipping your WebApp for Android. This can be achieve with projects such as Crosswalk, for instance.

Though, the tutorial is incredibly nice and goes smoothly over every difficulties that you may encounter (one of the best tutorial, that I've seen so far), I didn't choose the same way as described. Actually, JavaScript's inheritance model is such a pain to write, that I prefer avoiding it as much as I can. Thus, I've recreated it using another set of tools and it runs as smoothly as the original:

• CoffeeScript as a replacement of JavaScript.
• Jade as a replacement of HTML.
• Stylus as a replacement of CSS.
• Meteor as a replacement of LiveReload, Express and Grunt.

The result is a very small set of code that produces the same WebApp in a fraction of the necessary code and installation steps.

Note that the following tutorial is not a replacement of the one from the Famo.us University. It is a complement to show how this framework is easily integrable with other powerful HTML5 technologies.

Configuring your Meteor project

Create your Meteor project with the dead simple following command:

meteor create Polaroid
cd Polaroid

Now create a common fullstack JS directory structure only targeted for a client WebApp without server side integration:

mkdir -p client/lib client/models client/startup client/stylesheets client/views lib packages public/img

Remove the automatically created files:

rm -rf Polaroid.*

Add the following package with Meteor:

meteor add coffeescript
meteor add stylus

And this one with Meteorite:

mrt add jade
mrt add famono

Easy as pie.

Get the unique required asset from Famo.us

This example WebApp needs a simple public/img/camera.png that you'll find in the Zip file that Famo.us provides in their download section.

Create your style file

The style file client/stylesheets/app.styl is kept as its minimum as most of the CSS rules are handled by Famo.us.

@import 'nib'

html
  background: #404040

body
  -webkit-touch-callout: none
  user-select: none
  font-family: 'AvenirNext-Medium'

Create your HTML file with Jade

As before for the style file, the main HTML file client/index.jade is kept as its minimum as most of the tags are handled by Famo.us

head
  title Famo.us Polaroid
body
  +index

template(name='index')

That's it, a simple template loaded by Meteor.

Create some namespaces

I like to isolate my code from the code that I import. Thus, I create 2 namespaces in 2 separate files.

• One is dedicated to the WebApp in client/lib/polaroid.coffee:

  # Declare Polaroid namespace
  window.Polaroid ?= {}
  

• The other one is dedicated to Famo.us in client/lib/famous.coffee:

  # Declare Famo.us namespace
  window.Famous ?= {}
  

The lib directory is used as it is loaded first by Meteor.

The model, a Picasa album

With this example, we do not leverage the power of the full JS stack that Meteor provides. We only use its features of live reloading the code and its easy to use build capability. The model is the same as the one provided in the Famo.us Zip file that you've downloaded except that it is created as a CoffeeScript file named client/models/slidedata.coffee:

Polaroid.SlideData =
  userId: "109813050055185479846"
  albumId: "6013105701911614529"
  picasaUrl: "https://picasaweb.google.com/data/feed/api/user/"
  queryParams: "?alt=json&hl=en_US&access=visible&fields=entry(id,media:group(media:content,media:description,media:keywords,media:title))"
  defaultImage: "https://lh4.googleusercontent.com/-HbYp2q1BZfQ/U3LXxmWoy7I/AAAAAAAAAJk/VqI5bGooDaA/s1178-no/1.jpg"
  getUrl: ->
    @picasaUrl + @userId + "/albumid/" + @albumId + @queryParams
  parse: (data) ->
    urls = []
    data = JSON.parse(data)
    entries = data.feed.entry
    i = 0

    while i < entries.length
      media = entries[i].media$group
      urls.push media.media$content[0].url
      i++
    urls

A simple dictionary with 2 methods.

Requiring the Famo.us libraries

I simply load all the Famo.us libraries in a single location. This drastically reduces the amount of code. I use the same file client/startup/famous.coffee to load the polyfills and to create the Famo.us's singleton so that if I enhance this WebApp with multiple page loaded with a router, there will be no additional loadings or instantiations.

# Import famous.css
require 'famous/core/famous'
# Adds the famo.us dependencies
require 'famous-polyfills'
# Wait for document ready
$(document).ready ->
  # Load Famo.us libraries
  Famous.Engine           = require 'famous/core/Engine'
  Famous.View             = require 'famous/core/View'
  Famous.Transform        = require 'famous/core/Transform'
  Famous.Surface          = require 'famous/core/Surface'
  Famous.StateModifier    = require 'famous/modifiers/StateModifier'
  Famous.Timer            = require 'famous/utilities/Timer'
  Famous.ImageSurface     = require 'famous/surfaces/ImageSurface'
  Famous.ContainerSurface = require 'famous/surfaces/ContainerSurface'
  Famous.Lightbox         = require 'famous/views/Lightbox'
  Famous.Utility          = require 'famous/utilities/Utility'
  Famous.Easing           = require 'famous/transitions/Easing'
  Famous.ContainerSurface = require 'famous/surfaces/ContainerSurface'
  Famous.Transitionable   = require 'famous/transitions/Transitionable'
  Famous.SpringTransition = require 'famous/transitions/SpringTransition'
  # Register transitions
  Famous.Transitionable.registerMethod 'spring', Famous.SpringTransition
  # Create main context
  Polaroid.mainCtx = Famous.Engine.createContext()

Instantiate the main template

The content of the main template is set under the client/index.coffee that goes along with our Jade file:

Template.index.rendered = ->
  # Get request to Picasa API
  Famous.Utility.loadURL Polaroid.SlideData.getUrl(), (data) ->
    data = Polaroid.SlideData.parse data
    # Instantiate the AppView with our URL's data
    Polaroid.appView = new Polaroid.AppView data: data
    Polaroid.mainCtx.add Polaroid.appView

Creating the views

The rest of this tutorial is pretty close to the one from the Famo.us University except that it uses the object model provided by CoffeeScript instead of the one from JavaScript. You should fill this 3 files while following the tutorial from the Famo.us University so that you get the nice explanations that they provided us.

The views are composed of 3 files:

• client/views/appview.coffee

  $(document).ready ->
  
    class Polaroid.AppView extends Famous.View
      DEFAULT_OPTIONS:
        data: undefined
        cameraWidth: 0.6 * window.innerHeight
      constructor: (@options) ->
        @DEFAULT_OPTIONS.slideWidth = 0.8 * @DEFAULT_OPTIONS.cameraWidth
        @DEFAULT_OPTIONS.slideHeight = @DEFAULT_OPTIONS.slideWidth + 40
        @DEFAULT_OPTIONS.slidePosition = 0.77 * @DEFAULT_OPTIONS.cameraWidth
        @constructor.DEFAULT_OPTIONS = @DEFAULT_OPTIONS
        super @options
        @createCamera()
        @createSlideshow()
  
      createCamera: ->
        camera = new Famous.ImageSurface
          size: [@options.cameraWidth, true]
          content: 'img/camera.png'
          properties:
            width: '100%'
        cameraModifier = new Famous.StateModifier
          origin: [0.5, 0]
          align: [0.5, 0]
          transform: Famous.Transform.behind
        @add(cameraModifier).add camera
  
      createSlideshow: ->
        slideshowView = new Polaroid.SlideshowView
          size: [@options.slideWidth, @options.slideHeight]
          data: @options.data
        slideshowModifier = new Famous.StateModifier
          origin: [0.5, 0]
          align: [0.5, 0]
          transform: Famous.Transform.translate 0, @options.slidePosition, 0
        slideshowContainer = new Famous.ContainerSurface
          properties:
            overflow: 'hidden'
        @add(slideshowModifier).add slideshowContainer
        slideshowContainer.add slideshowView
        slideshowContainer.context.setPerspective 1000
  

• client/views/slideshowview.coffee

  $(document).ready ->
  
    class Polaroid.SlideshowView extends Famous.View
      DEFAULT_OPTIONS:
        size: [450, 500]
        data: undefined
        lightboxOpts:
          inOpacity: 1
          outOpacity: 0
          inOrigin: [0, 0]
          outOrigin: [0, 0]
          showOrigin: [0, 0]
          inTransform: Famous.Transform.thenMove Famous.Transform.rotateX(0.9), [0, -300, -300]
          outTransform: Famous.Transform.thenMove Famous.Transform.rotateZ(0.7), [0, window.innerHeight, -1000]
          inTransition: duration: 500, curve: Famous.Easing.outBack
          outTransition: duration: 350, curve: Famous.Easing.inQuad
  
      constructor: (@options) ->
        @constructor.DEFAULT_OPTIONS = @DEFAULT_OPTIONS
        super @options
        @rootModifier = new Famous.StateModifier
          size: @options.size
          origin: [0.5, 0]
          align: [0.5, 0]
        @mainNode = @add @rootModifier
        @createLightbox()
        @createSlides()
  
      createLightbox: ->
        @lightbox = new Famous.Lightbox @options.lightboxOpts
        @mainNode.add @lightbox
  
      createSlides: =>
        @slides = []
        @currentIndex = 0
        console.log @options.data
        for url in @options.data
          slide = new Polaroid.SlideView
            size: @options.size
            photoUrl: url
          @slides.push slide
          slide.on 'click', @showNexSlide
        @showCurrentSlide()
  
      showCurrentSlide: ->
        @ready = false
        slide = @slides[@currentIndex]
        @lightbox.show slide, =>
          @ready = true
          slide.fadeIn()
  
      showNexSlide: =>
        return if @ready isnt true
        @currentIndex++
        if @currentIndex is @slides.length
          @currentIndex = 0
        @showCurrentSlide()
  

• client/views/slideview.coffee

  $(document).ready ->
  
    class Polaroid.SlideView extends Famous.View
      DEFAULT_OPTIONS:
        size: [400, 450]
        filmBorder: 15
        photoBorder: 3
        photoUrl: Polaroid.SlideData.defaultImage
        angle: -0.5
  
      constructor: (@options) ->
        @constructor.DEFAULT_OPTIONS = @DEFAULT_OPTIONS
        super @options
        @rootModifier = new Famous.StateModifier
          size: @options.size
        @mainNode = @add @rootModifier
        @createBackground()
        @createFilm()
        @createPhoto()
  
      createBackground: ->
        background = new Famous.Surface
          properties:
            backgroundColor: '#fffff5'
            boxShadow: '0 10px 20px -5px rgba(0, 0, 0, 0.5)'
            cursor: 'pointer'
        @mainNode.add background
        background.on 'click', =>
          @_eventOutput.emit 'click'
  
      createFilm: ->
        @options.filmSize = @options.size[0] - 2 * @options.filmBorder
        film = new Famous.Surface
          size: [@options.filmSize, @options.filmSize]
          properties:
            backgroundColor: '#222'
            zIndex: 1
            # Make surface invisible to pointer events
            pointerEvents: 'none'
        filmModifier = new Famous.StateModifier
          origin: [0.5, 0]
          align: [0.5, 0]
          transform: Famous.Transform.translate 0, @options.filmBorder, 1
        @mainNode
          .add filmModifier
          .add film
  
      createPhoto: ->
        photoSize = @options.filmSize - 2 * @options.photoBorder
        photo = new Famous.ImageSurface
          size: [photoSize, photoSize]
          content: @options.photoUrl
          properties:
            zIndex: 2
            # Make surface invisible to pointer events
            pointerEvents: 'none'
        @photoModifier = new Famous.StateModifier
          origin: [0.5, 0]
          align: [0.5, 0]
          transform: Famous.Transform.translate 0, @options.filmBorder + @options.photoBorder, 2
          opacity: 0.01
        @mainNode
          .add @photoModifier
          .add photo
  
      fadeIn: =>
        @photoModifier.setOpacity 1, {duration: 1500, curve: 'easeIn'}
        @shake()
  
      shake: ->
        @rootModifier.halt()
        @rootModifier.setTransform Famous.Transform.rotateX(@options.angle), {duration: 200, curve: 'easeOut'}
        @rootModifier.setTransform Famous.Transform.identity, {method: 'spring', period: 600, dampingRatio: 0.15}
  

Further words

My integration is not as proper as I would like it to be. Each class declaration relies on a ready event that I did not succeed in removing. Identically, my class constructors call their parent's one explicitly. Feel free to post some comments if you have a better integration.

Preview markdown in your finder

Sidre Sorhus has created an interesting set of QuickLook plugins for the OSX's Finder. Among them, there is a Markdown previewer. Very handy. Install these plugins with this command:

brew cask install qlcolorcode qlstephen qlmarkdown quicklook-json qlprettypatch quicklook-csv betterzipql webp-quicklook suspicious-package

Never cry again after an unfortunate "rm -rf"

Sidresorhus has just published an awesome package named trash. This little CLI command delete your files and folders by moving them into your OS's trashcan. Beside being a secure rm command, it simplifies it when you are removing a tree of files. Super nice.

It supports Windows, OSX and Linux.

The Cult of Gulp: Independent preprocessor for Gulp

In a former post (A gulp of coffee: your gulpfile in coffeescript), I've shown how to bootstrap CoffeeScript in Gulp. There is now a far better solution than mine that does not require any additional file: Cult.

This little CLI just analyse the extension and automatically requires the right REPL. A time saver!

Famo.us gulped bumped to v0.2.0

I've just updated my sample project for building a Famo.us v0.2.0 with Gulp.

I've also added a simple example to show how you can use the HeaderFooterLayout to layout the basis of your SPA:

Look at how simple it is to set content so that it takes advantage of the complete browser's height and width. Centering content is so easy as well. No funny tricks, just a simple code that works well on mobile, tablet and regular desktop browsers.

HeaderFooterLayout = require 'famous/views/HeaderFooterLayout'
layout = new HeaderFooterLayout
  headerSize: 100
  footerSize: 50
mainContext.add  layout
layout.header.add new Surface
  content: 'Header'
  size: [undefined, 100]
  classes: ['header-surface']
  properties:
    lineHeight: '100px'
    textAlign: 'center'
layout.content.add new Surface
  content: 'Content'
  size: [undefined, undefined]
  properties:
    lineHeight: '300px'
    textAlign: 'center'
layout.footer.add new Surface
  content: 'Footer'
  size: [undefined, 50]
  classes: ['footer-surface']
  properties:
    lineHeight: '50px'
    textAlign: 'center'

Famo.us v0.2.0 has landed on Github

Time to update your projects!

Here is the Changelog.

getWifi: Invited at the Beta

Yesterday, I was invited at the beta testing of getwifi.io. It works like a charm and simplify greatly the way you distribute your WiFi access to your friends and co-workers. I like it a lot.

You should check it out and vote for them at theSummit.

They really deserve some love!

getWifi: OpenID for your WiFi access

This project is so nice that I have to share it. Watch their funny video and vote for them at TheSummit.



The future of WiFi connectivity is in our hands.

Pretty print in MongoDB

The bare minimum: pretty

Use JS's pretty function to prettify your JSON documents or collections within the Mongo's shell:

db.find({}).pretty()

Here's the difference with a simple example:

You can even turn it as your default in your preference file ~/.mongorc.js using this command:

echo "DBQuery.prototype._prettyShell = true" >> ~/.mongorc.js

Thanks to Lee Machin for this tip: https://coderwall.com/p/3vfw9a

The cleanest one: Mongo-Hacker

Mongo-Hacker adds much more than a simple prettification: it adds colors and some additional API. Installing it with the following commands:

npm -g install mongo-hacker

Now, here is the same example with some nice hacking:

Easy sending your public SSH key to your remote servers

ssh-copy-id is a simple tool that send your public SSH key to a remote server. Installing it on OSX:

brew install ssh-copy-id

And sending your public ssh keys is done like so on a local server at 192.168.1.32:

ssh-copy-id root@192.168.1.32

Note: If you have never generated your SSH key pair, simply issue the following command:

ssh-keygen -t rsa -C 

DevOps on OVH's cloud with Saltstack

Introduction

OVH is a french company that provides cheap virtual instances. I've selected a VPS, a Virtual Private Server, on Ubuntu 13.10. Its price is less than 2€ per month.

In this tutorial, I'll expose my way of using these instances using a powerful DevOps tool named Saltstack. With a single command, I can ping all the instances that I manage, ensure that all the servers run my latest NGINX configuration, etc, ... Everything is done from my Mac at home. It is reproducible. Therefore on risky configuration settings, I can recreate a virtual machine reproducing an existing environment (as described in my previous articles: Virtualize your servers and Fill up your servers automatically with goodies), checking my new configuration before applying it on a production server.

Note : For the story, I'm a simple customer of OVH. I don't own any share in this company. This is not an advertisement for their service. I only share it as they provide a good service and as VPS may be used to deploy almost any kind of software that you need. This tutorial could be applied to other cloud service.

Installing Saltstack master on my personal computer

Installation of Saltstack is done on OSX with Homebrew:

brew install saltstack

Now, we are going to increase the opened sockets capacity of OSX:

sudo launchctl limit maxfiles 4096 8192

When installed from Homebrew, Saltstack doesn't come with the default configuration files. Theses files are described in the Saltstack documentation pages: 21.6. Configuration file examples. Saltstack expects to see at least 2 files, master and minion into the uncreated /etc/salt directory. Let's fix that:

sudo mkdir /etc/salt

And copy the content of master and minion into this freshly created directory.

Before customizing your master file, you should know your IP address in the LAN. Here's a simple command that analyse your current configuration (note that I've setup it as an alias in my personal dotfiles as ips command).

ifconfig -a | perl -nle'/(\d+\.\d+\.\d+\.\d+)/ && print $1'

Now edit the /etc/master file to reflects the opened sockets capacity and as I dont' like sudoing each time I have to launch a command, add your username to the allowed users (here it's PEM, of course):

max_open_files: 8192
user: PEM
interface: 192.168.1.30
file_roots:
  base:
    - /Users/PEM/Projects/SolutionsM3/DevOps/states
pillar_roots:
  base:
    - /Users/PEM/Projects/SolutionsM3/DevOps/pillar

Note that I've setup my Saltstack master so that its all the formulas that I deploy are stored in my personal directory. This allows me to modify every deployed configuration and save them with Git once I've finished working on them. This is what DevOps is for: your infrastructure and administration as simple script files with formulas reproducible, idempotent, evolving, without connecting manually to every servers each time you need to adjust a simple variable.

Prepare your SSH configuration

First, I ensure that I can connect myself to my VPS without password. I don't like sudoing nor I don't like being asked for password when my security has been tightened. OVH sets up an OpenSSH server on all the instances.  OSX comes already bundled with OpenSSH, the client and the server. Though, there is one step that you need to do, if you haven't done it before : generating your personal SSH keychain. This is done with a simple bundled command:

ssh-keygen

This command generate the following files in your home directory:

/Users/PEM/.ssh
├── id_rsa
├── id_rsa.pub
└── known_hosts

We are going to authorize ourselves on our VPS with your public key:

cat ~/.ssh/id_rsa.pub | ssh root@vpsXXXXX.ovh.neta 'cat >> .ssh/authorized_keys'

Where XXXXX is the VPS's number that OVH has provided you.
Now connect yourself to your VPS using a simple ssh command and without password anymore:

ssh root@vpsXXXXX.ovh.net

Declaring your VPS as a minion

Normally, your Saltstack master should be visible from your minions, the distant servers that you need to manage. Using this configuration, Saltstack is able to handle thousands of servers in the blink of an eye by relying on secured AES tunnel relying on ZeroMQ.

But in my case, I'm on my personal Mac, at home, thus, in my LAN. Even if I modify my gateway, my ISP may change my IP whenever it wants it. I could setup a DynDNS service but each time I'll travel to another one location, I would be forced to set it up again. Thankfully, last year, Saltstack added an SSH transportation capabilities. It's a bit slower but it is as powerful as a real master / minion configuration using ZeroMQ. All you have to do is to create a list (a roster) of the servers that you want to manage in your /etc/salt/roster file with this info:

vpsXXXXX:
  host: vpsXXXXX.ovh.net

Now, whenever I want to check by a ping all my servers, I use a single command:

salt-ssh '*' test.ping

If I want to target a specific one:

salt-ssh 'vpsXXXXX' test.ping

With simple naming scheme, I'm able to achieve deployment of a specific package on a specific group of servers. Nifty.

We install remotely the appropriate Saltstack packages on every server:

salt-ssh '*' -r 'apt-get install -y salt-minion'

A simple example

Deploying the tree command on all my servers or checking that it has already been deployed from the comfort of my coach is done like this. In my DevOps project, I've set up 2 files:

├── pillar
└── states
    ├── top.sls
    └── tree.sls

The states/top.sls file declare all the available formulas that I want to apply on every servers. In this simple example it contains only a basic rule to install the tree command:

base:
  '*':
    - tree

And for the states/tree.sls file, just a simple call to the Saltstack's module pkg, which is able to handle almost every Linux packaging tools that I've been playing with:

tree:
  pkg:
    - installed

Time for the installation. As the Saltstack's state are idempotent, I can run this command every time I want. It will only execute it where it is required:

tree:
salt-ssh '*' -c /etc/salt state.highstate

With this installation, I'm capable of checking the tree of files exposed by NGINX on all my servers with a single command:

salt-ssh '*' -r 'tree /var/www'