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 tabs, but not so much in canvas).

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!

Valentines Day Fonts

Valentines Day Graphics (vector)

Valentines Day Wallpapers

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.

Or go a whole new direction completely and lose the plume:

What are your thoughts?

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.

1. Get MAMP up and running, no special setup is needed here.
2. Download Zend Framework and place it wherever you’d like. I actually retrieved my copy via SVN so that I can easily upgrade it later. To do this open up terminal and follow these commands:

   cd /Applications/MAMP/
   mkdir svn
   cd svn
   mkdir zendframework
   cd zendframework
   svn checkout http://framework.zend.com/svn/framework/standard/trunk
   

3. Now open your php.ini file located under /Applications/MAMP/conf/php5/php.ini
4. Search for include_path (around line 411 on mine) and add the location of your zend framework:

   include_path = ".:/usr/lib/php:/usr/local/lib/php:/Applications/MAMP/svn/zendframework/trunk/library"

   Make sure to include the library directory otherwise you’ll get a blank page in Zend Framework

5. Zend Framework also comes with a shell script that will help you with RAD (Rapid Application Deployment), you can create a shortcut to Zend Tools in terminal by adding an alias to your profile under /etc/profile (thanks DS for pointing this out) and make sure to restart terminal after you’ve done so:

   alias zf=/Applications/MAMP/svn/zendframework/trunk/bin/zf.sh

6. Test if the Zend Tool is installed correctly by showing the version:

   zf show version

7. Finally navigate to the directory you’d like to create your first project in:

   cd /Applications/MAMP/htdocs/

   and with Zend Tool creating a project is simple:

   zf create project test

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

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

Then copy this whole folder: app/code/core/Mage/Sales 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/Sales/etc/config.xml and look around line 544 and you’ll want to replace tags with:

<order>
    <statuses>
        <pending translate="label"><label>Pending</label></pending>
        <pending_paypal translate="label"><label>Pending PayPal</label></pending_paypal>
        <processing translate="label"><label>Processing</label></processing>
        <holded translate="label"><label>On Hold</label></holded>
        <complete translate="label"><label>Complete</label></complete>
        <closed translate="label"><label>Closed</label></closed>
        <canceled translate="label"><label>Canceled</label></canceled>
    </statuses>
	<states>
	  <new translate="label"> 
	    <label>New</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </new>
	  <pending translate="label">
	    <label>Pending</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </pending>
	  <processing translate="label">
	    <label>Processing</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </processing>
	  <complete translate="label">
	    <label>Complete</label>
	    <statuses>
	      <complete/>
	      <pending/>
	      <processing/>
	      <holded/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </complete>
	  <closed translate="label">
	    <label>Closed</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </closed>
	  <canceled translate="label">
	    <label>Canceled</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </canceled>
	  <holded translate="label">
	    <label>On Hold</label>
	      <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </holded>
	</states> 
</order>

This will enable all default magento statuses on the order page. In edition to enabling statuses you can also create your own custom order status here as well. As far as I know this solution works on Magento 1.1 up to 1.3 but if you have any comments or questions feel free to post them here or read the forum on Magento’s site for more details.

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

/* COOKIES OBJECT */
var Cookies = {
        // Initialize by splitting the array of Cookies
	init: function () {
		var allCookies = document.cookie.split('; ');
		for (var i=0;i<allCookies.length;i++) {
			var cookiePair = allCookies[i].split('=');
			this[cookiePair[0]] = cookiePair[1];
		}
	},
        // Create Function: Pass name of cookie, value, and days to expire
	create: function (name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
		this[name] = value;
	},
        // Erase cookie by name
	erase: function (name) {
		this.create(name,'',-1);
		this[name] = undefined;
	}
};
Cookies.init();

Unfortunately, there’s no easy way to simple update a cookie (correct me if I’m wrong) but this will allow you to delete and re-create as needed:

// Erase cookie "test"
Cookies.erase('test');
 
// Recreate cookie "test" with a new value of "cookievalue" and set to expire in 10 days
Cookies.create('test','cookievalue',10)

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);
 
        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);
 
        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<div class="overlay"><\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay { 
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal { 
	background: #00121b; 
	min-height: 54.5em;
	width: 56.5em; 
	border: 1px solid #111e24; 
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute; 
	z-index: 1002; 
}