Mark's Musings: 2013

Saturday, December 14, 2013

Move it on down the line...i.e. learn the new.

I have noted that the postal mail delivery has been later than normal. No doubt that is due to the business and the volume of the season. What came to mind, and for whatever reason my memory had this ready for recall, was the old song by the the country band Alabama entitled Forty Hour Week (For A Livin') Here are the lyrics;

There are people in this country
Who work hard every day
Not for fame or fortune do they strive
But the fruits of their labor
Are worth more than their pay
And it's time a few of them were recognized.
...
The one who brings the mail
...
With a spirit you can't replace with no machine
Hello America, let me thank you for your time...

While I like what the song is trying to share, I really do think that just because the sentiment is there, does not mean that the current method of how a service or product is delivered should stay that way, frozen in time? Imagine the Pony Express rider lobbying for solidarity and the right to continue his trade when the telegraph machine comes into town? While the rider may be a great and honorable person, does that mean they should continue in their profession when it is made obsolete? Would not a better reaction to the new development be that the pony express rider seek to be trained in the use of Morris Code?

Monday, November 25, 2013

jQuery Sortable Table Rows Example

On the current project that I am working on the customer was wanting to be able to reorder table rows by dragging and dropping them in the desired order. Also the records' text would need update itself displaying the new order of the records. Here is the proof of concept code.

Here is the JSFiddle result. And, here is the JSFiddle code. Enjoy!

	<!DOCTYPE html>
	<html>
	<head>
	<title>Soratble Table Rows</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	</head>
	<body>
	<table border="1" id="formTable">
	<thead><th>View</th><th>Page</th><th>Sheet #</th><th>Reason</th><th>Location</th></thead>
	<tbody id="sortThis">
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>1</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2" selected>Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Policy addition</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>2</td>
	<td>
	<select>
	<option value="1" selected>Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Privacy Notice</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>3</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3" selected>Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Disclosure</td>
	<td>
	<select>
	<option value="1">Policy</option>
	<option value="2" selected>Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>4</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2" selected>Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Policy addition</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>5</td>
	<td>
	<select>
	<option value="1" selected>Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Privacy Notice</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>6</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3" selected>Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Disclosure</td>
	<td>
	<select>
	<option value="1">Policy</option>
	<option value="2" selected>Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>7</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2" selected>Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Policy addition</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>8</td>
	<td>
	<select>
	<option value="1" selected>Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3">Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td>Privacy Notice</td>
	<td>
	<select>
	<option value="1" selected>Policy</option>
	<option value="2">Pocket</option>
	</select>
	</td>
	</tr>
	<tr>
	<td style="text-align:center;"><input type="button"></td>
	<td>9</td>
	<td>
	<select>
	<option value="1">Sheet 1</option>
	<option value="2">Sheet 2</option>
	<option value="3" selected>Sheet 3</option>
	<option value="4">Sheet 4</option>
	</select>
	</td>
	<td><span id="target">Disclosure</span></td>
	<td>
	<select>
	<option value="1">Policy</option>
	<option value="2" selected>Pocket</option>
	</select>
	</td>
	</tr>
	</tbody>
	</table>
	</body>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script>
	$('tbody#sortThis').sortable({
	start: function(event, ui) {
	//Let's set the starting position of an row in the table to ensure the correct row index
	var start_pos = ui.item.index() + 1;
	ui.item.data('start_pos', start_pos);
	},
	change: function(event, ui) {
	//When the item postion is changed while dragging a item, get it's position
	var start_pos = ui.item.data('start_pos');

	//get the direction of the drag motion
	var dragDirection = start_pos < ui.placeholder.index() ? "down" : "up";
	ui.item.data('drag_direction', dragDirection);
	},
	stop: function(event, ui) {
	//get the table where the sorting is happening
	var thisTable = document.getElementById('formTable');

	//get the row index of where the dragged row has stopped
	var movedRowIndex = (ui.item.index() + 1);

	//get the page # cell and update the text to the stopped location
	var pageNumberCell = $(thisTable.rows[movedRowIndex].cells[1]);
	pageNumberCell.text((ui.item.index() + 1));

	//get the direction 'up' or 'down' that the record was dragged.
	var drag_direction = ui.item.data('drag_direction');

	//if the record was drageed down the table, update record page#s above
	if(drag_direction == 'down'){
	for (var i=1; i < thisTable.rows.length; i++){
	if(i < movedRowIndex){
	$(thisTable.rows[i].cells[1]).text(i);
	}
	}
	}

	//if the record was drageed up the table, update record page#s below
	if(drag_direction == 'up'){
	for (var i=1; i < thisTable.rows.length; i++){
	if(i > movedRowIndex){
	$(thisTable.rows[i].cells[1]).text(i);
	}
	}
	}
	}
	});
	$('tbody#sortThis' ).disableSelection();

	</script>
	</html>

view raw jQuerySortableTable.html hosted with ❤ by GitHub

Thursday, September 19, 2013

Rrrrr! talkPirate Function

I found out via an advertisement that today is International Talk Like a Pirate Day. "Avast, Ye Mateys! Hoist Yer Colors for Talk Like a Pirate Day! Start savin' on a pirate's favorite language: R"

So, here is my brief talkPirate R function:

Monday, August 19, 2013

Do we want other humans?

At work I was listening to one of NPR’s TED Radio Hour Podcast entitled “Do we need humans?” This talk was a presentation by Sherry Turkle, a professor of the “social studies of science” at M.I.T. and was based on her book Alone Together

A quick search on Google turned up a statement from the book in a New York Times Book Review:

“Dependence on a robot presents itself as risk free. But when one becomes accustomed to ‘companionship’ without demands, life with people may seem overwhelming.” Then the author of the book review states, “A blind date can be a fraught proposition when there’s a robot at home that knows exactly what we need. And all she needs is a power outlet.”

Do we prefer technology to one another since human relationships take work, can be messy, and cannot be controlled?

Wednesday, August 14, 2013

R for Your Foursquare History

I was looking through twitter posts and came across one dealing with a presentation at the Quatified Self Bay Area Meetup by John Schrom. Watching the video Mr. Schrom described how he acquired his personal checkin data from Foursquare via an R program. Looking further I noted that the information about the presentation included a link to his personal site included a link to his Github repository of the code that he used to gather his personal Foursquare history. With this information in hand I figured that I would attempt to data mine my own checkin data.

The repo's readme file contained the steps that he took to get a Foursquare app setup and obtain his access code to his checkin history. After following the steps I was ready for the next step.

Then, I installed R and proceeded to add the packages that John's code required. First you will need RCurl. I issued the following command in R:
install.packages("RCurl", dependencies = TRUE)

However, I found that I needed to install libcurl due to the following error: ERROR: configuration failed for package 'RCurl'
So here is what I did to remedy the problem:
sudo apt-get install libcurl4-openssl-dev

Next, I installed the rjson package via:
install.packages("rjson", dependencies = TRUE)

Then I pulled down the rpi.R and secrets.R files and per the Github readme I ran:
source('rpi.R');
checkins <- getFoursquare('YOUR_ACCESS_TOKEN_HERE');

After this I wrote the function output to a CSV file:
out <- file("output.csv", "wt")
write.table(checkins, file=out)

Looking at the rpi.R code, I noted the getFoursquare function includes the createdAt attribute of the checkin object (of the Foursquare API which states the createdAt attribute is "Seconds since epoch when this checkin was created"). Since this element is in the form of the number of seconds, for example 1376335108, and it is a data item that I want, I will need to convert it into a human, readalbe format.
 
This was simple enough for me since I use Open Office to view CSV files in that I found this handy formula to convert the data to a human readable date/time: 
=(CellIdHere/86400)+25569+(-4/24)


From the CSV file I can inspect the checkin history for correlations with other data or look for patterns that before the review I was unaware existed. 

Finally, next steps could also include learning more R to visualize the data via plotting the data into charts and graphs.

Sunday, July 21, 2013

Detect Mobile Browers with JavaScript

Quick script to detect mobile browsers thanks to here:

	//while I only have Adnroid OS's at this point, including others in case.
	var mobile = (/silk\|iphone\|ipad\|ipod\|android\|blackberry\|mini\|windows\sce\|palm/i.test(navigator.userAgent.toLowerCase()));
	if ( mobile) {
	window.open('mobileURL');
	}else{
	window.open('otherURL');
	}

view raw detectMobile.js hosted with ❤ by GitHub

Monday, July 08, 2013

JavaScript replaceAll Example

I needed a JavaScript "replaceAll" function on a string. Note the global flag /g

	var name = "John Jacob Jingleheimer Smith";
	//replace the space with a dot '.'
	var id = name.replace(/\s/g, '.');
	console.log(id);

	//now replace the '.' with a space
	newId = id.replace(/\./g, ' ');
	console.log(newId);

view raw replaceAll.js hosted with ❤ by GitHub

The output is:
John.Jacob.Jingleheimer.Smith
John Jacob Jingleheimer Smith

Thursday, July 04, 2013

Example of Meteor using Facebook's Login API

Earlier today I finished up the Meteor Login sample app using Github's API and decided to attempt the same with Facebook's LoginAPI. Meteor makes it so easy that I was able to replicate the same results in two hours. The reason that it even took that long was because I was not accessing the Meteor.user JSON correctly.

For the code go my github repo at: https://github.com/m2web/facebooklogin.

One thing to note is the setup of the Facebook Login App for testing at Meteor's default location of http://localhost:3000.

Of course, once you deploy the app, you will need to update the above settings to the correct domain and URL.

Enjoy!

Repo Integrating User Logins with Github and Meteor

Messing with Meteor, an ultra-simple environment for building modern web applications, has been fun thus far. Here is a repo based on Chris Mather's video Customizing Login.

Thursday, June 27, 2013

Jasmine: A JavaScript Testing Framework

I have been experimenting more with JavaScript frameworks lately. Being fond of the Test Driven Development methodology, I came across Jasmine. Here is how the site defines it: Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

If you have not already, download Jasmine from http://pivotal.github.io/jasmine/

After you decompress the downloaded file you see this directory structure.

As you can see, the SpecRunner.html file is your user interface that is simply run from a web browser. The spec folder will hold, as you guessed, your specification code—what you want your implementation to do. The src folder will contain the code you are testing.

The JavaScript includes in the SpecRunner.html file need to be set as such:

	<!-- include source files here... -->
	<script type="text/javascript" src="src/DateSort.js"></script>

	<!-- include spec files here... -->
	<script type="text/javascript" src="spec/SpecHelper.js"></script>
	<script type="text/javascript" src="spec/DateSortSpec.js"></script>

view raw SpecRunner.htmlIncludes.html hosted with ❤ by GitHub

What I wanted to do was to test how to sort a JavaScript array based on a date element in the array. So let’s start with the spec file. I named my spec DateSortSpec.js and placed it in the spec directory. Here is the DateSortSpec.js:

	describe("Sort by Date", function() {
	var dateSort;
	var booksData;

	beforeEach(function() {
	dateSort = new DateSort();
	booksData = [
	{
	title: 'Health for a friend',
	author: 'John Doe',
	publishDate: '01/01/2013'
	},
	{
	title: 'A Million Biliion Dollars',
	author: 'James Dean',
	publishDate: '03/15/2013'
	},
	{
	title: 'Wisdom',
	author: 'Tom Thumb',
	publishDate: '06/03/2013'
	}
	];
	});

	it("should show Health for a Friend title with ascending sort", function() {
	var sortedAsc = dateSort.sortAsc(booksData);
	var sortedTitle = sortedAsc[0]['title'];
	expect(sortedTitle).toEqual('Health for a friend');
	});
	});

view raw DateSortSpec1.js hosted with ❤ by GitHub

Next, the source code file,DateSort.js, goes in the scr directory:

	DateSort = function (){}

	DateSort.prototype.sortAsc = function(theArray){
	return "";
	}

view raw DateSort1.js hosted with ❤ by GitHub

OK, with basic structure in place let's do a sanity check and make sure we get a failing test result:

Now let’s get the “should show Health for a Friend title with ascending sort” spec to pass. First, create a function that will sort ascending by date. What I did was to utilize the JavaScript array.sort method passing in a compare function.

	DateSort = function (){}

	DateSort.prototype.sortAsc = function(theArray){
	return theArray.sort(date_sort_asc);
	}

	var date_sort_asc = function(a,b){
	a = new Date(a.publishDate);
	b = new Date(b.publishDate);
	return a<b ? -1 : a>b ? 1 : 0;
	};

view raw DateSort2.js hosted with ❤ by GitHub

Now reload the browser and the spec passes.

Next we will add the spec to sort descending.

	it("should show Wisdom title with descending sort", function() {
	var sortedDesc = dateSort.sortedDesc(booksData);
	var sortedTitle = sortedDesc[0]['title'];
	expect(sortedTitle).toEqual('Wisdom');
	});

view raw DateSortSpec2.js hosted with ❤ by GitHub

Reload the browser and we see the spec fail as we have not implemented any code for the spec.

So, the next step is clear. Implement enough code to pass the spec. Here I again use the JavaScript array.sort method passing in a function for a descending comparator.

	DateSort.prototype.sortedDesc = function(theArray){
	return theArray.sort(date_sort_desc);
	}

	var date_sort_desc = function(a,b){
	a = new Date(a.publishDate);
	b = new Date(b.publishDate);
	return a<b ? 1 : a>b ? -1 : 0;
	};

view raw DataSort3.js hosted with ❤ by GitHub

Refresh the browser again and bang!

As you can see using Jasmine is pretty straight forward. Setup is a matter of expanding the compressed file. Moreover, if one has a web browser and text editor you a ready to code the specs and source code.

Wednesday, June 26, 2013

Configuring SciTE for JavaScript on Ubuntu 12.04

At work I use the SciTE editor quite a bit. With that stated, at work we use Microsoft Windows XP, soon to move to Windows 7, as the standard operating system. In any event, during a break I created a JavaScript test file to determine the best way to sort via a JavaScript Date.

All well and good at this point. Then I brought the JavaScript file home where my entire house has nothing but Ubuntu as the choice of operating systems for both desktops as well as laptops and netbooks. I quickly realized that I did not have my SciTE editor configured to execute JavaScript files on my Ubuntu desktop. Doing some quick poking around I found that I could use my installation of Node.js for the JavaScript engine. So, here is what I did.

First, I opened the /usr/local/scite/cpp.properties file. I then noted that at line 436 it was looking for the GTK cross platform tookit in the for of: if PLAT_GTK

I added the following config setting below that line:

command.go.*.js=node $(FileNameExt)

I then closed the /usr/local/scite/cpp.properties, open the SciTE editor, opened the JavaScript file, hit the F5 key to run the file and I was good.

Monday, June 24, 2013

What daily apps and devices do you use to help you daily?

For me, my day consists of a daily run, a time of scripture reading and prayer, eating breakfast, getting out the door and to work, and then the normal work day events, and then head back home.

For various steps in the events of the day, I use my Garmin watch, iPod Shuffle, fitbit, desktop computer, and smartphone. With these devices I use apps for the weather, spiritual and physical health, basic communications, and traffic for my daily commute. Here are the day’s events with the devices and the apps that are used.

Wake up:

Digital clock for the alarm and my smartphone in bedside mode for the time.

Morning Run:

Garmin watch to track time and pace
fitbit pedometer to track number of steps
Desktop computer, with Ubuntu 12.04 as the operating system, looking at weather.com and runkeeper.com to map and store the day’s run stats
Ipod Shuffle with iTunes to download and organize the theology based podcasts and music that I listen too

Reading of scripture and prayer time

Desktop computer, smartphone, or Kindle Fire looking my personal prayer app built with Ruby on Rails and housed on heroku.com

Morning communications

Desktop computer, smartphone, or Kindle Fire using gmail, Google calendar, facebook, and twitter

Breakfast

Record nutrition intake with fitbit.com that has already uploaded the calories burned from the earlier run.

Morning commute to work

Desktop computer, smartphone, or Kindle Fire using ohgo.com to see the current status of the traffic on I75 and I471 North bound. From there I determine which is the best route.

Work

Desktop PC for software development
Smartphone for personal communications
Fitbit in which I note time to time the number of steps taken during the day

Lunch

Record nutrition intake with fitbit.com.

Evening commute to work

Desktop computer or smartphone using ohgo.com to see the current status of the traffic on I75 and I471 South bound. From there I determine which is the best route.

Evening

Desktop computer, smartphone, or Kindle Fire using weather.com to note the evening and next morning’s forecast.
Fitbit from which the day’s step count is uploaded and the amount of calories burned is compared to the day’s nutrition intake.
Desktop computer, smartphone, or Kindle Fire using gmail, Google calendar, facebook, and twitter
Roku streaming player, a cloud based video streaming device that interfaces with content providers such as Netflix and/or Amazon Prime, to watch great TV series and movies such as Dr. Who, Star Trek, The Goonies, Shaun the Sheep, etc.

Of course this list does not include other devices and personal tools such as the automobile or other home based appliances that rely on silicon-based technology to function. The pattern that I see is that my day is better organized and runs smoother as the result of the use of these devices/apps. Moreover, I am better informed off my health as well as keeping better track of appointments and obligations.

Wednesday, April 24, 2013

Poetry via Python

I was attending a weekend event and heard of a website that had some lofty poetry. Having the book of that poetry, I wanted the content for my own personal use.

I had played with Python before to scrape data from the web and thought I would give it a go again. Here is what I used to get the desired content and create HTML files that I could use on my own website:

	import urllib
	import re

	def find_between( s, first, last ):
	try:
	start = s.index( first ) + len( first )
	end = s.index( last, start )
	return s[start:end]
	except ValueError:
	return ""

	fileName = 1
	for n in range(1, 50):
	#get the full webpage code
	content = urllib.urlopen("http://TheURLHere/look_up.php?"+str(n)).read()
	#print content

	#found that the title of the page is between this HTML markup
	title = find_between(content,'<font color="#660000" size="2" face="Verdana">','<br>')

	#let's create and open a new file
	fo = open("temp/" + str(fileName) +".html", "wb")

	#i will be creating a Rails Action.method that will use the numbers 1..endNumber for accessing the files
	fileName += 1

	#HTML for the new files and search
	htmlStart = "<!DOCTYPE html><html><head><title>" + title + "</title></head><body>"
	tableStart = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\"#111111\" width=\"97%\" id=\"AutoNumber4\">"
	tableEnd = "</table></body></html>"

	#get the content that I actually want
	scrapedText = find_between( content, tableStart, "<td width=\"98%\"><p align=\"right\"><font color=\"#000000\" size=\"2\" face=\"Verdana\">By  More stuff here</font><br>" )
	#print scrapedText

	fo.write(htmlStart + tableStart + scrapedText + tableEnd)
	fo.close()

view raw webSiteScrapeAndFileCreation.py hosted with ❤ by GitHub

Thursday, January 24, 2013

Create PostgreSQL Sequence for Ruby on Rails Apps on Heroku

I was attempting to add a record via my rails app on Heroku and got the following:

ERROR: null value in column "id" violates not-null constraint

Since as the date of this writing Heroku uses PostgreSQL, here are the steps I took.

My Postgres server version is PostgreSQL 9.1.7 on x86_64-unknown-linux-gnu, compiled by gcc (Ubuntu/Linaro 4.6.3-1ubuntu5) 4.6.3, 64-bit. I also am using an Ubuntu Linux desktop running Rails 3.2.11.

Now to the steps I took to solve the problem.

In your rails app db/migrate folder create the following class and name it 201301081552_create_table_name_sequence.rb. Substitute the time signature in the name with your date and time and “table_name” with the name of the table you to which you are adding the sequence:

	class CreateTableNameSequence < ActiveRecord::Migration
	def up
	#create sequence for categories table
	execute <<-SQL
	CREATE SEQUENCE table_name_id_seq
	INCREMENT 1
	MINVALUE 1
	MAXVALUE 9223372036854775807
	START 25
	CACHE 1;
	SQL
	end

	def down
	DROP SEQUENCE table_name_id_seq;
	end
	end

view raw gistfile1.rb hosted with ❤ by GitHub

Then in your rails app db/migrate folder create the following class and name it 201301081552_add_sequence_to_table_name.rb. Again, substitute the time signature in the name with your date and time and “table_name” with your name:

	class AddSequenceToTableName < ActiveRecord::Migration
	def up
	#add sequence to
	execute <<-SQL
	ALTER TABLE table_name ALTER COLUMN id SET DEFAULT nextval('table_name_id_seq'::regclass);
	SQL
	end

	def down
	execute <<-SQL
	ALTER TABLE table_name ALTER COLUMN id SET NOT NULL;
	SQL
	end
	end

view raw gistfile1.rb hosted with ❤ by GitHub

Next, commit and push them to your github repository. After that push them to Heroku. If you have the Heroku toolbelt installed you can issue the following:

sudo heroku run rake db:migrate

This should run the database migration that will create the sequence as well as add it to the id column.