Gerren Design

Getting connected like never before

2010-03-14T16:00:00Z

Long ago, in a website far, far away I downloaded and installed the Facebook Connect Commenters Plugin for Movable Type. I have to say, I was not impressed by it. Besides letting users log in and comment using their Facebook account it really doesn't leverage any of the other features of Facebook Connect. In particular, the Facebook Connect Commenters Plugin has a JavaScript file called signface.js, in which it looks like there is a half written script to post back to a user's wall. What's the point of that? Did someone just give up?

So, I set out to finish the Facebook Connect Commenters Plugin. I wanted FB users to be able to come to my site and comment without having Log in. I wanted comments to feel faster and closer mimic the comment system that Facebook uses. Lastly, and most importantly I wanted FB users to be able to quickly easily post their comments back to their Facebook wall like I did in the image below. If you want these things too, then today is your lucky day...

]]>

Download Xomment,
Facebook Connect Commenters,
and my MTXFB sample templates

Step #1 - Install the Xomment Plugin

The first thing we need to do is install a MT Plugin called Xomment. It's a really clean, stable Plugin written by Reed A. Cartwright . Xomment uses Jquery to ajaxify the MT commenting system. With Xomment installed your users won't have to refresh the page when they submit a comment. This is critical so that we can guarantee that user can post their comment to their Facebook wall without the page refreshing before they are finished.

I use Movable Type version 4.34-en with the Community Pack 1.62 and Professional Pack 1.3. When I installed Xomment 2.02 I didn't notice any version conflicts, so go ahead and install it:

Download the original Xomment Plugin

Unpack the files in MT. Refresh the Xomment templates. Add the following to your HTML Head template;

Now open your Comments template and replace it with the following code. It is almost exactly the same as what is provided by Mr. Cartwright, except I've changed the form's onSubmit to this: onSubmit="return postToWall(this);"















    

    

    



    



    

    

    

    

    

        Leave a comment


        



        

        

        

            




    
        
         
       
              
  
                

                

                

                

                

                

                    

                        Name

                        

                    


                    

                        Email Address

                        

                    


                    

                        URL

                        

                    


                    

                        

                        Remember personal info?

                    


                


                

                    

                    

                


                

                    Comments

                    (You may use HTML tags for style)

Replace the Comment Preview Template with this;

Replace your Comment Response template with this;




 

  

    

      <$mt:Include module="Comment Detail"$>

    

  

  




  

    

    Your comment has been received and held for approval by the blog owner.


  




  

    

    Your comment submission failed for the following reasons:


    <$MT:ErrorMessage$>

So far, we haven't done anything too diffrent from a normal Xomment installation, but now you'll have to update your Comment Detail template. If you don't have a Comment Detail template you can just create a new module template with that name (Xomment automatically looks for it). These updates are so that when a FB user comments it leaves behind his FB user pic instead of the normal default user pic. You can learn more about Publishing Comments with Userpics here. So replace your Comment Detail template with what I have below, or use what I have below to update any custom styling you may already have.






    

      

comment-fb-<$MTCommenterUsername>">

        
		

		
 

" alt="<$mt:CommenterAuthType$>"/>





          

 

" alt="<$mt:CommenterAuthType$>"/>



          

images/default-userpic-50.jpg" /> 




      


     

	 
	   

        

        By 

        

          <$MTCommenterName>

          

         on ">

        <$MTCommentDate$>

        

        

        By 

        

          <$MTCommentAuthor default_name="Anonymous" $>

          

          

          

        

         on ">

        <$MTCommentDate$>

        

        

         


    


    

      <$MTCommentBody$>

You should now have Xomment working on your site. On to step #2.

Hint #1

In Movable Type, under comment prefrences, make sure that your 'Commenting Policy' setting is set to 'Trusted commenters only'. Else, whenever you submit a comment it will return in an like 'limit/offset clause... blah, blah, blah'.

Hint #2

I obviously re-styled my comments, you can do the same, with Jquery UI Themes. Not everyone's CSS is going to be exactly the same, and if you can't tell I use a high customized CSS on my site so I really can't help anyone out and provide premade CSS for this.

Step #2 - Install the Facebook Connect Commenters Plugin

Facebook Connect Commenters Plugin

First off, don't bother clicking on the 'more info' link on this page... it just links to its self. Just download it and then unpack it into your MT directory. Now you can go to this Github page and follow the normal install instructions, but this didn't really work all that well for me. I'll walk you through what I have on my Entry template in step 4.

Step #3 - Create a FaceBook Connect Application

This is a little confusing, so I'm going to walk you through it with a few pictures. First, go to the Facebook app developers page.

Click on Set up a New Application. Give it a name; it will be visible to users, so make it a good one. Click on agree, and then on continue.

On the Basic tab, fill out the following fields; Application Name, Description, upload an Icon, Developer Contact Email, and User support address.

I've noticed that Facebook doesn't always remember changes if you just skip from tab to tab. So, click save changes, and then click on edit setting again. Now go to the Connect tab on the left.

Fill out your Connect URL and add a Facebook Connect Logo. Hit Save Changes again. That is it, that is all you need to do for a connect application. All of the other stuff is for more complex apps that run on Facebook itself. So, copy your API Key, you are going to need that again in a minute

Step #4 - Add my script to tie it all together

first open up mt.js, and go down to line 210. Rplace the current mtEscapeJS and mtUnescapeJS fuctions with the ones I have below. This is just to ensure that anything that runs through this script is treated as a string.



function mtEscapeJS(s) {

    var str = s+'';

    var ns = str.replace(/'/g, "'");

    return ns;

}




function mtUnescapeJS(s) {

    var str = s+''; 

    var ns = str.replace(/'/g, "'");

    return ns;

}

Create a new module template called 'FBcomment', this is simply going to hold the content we are going to insert into the DOM when the user is logged in with FB. Because it is going to be injected with Javascript make sure it doesn't have any " characters in it. This is injected into the #comment-greeting div.


" 

	+ ""

	+ "
" 

    + "Welcome, ."

	+ " You are signed in with your Facebook account." 

	//this is the link for logging out of FB and MT at the same time

	+ " Sign out of Facebook" 

    + ""

	+ "publish this comment on facebook"

    + "

Create a new template module called 'MTXFB' with the following code, making sure to update the varibles at the top. Most of them it doesn't matter what info you use, but the first one, apID, is very important. make sure you set apID to your FB connect app's API Key

Now open your Entry Template make the following changes:

change your HTML tag to

replace with <$mt:Include module="MTXFB"$>

Add the following to the bottom of the page;

That should be it. MTXFB should now be working. When you commment on your site it should now bring up an FB popup like the one above. If you've liked this post, and you enjoy this script, then please pass it on. Sign into Facebook and then comeback here and leave a comment using MTXFB!

Download Xomment,
Facebook Connect Commenters,
and my MTXFB sample templates

Hint #3

You can override any of Facebook's CSS by adding inline CSS at the very bottom of your page.

Sample:

Galvanized to paint

2009-08-01T01:59:49Z

Over the last two years I really haven't finished much artwork. I've been doing mostly freelance web design. This weekend though I was inspired to put my brush into action by my friend Kevin who was showing me some of his work. It reminded me just how much I miss painting.

]]> So, I took one of "The One State" sketches I had finished and set to work. Now, due to the fact I haven't actually finished anything in a while, I've invited some of my old illustration friends to come and critique this painting before I officially declare it done. I've also described my process below to see if they can pick out anything I did wrong, or anything that I may have missed or skipped over.

The first thing I did was dust off all of my equipment. Literally, dust had collected on all of my brushes, and most of my India Ink had gone bad (solidified). After cleaning everything and rushing out to replace spoiled materials I opened my watercolor tray, lucky the paints inside were still fine since I use a tray with a seal able top.

to start of with, I printed out a few copies of the scan I had made of the final sketch. I used the first to copy the tight sketch onto the watercolor paper. I used the rest to make quick 10 second heat maps of the painting. One of the things I always admired about Tony DiTerlizzi's work is his use of warm and cool colors to create form. I've tried to analysis this and apply to my own paintings.

Then, following another practice that I learned from Tony (via his blog), I made a warm up painting of similar content. although I was also told to do this in college I never really took it seriously until I found out my favorite artist did it all of the time. I painted it directly from a photo without prior sketching. I was focusing on what specific colors to use and what kind of brush strokes were most effective.

Next I filled out the entire image area with light washes of Grumbacher's Umber and Payne's Grey to make off my warm areas and cool areas. I also did this to make sure that I wouldn't miss any small spots and leave them blank.

I let that first layer dry completely and then inked in the outlines. For the heavier outlines I used a medium sized Chinese brush and Winsor & Newton India ink. The lighter and internal lines I used Winsor & Newton Sepia Calligraphy Ink with a standard crow quill pen.

I then started to bring the color's out more with Van Dyke Brown, Brunt Sienna, Sepia, and a touch of Ultra Marine. Once the values were just about right I started making the fur texture with a micro brush and fairly thick water color. Once the whole thing had a thick fur texture I went back in with a big brush to wash out and soften the area's of the fur's highlight. finally, I finished up the details of the swords, the arm wraps, and the face.

So, what do you guys think?

Scud: The Disposable Assassin

2009-07-02T15:57:05Z

What is a disposable assassin? It a solid gold killer robot you buy out of a vending machine that explodes after it kills it's target. What is a comic book? It is an ongoing or encapsulate story revolving around a protagonist. For ten long years Scud only met the former definition. In 1994 artist Rob Schrab started Scud, but in 1997 issue number 21 ended in a cliffhanger. No further issues were printed...

I gave up hope, I stopped looking.

Then, it happened I was randomly in a comic book shop and discovered that in 2007 Rob Scharb came back to Scud, and finished the series with four final issues. I highly recommend anyone who followed this in the 90s to pick up these comics.

]]> -->

How to make custom Select Boxes

2009-06-28T16:23:11Z

Making forms look good is often one of the most challenging parts of being a web designer. Select boxes specifically are very difficult. They look completely different in different browsers. Lucky, there are plenty of ways to replace them with hidden input fields. However, recently I've had to deal with 3rd party custom tags that generate dynamic select boxes. The only way to style these is by allowing them to load and then use the DOM to manipulate or replace them. I couldn't find any example of his online, so I was forced to figure out how to do it myself. I hope the code below will help someone else out.

Sample:

The code:

$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
	
	var curSel = $(this);
	// get the CSS width from the original select box
	var gddWidth = $(curSel).css('width');
	var gddWidthL = gddWidth.slice(0,-2);
	var gddWidth2 = gddWidthL - 28;
	var gddWidth3 = gddWidthL - 16;
	// build the new div structure
	var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
	//get the default selected option
	var whatSelected = $(curSel).children('option:selected').text();
	//write the default
	var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
	// create a new array of div options from the original's options
	var addItems = new Array();      
	$(curSel).children('option').each( function() {           
		var text = $(this).text();  
		var selVal = $(this).attr('value'); 
		var before =  '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + 'px;">';
		var after = '</a></li>';           
		addItems.push(before + text + after);
	});
	//hide the default from the list of options 
	var removeFirst = addItems.shift();
	// create the end of the div selectbox and close everything off
	var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
	//write everything after each selectbox
	var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
	$(curSel).after(GDD);
	//this var selects the div select box directly after each of the origials
	var nGDD = $(curSel).next('div.selectME');
	
	$(nGDD).find('li:first').addClass("first");
	
	$(nGDD).find('li:last').addClass('last');
	//handle the on click functions - push results back to old text box
	$(nGDD).click( function(e) {
		 var myTarA = $(e.target).attr('rel');
		 var myTarT = $(e.target).text();
		 var myTar = $(e.target);
		 //if closed, then open
		 if( $(nGDD).find('li').css('display') == 'none')
			{
					//this next line closes any other selectboxes that might be open
					$('div.selectME').find('li').css('display','none');
					$(nGDD).find('li').css('display','block');
					
					//if user clicks off of the div select box, then shut the whole thing down
					$(document.window || 'body').click( function(f) {
							var myTar2 = $(f.target);
							if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
					});
							return false;
			}
			else
			{      
					if (myTarA == null){
						$(nGDD).find('li').css('display','none');
								return false;
							}
							else {
								//set the value of the old select box
								$(curSel).val(myTarA);
								//set the text of the new one
								 $(nGDD).find('span.gselected').text(myTarT);
								 $(nGDD).find('li').css('display','none');
								 return false;
							}
			}
	//handle the tab index functions
	 }).focus( function(e) {

$(nGDD).find('li:first').addClass('currentDD');
		 $(nGDD).find('li:last').addClass('lastDD');
		 function checkKey(e){
			//on keypress handle functions
			function moveDown() {
				var current = $(nGDD).find('.currentDD:first');
				var next = $(nGDD).find('.currentDD').next();
				if ($(current).is('.lastDD')){
				return false;
				} else {
					$(next).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			function moveUp() {
				var current = $(nGDD).find('.currentDD:first');
				var prev = $(nGDD).find('.currentDD').prev();
				if ($(current).is('.first')){
				return false;
				} else {
					$(prev).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			var curText = $(nGDD).find('.currentDD:first').text();
			var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
		   switch (e.keyCode) {
				case 40:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveDown();
					return false;
					break;
				case 38:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveUp();
					return false;
					break;
				case 13:
					$(nGDD).find('li').css('display','none');
					}     
		}
		$(document).keydown(checkKey);	
	}).blur( function() {
			$(document).unbind('keydown');
	});
});
});

Update

8-4-2009

I've made a few improvements to the script based on user feed back and created a demo that you can now download;

Download the Jquery Select Box Demo

Sherlock Holmes Movie

2009-05-20T20:05:49Z

The Sultan of Gamers

2009-05-19T19:13:42Z

It's so beautiful...I'm speechless. As a life long geek I can tell you one of the most difficult issues to deal with is "where are we going to play?". It seems like there is never enough space, and dinning room tables just don't cut it. They are always too high, or too low, and dice are always getting lost underneath them. You always have a mess of papers and book in front of you that ends up cluttering up the game area. Plus, drinks end up getting spilled all over the place. Finally, someone came up with a brilliant and tasteful way to alleviate these issues.

Built in desk stations, book shelves, slide out cup holders, built in dice towers and channels, fig. storage chambers, pencil and dice corals... And last but not least, an enormous dropped playing table that is transparent so you can draw on it with dry erase markers and not screw up you maps below it. *sigh* if only I had the space to put it somewhere I might consider buying one. Despite it's over-whelming price tag of $8,000+

You can learn more about the Sultan Gaming table at GeekChicHQ.com, or click on read more to see a brief video showing the features of the Sultan Gaming Table.

]]>

Heffer-Weizen

2009-05-14T21:09:59Z

Recently my co-worker Chris and I were discussing the finer points of brewing your own beer. He asked me to help him come up with a label for his beer bottles. I didn't have a lot of time to work on it, just 20 minutes, but this is what we came up with:

And now, a toast to two-headed cows everywhere...

Breaking Bad

2009-05-14T21:07:04Z

I started watching this show a few weeks ago, one night I couldn't sleep and watched the latest 3 episodes. Since then I've become completely addicted. The story is about a high school chem teacher who finds out that he is quickly dieing of lung cancer. He quickly realizes that he'll be leaving his family behind with nothing. So, in an effort to make some money to leave them when he dies he starts secretly cooking Meth. Which he sells with his partner, a former student of his.

Mike's Wedding

2009-05-11T10:05:56Z

Download all of the photos: Mikes Wedding

Swine Flu

2009-04-30T21:08:22Z

I haven't really been paying attention to this news story, even though I'm sure that I should be. After all two kids on the same train line as me have confirmed cases of Swine Flu. Then again... I didn't die from SARS, the Bird Flu, or West Nile. I guess the guys over at the CDC are good at their jobs.

RSS feed test

2009-04-21T17:56:26Z

lets find out.

The Final Level Up

2009-04-09T17:54:42Z

Dave Arneson, lesser known co-creator of D&D, died today. He and Gary Gygax invented the first true role-playing game "Dungeons and Dragons" back in the early 70s. D&D had a huge influence on my life as a kid, and on my artwork as an adult. Bruce Baugh wrote an article about it here.

New Sketches

2009-04-07T16:33:56Z

If you haven't noticed already, I've been posting new sketches lately. They are all from a huge new project I'm working on. I can't go into the details of it much, but but keep tuned. I'm producing some of my best artwork to date and I'll be posting it all as it develops. Just keep an eye on the drawing board on my homepage, or visit my portfolio section to see it all.

The Creative Process

2009-03-15T17:03:43Z

Weekend in Hungary

2009-03-09T09:35:41Z

Despite that I just called everyone on Skype that will read this, I'm going to write it down anyway...you know for posterity or something. This weekend wasn't bad. Work has been frustrating and I've really missed Shari a lot. Most of this trip has been a real pain in the butt, but at least the weather cleared up and I got to walk around a bit.

Saturday Derek and I went to the museum of fine arts in Hero Square. I got to see one of my favorite El Greco paintings, and a great Gustave Moreau exhibit. I realize not everyone knows what I'm talking about (dad), so I posted some pictures below.

]]>

Salome Tattooed by Gustave Moreau. It's really hard to tell from this, but all of those white lines look like alchemic symbols floating in the air. It gives the whole painting the feeling of being "tattooed".

El Greco (the Greek's) The Disrobing of Christ. Again, the tiny rinky-dink photo I've posted doesn't do the painting justice. The reflections on the knight's armor are amazing, and Jesus has these eyes that make him look truly beatific.

We also saw some really cool mummified Egyptian crocodiles in the Egyptian section of the museum. Neither Derek nor I knew that the Egyptian"s did that. It's amazing what you can learn by looking at what people have robbed from graves.

after that we really were feeling pretty beat and took the rest of the afternoon off. I snapped a few pictures on the way back.

That night we went out on a pub crawl with a few friends from work. We met up with Miklos, Barbie, Adam, Gerzson, and Barbie's husband Dave. I didn't take an photos of that night, sorry. Sometimes it's better just to do it than to worry about trying to remember it. Miklos is a really cool guy, he's funny, interested in beer brewing, and knows all of the good communist bars in Budapest (apparently not a joke). I told him that the next time he is in the states I'd take him out to the Sunset Grill. Maybe we can go through a few hundred of the beers they have on tap.

Eventually Derek and Miklos took off and the rest of us made it to a place called "instant" that had a cool looking dance floor in the basement. It looked kind of like a disco version of the inside of an old castle. Actually, if you have ever seen "An American werewolf in Paris", it looks like the club in the beginning of the movie; except no werewolves... or Neo-Nazi... it's a weird movie. Anyway, even though I thought it looked cool on the inside, the lights started to make me feel sick. Damn strobes get me every time. Luckily, we didn't stay there long and I made it safely back to the hotel around 3:30 am.

I didn't get much sleep that night because I had to get early on Sunday morning. Derek and I had agreed the night prior to go to church the next day. Church really isn't my thing anymore, but Derek goes every Sunday and I felt obliged to go with him. He is my friend after all.

It was all wasted effort on my part though. Derek failed to wake early himself and we kind of missed our window of opportunity.

With no real plans for the day in mind we sat down in front of a tourist map of the city and looked for anything that interested us. I pointed out the Museum of Military History on the other side of the river and suggested that we go there. Derek thought it was interesting too so we headed out on foot.

On the way we passed by St. Stephen's Basilica. We took the chance to photograph it again. I had taken a few shot of it the last time I was here, but it was at night. This time, the doors were open and we went in for a look around.

outside above, inside below.

I lit a candle for my Grandmother who is fighting cancer. I'm not sure if my prayer's will get answered, but I know that praying will make her feel better.

After that we discovered this guy in the Square nearby. He looks remarkable close to a drawing I drew only a week before. Except for the hat in the drawing that is...but now that I've seen this guy I might redraw it to match.

I have no idea who this guy is...he just jumped into the photo and gave a big smile. Maybe he's drunk? I don't know.

Eventually we made it up the hill to the castle that I posted photos of last time. I took a bunch of photo's here, but I'm not going to post them all until later on. Here are a few highlights:

The view from the bridge.

A guy wary of the Falcon next to him.

Derek goofing off.

A cool statue.

the view from the other side of the castle.

Then we made it to the Military Museum and I took a lot of photo reference for The One State.

After that we went and got food, then went back to the hotel. I took a nap for a while because the jet lag was still bugging me. Around 9ish derek came over to my room and we watched "Robinhood: Prince of Thieves" on my laptop since we were both bored and too tired to go out.

That's all folks. I've been back to work since.