Clayton McIlrath http://thinkclay.com Creative Media Design, Powered by Wordpress Mon, 19 Jul 2010 23:06:34 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Facebook PhoneBook http://thinkclay.com/social-media/facebook-phonebook http://thinkclay.com/social-media/facebook-phonebook#comments Mon, 19 Jul 2010 23:06:34 +0000 Clay McIlrath http://thinkclay.com/?p=1359 When I first heard the name “Facebook” a few years back, the brand immediately triggered the thought of a visual phone book. When I discovered that Facebook was something more than just a phonebook, however, I soon forgot that the thought ever even crossed my mind.. until today.

I signed into facebook today to start my projects for the day (I’m a facebook developer, mind you) but before I dive right in, I like to check out the facebook stream and see how my friends are doing. I’m quite used to facebook changing things around on me, but when I saw a status that said Facebook was publishing phone numbers, I thought it had to be fake.

Turns out, I find out from a friend that facebook privacy is once again an issue rather than getting a notice from Facebook. All you have to do is go to Account > Edit Friends > PhoneBook and see it for yourself.

Facebook Phonebook Privacy

Considering the fact that they’ve received flack about privacy since day one, you’d think this would be something that they’d take a little bit more seriously and notify users of. What do you think? Is facebook overstepping and shorting us by lack of notice, or do people not care?

]]> http://thinkclay.com/social-media/facebook-phonebook/feed 2 Must-have Magento Extensions http://thinkclay.com/technology/must-have-magento-extensions http://thinkclay.com/technology/must-have-magento-extensions#comments Sun, 13 Jun 2010 19:14:45 +0000 Clay McIlrath http://thinkclay.com/?p=1232 As Magento grows, so does it’s base for extensions and contributions. I often find myself browsing the collection of them, and try to experiment with a new extension on every site that I build. This is my list of must-haves and favorite magento extensions thus far, and hopefully I’ll add to this list as time goes on.

Developer Extensions

Developer toolbar:

http://www.magentocommerce.com/extension/2271/developer-toolbar

Blueprint Theme:

http://www.magentocommerce.com/extension/2245

Free Magento Extensions

Product Image lightbox:

http://www.magentocommerce.com/extension/1487/magento-easy-lightbox

Product Detail tabbing:

http://www.magentocommerce.com/extension/1725/magento-easytabs

Teaser Box:

http://www.magentocommerce.com/extension/1778/teaserbox

Free Magento Themes

Absolute Magento Theme

http://www.magentocommerce.com/extension/2031/magento-absolute-theme

Paid Magento Extensions

Abandoned Cart Alerts

http://adjustware.com/shop/magentomods_abandoned_carts_alerts.html

Quickview

http://www.magentocommerce.com/extension/574/quickview-1.1

]]> http://thinkclay.com/technology/must-have-magento-extensions/feed 4 Magento: Add New CMS Page Layout http://thinkclay.com/technology/magento-add-new-cms-page-layout http://thinkclay.com/technology/magento-add-new-cms-page-layout#comments Sun, 06 Jun 2010 15:16:32 +0000 Clay McIlrath http://thinkclay.com/?p=1221 Add a new CMS Page Layout Want to take your Magento Themes to the next level? Have multiple layouts? If you're looking to add a new page layout in Magento, create a custom layout or create a new theme layout then this solution is probably for you.]]> Want to take your Magento Themes to the next level? Have multiple layouts? If you’re looking to add a new page layout in Magento, create a custom layout or create a new theme layout then this solution is probably for you.

Add a new CMS Page Layout

First we have to create a module. Create file: app/etc/modules/Mage_Page.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mage_Page>
            <active>true</active>
            <codePool>local</codePool>
        </Mage_Page>
    </modules>
</config>

Then copy this whole folder: app/code/core/Mage/Page to app/code/local/Mage

What we’ve done is taken a core module and copied it into our local module. This lets us override any core functionality without have to worry about it breaking in future update (or undoing if you mess up).

Now we need to edit: app/code/core/Mage/Page/etc/config.xml and look around line 46 and you can define your own layout, I’m going to call mine “home”

<layouts>
	<home module="page" translate="label">
        <label>Home</label>
        <template>page/home.phtml</template>
        <layout_handle>page_home</layout_handle>
    </home>
    <empty module="page" translate="label">
        <label>Empty</label>
        <template>page/one-column.phtml</template>
        <layout_handle>page_empty</layout_handle>
    </empty>
    <one_column module="page" translate="label">
        <label>1 column</label>
        <template>page/1column.phtml</template>
        <layout_handle>page_one_column</layout_handle>
    </one_column>
    <two_columns_left module="page" translate="label">
        <label>2 columns with left bar</label>
        <template>page/2columns-left.phtml</template>
        <layout_handle>page_two_columns_left</layout_handle>
    </two_columns_left>
    <two_columns_right module="page" translate="label">
        <label>2 columns with right bar</label>
        <template>page/2columns-right.phtml</template>
        <layout_handle>page_two_columns_right</layout_handle>
    </two_columns_right>
    <three_columns module="page" translate="label">
        <label>3 columns</label>
        <template>page/3columns.phtml</template>
        <layout_handle>page_three_columns</layout_handle>
    </three_columns>
</layouts>

Now all you have to do is make a template for this page. Navigate to your theme directory: app/design/frontend/YOUR_THEME/YOUR_THEME/template/page/ and create a new template called home.phtml. I suggest using another existing template as a starting point, such as 3columns.phtml so that you know what variables to work around. This will enable a custom layout option for CMS pages once you’re finished. I’ve tested this with 1.3 series but nothing previous or after that. If you have any comments or questions feel free to post them here or read the forum on Magento’s site for more details.

]]> http://thinkclay.com/technology/magento-add-new-cms-page-layout/feed 12 Compatible Operating Systems for Web Hosting http://thinkclay.com/technology/compatible-operating-systems-for-web-hosting http://thinkclay.com/technology/compatible-operating-systems-for-web-hosting#comments Tue, 18 May 2010 14:43:28 +0000 Clay McIlrath http://thinkclay.com/?p=1348 Best compatible operating system for web hosting

When you are choosing web hosting, one of the first things you need to choose is the operating system. If you are a techie, this is probably an easy choice, but if you don’t have technical background, then the very question “Operating system?! What is this?” will pop up in your head.

What is an Operating System?

There are many definitions of what an operating system is but since you are not a techie, you will hardly be willing to delve into the technical details. To put it into layman’s terms, an operating system is a piece of software you need in order to install applications and to access the underlying hardware.

Hardware is nothing without software to manage it and this is why you need software (i.e. the operating system) to tell the hardware what to do. On the other hand, an operating system doesn’t perform tasks an application can and this is why you need to install applications within the operating system in order to perform tasks such as browsing the Net, logging into your web host, etc. It is true that most operating systems come bundled with applications but still applications are separate from the operating system.

Popular Web Hosting Operating Systems?

There are hundreds of operating systems in use but the most popular ones are Windows and Linux. As an end-user, you are probably already familiar with Windows because you are probably using it on your computer. As far as web hosting is concerned, Windows hosting doesn’t use exactly the same version of Windows that you may be running on your computer; but still both versions are very similar.

The second popular web hosting operating system is Linux. You might have heard about it but probably you have never used it. Unlike Windows, Linux is primarily a server operating system (though there are many Linux distributions that are intended as a desktop operating system). In addition to Windows and Linux, there are other web hosting operating systems, such as UNIX=, MAC, HP varieties, or Solaris, but we won’t discuss those here.

Is Linux Hosting or Windows Hosting Best?

Usually when you have to choose the operating system for your web hosting, the choice is between Windows hosting and Linux hosting. Both Windows hosting and linux hosting have their advantages and disadvantages and it is not possible to recommend one of them as the better option. In some situations Linux hosting is the way to go, while in others Windows hosting is the better alternative.

For a novice, who is familiar with neither Linux hosting, nor Windows hosting, Linux hosting could be a bit more difficult to master. However, once you pass the initial stages, you will see that Linux administration is not terribly difficult.

Actually, the biggest deciding factor between Linux hosting versus Windows hosting are your applications. There are applications, which can be run only under Windows/Linux and if your applications fall into this group, you have no choice but to go for Linux hosting/Windows hosting.

]]> http://thinkclay.com/technology/compatible-operating-systems-for-web-hosting/feed 1 My experience at F8 2010 http://thinkclay.com/technology/my-experience-at-f8-2010 http://thinkclay.com/technology/my-experience-at-f8-2010#comments Thu, 29 Apr 2010 22:18:06 +0000 Clay McIlrath http://thinkclay.com/?p=1342 I’ll be posting all of my notes from the Facebook F8 conference on Capture the Conversation blog. I’ll come back to this post and provide some more technical notes and insight later, but for now read all about my experience at the links below:

Facebook f8: Open Graph and Open Source
Facebook f8: Default is Social pt1

]]> http://thinkclay.com/technology/my-experience-at-f8-2010/feed 0 Setup SVN in Hostmonster Shared Hosting http://thinkclay.com/technology/setup-svn-in-hostmonster-shared-hosting http://thinkclay.com/technology/setup-svn-in-hostmonster-shared-hosting#comments Tue, 27 Apr 2010 06:09:26 +0000 Clay McIlrath http://thinkclay.com/?p=1335 I've had my fair share of installs in shared hosting, but sometimes simple things like SVN can get very tricky with providers like Hostmonster or BlueHost. I hope that this shell will work as well for you as it has for me. Just copy the code and paste into a file on your server svninstall.sh and then to run just execute . .svninstall.sh and you're off! Comment here if you get and errors and I'd be glad to help.]]> I’ve had my fair share of installs in shared hosting, but sometimes simple things like SVN can get very tricky with hosting providers like Hostmonster or BlueHost. I hope that this shell will work as well for you as it has for me. Just copy the code and paste into a file on your server (i called mine svninstall.sh) and then to run just execute . .svninstall.sh and you’re off! Comment here if you get and errors and I’d be glad to help.

#!/bin/sh
 
export svn=1.6.9
export ipath=$HOME/tools64/
export dev=$HOME/dev/svn
 
mkdir -p $ipath
mkdir -p $dev
cd $dev
 
if [ ! -f $dev/subversion-deps-$svn/__download ] ; then
	rm subversion-deps-$svn.tar.bz2*
	wget http://subversion.tigris.org/downloads/subversion-deps-$svn.tar.bz2 && \
		tar -xjf subversion-deps-$svn.tar.bz2 && \
		mv subversion-$svn subversion-deps-$svn && \
		touch  subversion-deps-$svn/__download
	rm subversion-deps-$svn.tar.bz2.*
fi
if [ ! -f $dev/subversion-$svn/__download ] ; then
	rm subversion-$svn.tar.bz2*
	wget http://subversion.tigris.org/downloads/subversion-$svn.tar.bz2 && \
		tar -xjf subversion-$svn.tar.bz2 && \
		touch  subversion-$svn/__download
	rm subversion-$svn.tar.bz2*
fi
 
 
export o=" --prefix=$ipath LDFLAGS="-L$ipath/lib" CPPFLAGS="-I$ipath/include" CFLAGS="-I$ipath/include" "
export oapr=" --with-apr=$ipath/bin/apr-1-config "
export oapu=" --with-apr-util=$ipath/bin/apu-1-config "
 
export pdep=$dev/subversion-deps-$svn
export psvn=$dev/subversion-$svn
 
export PATH=$ipath/bin:$PATH
 
#compile zlib
cd $pdep/zlib
export CFLAGS='-fPIC'
if [ ! -f _done ] ; then
	make clean
	./configure --prefix=$ipath
	make && touch _done
fi
make install
 
# compile APR
cd $pdep/apr
if [ ! -f _done ] ; then
	make clean
	./configure $o
	make && touch _done
fi
make install
 
# compile neon
cd $pdep/neon
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install
 
#compile sqlite
cd $pdep/sqlite-amalgamation
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install
 
# compile Berkeley DB
cd $pdep
if [ ! -f db-5.0.21/__download ] ; then
	rm db-5.0.21.tar.gz*
	wget http://download.oracle.com/berkeley-db/db-5.0.21.tar.gz && \
		tar -xzf db-5.0.21.tar.gz && \
		touch  db-5.0.21/__download
	rm db-5.0.21.tar.gz*
fi
cd $pdep/db-5.0.21/build_unix
if [ ! -f _done ] ; then
	make clean
	../dist/configure $o $oapr
	make && touch _done
fi
make install
 
 
# compile APR-util after Berkeley. This way svn find berkeley automatically
cd $pdep/apr-util
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr --with-berkeley-db=$ipath/include:$ipath/lib
	make && touch _done
fi
make install
 
# compile serf
cd $pdep/serf
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr $oapu
	make && touch _done
fi
make install
 
# finaly, build svn
cd $psvn
if [ ! -f _done ] ; then
	make clean
	./configure $o $oapr
	make && touch _done
fi
make install
]]> http://thinkclay.com/technology/setup-svn-in-hostmonster-shared-hosting/feed 5 FBJS Slider Carousel http://thinkclay.com/tutorial/fbjs-slider-carousel http://thinkclay.com/tutorial/fbjs-slider-carousel#comments Tue, 13 Apr 2010 04:50:25 +0000 Clay McIlrath http://thinkclay.com/?p=1325 I’ve made a nice little FBJS Slider that I use quite often for animation within facebook. I hope that little snippets and code like this will help other developers make more interested and appealing Facebook applications, like we do at Room 214 currently.

First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

<style type="text/css">
#wrapper { clear: left; overflow: hidden; position: relative; width: 520px; }
#slideWrap { clear: both; position: relative; width: 9000px;}
.slide { float: left; width: 520px; }
 
#wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
	#slideNav li { display: inline; padding: 0; }
		#slideNav li a {
			background: url(http://cmcilrath.rssready.net/xcel/assets/images/bg_slideNav.png?v=3) no-repeat -12px top;
			display: block;
			float: left;
			height: 12px;
			margin-right: .5em;
			text-decoration: none;
			text-indent: -999em;
			width: 12px;
		}
		#slideNav li a.next, #slideNav li a.prev { width: 10px; }
		#slideNav li a.selected { color: #000; background-position: -12px bottom; }
 
		#slideNav li#prevSlide a { background-position: top left; }
		#slideNav li#prevSlide a.disabled { background-position: bottom left; }
 
		#slideNav li#nextSlide a { background-position: top right; }
		#slideNav li#nextSlide a.disabled { background-position: bottom right; }
</style>

The FBJS script

<script>
<!--
function Each(array, block){
	for (var i=0, l = array.length; i<l; i++){
		block(array[i]);
	}
}
 
var currentSlide = 1;
var maxSlides = 5;
var animating = false;
var slideWidth = 520;
var currentPX = 0;
 
function nextSlide(){
	var nextSlideNum = currentSlide + 1;
	if(nextSlideNum >= maxSlides){ toggleButton('next','disable'); }
	else if (nextSlideNum == 2 && currentSlide == 1){ toggleButton('prev','enable'); }
	currentSlide = nextSlideNum;
	if(animating == false){ scroll('right'); }
	return false;
}
 
function prevSlide(){
	var prevSlideNum = currentSlide - 1;
	if(prevSlideNum == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','enable'); }
	currentSlide = prevSlideNum;
	if(animating == false){ scroll('left'); }
	return false;
}
 
function toggleButton(button,state){
	if(button == 'next' && state == 'disable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next disabled">next slide &gt;</a>').removeEventListener('click',nextSlide);
	}
	if(button == 'next' && state == 'enable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next">next slide &gt;</a>').addEventListener('click',nextSlide);
	}
	if(button == 'prev' && state == 'disable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev disabled">&lt; previous slide</a>').removeEventListener('click',prevSlide);
	}
	if(button == 'prev' && state == 'enable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev">&lt; previous slide</a>').addEventListener('click',prevSlide);
	}
}
 
function scroll(direction){
	Each(document.getElementById("slideNav").getElementsByTagName("a"), function(as){
		as.removeClassName("selected");
	});
 
	document.getElementById("slideNav-"+currentSlide).addClassName("selected");
 
	animating = true;
	var pixelShift = slideWidth * (currentSlide-1);
	var startingSlideNum = currentSlide;
	var Slide_container = document.getElementById('slideWrap');
 
	if(direction == 'left'){
		Animation(Slide_container)
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.by('right', '-' + pixelShift + 'px').from(currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('left'); }
		}).go();
	}
	if(direction == 'right'){
		Animation(Slide_container)
			.by('right', pixelShift + 'px').from(currentPX + 'px')
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('right'); }
		}).go();
	}
 
	currentPX = pixelShift;
}
 
function showSlide(num){
	startingSlide = currentSlide;
	currentSlide = num;
 
	if(num > startingSlide){ scroll('left'); }
	else if (num < startingSlide) { scroll('right'); }
 
	if (startingSlide == maxSlides && currentSlide == 1){ toggleButton('next','enable'); toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides && startingSlide == 1){ toggleButton('prev','enable'); toggleButton('next','disable'); }
	else if (currentSlide == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','disable'); }
	else if (startingSlide == 1) { toggleButton('prev','enable'); }
	else if (startingSlide == maxSlides) { toggleButton('next','enable'); }
}
//-->
</script>

FBML Markup

Simple markup here, slideNav controls the slide with onclicks, the JS does the magic.

<div id="wrapper">
	<h2>Header</h2>
	<ul id="slideNav">
		<li id="prevSlide"><a href="#" class="prev disabled">&lt; previous slide</a></li>
		<li><a href="#" id="slideNav-1" onclick="showSlide(1); return false;" class="selected">1</a></li>
		<li><a href="#" id="slideNav-2" onclick="showSlide(2); return false;">2</a></li>
		<li><a href="#" id="slideNav-3" onclick="showSlide(3); return false;">3</a></li>
		<li><a href="#" id="slideNav-4" onclick="showSlide(4); return false;">4</a></li>
		<li><a href="#" id="slideNav-5" onclick="showSlide(5); return false;">5</a></li>
		<li id="nextSlide"><a href="#" class="next" onclick="nextSlide(); return false;">&gt;</a></li>
	</ul>
	<div id="slideWrap">
        <div id="slide_1" class="slide">
			<h3><a href="#">Title 1</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_2" class="slide">
			<h3><a href="#">Title 2</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_3" class="slide">
			<h3><a href="#">Title 3</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_4" class="slide">
			<h3><a href="#">Title 4</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_5" class="slide">
			<h3><a href="#">Title 5</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
	</div>
	<!-- end slideWrap -->
</div>
]]> http://thinkclay.com/tutorial/fbjs-slider-carousel/feed 7 Getting Started with Facebook JS (FBJS) http://thinkclay.com/technology/getting-started-with-facebook-js-fbjs http://thinkclay.com/technology/getting-started-with-facebook-js-fbjs#comments Thu, 25 Feb 2010 05:16:13 +0000 Clay McIlrath http://thinkclay.com/?p=1314 I’ve only recently started developing Facebook Apps and being a strong front-end developer I was confident that I would be able to pickup FBJS quickly. My confidence what short-lived however, once i discovered that Facebook had a very restricting framework and cache system that would make JS programming something quite a bit less desirable than awesome frameworks like jQuery.]]> I’ve only recently started developing Facebook Apps and being a strong front-end developer I was very confident that I would be able to pickup FBJS quickly like I have with many other Javascript Frameworks. My confidence what short-lived however, once I discovered that Facebook had a very restricting framework and cache system that would make JS programming something quite a bit less desirable than awesome frameworks like jQuery or Prototype

What you CAN’T do in FBJS

I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:

window.onload in FBJS

Instead of using window.onload to initialize your functions, use setTimeout.

setTimeout( function(){  }, 10 );

Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).

alert alternative for FBJS

Since you can’t use alert or document.write, use Facebook’s dialog box:

new Dialog().showMessage('Dialog', 'This is text');

document.write alternative for FBJS

Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:

<script>
function logOutput(){
    var text = "This will be inserted into my log div";
    document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>

Trouble with JS Arrays in Facebook

For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:

// new Array() is not supported in FBJS
var myarray = [];
myarray[0] = 'stuff';
 
// or
myarray['foo'] = 'bar';
 
// or 
myarray.push('another example');

More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!

]]> http://thinkclay.com/technology/getting-started-with-facebook-js-fbjs/feed 9 Valentines Day Fonts and Wallpapers http://thinkclay.com/creativity/valentines-day-design-fonts-wallpapers-graphics http://thinkclay.com/creativity/valentines-day-design-fonts-wallpapers-graphics#comments Wed, 10 Feb 2010 10:02:58 +0000 Clay McIlrath http://thinkclay.com/?p=637 Valentines Day Graphic With Valentines Day coming up, some are probably looking for cutesy wallpapers and frilly fonts, and others are panicking and trying to decide what they're going to get their significant other for Valentines Day. Well fear and look no more, I've got a little collection for you to get started with.]]> With Valentines Day coming up, some are probably looking for cutesy wallpapers and frilly fonts, and others are panicking and trying to decide what they’re going to get their significant other for Valentines Day. Well fear and look no more, I’ve got a little collection for you to get started with.

Valentines Day Fonts

Valentines Day Graphic Font

valentines day girl font

Valentines Day Font with Roses

Valentines Day Font with Frilly Hearts

Valentines Day Graphics (vector)

valentines heartsgrunge heartsodd valentines day hearts

Valentines Day Wallpapers

Valentines Day 2009 WallpaperValentines Day - Almost PerfectValentines Day Candy WallpaperA valentines day card for menRetro Valentines Day WallpaperHeart being shot at

]]> http://thinkclay.com/creativity/valentines-day-design-fonts-wallpapers-graphics/feed 3 How to start a successful blog http://thinkclay.com/news/how-to-start-a-successful-blog http://thinkclay.com/news/how-to-start-a-successful-blog#comments Sun, 31 Jan 2010 20:35:40 +0000 Clay McIlrath http://thinkclay.com/?p=1275 It’s been a year and a half since i started this blog, and it’s amazing to look at how far I’ve come. This blog started out as a playground, where my best designs were wallpapers and my experience with development was limited to mostly front-end. In those days, I was proud of my average of 30-40 hits per day, and now I’m surprised if my traffic falls below 250 in a single day. The point I’m coming to is this.. blogging takes time, effort and consistency all of which make a three-legged stool. The stool cannot stand if all three legs aren’t relatively even, and as a tribute to the wisdom and knowledge I’ve retained from the past year; I’d like to share some key points on starting/maintaining a successful blog.

Doing your time

Regardless of having one writer or multiple writers for a blog, it’s going to take a hefty amount of effort and time to build up your blogs content and traffic. One of the areas I attribute a lot of the success of this blog to is the time dedication I’ve had. I dropped other hobbies like playing guitar and watching TV to start blogging and reading more. This has been the key to my growth as a person and having one leg of my stool strong as steel. To make sure you put in the right amount of time, trying pacing yourself, or joining in a group like project 52, where you dedicate to writing one post per week. Just remember one important rule.. too much will cause readers to flee and too little will fail to attract them. I think once a week is a good frequency for a new blog.

Putting in the effort

You may be thinking, “isn’t putting in time the same as putting in effort?” .. and the answer is NO. Putting in effort usually means research, capital, and marketing. To run a successful blog, you need a few ingredients to help you along the way such as a professional design, an understanding of SEO, and the right marketing tools such as twitter and facebook. Putting in effort is somewhat misleading, because some of the effort is external, but it all comes back to you. Any money or learning you put into your blog is an effort that will help you keep this leg balanced. As I mentioned with time.. a weekly schedule to teach yourself something new will really help you along.

Remaining Consistent

I see two very common mistakes relating to consistency:

Scenario A involves traffic, a blogger (whether new or veteran) sees the blog as a failure because traffic is low and doesn’t seem to be climbing. The worst thing you could do in Scenario A is give up on it. Think of a blog as real estate or stock.. it’s value may fluctuate significantly, but if you look at the course and direction of the internet as a whole, it’s value is always increasing. If you look at the short term, you’ll see failure, but dedication and consistency will almost always prove successful (combine that with a good exit strategy and you have yourself a business plan).

Hype is like dessert: most of the time it’s incredible, but too much will make you sick

Scenario B involves lack of time or effort. Yes, I’m aware I’ve already mentioned these two points, but bare with me. If you’re putting a lot of time into your blog and it’s not growing you may be focusing on the wrong areas. I see lots of blog focus on social media or spend loads of money on advertising, and they feel highly successful because they see their numbers jump.. for a while. The problem is people get bored with hype, it’s like dessert: really great, but too much or too often will make you sick of it. People need meat and potatoes in their diet. Many loyal readers will favor quality over quantity. My site for example rivals others that have 300+ posts and write daily.. yet it only has around 60 posts.

Put it all together

The last piece is a not-so-secret ingredient, and doesn’t need a paragraph to explain.. you have to be passionate about what you share. Blogs can definitely be profitable, but if you content doesn’t communicate passion and true interest, people aren’t going to be interested in what you have to say. Write to share about what you love, not to make money. Once you’ve built up a successful blog of loyal readers, then try and strategize the financial successes. I’m sure other bloggers would tell you differently, but I’m telling you from my experience that heart has more value than profits. If you enjoy what you do, there’s no price that can replace that.

]]> http://thinkclay.com/news/how-to-start-a-successful-blog/feed 5