I’m a reader of Digg.com. What can I say? I like to hear the quirky stories sometimes and when I come across something intelligent, it makes me feel more like I’m learning. So when the new Digg was dropped into Beta testing, you bet that I was all over that. See some screen-shots after the jump.

Logging In

Connecting

Apparently not a single friend of mine is currently using Digg V4, no surprise there!

Usage

Bugs

– Update –
Another bug was discovered. When clicking to add a link to your account (like adding my website to mine), if you press after typing in your web address, the form does not submit. Instead the page refreshes and you lose your previous entry you typed in. The only way to submit the form it to actually click the button.

First, no they did not die in the plane crash. You can cue that into the statement by Hurley at the end, something to Ben of you were a great number two, etc. They lived, the island WAS just what Jacob said it was, it mattered. It was the ‘plug’ in ‘hell’ and if the light were removed, the ‘plug’ would come unstuck and the real world would cease to exist. However, they each had such a profound effect on each other on the island, they waited for each other in their ‘flash sideways’ world, which was just an imagination of reality until they moved on. Kate, Sawyer, and the rest on the plane did get off the island and lead their new lives. Sure there are questions… like Aaron… never ‘born’. Walt, who is so special, and has no father or mother now. The list could go on. But, I think it somewhat makes more sense now.

Many web developers ask ‘what is usability?’.  This is one of those topics that I can explain, but it may be easier to demonstrate. My this experiences have led to some principles; one of them is that if I’m going to build it, it must be usable.   Unfortunately, many sites that I like, that tout usability, screw up one important concept that annoys me greatly.

I ask myself, “when using a menu, why do I have to drag my mouse from one button to the next, and fear losing the menu if I cross it’s border anywhere?”  Some menus are just annoying because they disappear mid mouse move, some are extremely hard to use because of several layers of menus, some I have resorted to using `tabs` to get to the correct menu item.  It’s unfortunate that people can’t get this right.

I have a simple fix that hopefully sharing it will help others. It’s basically a menu that buffers the time you are hovering, that way if you mistakenly move your mouse into the wrong area, you have a brief period of time to correct yourself.

Start with the HTML code:

<ul id="menu">
	<li class="nav"><a><span>ONE</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
	<li><a><span>TWO</span></a></li>
	<li class="nav"><a><span>THREE</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
	<li class="nav"><a><span>FOUR</span></a>
	<ul>
		<li><a><span>one</span></a></li>
		<li><a><span>two</span></a></li>
		<li><a><span>three</span></a></li>
		<li><a><span>four</span></a></li>
	</ul>
	</li>
</ul>

The menu is a simple list within a list. There are essentially only four main list items; ONE, TWO, THREE and FOUR. Each of this list items has their own list of list items generically named one, two, three and four. I personally stick with lists as my menu’s of choice because they degrade gracefully in case of CSS/JavaScript issues.

This list by itself isn’t much, in fact it’s not even a menu. CSS will be needed to really make it work correctly.

#menu li {
	list-style:none;
	float:right; /* Makes IE 6,7,8 act like FF */
	position: relative;}
#menu li a {
	display:block;
	width: 160px;
	height:35px;
	margin-top: 5px;}
#menu li a span{
	padding-left:10px;
	line-height:2.8em;
	color: #000000;
	font-weight:700;}
#menu li a:hover {
	font-weight:bold;}

#menu li ul li a:hover span{ color: #222222; }

	#menu li ul {
		margin:0px;
		position:absolute;
		left: 160px;
		top:-90px;}
	#menu li ul li {
		padding:0px;
		border:0px;
		border-collapse:collapse;
		margin:0px;
		height:34px;}
	#menu li ul li a{ margin:0px;padding:0px;border:0px;}
	#menu li ul li a span{
		display:block;
		padding-top:7px;
		font-weight:100;
		line-height:1em;
		font-size: 83%;}

This is some simple CSS that will make the UL/LI lists to really act like lists. Now the only issue is that you need it to act like a list. So the final piece of code to this puzzle is to add some JavaScript. I am using the jQuery library as my choice for creating this script, so it’s necessary to have that package (1.3+) installed for this to work. You can drop this script into the footer element inside of ‘script’ tags so it will run. It will run automatically on page load.

$(document).ready(function() {
	/* Setup the Menu */
	$("#menu > li > ul").hide();

	$("#menu li.nav").hover(
		/* on mouseover */
		function(e) {
			hoverMenu = this;
			if(this == closingMenu) {
				clearTimeout(closeMenu);
				clearTimeout(openMenu);
				$(this).find("ul:first").show("fast");
			} else {
				var newMenuOpen = function() {
					$(hoverMenu).siblings(".nav").find("ul:first").hide();
					$(hoverMenu).find("ul:first").show("fast");
				}
				openMenu = setTimeout(newMenuOpen, 500);
			}

		},
		/* on mouseout */
		function(e) {
			closingMenu = this;
			var closeMenu = function() {
				$(closingMenu).find("ul:first").fadeOut("fast");
			}
			closeMenu = setTimeout(closeMenu, 500);
		}
	);
});

The final product is quite a nice and simple dynamic menu that adds just the right touch of usability. Now, typically, I would never say that a menu with sub menus popping up everywhere is something of a usability menu system, it’s not. But sometimes, a nice menu like this is needed, especially if there is a lot of information and ‘drill downs’ that need to be accessed quickly. In any case, you can see my demo here. Leave some comments if you have any questions, and enjoy! You can also see a fully implemented version at Xcessorries Squared.

I’m slowly but surely getting this site up and running to where I want it to be. Please leave feedback if you are having any issues with it. I may be having an announcement soon about a new JavaScript Framework I’m working on that relies on other open sourced tools like jQuery. Also, quite a few other things in the works, like a usable hovering menu that I made. In any case, enjoy the site as I construct it!

Ok, so over the past few months I have been working on a nice little package that I am calling jSuite.  jSuite is a JavaScript library that utilizes much of the the jQuery UI platform.  But it takes it one step further.  It is also using some YUI CSS files for resetting, fonts, etc.  Not just that it drops in the 960.css grid for the overall layout of the page.  And to make matters better, it has a PNG fix built in for IE 6.  And if you think that is just too much… it also has a built in debugger that uses firebug.  But wait, it has a standalone firebug installation that allows it to work on IE6 and IE7!  So you can use the debugger like you would in firebug to see the console, but in IE.  There is much to do with it, but it’s pretty stable.  I don’t have all of my notes ready for the site and documentation, but for early grabs check here…

http://wiki.github.com/geedew/jsuite

The code is all up and should be working… there is a test.html that I am turning into a full working demo.  Much work is still in the works with it, and I have to upgrade to jQuery 1.3 now!

I wanted to post this for others, since I really liked making it for my personal use. I am sure many others will like it too!

Of course you can Download it here!

After reading up on the latest news with water vapor being found in on mars (NYTIMES), I began to see a future grow literally from the soils of the martian surface.  Interesting enough, if, and when asparagus begins to grow on the red planet, life will grow here on Earth in a much more dramatic way.  Think about the past, as all our secrets tends to point to the past.  Man’s achievement can be signified with simple advances in the time it takes to get from Point A to Point B.  At some point, we crawl. Then we Walk.  Then we Run.  Ride. Float. Drive. Fly. Orbit. Where does it end?  Well, an astute person would say that is impossible to know, but we can judge one thing.  The next step in this chain is sub-solar system traveling from one planet to the next.  All starting from one lonely planet in the deserts of the abyss.  

Imagine if you could, a plant growing some many million miles away.  Soon, it will be two plants. Four, 20, etc.  Soon there will be a forest.  Which will then provide oxygen, and air as we know it.  By now we would have started sending teams of scientists away for years to do their work.  Radio’s and Satellites will begin to appear on the surface.  Children of our Kids will watch the first families begin to leave Earth on SpaceShip101-’The Ark’.  After a few generations, the first child will be born on Mars.  Later, a School.  The children will be instant celebrities, yet human… and martian.  50 years later, there will be thousands living in the soils of our newest Planet.   A government will appear, whose will it be?  Peace on Earth?  Eventually, Martians will have their own governments, maybe they will revolt? But following our steps, in just a handful of generations, chances are we will see our next step in going from Point A to Point B to get much faster, and distance much smaller.  Those partaking in the journey more than once will begin to get a better understanding on distances, and they will adapt to think of the traveling as ‘nothing really’.  Putting platforms into orbit around the two planets will set up ‘OrbitWays’ for less expensive, more convenient, and possibly faster travel.  Eventually Point A to Point B will become fast, in relative terms, one Earth week?  All starting at one lonely robot, planting one lonely asparagus on one desolate place.  We live in exciting times, the future is upon us.

Sites need to be able to interact in one single, universal space.

-Tim Berners-Lee

I started this little project because I have a client whom needs to get his 24 page PDF online. The problem is that a 24 page PDF with all the bells and whistles

ends up being over 5mb in size. This causes issues for people running sub-cable internet connections, as the loading time becomes horrendous. So to solve the problem, I am going to run the PDF as a download by choice and have all the links point to the HTML(Hyper-Text Markup Language: what webpages are written in) converted page when they click on what page they want to see. This does however cause problems if something is updated on the PDF, the HTML is not dynamic or binded to the PDF so and update will p align=”left”> have to occur in both places. The only way around that is to have the HTML being the origionating source and have the ‘download as pdf’ link be a call to a server side script that packages the HTML as a PDF. That however is too much for what this client needs and the issues with the updating will have to be taken in stride.

Tools Needed:
RTF or DOC reader (I prefer OpenOffice2.2) that can convert to HTML
A Program designed to convert PDF to DOC format (I used Able2dDoc, licensed)

Unfortunately, In my case, the PDF contained a large amount of tables that were made up by images after conversion. Because of this, I had to handle things a little bit different, in which I will explain later.

First things first, lets convert to HTML

Using the software I used, Able2Doc, if you load up the PDF you can simply convert the file to a DOC format. Notice, not many converters will go straight from PDF to DOC or RTF formats. Once you are able to convert the PDF to DOC or RTF, you can then open up that file into Microsoft Office or Open Office. Both have the ability to Open up these files and then Export them as HTML.

Microsoft Offices’ way of doing things

Office is really simple. Take the document you are in and go to File->Save As->Other

Then after that you can go click and change the type to an HTML Document… put in the name and your done!

Open Offices’ way of doing things
In Open Office, it is actually easier! Just have your document open and then go to File ->Save As and you can then select the HTML from the drop down list. No extra step as there is in Word.

When things get messy…
You have to start to get creative. I know, it stinks, when things just don’t go your way. I mentioned earlier that I my specific issue just could not be settled by this process only because the images in the PDF were making up the tables and the text did not stick inside the image/tables when changed to HTML. I ended having to go with a slightly altered reality, but the end result to the user is near the same.

The idea that I had was to split the PDF into images. This was actually really easy to do. I swapped over to linux for this part (Ubuntu Gutsy). The PDF Reader program has the ability to output to JPG for your PDF’s. This came in very handy, I simply outputted the PDF I was using, 28 pages of it, as JPG’s and then used to Javascript to make a nice little setup for Checking out the picutres.

Javascript Code In the <body> tags :
<script> function PageQuery(q) {if(q.length > 1) this.q = q.substring(1, q.length);else this.q = null;
this.keyValuePairs = new Array();
if(q) {
for(var i=0; i < this.q.split(“&”).length; i++) {
this.keyValuePairs[i] = this.q.split(“&”)[i];
}
}
this.getKeyValuePairs = function() { return this.keyValuePairs; }
this.getValue = function(s) {
for(var j=0; j < this.keyValuePairs.length; j++) {
if(this.keyValuePairs[j].split(“=”)[0] == s)
return this.keyValuePairs[j].split(“=”)[1];
}
return false;
}
this.getParameters = function() {
var a = new Array(this.getLength());
for(var j=0; j < this.keyValuePairs.length; j++) {
a[j] = this.keyValuePairs[j].split(“=”)[0];
}
return a;
}
this.getLength = function() { return this.keyValuePairs.length; }
}
function queryString(key){
var page = new PageQuery(window.location.search);
return unescape(page.getValue(key));
}
function displayItem(key){
if(queryString(key)==’false’)
{
return ’1′;
}else{
return queryString(key);
}
}
</script>

What else?

Once this code is in place, you can see what it is trying to do. You are basically parsing a query address URL and looking for the specific information showing on whatever variable you pass in. This is giving your JavaScript the ability to know what a variable is from a JavaScript /PHP equivalent to the Get variables.

Now you need the code that will change values of a select box, so the complete picture will come into view.

The idea that I had was to split the PDF into images. This was actually really easy to do. I swapped over to Linux for this part (Ubuntu Gutsy). The PDF Reader program has the ability to output to JPG for your PDF’s. This came in very handy, I simply outputted the PDF I was using, 28 pages of it, as JPG’s and then used to JavaScript to make a nice little setup for Checking out the pictures.

<SCRIPT LANGUAGE=”JavaScript”>

 function loadPage(value) {

if(value == “”) {

 document.getElementById(‘mainimage’).src=”img/ProductCatalog/Page1.jpg”;

 } else {

 document.getElementById(‘mainimage’).src=”img/ProductCatalog/Page” + displayItem(‘p’) +”.jpg”;

 }

 }

 function changeImage()

{

 document.getElementById(‘mainimage’).src = document.getElementById(‘list’).options[document.getElementById('list').selectedIndex].value;

 }

function prevImage()

 {

 if(document.getElementById(‘list’).selectedIndex == 0)

 {

 document.getElementById(‘list’).selectedIndex = document.getElementById(‘list’).options.length-1;

 }

 else

 {

 document.getElementById(‘list’).selectedIndex–;

 }

 changeImage();

 }

function nextImage()

 {

 if(document.getElementById(‘list’).selectedIndex == document.getElementById(‘list’).options.length-1)

 {

 document.getElementById(‘list’).selectedIndex = 0;

 }

 else

 {

 document.getElementById(‘list’).selectedIndex++;

 }

 changeImage();

}

</script>

That was pretty much what the JavaScript needed, and then I could handle everything else from HTML which made things much easier. All that is said and done, any Q’s just ask.

I do not fear computers. I fear the lack of them

- Isaac Asimov

I’m a computer guy.  I grew up thinking they were cool, and now I have come to appreciate them more, because they are a source of income now.  I do web design, development, server stuff, troubleshooting things, etc.  Because of this, I run into a lot of problems that have to be solved.  But, more often then not, I find that I have to solve them on my own, without GOOG’s help.  So I have decided to turn to the internet, to pass on my information as I get it.  Hopefully it will help out more out there… and they can in turn help me with issues I may have.

Enjoy

Drew