TopicObserver.com

Trond Pettersen on Web Development and Topic Maps

Tag: javascript

Billy-Corgan.com Re-Launched as Topic Maps Based Website

Billy-Corgan.com was the first public web site I ever created and ran. I first started playing with it (and web techs) in 1998/99. In 2000, I moved it from GeoCities to its own domain name. The site had it’s golden age in 2003/2004, with up to 4 million page views / month. I believe that is a rather high number for a non-popish fan site. Back then it was a PHP/MySQL driven site.

In 2005 I decided to stop maintaining Billy-Corgan.com due to various reasons, the most prominent ones being a lack of time and a decreasing level of devotion (esp. with regards to the online community and drama that follows).

For the last 5 years the site has therefore contained little to no information. Up until 2 days ago, it did only contain the Machina II MP3s (Smashing Pumpkins released this album on the Internet, for free, back in 2000!). At the same time, there have been hundreds of daily visitors (Google Analytics stats). And the old MySQL database has been kept intact on my backup devices. Therefore, I recently decided to re-lauch the site with some of the “static” content (lyrics, discography, photos + MP3s as before). No need for it to remain empty, right?

Moving to Topic Maps

So: what to do when putting some old database content on the web? I did not want to create a huge new web site and spend a lot of time writing (plain) PHP scripts and SQL queries. Didn’t have time for that right now.

Well, obviously I chose to create a Topic Maps based web app, with Ontopia being my preferred Topic Maps engine.

I started by creating a couple of new database views (to make for a simpler mapping) and a few stored procedures for “sanitizing”  some of the data (used in the views’ SQL). From there, the remaining tasks were pretty simple:

  1. Create an LTM file (my preferred format) containing the ontology (concepts like Song, Person, Composer-Of, etc.). ~100 lines of LTM.
  2. Write a DB2TM mapping file, specifiying which columns are mapped to what Topic Maps concepts. 136 lines of XML.
  3. Write JSP files — as discussed in my previous post on Web App Development with Ontopia. Ended up with 10 specialized JSPs.

UI Functionality

I also wanted to add some “fun” functionality by creating an Ajax enabled photo gallery. I did explore some pre-built galleries such as Galleriffic, but ended up building my own using a combination of jQuery and jQuery cycle. The album degrades gracefully by not requiring JavaScript support — all links work without JS (example: 1979 vs. Zero).

Further, I implemented an audio “player” for the MP3s based on the HTML5 <audio /> element. At this time the browser support is very limited, though, as these are MP3s and not e.g. OGG. In the lack of MP3 audio support I fall back to using Flowplayer’s audio plugin (Flash based). I’ve also played with some CSS3 properties like border-radius, as seen on the index page (granted your browser supports either -webkit-border-radius, -moz-border-radius or border-radius (why so many?)).

The result can be viewed at Billy-Corgan.com.

No Comments by Trond on March 23, 2010
filed in Topic Maps
tagged , , , , ,

Readable Code: In the Eye of the Beholder?

In his most recent blog posting – In the Eye of the Beholder (ah, reminds me of EoB II), JavaScripter James Padolsey (if you do some JavaScripting / jQuery, follow his blog) argues that the readability of anything is entirely dependent on who’s doing the reading. He also states that readability depends on how proficient the reader is in the given programming language.

I tend to disagree. Readability and understanding are two separate concerns. Readability is about aesthetics. Understanding is about knowledge. Code can be understood without being classified as “readable”.
Read the full post »

No Comments by Trond on February 20, 2010
filed in Web Development
tagged , , , ,

Event Delegation with YUI 3.0

Personally I’ve never used the YUI library (yet), but the new event delegation functionality of YUI 3.0 has a very nice look to it:

// Defining simple listeners on each element:
Y.on(“click”, handleClick,
“#container ul li a.profile”);

// Defining listener on a container using the delegate() method:
Y.delegate(‘click’, handleClick,
‘#container’, ‘ul li a.profile’);

[...]

Event delegation in YUI 3 moves the overhead of walking the DOM tree from the loading process to the point of user interaction, and decreases complexity by removing the need to match target elements within the callback. Instead, delegate() tests the event target (e.target) against the selector (‘ul li a.profile’) after the event is fired but before the callback is executed…

More at the YUI Blog.

No Comments by Trond on November 16, 2009
filed in Web Development
tagged , ,

Simple Web 2.0 Photo Album with jQuery

Yesterday a colleague of mine asked me about what would be the requirements of HTML used for an image gallery using modal windows. As I’ve previously done this myself, I thought I might as well share some code in this blog.
Read the full post »

7 Comments by Trond on March 21, 2009
filed in Web Development
tagged , ,

Forcing jQuery UI Datepicker to Always Open on Today’s Date

Today, I implemented the jQuery UI Datepicker in an application where the requirements state that the current date should always be null. That is, if the user opens a Datepicker after first having selected or typed in a date, the Datepicker should still be “centered” around today’s date with no pre-selected date.

It might just be me, but I was not able to find a way to do this by simply using the Datepicker options. I therefore ended up solving it by creating an invisible text field to which the given Datepicker is associated. In addition, an onClose callback function ensures that the value of this field is always re-set to null while the selected date is moved into the field to be read on the server side.

Using the same kind of HTML structure as listed in Replacing the Built-In DatePicker in Sun IdM 8.0, I ended up with JavaScript similar to the code listed below.

$(document).ready( function() {
	/**
	 * If the user actively selected a date, insert that date into
	 * the text field and reset the datepicker's value as this should
	 * always display the current date (CIMS req.).
	 */
	var updateDatePicker = function(date, datepicker) {
		if( date != null ) {
			var $dateHolderElm = datepicker.input;
			var dateFieldId = $dateHolderElm.attr('dateFieldId');
			$('#' + dateFieldId).val(date.format(dateFormat.masks.isoDate));
			$dateHolderElm.val('');
		}
	};
	$('div.datepicker.enabled').each( function() {
		// Create a new element that will act as the datepicker
		// for this field. Because we want the datepicker to always
		// open on the current day instead of the selected date,
		// we bind it to an invisible input element through a new
		// button element's onclick event handler.
		var dateFieldId    = $('.date', this).attr('id');
		var dateHolderId   = dateFieldId + "_dateholder";
		var $dateHolderElm = $('<input type="text" id="' + dateHolderId + '" value="" />');
		$dateHolderElm.attr('dateFieldId', dateFieldId);
		var $buttonElm = $('<button><img src="images/calendar.png" alt="Open calendar" /></button>');
		$buttonElm.insertAfter($('.date', this));
		// Make the dateholder invisible, but do not set display to none
		$dateHolderElm.css( {
			//visibility: 'hidden', // breaks in IE, so .. the rest is based on site design, but should be part of CSS
			border: 0,
			color:  'white',
			backgroundColor: 'white',
			zIndex: -1,
			position: 'relative',
			marginLeft: '-3px',
			marginTop: '-10px',
			height: 0,
			width:  0
		});
		$($dateHolderElm).insertBefore($buttonElm); // to ensure placement of dp
		$buttonElm.click( function() {
			$dateHolderElm.trigger('focus');
			return false;
		});
		$dateHolderElm.datepicker({
			onClose : updateDatePicker
		});
	});
});

Note: for formatting of JavaScript dates, I’ve used date.format.js from stevenlevithan.com.

No Comments by Trond on February 23, 2009
filed in Web Development
tagged , , ,

Replacing the Built-In DatePicker in Sun IdM 8.0

If you read my other post on creating custom view handlers in Sun IdM, you might have noticed my mixed feelings towards the system’s built-in interface.

I know its main task is not to look good, and that it is best at what it is supposed to be good at, but there really is no point in a system that no user would use – unless Sun wants other companies to take the market lead.

It is not only that it is hard to make proper customizations on the CSS layer due to the nested-tables-in-nested-tables-in…-nested-tables-we-do-not-know-how-to-properly-use-ids-or-classes-and-enjoy-the-font-tag-and-br-tags-for-space-HTML generated by code written by someone stuck in the 1990s, but also that a lot of the components look quite old fashion, so to speak.

Have a look at the built in date picker for instance:

Built-in Calendar Text Input Field - Old Fashioned Gray Button

Built in calendar - Pop up window with boring look

Lovely? No? Nor did our customer think.
Read the full post »

5 Comments by Trond on January 20, 2009
filed in Sun IdM, Web Development
tagged , , , ,

Easy JavaScripting with jQuery (jQuery Basics)

During the last year I’ve tried using jQuery as much as possible when it comes to adding JavaScript functionality to web interfaces.

For those who still don’t know, jQuery is a cross browser open source JavaScript library which makes it extremely easy to manipulate HTML, perform Ajax requests, apply visual or interactive effects to your site, etc. If you know how to write CSS, you should be able to use jQuery. And if you work with web applications / -programming, you ought to know how to use jQuery or similar frameworks.

The dual licensing model of jQuery (GPL/MIT) makes it a perfect tool for both open source as well as commercial projects and products.
Read the full post »

No Comments by Trond on December 26, 2008
filed in Web Development
tagged ,
« Older Posts

  • RSS @twitter

    • Also starting to like YUI3 vs. the framework I used to be more familiar with .. a.k.a jQuery :D about 1 hour ago from web
    • CI and "commit early and often - with unit tests" actually works great if done properly and throughout the team(s). Starting to enjoy it :-o about 1 hour ago from web

  • Tags

  • Topics

  • Recent Comments

  • Topic Map Feeds