]]> Have you ever had a need for adding external files into your Magento layout?
If you had then you know that you cannot do that from your xml layout files using methods/action:

<action method="addJs">
<action method="addCss">
or
<action method="addItem">

You could do that by hard-coding your “head.phtml” file, but then those external files will be loaded on all Magento pages.
This simple extension will provide you easy access for adding/removing external files such as JavaScript or CSS, libraries from remote servers which you cannot or don’t want to put on your server.
I called it Inchoo_Xternal extension.

How wonderful it would be if you could add or remove external, let’s say JavaScript libraries:
prototype: https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
or
jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js
from yours “layout.xml” file and without modifying/hard-coding yours “head.phtml”.

Extension is very simple and it exists from only one Block class which extends and rewrites “Mage_Page_Block_Html_Head” class and configuration files of modules.
config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <Inchoo_Xternal>
            <version>1.0.0</version>
        </Inchoo_Xternal>
    </modules>
    <global>
        <blocks>
            <inchoo_externals>
                <class>Inchoo_Xternal_Block</class>
            </inchoo_externals>
            <page>
                <rewrite>
                    <html_head>Inchoo_Xternal_Block_Html_Head</html_head>
                </rewrite>
            </page>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <inchoo_xternal module="Inchoo_Xternal">
                    <file>inchoo_xternal.xml</file>
                </inchoo_xternal>
            </updates>
        </layout>
    </frontend>
</config>

Block class is very simple and it have 2 new methods I have called:
removeExternalItem which do the same as removeItem
and
addExternalItem also do the same as addItem
but I have added new types:
external_css
external_js
which loads external libraries.
Here is example of my layout.xml:

<layout version="0.1.0">
	<default>
            <reference name="head">
                <action method="addItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="addItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>
                <action method="addExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="addExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>
            </reference>
	</default>
	<catalog_product_view>
		<reference name="head">

                <action method="removeItem"><type>external_css</type><name>http://developer.yahoo.com/yui/build/reset/reset.css</name><params/></action>
                <action method="removeItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js</name><params/></action>

                <action method="removeExternalItem"><type>external_js</type><name>http://yui.yahooapis.com/2.8.2r1/build/imageloader/imageloader-min.js</name><params/></action>
                <action method="removeExternalItem"><type>external_css</type><name>http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css</name><params/></action>

            </reference>
	</catalog_product_view>
</layout>

As you can see from this example, external libraries are loaded on all the pages but product view page.

Download Inchoo_Xternal extension for easily adding external javascript and css files.

Enjoy coding!

]]> If you are trying to fix that nasty PNG issue in IE6 search no more. Go to Drew Diller’s dillerdesign and behold. A PNG fix for IE6 that actually works on a repeating background image,  go figure Our new team member Ivan Weiler tried it out yesterday on a “soon to be launched” project and was amazed with the way it works. Here is the excerpt from his site:

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <img /;> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, “fixed” elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class.

]]> There are millions of distinct designs on the web horizon. They all have more or less the styles on their own, like: 3D, cartoon, clean, dark, futuristic, geometric, grunge, minimalistic, retro, corporate, urban, vector, and many more. If we put out design diversity, most of them share the similar structure. They have header, menu, content area, sidebar or sidebars, footer, some secondary space and many more.

If you are one of those who developed HTML/CSS for every web from scratch, try to consider 960 Grid System and their demo page.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Well, I just see it will work for me perfectly and will save me much time in the future.