Analyzing Meteor's bundle size

source-map-explorer is an helpful tool for analyzing your browser payload.

For installing it:

npm i -g  source-map-explorer

And for using it while developing your apps:

source-map-explorer .meteor/local/build/programs/web.browser/app/app.js{,.map}

Thanks to "Totally tooling tips":

OSX: What to do when Meteor build never stops?

When your app starts to get big, you may end up using more than 256 files. On OSX, the build process may never finish the build owing to this nasty bug: https://github.com/meteor/meteor/issues/6952.

If you hit this limit, simply increase your kernel capabilities by creating a file named /Library/LaunchDaemons/limit.maxfiles.plist with the following content and reboot:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
        "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>limit.maxfiles</string>
    <key>ProgramArguments</key>
    <array>
      <string>launchctl</string>
      <string>limit</string>
      <string>maxfiles</string>
      <string>524288</string>
      <string>524288</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
    <key>ServiceIPC</key>
    <false/>
  </dict>
</plist>

You can check your new settings on the CLI:

$ ulimit -n
524288

See this thread for more informations: http://unix.stackexchange.com/questions/108174/how-to-persist-ulimit-settings-in-osx-mavericks

Tip: Open URL with iTerm2

In iTerm2, when you CLI displays an URL, simply hover it with ⌘ and click on it. It opens up a tab in your default browser.

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.