Eric Gardner egardner

Ruby Dev Environment Setup on OSX

Thoughtbot's Laptop Script is an excellent place to start. Using this script removes the need to do any of the steps below except for the final one. If you plan to set up manually, install the following tools (in this order):

Xcode Command-line tools (xcode-select --install), or all of Xcode if running on Mac OSX 10.8 or lower
Homebrew package manager

Leaflet DZT Example

This is a quick example showing how to get Leaflet to handle image tile output generated by the Ruby DZT library, using Leaflet-Deepzoom as a bridge. For the time being only Leaflet 0.7.7 is supported, not the latest version.

Assuming you have a folder called images containing the image you want:

dzt slice images/image-file.jpg --output=tiles --format=jpg --tile-size=256 --overwrite=true

	source "https://rubygems.org"

	# Uncomment these gems if you are using Windows
	# gem "wdm", "~> 0.1.0", platforms: [:mswin, :mingw]
	# gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby]

	gem "bourbon", "~> 4.2"
	gem "middleman", "~> 4.0"
	gem "middleman-autoprefixer", "~> 2.6"
	gem "middleman-deploy", "= 2.0.0.pre.alpha"

	# If you do not have OpenSSL installed, change
	# the following line to use "http://"
	source "https://rubygems.org"

	# Uncomment these gems if you are using Windows
	# gem "wdm", "~> 0.1.0", platforms: [:mswin, :mingw]
	# gem "tzinfo-data", platforms: [:mswin, :mingw, :jruby]

	gem "bourbon", "~> 4.2"
	gem "middleman", "~> 4.0"

	// Use the Github Node library
	// Optional: use the Bluebird promise library to handle responses
	var GitHubApi = require('github')
	var gh = new GitHubApi({
	debug: true,
	Promise: require('bluebird')
	})

	// Get a User's public repos
	// Repos is a Bluebird Promise object. Traditional callback approach also works here.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
	</head>
	<body>

	//
	// URLs: let's stash these here and access later
	//
	var breitbartUrl = 'https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Ffeeds.feedburner.com%2Fbreitbart';
	var foxUrl = 'https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Ffeeds.foxnews.com%2Ffoxnews%2Fpolitics';
	var nytUrl = 'https://newsapi.org/v1/articles?source=the-new-york-times&sortBy=top&apiKey=08d58f2f94b0426e856bb17cb5a7657b'

	$(document).ready(function(){
	//
	// Let's stash our container div as a variable here so we can access it

	// Deep Equality comparison example
	//
	// This is an example of how to implement an object-comparison function in
	// JavaScript (ES5+). A few points of interest here:
	//
	// * You can get an array of all an object's properties in ES5+ by calling
	// the class method Object.keys(obj).
	// * The function recursively calls itself in the for / in loop when it
	// compares the contents of each property
	// * You can hide a "private" function inside a function of this kind by

	import React from 'react';
	import { StyleSheet, Text, View, WebView } from 'react-native';
	import { TabNavigator } from 'react-navigation';
	import Icon from 'react-native-vector-icons/SimpleLineIcons';

	// Icons & styles
	//
	const homeIcon = (<Icon name="home" size={24} />);
	const globeIcon = (<Icon name="globe-alt" size={24} />);
	const recentIcon = (<Icon name="rocket" size={24} />);

	{
	"presets": ["babel-preset-expo"],
	"env": {
	"development": {
	"plugins": ["transform-react-jsx-source"]
	}
	}
	}