Renato Carvalho renatocarvalho

Data Down / Actions Up
- http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
- http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input
Plain JSBin's
- http://rwjblue.jsbin.com/pixeki/edit?html,js,output
Ember Version Base JSBin's
- 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output
1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

	# encoding: utf-8
	xml.instruct!

	# Drop this file in your source directory
	#
	# Uses the builder gem.
	# Add
	# gem 'builder', '~> 2.0'
	# to the Gemfile, and run builder install
	#

	<!DOCTYPE html>
	<html lang="fr" manifest="/manifeste.appcache">
	<head>
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
	<meta charset="UTF-8">
	<!-- Meta SEO -->
	<title>Web App</title>
	<meta name="author" content="author">
	<meta name="description" content="Description">
	<!-- RWD -->

	doctype html
	html.no-js
	head
	meta charset="utf-8"
	meta content="IE=edge" http-equiv="X-UA-Compatible"

	title Title

	meta content="width=device-width,initial-scale=1" name="viewport"

	// Created by Max Luster (@maxluster)
	// Usage instructions at https://bugsnag.com/blog/responsive-typography-with-chained-media-queries
	// Requires SASS >= 3.3
	// Enhanced by Breakpoint 2.4.x and Compass 1.0 (alpha)
	// For SASS 3.2.x support, use https://gist.github.com/maxluster/c9ecc6e4a6770e507c2c

	// Provides a simplified syntax for chaining media queries across named or numeric breakpoints
	@mixin responsive($properties, $default-value, $responsive-values){

	// No named breakpoints by default

	/*
	This is for demonstration purposes. Ideally, you should never use the star selector.
	I recommend that you use this early on in your development, and then once you've established
	your HTML element palette, go back and replace * with a comma-separated list of your
	tag names. Additionally, the !important shouldn't have to be used, but I'm leaving it here
	because some enterprising goons will probably copy and paste this directly into their project -
	the !important will ensure these settings override other attempts that were either never
	deleted or are part of an installed CSS file the user is unaware of.
	*/
	* {

	module ImagesHelper
	# Acts as a thin wrapper for image_tag and generates an srcset attribute for regular image tags
	# for usage with responsive images polyfills like picturefill.js, supports asset pipeline path helpers.
	#
	# image_set_tag 'pic_1980.jpg', { 'pic_640.jpg' => '640w', 'pic_1024.jpg' => '1024w', 'pic_1980.jpg' => '1980w' }, sizes: '100vw', class: 'my-image'
	#
	# => <img src="/assets/ants_1980.jpg" srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw" class="my-image">
	#
	def image_set_tag(source, srcset = {}, options = {})
	srcset = srcset.map { \|src, size\| "#{path_to_image(src)} #{size}" }.join(', ')

	header

	.row.nav-header

	.container

	.nav-header__logo
	img src="/"

	nav.nav-header__menu

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);