Block vs Single Line

Default to single line, because many rules will only contain one or two styles and its a waste and pain to scroll vertically through code. Most editors support the 80 column rule, so if your styles get longer than that, convert to block (easy to set a macro to do it for you in most IDE’s and editors).

.foo { background: #ccc; float: left; margin: 0 10px; }
 
.bar {
	cursor: pointer;
	display: block;
	float: left;
	height: 29px;
	margin: 7px 0;
	padding: 0 16.2%;
	width: 26px;
}

Indentation

It’s so much easier to read code that is indented to show hierarchy and white space that separates or groups similar or related objects together. This is a standard I see most front-end developers following, but if you’re not, smack yourself now and get with the program.

ul { }
	li { }
		li a { }
 
.foo {}
	.bar {}

That’s all on formatting for now. Adopt these standards and read on, because I’m sure I’ll be back on this rant before too long.

document.ontouchstart = function (e) {
	if (e.touches.length == 1) { // Only deal with one finger
		var touch = e.touches[0], // Get information for finger #1
		    x = touch.pageX,
		    y = touch.pageY;
	}
}

Further Reading on Mobile Touch Events in Javascript

• iPhone Gesturing Explained

Galleries

WordPress is getting more robust with every release, yet for some reason, there’s still no great way to do Galleries natively. Fear not, we have found that Nextgen and CataBlog will do the job well enough!

Worpress and Search Engine Optimization

When it comes to SEO, there are absolutely no open source platforms that I’ve seen that do as superb of a job providing tools and automating the process. Keys to wordpress SEO include meta control, monitoring, links and social networking. Here are the best tools for the job:

WordPress Stats Plugin

The WP Stats is actually two essential plugins, one by the creators of WP and the other as a dashboard tool to take analytics through the roof. The WP stats plugin lets you monitor social traffic, alexa, compete, and far more — all enabled and monitored without leaving your admin!

WordPress SEO by Yoast

For years, i used the All in one SEO plugin, and even gave headspace a shot but Yoast knocked them both out of the water for me. The yoast plugin boasts some great tools to help you generate meta content, plus looks and works the way a good WP plugin should.

SEO Smart Links

Internal site links are a huge usability and SEO boost, and nothing helps you build these links better than this plugin. I usually dump in a keyword list that I’ve built with Google’s Keyword tool and over time I aim to write articles and link them to those keywords.

Worpress SEO requires a Sitemap

Don’t let the name fool you, Google SEO sitemap covers all the major search engines and notifies them automatically whenever you publish new content. Don’t skip this one, a sitemap is a must in helping a search engine index your site, and is even more crucial for frequent bloggers.

Faster page loads in WordPress

We all want more cache don’t we? WP Super Cache speeds up your site significantly making your pages load faster, which is favorable for both man and machine! Follow that with Smush.it, Database Optimization and Minification and you’re looking at a 20-30% faster site on average (estimated from personal use and client sites).

Get Social with WordPress

Social networking is huge and most blogs completely fail to engage their audience (guilty), part of the problem is obviously content but the other part is often the tools and approach. If your website is large and well known (or has the capacity to be) why not extend WordPress with BuddyPress and launch your own social network? Or keep it simple and drop in Socialize widgets and Disqus Comments so that your users can engage using existing social platforms.

WordPress Utilities you can’t Live Without

There are a TON of utilities that I would love to talk about, but for brevity I will only mention Scissors and WP DB Backup. Scissors lets you crop and rotate media which is something I hope wordpress will include in its core. WP Backup makes a data backup for you automatically and emails it to you, allowing you to have a backup outside of your host.

I hope these plugins help, and if you feel I missed one that HAS to be on the list, just mention it in the comments below and I’ll argue about it a bit

The first is quick and easy to drop into a Magento theme, but only gets the static block content:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('indentifer')->toHtml() ?>

Where, by calling the static block model, you can then get all fields associated with that block such as the static block title

<?php
$block = Mage::getModel('cms/block')->load('identifier');
echo $block->getTitle();
echo $block->getContent();
?>

Hope this helps you with static blocks in your custom magento theme. Happy coding!

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

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.

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.

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!

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