/* 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; 
}

Creating the Block

The first thing you need to do is create a block in your layout. Navigate to /app/design/frontend/default/default/layout/catalog.xml

The first thing in your layout is a definition of the default layout noted by the comment “Default layout, loads most of the pages” depending on where you want to put your category nav (right sidebar, left sidebar, footer, etc) you’ll need to define the block a little differently. I’m going to do it with the left sidebar so you see what’s going on.

<reference name="left">
            <block type="catalog/navigation" name="catalog.leftnav" template="catalog/navigation/left_nav.phtml" />
</reference>

Okay, so what i did was locate the left sidebar which is referenced simply as “left” inside those tags i define my block type and template. The next thing you’ll want to do is create that template file, note that i defined it within /app/design/frontend/default/default/template/catalog/navigation/left_nav.phtml so i will need to create that file.

Creating the Template

Once I’ve created the file, it’s time to put in my code to populate my links automatically of all my categories:

<h2>Browse</h2>
<div class="block">
<ul id="nav_category" class="nav_category">
	<?php foreach ($this->getStoreCategories() as $_category): ?>
		<?php echo $this->drawItem($_category) ?>
	<?php endforeach ?>
</ul>
</div>
<?php echo $this->getChildHtml('topLeftLinks') ?>

If you want to take this a step further, you can target subcategories based on current page with this little script (via Pratthost

<?php
$obj = new Mage_Catalog_Block_Navigation();
$store_cats	= $obj->getStoreCategories();
$current_cat 	= $obj->getCurrentCategory();
$current_cat	= (is_object($current_cat) ? $current_cat->getName() : '');
 
foreach ($store_cats as $cat) {
	if ($cat->getName() == $current_cat) {
		echo '<li class="current"><a href="'.$this->getCategoryUrl($cat).'">'.$cat->getName()."</a>\n<ul>\n";
		foreach ($obj->getCurrentChildCategories() as $subcat) {
			echo '<li><a href="'.$this->getCategoryUrl($subcat).'">'.$subcat->getName()."</a></li>\n";
		}
		echo "</ul>\n</li>\n";
	} else {
		echo '<li><a href="'.$this->getCategoryUrl($cat).'">'.$cat->getName()."</a></li>\n";
	}
}
?>

Now refresh the cache and you should be set!

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:

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

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

<?php Mage::getSingleton('customer/session')->getCustomerGroupId(); ?>

Check if user is logged in:

<?php $this->helper('customer')->isLoggedIn(); ?>

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=""}}

Forward thinking and positive attitude

Often times when facing grim circumstances, its easy to get caught up in the problems at hand. Instead look beyond the current situation to the solution that lies on the other side. You have the ability to overcome.

Use technology to get ahead

Regardless of your state in this economy, its important to recognize the simple fact that paper and pencil are less popular. You should have some form of digital presence or website if you’re going to compete.

Set goals and plan for the future

It’s naive to think that the economy is going to improve over night or that it won’t effect you. Take the steps necessary to ensure the quality of living you’d like to retain even if you lose your job or business.

Avoid the easy way out

Right now is the opportune time for someone to take advantage of you. Don’t buy into a service that is sounds easy and promising. Make a point to investigate and consult with someone that has your best interest in mind.

Surround yourself with positive people

We all know that times are tough, but if you focus on the problem, it just seems to get bigger. Avoid getting caught up in the poverty mentality by surrounding yourself with successful and optimistic people.

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.

Starting a business without Capital Investment

It’s easy to say that it can be done, but it’s a whole different story to actually execute. Like I mentioned before, take notes from the Getting Real plan. Start your business by moonlight.. don’t quit your day job and jump right in (of course we’re hypocrites saying this because we jumped in, but I wish we had moonlighted first). Either negotiate with your employer to work part-time for a while or start your business at nights.. that way you have the income still to support your bills, but you can start planning and developing your business. Begin networking with other businesses in your field and going to seminars on weekends, because one of the greatest tools in starting a business is connections.

Along with the moonlighting, establish a budget. You may not know all of the costs to operate your business, and you may not be able to prepare for every road block or pitfall. What you can do, however, is give yourself a cushion. Depending on your liabilities (bills), you may want anywhere from $5,000 to $20,000 saved up before you quit you job and go full-time as a business.

About our Web Company

This post is based on our opinions and testimonials with starting our Web Company. Thinkclay is a blog by Clayton McIlrath based out of Lansing, MI. You can find more us by searching: Lansing Web, Powered by Wordpress and Graphic Design Portfolio

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.

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

• jQuery
• Prototype / Scriptaculous
• MooTools

Firefox Plugins for Developers

• CSS Validator
• CSS Viewer
• Web Developer Toolbar
• Firebug

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

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.