Installing Ansible dependencies on OSX 10.9 Error

If you encounter:

Run your pip install command with this environment variable:

Meteor: Rendering a Handlebars Template with Dynamically Loaded Data

In Meteor, a common problem is:

  1. Client performs an action (such as click, change page, etc)
  2. Data from action needs to be rendered inside a newly created template instance
  3. You need to utilize the rendered() function upon template render

As of 0.8.0 I found that there is no clear explanation on how to do this. Below I will try to explain how to accomplish it.

First we can setup our templates and css for this demo. This will be a simple RSS reader. We’ve created a sidebar template and an empty content div. The content template will be used to fill in the empty content div later on.

In the block below, we setup a client-side-only collection for the demo. We also make sure that the sidebar template can access a feeds array by using a handlebars helper to return one.

Next let’s look at our client action event. Here the client will click a feed on the sidebar and it will trigger an event. The event will use UI.renderWithData() to create a new template instance of Template.content with the feed data as a context. The feed data is retrieved from a findOne, using the click event’s data context (this._id). Finally we insert the new template inside div.content using UI.insert().

From here we can animate the div upon insert, using the rendered function.

And that is one way to utilize UI.render and UI.insert in order to dynamically render new data into your templates.

Demo on Meteor
View Full Source on GitHub!

Thanks for reading and please leave a comment!

Waiting Properly with Iron-Router Loading Templates

It’s common to use a loading template before your data is ready with Meteor.

Unfortunately as of Meteor 0.8.0 with IR 0.7.0, Iron-Router’s loading template uses your routes default layout. If you have custom helpers that depend on data in that layout you should actually be defining a special layout for your loading template. The pattern is below:

Tutorial: Creating a Parallax Web Page

I’m sure you’ve seen the various parallax sites strewn around the web. It’s a technique used to simulate depth, originally popularized by games in the 80s. In this tutorial I’ll show you how the effect is created using CSS3 and JavaScript. This tutorial is currently Chrome-only, I may update it in the future to add other browser prefixes, as in theory the technique will work for most.

Background

The parallax effect works by adjusting the scroll speed of the background element to be an offset from the foreground scroll speed. So as you scroll the backgrounds move subtly while the foregrounds still in place, creating a perspective illusion.

Source & Demo

Download the source files for this tutorial.

View the Demo

Files & Structure

First we want to grab some royalty-free photos to use. For this, we will use the Creative Commons Zero licensed photos on Unsplash

Download three, create a new folder, copy them to the folder and rename them to:
u1.jpg
u2.jpg
u3.jpg

Now you’ll want to create the following files in the same folder:
index.html
lax.js
style.css

HTML

We’ll setup the initial html structure. The only thing going on here is adding imports for the javascript and css files. Start with this:

Now add some divs, three for holding the background images and the others for holding foreground content. We also add a container div inside each content div to center the content while keeping the content background expanded across the width of the page.

CSS

Okay. So we have a lot going on in the CSS. First we setup the body with a new CSS3 property called perspective. This allows the CSS to control the perspective across the entire body.

Next, I’ve added some helper styles just to make the page look nice in most browsers, like zeroing margins and setting up a centered container class.

The main class to look at here is parallax-background. We set it’s CSS3 transform to translateZ(100px), this means that the offset for the div is 100px faster than the rest of our content. It makes the backgrounds subtly scroll upwards as we scroll down the page. We also make sure to set the Z-index for layering. The page is essentially several layers, higher value layers will be displayed above other lower value layers.

Our content styles are just absolute div’s inside relative div’s to make sure each background is seamless between each content block. The content is adjusted by a negative margin to ensure position as an overlay between each background image. Each background image is defined with the size property set to cover in order to scale the image based on browser window size.

JavaScript

We will be using the technique posted here on how to implement parallax scrolling semantically by harnessing the power of CSS3. The reason we use this is to minimize any performance degradation by implementing this effect.

It’s a simple function that adjusts the perspective.origin style on body to match the users current scroll state. This won’t work on mobile as onscroll is only updated once the page stops scrolling, but older techniques don’t work either.

Load up our index.html in the browser and now we have a fancy parallax web page. Please add any comments or suggestions.

Source & Demo

Download the source files for this tutorial.

View the Demo

Implementing a Scrolling Ticker in Meteor

In this tutorial, I’ll show you how to create an infinite scrolling ticker in Meteor.

View the demo here

I will be following the unofficial Meteor project structure displayed below:
meteor-structure

First, we setup our base Meteor project using Scores as a demo collection. We create the new Meteor collection and assign it to a global variable called Scores. This file is shared between client and server.

On the server-side, publish “scores” to the clients.

Now on the client-side, we subscribe to the publication called “scores”.

Add some initial scores for demo purposes:

Now we can add some view files.

We define a handlebars template called home and then iterate scoreList. The template scoreItem spits out the value of team and score to the client.

This function defines the scoreList helper. It returns Meteor’s client-side mini-mongo Scores collection. The server collection will already have been synced with the client and this array(cursor) will update reactively for us. We make sure to define a descending sort on the timestamp in order to push in the updates from the top.

Now we can define the actual ticker function.
We define the ticker as a startup method that runs an interval function. The interval method updates the oldest item in our collection every 3.5 seconds with a new timestamp. Upon seeing the document update, Meteor turns-around and publishes the update to all connected clients. With this in mind, every ticker on every client screen should be at the exact same position.

Once the client receives the updated document, we call a rendered function, which allows us to gracefully fade-in the change:

OSX Mavericks: Setting up a Fresh Development Environment

I recently upgraded my MBAir to Mavericks using the fresh install method highlighted here. The very first thing I do on any mac is immediately switch to tap-to-click and three-finger-gesture to use app exposé from the system preferences -> touchpad menu. And as always, I had to also setup my development environment again. So I went looking for commands to install Homebrew, upgrade ruby, install node, etc.

Detailed below is the documentation of my setup to help future googlers.

iTerm2

First install iTerm2, the de facto terminal for OSX.

Homebrew

Secondly you want to definitely install Homebrew using the pre-installed Ruby that comes with OSX Mavericks.

It will error out and prompt you to install Apple’s OSX Command Line Developer Tools. Press install to proceed. After they are done installing, run the above command again. Wait a few seconds, now you have Homebrew!

If you don’t receive the prompt you can manually trigger the Command Line Developer Tools install by invoking:

You’ll want to run the next command to check the health of your brew install:

This Is Key: It will tell you to update Xcode to 5.0.1, unlike previously, Mavericks required me to install Xcode in it’s entirety to get a proper gcc. To continue with the rest of this, you must install Xcode off the AppStore. PS: It will take forever. Funny enough, it will only install 5.0.0, but still works.

RVM

Now you’ll install RVM:

Reboot your terminal or run the source command (listed in the post-install instructions) to gain the rvm command.

Ruby 2

You will install Ruby 2.0.0 next. You’ll also want to set it as default.

The rvm install will compile for an infinity amount of time, take a break and have a kitkat or something.

Alfred

It’s a good time to install Alfred now. Go forth.

YADR

Finally, we install my absolute favourite dot files located over at YADR. This defines your vim environment and so much more.

Don’t be alarmed if it sits at the brew install screen for a few minutes. It will then roll through dozens of vim plugins to let you know it’s still alive and kicking. It might ask you some questions at the end, just enter your sudo password and hit 1/2 for each option.

Git Configuration

Now since YADR would have installed git, we should configure it at this point:

Nodejs

For nodejs, I prefer using the binary as I’ve had the most consistent success with it. Visit nodejs.org and grab it.

That should do it.

Meteor Templates: Using Find

When developing in Meteor you often want to retrieve the value of a form field. Luckily you can do this multiple ways. There is a lot of ambiguity over which technique to use, hopefully I will set things straight in this post.

The Setup

We will set up a small demo project here if you want to fiddle around with the ways you can retrieve form fields.

The Methods

Here we showcase four ways of getting the value from the field. You may use any way you’d like but you’ll notice that one of the methods in particular is much smaller with no dependencies. Each of these methods will be replacing the template events code we defined above.

The jQuery Method

“Did you use jQuery?”

The jQuery Event Redundancy Method

“Have you tried jQuery?”

The Pure jQuery Method

“Touched for the very first time”

The Best Method

“Just Meteor, yo”

And that’s it, I hope this was illuminating for you.

yeoman

Introduction to Yeoman, yo

I recently stumbled across yet another reason to relish javascript development: Yeoman!! Yeoman is a builder/tester/generator/runner/lover for javascript projects. It’s so well designed that I assume 99% of people reading this post already use it daily. For the remaining 1%, I’ll spend the rest of this post highlighting what it does and why you should use it.

Introduction

Yeoman is actually a combination of three tools, two of them already fairly popular. I’ll cover them in detail here just to solidify my knowledge AND to save you from browsing to each site manually.

Tools

Bower

bower
The first tool that Yeoman uses is Bower. Originally created at Twitter, Bower is a package manager for front-end libraries. Meaning you can use it to manage your projects front-end development libraries. AKA update to the latest version of jQuery, LESS, and Bootstrap in one go, cool! It has access to literally thousands of different packages now, covering even the most obscure library.

Grunt

grunt
Secondly we have Grunt, a task runner for projects. In a sentence, Grunt runs all your tests, compiles your LESS, minifies your JavaScript, and can even deploy your project. All from a single command. To set it all up you create a configuration file called a gruntfile. Thankfully Yeoman takes care of this for us, for the most part.

Yo

yeoman
Both of the above tools are already indispensable in terms of speeding up development time. To bind them all together we use Yo(Yeoman). Which also functions as a generator which creates all the scaffolding that you commonly include in every project.

In the Yeoman repository there is pretty much a generator for every javascript MVC/MVVM out there. If not, it’s easy to create one for yourself!

Installation

First, you must have npm installed, go to http://nodejs.org/ and download the binary file.
If you are installing to a server via ssh, you’ll want to use these instructions, lifted directly from https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

After npm is installed, you can install Yeoman:

No need to manually install Bower or Grunt, Yeoman itself installs the rest.

Setting up a new project

First we will create a new folder and navigate to it in the cli.

Next, we run a command that generates the default Yeoman webapp.

It will ask you some questions, like which packages you would you like to include, this is entirely configurable depending on which generator you run. For now we will keep all the options ticked and proceed with the scaffolding.

yeoman

Hint: you can navigate the list using your arrow keys and tick/untick options presented in the generator by pressing the space key

What if you forgot to include a dependency before running the scaffolding?! Well that’s easy to fix, you just make sure you are in your base project directory (./project-awesome) and run:

bower

Now we run your newly generated app by using:

You should automagically have a browser tab open up with your fresh webapp!

grunt

Tutorial: Learn How to Mimic the Slide-Out Panel Effect in jQuery

Demo

You may have seen this effect on various sites around the web. It closely mimics an interface design paradigm first seen on smartphones. Today I will show you how to code it yourself using jQuery.

First we want to setup a basic html layout and include jQuery:

Here we create a couple divs:
#hamburger is used as the top navigation bar and holds a button to activate the slide-out.
#slider will be a sidebar that appears when the button is activated
#main holds the main content of your site

Next we define our styles. They are the most important part of achieving the “slide-out” effect. We place this inside our head tags.

For this to work, we have positioned every div absolutely with a z-index. This is needed to perform the illusion that content is sliding away smoothly to reveal a sidebar. In reality the sidebar sits constantly underneath the #main div and we will just use css3 transforms to move our content out of the way.

You’ll notice that we have

defined in the slide-away class. This is used to move both #main and #hamburger to the left by 250px. It is a zero based function that starts out in the (left, top). We have also attached a transition definition

This is used to achieve the smooth tween. It will be applied to any css translations you use on #main and #hamburger.

To do the heavy lifting we will employ some jQuery. This sits at the bottom of the page just before the close body tag.

What this does is: when the button is clicked, we tell jQuery to toggle the slide-away style. The main and hamburger divs then translate smoothly to the right using pure css3.

Hope you have fun with this! Here is the complete code:

nginx Reverse-Proxying with Meteor

Just a quick post with my nginx configuration for reverse-proxying to Meteor.