Skip to content
Browse files

Experimenting with the Instagram API

  • Loading branch information...
0 parents commit 2587dfac970fe6baeb365a5d88bebbfe6645b506 César Salazar committed Jan 24, 2011
2 .gems
@@ -0,0 +1,2 @@
+sinatra
+haml
14 .gitignore
@@ -0,0 +1,14 @@
+secret.rb
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+*.sqlite3
+
+# OS generated files #
+######################
+.DS_Store
+Icon
+Thumbs.db
BIN .sass-cache/e4d05cd83f0d5601611deeb97855a866e6847d38/reset.sassc
Binary file not shown.
24 app.rb
@@ -0,0 +1,24 @@
+require 'rubygems'
+require 'sinatra'
+require 'sinatra/reloader' if development?
+require 'haml'
+require 'sass'
+require 'instagram'
+require 'json'
+
+get '/' do
+ haml :index
+end
+
+get '/photo' do
+ photos = Instagram::popular
+ p = photos.first
+ content_type :json
+ #image size can be 150, 306 or 612
+ { :username => p.user.username, :author => p.user.full_name, :taken => p.taken_at, :url => p.image_url(306) }.to_json
+end
+
+get '/stylesheets/global.css' do
+ content_type 'text/css', :charset => 'utf-8'
+ sass :global
+end
2 config.ru
@@ -0,0 +1,2 @@
+require 'app'
+run Sinatra::Application
55 public/javascripts/clockgram.js
@@ -0,0 +1,55 @@
+$(function(){
+
+ init();
+ setInterval('time()', 1000);
+
+})
+
+var update = function(){
+
+ var content = $('#photo');
+
+ content.fadeOut(1000, function(){
+ $.getJSON('/photo', function(data){
+ var photo = '<img class="photo" src="'+data.url+'"/>';
+ photo += '<h1 class="author">'+data.author+'</h1>';
+ photo += '<p class="username">'+data.username+'</p>';
+ photo += '<p class="taken">'+data.taken+'</h1>';
+ content.html(photo);
+ content.fadeIn(1000);
+
+ })
+ });
+
+}
+
+var time = function(){
+
+ var now = new Date();
+ var hours = now.getHours();
+ var minutes = now.getMinutes();
+ var seconds = now.getSeconds();
+
+ if(seconds%10 == 0){
+ update();
+ }
+ if(minutes == 0 && seconds == 0){
+ $('#hours').html(normalizeTime(hours));
+ }
+ if(seconds == 0){
+ $('#minutes').html(normalizeTime(minutes));
+ }
+ $('#seconds').html(normalizeTime(seconds));
+}
+
+var init = function(){
+ var now = new Date();
+ $('#hours').html(normalizeTime(now.getHours()));
+ $('#minutes').html(normalizeTime(now.getMinutes()));
+ $('#seconds').html(normalizeTime(now.getSeconds()));
+}
+
+var normalizeTime = function(t){
+ t = (t < 10) ? '0'+t : t;
+ return t;
+}
147 public/javascripts/timeago.js
@@ -0,0 +1,147 @@
+/*
+ * timeago: a jQuery plugin, version: 0.9.3 (2011-01-21)
+ * @requires jQuery v1.2.3 or later
+ *
+ * Timeago is a jQuery plugin that makes it easy to support automatically
+ * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright (c) 2008-2011, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+ $.timeago = function(timestamp) {
+ if (timestamp instanceof Date) {
+ return inWords(timestamp);
+ } else if (typeof timestamp === "string") {
+ return inWords($.timeago.parse(timestamp));
+ } else {
+ return inWords($.timeago.datetime(timestamp));
+ }
+ };
+ var $t = $.timeago;
+
+ $.extend($.timeago, {
+ settings: {
+ refreshMillis: 60000,
+ allowFuture: false,
+ strings: {
+ prefixAgo: null,
+ prefixFromNow: null,
+ suffixAgo: "ago",
+ suffixFromNow: "from now",
+ seconds: "less than a minute",
+ minute: "about a minute",
+ minutes: "%d minutes",
+ hour: "about an hour",
+ hours: "about %d hours",
+ day: "a day",
+ days: "%d days",
+ month: "about a month",
+ months: "%d months",
+ year: "about a year",
+ years: "%d years",
+ numbers: []
+ }
+ },
+ inWords: function(distanceMillis) {
+ var $l = this.settings.strings;
+ var prefix = $l.prefixAgo;
+ var suffix = $l.suffixAgo;
+ if (this.settings.allowFuture) {
+ if (distanceMillis < 0) {
+ prefix = $l.prefixFromNow;
+ suffix = $l.suffixFromNow;
+ }
+ distanceMillis = Math.abs(distanceMillis);
+ }
+
+ var seconds = distanceMillis / 1000;
+ var minutes = seconds / 60;
+ var hours = minutes / 60;
+ var days = hours / 24;
+ var years = days / 365;
+
+ function substitute(stringOrFunction, number) {
+ var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
+ var value = ($l.numbers && $l.numbers[number]) || number;
+ return string.replace(/%d/i, value);
+ }
+
+ var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
+ seconds < 90 && substitute($l.minute, 1) ||
+ minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
+ minutes < 90 && substitute($l.hour, 1) ||
+ hours < 24 && substitute($l.hours, Math.round(hours)) ||
+ hours < 48 && substitute($l.day, 1) ||
+ days < 30 && substitute($l.days, Math.floor(days)) ||
+ days < 60 && substitute($l.month, 1) ||
+ days < 365 && substitute($l.months, Math.floor(days / 30)) ||
+ years < 2 && substitute($l.year, 1) ||
+ substitute($l.years, Math.floor(years));
+
+ return $.trim([prefix, words, suffix].join(" "));
+ },
+ parse: function(iso8601) {
+ var s = $.trim(iso8601);
+ s = s.replace(/\.\d\d\d+/,""); // remove milliseconds
+ s = s.replace(/-/,"/").replace(/-/,"/");
+ s = s.replace(/T/," ").replace(/Z/," UTC");
+ s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+ return new Date(s);
+ },
+ datetime: function(elem) {
+ // jQuery's `is()` doesn't play well with HTML5 in IE
+ var isTime = $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
+ var iso8601 = isTime ? $(elem).attr("datetime") : $(elem).attr("title");
+ return $t.parse(iso8601);
+ }
+ });
+
+ $.fn.timeago = function() {
+ var self = this;
+ self.each(refresh);
+
+ var $s = $t.settings;
+ if ($s.refreshMillis > 0) {
+ setInterval(function() { self.each(refresh); }, $s.refreshMillis);
+ }
+ return self;
+ };
+
+ function refresh() {
+ var data = prepareData(this);
+ if (!isNaN(data.datetime)) {
+ $(this).text(inWords(data.datetime));
+ }
+ return this;
+ }
+
+ function prepareData(element) {
+ element = $(element);
+ if (!element.data("timeago")) {
+ element.data("timeago", { datetime: $t.datetime(element) });
+ var text = $.trim(element.text());
+ if (text.length > 0) {
+ element.attr("title", text);
+ }
+ }
+ return element.data("timeago");
+ }
+
+ function inWords(date) {
+ return $t.inWords(distance(date));
+ }
+
+ function distance(date) {
+ return (new Date().getTime() - date.getTime());
+ }
+
+ // fix for IE6 suckage
+ document.createElement("abbr");
+ document.createElement("time");
+}(jQuery));
68 views/global.sass
@@ -0,0 +1,68 @@
+@import 'reset'
+
+//Mixins
+
+@mixin leagueGothic
+ font-family: 'League Gothic'
+ line-height: 100%
+ text-rendering: optimizeLegibility
+
+@mixin clear
+ overflow: hidden
+
+@mixin round-corners($radius)
+ -webkit-border-radius: $radius
+ -moz-border-radius: $radius
+ -khtml-border-radius: $radius
+ border-radius: $radius
+ padding: $radius
+
+@mixin layout($columns, $width, $padding)
+ width: $width/$columns - ($padding)
+ padding-right: $padding
+
+@mixin box-shadow($value)
+ -moz-box-shadow: $value
+ -webkit-box-shadow: $value
+ box-shadow: $value
+
+@mixin letterpress($offset)
+ text-shadow: 0 $offset $offset #FFFFFF
+
+@mixin button($radius)
+ display: block
+ text-align: center
+ @include round-corners($radius)
+ padding: 10px 5px
+
+body
+ font-family: Helvetica, Arial, sans-serif
+ background: #000
+
+
+
+ #content
+ width: 700px
+ margin: 100px auto 10px
+ #time
+ color: #FFF
+ font-size: 40px
+ font-family: Helvetica
+ letter-spacing: -0.05em
+ margin-bottom: 10px
+ .photo
+ border: 10px solid #FFF
+ .author
+ margin-top: 10px
+ font-family: Helvetica
+ font-size: 40px
+ letter-spacing: -0.05em
+ opacity: 50
+ color: #FFF
+ .taken
+ font-family: Monaco
+ font-size: 15px
+ color: #FFF
+
+
+
8 views/index.haml
@@ -0,0 +1,8 @@
+#content
+ #time
+ %span#hours
+ %span.divider> :
+ %span#minutes
+ %span.divider> :
+ %span#seconds
+ #photo
12 views/layout.haml
@@ -0,0 +1,12 @@
+!!! Strict
+%html{ :xmlns => "http://www.w3.org/1999/xhtml" }
+ %head
+ %title
+ = @title || 'Sinatra Base'
+ %meta{ :'http-equiv' => 'Content-Type', :content => 'text/html; charset=utf-8' }
+ %link{:rel => 'stylesheet', :href => '/stylesheets/global.css', :type => 'text/css', :media => 'all'}
+ %script{ :src => 'http://code.jquery.com/jquery-1.4.4.min.js', :type => 'text/javascript' }
+ %script{ :src => '/javascripts/clockgram.js', :type => 'text/javascript' }
+
+ %body
+ = yield
31 views/reset.sass
@@ -0,0 +1,31 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
+ margin: 0
+ padding: 0
+ border: 0
+ outline: 0
+ vertical-align: baseline
+
+*focus
+ outline: 0
+
+body
+ line-height: 1
+ color: black
+ background: white
+
+ol, ul
+ list-style: none
+
+table
+ border-collapse: separate
+ border-spacing: 0
+
+caption, th, td
+ text-align: left
+ font-weight: normal
+
+blockquotebefore, blockquoteafter, qbefore, qafter
+ content: ""
+
+blockquote, q
+ quotes: "" ""

0 comments on commit 2587dfa

Please sign in to comment.
Something went wrong with that request. Please try again.