I found this group of icons at the bottom of my Firefox status bar, and it pretty much sums up my thoughts. I've been using GreaseMonkey to help out the team here at work. Small, simple little scripts, that seem to have a huge effect. It's fun to write these little scripts, and it's fun to take on a more "Research and Development" capacity. Maybe one day they will pay me to do that full time. That would be awesome.

Here is my Flickr Toys Flickr Badge.



This totally rules. I wish I could make it say "Pornographer" instead of photographer though.

Just a funny bit of webzen on my own site. Because I haven't yet re-built my music website, it just has 2 simple links. One of those links goes to the Apache directory listing of my music. When Apache does a directory listing, it guesses what each of the files is, and displays an icon. Mp3's get to be music notes, directories are folders, that sort of thing. Now, in the unix world, when a unix system goes horribly pear-shaped, it drops a file called a "core dump". This is a lot like the windows Blue Screen of Death, except a unix machine doesn't make you reboot. It just leaves a file called 'core', and tells you that it is barsted. So when Apache see's a directory called Hardcore, it thinks that this directory is actually one of these 'core' files.

Badges are popular. What are badges? They are the funky little 80 x 15 graphics. They usually exist to point to RSS feeds, or brag about which blogging software is being used, or how valid a given page is. They are most popularly used by bloggers the world over. So today I ran into a link about how to make HTML + CSS only (no image) W3C validated buttons. I thought, why not apply this to badges?

These badges come in two flavours, absolute and relative. The absolute badges are, erm, absolutely sized, and fit within the 80x15 pixel constraints. The relative positioned badges size up and down with the font. There is no 'semantically-null' markup here either, assuming you agree with the proposition that divs can contain semantic meaning, for instance, when they are used as containers.

When you want to use this, give the left and right hrefs their own classes, and style them as you will (different foreground and background colors, etc.).

I think that my choice of fonts is reasonable, but I would love to hear from mac and linux users as to a good choice for a monospace font.

The buttons

Increase and decrease your text size, to see the difference between absolute and relative

Other badges

The code

<style>
.badge
{
    overflow: hidden;
    margin: 3px;
    border: 1px solid #000;
    padding: 1px;
    
    color: #000;
    background-color: #fff;
    font-family: Silkscreen, "Andale Mono", "Lucida Console", "Courier New", Courier, mono;
    font-weight: bold;
}

.badge a
{
    display: block;
    padding: 2px 3px 1px 3px;
    text-decoration: none;
}

a.badgeLeft
{
    float: left;
    
    margin: 0px;
    margin-right: 3px;
    border: 0px solid #fff;
    border-right-width: 1px;

    color: #000;
    background-color: #fff;
    text-decoration: none;
}

a.badgeRight
{
    color: #fff;
    background-color: #000;
}

.badgeRelative
{
    max-width: 11em;
    font-size: xx-small;
}

.badgeAbsolute
{
    max-width: 80px;
    max-height: 15px;
    
    font-size: 7px;
}
</style>

Usage

Here is the basic markup:

<div class="badge badgeRelative">
     <a class="badgeLeft" href="#">???</a>
     <a class="badgeRight" href="#">DEFAULT</a>
</div>

Depending on what you want, you will want to use the badgeRelative or badgeAbsolute class. This will give you:

Then it is just a case of customizing the left and right classes. The best way to do it is to add a class, and style for it, for instance:

<style>
a.s9y
{
    color: #fff;
    background-color: #986;
}

a.power
{
    color: #000;
    background-color: #FEA;
}
</style>
<div class="badge badgeRelative">
    <a class="badgeLeft s9y" href="#">S9y</a>
     <a class="badgeRight power" href="#">POWERED BY</a>
</div>

Which will give you this:

There ya go. Have fun with the code, it's released to the public domain.

The Spriters Resource has an outstanding amount of ripped sprites. There are major sections on here: Nintendo, Sega, Capcom and Square. Man. Retro Amazing Fun. Drool. Drool. Drool.

I don't understand the Rules however. There seems to be this Iron-grip-control over what is essentially (mostly) direct pixel-to-pixel copying of anothers work. Weird.

By jove, I think I am getting better at this icon design thing. Here is a proposal for the S9y Admin section "Entries".

I'll get some feedback on this one, and then take it from there.

I also fixed up the Admin-People Icons.

Old Icon	My Icon	Access Level
		Editor
		Chief Editor
		Administrator

Update: I have tweaked the size of my icons a little, so hopefully they are a little easier to see.

S9y's admin interface has gone through a massive face lift recently, and part of that face lift means more graphics. The default theme seems to be going toward a WinXp Luna theme. Now, Luna icons in general are in this weird limbo of design. Visually, they are quite appealing, but even I can figure out that the color scheme (or lack of it) is bad. The 'scheme' seems to be: 'lets take primary colors, and smash them together! They will work! Trust me!'.

Now, as part of the new S9y Admin look, they have upgraded the 'Manage Users' section, to show icons for each user on your blog, each icon representing an access level (Editor, Chief Editor, and Administrator). The icons that are currently there are your typical bald-msn-guy-with-a-tie user icon that seems to be the in thing now-a-days.

The only problem with this look is that I am not much of a suit-and-tie-guy. In fact, if I were to make a loose generalization about blogs in general (and open source, beta software blogs in particular) I would say they are anything but a suit and tie guy affair (which isn't a bad thing). So I made my own:

Old Icon	My Icon	Access Level
		Editor
		Chief Editor
		Administrator

I figure a beatnik says 'blog' better then suit-n-tie-guy. Also, a beatnik in a black beret is much easier to express in a 7x14 pixel space then cam-whore-girl or unshaven-and-getting-fat-geek. Hopefully the S9y developers dig these icons, and they can go in the next version. If you dig em, feel free to use them. (Released under a Share-Alike, Non-Commerical, By-Attribution CC lience)