I've Been Thinking About This…

Not my usual type of post, but here’s a dabbleance with HTML and CSS…

I was building a mockup web site for the church I attend. One of the design decisions was to use a very dark – as black as possible – background, and while I don’t like light text on a dark background (since it’s harder to read as you approach geezerdom), we’re a church with a relatively low average age, so it would work there.

So … near-black background, white or very light text. And I thought maybe a third color for the borders and other bits of styling, such as the bullets in lists. Orange on black is a good standout color.

It’s not so easy in CSS to get text in one color and list bullets in another – it’s one of the things I suspect never occurred to the committees. What you want to be able to do is something like:

1.
2.
3.

<style>
li  { color: white;  bullet-color: orange; }
</style>

… but that property keyword doesn’t exist. And when the question comes up on the web, it doesn’t seem to be something the forum gurus are too up on either – at various different sites one simply said no, you can’t do it; another said use an image instead, and a third suggested enclosing the text in the list in a span like this:

1.
2.
3.
4.
5.

<ul>
  <li>
    <span>text</span>
  </li>
</ul>

Now the idea behind CSS was that it manage style in place of HTML, not that it require more HTML to manage the limitations of CSS. So I had a think, and here’s how you do it:

In the CSS, turn off the bullet. Then add the ‘:before’ pseudo class to the li statement with the spiffy color and a snazzy bullet character that you pulled from your favorite HTML entity table (here’s a site with them all). And you get something like this:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<style>
li      { margin-left: 1em; list-style-type: none; }
li:before   { color: orange; content: "\25A0 \0020"; }
</style>

<stuff> … </stuff>

<ul>
<li>... for <a href="#" rel="external">stuff</a> to click on</li>
<li>Something you don’t click on</li>
</ul>

Don’t forget to add your Doctype at the front for IE or it won’t work.

Demo and code here.

   Send article as PDF   

I was writing a note to someone just now in Microsoft Word, and typed the words “God’s grace” which the spell check didn’t like. It wanted either “God’s graces” or “God’s Grace” instead. Very cool – and absolutely correct, but who’d a thunk?

   Send article as PDF   

I wanted to play around a bit with Sparklines – cool little in-line charts and graphs that run off the jQuery library base. I’d found them several months ago in my regular trawling through the ‘net. So I took some of the CDC stats on N1H1 (aka swine flu) that they Twitter each day, and put this and this little Sparkline together. These are running on this page.

I also liked the Dow Jones Sparkline that they had on the screen, so I wrote a PHP server to get the closing prices from Yahoo! for the last 4 weeks and pass them to a Dow chart like theirs.

Unfortunately WordPress doesn’t let me include server-side scripting, so here’s a screen-capture of it.

I must say I’m pretty chuffed with it all…

[Updated this page 5/22/09]

   Send article as PDF   

I’ve completed the next step on the votd Twitterbot list – the ability to retweet verses to others. Now when you Twitter

@votd John 3:16 esv > @tom, @dick, @harry

votd will look up the verse, send the original back to you, and retweet it on to the addresses you listed.

See the help page here.

   Send article as PDF   

It’s been a while since I last blogged, because I’ve been building a free Twitterbot to serve the text of Scripture verses over Twitter – something I’ve wanted to do for nearly a year. It’s finished now; I’ll get into the technical aspects in another post, perhaps, but for this post I want to tell about how to use it. The basic idea is simple – send a Twitter message containing the reference to the ‘bot (whose name is ‘votd’) and it will reply with the text.

Step 1 is being on Twitter. If you’re not a Twitterer yet, this step is fairly easy…go to http://Twitter.com and sign up. That’s all.

Step 2 is to type in the reference like this:

@votd john 11:35

After a while votd will wake up (it does this once a minute), see your message, interpret it, reply to it, and you’ll see this come back on your Twitter client:

John 11:35 - Jesus wept. (KJV)

In its basic form, it’s really that simple.

Verses that are longer than 140 characters (Twitter’s message limit) are wrapped into 2 (or 3, 4, 5 or even 6) messages.

By connecting to the Blue Letter Bible’s site and using the interface they provide to other sites, their translations are also available. If you want to read your verse in Latin, try

@votd john 11:35 vul

And it will come back with the Vulgate translation – BLB has 14 versions that they make available this way (besides the KJV which I have on my own site).

If you want to set a different version to be your default translation, type this:

@votd pref rsv

… then when you send in a verse request without a version, votd will use the RSV.

You can also subscribe to the automatic transmission of the verse of the day (that’s why it’s called ‘votd’, after all!) this way:

@votd pref votd=on

And, starting that night after midnight EST, votd will Twitter you the verse of the day, each day, until you unsubscribe.

Finally, if you’re not sure of your settings, or you want more detailed help, send this:

@votd ?

And votd will tell you what your defaults are and where the help page is.

Pretty nifty, no?

   Send article as PDF   

Here’s another group of Twitter tools – this one for bloggers:

Twitter Username – by TechDebug/Lantrix

This converts any Twitter ‘@username’ string on your blog post to a link to ‘http://Twitter.com/username’, so that readers can follow that user or read their feed. This is running here, (temporarily, and will probably be deactivated because of the …)

Downside: It only works in the main post – not on comments or in the sidebar, which is disappointing – why wouldn’t the blogger want all occurrences identified and linked?

Twitip-ID – by Andy Bailey

This WP tool allows the blogger to add a Twitter field to the comment form, so the commenter can be reached that way.

Downside: Ever since WP 2.7, comments are not built by the code inside the comments.php file, so the documentation needs to be upgraded.

TwitterSplit and TwitterSplitter

When you twitter an interesting link to something, you send that URL as <your URL?interesting link>. When a user clicks on the URL you sent, it shows the interesting link in a frame with your banner on top.

Downside: Since I hate iframes and see it as just another cheap advertising trick, I can’t really recommend this one. But it’s a clever idea.

Twittar

Some people have a Gravatar – an icon that many types of blog engines support. For those that don’t have a Gravatar but do have Twitter, this plug-in pulls the avatar from their Twitter account (actually, it gives precedence to the Twitter avatar).

Downsides: Again, since WP 2.7, comments are not built by the code inside the comments.php file, so the documentation needs to be upgraded. Also, according to the comments on the site, it apparently loads slowly.

Bird Feeder – by Andrew Jaswa

When TwitterUpdater died (when I switched to WP 2.7), I found this plugin to send a Twitter message whenever a new post was published. Rock solid – does just one thing very well.

Downside (minimal): Doesn’t deal with all the events that TwitterUpdater did, but then I don’t use the other events either.

Tweetbacks – by Dan Zarrella

This tool is in beta right now. It works a bit like a pingback or traceback for your blog. Install it, and when someone references your URL in their Twitter, that Twitter will show up above your comment section.

Downside: The js code is hosted on Dan’s site, and things are getting very slow. So…

Quak Back – by Jeremy Hilton

…took the original code, improved the speed and made it run on the blog’s server. Then…

TweetSuite – by Dan Zarella

… turns the TweetBacks concept into server-side calls, along with a raft of other Twitter tools. An excellent concept, which I suspect will be improved and expanded over the next month or so. This one is now running on this blog – I’ve turned off Bird Feeder since that functionality is included here.

There’s a large listing of other Twitter clients and applications here (it’s not complete – it doesn’t have some of the ones in this post, for instance, but it’s a lot more complete than my little list!), so I won’t try building anymore lists – although if I find something I really love, I may document it at some time.

   Send article as PDF