geedew » Design

Box-Shadow will crash us all

drew — Sun, 03 Apr 2011 12:12:33 +0000

In CSS3, some of the newest features can bite you. Recently, I discovered a serious issue with box-shadow and rendering. Box-shadow is a new feature that creates a shadow effect either outset (around a box) or inset (inside a box, like a glow). What I wanted to do, was create a soft glow on the inside of a website, using , so that the entire site had an easy fade. The code that I ~~used was~~ currently use is:

body {
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

This code actually ~~worked~~works, and I didn’t notice any issues. However, the 8px fade was too abrupt; I kicked it up ‘just a tad’ to 200px (I have large ‘tads’). Big mistake as all ‘advanced’ browsers were crumbling in my wake. If they support box-shadow, they failed. The page loaded, but scrolling was a complete and utter failure.

For now, I will have to avoid doing this, especially to the large tag. I will chime back in on the topic once I get some solid evidence and facts about it.

Advanced button theming on jQuery UI Dialog

drew — Thu, 10 Jun 2010 15:23:23 +0000

There is a very annoying ~~bug~~feature that I have found when using jQueryUI. It’s not the themes, they work great, in fact, they are the best thing since sliced bread. But in a ‘Cupertino.esc’ way, they provide too much simplicity over the functionality that I require. This post aims to solve that in a progressive enhancement sorta way. I am using jQuery 1.4.2. with jQuery UI 1.8.2, it doesn’t matter what theme you use with this, but I prefer redmond.

Let’s take a look at the core issue. Here is what a typical dialog looks like in jQueryUI 1.8.2 with some nice buttons.

Perfect example of a jQueryUI Dialog

Here’s the simple code for this.


	Open Dialog
	
	This is a div dialog test. This is a div dialog test. This is a div dialog test. This is a div dialog test. This is a div dialog test.

That’s really great, I mean that code is so small and yet you can get such a great looking item out of it. So how can I have a problem with that? Well let me tell you how the buttons are made, you have a name and then you have that name point to a function. The name is the text of the button, the function is the action of the button. And that’s it. Period.

Now, I find it great that I can use these simplistic featuresets and get ‘get by’ but normally my “Cancel don’t ever touch me button” is the color red(ish) while my “Oh you need to hit me to move on” button is the color green(ish). But you cannot do that (easily) with this current setup. In fact it’s very sloppy to force this setup into doing that and it ends up using a great amount of code just to do one thing, add a class.

To solve this, I did what any self respecting JavaScript ninja would do, ~~I said goodbye to jQuery UI~~ I opened up the source code and took a peek, found out where I could attack (fix) the code and I did it.
So before I show you the code, I will show you how I decided buttons should/could be made. My process is 100% backward compatible, yet more difficult and easier to mess up (the original goal of jQueryUI was obviously to make it as simple as possible).

Buttons with my code changes can now be made like this

buttons: {
	"Ok":  function() {
		$(this).dialog("close");
	},
	"Cancel": {
		action : function() {
			$(this).dialog("close");
		},
		type : "cancel"
	}

/* This is poor CSS by design to be simple and readable */
 div.ui-dialog-buttonpane button.cancel { background:none; border:0px none;color:red; }

and the old way of doing it will still work just fine as well.

I’ve gone ahead and added a few features, namely it is now name-points-to-object instead of the old name-points-to-function mentality. This object has two attributes: action and type. Action is the old function() that was pointed to and it will be called when this button is clicked. Type is the new feature on the block, it’s just a CSS class that is added to the function using jQuery.addClass. I’ve tried to keep is simple, and at the same time, make it robust and backward compatible. Here’s a simple change that is possible using this feature.

Now my dialogs can look like this when I want them to. This is a big usability thing (make the buttons descriptive, not just in text but in color/design and function).

So the secret sauce to all of this is actually an extension of the jQueryUI 1.8.2 Dialog code (more like rewrite of some of the code). This code can only be ran AFTER jQueryUI 1.8.2 has been created, otherwise you will get an error. I placed this code into the jQueryUI 1.8.2 custom.js file itself for easy keeping; just drop it at the bottom of the file.

/* TorchUI dialog button fix */
(function($) {
	var _createButtons = $.ui.dialog.prototype._createButtons;
	$.ui.dialog.prototype._createButtons = function(buttons) {
		var self = this,
		hasButtons = false,
		uiDialogButtonPane = $('')
			.addClass(
				'ui-dialog-buttonpane ' +
				'ui-widget-content ' +
				'ui-helper-clearfix'
			);
		// if we already have a button pane, remove it
		self.uiDialog.find('.ui-dialog-buttonpane').remove();

		if (typeof buttons === 'object' && buttons !== null) {
			$.each(buttons, function() {
				return !(hasButtons = true);
			});
		}
		if (hasButtons) {
			$.each(buttons, function(name, fn) {
                        /* Begin the code change here */
			// Check to see if fn is being passed in as a funciton, assume it's an object if not.
			 	if(!$.isFunction(fn)) {
			 		var buttonclass=fn.type;var func=fn.action; }
			 	else {
			 		var func=fn; var buttonclass=""; }
				var button = $('')
					.text(name)
				/* Add a class to the button, if there is a class */
					.addClass(buttonclass)
					.click(function() { func.apply(self.element[0], arguments); })
					.appendTo(uiDialogButtonPane);
				if ($.fn.button) {
					button.button();
				}
			});
			uiDialogButtonPane.appendTo(self.uiDialog);
		}
	}
})(jQuery);

If you have questions, please respond, I promise not to take them personally

Bulletproof @font-face

drew — Tue, 08 Dec 2009 04:12:55 +0000

There is quite an interesting discussion going on at Jeffrey Zeldman’s blog concerning the @font-face syntax and how to make sure that it is working in all browsers. It’s interesting to see the different ‘hacks’ that are being put together for something that should be hashed out to work well in all major browsers. Why does this remind me of things like the wonky implementations being played out in html5?!

Usability and a Simple JavaScript hovering menu

drew — Sun, 06 Dec 2009 02:20:11 +0000

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:


	ONE
	
		one
		two
		three
		four
	
	
	TWO
	THREE
	
		one
		two
		three
		four
	
	
	FOUR
	
		one
		two
		three
		four

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.

Scribd and Slide mode : Why is my height wrong?

drew — Thu, 30 Jul 2009 05:06:02 +0000

While recently using Scribd‘s services, I came across a very nasty bug, and a nice clean fix. Scribd allows developers to tap into a great, but somewhat basic API. One of these settings allows a developer to set a default ‘mode’ before the API then builds the flash calls necessary to display the document. The issue comes up when you choose the ‘slide’ mode as the loading view. No matter what ‘height’ you set, with ‘auto_size’ set to false, the height will adjust to the wrong height.

You can jump to the code here, or continue.

I started by writing some simple code that follows the API.

scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'height', 800 );
scribd_doc.addParam( 'width', 600 );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

Where ‘flash_catalog’ is the container div of the Scribd PDF.

This however led me to have a height that follows the default rules (width multiplier of 85/110) where the height matches how much space is in the window. So I progressed further with this code.

var oniPaperReady = function(e){
 $("#flash_catalog embed")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

So now I am dropping in a listener in the API to wait for the document to load. I then hide the ‘embed’ flash information, then add the height and width, then re-show the flash element.

You may notice, I’m using jQuery, in which you can do the same thing with regular JavaScript, although quite a bit more complicated (ask if you really really need that code).

An astute reader would also notice one thing, I’m not adjusting for an ‘object’ tag, only the ‘embed’ tag (the difference for flash between different browsers). I figured out this novice mistake while testing in Internet Explorer. Here’s the finished code, that works, removing the nasty height issue.

var scribd_doc = scribd.Document.getDoc( #######, 'key-*******************' );

var oniPaperReady = function(e){
$("#flash_catalog embed")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();

$("#flash_catalog object")
.attr("wmode","transparent")
.hide()
.css({"height":"800px", "width":"600px"})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

The final word; I’m adding the transparent mode so that I can then have a menu that drops on top of the flash. This works very well!

Making a better notification plugin: jQuery

drew — Thu, 23 Jul 2009 03:33:18 +0000

I find myself at a crossroads. I really like using jQuery, and I really like not having to write my own plugins as there are some really good ones out there. But I have run into a problem when it comes to a notification system. Let’s take a step back and discuss the purpose for a minute.

** Update 7/29/2009**
I now have a page dedicated to this at http://www.alldorks.com/wordpress/notify where you can also find the source code repository.

Within a website’s user interface you have common tasks. Of late, with ajax, overlays|dialogs|lightboxes have become common place. Usually developers will use these to replace their `alerts`, `confirms` and leave it at that. But what happens when a user does something and they need to be told “Hey, I got that and it was all ok”. So you simply make an `alert` and let them know. But then you have created this thing that they must read, click and then move on. Add that up, and a user that is moving right along, may have to do 10 clicks a minute extra. Or better yet, daily tasks are now incorporating clicks that are basically pointless. A better solutions is to open up a notification, not unlike what is found in OSX, Gnome and Windows. I’m talking about those little rounded popups that show up in some corner and then disappear. Those… are notifications, and have been missing from most websites that really need them.

So now you know what I wanted. A good looking notification system that is robust, adaptive, lightweightish, easy to work with, etc, etc. Well, I couldn’t find that. I did find mainly two that are out there, jGrowl and Gritter. Both are Okay, but I run into issues with both of them whenever I’m coding. Namely, what if I want multiple notification areas? That shouldn’t be that hard, but it becomes a nightmare to edit and maintain their code. Also, what if I miss the notification (getting coffee), how can I get it back? Finally, why is it so difficult to change how these dang things look! So I put my foot down and decided, “I will go it alone on this one”. I rolled up my sleeves and put my knowledge together to form a better notification plugin. I’m calling it “notify”, and I think it will quickly become a better platform for notifications.

I have a few things that I have been focused on:

Multiple notification spots (middle, top-left, unlimited with css)
Simple default notifications, completely customizable with options
Support for Class A browsers minus IE6, with hacks later to work it into IE6
Notification history manager, along with stickyness, and missed notices handling

The list goes on from there. It’s probably best to just play with the code, for now, it’s very raw, I will probably host a page on http://alldorks.com/ for it soon, along with a version control system to get the code from. In any case, enjoy!

View the Demo Page, code is in the page

Geedew going through some changes

drew — Tue, 02 Jun 2009 05:03:30 +0000

So I have finally been able to spend some time on one of my own sites! Hurray for me right? For the time being, you may be seeing some weird illusions in the design… and you will notice that some (…)

Read the rest of this entry »

Perfecting the Linux User Desktop

drew — Sun, 08 Mar 2009 07:46:02 +0000

The linux desktop over the years has been a large struggle for many users. I hear many complaints from people that have ‘tried’ linux out and they seem to all come to the conclusion that it is difficult or even impossible to use. The unfortunate part about most of these complaints, is that they are reiterating something they read 10 years ago, or something their friend who knows computers becaues he is a ‘gamer’ told him so.

You can also jump right to the gallery to just view the images.
Personally, I prefer Linux. In the past few years I have travelled through many different distributions. Lately (past year or so), I have solely worked with the fastly becoming forerunner, Ubuntu. Power linux users can complain all that they want about how Ubuntu is fancying the wrong crowd, but the simple fact is that if Ubuntu wasn’t doing the things they are doing, we wouldn’t have the incredible developements that Linux distributions now offer. To put some fuel for the fire about how Linux is not usable, or that it is simply not capable of being the powerhouse that real users know it can be, I wanted to walk through my setup.

When nothing is brought up or running

This is my Desktop when I have nothing open. I have 6 virtual desktops… meaning I can have up to 6 `windows` with stuff in them. I can switch between them by either dragging something to another page, or by using ctrl+alt+ left|right|up|down. So how is this usable, where’s the menu? Well, for one, it’s a touch screen (yes it works quite well) laptop (x61t) that has a 1024*768 resolution. So I need realestate, so that is what is the deciding factor in my choices. The menu is on the left, just moving the mouse to the left side of the screen shows it.

The Ubuntu menu

As you can see it’s all there. But I rarely ever use it. Usually , I just hit command+space which brings up my GnomeDo options.

Gnome Do 's native functionality; searching.

So as I type, it highlight in blue… and it has some amazing plugins! Sometimes I need a quick mouse menu… like when I’m browsing… for that moving my mouse to the bottom of the page solves this with GnomeDo’s Docky feature.

This is the settings menu for Docky.

So Docky is good… and looks good, but sometimes I just need some space for things that I generally need from time to time…. for this I have my screenlets. A quick press of f9 will bring them up… sending everything to monochrome behind.

A good view of the Screenlets overlay

Notice… Pidgin, Terminal, another Funky clock, Date, the Current moon, Uptime, Battery, and Places. Over time I’m sure I will add more… Still looking for a killer calculator. So now that I have my machine on and running, I need some music.

Excellent Linux media player with a great skin.

Bring in Songbird. yes this is an actual screenshot of my current playlist. It’s very slick, and easy to use and understand. Now that I have my music up, lets fire up some programming tool.

Excellent Ubuntu programming program; Geany

I love Geany. It’s very easy to use, and it’s completly packed with autocompletion, etc. Notice how it handles all the language, and allows me to set a dark theme. Once again, pay attention to the realestate usage… I use the entire screen.

Sometimes I have small windows open. Ubuntu handles this well.. take a look at what happens when I have more than one open, notice how the previous clicked windows fade out for better attention getting.

Making sure that the other windows fade so that the one you are on gains best focus

Sometimes though… I have things on other virtual displays that I need… and a simple alt+tab won’t get to them. For those I do ctrl+command+space… and wha-laa

Easy window grabbing by putting them all up together.

So what about this Vista I keep seeing… you mean this vista?

The start menu when running Vista in seamless mode.

That can run all these `Windows` *ick* programs on my desktop?

Vista programs running on the Ubuntu desktop; via Virtualbox

There is a lot to offer in such a free package of software eh. It seems that it handles quite alot of ‘usable’ features. Things people never imaged they could have for just a download.

Things like pen recognition and pressure recognition…

Pen input, pressure sensitivity, shape recognizer

And it’s amazing what firefox can look like…

Saving real estate by going full screen with firefox

I think I’ve shown my point, that linux doesn’t have to be all drab, it can be pretty slick too.

and I will leave you with my idle screen… Rain

Neat desktop effects, this is the raining effect.