Creating a business application is one thing, measuring user-satisfaction another. Most software houses in recent years have woken up to the importance of user-facing metrics, the knowledge that user satisfaction regarding software application performance is an integral part of business success. But the problem in application performance measurement is that there are too many metrics and measurements which in the end adds nothing of real value to the performance reports. What most people need is a metric that is easy to calculate and interpret. Apdex is one such metric.
Read More

Changing MySQL clients default prompt

by: Sameer Posted in: mysql |  

20 Oct 2010

Although graphical clients are preferred when accessing MySQL databases, for many users the mysql command line client is the first choice when connecting to the MySQL server. And many times this is the only option available when you are accessing remote machines through SSH.
Read More

Pixelation of images using HTML5 Canvas

by: Sameer Posted in: tech |  

19 Oct 2010

Close Pixelate is a Javascript library created by David DeSandro that converts an image into a pixelated version using an HTML5 canvas element. The library works with all browsers supporting HTML5 canvas. You can view the online demo below.

The function takes various options, which you can tweak to your taste to render the final image.

  • resolution : The distance in pixels between rendered pixels. Required.
  • shape : The shape of the pixel. Accepts square, circle, and diamond. Optional. Defaults to square.
  • size : The size in pixels of the rendered pixel. Optional. Defaults to value of resolution.
  • offset : Offset in pixels. Optional. Defaults to 0. Can be a single value 15 for a diagonal offset, or an array or object for X/Y pairs: [ 15, 5 ] or { x: 15, y: 5 }.
  • alpha : A decimal value for the opacity of the rendering. Optional. Defaults to 1.

You can download the code from GitHub.

image pixelation

A common problem with image intensive sites is “Image-Theft” also known as hotlinking. If your site hosts images that other sites are linking to, it can cause a substantial increase in your bandwidth costs. For small sites who pay by the gigabyte’s this can be quite a problem. For example, if a hotlinked image of 150K from your site is being accessed 1000 times a day, then that’s around 145MB of wasted data transferred from your site daily. Add a few more images and the bandwidth costs quickly add-up. A simple way is to use .htaccess to disallow other sites from hotlinking to your images.
Read More

debugConsole is a tool for debugging and tracing PHP5 applications on production servers without compromising the live-traffic.

With PHP functions you can inspect variables, watch changes in variables over the whole runtime, measure partial runtimes, set checkpoints and write logfiles. debugConsole also replaces the PHP error-handling so that notices, warnings and other errors are also shown in a popup, instead of displaying them in the application to be debugged.
Read More

AI-Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork to an HTML5 canvas element, which can then be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps. This is a wonderful tool if you are just starting with HTML5 canvas, helping to decrease the learning curve. This can really come in handy for people like myself who are not really into graphics programming.

Software development is an exercise in managing complexity, and the more tools and methods we have at our disposal the easier it gets. One of my favorites is logging – recording important code execution points that I think are important, especially during debugging. Whenever developing functions or class methods I make it a point to add logging capabilities to the same. Logging helps one to quickly tracks bugs and evaluate the health of the system under development.
Read More

To set the stage we will start with a programming problem, this will keep the discussion anchored to a relevant context. The problem is this : We want to write a function that takes a image file as an argument and tells us whether the file is a GIF image; irrelevant with whatever the extension the file may have. We are not to use any GD library functions.

A GIF file header

With the requirement that we are not allowed to use any graphics functions, to solve the problem we need to get the relevant data from the GIF file itself. Unlike a HTML or XML or other text format files, a GIF file and most other image formats are stored in a binary format. Most binary files carry a header at the top of the file which provides the meta information regarding the particular file. We can use this information to find out the type of the file and other things, such as height an width in case of a GIF file. A typical raw GIF header is shown below, using a hex editor such as WinHex.
Read More

A little quirk of PHP $_POST var I encountered while fixing a Salesforce web-to-Lead bug. A WordPress site was using a form to submit user requests to the Salesforce web-service. The form that submitted the data had the following fields along with the others. The problem was with the multi-select field, only the last value selected in the multi-select was getting captured.
Read More

Frequently when you are displaying images on a page using a fixed width and height , the images come out stretched or squeezed. This is because the aspect ratio of the images have not been maintained. In such a case you can use the following script to correctly display the images according to the aspect-ratio of the image without actually resizing the image in a editor. This can be handy when you need to quickly correct image distortions. Here you need to keep either the width or the height fixed, so the other dimension can be calculated. Below the width is kept fixed at 200px, and the height is varied depending on the aspect ratio of the image, thus displaying the image without any distortion.

$imageFile = 'path/to/image';
/* Set the width fixed at 200px; */
$width = 200;
/* Get the image info */
$info = getimagesize($imageFile);
/* Calculate aspect ratio by dividing height by width */
$aspectRatio = $info[1] / $info[0];
/* Keep the width fix at 100px, 
   but change the height according to the aspect ratio */
$newHeight = (int)($aspectRatio * $width) . "px";
/* Use the 'newHeight' in the CSS height property below. */
$width .= "px";
echo "<img style=\"width: $width; height: $newHeight;\" 
       src=\"$imageFile\" />";

Sign up for fresh content in your email