I’m back in Karlsruhe for another few weeks (until mid of Apil). And back at my beloved old team which is now called “Web Sales Development”.
I’ll be doing some iPhone development for the next months – really excited about that! There are several exciting projects in the pipeline, too. Can’t wait to get my hands on coding again! 2010 is going to rock!
Back in 2008 I wrote some articles about the proposed Selectors API for the DOM. Now, in 2009, it’s still “only” a working draft of the W3C. I’ve been exploring this topic for a long time, now I will finally have time to write about what I’ve been working on for several months.
Jacqueline is a library which will help you to find unused CSS Selectors in multiple HTML documents. This is a very important feature when you want to check a complete website: it will be almost certain that you have some CSS selectors used on page “A” but not on page “B” whereas “B” uses some CSS selectors which “A” doesn’t use.
Jacqueline is completely written in Java – this was necessary because we wanted to run it in our Java based infrastructure. This brings some other problems Jacqueline has to face: the DOM implementation in Java doesn’t feature the Selectors API. So I wrote a CSS-to-XPath engine – inspired by DOMAssistant. What this basically does is: it transforms CSS2.1 selectors into XPath queries which can then be used for node tests (since XPath support is included in the JDK) on the DOM tree of the HTML document.
Because our documents are still using HTML 4.0 (due to several problems when switching to XHTML 1.0) I had to use JTidy for building DOMs.
Jacqueline also uses Apache Batik to retrieve all the CSS rules and CSS selectors from a document – it was the only implementation of the SAC (Simple API for CSS) I got to run – and which had some special features. These include locator information of the found tokens for example.
At the moment Jacqueline only works single-threaded, but because this includes many cpu-intensive operations which could definitely be fastened by using the power of multiple cores I’m also dreaming of a multi-threaded version. Since most operations of Jacqueline could be executed in a parallel fashion this could bring a major speed-up.
The main thing of Jacqueline is that it’s one of the first pieces to the lately mentioned Project Mess Tool. We’ll be using the power of Jacqueline to detect unused CSS selectors in our web projects.
Finally, that stupid name: Jacqueline is named after Jacqueline Bouvier from my favorite TV show the Simpsons. See this poster in our office:
Jacqueline - Poster
At the moment I’m working on my second project thesis for my studies. The topic I have chosen in accordance with my company is the “Project Mess Tool” (PMT) as we named it.
So what’s this about? In a few words: The PMT is a tool which will allow us to keep track of many quality-relevant metrics our company-website “produces” every day.
The sites we use for selling products are changed very often due to marketing campaigns. Not only do we have to change some images for that instead these are huge changes to the affected frontends. This of course results in the fact that many parts of our codebase are from older versions which may not be needed anymore.
At the moment we’re in the uncomfortable situation that we often don’t know how our pages really perform e.g. how many of the resources we deliver or keep are really necessary. We don’t know how many kilobytes (or even megabytes?) the average page weighs nor do we know where we could optimize easily.
The PMT is designed as flexible as we think it can be. All it basically does is receive data from all different kinds of sources by offering a defined interface (a webservice). This will include information from
In the end we will have information not only like “how many of the CSS selectors we deliver are really used by our pages?” but also “how does this change over time”. So we will be able to track quality with our predefined metrics and check back every week or so whether we have improved in those fields.
I chose Grails to build this application – which I’m already pretty familiar with – but we’re also using some core Java libraries to add some features specific to the frameworks and technologies we use. Grails seemed like an ideal candidate for me because it already ships with the really powerful GORM abstraction layer. There are also plugins for other enterprise applications like the Quartz enterprise job scheduler. Grails makes it very easy to run all this stuff so I got done with the first steps pretty soon.
At the moment I’m also drawing the first drafts of how the user interface of the PMT will look like. It will probably use Flot which I also mentioned several times.
For me this is a really great project. Not only in its size – it’s definitely the biggest project I’ve been working on until today. But its also a project in which I spend all my effort and time of work this time. I think it will help a lot to improve the overall technical quality of our web frontends.
I’ll keep you updated with all major changes and milestones to the PMT. So what do you think of our idea?
Nach Anleitung von Nico Steiner habe ich für die Produktbereiche DSL und Mobiles Internet auf den Seiten von 1&1 sogenannte Visible Skip Menus umgesetzt.
Dabei handelt es sich um Sprunglinks zu den wesentlichen Inhaltsbereichen wie Navigation, Subnavigation und Seiteninhalt. Mittels dieser Technik können Nutzer die die Seite z.B. mit einem Screenreader betrachten schnell über unnötigen Content hinwegspringen.
Dazu werden die Links direkt im Document-Body platziert. Sie sollen für normale Betrachter nicht sichtbar sein, deshalb werden sie mittels CSS aus dem Dokument verschoben.
Doch auch “normale” Nutzer können einen Nutzen von diesen Links haben – sie sind ebenfalls über Tabstopps erreichbar. Und so sieht es aus:
Auf ähnliche Weise habe ich diese Links für dieses Blog gebaut. Man kann sie sehr einfach sehen indem man (Web Developer für Firefox vorausgesetzt) alle Styles deaktiviert. Oder einfach mal probeweise mittels Tab durchschalten. Hier sieht es dann so aus:
