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

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.

/* 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)

Download the YUI Compression AppleScript

The AppleScript Source:

on run
	tell application "Finder"
		set this_item to choose file with prompt "Choose CSS or JS file:"
		set dir to the selection as alias
	end tell
	set mypath to posix_path(this_item)
	set dirpath to posix_path(dir)
 
	runCompression(mypath, dirpath)
end run
 
on posix_path(mac_path)
	set mac_path to (mac_path as text)
	set root to (offset of ":" in mac_path)
	set rootdisk to (characters 1 thru (root - 1) of mac_path)
	tell application "Finder"
		if (disk (rootdisk as string) is the startup disk) then
			set unixpath to "/" & (characters (root + 1) thru end of mac_path)
		else
			set unixpath to "/Volumes:" & mac_path
		end if
	end tell
	set chars to every character of unixpath
	repeat with i from 2 to length of chars
		if item i of chars as text is equal to "/" then
			set item i of chars to ":"
		else if item i of chars as text is equal to ":" then
			set item i of chars to "/"
		else if item i of chars as text is equal to "'" then
			set item i of chars to "\\'"
		else if item i of chars as text is equal to "\"" then
			set item i of chars to "\\" & "\""
		else if item i of chars as text is equal to "*" then
			set item i of chars to "\\*"
		else if item i of chars as text is equal to "?" then
			set item i of chars to "\\?"
		else if item i of chars as text is equal to " " then
			set item i of chars to "\\ "
		else if item i of chars as text is equal to "\\" then
			set item i of chars to "\\\\"
		end if
	end repeat
	return every item of chars as string
end posix_path
 
on runCompression(mypath, dirpath)
	tell application "Terminal"
		do shell script "java -jar " & dirpath & "yuicompressor-2.4.2.jar " & mypath & " -o " & mypath & ".min.js"
	end tell
end runCompression

If you like this YUI Compression AppleScript please do share that with me, as praise is my sole motivation for producing scripts for others. I’ve only skimmed the surface of applescript, but with so few scripts out there that meet the needs that I have, I’m sure I could quickly make some other web developer tools for Mac as well.

A comparison of some of the most popular PHP-based Content Management Systems (CMS). The views and opinions expressed are simply that.. my views and opinions.. not so much straight facts. If there are systems mentioned that you would like to contribute input to, do so in the comments. Same goes for any systems that I neglect to mention: feel free to mention it in the comments and a quick pro/con comparison.

Drupal – a blogging and forum CMS

The Good:

Drupal is a great platform if you’re a developer looking to have a very flexible and dynamic blog/forum. Drupal has the functionality and great integration of blogging and forums right in the core of the system. Drupal is also fairly easy to learn and has a large community and professionals using the system. Drupal is also one of the few Content Management Systems that is not dependent on one server technology, since it works on both IIS and Apache.

The Bad:

Backward Compatibility: Drupal is in constant development, and each launch lacks backwards compatibility with the previous version. This makes it extremely frustrating as each year you have to upgrade old sites manually and modify the code to have it working correctly with the new version.

The Ugly:

Usability: Most aspects of Drupal’s administration interface are confusing and intimidating, particularly for new administrators. This makes it difficult to train clients and you usually have to provide documentation and instructions for clients to be able to use it correctly. Drupal may be powerful, but it is also complex. The key is overcoming its steep initial learning curve. Most casual users are willing to sacrifice features for ease of use making Drupal less popular than systems such as WordPress which offer point and click extensibility and great user interface.

Expression Engine – a large multi-functional CMS

The Good

Expression Engine is easily one of the largest and most sophisticated Content Management Systems out there, but the beauty of the system is simplicity. You don’t have to know PHP syntax to understand this system, and for those that do you get an added bonus as future releases will be built on the CodeIgnitor framework. Top it all off with built in modules from blogging to forums and page making, the only thing you won’t get out of the box with this system is a shopping cart.

The Not-so-Bad

While Expression Engine is amazing in many ways, it does come with a price tag. The price is very reasonable, however, and if you were try to match this system with an open source alternative, you wouldn’t get anywhere close without buying premium modules or plugins anyways, so shrug it off and try it out. They do have a free version to get started with!

Frog CMS – a really basic page-based CMS

Overview of Frog CMS

I haven’t used Frog CMS yet, but have heard wonderful things about the system. From what I do know, Frog is based on a very lightweight and simple Ruby on Rails systems called Radiant. Featuring drag-and-drop layout and ordering and amazingly fast setup times, this system has been getting a lot of praise as a great generic page-based CMS. You’ll probably want to play around with it before using it on any client website, but from my research, I’d say this CMS is perfect for really low-budget, really basic websites like a simple photographer or other small business website.

Joomla – a very large, very difficult, but very powerful CMS

The Good

Joomla will blow your mind when you google any question you can think of for the system. Since the system began as a fork of Mambo it has had the time to grow and extend to do just about anything. There are over 4000 plugins for Joomla to date, and the largest community and support group of any CMS. If you’re a master programmer, or a large business, this system is perfect for you.

The Bad

Like all mammoths, large and old systems eventually die out. This system, while powerful and amazing, takes far too much time to learn. If you didn’t grow up with the system or use it in a corporate setting, then don’t both with it now. Joomla is on it’s way out, being replace by slimmer, faster, and easier systems like Expression Engine and Modx.

Modx – content management at it’s finest

Overview of Modx

Modx is the closest you’ll get to an application that looks and behaves like a desktop application, supporting right-clicks to edit properties, drag-and-drop arrangement and functionality, as well as CTRL+S to save pages! This is a medium sized Content Management System, offering a wide range of functions, but mostly specializing in simple page and template management. Modx is easy to learn, easy to work with, and easy to customize. I really believe this is one of the best systems you’ll find and I have yet to find any major drawback to using Modx over other systems, aside from the lack of blogging or forums in its core (though this adds to the value of the system for many as well since it stays lighter without unneeded functionality). Oh, and did I mention that this works on almost ANY major web server and features a web based installer that tells you what works, what doesn’t and how to fix it!?!? Don’t just take my word for it, read more praise about Modx

Find your strengths and excel above the rest

So many web developers claim to know all when it comes to web, but when put to the test someone that can write “hello world” doesn’t meet the standards the client expected when they said “Do you know PHP?” All developers whether primarily front-end or back-end, should know at least a C level amount in both. To be an awesome back-end developer you need to be able to structure your content in something other than tables or invalid HTML, and to be an awesome back-end developer, you should at least know how to make simple variables and includes to make your job quick and efficient, rather than copying/pasting your doctype and head information on each page. If you want to do well in the next few years, then succeed by being a GURU in at least two of the following:

• XHTML and CSS – with clean and valid markup that works in FF, Webkit, and IE7+
• Flex and ActionScript – flash/animation/design are a huge plus
• JavaScript – with and without frameworks, jQuery or MooTools knowledge a plus
• PHP – cakePHP or codeignitor frameworks will take you to the next level
• .NET – IIS and server administration a plus
• Ruby – Rails will take you to the next level
• JAVA – desktop publishing knowledge a plus

Learn new and trendy technologies

While following trends isn’t always a good idea, trends that have been around for more than just a year and have high demand are usually worth taking a second glance at. In the past 5 years, there are a few major trends that are really growing. I highly recommend picking one of the trends and learning as much as you can about the technology on the side of your current studies and work..

Rich Internet Applications (RIA)

Adobe Flash has always had a strong presence on the web, and that presence is only increasing along with other RIA platforms like Microsoft Silverlight, JavaFX, and the future HTML5. There are almost no major disadvantages to sites built entirely in Flash or other platforms now that search engines like Google are making more of an effort to index RIA content. To top that, Adobe has now adopted a markup language geared more towards developers called FLEX. Flex allows developers to markup their code in MXML while also using ActionScript for animation and then simply, with the click of a button plublish the application in either a SWF for web or as an AIR application for desktop. I strongly believe this is the future of not only the web, but future Operating Systems as well. Google and Ubuntu have already shown a heavy interest in using web applications on the desktop, and phone operating systems are following a similar pattern. While mobile and desktop development are entirely different from web development, learning FLEX is a great way for web developers to cross that threshold and succeed.

Agile Development and Object Oriented code

As the internet reaches the far corners of the Earth, boundaries and barriers are being broken for working remotely on projects. In fact there are many businesses that operate entirely on remote collaboration. This means you need to learn a versioning software and systems (CVS or SVN using Tortoise is a good place to start), how to organize your thoughts and communicate them quickly and effectively over IM or email, and most importantly how to comment and structure your code (for programmers OO principles are a must) so that others can quickly pickup where you left off.

Web Services and Cross-Platform Markup

UML, XML, JSON, REST and SOAP, just to name the most common languages, are becoming a must for nearly every developer. Almost every RIA and API use a language like this to communicate. Any site that is dynamic is probably using at least one of these technologies. I can’t specifically tell you which is more relevant or popular, as it varies per project, but I can tell you that they’re all fairly simple to learn, so I suggest doing your homework or ready a book on each to know at least base knowledge and markup for each of them.

Refine your Interpersonal Communication Skills

As you climb the corporate ladder, or step out into the world of business, it will become more and more important that your written and verbal communication skills are sharp and effective. The gap that used to exist between sales/consulting/design/IT is now closing, and more businesses are switching to an Agile model. This means from the start of a project or team, you may be communicating directly with a client, or with others that don’t know or understand the technology. You’ll need to learn how to explain things so that others can easily understand and relate, as well as sound professional and well educated. These skills are not easy to hone, and require a lot of time. I highly recommend actively getting involved in forums/blogging to improve written communication, perhaps join a local business group or Chamber of Commerce to learn how to communicate better in a professional business setting (another perk to this is the networking), and ask others to correct and help you identify bad habits and mistakes.

What are Custom Fields?

Custom fields are a predefined function within the WP system. All you have to do is pass a parameter to the function to receive data back. Though there is great documentation for custom fields in the WordPress Codex, to a new coder, this documentation can be overwhelming. Instead, let’s breakdown and look at a very specific piece of the function..

So hypothetically, let’s say you want a thumbnail in the beginning each post on your homepage (take a look at my homepage to see the layout I’m referring to). Thumbnails and images are important for blogs to break up the content and add visual appeal. For quite a while I’ve been going into each of my posts, uploading an image and floating it left, and then taking that image and intro text and putting it into the excerpt box. This method, while functional, is a three step process that slows down my blogging time. So to speed up the process I can use custom fields and the RSS limit function to display the same results automatically without having to do it manually each time.

In my blog post, I create a new custom field called “imagethumb”. After defining the imagethumb “key” once, I can then use that custom field on each blog post by selecting it from the dropdown field, and all I have to do is specify a value (location) of the image. So the custom field should display as:

Name: imagethumb
Value: http://yourimage.url

Then I need to edit my index.php file and add the thumbnail to the post loop and set two modes for posts with or without images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?
// Start the post loop
while (have_posts()) : the_post();
?>
<div class="date">
  <span class="day"><? the_time('j'); ?></span>
  <span class="month"><? the_time('M'); ?></span>
  <span class="year"><? the_time('Y'); ?></span>
</div>
 
<h1>Title Goes Here</h1>
 
<p class="postmetadata">
  <? the_tags('Tags: ', ', ', '<br />'); ?>
  Posted in <?php the_category(', ') ?> |
  <? edit_post_link('Edit', '', ' | '); ?>
  <? comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?>
</p>
 
<div class="entry">
<?
// Get custom field by passing the parameter to get_post_custom_values() function
$values = get_post_custom_values("image");
 
// If custom field is set, format the image with the content
if (isset($values[0])) {
?>
  <img class="alignleft" src="<? bloginfo('url'); ?>/<?=$values[0];?>" />
  <p class="alignleft"><? the_content_rss('', TRUE, '', 100); ?></p>
<?
}
 
// if not set, pull in the excerpt instead
else {
?>
  <p><? the_excerpt(); ?></p>
<?
}
 
// end loop
endwhile;
?>

You can go one step further in the automation process and use a cropping script to automatically crop the image to the desired size. All you’ll need is timthumb and to set the parameters you want on the image

Parameters
----------------------
w: width
h: height
zc: zoom crop (0 or 1)
q: quality (default is 75 and max is 100)
 
example:
<img src="<? bloginfo('url'); ?>/timthumb.php?src=<?=$values[0];?>&w=300&h=200&zc=1" />