Jacqueline now features a development branch containing the latest changes to check multiple documents in a parallel fashion.
My first performance tests show that this boosts overall performance when checking large amounts of CSS selectors on multiple HTML documents. The next big step will be trunk-integration of this feature.
In the meantime check the dev-branch at http://code.google.com/p/jacqueline/source/browse/#svn/branches/threaded
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
Nach einer Weile Ruhe kann ich nun mein neuestes “Projekt” vorstellen, das mich hauptsächlich nun während des Studiums nicht mehr loslässt: Es handelt sich dabei um eine Pie-Menu Implementierung in JavaScript und XHTML.
Gefesselt haben mich Pie Menus nun seit Längerem. Denn neben meinen Interessen für die technische Seite der aktuellen Entwicklungen interessieren mich auch neue oder ungewohnte, selten genutzte Benutzerschnittstellen.
Vorteile eines Pie-Menus sind dabei:
Die Implementierung ist momentan noch ziemlich simpel, aber schon darauf ausgelegt, mehrere solcher Menüs in einer Seite unterbringen zu können.
Die Idee: im Markup werden ul-Elemente mittels der Klasse “jspie” gekennzeichnet, für diese wird je li-Element ein Eintrag im Menü erstellt.
Es lässt sich dabei nicht nur zu URLs navigieren, sondern z.B. auch JavaScript-Code ausführen, sodass den Aktionen alle Möglichkeiten offenbleiben.
Wem “Pie Menus” nichts sagen, dem wird folgende “Illustration” vielleicht weiterhelfen:
Für eine feinere Implementierung als die momentane werde ich wohl noch einige Zeit brauchen, aber der Prototyp dafür steht bereits und kann grob verwendet werden. Eine Demo-Seite werde ich in den nächsten Tagen einrichten. Dort wird dann auch der Quellcode veröffentlicht werden.
Die Darstellung des Menüs wird im Laufe der Zeit natürlich noch optimiert werden.
EDIT:
Wenn man eine Weile in einem Projekt drinsteckt läuft man gerne Gefahr, viele Aktionen die für den Laien schleierhaft erscheinen mögen als völlig klar und “trivial” anzusehen. Um nochmal auf die Funktionsweise eines Pie-Menu zurückzukommen:
Nun noch ein (akademisch außerordentlich wertvoller) Link zum Wikipedia-Artikel: Pie Menus in der Wikipedia
Seit einiger Zeit (2007 und davor) gibt es die Selectors API als Working Draft des W3C – wem sie noch nicht bekannt ist, hier wird sie nun kurz vorgestellt.
Die großen Neuerungen durch dieses API heißen querySelector() und querySelectorAll(). Mit ihnen kann man sich anstatt den DOM-Tree manuell zu durchlaufen sehr schnell (da im Browser zu implementieren) entweder eines oder alle DOM-Elemente zu einem CSS Selektor zurückliefern lassen. Doch wie sieht es mit der Unterstützung aus?
Da hierdurch in unterstützenden Browsern ein enormer Performance-Gewinn bei derartigen Operationen zu erwarten ist, halte ich dies für eine erfreuliche Entwicklung. Auf Surfin Safari gibt es dabei noch einige Beispiele, was sich damit sehr gut ausnutzen/umsetzen lässt.
Für alle Browser, die die Selectors API noch nicht implementieren (und das sind nach diesem Stand ja noch ein paar) gibt es aber auch einen netten Workaround: base2.DOM von Dean Edwards ist eine offene JavaScript Implementierung der Selectors API, ist somit Cross-Browser tauglich und bietet noch ein paar Fixes für fehlerhafte Selektor-Handhabung durch den Internet Explorer.
Verwundert hat mich nur, dass dieses API (wie schon so Einiges) sehr lange beim W3C liegt und erst jetzt so langsam davon Gebrauch gemacht wird. Bei mir in der Firma war dies ein völliges Novum. Ist es anderen schon länger bekannt?
Gestoßen bin ich auf dieses API während der letzten Frontend-Optimierungsmaßnahmen bei denen sich mir die Frage stellte ob es nicht möglich ist, ungenutztes CSS automatisiert zu erkennen und zu entsorgen. Nun damit geht das allem Anschein nach sehr gut. Ein willkommenes Thema für meine zweite Projektarbeit.