Javod's Blog

How to add your personal private/protected Twitter account to Drupal

Wed, 28 Dec 2011 13:02:30 -0700

(Note: In this post I use the terms private and protected interchangeably.)

There are times you may want to have your protected Tweets available on your site. Perhaps protected Tweets are available to your members but not necessarily the world at large. Non-private accounts are easy enough to pull: These feeds are easily accessible using the Rest API.

However, to access protected accounts we must create a Drupal module that authenticates through OAuth. Let's go through this process step by step.

1) First, in Drupal, create a new Content Type.

Name: Tweet
Type: tweet
Description: This content type pulls our protected tweets from our twitter account.

2) Next, we need to create a twitter app:

a) Go to dev.twitter.com
b) Sign in using the protected twitter account you will be using.

c) Click on Create an app.

d) Fill in your app info, agree to the TOS, and submit.

e) Go to the details tab for your newly created app and make note of the highlighted fields below. (Consumer Key, Consumer Secret, Access Token, Access Secret.)

3) Now we need a way to authenticate our app with our soon to be created module. We must use the OAuth method, and we have the option of writing our own OAuth validator, or using the wonderful Twitter with OAuth class which does 99% of the work for us (As of this post the current version is 2.1.2). The rest of this tutorial assumes you have downloaded the class, but if you're a purist and want to write your own, have at it!

4) Unzip the downloaded file and inside should be a file named 'twitter.php'. We will include this file in our module.

5) Now we will create our module. Inside your Drupal's modules folder, create a new folder called 'twitter_private'.

6) Inside this new folder create two files: 'twitter_private.info' and 'twitter_private.module' files.

7) Make sure to drop the 'twitter.php' file into the 'twitter_private' folder as well. You should now have three files in the folder.

8) Your info file should look something like this:

; $Id$
name = Private Twitter App 
description = Retrieves @myaccount tweets for inclusion in site.
core = 6.x

9) Your module file should look something like this (Replace all ALL-CAPS variables with your info):

// We're creating a cron hook that will check the tweets. 
// This will check every time you have a cron job set to run.

function twitter_pivate_cron(){ 
    // require the twitter class
    require_once 'twitter.php';
    
    // create instance MAKE SURE to replace the Consumer key 
    // and Consumer Secret with your settings
    $twitter = new Twitter('CONSUMER_KEY', 'CONSUMER_SECRET');
    
    // set tokens MAKE SURE to replace token and secret with your settings
    $twitter->setOAuthToken('ACCESS_TOKEN');
    $twitter->setOAuthTokenSecret('ACCESS_SECRET');
    
    // get users timeline, $count being the number of tweets to retrieve 
    // MAKE SURE to replace the screenName with your Twitter account name 
    //(do not include @ symbol)

    $response = $twitter->statusesUserTimeline($userId = null, 
                          $screenName = 'YOUR_TWITTER_ACCOUNT_NAME', 
                          $sinceId = null, 
                          $maxId = null, 
                          $count = 10, 
                          $page = null, 
                          $trimUser = false, 
                          $includeRts = false, 
                          $includeEntities = false);
    
    
    // Retrieve the 10 most recent tweets in the node table 
    // and place in title array
    $q = db_query("SELECT title FROM node WHERE type='tweet' 
                           ORDER BY nid DESC LIMIT 10");
    while($r = mysql_fetch_assoc($q)){
        $title[] = $r['title'];
    }
    
    // search 10 most recent tweets on twitter 
    // and if it doesn't exist in node table, insert
    foreach($response as $r){
        foreach($r as $k=>$v){
            if($k == 'text'){
                if(!in_array($v, $title)){
                    $node = new stdClass();
                    $node->title = "$v";
                    $node->type = 'tweet';
                    $node->created = time();
                    $node->changed = $node->created;
                    node_save($node);

                }
            }
        }
    }
}

10) Now activate the module in your Drupal admin panel, run the cron manually to get started, and you are all set. Just figure out how you would like to use the tweet content type (you can create a new block, or have it feed into a page, or whatever you'd like)

Using the Firefox Tilt plugin for an unconventional purpose

2011-12-06 00:00:00

Tilt is self described as a "Firefox extension focused on creating a 3D visualization of a webpage, drawn using WebGL. Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering."

The plugin is pretty amazing, and it does help find nested elements very quickly, however there is a novelty to it that seems to wear out after "tilting" a few websites.

After playing with Tilt, it occurred to me that there was potential for 3D modeling that could be added to a website.

The website above is a very simple example of how one might go about this. I thought it would be neat to have a page about a famous skyscraper, and when the Tilt plugin was applied, the actual skyscraper would be built.

I've done the calculations to make sure that the skyscraper is indeed to scale, so if you are viewing it you will have to zoom out all the way to get a good view. A cool little side-project, and a fun easter-egg.

I don't know how practical this would be for real modeling, but I could see how an architectural firm might use this technique as a simple "wow" factor in a pitch.

Drupal 6: Running Batch via Cron

Wed, 11 Nov 2011 18:52:30 -0700

Looking through the Drupal documentation, a person is led to believe that automating a Batch script is tantamount to moving Mount Fuji 10 feet to the left with a wooden spoon. The general consensus seems to be that all Batch scripts should be converted to use the Queue API. Sometimes this is an acceptable solution, but when you're running a very large script that makes extensive use of the Batch $context variable, it becomes a daunting task.

The big issue (or at least the issue I ran into) with Batch and cron, is that the Batch API was really written to be used in conjunction with the browser, so there are calls made to update the progress bar that just don�t jive when running in cron.

The solution that worked for me was a bit of a hack, but only a small one. If we look over the batch_process() documentation, there�s a telling bit of information: "Unless the batch has been marked with 'progressive' = FALSE, the function issues a drupal_goto and thus ends page execution." That sounded positive, and from what I could tell it bypasses the progress bar and executes the batch in one pass.

Now the problem is that even though we are given this information, there�s no parameter to change this variable. It looks like an oversight by the developers. Instead of hacking the core though, what we can do is create a reference to batch_get and turn off the progressive option.

// create a reference to batch_get()
// this is called directly in the core batch_process() function
$batch =& batch_get();
// Using the reference, we turn progressive off
// which prevents the redirect to the standard Batch API progress bar
$batch['progressive'] = FALSE;
// Because we are not using the form to trigger the batch, we run batch_process('')
batch_process('');

So let�s take a look at how this would work:

hook_cron(){
    hook_my_function();
}
hook_my_function(){
    batch_set(array(
      'title' => My Title',
      'operations' => array(
        array(�hook_another_function_to_run�, array($info))
      ),
      'progress_message' => 'Processing...',
    ));
   
    $batch =& batch_get();
    $batch['progressive'] = FALSE;
    batch_process('');
}

Now there may be some issues with this implementation that I am unaware of, but I am running a rather large Batch script and have yet to come across any.

Hope this helps someone!

jQuery: Disable right click and drag on images

Wed, 17 Nov 2010 10:46:31 -0700

Sometimes you get a client that just wants to do what they want to do no matter the reasons they shouldn't.

In the case of disabling right click the short answer is: Don't.

The long answer is there is no way to prevent someone from taking images off your site. You can slightly thwart users, but it is against the very principles of the way the internet works, and is considered bad practice. Typically only websites that are either unprofessional or shady use these techniques.

Now, with that, sometimes you'll get a person who says, "just do it anyway." So here is some jQuery to make this an easy job for you.

Dante's Theme - Piano Cover FMA

Something a little different: A video of me playing Dante's Theme from Fullmetal Alchemist.

zeroclipboard: Get javascript events firing after AJAX request

Tue, 25 May 2010 21:08:54 -0700

An interesting problem I came across recently was trying to get Zero Clipboard to work in an AJAX loaded div. Zero Clipboard is pretty much the only way to copy text to the user's clipboard that works across browsers. There is no native way to do this, so it floats an invisible movie on top of a DOM element. Yes, your users need to have Flash installed for this to work.

The issue is as follows:

We need zeroclipboard available on a page that is loaded via ajax inside a div.
Javascript events are not bound in an ajax call unless specifically loaded by an onclick, onload etc...
The scripts themselves need to exist outside of the ajax loaded page to be loaded during page load.

At the time of this writing zeroclipboard is on version 1.0.7

As the documentation notes, the ZeroClipboard.swf file by default is sought for in the same directory as the webpage, and this tutorial assumes that it is.

Let's say we have two pages: index.html and ajaxload.html

The default example for zeroclipboard:

<html>
	<head>
		<style type="text/css">
			#d_clip_button {
				text-align:center; 
				border:1px solid black; 
				background-color:#ccc; 
				margin:10px; padding:10px; 
			}
			#d_clip_button.hover { background-color:#eee; }
			#d_clip_button.active { background-color:#aaa; }
		</style>
	</head>
	<body>
		<script type="text/javascript" src="ZeroClipboard.js"></script>
                
		Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/>
        
		<div id="d_clip_button">Copy To Clipboard</div>
        
		<script language="JavaScript">
			var clip = new ZeroClipboard.Client();
                        
			clip.setText( '' ); // will be set later on mouseDown
			clip.setHandCursor( true );
			clip.setCSSEffects( true );
                        
			clip.addEventListener( 'load', function(client) {
				// alert( "movie is loaded" );
			} );
                        
			clip.addEventListener( 'complete', function(client, text) {
				alert("Copied text to clipboard: " + text );
			} );
                        
			clip.addEventListener( 'mouseOver', function(client) {
				// alert("mouse over"); 
			} );
                        
			clip.addEventListener( 'mouseOut', function(client) { 
				// alert("mouse out"); 
			} );
                        
			clip.addEventListener( 'mouseDown', function(client) { 
				// set text to copy here
				clip.setText( document.getElementById('clip_text').value );
                                
				// alert("mouse down"); 
			} );
                        
			clip.addEventListener( 'mouseUp', function(client) { 
				// alert("mouse up"); 
			} );
                        
			clip.glue( 'd_clip_button' );
		</script>
	</body>
</html>

For our purposes we're going to make a couple of changes.
index.html:

<html>
	<head>
		<style type="text/css">
			#d_clip_button {
				text-align:center; 
				border:1px solid black; 
				background-color:#ccc; 
				margin:10px; padding:10px; 
			}
			#d_clip_button.hover { background-color:#eee; }
			#d_clip_button.active { background-color:#aaa; }
		</style>

       <!-- We're moving the main javascript file to the head section -->
       <script type="text/javascript" src="ZeroClipboard.js"></script>
		<!-- We're also taking the following code and wrapping it in a function to call later -->
		<script language="JavaScript">
		function clipit(){
			var clip = new ZeroClipboard.Client();
                        
			clip.setText( '' ); // will be set later on mouseDown
			clip.setHandCursor( true );
			clip.setCSSEffects( true );
                        
			clip.addEventListener( 'load', function(client) {
				// alert( "movie is loaded" );
			} );
                        
			clip.addEventListener( 'complete', function(client, text) {
				alert("Copied text to clipboard: " + text );
			} );
                        
			clip.addEventListener( 'mouseOver', function(client) {
				// alert("mouse over"); 
			} );
                        
			clip.addEventListener( 'mouseOut', function(client) { 
				// alert("mouse out"); 
			} );
                        
			clip.addEventListener( 'mouseDown', function(client) { 
				// set text to copy here
				clip.setText( document.getElementById('clip_text').value );
                                
				// alert("mouse down"); 
			} );
                        
			clip.addEventListener( 'mouseUp', function(client) { 
				// alert("mouse up"); 
			} );
                        
			clip.glue( 'd_clip_button' );
		}
		</script>

	</head>
	<body>
		<!-- We're adding the div where we will load our ajax file -->
		<div id="loadPageHere"></div>	
	</body>
</html>

ajaxload.html:

Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/>
<div id="d_clip_button">Copy To Clipboard</div>

<!-- Here's the tricky part -->
<!-- We need to load our function after the ajax call, but we can't use a body tag, and divs don't allow the onload attribute -->
<!-- The hack here is to use a 1px x 1px image  and use the onload function available in the img tag to load our function -->
<img src="blank.gif" onload="clipit();" />

So that's the way to use zeroclipboard in an AJAX call. Please note that I did not include the ajax code that actually loads ajaxload.php in the index's div. I assume if you're having this problem you've probably already come that far. If you do need help with that though, just ask!

If you have any questions, problems or suggestions feel free to leave a comment.

The art of learning: How I want to be taught

Sun, 28 Mar 2010 13:41:43 -0700

While I was at university, there was a professor in the Computer Science college who was known as incredibly difficult. Dr. D was unquestionably bright, having two doctorates, one in Mathematics and one in Computer Science. He knew his material, and while his Chinese accent was at times difficult to understand, it wasn't a major hindrance to learning the material.

I had Dr. D for 2 classes: Discrete Mathematics, and Computer Science II. I had never worked so hard for a B in my life. Dr. D was not as some may imagine lacking in the spirit of teaching. Quite the contrary, he loved his job, and he cared and encouraged his students. He often complained that not enough students came to his office hours. Sometimes when our class needed a respite from the non-stop barrage of ideas that Dr. D issued forth, we would (and often did) get him talking about his research on number theory and the rest of the class period would be lost to tangential discussion.

What made Dr. D so difficult was the way he taught us. He taught all his undergraduate classes as if we were graduate students. Instead of giving us concrete examples, we got lots of theory. Maybe I'm just not smart enough, but the bridge from theory to practice has always been difficult for me. The concept of mathematical induction seems easy enough, but when applying it to a problem, unless I've seen something similar, it becomes a major struggle. I understand the means behind the methods: Learn how to learn. That's all fine and dandy, but before I can learn to learn, I need to understand.

Mark Guzdial wrote an excellent article for the ACM discussing just this issue. He brings to light a 1985 paper which is very telling, and coincides with my own personal experiences:

The original 1985 Sweller and Cooper paper on worked examples had five studies with similar set-ups. There are two groups of students, each of which is shown two worked-out algebra problems. Our experimental group then gets eight more algebra problems, completely worked out. Our control group solves those eight more problems. As you might imagine, the control group takes five times as long to complete the eight problems than the experiment group takes to simply read them. Both groups then get new problems to solve. The experimental group solves the problems in half the time and with fewer errors than the control group. Not problem-solving leads to better problem-solving skills than those doing problem-solving. That's when Educational Psychologists began to question the idea that we should best teach problem-solving by having students solve problems.

Why then, if there is such a significant statistical difference, are teachers still insisting on teaching by theory alone? If seeing worked out problems has a better chance of teaching students how and why things work, then let's push that. I know that this certainly works for me. The more I see of a problem worked out, the more I begin to understand the mechanics of it, so when I do come across a problem that is slightly different, my understanding is greater, and my chances of solving are greater as well. This isn't to say that theory should never be taught, of course it should. Guzdial simply states, and I agree, that theory and problems without samples shouldn't be the way to start learning a subject.

Creating a horizontal drop-down menu with CSS

Sun, 13 Sep 2009 15:20:23 -0700

There are a ton of examples on how to create vertical drop-down menus, but hardly any on how to create a completely horizontal drop-down menu. I messed around with this quite a bit until I got what I was looking for, and then, once again, I stripped it down to a minumum to make it easy to understand. Just wrap an unordered list with a div tag using id="hmenu".

From there you can add your own css styles to give it a nice look.

Following is the HTML and CSS code required to do it.

Demo of Horizontal Drop-Down Menu

<div id="hmenu">
<ul>
	<li><a href="example.com">Home</a>
		<ul>
			<li><a href="example.com">About Us</a></li>
			<li><a href="example.net">About Me</a></li>
		</ul>
    </li>
    <li><a href="index.php">MoBlog
    	<ul>
        	<li><a href="example.com">Today's Pics</a></li>
            <li><a href="example.net">Month's Pics</a></li>
            <li><a href="example.org">Year's Pics</a></li>
        </ul>
    </li>
    <li><a href="example.com">Quotes
    	<ul>
        	<li><a href="example.com">Funny</a></li>
            <li><a href="example.org">Serious</a></li>
            <li><a href="example.net">Introspective</a></li>
        </ul>
    </li>
</ul>
</div>

/* Written by: Javod Khalaj */

/* 	'list-style: none' removes the bullets, 
	margin and padding can be adjusted to desired quantities, but zero is a good starting point
	'width:100px' is used because otherwise any mouse-over interaction with the width of the page would cause the menu to display
*/
#hmenu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width:100px;
}

/*	line-height separates the main navigation a specified distance. 
	Otherwise the navigation will be very tight against each other.
	'position: relative' helps line up the second navigation next to the corresponding first navigation.
*/
#hmenu ul li {
	line-height:30px;
	position: relative;
	float:none;
	width:auto;
}

/*	'left: 100px' pushes the second ul structure (secondary navigation) 100px away from the main ul (main navigation).
	'display: none' removes the visiblity of the secondary navigation (The element will generate no box at all).
	'position: absolute' lines up the second navigation next to the corresponding first navigation.
	'width: 600px' is the width for the second navigation. If it is made too small, the text will wrap.  
*/
#hmenu ul li ul {
	position: absolute;
	left: 100px;
	top:0px;
	display: none;
	width:600px;
}

/* 	this will change the display from none to block.
	essentially this makes the secondary navigation visible on mouseover.
*/
#hmenu li:hover ul { 
	display: block; 
}

/*	'padding-left:20px' separates the secondary menu from running into each other
*/
#hmenu ul li ul li{
	padding-left:20px;
	margin:0px;
	float:left;
	width:auto;
	text-align: center;
}

Recent websites

Tue, 04 Aug 2009 21:38:01 -0700

Here are a few simple websites I've worked on in the past month or so:

Sanitize PHP input for MySQL queries

Mon, 06 Jul 2009 22:21:42 -0700

Sanitizing data in PHP is nothing short of an art form. I love the language, don't get me wrong, and while some people rail (see ruby ::wink wink::) against the non-conformity of naming conventions, and auto casting of variables as evidence of poor design, I think there's no better language for beginners to start producing viable code quickly.

I wanted to present a simple easy to understand sanitizing function for PHP strings that will be inserted into a MySQL database. This particular function serves a very specific purpose: it escapes the user input, strips out html tags except for those we specify, and then attempts to find any malicious code within our allowed html tags.

If any code is found that we don't want, we can either exit out, or insert some generic message into our database. I explain my reasons why I don't just simply strip out malicious code in the comments of the code block. Many of the sanitize functions you'll see online recommend using htmlentities() to remove the risk of malicious code running, and that's fine if you don't want to have any usable tags for an end user. Otherwise, it doesn't do us much good, because when we decode the entities, the scripts will remain.


	// sanitize helps clean a given variable before it is passed to a mysql query, with allowable tags
	
	function sanitize($var){
		// First let's escape the content. Because we are using mysql_real_escape_string() 
		// we need to make sure that we santize our variable AFTER we have connected to 
		// our database. Otherwise we will get an error. We are prepending backslashes
		// to a certain subset of characters here.
		$var = mysql_real_escape_string($var); 
		
		// Let's strip out any tags we don't want, and leave the ones 
		// that are okay for the user to place in. (This call is yours to make)
		$var = strip_tags($var, '<p><a>');
		
		// There's a weakness in strip_tags that we need to address. If we allow
		// any tags, there's a chance that a malicious user could use XSS to exploit 
		// the code. We search the string for malicious code and kill the input if 
		// found. Some people choose to strip the offending material and still insert, but
		// my thoughts on the subjet are: if someone is trying to inject XSS, why
		// would we want them to post anything? 

		if(preg_match("/(<.*?(javascript|script|style|onmouseover|onmousedown).*?>)/i", $var)){
        	$var = "Illegal input, data removed";
			
			// Instead of 'return $var', we can also exit, preventing our script from running any further.
			// We simply uncomment the following line:
			// exit();
			return $var;

        }
		else{
        	return $var;
        }	
	}

Let's take a quick look at the REGEX statement in preg_match() to see what we're doing.

  /(<.*?(javascript|script|style|onmouseover|onmousedown).*?>)/i

First, we're looking for a < in the submitted variable.
Then, using .*? we basically ignore everything inside the tag UNLESS it contains javascript OR script OR style OR...
We ignore anything following those keywords, and check for a closing tag.
/i means that we're ignoring case. So if someone types JAVAscript of javaScRiPt, we don't care.

Let's look at an examle:

	// Remember, we need to connect to our database first because we use mysql_real_escape_string().
	mysql_connect($host,$user,$pass) or die("Could not make a connection");
	mysql_select_db($database_name) or die("Could not select database"); 	
	
	// In this example, we've saved our sanitize function in a separate file called sanitize.php
	include ("sanitize.php");
	
	// We declare our first variable with offending code.
	$var1 = "<a href=\"http://www.javod.com\" onmousedown=\"javascript:alert('XSS');\">XSS Attack Alert!</a>";
	
	// Our second variable 
	$var2="<a href=\"http://www.javod.com\">No XSS here!</a>";
	
	// Display our variables before sanitizing.
	echo "$var1 - (var1 before sanitizing)";
	echo "$var2 - (var2 before sanitizing)";
	
	// Display our variables after sanitizing.
	$var1 = sanitize($var1);	
	echo "$var1 - (var1 after sanitizing)";
	
	$var2 = sanitize($var2);
	echo "$var2 - (var2 after sanitizing)";

This will output the following:

XSS Attack Alert! - (var1 before sanitizing)
No XSS here! - (var2 before sanitizing)
Illegal input, data removed - (var1 after sanitizing)
No XSS here! - (var2 after sanitizing)

Is this impenetrable... ABSOLUTELY NOT! This function is a good start, and gives an idea of what we're needing to do, but by no means is it unbreakable. Once again, feel free to leave any questions or comments you have.