Joel Nagy .com

Here’s a great little bit of code that I’ve come to rely on when wanting to easily check out an object in JavaScript. I tend to like having my own trace windows especially when needing to debug code in old browsers like IE 6 or when using IE for debugging Facebook tabs and apps. I found this code on github.

var toJSON = function f(a,b,c){for(b in(c=a==""+{}&&[])&&a)c.push(f(b)+":"+f(a[b]));return""+a===a?'"'+a+'"':a&&a.map?"["+a.map(f)+"]":c?"{"+c+"}":a};

Then simply call and alert() or whatever trace function you would use and pass in your object like so

alert(toJSON(myObj));

Facebook hasn’t made it very publicly known that you can update your brand Page on Facebook via their official Android app. Facebook indicates that the iOS app can manage Pages but they neglect to mention how to manage your fanpage on facebook with the Android app.

Well it’s possible, complicated at first, but not so hard once you know what to do. Here are the basic steps:

1. Open the Facebook app and go to the home screen (click whatever is in the upper left whether it says “News Feed”, “Messages” or “facebook”)
2. Click the “Friends” icon in the upper right corner
3. Click “Pages” on the bottom menu, in the middle
4. Select the page you want to update under “My Pages”
5. Upload (or take a picture) by clicking the Camera icon or post a Status update via the text field and the Share button

Enjoy :)

It’s been forever since I’ve added any real content to my blog. Partly due to busy schedules at work, new hobbies popping up (check out my steampunk googles on deviantart) and spending time with my family and new home. It’s hard to juggle everything and sometimes blogging gets in the way. BUT Social blogging is the new blog! That sounds like a load of crap, but what I’m meaning is that I’ve been using various social networks so much more lately to really see how I feel about engaging with people about technology. I started pretty strong with my Twitter account @joelnagy, and then slowed down a bit with twitter especially when Google+ came out. I feel on Google+ I can more easily blog about things I’m interested and also more easily re-blog content while on my Android phone due to the nice integration.

So please visit me on Twitter and Google+.

I’m toying with the idea of actually relocating my blog to just point to Google+ and focus my efforts there. Any opinions on this matter?

I’ve been trying to do research on Flickr for inspirational photos for a non-web related project and I am completely fed up with how Flickr and most photo sites present content. It’s just a mess of photos usually pulled from the database in reverse chronological order with no care for usefulness of the content. By this I mean that someone can upload a hundred photos with the same tags and they could take up pages of results. This could be rather annoying if you don’t find the content interesting or helpful. And skipping pages just leads to you basically randomly jumping into the mess without a guide.

I would like to recommend the idea of displaying photos in mini galleries when more than X (ten or more for example) photos are grouped by the same uploader. These mini galleries could be designed to take up the room of more than one photo and allow the user to see a few at a time and proceed to click through each in sucession only within that set (uploaded by the same author with similar tags and within a certain timeframe, regardless of whether they were uploaded at the same exact time.)

Then if 100 pointless photos show up you can see a few lead images, flip through a couple more and then decide to move on when you realize it is not helpful or interesting. A set of links to expand the photos out or link to that dynamic set could ve added.

Ever tried to put an animated GIF on a Facebook tab? They work fine in the left sidebar boxes but unfortunately are cached by Facebook and served from their CDN. This causes the image’s animation features to be lost. However calling a remote stylesheet will allow the images linked from that sheet to not be cached and thus pull from your own servers directly and animate properly. Check out my example of an animated gif on facebook.

Code for your FBML tab:

<link href="http://example.com/stylesheet.css" />

<div id="Ani">animated gif from stylesheet</div>

Code for your Stylesheet:

#Ani {
	background: white url(http://example.com/animated.gif) no-repeat;
	width: 100px;
	height: 100px;
	display: block;
	text-indent: -5000px;
}

Ever want to use the WordPress Media Gallery for inserting and managing images that you insert in a custom field?  Usually you would need to use the media buttons to add the image and copy and paste the URL to your custom field.  This is rather cumbersome and not really possible if you’ve decided to create a custom post-type that doesn’t use the description field.  With a little modification of a core file and your own custom post-type you can add some additional functionality to pop open the media gallery and insert the URL into your custom field, even display the thumbnail as well. This first block of code contains a javascript function that will respond to the link we’ll create in the media gallery to insert the URL of the chosen image into your custom field. The next bit of code is the custom label and input for the custom field. And then a link to call the Media Gallery. Here we’ve added a parameter called location that identifies the id of the new input.

<script type="text/javascript">
function JNSetCustomMedia(loc, url) {
alert(loc+':'+url);
	try {
		jQuery('#'+loc).attr('value', url);
	} catch (e) { }
}
</script>

<label class="customLabel">URL:</label><input class="customInput" name="myURL" id="myURL" value="<?php echo $URL; ?>" size="60" />

<a class="thickbox" id="set-post-thumbnail" href="media-upload.php?post_id=77&amp;type=image&amp;location=myURL&amp;TB_iframe=1&amp;width=640&amp;height=394" title="Upload custom image">Upload custom image</a>

Inside wp-admin/includes/media.php search for “WPSetAsThumbnail” and before the if statement that checks ($send || $thumbnail || $delete) you need to add this code to add our new code to the $thumbnail html so the URL for the image can be passed back:

if (isset($_GET['location'])) { // look for a call to place image into specific custom field
 		$thumbnail .= ' <a href="javascript:(window.dialogArguments || opener || parent || top).JNSetCustomMedia(\''. $_GET['location'] .'\',\''.
 wp_get_attachment_url($post->ID) .'\');" style="margin: 0 0 0 -15px !important;">Insert custom image</a>';
	}

I’ve only tested this with WordPress 3.0 so far. I’m going to look into adding this functionality as a plugin so that the core media.php file will not need to be edited.

UPDATE: I’ve written a way to insert the links in the media gallery using JavaScript.  It works for all 4 methods (From Computer, From URL, Gallery, and Media Library.)  The code isn’t fully optimized but works well, simply place in your plugin via a call to a function from add_action: add_action(”admin_head”, array(&$this, “admin_custom_head”));

<script type="text/javascript">
//<![CDATA[
// Attach all query vars to the window object for easy access
window.query = new Object();
window.query.length = 0;
window.location.search.replace(
	new RegExp('([^?=&]+)=([^&#]*)?', 'g'),
	// populate the object with the values by name
	function($0, $1, $2) { window.query[$1] = $2; window.query.length++; }
);

function noop() { return; }

function checkForMediaInsert(loc) {
	// If there are Insert into Post buttons we move forward
	if (loc == null || loc == '') return;

	var submit = jQuery('td.savesend input.button').add('#go_button');
	if (submit.length > 0)
		submit.each(function() {
			insertMediaLocation(jQuery(this), loc);
		});

	setTimeout('checkForMediaInsert("'+ loc +'");', 1750);
}

function insertMediaLocation($t, loc) {
	// If we have not already added the link add it
	if ($t == null || loc == null || loc == '') return;
	var $d = null, url = '', $loc = jQuery('#insert-'+loc), href = '';
	var noophref = 'javascript:noop();';
	var id = $t.attr('name').replace(/send\[(\d+)\]/, '$1');

	// Grab URL from either place based on where we are
	if ($t.attr('id') == 'go_button')
		url = jQuery('#src')[0].value;
	else if (id != '')
		url = jQuery('THEAD#media-head-'+id+' +TBODY .urlfile').attr('title');
	if (url == '')
		href = noophref;
	else
		href = 'javascript:(window.dialogArguments || opener || parent || top).JNSetCustomMedia(\''+ loc +'\',\''+ url +'\');';

	if (!$t.hasClass(loc)) {
		// Drop in the link
		$d = jQuery('<a id="insert-'+loc+'" href="'+ href +'" style="margin: 0 0 0 15px !important;">Insert hero image</a>');
		$t.addClass(loc);
		$t.after($d);
	} else if ($t.attr('id') == 'go_button') {
		// Update href on From URL as it can change
		$loc.attr('href', href);
	}

	// If we are on the From URL page color based on whether the image is good
	if ($t.attr('id') == 'go_button') {
		$d = $loc;
		$d.css('color', $t.css('color')); // Get the disabled color (or active, but that'll be changed if all good)
		var goodbutton = jQuery('#status_img img[src$="yes.png"]');
		if (goodbutton.length > 0)
			$d.css('color', jQuery('A:first').css('color'));
		else
			$loc.attr('href', noophref);
	}
}

jQuery(function() {
	// If we have a location request we move forward
	var loc = window.query['location'];
	if (loc == null || loc == '') return;
	setTimeout('checkForMediaInsert("'+ loc +'");', 250);
});
//]]>
</script>

Facebook has taken their Like button a step further.  They now provide you the ability to Admin these Liked pages and send published wall posts as if they were a Fan page.  If you place a Like on your site, make sure to specify yourself as an admin via a meta tag:

<meta content='NUMERIC_FB_ID_HERE' property='fb:admins'/>

Then you can also get a view into your analytics via the Facebook insights. These pages show up in your “Ads & Pages” link that is now in the left nav (despite it never actually staying put if you choose Edit and move it up higher, but that’s cause Facebook likes to add features that aren’t quite ready for primetime.)

It’s quite simple to add the Facebook Like button to your blog.  If you don’t mind editing code and don’t want to deal with a plug-in you can simply drop in this bit of code (to your index.php & single.php files); note that the URL I’m using is based on a previous post for creating your own shortURL for WP:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://joelnagy.com/p<?php the_ID(); ?>&layout=standard&show_faces=false&width=425&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:425px; height:30px;"></iframe>

So please share the love and Like this!

We all want our websites to be beautiful and attract users from an aesthetic point of view. But it would be awful to go through the pain of dealing with the loss of customer data and seeing the media rip into you for slcking on security and being hacked if your development schedule was compromised due to “creative creep”.

Quite often it seems that the one place everyone thinks a schedule can be squeezed is the development or QA phase.  Customers are not your QA staff.  ”Beta” on a website can be tech-catchy but in reality sites in beta are QA’d internally as well. Reducing time or expecting 12 hour development days is likely to result in mistakes. These mistakes can be very costly if not caught. A simple SQL injection could result in the theft of customer data and a PR nightmare at worse. Overworking the dev team to finish on time while the creative team continues to “work out” ideas only results in code that becomes reconstructed to manage ideas that are hardly ever simple and will cause tension.

The most important thing I can say is that planning for changes and creative creep would at least benefit your  development team, but that the expected hard deadlines required by development should also be part of the creative schedule.

In short, developers are people too.

Commonly I ignore typing www. at the beginning of a URL. Today I came upon a little issue that Google has with their servers; they didn’t set up google.com/adsense to redirect to www.google.com/adsense.  At first I thought I had mistyped the URL as I received the red screen of insecurity.  Made me at least happy to know that Google didn’t program any specific google.com references into the browser to automatically assume any safety for their servers.