Meteor 1.3 - Simulate latency on publications

Snippet revamped for Meteor 1.3 and based on : Meteor Simulate high latency publish function

import { Meteor } from 'meteor/meteor';
import Future from 'fibers/future';
import Todo from '../Todo';

Meteor.publish('todo.public', function() {
  const future = new Future();
  Meteor.setTimeout(() => future.return(Todo.find()), 5000);
  return future.wait();
});

Staggered Menu with React and Velocity

This little animation integrates React and Velocity in Codepen for displaying a Menu with staggered items.

See the Pen React & Velocity - Staggered menu by PEM (@PEM--) on CodePen.

Simple hamburger button

Set on a real button for better browser compatibility.

See the Pen Simple hamburger by PEM (@PEM--) on CodePen.

Simple Ken Burns

See the Pen Simple Ken Burns by PEM (@PEM--) on CodePen.

Efficient Static Assets Pipeline with Webpack

A must seen video on WebPack:

Configure ESLint globally for Meteor 1.2 and React in Atom

Start by installing Atom's ESLint package linter-eslint via:

apm install linter linter-eslint

Now, install ESLint globally:

npm i -g eslint

Within Atom, use the settings of ESLint to check Use Global Eslint and set the Global Node Path to /usr/local.

To taylor ESLint to our needs, we are using its simple YAML grammar in ~/.eslintrc:

---
env:
  browser: true
  node: true
  es6: true
  meteor: true
  mongo: true
  jquery: true
ecmaFeatures:
  arrowFunctions: true
  blockBindings: true
  classes: true
  defaultParams: true 
  forOf: true
  jsx: true
  objectLiteralShorthandMethods: true
  objectLiteralShorthandProperties: true
  spread: true
  superInFunctions: true

Nice and readable.

[Edited: 09/10/2015]
The full source of this ~/.eslintrc file is available on my Github account: https://github.com/PEM--/dotfiles/blob/master/eslintrc

Exposing ES2015 classes with Meteor

Just a little post on exposing ES2015 classes with Meteor outside of the scope of its file. Pretty useful for React.

Footer = class Footer extends React.Component {
  render() {
    return (
      <footer>
        <section className='ui container'>
          <article>
            <ul className='fa'>
              <li><a className='fa-facebook' href='' target='_blank'></a></li>
              <li><a className='fa-twitter' href='' target='_blank'></a></li>
              <li><a className='fa-envelope' href='' target='_blank'></a></li>
            </ul>
          </article>
        </section>
      </footer>
    );
  }

};

Simple solution from Roger Chapman. Thank you guy.