Share

Several years ago, I was creating bleeding edge tech for an e-commerce site that tied into a POS in filemaker. ESS was the obvious choice then. I learned every caveat of ess the hard way, bumping my knees and scraping the skin on my feet as I made my way through some uncharted territory. On several occasions, I had the experience of code that was working the day before no longer working. Debugging revealed that some of the scripts were pointing to the wildly incorrect places.

During construction, its easy to forget which fields are ESS and standard filemaker. Once in a while, I would replace tables, and thats were this issue came in. From the white paper on FM11 (my wounds occurred in version 9) – comes this revealing info:

“The reason this can happen is as follows. When FileMaker Pro creates a shadow field definition, either when an ESS table is first added to the Relationships Graph, or when the shadow schema is resynchronized with the ESS schema, FileMaker Pro assigns a unique key to each ESS field. As with FileMaker Pro fields, it is that unique key that is used when referring to the field, rather than the field’s name. What is different from the behavior of regular FileMaker Pro fields is that, if the shadow field in FileMaker Pro (not the corresponding field in the ESS table) is deleted, that field’s unique key may be reused. If the schemas are ever synchronized again, the key to the deleted field may be reused, for a different field on the ESS side, and any script steps that pointed to the deleted shadow field will now point to the newly assigned ESS field. This is a bit different from the behavior you would expect when deleting a FileMaker Pro field. In that case, affected scripts would show a warning. In this scenario one ESS field may be substituted for another without much warning.”

Ahhhh, clarity. Thank for clearing this up, it makes so much sense. WoOt!

 
 

Fishing with cheese

Share

Its time for a little example of a fun 404 file. You know, the old fashioned html that displays when the user comes to an unknown page.

There’s no reason to let this be a dry page. I think of this as an excellent opportunity for branding, and I take full advantage as an excuse for having fun!

See Example Here…

 
 
Share

I’m an avid Steely Dan fan. Number one best group IMHO. For anyone not hip to it, Kamakiriad is one of the best albums I have ever heard. Recently (last summer on a very lovely day) I acquired a little mini convertible. Sexy little thing. Its pepper white with a black bonnet and racing stripes. The dash is what stole the moment and sealed the deal. Round, round, merry go round! I didn’t notice how similar the radial designed instruments in the dash actually were to this cover art until much later. I probably got the car because of my natural love for anything both old and new…

Exhibit one, the cover art to the album Kamakiriad:

220px-Donald_Fagen_-_Kamakiriad

220px-Donald_Fagen_-_Kamakiriad

Exhibit two, my car dash:

Behold, the design of Any Excuse For A Party’s new web presence. Here’s the screenshot:

Screen Shot for Any Excuse for A Party

Screen Shot for Any Excuse for A Party

One more shot of my car interior a little close up. Notice the current image selector gauge on the web site page in comparison to the design of my car:

Three more reasons I love this interface design. One, it uses no flash, strictly jQuery and php. Two, it was the second time I was able to get rid of that BOXY and boring old 4 cornered Zen Cart style. Yes, the site’s foundation is zen, but you would never recognize it now… and Three… its just fun. Come on, I dare you to look at it an NOT feel good. Any Excuse For A Party! Woot!

 
 
Share

We are red blooded developers here, and we seek out good code where ever we can find it. As the world of open source evolves, and new versions of php are released, things are getting better and better on the open source front.

As a developer, my take on open source installs of e-commerce applications is as follows. E-commerce applications should be scalable and you should be able to grow with them. You should also have the team you need to make any future changes lined up. If you are serious about your companies growth, you should do a lot of research in advance. That being said, you can expect to need to replace the majority of – if not all code (and graphics) within 2 years.

Your web site will have a shelf life of 2 years! Don’t worry, thats like 15.75 years (in terms of ‘dog’s years’) in our industry. Hey, not bad. You are stretching your dollar when you look at it that way. Now you need to hire someone to get your store online, and start making money. What should you look for?

1. Never hire a company who sub-contracts to someone else because they cannot do the job This is pretty much bad for everyone. As a subcontractor, I was not really that interested on a long term relationship. Why should I be? Hey, I have to give away 1/3 of each dollar to ‘the man’. Hell no! I prefer relationships that have no middle man to try to blow a whistle when they don’t know when its appropriate. Plus, if that goes too long in that direction, everyone loses.

As a business owner, don’t be that guy. If you do, you will find yourself using technology that no one will step into cheaply. Either you hire someone whose focus is on something else, so they do a ‘cheaper’ job but it takes them around 1-3 years to tool up on it, or – you hire a team of people to step in and take the ropes. At that point, you’ve got 3 or 4 people do a job so it happens faster but you now have to pay more.

Not that subcontracting is bad in every case. But if you are doing all the work, and they make a cut for nothing, they better be taking all the legal responsibility. Its better for everyone involved in that specific type of situation to give the original guys a finders fee and handle all the contract paperwork yourself. Of course, if you ever hear the words, “we don’t need a contract, do we?” uttered by the actual client, run. You don’t want to connect with someone who won’t operate from integrity, and its my experience and opinion that those are the only type of people who don’t want contracts.

As the owner of a software company, I never work without a contract that specifies code ownership. Subcontracting can be great in many occasions – but code ownership is a HUGE part of our mindset when we approach any project.

Here’s the best option – scout until you find someone you like, and actually honor their intelligence and respect them enough to enter a contract with them. Cement the relationship by putting things in writing. If you happen to find a person of worth who is coming to you as a subcontractor from another company, do the right thing. Show the talent that they matter by arranging to pay them for their time.

2. Avoid tight coupling unless you intend to stay with this technology for a long, long time. Technologies evolve. My approach to coupling data with other systems is to keep it lean.

If you are thinking about changing an e-commerce platform but you’ve already coupled quite well with another POS, reconsider the fields and data that you bind there. You may want to consider only the basics – order info and customer number.

3. Be ready for updates to php Technologies evolve, part two! I am already looking at code I wrote 3 months ago, and thinking that its outdated. Not to mention code I wrote in 2007.

Coding to the standards in the framework you are changing is always a good practice. However, if I am writing a new module for Zen Cart I am going to have to take a step back and return to an older, and I would even say, outdated way of approaching this code.

If you want to compare, download and take a look at prestashop. I started reviewing the code structure last evening. I had dreams about it last night when I slept. This code is clean, its well organized, I love the way that they wrap a lot of SQL filtering through classes. Its the way I will approach things from now on.

These open source libraries are available and change all the time. Which brings me to the next point.

4. Don’t be afraid to start over! Technologies evolve, part 3! Don’t stagnate. I hate it things grow stale, and code is no different.

I am not opposed to starting something brand new. Shake up the world! Get rid of the cobwebs. Hey, if you hired us and we found a better technology 10 minutes before the launch, I may just tell you to hold on, until we can get hooks into it and see what its about.

5. Growth is important! Technologies evolve, and so should we!

Since technologies change, so should we be able to adapt! I am not interested in a list of items in a contract, I am interested in growth, the ability to move laterally in any situation, the ability to adapt new ideas to what we are creating.

Bottom line is this:

1. Contract the right people for the job.

2. Avoid tight data coupling

3. Strive to get code that adheres to web standards. Avoid technologies like flex, flash because they are not available on the iphone / ipad. Javascript has evolved. You’ll never even miss flash.

4. Be ready for updates to php. Improvements to php and javascript allow for a constant stream of code improvements. Be open to new ways of thinking, new ways of working.

5. Don’t be afraid to start over! Yes, the improvements to php have opened the door for many new things. I wouldn’t try to re-code zen cart by restructuring all the sql filtering, wrapping them in classes. It would be nice, it would be an improvement, it would also be a colossal waste of time.

6. Adapt to new technologies. Be open to improvements. Try new things. Keep things fresh. I research and download new e-commerce applications at least once a month. I look at their file structure, code syntax, objects and classes, and I love this! It keeps me fresh. Find a developer who is not afraid to roll up their sleeves and look at things from from the perspective of growth and adaptation.

 
 
Share

I am a strong believer in the benefits of text based links. I love page elements that can be controlled via walking the DOM. Flash and other technologies lose their luster when compared to these wonderful benefits of standards based development. Keep in mind, too – that the main reason most people use flash is to make things “look” good. I personally think that looking good is OK, but working good is better. Why not go for both? Aeon Media will still develop flash for very specific reasons, such as games. But working in flash has lost its appeal compared to the amazing control over elements.

Here’s a fantastic example of why using pure php with javascript is always a better idea than flash. One basic reason – easier communication. I was able to see my page translated into several languages in firefox, using google translator. All the words that are tied in with images will fail at this, being raster based. See the screen shots to view how easy it is for the browser to interact with the text and update it. Note too that words on graphics remain untranslated.

First View Translated

First View Translated

This is forcing me to rethink the design a little. Probably the words under the images should be redone as text. Also, alt tags could go along way towards helping. A few ideas.

Second View Translated

Second View Translated

 
 

j-query carousel

Share

I recently implemented a j-query carousel from a SQL filter. Its really interesting – I was able to get exactly what the customer wanted in terms of design – in Firefox, and Safari. IE was, as usual, unhappy and not interested in playing nicely with the other kids. Here’s my solution to bitchy old internet explorer – session variable test and rendering out different modules according to those results. Here’s what I did:

1. Test for the HTTP USER AGENT – this is especially useful for those times when I am pushing for web standards web sites as the ‘mobile app’ – rather than developing another app. Design a site correctly, and your customers get more bang for the buck. Going for (no flash) content, and now even more importantly – testing for the probable user experience. Why code rollovers on an android device? Touchy touchy – no rollovers are going to get your message across. Designing for the new paradigm means breaking away from ‘old’ thinking.

Here’s the code:

$u_agent = $_SERVER ['HTTP_USER_AGENT'];

if (preg_match ( '/MSIE/i', $u_agent )) {

// because its ie - we don't use the jquery script

$videoRowJquery = 'tpl_modules_video_rownoli.php';

$myBrowserSel = '

';

$myBrowserSelEnd = '

';

$renderBack = '

';

} else {

// now we want to use jquery

$videoRowJquery = 'tpl_modules_video_row.php';

$renderBack = '

';

$myBrowserSel = '

    ';

    $myBrowserSelEnd = '

';

}

?>

and now just echo out those values in the html page:

echo $myBrowserSel;

require ($template->get_template_dir ( $videoRowJquery, DIR_WS_TEMPLATE, $current_page_base, 'templates' ) . '/' . $videoRowJquery);

echo $myBrowserSelEnd;
?>

Here’s a youtube video that shows the differences in what gets rendered to the browsers:

Differences between browsers

 
 
Share

Ah, so it happens that I have been getting this ‘repeating’ pattern for design. So I wrote a php function that handles this kind of thing with aplomb. I need to cleanly display the results of an array. What’s that you say? Who DOESN’T anyway?

Right, cheers then – here you go:

foreach($articlesArray as $articles) {
if (($articles['aeon_article_sort_order'])&1){

echo '

‘ . zen_image(DIR_WS_ARTICLE_IMAGES . $articles['aeon_articles_image'], $articles['aeon_articles_image'], ’150′, ”) .
  ‘ . ($articles['aeon_article_content']) .

‘;

} else {

echo ‘

‘ . ($articles['aeon_article_content']) .
  ‘ . zen_image(DIR_WS_ARTICLE_IMAGES . $articles['aeon_articles_image'], $articles['aeon_articles_image'], ’150′, ”) .

‘;

}
?>

what’s this look like? pretty good!

a future view

another view, test images here


arrangement based on mod

Using this little script, the screens render cleanly

 
 
Share

/*
** PHP implementation of the Secure Hash Algorithm, SHA-1, as defined
** in FIPS PUB 180-1
*
** Version 1.1
** Copyright 2002 - 2003 Marcus Campbell
** http://www.tecknik.net/sha-1/
*
** This code is available under the GNU Lesser General Public License:
** http://www.gnu.org/licenses/lgpl.txt
*
** Based on the JavaScript implementation by Paul Johnston
** http://pajhome.org.uk/
*/
function str2blks_SHA1($str) {
$nblk = ((strlen($str) + 8) >> 6) + 1;
for($i=0; $i < $nblk * 16; $i++) $blks[$i] = 0;
for($i=0; $i < strlen($str); $i++) {
$blks[$i >> 2] |= ord(substr($str, $i, 1)) << (24 - ($i % 4) * 8);
}
$blks[$i >> 2] |= 0×80 << (24 - ($i % 4) * 8);
$blks[$nblk * 16 - 1] = strlen($str) * 8;
return $blks;
}
function safe_add($x, $y) {
$lsw = ($x & 0xFFFF) + ($y & 0xFFFF);
$msw = ($x >> 16) + ($y >> 16) + ($lsw >> 16);
return ($msw << 16) | ($lsw & 0xFFFF);
}
function rol($num, $cnt) {
return ($num << $cnt) | zeroFill($num, 32 - $cnt);
}
function zeroFill($a, $b) {
$bin = decbin($a);
if (strlen($bin) < $b) $bin = 0;
else $bin = substr($bin, 0, strlen($bin) - $b);
for ($i=0; $i < $b; $i++) {
$bin = "0".$bin;
}
return bindec($bin);
}
function ft($t, $b, $c, $d) {
if($t < 20) return ($b & $c) | ((~$b) & $d);
if($t < 40) return $b ^ $c ^ $d;
if($t < 60) return ($b & $c) | ($b & $d) | ($c & $d);
return $b ^ $c ^ $d;
}
function kt($t) {
if ($t < 20) {
return 1518500249;
} else if ($t < 40) {
return 1859775393;
} else if ($t < 60) {
return -1894007588;
} else {
return -899497514;
}
}
function calc_sha1($str) {
$x = str2blks_SHA1($str);
$a = 1732584193;
$b = -271733879;
$c = -1732584194;
$d = 271733878;
$e = -1009589776;
for($i = 0; $i < sizeof($x); $i += 16) {
$olda = $a;
$oldb = $b;
$oldc = $c;
$oldd = $d;
$olde = $e;
for($j = 0; $j < 80; $j++) {
if($j < 16) $w[$j] = $x[$i + $j];
else $w[$j] = rol($w[$j - 3] ^ $w[$j - 8] ^ $w[$j - 14] ^ $w[$j - 16], 1);
$t = safe_add(safe_add(rol($a, 5), ft($j, $b, $c, $d)), safe_add(safe_add($e, $w[$j]), kt($j)));
$e = $d;
$d = $c;
$c = rol($b, 30);
$b = $a;
$a = $t;
}
$a = safe_add($a, $olda);
$b = safe_add($b, $oldb);
$c = safe_add($c, $oldc);
$d = safe_add($d, $oldd);
$e = safe_add($e, $olde);
}
return sprintf("%08s%08s%08s%08s%08s", dechex($a), dechex($b), dechex($c), dechex($d), dechex($e));
}
?>

 
 
Share

So you want to let the natural height and width of an image determine the layout and reflection – so cool and not hard at all. Heres how you do it:

first – set up your image path variable

$img_path = ‘images/’ . $products_image;

now tell the function what your max dimensions are

// Constraints
$max_width = 350;
$max_height = 242;

use the php function getimagesize($yourvar) and pull the array of data
while at the same time setting

list($width, $height) = getimagesize($img_path);

$ratioh = $max_height/$height;
$ratiow = $max_width/$width;
$ratio = min($ratioh, $ratiow);
// New dimensions
$width = intval($ratio*$width);
$height = intval($ratio*$height);

$imHeight = $height;
$imWidth = $width;

then call these values in your other code, where the image is described. in my case it was:

$mainGraphic = ‘ img src=”images/’ . $products_image . ‘”width=”‘ . $imWidth . ‘” “height=”‘ . $imHeight . ‘” id=”thephoto” ‘;

the end result is a product image that scales itself and never looks squished. the other side to this is the css reference, just set your align for good measure and keep
in mind what you set for your max values as well:

#mainimagebutton {
position: absolute;
left: 228px;
top: 525px;
z-index: 4;
width: 350px;
height: 242px;
text-align: center;
}

 
 

CSS animation

Share

While searching around online today, I stumbled upon a very interesting series of sites that explain and teach a little about CSS animation.

Do I think it will replace flash? I don’t know. Its the delivery mechanism of the future that always sets the audience, and the future is now, and the device is iPad. So, maybe!

I need to create an immersive experience that does not involve flash – on the web. Games and engaging experiences to draw the customer back and create a world of interest.

More to come as the situation develops.