Home About Contact

Play MP3s with Javascript

Posted by phorner On July 14, 2009

PIMP3Flash has always been the software of choice for playing MP3s in a browser. This poses a problem, however, for those without the Flash Player plugin. Now there is a solution.

PIMP3 is a Javascript MP3 player that uses Scriptaculous and Prototype. All you have to do is provide an MP3 track list in JSON format (using AJAX and a server side script).

The look and feel of the PIMP3 is entirely skinnable by editing the CSS file. Features include configurable runtime options such as autostart and random playback order of tracks.

Will be interesting to see if this can be converted to use jQuery.

For more information: PIMP3

  • Share/Bookmark

PHP functions in Javascript using PHP.JS

Posted by phorner On May 28, 2009

phpjsFor those of you, like me, who use PHP and Javascript regularly, PHP.JS is a great enhancement. PHP.JS is an open source project where PHP functions are ported to Javascript. This means that the PHP functionality is executed client-side which reduces the load on the server.

Some of the functions that have already been ported are:

  • md5()
  • date()
  • base64_decode()

As the library has become too big to include at once, and having users copy-paste functions to their projects can end up causing maintenance hell, the developers have created a compiler tool that allows programmers to select ONLY the functions they need, and wrap them up in a single php.js file.

Another benefit from this library is that it enhances the functionality of Javascript by adding functions that don’t exist natively in Javascript.

Definitely a great tool for developers.

For more information: PHP.JS

  • Share/Bookmark

jQuery Image Gallery that uses mouse gestures

Posted by phorner On May 17, 2009

Here is an interesting take on navigating through an image gallery. jQuery-Gestures-Image Gallery uses mouse gesture combinations to perform certain navigation functionality. For example, holding the mouse button and moving the mouse to the left will go to the previous image in the gallery, holding the mouse button and moving the mouse to the right will go to the next image in the gallery. You can even link together various direction combinations to perform special functionality.

The examples on the jQuery-Gestures-Image Gallery page really help to show the possibilities. An intriguing idea. Will be interesting to see if this type of interaction gets adopted by the main stream.

For more information: jQuery-Gestures-Image Gallery

  • Share/Bookmark

EXTExt JS 3.0 RC1.1 comes hot on the heels of the release of Ext JS Core 3.0. Ext JS 3.0 is built to sit on top of Ext JS Core 3.0. Ext 3.0 provides increased performance, consistency, flexibility and UI enhancements all without a significant size increase.

The new features of Ext JS 3.0 are:

  • New UI components
  • Row Editor
  • List View
  • Charting
  • Button Groups
  • Grouped Tabs
  • Enhanced components
  • Buttons refactored to be a valid BoxComponent
  • Toolbar Overflow
  • Menu Overflow
  • Tooltips now support an anchor configuration
  • Buffered Gridview
  • Revamped Debug Console

Row EditorOther improvements include Ext.data package enhancements, Accessibility improvements, Ext.Direct and the refining of memory management within Ext.

For more information: Ext JS 3.0

  • Share/Bookmark

EXTI’ve been using EXT 2.0 for some time now having created reporting systems and even a full blown Administration System. EXT produces Web 2.0 styled content all within your browser. Now comes EXT Core 3.0 Beta,  a subset of the soon to be released EXT 3.0.

The developers of EXT 3.0 have gone through the code, stripping out everything except for the core functionality, optimised the code and gzipped it to bring it down to a modest 25kb in size. They have also changed the licensing to use the MIT License (which drew some ire from some developers but was generally accepted by the majority).

Some of the features of EXT Core 3.0 are:

  • DOM manipulation and traversal
  • CSS management
  • Event handling
  • Dimensions and Sizing
  • AJAX and JSON Support
  • Animations
  • Classical Inheritance Class System
  • Observable Class
  • Markup generation and Templating
  • Timed code execution
  • URL encoding and decoding

EXT Core 3.0 Beta core functionality contains:

  • Carousel
  • Lightbox
  • Menus
  • JSONP
  • Simple Tabs

For those of you that need more extensive features, then EXT 3.0 is more your ticket. However, for anyone else who needs to put together a lightweight interface that has the Web 2.0 look and feel, then EXT 3.0 Core is definitely worth looking at.

For more information: EXT Core 3.0 Beta

  • Share/Bookmark