VT’s Tech Blog

PHP programmers usually have to handle HTML & Javascript front-end coding as well and I’m sure a lot of us have been frustrated with the lack of those easy to use PHP functions in Javascript like those array, encode/decode and string functions. Here’s a Javascript project which provides you just that.

PHP.JS is an open source project started by which aims at providing the standard PHP functions for Javascript development. This eases up programming in Javascript for PHP developers as they can use functions they are familiar with. Currently the project has ported around 230+ PHP functions.

To use this library all you need to do is to download the php.js file and include it in your page:

<script src="/pathto/php.js"></script>

Then use use the function as you would in PHP. For example if you want to use the urlencode function in Javascript, just use it like this in Javascript

urlencode('http://blogs.vinuthomas.com/');

This should return ‘http%3A%2F%2Fblogs.vinuthomas.com%2F’. As easy as that !

Edit: As Kevin mentioned in the comments below, don’t use the entire php.js file in your projects, just use the function you need.

History of PHP.JS from (phpjs.org):

A developer called Kevin van Zonneveld was once working on a project with a lot of client(JS) / server(PHP) interaction, and he found himself coding PHP functions (like base64_decode & urldecode) in JavaScript to smoothen communication between the two languages.

He stored the stored the functions in a file called php.js which was included in the project. But even when the project was done, it remained fun trying to port PHP functions to JavaScript and so the library grew.

Kevin decided to share the little library online, which triggered the enthusiasm of a lot of PHP developers longing for PHP functionality in JavaScript. The project was open sourced in 2008, and many people contributed their own functions in the comments sections of Kevin’s blog.

It was decided that the library deserved a bigger home, and a face of its own, and so the PHP.JS core team (which at that time also consisted of Michael White, Felix Geisendörfer, Philip Peterson) developed the phpjs.org website

Links:
PHP.JS Home Page
List of Functions available in PHP.JS
Download PHP.JS

Janko Jovanovic’s got an excellent tutorial which shows you how to highlight the current active form area to improve usability of forms. He achieves this using jQuery.

He shows how to construct the form, style it and uses jQuery magic to get this functionality working for the form. He mentions that this improves the usability of large forms by focusing the user on the current action on the form.

You can see a demo of this over at:
http://www.jankoatwarpspeed.com/examples/ContextHighlighting/

Head over to the tutorial over at: Context highlighting using jQuery

Related articles by Zemanta

• Chain.js: jQuery Data Binding Service
• Designing Your Page Around a jQuery UI Theme

Raphaël is a small JavaScript library  released under the MIT License that helps with creating and playing with vector graphics on the web.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Once you include raphael.js in your HTML file, try the following example. Once that displays on screen, click on the black box which shows up to see how the onclick function on box1 works.

// Creates canvas 320 × 200 at 1, 1
var paper = Raphael(1, 1, 320, 200);
// Create a regular rectangle
var box1 = paper.rect(15, 15, 30, 30);
//Set the box fill to black
box1.attr("fill", "#000");
// Set the box stroke color to white
box1.attr("stroke","#fff");
// create a rounded rectangle
var box2 = paper.rect(10, 10, 100, 50, 10);
// set box2's fill to grey
box2.attr("fill", "#ddd");
 
//Bring Box1 to the foreground
box1.toFront();
 
//Attach a onclick function to box1 to change the color of the box
// to blue when clicked
box1[0].onclick = function () { box1.attr("fill", "blue"); };

Links:
Raphaël Home Page
Documentation

Related articles by Zemanta

• Raphaël: Simple graphics wrapper on top of SVG and VML

Here’s some cool stuff – Google’s Hosting some popular Javascript Ajax libraries like jQuery, prototype and the likes on their servers. You use this service to serve the supported libraries straight off Google. They also provide you with the option to load a particular version of the library so you won’t have to keep checking your code everytime a latest release is made.

Here’s how you would load jQuery version 1.2.3 using this API:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery 
  google.load("jquery", "1.2.3");
 //Continue using jQuery
</script>

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

Links:

Google Ajax Libraries

Documentation