For those of you people who use flash intros...

For those of you who use flash intros on your site, check out this workflow to determine if it makes sense to use it on your website:

Add auto_increment and primary key after table is created and already has rows

I needed to do this the other day and couldn't find any good examples on how to do this.

set @counter = 0;

update table
set id = (select @counter := @counter + 1 from dual);

This will allow you to replicate the behavior of auto_increment after the fact.

Internet sharing from a Mac to a Windows computer

I have been searching for a solution for this FOREVER, and finally found it!

The solution was found here: http://joerg.li/hobby/macmini.html

but I'll summarize the important part, the missing link if you will.

In the Password field you can enter three different formats:

• an arbitrary string, e.g. please let me in
• double-quotes + 5 or 13 characters + double-quotes, e.g. "apple"
• dollar-sign + 10 or 26 hex digits, e.g. $5544332211

This it the ticket, a string MUST be enclosed in quotes and then on the Windows side of things, the type of network is "Shared" must be selected or it wont work. Enjoy.

Blackout background javascript login form example

function display_login_form()
{
var login_width = 400;
var login_height = 250;

var body = document.getElementsByTagName("body")[0];

login_new_div = $('sajax_login_form');

if(!login_new_div) {
login_new_div = document.createElement('div');
body.appendChild(login_new_div);
login_new_div.id = 'sajax_login_form';
login_new_div.style.backgroundColor='#ffffff';
login_new_div.style.border='1px solid #800000';
login_new_div.style.position='absolute';

login_new_div.style.width = login_width + 'px';
login_new_div.style.height = login_height + 'px';
login_new_div.style.zIndex='100';
login_new_div.style.MozBorderRadius='10';
login_new_div.style.margin='auto';
login_new_div.style.left = (document.body.offsetWidth / 2) - (login_width / 2) + 'px';
login_new_div.style.right = (document.body.offsetWidth / 2) + (login_width / 2) + 'px';
login_new_div.style.top = (document.body.offsetHeight / 2) - (login_height / 2) + 'px';
login_new_div.style.bottom = (document.body.offsetHeight / 2) + (login_height / 2) + 'px';
}

login_new_div = $('sajax_login_form');

if(!login_new_div) {

blackout_new_div = document.createElement('div');
body.appendChild(blackout_new_div);
blackout_new_div.id = 'sajax_blackout';
blackout_new_div.style.position='absolute';
blackout_new_div.style.display='none';
blackout_new_div.style.left='0px';
blackout_new_div.style.top='0px';
blackout_new_div.style.backgroundColor='#555555';
blackout_new_div.style.opacity='.9';
blackout_new_div.style.filter='alpha(opacity=90)';
blackout_new_div.style.zIndex='50';
blackout_new_div.style.width='100%';
blackout_new_div.style.height=(document.body.offsetHeight < screen.height) ? screen.height+'px' : document.body.offsetHeight+20+'px';
blackout_new_div.style.height='100%';

login_new_div.innerHTML = 'Close';

// and finally display the divs
login_new_div.style.display='block';
blackout_new_div.style.display='block';
}

function hide_login_form()
{
var blackout = $('sajax_blackout');
var login = $('sajax_login_form');
login.style.display='none';
blackout.style.display='none';
}

Dynamic Javascript Rows Example

For those of you who have once searched for an easy way to drop in some javascript code to add and remove rows dynamically, look no further; the solution is here.

Through blood, sweat, tears and caffeine I was able to find a half-assed solution, make it better and slap my own logo on it. Here it is for all the world to see, use, abuse, then re-use.

Or, if you want to see it in action, then head on over to my rss dumpster.

<title>Dynamic rows in javascript (client side only).</title>

<script type='text/javascript'>//<![CDATA[

// standard prototype function, you shouldn't need this if you are using prototype.js, but adding it in here for example purposes.
function $() 
{
 var elements = new Array();
 for (var i = 0; i < arguments.length; i++) {
  var element = arguments[i];
  if (typeof element == 'string') {
   element = document.getElementById(element);
  }
  if (arguments.length == 1) {
   return element;
  }
  elements.push(element);
 }
 return elements;
}

function add_row(event, row)
{
 row = row || this;
 var row_number = row.rowIndex + 1;
 var table = row.parentNode.parentNode;
 var newRow = table.insertRow(row_number);
 var cell = newRow.insertCell(0);
 cell.colSpan = row.cells.length;
 
 // __data__ is a prefix I use to reference an id to keep things unique
 cell.innerHTML = $('__data__' + row.id).innerHTML;
 
 row.onclick = remove_row;
 row.default_onmouseout = row.onmouseout;
 row.onmouseout = null;

 // highlighting of course optional, but gives a better feel to the UI
 HighLight(row, true);
}

function remove_row(event, row)
{
 row = row || this;
 var row_number = row.rowIndex + 1;
 var table = row.parentNode.parentNode;
 var newRow = table.deleteRow(row_number);
 row.onclick = add_row;
 row.onmouseout = row.default_onmouseout;

 // highlighting of course optional, but gives a better feel to the UI
 unHighLight(row); 
}

function HighLight(row)
{
 if(row.className != 'highlighted') {
  row.original_class = row.className;
 }
 row.className = 'highlighted';
 row.style.cursor = 'pointer';
}

function unHighLight(row)
{
 row.className = row.original_class;
}

//]]></script>

<style type='text/css'>

.highlighted {
 background-color: #ccddff;
}
td {
 font-size: 11px;
 border: 1px solid gray;
 padding: 5px;
}
th {
 border: 1px solid black;
 font-size: 11px;
 color: white;
 background-color: black;
 padding: 5px;
}
table {
 width: 100%;
 border-collapse: collapse;
 padding: 5px;
}
body {
 font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
} 
.white_link {
 color: #ffffff;
}
a {
 color:blue;
 text-decoration: none; 
}
a:hover {
 text-decoration: underline; 
}
hr {
      border-top: 2px dashed #000000;
      border-bottom: 0px solid #ffffff;
      color: #ffffff;
      background-color: #ffffff;
      height: 1px;
      width: 100%;
}
pre {
 font-family: "andale mono", monaco, courier, "courier new", monospace;
 font-size: 9pt;
 display: block;
 margin: 1em;
 border: 1px solid #999;
 padding: 1em;
 background: #ffc;
 color: #000;
}
</style>


<table style='width: 12cm;'>

 <tr> 
  <th>Item</th>
 </tr>
 
 <tr 
  id='1' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>database</td>

 </tr>
 
 <tr 
  id='2' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>katz</td>

 </tr>
 
 <tr 
  id='3' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>etc</td>

 </tr> 
 
</table>

    
<div style='display: none;' id='__data__1'><pre>Some awesome data for row 1!</pre></div>
<div style='display: none;' id='__data__2'><pre>All your base are belong to us.</pre></div>
<div style='display: none;' id='__data__3'><pre>920c1e9267f923c62b55a471c1d8a528</pre></div>

The worst block of PHP code.... ever.

Today, I was working on an integration project which we'll call "Project X". We've been working with this vendor, "Vendor X" for over a year now on integrating our site with theirs for a particular purpose (if you didn't notice I'm being intentionally vague) as not to violate slander laws.

This company just plain sucks.

Their hiring processing must involve questions like: "Have you heard of a computer before?", "Do you know how to spell your own name?"

Ok, I may be exaggerating, a _little_ bit... but you get the point; they are really really crappy.

So they have this software that we have to integrate with which is insanely bad in so many ways that I just can't go into without plain out giving away who they are. HOWEVER, I can show you a somewhat anonymous block of code which highlights the level of skill these "developers" employ.

So here you have it; the worst block of PHP code every written (for a production system that runs thousands of websites)

for ( ; $row = mysql_fetch_row($si); $string = ''):
            
    foreach ($row as $k => $v):
        if ($row[0] != $previous[0])
            unset($previous);
        if ($v && $k && $k < 9 && $previous[$k+4] != $row[$k+4]):
            for ($x=0; $x < $k; $x++)
                $string = sprintf("%s  ", $string);
            $string = sprintf("%s%s
", $string, str_func($v));
        endif;  
    endforeach;

    unset($previous);
    $previous = $row;        

   if ($row[0] == SOME_CONSTANT)
       if ($row[1] != $param):
           $anon_str .= ($anon_str ? $sep_str : '') . $string;
           $param = $row[1];
       else:
           $anon_str .= $string;
       endif;
   else
       if ($row[1] != $param):
           $cat_str .= ($cat_str ? $sep_str : '') . $string;
           $param = $row[1];
       else:
           $cat_str .= $string;
       endif;
endfor;

A couple cool things Volume I

I have decided to post cool findings so in case anyone ever reads this maybe they can pick up a few cool pointers.

For loops are dead in PHP, let me show you why you will almost never need a for loop again.

for($i = 0; $i <= 10; $i++) {
  echo $i . ' ';
}

vs

foreach(range(1,10) as $i) {
  echo $i . ' ';
}

The for loop is ugly and convoluted, and while the foreach with a range probably uses more overhead its usually not a big deal in PHP as app processor usage is usually least of your concerns. We need to move on from C people c'mon...

If you didn't notice, I didn't close the PHP (?>). That's because you don't need to! There is absolutely no reason to close it, in fact, only bad things will happen if you close it, such as accidental whitespaces (which causes weird session errors). PHP will find the EOF and stop there, it won't cause any slowdown, and has no cons.


Another thing I noticed, is a lot of sites out there don't realize how cool the label tag in XHTML/HTML is. By simply adding a tag around an input type of radio or checkbox, it allows you to select the input by clicking the text within the label tag.

Let me give you an example.

Crappy site: 

<input name="name" value="123" type="checkbox"> Check

Awesome site: 

<label>
 <input name="name" value="123" type="checkbox"> Check
</label>

Now, see it in action for yourself....

Crappy site:
Check

Awesome site:
Check


They are very similar, except that on the awesome site, you can actually click the text "click here" and it will select the box, or obviously you can check the box the "old-fashioned" way.

Thats all for now, more cool code-tidbits to come.