Huy Dinh - Coding magic for food Blog

Magic coding [ ninja | monkey ] seeks secret code of legends (and 3 meals a day)!
September 4, 2008

My jQuery magnify plugin

Author: Huy Dinh - Categories: Javascript - Tags: , , ,

Inspired by Ca Phun (YeloTofu.com)'s love for jQuery and him providing useless plugins, I've decided to take my zoomer script a little further, by creating a jQuery magnifier plugin.

There are many similar magnifiers out there, but none actually lifts the magnifier out of the image... at least, none that I've seen. So, you've guessed it, mine does!

Have a look at the demo here and download it here.

Usage is simple:

JavaScript:
  1. $("img").magnify();

But you'd probably want to hide the image initially, wait for it to load, then apply the magnify and finally show it:

JavaScript:
  1. $("img").hide().load(function(){
  2.     $(this).magnify().fadeIn("fast");
  3. });

One last thing: you will want to style the magnifying "glass" (#huy-magnifier) with the width and height and anything else you might want... such as a border!

After I wrote the script and showed it to Ca Phun, he said that jQuery already has a magnifier... but at the time of writing, it doesn't seem to be working.

August 31, 2008

Replacement zoomer for Magento

Author: Huy Dinh - Categories: PHP, Random - Tags: ,

One of Magento's little annoyances is the main image preview method - like everything else about Magento, it comes with bells and whistles. Is that a bad thing? Well, yes.

Before I complain, look at the original zoomer.

I'd argue whether the average user needs to zoom into an image using the a slider, because imo, they wither want to see the whole image or as much detail as possible (maximum zoom). Luckily the front end is much easier to change than the back end, so I've made my own zoomer tool which is infinitely easier to use (because you can't actually control anything) you just roll the mouse pointer over the image, a little box will appear that shows a portion of the actual image with maximum zoom. Move the mouse pointer and the zoomed image will be updated accordingly.

Easy, peasy, nifty.

See a demo and download it.

It was written specificly for Magento 1.1 so uses Prototype 1.4 instead of the latest.

To use it, follow similar instructions to installing lightbox:

Put the .js in the main js folder: /js/huy/.
Put the .css in your theme's css folder: /skin/frontend/default/default/css/huy/

In /app/design/frontend/default/default/template/catalog/product/view/ delete the following lines:

PHP:
  1. <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
  2. <div class="image-zoom" id="track_outer">
  3.     <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
  4.     <div id="track">
  5.         <div id="handle"></div>
  6.     </div>
  7.     <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
  8. </div>
  9. <script type="text/javascript">
  10.     Event.observe(window, 'load', function() {
  11.         product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out');
  12.     });
  13. </script>

You may want to change the styling of zoomer.css to taste.

Remember to minify it!

Minify Magento’s JS and CSS

Author: Huy Dinh - Categories: PHP - Tags: ,

I don't want to sound like a broken record but Magento is slow. So why then aren't the JS and CSS minified by default?

My love for optimisation knows no boundaries, as such, I've taken it on myself to provide an automated solution - here it is:

minify.zip

It's a simple script that scans through each theme's layout/page.xml and minifies each JS and CSS it finds.

To use the script, you need to have the Java runtime environment installed, php must have shell execution abilities and your webserver must have write permissions in  each theme's page.xml (/app/design/frontend/default/default/layout/page.xml), css folder (/skin/frontend/default/default/css) and the main js folder (/js). You also need to have YUI Compressor's build jar file on your server (download it here).

One last thing is to edit the script with your Magento's root folder and location of YUI Compressor's jar file.

It is recommended that you put the script into a password protected folder!

Oh, one last thing: I haven't tested the script in a Windows environment so it may not work.

August 30, 2008

Magento + Mosso = Fail

Author: Huy Dinh - Categories: AS2, Random - Tags: ,

Magento, the all singing, all dancing ecommerce system that's heads and shoulders above everything else. It has more features than a Swiss army knife, and best of all, it's open source and completely free to use!

Mosso is Rackspace's cloud computing service, it promises to be somewhere between a VPS (Virtual Private Server) and a dedicated server - it's scalable, dependable, and above all, fully managed and supported like Rackspace's excellent support.

You'd be forgiven for thinking that the 2 Ms would be a as sweet as chocolate, but you'd be wrong like I was wrong.

Having tested Magento on WebFusion's VPS, it was unacceptably slow, during peak times it would take 15 seconds to load the page on a fast broadband connection. The problem (probably) is that Magento uses a lot of CPU resources. It does a lot of database queries and reads and writes many files on each request. The caching system helps substantially but on a shared server, it's still too slow for practical use. Imagine if just a handful of people installed a copy of Magento on their VPS - the server would come to a halt pretty quickly.

In theory, using cloud computing with it's unlimited resources should speed Magento up exponentially, in reality however, the reverse is true. During peak time, most requests timed out, and the ones that do make it through takes more time than making tea.

Was the problem to do with Mosso? or can it be said of all cloud computing in general? I wont be answering that any time soon, I'm sticking to the ground for as long as I can.

So the only real solution for Magento is a dedicated server, which considering, is not too expensive if you are prepared to get your hands dirty. For the same price as a Mosso installation, you can get a basic dedicated server at EasySpace, and believe you me, Magento is very usable!

So click my EasySpace banner yo!

July 22, 2008

Crooked Tongues Store - refreshed

Author: Huy Dinh - Categories: PHP

Crooked Tongues, the famous online sneakers store has been updated with a new ecommerce system - one built from scratch, based on the CMS I built for Freeview... well, not quite "based on" but there are similar features and functionality - especially the recursive navigation/categorisation structure whereby each category can have child categories... there's a name for that design pattern but I don't remember what it is.

Built using the Code Igniter framework by Ca Phun Ung and I, it's very fast and robust and was completed in record time of aproximately 2 months. Most of the backend logic was done by me, templates and javascript by Ca Phun.

I'm pretty proud of this shopping cart system... it has a little bit of data redundancy but it makes the system faster so even though I'm an optimisation evangelist, I think having the redundancy is a good call.

The system is quite flexible - you can sell shoes with multiple size/quantities, apparel with up to 20 different sizes, accessories without a size, homogeneous products with 1 difference... such as a choice of colour.

Anyway, hop over to http://www.crookedtongues.com for some street culture.

June 30, 2008

Spine Magazine

Author: Huy Dinh - Categories: AS3, Flash

Spine magazine is finally live!

I'm especially proud of the infinite scrolling on the news and reviews pages. If you have some time, drag the jog slider down and scroll back to the yesteryears!

Check it out at: http://www.spinemagazine.com

June 18, 2008

adidas/Foot Locker - Cope 2

Author: Huy Dinh - Categories: AS3, Flash

The website in Flash AS3 with a bit of PaperVision3D. It's a complex design with animated interactive links and hotspots. The background and popups are in 2D while the map is in 3D. Check it out here: http://www.originals-online.com/footlocker_cope2/

April 20, 2008

Income Tax Calculator updated, now called Wage Calculator

Author: Huy Dinh - Categories: AS3 - Tags: , , , , , ,

I've updated the income tax calculator using flex, it looks much better than before, and it works great.

This is now updated to calculate this year's deductions and compare it with last year's.

The "Hourly" button shows your actual hourly rate taking into account the number of hours you work a day and the number of days holiday (and public holidays) a year.

If you work less than 5 days a week, you can still get accurate results by adding the number of days off onto your holiday (e.g. if you work 4 days a week, that means you have 52 days extra holiday a year, add that to your holiday allowance). If you work more than 5 days a week, subtract those extra days from your holiday!

February 27, 2008

Interactive 3D Income Tax Calculator

Author: Huy Dinh - Categories: Random

Had a bit of free time lately, learned a bit of AS3 and Papervision3D, so naturally I put my education into the pursuit of something completely useless!

Check this out! (Before you nag, 08/09 values are estimates only... although it's pretty accurate if you earn less than £36,000 a year).

February 18, 2008

A cold day in London

Author: Huy Dinh - Categories: Random

The weather's been pretty miserable in London lately. Even when there is sunshine it's freezing! Look at the weather report:

London at it’s coldest