SuperSatellite ||

If there is one common truth in web design, it’s that the creation of CSS (Cascading Style Sheets) was a great (and much needed) development that has been butchered in the end by the browser industry. Time and time again we are forced to deal with the inconsistencies that are surfaced when you view layouts in different browsers. One browser renders space above an <h1> differently, another spaces elements of a <form> as if padding were free money. It’s frustrating. It’s irritating. It’s time consuming. And in many cases, the issues can be worked out, but only after tweaking any number of attributes. One would assume the best solution would be an industry standard default rendering scheme. Go ahead and keep reading once you’re done laughing.

There are a number of solutions that web developers use to get around these differences. Most of these involve coding two style sheets that can be selected based on the user’s browser (keep in mind, I am discussing legitmate difference in element positioning, and not the need for certain types of hacks to trick Internet Explorer into rendering an element how it should, although those can be included in a separately coded CSS file as well). That cures the symptom, not the problem. The other involves specifically defining all an elements parameters (or at least the offending ones) as problems occur, a sort of process akin to putting out fires. This is much closer to being on the right road to a solution.

The differences between browsers can prove challenging in even the absolute most basic layouts. Take the two screenshots below, for example. Nothing fancy is being done here, just a little text with a couple headings, and a no-nonsense form tossed in for good measure (and to really screw with things). Overlaying the two renderings brings out just how much difference a little change can make over the course of a page. In the composite, red is Firefox, and blue is Internet Explorer.

In a lot of ways, I am nitpicking here. This is nothing new, and is an issue designers have dealt with for years. It’s no new thing that browser developers have had to choose how much of a margin to put around element X when they write their rendering engine. And most layouts are fluid enough that a little difference in spacing, especially in body text, isn’t going to be even a remote issue. But, for the first time, we actually have some power over this. With CSS, we can force certain behaviors. Or, more specifically, we can force no behaviors.

When you write a spot of CSS, let’s say:

…you are telling the browser exactly how much space to give your heading above and to the left (but leaving yourself open to browser defaults on the bottom and right). Many designers generally do this on demand, as needed for elements as they produce a template. It stands to reason you could set these all to 0, and have nothing to begin with. At this point, I am sure you see where I am going with this. And the primary reason no one writes a zeroed out style sheet to begin with is the amount of work involved, and the risk of missing something. But at some point, we have all sat down and thought about this idea. And luckily, there are programmers out there with more time than us. Yahoo is one that has been kind enough to release a prewritten reset CSS, that zeroes out everything on a document, allowing you to specify each element from scratch.

To include Yahoo’s default CSS, use this link:

Doing so to my test page produces the following composite. “But wait,” you say. “It’s still off!” And yes, you would be right. There is still a tiny amount of built in browser inconsistency that cannot be overridden. In this case it is about 1 pixel worth of height per line, which stacks up, throwing things off further as you go down. But notice the lack of horizontal difference. And as I said before, most all templates are designed to be flexible enough that hopefully that tiny pixel can be absorbed with no ill effects. Elements line up nearly identically now. You can also view Yahoo’s example page for yourself, as well as one done by Rik Lomas from rikrikrik.com. Again, in this composite, red is Firefox, and blue is Internet Explorer.

With that done, you can now build your template’s style sheet on top of the reset, pulling out elements and defining them as you build it, with the assurance that things will render the same. Granted, this does mean you need to address all the elements. In the screenshot above, you’ll notice that the reset CSS removes all formatting, so <h1> will look just like <p> and <strong> will look like <em> and everything will have 0 padding and 0 margins. So if you build everything and forget to define <h2>, when you go to use it one day down the road you’ll notice it looks very…plain. It is work, but it has a high degree of value, especially when you start laying out more complex things like forms, which are notorious about their spacing issues in different browsers (it’s all right for you to hate IE6, don’t worry, we all do).

Below, you can see Yahoo’s reset CSS code. I have included their copyright information in the code, which I recommend you should as well if you intend to use their CSS as the basis for yours. Give credit where it’s due.

That’s all there is to it! Simple no? This also can give you an idea of just how many elements have the potential to vary between browsers, so it warrants a few minutes of your time to just check things out, and make sure everything looks the way you’d like it to. Yahoo has also released two additional reset type tools for fonts and grid elements. Worth looking at if you have a lot of concern about such things in your layout.

This one goes out to those of you that love your music and want to get the most out of it.  You rip your CDs to MP3 (or .ogg for you really geeky types), you own an iPod, you’ve hooked your computer up to your stereo, and back it all up to an external hard drive for those travel scenarios.  Ubiquitous.  That is the word for the day.  Despite all of your efforts, you still fall short.  You don’t want to wear an iPod at work.  The external hard drive is great for planned trips to a friend’s house, but does little if a friend wants to just see if you have a single song.  Let me be clear that this is not a review.  I’m not going to dig in to all the different features of a bunch of different web applications, because I’ll do nothing but a disservice to the ones I’m not as familiar with.  Instead, this is simply my journey and thoughts on the matter of media streaming through a web page.

For a long time I had a relatively simple solution to all this that worked a bit of all right.  Of course, it involved setting up my own server.  I pulled out an old XP box I had lying around, hooked it up to my router, set up port forwarding, and created a simple FTP (File Transfer Protocol) server with FileZilla.  I kept an archive of my music library on it that was then tied to the FTP.  Now, this worked for file sharing, and making my stuff accessible essentially wherever I was, provided I wanted to download the entire song before listening to it.  Of course, it also allowed for usage beyond music.  It became obvious that the potential for the server warranted a little more investment.  I went by No-IP.com and set up a domain name with dynamic DNS (Domain Name Service) monitoring.  I did a port 80 redirect (Cox blocks incoming port 80 requests), and just like that I had a web server (after installing a WAMP (Windows, Apache, MySQL, PHP), of course.  I chose Apache2Triad.).  Granted, it was running Windows XP on a residential cable connection, but it did work alright.

So, with the framework all in place, I set out to take the next step.  I wanted to install a nice web interface to access my MP3s through, something that was simple, functional, and could be used by those friends of mine who couldn’t tell FTP from IRS (Internal Revenue Service).  I readily admit my programming skills simply weren’t up to the task for something like that.  Fortunately, the field of competitive products in the OSS arena is small.  Keep in mind, the key to all of this is having your own server.  If you rent hosting from a company, you can indeed install this, and you can share anything you put on that server media-wise.  But if you are like me, you have way too many files to put on something like that, and the uploading time alone would kill you.

A friend of mine turned me on to a program called Ampache.  It’s rather clean looking, and offers a lot of features.  Certainly viable for a number of uses.  The thing I didn’t like about it was its heavy reliance on ID3 tags, something many of you know cannot always be relied on or trusted.  Going in to list songs, the interface could very suddenly become quite cluttered looking.  Granted, it dished out a lot of information about the songs, but I felt the interface started falling apart a little there.  So, while not perfect, it was a contender.  It offered all the other features I was looking for, like multi-user support and playlists.

Normally, third time is a charm.  In my case, the second hit I got was on a piece of software called kPlaylist.  An application built on a single file, it just needs a database to access and it’s ready to go.  The most immediate thing that sold me on it was its file interface.  kPlaylist gives the user an Explorer like file tree to use to browse for music.  This fit perfectly because I already sort my music into a nice alphabetical structure.  Like Ampache, it had full support for multiple users, playlists (both public and private), and it kept track of what was popular, new, and currently playing.  It also has an improved streaming engine for those on Linux servers.  Sadly, I am currently missing out on that for the time being until I kill XP on the server in favor of Linux.  Additionally, you can also enable features like batch downloading for later listening (at this time, batch uploading is a feature for the future.  Not a big deal, since I upload my media through my network anyway).  So, I was sold.  I downloaded, installed, and configured it and have never needed to look back.

To give you a quick idea, I am currently supporting about a dozen users.  I believe that there has never been more than three people on at any given time.  With three people streaming, there isn’t anything to rebuke as far as stream quality goes.  If you want a comparison, here’s an idea of what my internet connection is like:

There are a couple other systems that I found out about after the fact.  uPHP (which didn’t have a demo available at this time), and Jinzora.  I have no first hand experience with these though, so you’re on your own.  Jinzora does have a demo up though, so go plug away on it if you like.  For now, I fully throw my support behind kPlaylist.  If it fits your needs, it won’t let you down.

In the end, Ampache is pretty solid if you are really, and I mean really, anal retentive about ID3 tags.  I simply cannot be that confident in myself.  kPlaylist offers the simplest, most intuitive interface I have seen.  Plus, it’s display window will tailor itself to your file structure, so no matter what, you know it will conform to how you sort things.  It will still scan ID3 tags, so if you prefer going that route, you still can.  It will also recognize album art, which is just pretty.  I would love to hear about any alternatives any readers might be familiar with that you like.