IkimashoZ --| Matt Buscemi's Personal Webspace |--

Serving Up CSS Mayhem

January 14th, 2010 by IkimashoZ

My current job has me working with the lighttpd webserver instead of Apache, which I'm much more familiar with. Today I ran into an interesting quirk that I thought I'd take the time to share since it had me scratching my head for quite awhile.

I discovered, to my dismay, that adding a doctype to my index.php file caused my CSS files not to load in Google Chrome, Mozilla Firefox and Apple Safari. Opera and Internet Explorer 8 would load the CSS files appropriately regardless of the doctype, but much to my dismay, IE would display the site correctly only with the doctype included. Without it, it would subject my site to the absolutely horrendous Microsoft-developed box model, obliterating my beautiful design.

Eventually, I discovered, the problem lay with the server, not my code. Specifically, lighttpd was serving up my CSS files with the wrong mime type.

A mime type is a bit of metadata that gets carried along with information that travels over the internet that tells what kind of information is being sent. The problem was that lighttpd did not have an entry in its configuration file for CSS files. What type of information was it defaulting to, you ask? "text/html". Apparently, Internet Explorer and Opera don't care if your CSS files come through with the wrong mime type, but Chrome, Firefox and Safari do.

Fixing the problem was as simple as finding a file on the server at etc/mime.types.conf and adding this line:

".css" => "text/css",

I restarted the server, and problem solved! I've never had this problem with Apache. Likely, Apache comes preconfigured with a mime type for CSS files. Now don't get me wrong. This isn't a rant against lighttpd. I'm glad I got experience with this server. It's very, very lightweight, and hence very useful on certain kinds of hardware.

It was not, however, easy to locate the source of this problem. Google search, which normally turns up a solution to my questions right away, was not so helpful this time around. The big tip-off actually came from when I tried to expand my CSS file under the HTML tab in Firebug. Hopefully, this post will be able to find its way to someone with a similar issue.

Posted in Web Design | No Comments »

Removing Curly Quotes from Wordpress

January 1st, 2010 by IkimashoZ

I was quite surprised when I first began publishing my WebDevTutorial to WordPress that all my quotation marks were magically becoming curly. You know, normal quotes looks like this: ". This is what I typed into Wordpress, but what I got were these: “ ”. This surprised and fascinated me. Then I started looking at the code samples in my book and suddenly surprise and fascination turned into annoyance.

However, a quick Google search turned up this nice post. Basically, the solution to this problem lies in turning off the WordPress filter that changes straight quotes to curly quotes automatically when the page is rendered. You just add these lines of code to your theme's functions.php file:

//remove curly quotes

remove_filter('the_title', 'wptexturize');

remove_filter('the_content', 'wptexturize');

remove_filter('the_excerpt', 'wptexturize');

remove_filter('comment_text', 'wptexturize');

So now, you can safely copy and paste code from my book. This was a nice find. Happy New Year everyone!

Posted in WordPress | No Comments »

Discovering Ubuntu's Cairo Dock

December 31st, 2009 by IkimashoZ

I'm not a big fan of Apple products. I had a particularly bad experience with an iPod I bought for my trip to Thailand in 2008. While I have to admit, it was nice to have something I could watch American news broadcasts and TV on in my free time, the user interface was so poorly designed and implemented that I decided to sell it once I got back to Hawaii.

Despite my firm stance that Apple interfaces are often good ideas that don't end up scaling very well, I do happen to like Apple's concept of the dock. By default, Ubuntu comes installed with two panels, one at the top of the screen and one at the bottom.

Example of the Ubuntu 9.10 Desktop

The one at the top has drop-down menus for your applications and utilities and also the date, time, network status, volume, etc. The one at the bottom behaves like your standard Windows taskbar. Each running program is represented by a horizontal bar with the application's logo and some kind of title. Apple's dock concept is, in my opinion, superior.

Example of an Apple OSX Desktop with a Dock

On the dock, each application is represented solely by its icon. The icons grow larger given their proximity to the mouse. They also remain on the dock regardless of whether or not the application is currently open. If it is open, a light below the icon tells you as much.

While Ubuntu doesn't come with any pre-installed dock, there are three that I've tried. Here's my experience with all three:

Avant Window Navigator — I honestly don't have the most up-to-date information on Avant. I first used this utility about six months ago, so my information may be out of date. I installed Avant Window Navigator in Ubuntu 9.04 from the "Add/Remove Software" tool. In Ubuntu 9.10 it's still available. The user interface was very intuitive. It was easy to get AWN to look the way I wanted it to. I ran into some problems with screen "real estate." AWN wanted to reserve a place at the bottom of the screen for itself. I found the "invisible boundary this created for maximized windows off-putting. It didn't feel right to have my desktop background showing through the dock after maximizing a window. The option existed to nix the dock's reserved space, but then the problem became that the dock tools would sometimes be on top of some useful tool at the bottom of my maximized window. Frustrating indeed. In the end, this issue, combined with a pretty heavy memory overhead (at least by Linux standards) made me give up AWN.
GnomeDo's "Docky" Mode — I had already been using GnomeDo for awhile when I gave up AWN. GnomeDo allows you to quickly find files, launch applications, and much more with one simple hotkey combination: Super+Space. It remembers what programs and files you open, so while you may have to type "f-i-r-e" the first time to get Firefox, by the fifth or sixth time, it'll be the first option under "f". When I began to search for a new dock, I was surprised to discover that the utility I'd been using for months in "Classic" mode also contained a dock toolbar mode called "Docky". You simply go into the preferences for GnomeDo, found under the arrow menu after opening the program with Super+Space, and switch modes. The dock will appear at the bottom of the screen. From here, it's as easy as dragging and dropping items from the Applications menu onto your dock. Even better, there's an "intellihide" feature that will hide the dock automatically if any window moves over the dock area. The dock will reappear despite that if you move your mouse to the bottom of the screen. Very clever. Low memory footprint too. Not much greater than what GnomeDo was already using in Classic mode (and that was very minimal). GnomeDo is also available to install from the Ubuntu Software Center in version 9.10.
Cairo Dock — I discovered Cairo Dock two days ago. It is much like Docky, except with slighly higher resource consumption than Docky. However, the trade-off was worth it. For those extra resources, you get oodles of customization options, screenlets (which aren't my thing, but others many like them), dock plugins, themability and community themes availability and all the same functionality as Docky. My one complaint has to be that Cairo will hide my dock even when a window isn't over the dock area. The only way to make the dock visible is to move the mouse pointer down to the bottom of the screen. However, this isn't quite such a big deal. The dock doesn't really need to be there when my mouse isn't at the bottom the screen. It just needs to be there when I want it there and hidden at other times.

I think eventually Ubuntu may end up incorporating something like this into the default Ubuntu build. There still seems to be a bit of redundancy. The dock bar and GnomeDo together basically render my applications menu redundant — so long as I can remember the name of the application I want to run! I think someone will come up with a smart, intuitive and sexy way of putting this all together in the future. Until then, I'll be sticking with my dock.

Posted in Ubuntu | No Comments »

Opacity with jQuery

December 30th, 2009 by IkimashoZ

Microsoft Internet Explorer is a constant thorn in my side as a web developer. Although it's come along way in terms of being standards compliant, IE is still woefully lagging behind other browsers, even two and three year-old versions of, say, Mozilla Firefox.

The css "opacity" option is a common sticking point for me. It's part of CSS3, which technically hasn't been released yet. All browsers except IE implement it just fine. The idea is that you can set the transparency of an object by giving it a decimal number from 0 to 1, where 0 is completely transparent and 1 is completely opaque. The vertical and horizontal bars used in the design of this site demonstrate this effect. If they were opaque, the intersection of colors would not create the kind of style I tried to achieve.

Internet Explorer does not do opacity. Whereas all other browsers will accept

{ opacity: 0.5; }

for example, Microsoft wants us to use the horribly inelegant

{ filter: alpha(opacity=50); }

where the value varies from 0 to 100 instead of 0 to 1.

When creating this site, I discovered something interesting. Microsoft's filter has never validated at W3School's CSS validation tool. I've known that for awhile. But, what I didn't know was, neither does opacity! CSS3, being technically unreleased, though in progress for many years already, will not validate, since the current validation engine assumes CSS2.

jQuery came to my rescue of course. I decided that, if I couldn't put opacity in my stylesheet, I'd put it in my Javascript. Can't affect standards compliance there, and I still get my effect, right? Well, lo and behold, opening this site in Internet Explorer will reveal that telling jQuery to change "opacity" also achieves the correct implementation in Internet Explorer!

//set the opacity of main layout items

$("#horiz-stripe, #vert-stripe").css({ opacity: 0.4 });

$("#titletext-dropshadow").css({ opacity: 0.85 });

$("#horiz-stripe2").css({ opacity: 0.2 });

I'm continually amazed at jQuery. It's truly a remarkable piece of technology and it's no wonder that so many different professional websites have picked it up, which you can see on the jQuery homepage.

Posted in Web Design, jQuery | No Comments »

Still Working Out the Kinks

December 29th, 2009 by IkimashoZ

I'm very carefully crafting this site. I'm still working out a lot of the CSS and styles. I'm going to blog about a pretty wide variety of things here — web design, jQuery, Ubuntu, my exciting life trying to find work, etc.

You've probably noticed the subsections too. Here's a quick rundown:

Portfolio - Where I show off my web design work. I've got a few projects that I'd like to put here for starters. May help me with that whole finding a job thing.
WebDevTutorial - I like teaching. I think it'd be fun to write a computer book for people who want to learn modern web design from scratch. Except, unlike a paper book, I'd script a bunch of interactive exercises and include them inline with the text. The first chapter's currently up. No exercises yet though.
About Me - Pretty self-explanatory.

More to come!

Posted in The Site | No Comments »