“onerror” Handler for PaaS (example Shopify)

The onerror handler can be handy when using PaaS’s like Shopify.

Here is an example that looks for a particular image file in the assets folder based on the product title, and offers a fallback in case it doesn’t exist:

{% if product.title %}
	{% capture new_file_name %}file-{{ product.title | handleize }}.gif{% endcapture %}
	<img src="{{ new_file_name | asset_url }}" onerror="this.src='{{ 'default.gif' | asset_url }}';" />
{% else %}
	<img src="{{ 'default.gif' | asset_url }}" />
{% endif %}

For more information about onerror see:

References:

HTML table row and column hover with jQuery and CSS

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
/* #Reset & Basics (Inspired by E. Meyers) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* #Clear fix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Table Hover Effects */
.hovertable { width:auto;  border-collapse:separate; border-spacing: 5px 0; border:1px solid #f6f6f7; padding:5px 0; margin-bottom:20px; }
.hovertable thead { }
.hovertable th { text-align:center; padding:5px; background:#E6E6E6; border-bottom: 5px solid #FFFFFF; font-weight:bold; }
.hovertable td { text-align:center; padding:5px;  }
.hovertable colgroup { width:100px; }
.hovertable td.columnHead, .hovertable tr.rowHover, .hovertable td.columnHover { background:#ECE8E5; }
.hovertable tr.rowHover td.columnHead, .hovertable td.hover { background:#EF9E7C; }
</style>
</head>
<body>

<table id="example" class="hovertable">
    <colgroup></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <colgroup class="slim"></colgroup>
    <thead>
        <tr>
            <th>KNITWEAR</th>
            <th>UK</th>
            <th>FRANCE</th>
            <th>ITALY</th>
            <th>JAPAN</th>
            <th>DENMARK</th>
            <th>US</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="columnHead">XS</td>
            <td>6</td>
            <td>34</td>
            <td>38</td>
            <td>5</td>
            <td>32</td>
            <td>2</td>
        </tr>
        <tr class="even">
            <td class="columnHead">S</td>
            <td>8</td>
            <td>36</td>
            <td>40</td>
            <td>7</td>
            <td>34</td>
            <td>4</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">M</td>
            <td>10</td>
            <td>38</td>
            <td>42</td>
            <td>9</td>
            <td>36</td>
            <td>6</td>
        </tr>
        <tr class="even">
            <td class="columnHead">L</td>
            <td>12</td>
            <td>40</td>
            <td>44</td>
            <td>11</td>
            <td>38</td>
            <td>8</td>
        </tr>
        <tr class="odd">
            <td class="columnHead">XL</td>
            <td>14</td>
            <td>42</td>
            <td>46</td>
            <td>13</td>
            <td>40</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

</div>
<script>
// initiate hover effects
$(function(){
				
	$("table").delegate('td','mouseover mouseleave', function(e) {
		var table = $(this).parent().parent();
		var col = $(this).parent().children().index($(this));
		var row = $(this).parent().parent().children().index($(this).parent());
		if (e.type == 'mouseover') {
			$(this).addClass("hover");
			$(this).parent().addClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).addClass("columnHover");
		}
		else {
			$(this).removeClass("hover");
			$(this).parent().removeClass("rowHover");
			$("tr td:nth-child("+(col+1)+")", table).removeClass("columnHover");
		}
	});				
				
});
</script>
</body>
</html>

References:

A simple function to create a mobile drop-down menu from a HTML list

Create an HTML menu as follows:

<nav>
   <ul>
       <li><a href="#">Link</a></li>
       <li>
           <ul class="subnav">
                <li><a href="#">Link</a></li>
                ...
           </ul>
       </li>
       <li><a href="#">Link</a></li>
       ...
   </ul>
</nav>

Add jquery and this your javascript:


// JavaScript Document
$(window).ready(function(){
       initialisemobileselectmenu();
}

function initialisemobileselectmenu()
{

	// Add a select bo to HTML element "nav"
	$("<select />").appendTo("nav");
	
        // Add an option to the top called "Menu"
        $("<option />", {
	   "selected": "selected",
	   "value"   : "",
	   "text"    : "Menu"
	}).appendTo("nav select");

        // scroll through each list element and add 
        // an option to the select menu
	$("nav ul li a").each(function() {
		var el = $(this);
		subtext = (el.parent().parent().hasClass('subnav')) ? "- " : ""
		$("<option />", {
		 "value"   : el.attr("href"),
		 "text"    : subtext+el.text()
		}).appendTo("nav select");

	});

        // add selected to current page
	$("nav select").change(function() {
		window.location = jQuery(this).find("option:selected").val();
	});
}

Add CSS media queries to hide navigation and select boxes:

/* hide select and show list as default */
nav select { display:none; }

@media all and (max-width: 767px) { 
/* hide list and show select for smaller screens */
nav ul { display:none; }
nav select { display:block; }
}

Flash Detection with SWFObject to use with Modernizr

To add flash detection to your HTML tag as with Modernizr, include SWFObject and then add this function to the top of your page:

function hasFlash()
{
	if(swfobject.hasFlashPlayerVersion("1"))
	{
		$('html').addClass('hasflash');
	}
	else
	{
		$('html').addClass('noflash');
	}
}

Favicon madness

This page previously contained some information that was previously published here:
http://www.oeconomist.com/blogs/daniel/?page_id=4424

I apologise to the author for publishing this article previously without obtaining explicit permission, and without sufficient reference to his work. The solution was not implemented in any commercial projects.

This is an interesting approach http://realfavicongenerator.net/extensions/wordpress/

Service Oriented Open Source E-commerce

What you need:

  1. Services
    1. DynDNS
      1. Domain name registration
      2. Custom DNS
      3. SSL
    2. Google Apps
    3. Dropbox
    4. Google Analytics
    5. Google Webmaster Tools
    6. Github
    7. Browsercam
    8. Mailchimp
    9. Australian bank account with Merchant Facility
    10. Payment Methods
      1. eway (Australian payment gateway for on site, credit cards, debit cards, bank transfers)
      2. Paypal merchant account
      3. Google Checkout merchant account
  2. Hosting Platform
    1. 1 x Amazon LAMP server
    2. 2 x Amazon S3 buckets (One for remote backup and the other as a CDN serving static files)
  3. Frameworks
    1. Paypal’s Magento Go Hosted shopping cart platform
    2. PHP MVC Framework Codeigniter
    3. AWSPHPSDK (Amazon Web Services PHP SDK)
    4. HTML5, CSS3, JQuery
  4. Development Platform
    1. VirtualBox VM running OpenSolaris Linux, MySQL, PHP, OpenSSL (same as Joyent SmartMachine)
    2. PHPUnit
    3. Phing build automation
    4. Seige load testing
    5. Git version control
    6. Cross-browser testing available via remote-access to various OS/Browser/Mobile combinations using Browsercam or Mailchimp’s Mailbox Inspector program

What you can do:

  1. Google Apps Single Sign-on for administrators of Mailchimp, Google Analytics, DynDNS, Dropbox
  2. Social affiliate application with Codeigniter, Google Apps, Facebook, Twitter, Magento and Google Analytics
  3. User submitted content microsite with HTML5 audio/video, Codeigniter, Mailchimp and Google Analytics, AWS S3
  4. HTML5 Location-based SMS Promotion with Magento, Mailchimp, Google Maps and Google Analytics
  5. A/B Testing for Email and Landing Page Campaigns with Google Analytics, Webmaster Tools, Magento and Mailchimp
  6. 360 E-commerce Campaign Reporting with Mailchimp, Magento and Google Analytics
  7. Production Forecasting and Product-Level ROI Reporting Tool with Codeigniter, Magento, Google Apps Spreadsheet and Google Analytics
  8. Share source graphics and other files with 3rd-parties using Dropbox
  9. Daily remote database and file back-up on Amazon S3
  10. Automated user testing on daily or weekly builds using PHPUnit
  11. Salvage unsubscribes by creating web-hooks in Mailchimp using Codeigniter/Magento.
  12. Everytime a person forwards an email to a friend, add credit to the Magento customer account using the API.
  13. Then create another web hook that sends an email to that person if they remove themselves from the mailing list saying that you’re sorry to see them go because they will loose the credit they earned previously. Then allow them to click a link to reinstate their subscription and recover their credit with a special offer. Situation averted.