Clayton McIlrath » developer tools http://thinkclay.com Creative Media Design, Powered by Wordpress Thu, 29 Jul 2010 18:35:08 +0000 en hourly 1 http://wordpress.org/?v=3.0 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 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 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 4 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 Installing Zend Framework on MAMP http://thinkclay.com/technology/installing-zend-framework-on-mamp http://thinkclay.com/technology/installing-zend-framework-on-mamp#comments Wed, 09 Dec 2009 03:23:28 +0000 Clay McIlrath http://thinkclay.com/?p=1209 mamp.info as well as the Zend Framework bundled with Zend Tool. ]]> As usual, I’m sharing a solution a problem that I personally encountered and couldn’t find a great solution for. So I’ve been using my laptop more and more as my local development environment in order to keep things private and secure while in the dev stage. Among learning how to fully utilize SVN locally, I’ve been trying to setup my laptop to be a fully functional server while also being extremely easy to maintain and change my environment on the fly. To do this, I’m running MAMP (Mac Apache MySQL PHP) available for free at mamp.info as well as the Zend Framework bundled with Zend Tool.

  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
]]> http://thinkclay.com/technology/installing-zend-framework-on-mamp/feed 24 Zen Coding http://thinkclay.com/technology/zen-coding http://thinkclay.com/technology/zen-coding#comments Mon, 23 Nov 2009 20:22:13 +0000 Clay McIlrath http://thinkclay.com/?p=1193 As a developer, I’m always looking for ways to improve my coding practices and efficiency. In the programming world, I work almost completely with frameworks such as Zend and CodeIgnitor using MVC at it’s fullest. On the front-end, I’ve learned to use Blueprint CSS combined with semantic markup to standardize my layouts. But now, I’ve added another INCREDIBLE tool to my belt, and I want to share it with all of you as well.. Zen Coding

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

]]> http://thinkclay.com/technology/zen-coding/feed 3 Magento Tips and Snippets http://thinkclay.com/technology/magento-tips-and-snippets http://thinkclay.com/technology/magento-tips-and-snippets#comments Thu, 20 Aug 2009 17:47:55 +0000 Clay McIlrath http://thinkclay.com/?p=1061 magentoMagento has become quite a popular system in recent months.. snippets, tutorials, and other resources are in high demand for the system. Since I've been working with Magento for quite a while now, I feel like creating a page where I can continually add useful code snippets and tutorials for Magento. If you don't see what you're looking for here, tweet me @thinkclay or check back later! Let's look at some pros and cons of Magento and then some useful code snippets..]]> magentoMagento has become quite a popular system in recent months.. snippets, tutorials, and other resources are in high demand for the system. Let’s look at some pros and cons of Magento and then some useful code snippets..

The Good

All around, Magento beats the competition. Here are just a few highlights if you’re not familiar with Magento:

  • Magento is Object Oriented
  • Magento is secure and scalable
  • Magento has a large community that is rapidly growing
  • Magento can be extended very easily
  • Magento allows for multiple stores and store fronts

The Bad

Magento has a few things that I’m not too excited about:

  • Magento is HUGE and bulky
  • Magento lacks a WYSIWIG and CMS
  • Magento uses a lot of JavaScript in a bad way

Some Useful Code

I’ll feed you baby birds..

Add a CMS Static Block to a page:
Within Magento:

{{block type="cms/block" block_id="identifier"}}

With PHP:

getLayout()-&gt;createBlock('cms/block')-&gt;setBlockId('identifier')-&gt;toHtml() ?&gt;

Check with User Group a customer belongs to (based upon Group ID) 

getCustomerGroupId(); ?&gt;

Check if user is logged in: 

helper('customer')-&gt;isLoggedIn(); ?&gt;

Display products from a specific category on the page:
Many people ask how to display products on the home page.. this is the easiest and most universal solution. Replace category ID with whatever category you want to display

{{block type="catalog/product_list" template="catalog/product/list.phtml" catagory_id="0"}}

Shortcuts:
Store URL within Magento:

{{store url=""}}

Define a new CMS Page Layout

Depending on what version of Magento you’re running, this may be different, but in the 1.3x series, this is how you’d define a new page layout. We’ll define a layout called home for this example:

/app/code/core/Mage/Page/etc/config.xml

        <page>
            <layouts>
                <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>
                <home>
                	<label>Home</label>
                	<template>page/home.phtml</template>
                	<layout_handle>page_home</layout_handle>
                </home>
            </layouts>
        </page>

Please understand that this is editing the core and will not be protected in an upgrade/update. To properly define this to be compatible with future upgrades, you’ll need to define a simple module to override the core with a local file.

]]> http://thinkclay.com/technology/magento-tips-and-snippets/feed 5 Pros and Cons of using sIFR http://thinkclay.com/technology/pros-cons-using-sifr http://thinkclay.com/technology/pros-cons-using-sifr#comments Wed, 22 Jul 2009 07:56:58 +0000 Clay McIlrath http://thinkclay.com/?p=1068 sifrsIFR (scalable Inman Flash Replacement): allows for dynamically-generated snippets of text to use any font supported in Flash using a combination of JavaScript and Flash embedding to replace characters on the page. In my last post regarding sIFR, I compared sIFR against Cufon and FLIR. Since there is a great deal of interest in them, I decided to go deeper into what I believe is the superior out of the three.. ]]> sifrsIFR (scalable Inman Flash Replacement): allows for dynamically-generated snippets of text to use any font supported in Flash using a combination of JavaScript and Flash embedding to replace characters on the page.

In my last post regarding sIFR, I compared sIFR against a few of the other popular font replacement methods such as Cufon and FLIR. Since there is obviously a great deal of interest in the subject of font replacement, I figured it would be beneficial to show a deeper analysis at sIFR which I believe is the superior out of the three.

A deeper look at pros of sIFR

sIFR is quite different to the many font replacement techniques in the wild. Instead of manually generating each header through an image generator such as FLIR and Cufon do, sIFR is able to load a flash object and replace each element on the fly. The scripted effect works for roughly 95% of world wide web users according to statistics for Flash support and JavaScript support in modern browsers. Note also, that sIFR is by no means required, and degrades gracefully if the user does not have one of these components required. I’m sure some purists would react with contempt, but this method causes no harm to usability and only effects load time if used incorrectly (such as replacing body text rather than headers).

sIFR… what’s not to love?

First and foremost, implementation can be slaughtered. For an inexperienced developer, sIFR can take up to an hour to implement (from what I’ve heard in complaints anyways) and can cause pages to load slowly. From my experience, both are due to an incompetent developer, as sIFR is quite easy to implement if you understand all front-end technologies (which you should be a front-end developer) and only causes slow load time if its used for large blocks of text. Compare sIFR to the first wave of Web 2.0 technologies.. to this day I see wannabe developers implementing 20k+ javascript libraries to do one simple “jiggle” or “ajax” ability, which you can do with a few lines of code if you understand raw JavaScript. We can’t blame the technology for human error.. sIFR is brilliant. It may have a ways to go before it’s perfect, but respecting the principles of semantics, usability, and accessibility.. sIFR by far is winning the race against Cufon and FLIR.

Now to address the purists and their complaint about flash and JS dependency. Plain and simply, if a user falls within the 3-10% that doesn’t have Flash or JavaScript enabled, then BIG DEAL. That’s what good old HTML/CSS are for.. a fall back solution. Should we punish those with modern browsers and technologies for the minority that will get a slightly-less-quality rendering? I don’t punish modern browsers by neglecting the wonders of CSS 3. If Internet Explorer sees a box with square corners instead of rounded.. BIG DEAL. So why should we fight about whether a user has JS or Flash enabled? Heck, you can even use image replacement at that point, if you really want to.

The Big Picture

The real issue is that there aren’t enough fonts supported in Internet Explorer. If we want to point fingers and find something to criticize, there it is. Firefox, Safari, Chrome, Opera.. they’re all supporting more CSS properties such as @font-face. However, due to copyright laws and support from Internet Explorer we are bound to 5-10 fonts that we can reasonably assume the user has installed, and that’s ALL we’ve got. Solutions have been offered and argued but the problems are still much broader.. ranging from font licensing, support and rendering, with no clear solution in sight.

sIFR is one solution of many offered by developers fighting a war for creative freedom. It’s here and now, it’s legal despite the font, and regardless of the few quirks.. it’s usable. If you use it, then I hope you implement it well. If you protest it, then I hope you have valid reasons, and aren’t just complaining because you’re ignorant. Take this post with a grain of salt.. it’s my 2 cents and nothing more.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

]]> http://thinkclay.com/technology/pros-cons-using-sifr/feed 0 RFP Application for Download http://thinkclay.com/technology/rfp-application-for-download http://thinkclay.com/technology/rfp-application-for-download#comments Tue, 23 Jun 2009 16:37:24 +0000 Clay McIlrath http://thinkclay.com/?p=1024 Chosen RFP ApplicationA while back, I developed an application to automate our workflow and gather information from potential clients before meeting with them. This was a pretty basic RFP form, but I had many people tell me how interested they were in it, and that they wanted to use it for themselves. Within a few weeks of launching that RFP we had finished our new brand and it was already outdated. Rather than updating and re-skinning I decided to start from scratch and share the old one with whoever wants it. You can customize this application as necessary, but please give credit to Chosen with a link back to this site or the main Chosen site.. even if the link is hidden, we still like it there for SEO.]]> Chosen RFP ApplicationA while back, I developed an application to automate our workflow and gather information from potential clients before meeting with them. This was a pretty basic RFP form, but I had many people tell me how interested they were in it, and that they wanted to use it for themselves. Within a few weeks of launching that RFP we had finished our new brand and it was already outdated. Rather than updating and re-skinning I decided to start from scratch and share the old one with whoever wants it. You can customize this application as necessary, but please give credit to Chosen with a link back to this site or the main Chosen site.. even if the link is hidden, we still like it there for SEO.

View Demo or Download

Lansing Web and Technology

If you are a web design or web development firm in Lansing, MI then talk to me personally about an even better version of this application. I’m offering it only to Lansing Web Design Companies because I believe in giving the Lansing Area a competitive advantage when it comes to technology. Feel free to contact me at the email in my header.

]]> http://thinkclay.com/technology/rfp-application-for-download/feed 1 Where to start learning Web Development http://thinkclay.com/technology/where-to-start-learning-web-development http://thinkclay.com/technology/where-to-start-learning-web-development#comments Thu, 11 Jun 2009 20:13:29 +0000 Clay McIlrath http://thinkclay.com/?p=1016 Start Learning Web DevelopmentThere are SO MANY articles out there that get very deep into web development and programming concepts, but not many people know what to start learning if you're just starting in this field. I've put together a well-rounded list of resources and websites to read on a regular basis and learn as much as you can. If you become familiar with all of these websites, you'll quickly be the best in your field. All the information is free to anyone with a passion or desire to learn.]]> Start Learning Web DevelopmentThere are SO MANY articles out there that get very deep into web development and programming concepts, but not many people know what to start learning if you’re just starting in this field. I’ve put together a well-rounded list of resources and websites to read on a regular basis and learn as much as you can. If you become familiar with all of these websites, you’ll quickly be the best in your field. All the information is free to anyone with a passion or desire to learn.

Validators

  • Total Validator: simple HTML/CSS Validator with browser plugin support
  • W3C Validator: the organization that defines markup standards, and validates according to those standards
  • Cynthia Says: screen reader which will help you with accessibility in mind

Accessibility

  • WebAIM: Introduction to Accessibility
  • WCAG: Web Content Accessibility Guidelines
  • WCAG Overview: Overview of WCAG Standards
  • WCAG Tutorial: A useful educational resource to learn the standards
  • Section 508: Federal requirements for web accessibility

Javascript Libraries

Firefox Plugins for Developers

Tutorials

  • W3Schools: Very in-depth, free tutorials on the most commonly used web markup and programming languages
  • A List Apart: Articles and tutorials on an extensive list of topics
  • QuirksMode: Good articles and test pages concerning javascript and CSS
]]> http://thinkclay.com/technology/where-to-start-learning-web-development/feed 4