Posts Tagged ‘CSS’

Filter

By Month
By Kind

Wherein I Discuss Layout Decisions

Feb
14

Yesterday, as I[1] sat nursing an enormous mug of tea, I was forced, nay, compelled to think of the myriad of reasons I don’t update this blog on a regular (or frequent) basis. If I had a long list of personal commitments, now would be an appropriate time to cite it. However, despite my student status and freelance employment, I realistically have no such list. As you’ll see, though, I think I have an excuse reason.

This blog has gone through a series of layouts and designs. It began with a very simple, narrow single-column layout, which then changed to a red-and-white scheme, which was then followed up with a design inspired by print. The most recent layout[2] emphasized photography and graphics to try to create a compelling atmosphere. Which is a problem in of itself, and created another issue.

I realized that the graphics created a picture book vibe, where the text was secondary to the presentation. While I don’t claim to be Oscar Wilde, I believe I am a competent-enough writer that the words may speak for themselves. The second problem was that each blog post was significant. Each post occupied a large area onscreen, with a custom graphic and a serif font. It took blogging too seriously, causing I, your humble writer, to take it too seriously. I blame the design and layout.

Therefore, it gives me great pleasure to present the latest incarnation, which I intend to keep for a very long time. It is undeniably the most minimal, the most basic and the most pointed design I’ve ever created. There are three major enhancements.

The first stems directly from the minimal design. As I don’t have to fill up a large amount of space, nor fill both columns, nor create a custom graphic, I am freer to post at will. Posts can be far shorter (or longer). The second enhancement is the lack of graphics, and both of these features make the blogging both less serious, yet more direct.

The third enhancement is a concept I am borrowing from a variety of places, most notably Daring Fireball: a link log. I have made a few tweaks and refinements[3] that allow for integrated, inline posting of links that are of interest to me (and perhaps to you), with the potential for my commentary below them. I am extremely pleased and proud of this feature. Note that I have excluded link log entries from the search and from archives.

Two more aspects I wish to touch on are the typography and comments. I had intended to use Baskerville throughout the site. I think it’s one of the most beautiful serif typefaces ever created. Sadly, though it looks stunning in both print and in Webkit-powered browsers (Safari and Chrome), it looks downright nasty in Gecko browsers (Firefox, Camino and others). In fact, due to Gecko’s more precise (and blockier) anti-aliasing, most serif faces don’t look great. I don’t mind Helvetica Neue, which is what I ultimately chose, but I would have preferred Baskerville.

Lastly, comments: I have disabled them. Partly because of a poetic lack of response to my related question on Twitter, and partly because most of the sites that I really care about don’t have comments. If you wish to offer a correction or opinion, you can fire a reply my way on Twitter, contact me or write your own blog post.

I hope you like this new format as much as I do.


Footnotes

  1. You will notice a significant number of personal pronouns in this post.
  2. I don’t have a link. I trust you remember it. If you don’t, picture design number three but with more graphics.
  3. Most notably to the Press This bookmarklet, which now puts the URL as a link in the title. You can grab this from the miscellanea page.

February 14, 2011

Display Your Latest Tweet With PHP

Jul
31

I get asked, literally some times every so often, the best way to integrate your latest tweet into WordPress. There are a few ways of doing this, but the way I’ve come up with is, I think, pretty nifty.

The first way is using Twitter’s profile widget creator, which displays tweets in a little box which you can change the colours and dimensions of. It’s actually not bad, but it’s a bit generic. It looks the same, despite colour differences, on everyone’s website, and it probably wouldn’t work with a site design similar to mine.

The next solution is using one of Twitter’s other widgets, which are hidden a little on the Twitter site (you need to go into Applications on the Twitter goodies page, not Widgets — it’s linked above for your convenience, though). You can choose between a Flash or HTML widget. The Flash version is similar to the previous widget, in that it looks pretty much the same everywhere, despite colour options. The HTML one is much, much better though. It allows for simple, easy CSS styling. I liked this method so much that I used it on the previous version of nickheer.com

The problem with the HTML widget is that, for whatever reason, it doesn’t seem to work smoothly 100% of the time. I think it’s a Javascript/Wordpress/Safari 4 issue, but it doesn’t matter. In addition, if you want to style it in-depth, it can be a royal pain.

However, I recently found a post on the Smashing Magazine site which described a method for displaying the latest tweet via PHP. This intrigued me, and I implemented it into this revision of the website, and immediately I ran into a huge problem.

This PHP method seems to get easily confused by symbols (<, > and & all seem to be problematic) and links. Bad news for me, since I seem to tweet links quite often. Note that this also applies to @replies, because the username is linked. After much trial-and-error, I think I’ve cracked the perfect way to show your latest tweet(s).

Update: e-sushi posted a much better version of this in the comments. Thanks for the new code.

Click here for the UPDATED code.

The beauty of this code is that it replaces common symbols with their appropriate equivalents, and it parses links perfectly. The bulk of the code is from the Smashing Magazine article, but all of the string replacement code is by me. Please don’t forget to put your Twitter username on line 2.

Update (August 2011): this is another fantastic implementation of a Twitter PHP script. I highly recommend it.

July 31, 2009