JSValidate - Javascript Form Validation


JS Validate

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.

What sets JSValidate apart from other similar scripts is the simplicity of it's setup. Another important characteristic is the importance of browser compatibilty. JSValidate is run through very thorough browser tests to ensure it works on any platform with any browser.

Client-side form validation is great. It saves a trip to the server and it provides users with immediate feedback on the content the've entered into a form. JSValidate is a javascript library that can be incorporated in any of your existing forms, or any new forms, and can provide you with some slick Web 2.0 style validation (No More Alert Boxes!). After including the library in your page, it's as easy as assigning specific class names to your form elements to enable the validation. Here is a short list of the classes that can be assigned to your form fields:

jsrequired - Field must have some sort of value.
jsvalidate_number - Any integer; accepts decimal and negative
jsvalidate_digits - Only Numbers
jsvalidate_alpha - Only letters
jsvalidate_alphanum - Only letters, numbers, and underscores.
jsvalidate_email - Any valid email address.
jsvalidate_uscanzip - US or Canada Zip code; Accepts optional US zip + 4
jsvalidate_usstate - Any 2 letter uppercase state of the United States.
jsvalidate_usphone - US Phone Number, accepts most common formats.
jsvalidate_creditcard - Validates VISA, MasterCard, American Express; formats: no spaces, spaces, or dashes.
jsvalidate_ssn - Social Security Number in the format: XXXXXXXXX, XXX XX XXXX, or XXX-XX-XXXXX
select-notfirst - This class can be applied to select boxes (drop-downs). It prohibits the user from selecting the first option from the list.

Click here to visit the JSValidate Homepage.

Or Here to check out the demo

Starbox - Shine Like a Star! (or atleast rate with them)



Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

Starbox Demo

Here are the options Starbox allows you to specify:

new Starbox(
  element,                  // the id of your element
  rating,                   // rating to start with
    background: false,      // or a css background to overwrite the one in class
    buttons: 5,             // the number of buttons (choices)
    className : 'default',  // or your own classname
    color: false,           // color of the colorbar
    duration: 0.6,          // duration of the effect across the bar, if used
    effect: { mouseover: false, mouseout: true } // or your own
    hoverClass: 'hover',    // or your own classname
    hoverColor: false,      // color of the colorbar when hovered
    identity: false,        // used on the return info
    indicator: false,       // adds an indicator after the starbox using a string,
                            // #{average}, #{max} and #{total} can be used.
                            // example: '#{average}/#{max} out of #{total} votes'
    inverse: false,         // true, false
    locked: false,          // true, false
    lockOnRate: true,       // true, false
    max: 5,                 // maximum rating, that of the last star
    onRate: false,          // or function(element, info){}
                            // info = { identity: identity,
                            //          rating: rating,
                            //          average: average,
                            //          max: max,
                            //          total: total
                            //        }
    overlay: 'default.png', // or other png in same folder as starbox.css
    stars: 5,               // the amount of stars
    total : 0               // the amount of votes cast

For more information, and to download the Starbox library, click here to visit Nick Stakenburg's site.

Three Different Views on AJAX


Click the image below

Three Different Views on AJAX

Google's AJAX Photo Slide Show


Need a image slideshow to show off your Flickr, Picasa, PhotoBucket, or other photos?

Check out the new release of Google's AJAX Slide Show.

Google API

Last month google released an update to their AJAX Slide Show application, created using their AJAX Feed API.

New in this release are:

  • The Full Control Panel
    This will give you a pause/play button, as well as forward and previous controls. The Full Control Panel will fade in and out on mouse events. The Full Control Panel will also auto-fade out when the mouse does not move for some period of time.
  • Animation and Pause Callbacks
    The Slide Show supports a number of callbacks which your application can use to alter its behavior and react to whats going on in the slide show. For instance, you might have a custom feed which requires that you compute the url of the image for an entry, or you might want to alter the click behavior to play an embedded movie when someone clicks on an image (instead of following a hyperlink). All of this is easy to setup using the Slide Show callbacks.
  • Position Bias for Images and Controls
    By default the Slide Show is configured to center the images to be displayed. It also automatically positions the controls, such as the pause image, approximately on the bottom 1/3 of the Slide Show. As an application, you can provide position bias to images, controls, or both, using the centerBias and pauseCenterBias properties of options. Bias is expressed as an object with topBias and leftBias, both expressed as offsets in pixels.

Here's an example slide show from Google's site:

Here's the link to the Slideshow homepage.

And the here's the link to the Programming Guide with sample code to get you on your way to building you're slideshow.

See what your Site looks like on Multiple Browsers without Installing Anything

Have you ever wanted to see what your new site looks like in pretty much every browser and operating system without having to have multiple computers running all of this software? Well I found a site that can do just this for you and for FREE!

Browsershots .org is a site where you simply enter your url and the site will go out and take multiple screen shots of your site as it would look on each browser. This is great for the design portion of your site creation as you can make sure that your css and even flash or JavaScript looks correct. Since it just takes a screen shot of the site you can't test cross browser interactivity, so for that you would have to use multiple browsers (can you say beta testing).

Browser Screen Shot Maker 1

The site seems to do a good job of taking the shots and you can see some examples below.

FireFox 1.5 on Ubuntu.

Firefox 1.5 on Ubuntu

Opera 9.24 on Ubuntu

Opera 9.24 on Ubuntu

Konqueror 3.5 on Ubuntu

Konqueror 3.5 on Ubuntu

When you use the free service it can take up to 2 hours for the images to be created, but for 10 euros (which I believe is a little less that 20 U.S. dollars) you can get faster processing.

The project is open source, so if you have your own server that meets the server requirements then you can install it and run it for free. Click here to go to the SourceForge page (please note I haven't installed the software on a server yet, so I don't know how difficult it is to do).

If you are designing or re-designing a web site that is public facing I would recommend using this product (you can find this and other site recommendations from me at my recommendzit.com at http://recommendzit.com/bookmarks.php/davidhurth).

Akelos - Ruby on Rails port to PHP



Akelos is a PHP framework for developing database-backed web applications according to the Model-View-Controller pattern. It allows you to write views using Ajax, control requests and responses through a controller, manage internationalized applications, and communicate models and the database using simple conventions in a pure-PHP development environment built upon programming best practices. To go live, all you need to add is a database and a web server.

Who is the Akelos PHP Framework for?

  • PHP developers who want to enjoy writing web applications.
  • Ruby on Rails developers who need to code in PHP.
  • Developers who want to distribute their work to the mass market of cheap shared hosting.
  • Developers who need to write multilingual web applications.

Akelos based applications only require that PHP and a database be installed and configured on your server. This means you can host your apps with any hosting provider that supports PHP & MySQL, and the last time I checked that was 99.9% of hosting providers online.

Check out this screen cast: Creating a Blog in 20 Minutes using the Akelos PHP Framework

Here's a study that was conducted to compare different Ruby on Rails PHP frameworks like CakePHP, PHP on Trax, Akelos, and Code Igniter.

A Year 2000 Slashdot Post Predicts Ajax

As I was surfing the web today I ran across and interesting Slashdot post from the year 2000 that predicts the use of Ajax.

The article accurately predicts the use of toolkits the would receive data via XML on the client side using DHTML. The post even mentions the idea of MVC (model view controller) as it relates to what we now fondly call Ajax. Below is a list of the pros and cons as listed by the post.

The following isn't very well organized, written on the fly, but benefits of a DHTML approach include:
  • Natural
    client/server model enforced by browsers supports and encourages
    development of a well-separated layered model. Can be used to implement
    simple two-tier systems which talk directly to a database, or more
    sophisticated, flexible three+ tier systems with an object-based middle
    layer (developed in Java for portability.)
  • The latest HTML,
    stylesheet (CSS) and XML/XSL standards support clear separation between
    "document" structure, presentation, and content. Reuse in software
    development is all about separating out functionality as much as
    possible - a blob that does 10 different things can't be reused as well
    as a focused entity which does one thing. CSS stylesheets allow you to
    reuse presentation definitions in different contexts, XML allows you to
    reuse data and queries, XSL (which applies a template to XML data)
    allows you to reuse "structure", i.e. implement the same layout for
    data in different contexts.
  • Although HTML is often thought of
    as inferior to traditional programmed GUI solutions, when it comes to
    DHTML and the associated technologies, this is a misperception. In some
    respects, such as the widgets mentioned above, it is lacking, but as
    mentioned, this can be addressed using judiciously applied Java
    objects. In other respects, such as its handling of multimedia content
    (images, sound, movies), its hypertext capabilities, and its
    free-format layout, it is far superior. Applications can be developed
    which allow a user to navigate freely between entities far more easily
    than they ever could with traditional GUI database applications.
  • Declarative
    rather than procedural model used by all these technologies (HTML, CSS,
    XML, XSL), lends itself to automation via toolkits.
  • Prediction
    about the future: this technology is moving fast, and is likely to
    catch and outstrip existing GUI application development models quite
    quickly, at least when it comes to traditional database-oriented
    applications. Developing a system like this now is a bet on the future
    direction of such systems, and will avoid you having to retool and
    relearn in a few years time when the limitations of your
    non-browser-based cross-platform application become problematic.
The problems I see with this approach at the moment are:
  • Do-everything
    toolkits for this kind of application are not yet available. Although
    there are toolkits which work for particular layers of such an
    application (especially a middle object-based layer), there's nothing I
    know of that's oriented towards creating cross-platform "rich GUI"
    systems in a browser. The user-interface aspects of web application
    development toolkits tend to be oriented towards the simple, "list
    products, order product" type of application required by
    business-to-consumer web sites. On the positive side, you can still use
    products for web page design and so on, you just have to live with
    working quite a bit in a non-visual code mode to add your custom
    widgets, Javascript, etc.
  • You'll be something of a pioneer
    developing an application like this now. All the old sayings like
    "pioneers are the ones with arrows in their backs" exist for good
    reasons. No one ever got fired for churning out another application
    with the same old reliable-but-limited existing technology.

Sometimes it is interesting to see how close or how far off ones vision of the future is.

Click Here to view the entire post.

Symantec's Top 10 Internet Security Trends


Here's the Top 10: 

10) Virtual machine security - hot powerful technology ripe for the hacking. Using the power and flexibility of virtual machines could take cyber crime to the next level.

9) Professionalization of cybercrime - money is being made off discovering vulnerabilities/hacks and auctioning those findings to the highest bidder.

8) Web plug-in vulnerabilities - ActiveX had a number of issues this year and plugins will continue to be a chink in our armor

7) Bots - hacking by proxy, using bots, to siphon protected information

6) Exploitation of trusted brands - especially in the form of emails from financial institutions (banks, credit unions, paypal, etc...)

5) Phishing - hackers throwing out some bait and hoping they'll catch some victims

4) Professional attack kits - making it even easier for attackers to cause trouble

3) SPAM - it's what's for dinner, and now it's coming in new flavors (pdfs, mp3, greeting cards, etc...)

2) Windows Vista - 16 security patches (and counting) since its introduction

and the #1 Internet Security Trend is............

1) Data Breaches - average cost per incident is in the hundreds of thousands and rising. TJMaxx, Monster.com, and Salesforce.com being hacked, as well as an estimated half a million vulnerable database servers, have made this the #1 Security Trend.

Read the full articles on these trends over at Information Week and Application Development Trends

YouTube : You have better rivals

In one of the article in PC World, it compares different video sharing sites. The review clearly explains YouTube ranks way lower than some of the web sites. Top of the list is Blip.tv, even though it is only in Beta, the video quality and functionalities are much better than any other video sharing web sites. For their rankings, they also took into account policies on shared advertising reenue, potential audience size, the entire upload experience, and the design of each embedded player, including the intrusiveness of any advertising, watermarks, and other nonvideo elements. In addition, social networking options, the ability to make videos private are also considered.

Blip.tv gets the impressive 84/100 rating. Its Video/Audio quality considered as 'Superior/Very good', Ease of Upload considered as 'Very Good' , Embedded Player considered as 'Very Good' and Sharing options considered as 'Very Good'. Also the full size of the video can be upto 100 MB and there are no length limits compare to some other web sites limitation. You can store unlimited videos, It offers you revenue sharing, and it converts to your video to Flash 8.

Divx Stage6 Beta gets the second highest rating 83/100. Video/Audio is 'Very Good/Very Good', Ease of Upload is 'Good', Embedded player design is 'Superior', Sharing Options is 'Very Good'. File size/length limits is 2GB/none. User storage is unlimited and No revenue sharing. It converts the video to Divx format.

Brightcove Beta gets 81/100 rating. Video/Audio is 'Good/Very Good', Ease of Upload is 'Very Good', Embedded player design is 'Superior', Sharing Options is 'Very Good'. File size/length limits is 100MB/none. User storage is unlimited and revenue sharing via free upgrate. It converts the video to Flash 8 format.

Revver gets 80/100

Veoh gets 80/100

Microsoft Soapbox Beta on Msn Video gets 79/100

YouTube gets 79/100. Video/Audio is 'Fair/Very Good', Ease of Upload is 'Very Good', Embedded player design is 'Very Good', Sharing Options is 'Very Good'. File size/length limits is 250MB/10 min. User storage is unlimited and revenue sharing to selected users. It converts the video to Flash 7 format.

Vimeo gets 78/100

Jumpcut Beta gets 78/100

MySpace TV Beta gets 77/100

visit PCWorld link for a more detailed chart and comparison videos.

Google Maps Version Released


Here's what this new release of Google Maps brings to the table: 

  • Route Mapping (Planning)
  • Turns displayed on your map
  • You-Are-Here GPS functionality
  • Contacts integration for Windows Mobile Devices

Also remember Google Maps has other cool features like:

Real-time traffic conditions
See where the congestion is, and estimate delays in over 30 major US metropolitan areas.

Favorite places and routes
Save time (and avoid sore thumbs) by keeping a list of residential or business locations, and driving routes.

Monitor your data consumption in real-time — just look to the top right portion of your phone screen while using Google Maps.

Enhanced business info
After selecting a particular business, select the "Details" tab for hours of operation, hotel amenities, and more.

And for those of you with BlackBerrys, you can use Google Maps to!

You can download this release by directing your mobile device to http://www.google.com/gmm


Syndicate content