OK, I finally got around to the redesign this weekend, and its gone fairly well. I’ve moved from a liquid to a fixed layout, as the site was almost unreadable on high resolution monitors and many of the design changes I wanted to make become overly complex. One downside to moving to a fixed-width layout occurs with preformatted blocks of text. @
I sent some experimental code live today which I’ve been working on a little over the last couple of days. Now visible on the individual entry pages is a ‘Printable Version’ link that can be seen on the bottom left of the post’s content, which when clicked extracts (nearly) all links and creates a series of footnotes with the URL’s displayed. It also extracts any printing stylesheets and displays them so you get a better idea as to how it will print. Hopefully this technique will make printing from sites with many hyperlinks more useful.
The code is completely written in Javascript, and I hope to publish a full writeup on how it works in the next few days. The idea was inspired by an “IE-only bookmarklet”:http://www.kokogiak.com/gedankengang/default.asp#12012200393, although it has been completely rewritten to be supported in more browsers. In the meantime I’d appreciate it if you could let me know of any problems with the technique, especially if there are any problems with Safari or Opera (neither of which I have to hand right now). Known problems include:
* Some links probably shouldn’t be extracted as footnotes – for example the next/last post controls. I am filtering some out already so thats an easy fix.
* No effort has gone into styling the footnote section
* the printing stylesheet is quite primitive – it hides the side menu for example by doesn’t expand the main column to take advantage of the extra space which is available.
* It seems to break the automatic citation links for block quotes, although I have a good idea as to what’s causing that
* The location of the ‘printable version’ is a little out of the way – my aim is that when the code is finished the ‘printable version’ will be available on every page.
* The only way to get back to the non-printable version is using the back button.
* I need to see if there is some proper semantic markup to be used for footnotes
Whilst the technique is being used here for printing, it can easily be applied just to fit in with a site’s editorial style.
_Update_ 1: Oh, and I’ve just noticed the Javascript is stopping the document from validating as (X)HTML Transitional…
_Update_ 2: Also if the text for a link contained other HTML elements, the text is being displayed unformatted – again this is a fairly easy fix.
_Update_ 3: Priting broke when I uploaded the new design, so I’ve taken it off line for the moment until the issues are resolved.
“Jon(Page 23)”:http://www.hicksdesign.co.uk/journal/2004/04/page_23/ told me to:
# Grab the nearest book.
# Open the book to page 23.
# Find the fifth sentence.
# Post the text of the sentence in your journal along with these instructions.
From “Guns, Germs and Steel(Amazon.co.uk – Guns, Germs and Steel – A Short History of Everbody for the Last 13000 Years )”:http://www.amazon.co.uk/exec/obidos/ASIN/0099302780/ref=sr_aps_books_1_1/202-6617646-4629454 by Jared Diamond:
None of the crucial developments preceding political centralization in those same parts of the world were associated with river valleys or with complex irrigation systems
I try and avoid bandwagon jumping (I’m not saying I don’t do it, just that I try and avoid it – I tend to fall off a lot). However, Amazon’s “A9”:http://www.a9.com/ search service has certainly caught my eye. Using Google’s search results, it also adds a few handy features:
* Integrates with their book search (results shown side-by-side with Google results)
* It remembers your past searches
* Supports a Diary feature – add notes associated with a webpage, and when you visit that page again retrieve your notes. Currently this is only supported on the IE toolbar
* Very nice search shortcut – simply type @a9.com/query@ to trigger a search
The Diary feature looks especially nice – its just a shame that there isn’t a Firefox toolbar yet. Steven Garrity has “created a plugin(A9 Search Plugin for Firefox)”:http://www.actsofvolition.com/archives/2004/april/a9searchplugin to allow the use of an A9 search from the Firebox search box though.
“Charles Miller”:http://fishbowl.pastiche.org/ has posted up on the Javablogs confluence wiki some information on “including Javablogs generated statistics graphs”:http://confluence.atlassian.com/display/JAVABLOGS/Including+Javablogs+Statistics+Graphs+on+Your+Blog on your site. The example HTML mixes the semantics of the markup with the presentation logic:
There are several issues with this markup. Firstly, there is a @
* “A List Apart”:http://www.alistapart.com/
* “Mezzoblue”:http://www.mezzoblue.com/
* “The Daily Report”:http://www.zeldman.com/
Not being the one to point out the flaw and offer no better alternatives, I went about producing some nice compliant markup. Firstly, I started with the HTML itself:
Gone are the @@ tags, the @border=@ attribute, the useless @
.graph {
float: left;
margin-left: 30px;
}
The @margin-left@ gives a bit of a gap between the two graphs which now sit next to each other. This can introduce another problem however – any @div@ following the @graph@ will also appear on the same line – in my case my related entries @div@ was at fault – this was fixed using @clear@:
.related {
clear:both;
}
Next, we want our graphs to be centred:
.graph img {
text-align: center;
}
And finally format our caption:
.graph .caption {
text-align: right;
text-style: italic;
font-size: 90%;
}
Net result? The HTML is smaller, and yet more meaningful – the presentation is entirely within CSS meaning we can easily use the same styles elsewhere, and we can also change styles quickly (and even have different styles for specific users). You can now see the end result on my “Site Statistics”:http://www.magpiebrain.com/archives/000227.html page.
Site statistics generated by Javablogs.
Over at Daring Fireball John Gruber has taken the notion of user specific settings and has “created a preferences page”:http://daringfireball.net/2004/04/preferences for his site. John isn’t using the standard style-switcher approach as outlined in Daniel Ludwin’s “A Backward Compatible Style Switcher” for “A List Apart”:http://www.alistapart.com/, and has instead opted for a an on-the-fly generated style-sheet, but the end result is the same. Daring Fireball allows the user to not only change the font size, but also to toggle the visibility of referrers. “Simple Bits”:http://www.simplebits.com/ uses an approach similar to Daniel Ludwin’s to change the colour scheme of the site, this time using three simple toolbar icons.
I have often worried about all the things I could do with this site, but have wanted to avoid visual bloat. It’s for this reason that I’ve avoiding putting ‘edit’ links next to my posts as a convenience for myself, and why the ‘Related Entries’ only get displayed on the individual entry pages. Now I’ve seen Daring Fireball’s admittedly simple options in action it has inspired me to have a play around with user specific preferences – expect a user configurable magpiebrain soon.
“Paperairplane”:http://www.paperairplane.us/ looks _very_ interesting (link courtesy of “Die Puny Humans”:http://www.diepunyhumans.com/archives/000161.html). Based on JXTA technology, it is a Mozilla plugin (here’s hoping Firefox is supported too) which allows the development of decentralized communities. The content is stored and served from individuals machines, hopefully providing the ability for individuals to setup communities where they would otherwise be restricted form doing so (either due to commercial or political reasons). I was a big fan of the “peek-a-booty”:http://www.peek-a-booty.org/ project, originally launched with much fanfare, that attempted to provide methods for sharing information that could not be blocked by governments, however little has materialized since the project was first announced over two years ago. Paperairplane seems to of made at least one of the same mistakes as peekabooty – it has announced a project without anything to actually show for it (the java.net website for the project contains the usual “We’ll post code when we have it” type message). From the peekabooty Lessons Learned doc (PDF):
What did I learn from the first version of Peekabooty?
…
1. Dont release before it does something useful.
This lesson is recounted in Open Sources: Voices from the Open Source
Revolution as well as other places. I had even read about this rule before we
released, but I had to learn it for myself. If you release too soon, you spend a
lot of your time answering emails instead of developing.
I hope that the paperairplanes project manages to produce some actual usable code, and doesn’t join the ranks of other vapourware OS projects like peekabooty (and many of my own). If it can, then it will undoubtedly prove useful in a world where censorship is on the rise.
Its been a day for revisiting previous topics, so I thought I’d readdress some of the “troubles(Strange Java regexp behaviour – grouping)”:http://www.magpiebrain.com/archives/000219.html I was having with regular expressions last week. To recap, I was writing an expression to grab the serial number from the following string:
| Serial | | 1234567890 |
The regexp I was using didn’t seem to work – @Serial(?s).*([0-9]+)@ should of captured the serial number into a group, but was only capturing the last number. Many commentors posted that the reason for this is that @.*@ is a greedy operator (“Doug’s”:http://www.magpiebrain.com/archives/000219.html#comment419 comment should especially be noted – rarely have I seen such effort put into a blog comment!).
Simply put a greedy operator matches as many characters as possible – when this stuff was new to me I used to think of a greedy operator as a little Pacman, chomping his way through my string, waiting till the last possible moment before letting the next operator get a look in. In this instance, the @*@ ate everything until it left just enough text for the @[0-9]+@ to match – which was just the last digit of the serial number. As you would expect, to balance greedy operators, you have lazy (or reluctant) operators. To further abuse a metaphor, I think of a lazy operator as a very full pacman, who is looking for any excuse to go off for a nap. The lazy form of the @*@ operator in Java is @*?@ – in my case this operator gives up when it sees the first number, letting the @[0-9]+@ take over. So lets look at my fixed code:
String input = "| Serial |n| 1234567890 |";
Pattern p = Pattern.compile("Serial(?s).*?([0-9]+)");
Matcher m = p.matcher(input);
while(m.find()) {
System.out.println("Found match: " + m.group());
System.out.println("Found serial number: " + m.group(1));
}
This particular mistake was quite embarrassing. I’ve always prided myself on my regexp knowledge and to make such a bonehead mistake (not to mention exhibit at least one fundamental misunderstanding about the whole thing) has gone some way to puncture my ego, which I guess is no bad thing… The moral of the story? Reach for the manual before reaching for the blog – you might still make mistakes, but at least you’re making them in private that way!
As part of my ongoing efforts to streamline this site, I recently added the ability to link to specific comments. I detailed this process in an “earlier post”:http://www.magpiebrain.com/archives/000222.html (which lets hope gets automatically linked to using RelatedEntries), whereupon “Cheah(Redemption In a Blog)”:http://blog.codefront.net/ “pointed out(Comment on Comment Permalinks with MovableType)”:http://www.magpiebrain.com/archives/000222.html#comment422 that my use of anchors (via the “name (Links in HTML Documents – name attribute)”:http://www.w3.org/TR/html4/struct/links.html#adef-name-A attribute) was not as meaningful as linking to a semantic construct. I did some reading around the subject, notably Tantek’s “Anorexic Anchors”:http://www.tantek.com/log/2002/11.html#L20021128t1352, and the W3C’s “specification”:http://www.w3.org/TR/html4/struct/links.html#anchors-with-id.
I was using a standard @@ tag to create an anchor within a page – for example on a page @post.html@, a @@ tag allows the page to be loaded and to have the page automatically scroll to the location of the link when the link to @post.html#comment@ is clicked on. Allowing specific areas of a page to be directly linked to can be very powerful – I have used this in other areas, for example I have dropped the use of the MT standard comment listing template in favour of a single page containing the post itself and the comments, with an anchor linking to the comment region. The thrust of Cheah’s comment and Tantek’s post was that using an @