Archive for May, 2009

Buttons: Part 2

Saturday, May 30th, 2009

I guess I was younger, back when I made my first set of buttons. I went back to them today, and found that they didn’t work in other browsers. Also, I wanted to see if I could make them with HTML (seems like my latest craze).

Webkit is stuffed full of strange and amazing tags that let you set background gradients, text shadows, rounded corners, rotations, and pretty much anything else you could want. It’s missing outline-radius, though, which meant I had to use two divs to create the button I had designed in Paint Shop Pro. And a span. But that’s all!
It had two borders, each with a small amount of radius, a linear gradient background, :target tags so it looks like you click it, text shadow to get the 3D appearance, and whole bunch of regular old CSS2 and CSS1.

When I was done, however, I realized that, while it still worked in other browsers, there was no background. Yet again, I had made something that was only viewable in webkit.
I tossed the gradients from my image buttons into another image and used that as a background for everything not-webkit, but there’s a bit of white sticking out of the bottom. Things just aren’t lining up the same in every browser, which is a pain to work with. I’ve never really needed to worry about 0.02em before today. It turns out that’s a fair amount.

Anyway, I’ve got the newer version here for your perusal.
(As if I’m submitting it for your approval, or something.)
As I said before, it looks best in Chrome or Safari. The little font-changing button doesn’t seem to work in Firefox, for little or no reason. It looks stupid in IE7 and lower, because there’s no :focus selector, which means it’s not really a button.

What am I going to do with it, now? I saw some great article about progressive enhancement that laid out about five images beside eachother, and each one showed a more feature-rich page in a different browser. In that light, I think I’ll try my hand at making some sort of tab that turns into a great-looking button when you view it in a more advanced browser.
It appears Firefox lacks support for things Webkit and Opera have, like text shadows. 3.5 is going to be an important release.

Also, I’ve noticed, lately, that I refer to Firefox, Opera, and Webkit, because it seems a bit redundant to mention both Safari AND Chrome when talking about rendering. I’ll talk about one or the other when it’s about browser features (like how I’m jealous of Safari’s document inspector), but otherwise I’ll just refer to the Webkit engine.

So this whole day has been an exercise in jQuery. I’m trying to find out how to get certain elements from the context array (whatever it’s called). It seems .get() doesn’t allow things like the .text() tag or the .html() tag. Maybe if I wrapped that in another jQuery object…

HTML5 Video

Thursday, May 28th, 2009

I’m not exactly strong at javascript, but I spent the last hour picking apart the YouTube HTML5 <Video> test to figure out just what was needed to get the video to play. It turns out it’s not as simple as the put-it-in-and-go of <img> tags; it requires a kickstart with javascript. I whittled away at the HTML file and the javascript file until I was left with the following lines:

<body onLoad=”document.getElementById(‘vid’).play();”>
<video id=”vid” src=”vid.mp4″ />

That can fit in a twitter, so it’s not too much.

Oh, god, that’s going to become a new measurement:
“Hey, how long is that story you wrote?”
“Oh, about a hundred twitters.”

At any rate, toss the above code into an blank text file, rename it to .htm, and open it in Safari 4 or Chrome 3 or whatever else has <video> support.
(Beware a quote that becomes a question mark. I think wordpress does something funky and makes one of those good-looking quotes that doesn’t translate well to ANSI.)

As a final service, to anyone who tries to talk about html tags in forums and has the forum eat the tags, you need to type them like this:
&lt; becomes <
&gt; becomes >
&amp; becomes &
So to write <video>, you actually type in &lt;video&gt;

It looks like the code is fickle, so things I was trying before weren’t working. The following code runs a movie:
<video onClick=”;” src=”vid.mp4″ />

I like to use the following:
<video onMouseOver=”;” onClick=”this.pause();” src=”vid.mp4″ />

Another thing I’ll mention is that I’m referencing an mp4 video, which is a proprietary codec. Theora is an open-source codec that seeks to replace it.

Google Wave

Thursday, May 28th, 2009

Google has apparently remade email as if it was created today, rather than however many years ago.

It’s a bit like email, but more friendly toward pictures and video, and shared between a group. The email is updated in real-time, which makes it rather similar to a messenger program.

It sounds exciting. I can see it becoming as popular as Google Maps.


Thursday, May 28th, 2009

Like a connoisseur regarding the tender morsels on his plate and allowing the fruitful aromas to rise to his nose before taking the first bite, so have I tenderly breathed in (through my ears!) the chatter surrounding Twitter.

And like that connoisseur, I’ve built up a sort of expectation around what I expect from Twitter, before I’ve even tweeted my first.
I’ve decided that it’s best to follow as many people as possible; people you want to become closer to, or friends you want to keep up with. It cannot be a constant stream (a la MSN Messenger), especially with a couple thousand people tweeting all at once, but it should auto-update at some rate. I’ve likened it, recently, to standing in a room with all those you’re following surrounding you. They all have their own circles, and you might catch the odd half-conversation, but it’s not completely engaging. You can do as you wish, and then tune in later. You’ll end up dropping into the middle of conversations, and it really doesn’t matter what was said before.
In this way, Twitter is (or would be, assuming my view is absolute) fundamentally different from every other social media.

I don’t know where I’m going with this.
Long story short, I realized my twitter page had a minimum width and no way to change the styles, beyond changing the background colours and image. So I decided to try my hand at an ajax application.
For some reason, it seems I need to submit my username and password to access my feed. I managed to get everything working with jQuery, but I was getting parsererrors when I tried getting the document from the site (worked fine on a local copy). Some other guy in some forum somewhere had a similar problem, but it seems he had narrowed it down to domain somethings, couldn’t find a way around it, and went off to something else.
I gave up on that one and looked on the great wide web for some help. Someone had made a jQuery plugin that basically just created a bit of a presentation skeleton, grabbed a couple files from Twitter, and inserted those into the skeleton to display your twitter feed on your blog. I deleted pretty much everything and managed to find that some sort of ‘blogger.js’ file is what did the magic (it took the raw stream and grabbed only the text and time of your own posts). I changed the source URL a bit to make it my friends’ feeds, and then I altered the HTML in the blogger.js to add in images and some floats. Then I made an application shortcut with Google Gears, so I get a great little 100px-wide strip with everyone’s icon, name, and message, along with a ‘xx seconds/minutes/hours ago’.
Much better.

I need to learn regexps.

Complete (Un)Success!

Wednesday, May 27th, 2009

I’ve been playing around with CSS3, lately.
One very specific thing I do is make images that are a bit larger than they appear on my screen, because I know people are going to set their text sizes differently. Another thing I do is scale things depending on width or such, so that everything fits the best it can.

With today’s background-images, the image is rendered at 100% zoom even if you want it in a smaller box. That means I need to put images in my markup, or at least it means I can’t just switch them out using only CSS.

This is where CSS3 comes in: Konqueror, Opera, Safari, and Chrome can set background-images to specific widths and heights. I just set visibility:hidden on my old image, and copied the width and height to my CSS background-image (in this case, background-size:100% auto). Voila!

If you’ve visited using Webkit or Gecko, you’ll notice that I have rounded corners. That means the corners are square for Opera, Konqueror, all IE versions, and whatever else. This CSS image replacement doesn’t work in Firefox or IE (strange how Firefox is missing support on it), which makes it look terrible in those browsers. It’s not something that you could put out publicly.
Altogether, this means my page only renders correctly in Webkit. That’s about… 5% of the total market?

I guess I’ll be stuck hacking up some PHP for my page bodies. For those of you who want to see my simple little session-switched thing, you can visit Cozy Cabbage, then put a ?grey in the address bar, and then ?green to switch back.

System Requirements

Tuesday, May 26th, 2009

I recently wondered what the system requirements for Chrome were, (can it be used on those older machines, in place of things like IE6/IE7 or FF2?) so I searched it up on Google. According to Google itself:

Google Chrome is currently available for Windows XP with Service Pack 2 or later and Windows Vista. Download Google Chrome and try it today.

Okay, and…? CPU? RAM? Hard-drive?

Firefox, meanwhile, puts it like this:

Operating Systems
Windows 2000
Windows Vista
Minimum Hardware
Pentium 233 MHz (Recommended: Pentium 500MHz or greater)
64 MB RAM (Recommended: 128 MB RAM or greater)
52 MB hard drive space
Operating Systems
Mac OS X 10.4 and later
Minimum Hardware
Macintosh computer with an Intel x86 or PowerPC G3, G4, or G5 processor
128 MB RAM (Recommended: 256 MB RAM or greater)
200 MB hard drive space

While looking around, I found this unanswered question on or similar: “How do you center a div in Google Chrome?”

Feeds, and how to find them

Monday, May 25th, 2009

I’m not sure about all of you, but a good number of you must follow the feed from a bunch of different blogs. When a new article/whatever comes up in my feed reader, I’ll follow the link to open it up in my browser to read it on their site.

There are a lot of blogs out there, and just as many different ways of putting a link to one’s feed. Historically, it’s been in a predictable location near the top or bottom of the page; however, you get some pages where the feed just can’t be found.
Usually, the feeds for good blogs are in good places, so there’s not much problem.

There’s a site called Avalonstar, which I’m sure you’ve heard about. The site has won design awards, so you had better know about them. I was on there a while ago, but I couldn’t, for the life of me, find the link to their feed. After half an hour of searching, I was sure they didn’t have one, and decided that I’d read their more current entries as I stumbled onto their blog (it’s bound to happen).

I came across it again today, with a bit more knowledge under my belt. Here are some simple hacks to get someone’s feed:

And so on. I tried some of those, but none worked. I finally realized that they might have a feedburner account, which isn’t advertised on their site. I searched for it on the feedburner site, and there it was.

So… Moral of the story: Put your feed in an easy-to-see spot. Some people WILL want it, and you might lose them as readers if it’s not available.

Chrome 2.0(.x.x)

Friday, May 22nd, 2009

Chrome 2 is out!
To this day (but no longer!) I’ve been hesitant to point people to Chrome.
“Chrome is great,” I’d say, “but…”
Not only did it have no support for extensions, but it also rendered some things badly. Certain selectors didn’t do quite what they were supposed to, and the big header image at Unstoppable Robot Ninja would turn opaque and grey and really ugly when you hovered over it. Overall, the browser really WAS a 1.0 — it worked, but it had bugs and was lacking all sorts of features.

All fixed! At least, all the ones I was keeping an eye out for are fixed. They also implemented full-screen, which was something I had missed. I had resorted to using IE8 for full-screen, because firefox doesn’t fill the entire screen.
I remember when Chrome didn’t work with Hotmail. I’m not sure if the older version still doesn’t, but 2.0 does (I just tried it).
And on top of that all, they’re starting to get extension support.

So, as of today, Chrome is my official browser-of-choice. If someone needs extentions, I’ll refer them to Firefox, but otherwise I’ll talk about Chrome and how it’s faster and slimmer and simpler.

At the moment, I’m basking in the glory of surfing full-screen on an HD monitor with the zoom set way up to double-size.

IE6 T-Shirt

Thursday, May 21st, 2009

* html * { display:none; // IE6 Fix }
That would go wonderfully on a t-shirt. I think I’m going to get it done.

I originally saw it in a comment on someone’s blog, a month ago. I tried looking for it, but I can’t remember where I saw it.

I’ll have to think up some other funny t-shirt designs, and then start a little online store.

Photo Gallery

Thursday, May 21st, 2009

I just finished more work on the old Atomicat Photo Gallery.
I was working for him last year, basically, at the same time as I was take what was essentially my first every-twenty-years-vacation. I figured I’ve been going to school since I was four or five, and I’ll probably be working until retirement, so I might as well take a year off to do some other stuff.

The site was the first website I’ve ever designed, and went through a couple drastic redesigns. I created the modern logo, which I’d say is fairly decent, and experimented with things like floats and whatever else.
The CSS on that site is disgusting. I didn’t really ‘get’ the id attribute, and so I had classes in every little thing. Extensibility was fairly unneeded, so I would end up creating a little class to do one thing, and then paste that on whichever element needed to do that. The result was something like HTML with half the semantics of HTML. Is <div class=”floatl”> any better than <div style=”float:left”>? It seems I’d completely ruined the core idea behind CSS.

The gallery was something else: Hours upon hours of hand-crafted goodness, as from a seamstress who turns away the sewing machine to make each careful stitch with her own sure hand.
In short, it was a mess. There were eight pages to be taken care of, each with images that had to be named specifically for that page. Any images you wanted to add had to be specially named for yet another page. Each item had to have the name/description engraved in the html, to be passed in an ugly GET variable.
Tonight, I went through the motions of creating the database and putting everything in it. I took every bit of repetition in the gallery and put it in loops. The gallery went from seven pages to one; the page went from eight individual items to two (I could probably turn that to one); and that item or two is loaded in from SQL.

I guess I’ve still got to do tags, but I’m finished for tonight. I’ll have to eventually upgrade the entire site up to my current standards, and then upgrade it again to the standards I’ll have by the time I’m finished.

This is shaping up to be quite a year.