Scripticles: November 2011

Source: xkcd

The truth is, we're not actually looking to solve a problem for the user. We're looking to solve a riddle. That is all. We're generalizing for our own enjoyment. That is the developer's original sin. The same kind of hubris that leads to sporks:

demotivational posters - THE TIME IS NIGH

see more Very Demotivational

Symfony2 on the Mac - some php issues

If you are programming in an OSX environment with symfony, you will likely come across the following software error:

Fatal error: Call to undefined function Symfony\Component\Form\Extension\Core\DataTransformer\intl_is_failure()

As of PHP 5.3, intl is a core extension, but it doesn't ship with OSX. Symfony is supposed to account for this in a stub re-implementation, but there appears to be a bug in play. However, there is a workaround.

First, ensure your autoload.php file contains:

   $loader->registerPrefixFallbacks(array(
       __DIR__.'/../vendor/symfony/src/Symfony/Component/Locale/Resources/stubs',
   ));

Then, you have to make sure that the stub/functions.php file is in play:

   require_once __DIR__.'/../vendor/symfony/src/Symfony/Component/Locale/Resources/stubs/functions.php';

That keeps you running on a Mac.

How to build an overlay

An overlay is quick, low cost perk that can easily add a higher level of credibility to your website. If there is any form of expected delay in loading or posting of information, you should give consideration to including an overlay. Fortunately, there are countless plugins available for them, or they are easy to put together. Here is an example.

CLICK HERE FOR A LIVE DEMO

<html>
<head>
 <title>Overlay Demo</title>
 <script type="text/javascript" src="https://playground.one45.com/sfweb/one45_dev.php/js/1edeb09_part_1_jquery-1.6.2.min_1.js"></script>

</head>
<body>

<style>
.hidden
{
 display: none;
}
#overlay
{
    background: #cccccc;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#overlay_display
{
    position: absolute;
    background: white;
    border: 2px solid black;
    padding: 0px;
    width: 500px;
    height: 100px;
    top: 50px;
}
#overlay_toolbar
{
    background: black;
    height: 25px;
    width: 494px;
    padding: 3px;
}
#overlay_message
{
 float: left;
 color: white;
 width: 420px;
}
#overlay_close
{
 float:right;
 color:white;
 width: 30px;
 height: 25px;
 cursor: pointer;
}

</style>
<script>

var overlay = function()
{
 // this keeps track of the
 // currently exposed div
 // allowing you to have multiple hidden divs
 // inside the overlay
 var visible_div;

 /**
  * Hide the overlay
  * Size it to cover the document
  * Position the content area of the overlay
  */
 function initialize()
 {
  // attach the close funtionality to the close button
  // you can do this by writing onclick directly into
  // the html, but this is cleaner
  $("#overlay_close").click( overlay.close );

  // don't assume the overlay is hidden
  // force hide it
  $('#overlay_container').addClass('hidden')


  // set the position and height of the
  // overlay's content area, based on
  // the size of the browser
  var ctrl = $('#'+'overlay_display');
  var height = $(window).height() - ctrl.height();
  var left = $(window).width()/2  - ctrl.width()/2;
  ctrl.css( 'height',height+'px');
  ctrl.css( "left", left+"px");
 }

 function closeOverlay()
 {
  $('#overlay_container').addClass('hidden');
 }

 /**
  * Clear the contents of the specified div
  */
 function flushDivContents(div_name)
 {
  if (!div_name)
  {
   div_name = visible_div;
  }
  $('#'+div_name).html('')
 }

 /**
  * Display the targeted div,
  * And Add a message to the top
  * message bar
  */
 function showDiv(message, div_name)
 {
  prepareLayer(message, div_name);
  var elem = $('#overlay_container');
  elem.removeClass('hidden');
 }

 /**
  * Reset the styling of the overlay
  * Resize the overlay
  */
 function prepareLayer(message, div_name)
 {
  // stretch the overlay to cover
  // the entire document
  $('#overlay_container').height( $(document).height() );
  $('#overlay').removeClass
  // hide all existing overlay content divs
  $(".overlay_content").each(function(i,el){ $(el).addClass('hidden'); });

  // expose the content div in which you are interested
  var target_div = div_name || 'main_overlay_content';
  var contents = $("#"+target_div);
  contents.removeClass('hidden');
  visible_div = target_div;

  // set the message in the top bar of the overlay content
  var text_el = $('#'+'overlay_message');
  text_el.html( message );
 }

//=====================================================
// THIS IS THE EXPOSED PORTION
//===================================================
 return{
  // initialize the overlay, setting heights, etc
  // run automatically on page load
  init: function(){ initialize(); },

  // hide the overlay
  close: function(){ closeOverlay();  },

  // clear the overlay of content
  flush: function(div_name){ flushDivContents(div_name); },

  // show the overlay content
  show: function(message, div_name){ showDiv( message, div_name);},

  // append the overlay content with more data
  update: function(content, message, div_name){showDiv(message, div_name);$('#'+div_name).html( "<hr>"+message + "<br>" );  },

  // replace the overlay content with new data
  write: function(content,message,div_name){showDiv(message, div_name); $('#'+div_name).html( message + "<br>" );   }
 };
}()

$(document).ready( function(){overlay.init(); });
</script>
<a href='javascript:overlay.show("Here is the message")'>Click here to see the overlay</a>


<div id="overlay_container" class="hidden">
  <div id="overlay"></div>
  <div id="overlay_display">
     <div id="overlay_toolbar">
        <div id="overlay_message"></div>
        <div id="overlay_close">X</div>
     </div>
     <div id="main_overlay_content" class="overlay_content ">
        This is the content in the main overlay div 
     </div>
     <div id="second_overlay_content" class="overlay_content ">   
        This is the content in the second overlay div
     </div>
   </div>
</div>

</body>
</html>

Javascript scoping - creep creep crept

You may already know this, but it’s something that I once knew then forgot: Javascript variable scoping sucks:

Variables are automatically global, unless you declare them with the “var” keyword
If you create a variable WITHIN a function, it has scope everywhere, including inside other functions

function foo()
{ 
  var x =1; // invisible outside function
  y = 2; // NOT declared.  visible, 
         //and can be modified outside this function 
         //AND INSIDE ANY OTHER FUNCTION
}

This is especially important when you are trying to pass variables into callback functions. To pass a variable to a callback, you have to define the function precisely at the callback:

function getSomeHtml()
{
param_one = “shizzangiggles”;
param_two = 3.14159;

function myCallbackFunction(xr, a, b)
{
    … your code
}

ajax.makeRequest( 
   ‘getHtml’, 
    function( response)
    { 
       myCallbackFunction(response,param_one,param_two); 
    } 
);

Be careful when you do this. If you declare param_one and param_two above ( “var param_one”), your callback will error out, because these two variables are now inside the scope of the function in which they were originally declared. The callback actually fires OUTSIDE this function, so scope is lost.

Here is a sample script to show all the elements you should be aware of. The () brackets after the function mean that I am immediately executing the function.

var one = 1;
var two = 2;

var a = function changeOneAndTwo()
{
   one = "1.0"; // changes global variable
   var two = "2.0"; // this stays local
}() 

alert( "one="+one+", two="+two);  // one=1.0, two=2

three = 3
four = 4

var b = function changeThreeAndFour()
{
  var three = "3.0"; // remains local
  four = "4.0" // global
}()

alert( "three="+three+", four="+four); // three=3, 4=4.0

var c = function setFiveAndSix()
{
  var five = 5;
  six = 6; // this is GLOBAL
}()

var d = function changeFiveAndSix()
{
   five = "5.0"; // this is GLOBAL
   var six = "6.0"; //this is local
}()

var f = function displayFiveAndSix()
{
 alert("five="+five) // five=5.0
 alert("six="+six);  // six=6
}()

One day and counting ...

How do I get an application back to my main window?

I just discovered an annoying Microsoft bug:

If you disconnect your second monitor, before moving the visible applications back to the primary monitor, Windows will continue to launch them off screen. And then you're in for a world of hurt, because it's not obvious how to get them back.

I don't know why Windows will launch applications off screen if there is no second monitor detected. Even worse, I don't know why they don't make it easy to get the application visible again. But they don't and here's how you do it:

Use ALT+TAB to switch to the off-screen application.
Press ALT-SPACE to launch the system menu (you won't see: it;s off screen)
Press R to select the "Restore" menu option which ensures the windows isn't is maximized (a maximized app can't be moved)
Press ALT-SPACE ,
Press M to select the "Move" menu option.
Press any arrow key to transfer focus
Now just use the mouse to place the window where you want (or just hold down the arrow key to slowly bring it in to view)

This method is, of course, preferable to a reset button which moves the application back to the main monitor. Count on Microsoft for finding the easiest way to accomplish something, then not doing it that way.

Honeypot captchase

The Honeypot Captcha: It's so simple! Place an input on the form that isn't visible to the human user, but is visible to a bot that isn't scrutinizing css stylings. When the form submits, you know that a bot has filled out the form is the honeyput input contains data.

The big question: why did it take so long for people to think this up? The next big question: why are we still using capchas? The final question: why is it that Google's capchas are the worst damned capchas I've very had the misfortune to use?

Brace yourself: there's an argument coming

I'm a great believer in In House coding standards, especially anal coding standards, because they serve a valuable purpose: they give us a weapon with which to whip the juniors.

But sometimes, things go a little too far. Like our enforced coding standards: I am now resident in an insane asylym where the coding standard is to have every brace on its own line.

Instead of:



if ($x) { doX();}

else{ doY();}

you must write:

if ( $x )
{ 
     doX();
}
else
{
     doY();
}

This, I am told, increases readability, carrying the direct implication that the former decreases readability. This assertion is like the assertion that raising corporate taxes will cause economic ruin. It sounds right, but it's never been put to the test.

Likewise, I have yet to see any evidence that either one isn't readable. Really, are we all children? If we don't see the braces on their own line, do we panic and spill our coffee over the keyboard? Has either one been the source of bugs in any program?

Manager: You've been working at your desk nonstop 16 hours. What's going on?
Coder: I'm trying to debug this program, but there are too many braces on the same line. I keep getting confused. And it gets worse! There are all these braces that are on their own line. I don't understand why they are there.
Manager: A program with braces on the same line as the function AND braces on their own line. (picks up phone) Ted, you better wake up the President.

The real reason we have these arguments isn't based in rationality. There is no correct answer. The real reason we have these arguments is that most coders are autistic to some degree. Putting function braces on their own line is more than just a preference for them. It's how they live their lives. In the same way that the Rain Man absolutely had to watch Judge Wapner every day, developers absolutely have to code in the specifically prescribed manner.

And now, by extension, so do I.

How to install mysql on ubuntu

Granted, installing mysql on any Linux box these days is a no brainer. But installing mysql on ubuntu isn't an exception. It's a couple of steps. Nothing more:

Open a terminal window, and type:

sudo apt-get install mysql-server

That's the only gotcha! Typing "sudo apt-get install mysql" doesn't work. It needs to be" mysql-server".

Also, if you are running PHP - and you almost certainly are - you may also need to install the php module for mysql 5:

sudo apt-get install php5-mysql

There endeth the lesson!

WTF Facebook?

Are you ready for Facebookageddon?

Have you battened down your online hatches? Have you updated your status one last time? Have you Liked all you can Like?

Tomorrow is D-Day for Facebook, or have you forgotten the dire warning by the hacker group Anonymous last summer? November 5 would be the day that they brought Facebook down. Why? Because fuck you, that's why.

Take heart. Even if they can clog the internet arteries enough to turn Facebook into FellOnItsFacebook, it will likely only be for a few minutes. And then, immediately after that, you can all get back on and update your status to tell the world where you were when the lights went out.

Scripticles

An awesome error message

xkcd: Wisdom of the Ancients

So true ...