Posts Tagged ‘jQuery’

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…


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.