Phil Gyford philgyford

## gist:9325233
https://gist.github.com/

## gist:9392908

* Sinatra
* Bootstrap SASS
* Compass
* A basic HTML structure.

<p>I recently made two new website which had to be done fairly quickly but still look good, be simple technically, be responsive and not be static. There are many ways to do this but I settled on using Sinatra, Bootstrap, SASS and Compass, and this is how I stitched that together. This isn't groundbreaking but might be useful for someone who wants to do something similar without piecing together parts and conventions.</p>

<p>You can see a skeleton of the project <a href="https://github.com/bergcloud/demo-sinatra-site">on GitHub</a>. Once you've got a copy locally, <code>cd</code> into <code>demo-sinatra-site/</code> and then for development you'll want to run these in separate windows:</p>

## exports.csv

          
            Country
            1999
            2000
            2001
            2002
            2003

            
              France
              19
              20
              30
              32
              9

            
              UK
              15
              22
              25
              20
              21

## exports.csv
Country,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012
Australia,2413484152.76067,2437003023.85486,2772986896.62896,2796505767.72315,3549109642.73715,3428155448.53847,3525590771.64296,3915332064.06093,4016127225.89316,4377869862.24661,5354462985.77668,5715085675.88756,6663551401.86916,9019859064.70211,11680176860.7222,13874095316.1273,14185049792.0081,15449644413.8564,16123392736.296,19275247074.8608,24616155988.8579,26334610472.5415,26231932031.3362,24060832943.3786,26236189096.1782,27497123571.3738,27321628427.5322,29290629962.9434,37674621653.085,45334256168.0645,47071950750.2886,52249430970.8814,54226716911.482,54747048903.8786,57999308197.8554,65772943272.9433,75792867981.7906,83305681640.3193,78216102557.1458,71335380373.4804,80643722916.5358,83715251690.4583,81504290498.1164,88231217239.3

## test.html
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

$( document ).ready(function() {

    $('a.link-1').on('click', function (ev) {
        ev.preventDefault();

## gist:1596128
phil@phils-mb:/usr/local$ git status
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#	Library/Aliases/mikmod
#	Library/Aliases/sshfs
#	Library/Contributions/examples/brew-audit.rb
#	Library/Contributions/examples/brew-fetch.rb
#	Library/Contributions/examples/brew-options.rb

## combine_feeds.php
<?php
/**
 * @package	Phil
 * Combine recent photos, writing, links, etc into one feed and one HTML/PHP include.
 *
 * NOTE: Required the dom.so extension to be enabled in php.ini
 *		 (It wasn't, by default, on Textdrive, 2013-03-14.)
 *
 * v1.4 2015-09-04
 *

## artists_map_photos.html
<!--
A form for a place.
When submitted, displays a list of music artists from that place.
And looks up the location with Google Geocoder and displays a map.
And displays Flickr photos from within that location.
REQUIRES:
  * Echo Nest API Key.
  * Google API Key (with access to JavaScript API and Geocoding API)
  * Flickr API key
-->

## google_oauth2_access_token.rb
# (create oauth2 tokens from Google Console)
client_id = ""
client_secret = ""
# (paste the scope of the service you want here)
# e.g.: https://www.googleapis.com/auth/gan
scope = ""


## chart.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <title>d3 - multiple charts with multiple lines</title>

  <!--
  Based on this example of drawing multiple d3 charts on one page:
    http://bost.ocks.org/mike/chart/
  With pointers from Lars Kotthof on Stack Overflow:

	* Sinatra
	* Bootstrap SASS
	* Compass
	* A basic HTML structure.

	<p>I recently made two new website which had to be done fairly quickly but still look good, be simple technically, be responsive and not be static. There are many ways to do this but I settled on using Sinatra, Bootstrap, SASS and Compass, and this is how I stitched that together. This isn't groundbreaking but might be useful for someone who wants to do something similar without piecing together parts and conventions.</p>

	<p>You can see a skeleton of the project <a href="https://github.com/bergcloud/demo-sinatra-site">on GitHub</a>. Once you've got a copy locally, <code>cd</code> into <code>demo-sinatra-site/</code> and then for development you'll want to run these in separate windows:</p>
	<html>
	<head>
	<title>Test</title>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script>

	$( document ).ready(function() {

	$('a.link-1').on('click', function (ev) {
	ev.preventDefault();
	phil@phils-mb:/usr/local$ git status
	# On branch master
	# Untracked files:
	# (use "git add <file>..." to include in what will be committed)
	#
	# Library/Aliases/mikmod
	# Library/Aliases/sshfs
	# Library/Contributions/examples/brew-audit.rb
	# Library/Contributions/examples/brew-fetch.rb
	# Library/Contributions/examples/brew-options.rb
	<?php
	/**
	* @package Phil
	* Combine recent photos, writing, links, etc into one feed and one HTML/PHP include.
	*
	* NOTE: Required the dom.so extension to be enabled in php.ini
	* (It wasn't, by default, on Textdrive, 2013-03-14.)
	*
	* v1.4 2015-09-04
	*
	<!--
	A form for a place.
	When submitted, displays a list of music artists from that place.
	And looks up the location with Google Geocoder and displays a map.
	And displays Flickr photos from within that location.
	REQUIRES:
	* Echo Nest API Key.
	* Google API Key (with access to JavaScript API and Geocoding API)
	* Flickr API key
	-->
	# (create oauth2 tokens from Google Console)
	client_id = ""
	client_secret = ""
	# (paste the scope of the service you want here)
	# e.g.: https://www.googleapis.com/auth/gan
	scope = ""
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>d3 - multiple charts with multiple lines</title>

	<!--
	Based on this example of drawing multiple d3 charts on one page:
	http://bost.ocks.org/mike/chart/
	With pointers from Lars Kotthof on Stack Overflow: