Yes, I know what you’re thinking – “So soon after the announcement of the March meeting? Has Sam started getting organised?”. Well, kind of – actually I heard from Harry Pot Simon W that one of the Django devs, Adrian Holovaty, was going to be in town.
Given that it’s so far in advance, I’m sure many of you won’t know if you can make it, but once again it’ll be the same cross-language cross-technology meetup, broadly aligned along Web 2.0 lines – all are welcome, whether or not you think Web 2.0 is great, or just a crock of poo.
Read the rest of this entry »
Another Django/Rails/Catalyst/Java/web2.0 love in to be held at The Old Bank of England onFleet Street. Web 2.0 advocates and detractors are welcome, as are any enthusiasts of Lisp, Python, Ruby, Java, Haskell or whatever other dirty commie language you lot use.
Once again I’ll be (badly) organising this with the aid of Simon Brunning, his jury service permitting.
If you’re coming along either leave a comment or register your interest on Upcoming – we have to book a room so it’d be good to get an idea of numbers.
It was with some sense of chagrin that I learnt that a high-profile, previously standards compliant and accessible site had been redesigned using cutting edge webdesign techniques, circa 1996. Goodbye CSS, hello tables. I could understand this (to a point) if it wasn’t for the fact that the resulting Disney Store UK site is just so damn ugly.
Andy Clarke’s response is very restrained, and at the same time funny. Molly Holzschlag, lead of the Web Standards Project goes for the jugular, pointing out that the new site is riddled with bugs, is slow, their email doesn’t seem to work, and is probably in violation of the Disability Discrimination Act
Read the rest of this entry »
One of the hardest things about making the transition from Windows to OSX was letting TopStyle go. Quite simply it was about the only thing that made struggling with browser inconsistencies bearable, and made playing around with CSS a pleasure. I have never been happy with the OSX replacement I got for it – CSSEdit, whilst it handled previews nicely didn’t do keyword completion as well as TopStyle, nor did it have downright handy features like a colour chooser.
Read the rest of this entry »
Whilst leaving a comment over at Jon Hicks site, I noticed his excellent live preview for comments. As you type it displays how your comment will look, all in real time. I would love to do something similar for this site, however Jon uses HTML for comments so lets the browser do the parsing – I’ve decided to use textile which means I’d have to do the parsing myself in Javascript, which doesn’t sound too easy…
Now that this site properly validates as XHTML 1.0 Strict (with a little help from some PHP and the W3C validator) I’m now starting to look at the markup itself. As you may know, the idea is that the XHTML should contain the semantic markup, and the CSS the presentation, which is a pattern I have used here. I have become concerned however about the quality of my markup. Lets look at a simple example. Currently, the links for each post are marked up like this (I’ve omitted href’s or the MT tags that generates this content):
<div>
May 4th in General | Permalink | Comments
</div>
Read the rest of this entry »
As I mentioned before, I recently wrote some Javascript code to produce a more printable version of my pages. Since then I’ve updated the code a little, added a link to each page and refined my printing CSS. The Javascript code handles two tasks – firstly it extracts selected links and creates a footnote for each one. Secondly, it extracts any print stylesheets and displays them in the browser so you can get a better idea of how the printout will work. A couple of niggles still remain – I cannot skip links in blocks which use id rather than class, and the markup for the footnotes is horrible. Once I’ve cleaned the code up and fixed the last few remaining issues I’ll post a proper writeup soon.
Now that the code is properly integrated in the new design, I though I’d ask for some feedback.(the ‘Print this page’ link can be found in the top-right hand corner) – you don’t actually have to print, just click the link and see how it looks. I’m especially keen to hear from people with browsers other than Firefox and IE.
As you may of noticed, I’ve been having some problems with the @overflow@ property and IE. Simply put, overflow should define how content outside the displayable area is handled. Using the auto value should display scrollbars when required – and this works perfectly on Mozilla. On IE however I couldn’t get it to work at all.
The problem is seems is that IE isn’t bright enough to work out the width of the on screen element – if I give my pre blocks a width (which I can now do with a fixed-width layout) it correctly displays horizontal scrollbars and stops playing havoc with my layout. Its not all plain sailing however – when it adds the horizontal scrollbar, it doesn’t correctly resize the pre, and therefore also displays vertical scrollbars! Oh well, such is life…
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. overflow: auto property should cause horizontal scrollbars to appear, and indeed this does work on Mozilla, but this behaviour is bugged on IE. I’m working on a fix, but in the meantime I may well go over old posts and reduce the width of the
There is also another glitch when the browser is too narrow – rather than simply provide a horizontal scroll, the sidebar starts overlapping the content and the left edge of the content becomes unavailable. This should be an easy fix to implement it, but working out what the fix should be is another kettle of fish entirely.
In the meantime let me know if you spot any broken links or graphic glitches – I’ll be refining the design over the next few weeks I’m sure. I’m especially interested to hear from Opera or Safari users…
Update 1 Thanks to Cheah for a heads up concerning the forms. They’re still a little messed up, but I’ll sort them tomorrow. The search reslults are also still in the old style. Search templates are handled a little differently so they’re a bit more awkward to change – another item for the todo list…
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, 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.
