Gradient Generator Notes

Value

The value of this utility is in its simplicity. Image, photo, and graphical editors are very action-intensive. This tool allows a selection of a single color, the width/height, and then it creates all four gradients. This is a very fast way to create custom gradients, and it is easy to use.

UI

  • Page should not require scrolling to operate, read instructions, and access gradients and text.
  • Interface should allow both mouse and keyboard control. Gradients can be generated by mouse only, or keyboard.
  • Interface should allow entry of hex color code and width/height directly.
  • It is assumed the gradient will have enough color that a white title will be visible.

LAMP Stack

  • CSS/divs are used to layout the page.
  • ColorPicker is a dojox widget. Additional widgets are the width/height input and the slider. Client-side validation is run off the widgets.
  • Two buttons are offered, one that creates the gradients and one that resets the inputs to the default values.
  • When the create button is clicked, the form is validated and submitted to the server.
  • PHP5 is used for the back-end script because it supports json_encode.
  • HTML is returned from the back-end script and placed in the dojo ContentPane.
  • The background image for the page is set to one of the gradients. This is a good preview method and it makes the page more interesting.
  • ImageMagick is used to create the gradients. It creates one gradient and rotates it to create the remaining three.
  • Directory index should not be accessible. This is accomplished by another file.
  • File system - image files must be writeable by Apache.

Optional Parameters - Extending Existing Functions

Both PHP and javascript allow optional parameters and variable arguments.

PHP

javascript

  • The arguments sent to a function in javascript can be accessed as function_name.arguments. To find out how many arguments were passed, you can use function_name.arguments.length. http://www.w3schools.com/jS/js_functions.asp
  • Implementing default arguments with javascript can be done by using the arguments array.

Multi-Dimensional Array Sorts for PHP

To sort a multi-dimensional array in PHP, you can use usort, like so:

usort($aArray,"cmp_func");

function cmp_func($a,$b)
{
  return strcasecmp($a['x'],$b['x']);
}

Finishing Projects as Fast as Possible

All tasks have a certain minimum amount of time to complete, and no amount of persuasion, management, pressure, technology, or people can change that.

Reducing development tasks to the barest minimum is to define completion as delivery of a reasonably stable component. Unit testing is simply not done. The QA department, or another person or organization becomes responsible for the vast majority of testing.

Automated testing tools can greatly speed the cycle of delivery, defect identification, and verification. This is one way to speed a project along.

Although it is likely there will be a lot of bugs, if the software has a good architecture, most will resolve quickly.

This approach does require experienced engineers, because in order to build good code fast, people need a wide skill set, good tools, and plenty of self-discipline.

Double Your Icon Set

I use an icon set that has beautiful, full color icons (http://everaldo.com/crystal_project). However, sometimes a grayscale version of an icon can be used as a subtle control, or to allow other icons and page elements to appear more prominently.

ImageMagick can be used to convert full color icons into beautiful greyscale icons, very quickly.

convert ok.png -colorspace Gray grey-ok.png

Original image: Color OK

Greyscale image: Greyscale OK