July 11

Flare jQuery Plugin

Optical flare plugin


This is a plugin for jQuery I developed, which renders a colored optical flare to slide across elements such as boxes, images, and containers. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.  It is the first of it’s kind on the web!


  • Cool movie-style effect also used in games such as Sleeping Dogs.
  • Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
  • Uses modern CSS techniques.
  • Customizable glow color, speed, glow radius, and trigger event.
  • First Optical flare effect without use of images.


Continue reading

June 15

Javascript Enlightenment Review

javascript enlightenment

This book is a good read for understanding javascript coding syntax, prototyping, scope, and closure.   Although brief and repetitive after Chapter 8, it clarifies several aspects of the language.  If you’re an intermediate to advance javascript developer, this book many not be useful to you.  The most important thing is javascript’s flexibility.  You only use primitives and objects; javascript uses wrappers automatically when needed.  The other parts are comparing, contrasting methods, instantiation, closure, scope, hoisting.  The author describes what matters is the way properties are accessed, mainly if using reserved keywords such as “class”.

The problem with NULLS (see example below):

[code]var myNull = null;
console.log(typeof myNull); // outputs ‘object’ NOT null[/code]

// Use === when comparing null or undefined, because == will not work.

[code]Foo.prototype.x = 1;
var FooInstance = new Foo();
console.log(FooInstance.x); // outputs 1
// now let’s replace/override the prototype object with a new Object() object
Foo.prototype = {x:2};
console.log(FooInstance.x) // outputs 1 not 2[/code]

Continue reading

Category: Code, Review | LEAVE A COMMENT
May 22

Pro CSS for High Traffic Websites Review

Pro CSS book cover

This book is as described and more. It focuses on a variety of aspects regarding front-end web development at the enterprise level. This includes team hierarchy, individual roles, tools, documentation, frameworks and methodologies so it goes beyond coding but it’s equally technical in nature. This is definitely not a beginner’s book because of the technical details so it’s possible to be overwhelmed with the amount of content. Any intermediate to advance front-end web developer will find this book useful and without doubt improve their skills even it’s just minor details. These include:
-why camel case is preferred
-why you shouldn’t use specific hacks but rather alternatives
-which tools make coding more efficient
Continue reading

Category: Code, Mobile | LEAVE A COMMENT
May 15

AB Split Testing scripts for websites

There are several big name services for split testing website and they are all services which you have to pay a monthly fee.  Would you want a script you could install on your websites that can give you metrics just for 2 pages?

This script I designed work using javascript and php.  You can have two versions of an index.php file such as index1.php and index2.php.  One of the two files is randomly rendered upon visit, a timer starts, and any time the visitor clicks a link, button, or exits the page, an entry is recorded.  This entry includes amount of time the user has been on the page and which link or button was clicked.

You can even choose to show the same page version to returning visitors which is done by a cookie.  The results page shows you two columns per day or per cumulative time with the following:

  • Click through rate
  • Total visits
  • Amount of links clicked
  • Average visit duration
  • Amount of new visitors
  • Amount of returning visitors
  • Amount of bounces

Continue reading

May 4

Attending a Hackathon

Tom at hackathon

This was about the biggest hackathon in the east coast or possibly in the entire nation with a record amount of attendees in the hundreds.

Only 160 teams presented with teams ranging from 1-4 people. For me it was my first one and I was a bit skeptical at first.  Prior to this I’ve heard of companies holding hackathons and wondered about the benefits.  I thought about it and realized that it is similar to crowd-sourcing so it mainly benefits the host but what’s in it for the developer/hacker?

You get a variety of developers coding for an extended period of time at no additional pay to create something the host can sell or profit from.  In return the host will provide snacks, pizza, and beer!  Wow… not really, this just makes viable sense for the business hosting the event.  Okay so there’s really more to it depending on the size of the hackathon and the benefits for the developers can be equally beneficial.  I can tell you the two essential things you should check for:

  1. Sponsors offering prizes, preferably cash to implement their software.
  2. Press such as journalists, preferably with a camera.

Another consideration is whether you have the rights to keep your code, which you totally should, and I wouldn’t bother attending one that strictly prohibits this.  Continue reading because you will find out that you  don’t have to be a level 900 coder nor a black hat hacker.  It is actually possible to win even if you’re a axe-wielding tree hacker or hustler.  There were actually quite a few of those at the Disrupt hackathon, the latter not former.  So when the attendee list is in the hundreds how many presentations do you expect to have and how long should they be?

It boils to down to a quick persuasive presentation, because most likely you won’t have time to fully demonstrate the functionality of your application under two minutes.  Getting the point yet?  It’s the idea that counts and how you present it.  Design is key as well!  Ensure you team up with a designer that will make the graphics and style your web app, because it will get you much closer to winning.  If you’re a solo dev you can use templates, themes, or boilerplates.
hackathon 2
Continue reading

Category: Code, Social | LEAVE A COMMENT
April 20

MyISAM or InnoDB MySQL engine?

If you’re curious about the difference of MySQL engines, here they are.

Comparing and contrasting what MyISAM is and InnoDB. First ISAM is the acronym for Indexed Sequential Access Method, generally it is fast, compressable, and allows full text searching.  Second InnoDB is transaction safe and includes automatic foreign key checking so it’s a bit slower.

The important part is that don’t spend too much time deciding which one to choose, because you can change table type later with the ALTER TABLE statement.  Instead you should focus on optimizing tables for performance such as using fixed with fields versus variable width (varchar).  Now for the technical details.


MyISAM tables are optimized for flexibility and compressionThey can hold upto 256TB of data but are not transactional-safe, meaning if the power goes out in a middle of a write, the data is gone.  This is especially important for financial data.  The schema is flexible so it is good for beginners learning about databases.  Foreign key relationships do not have to be setup for the database to function, however this can cause poor performance and unreliable data.  The simplicity allows lower use of hardware resources and another benefit is the table search ability for full-text.
Continue reading

Category: Code | LEAVE A COMMENT
April 13

Make your website cross-browser compatible

cross browser compatibility

Forget about CSS hacks as they should only be temporary solutions and will eventually break upon browser updates.  You want robust CSS with minimal amount of HTTP calls for the best performance.  So here’s the code using conditional comments adding a class to theelement:

[code]<!–[if LTE 7 ]><html class="ie7"><[endif]–>
<!–[if IE 8 ]><html class="ie8"><![endif]–>
<!–[if IE 9 ]><html class="ie9"><![endif]–>
<!–[if gt IE 9 ]><!–><html><!–>![endif]–&gt;[/code]

The first line gives the body a class of “ie7” if the browser is Internet Explorer 7 or less, followed by lines detecting versions 8, 9, and greater than 9.   Now you can change the styles with CSS code as such:


#header { background-color: yellow; //default rule }
.ie7 #header { background-color: orange //rule for IE7 }
.ie8 #header { background-color: red //rule for IE8 }
.ie9 #header { background-color: blue //rule for IE9 }

I didn’t discover this method so the credit goes to Paul Irish.

Limiting the number of stylesheets you are will improve the performance for a high-traffic website. So keep your media queries for alternative resolutions in the same file.


@media screen and (max-width: 320px) {
.iphones { width: 320px }

Using a media query inside a link tag will actually load the css file and the images in it, even if the display is set to none,; except for Firefox and Opera.

[code]&lt;link href="iphone.css" rel="stylesheet" media="screen and (max-width: 320px)" />;

For browser vendor specific CSS you can speed up your coding time with the web app PREFIXR.  It reads CSS3 styles and automatically applies your rule to work for the main other browsers.

  • -mos- for Mozilla
  • -webkit- for Apple browser Safari
  • -ms- for Microsoft
  • -o- for Opera
March 14

Overlay scrolling issues on iPhone iPad

Fixed position prevents iOS devices from scrolling the overlay div.

You are probably here because you were coding a website with overlaying divs and you discovered there’s a scrolling problem in iOS.

This happens in the css position property of fixed-size or fixed position div.  At first you will try the 2-finger swipe on your device and notice nothing happening.  Then you try to re-size the screen with the pinch gesture and scroll again. Am I right?  

I looked it up and this has been a known issue in Safari caused by Apple not wanting duplicate scroll bars to complicate the simplified user-interface. I don’t remember the credit reference for this, but will post it when I find it.

First consider using HTML5 and the meta tags for mobile.

Continue reading

March 7

How to update a MySQL field in a table matrix

This is a tutorial on updating a unqiue mysql field in a matrix grid of elements by using PHP and jQuery.

In this tutorial, we are presuming you are familiar with PHP and MySQL.
This is the example we will use. The scenario is giving users access to special features on movies created by producers. This will be useful in the near future when producers have control of film distribution.

We start with the database design creating four tables.

  1. producers
  2. users
  3. Features
  4. feature_access

Step 1. Import schema

Copy paste the code or import the TEST.SQL file into phpMyAdmin (download file link at the bottom of tutorial).

The USERS and PRODUCERS tables are simplified to id and names. The FEATURES table has a foreign key to link the producer who made the feature. The FEATURE_ACCESS table contains 3 foreign keys, linking the 3 other tables. The additional field we are calling “access” is a BOOLEAN allowing NULL.
If you are wondering why were are allowing NULL values besides 0 and 1, it’s because we want the FEATURE_ACCESS records to exist regardless if they are active or not. More on this later.

Continue reading

Category: Code | LEAVE A COMMENT