Tagged: HTML Toggle Comment Threads | Keyboard Shortcuts

  • Joe 10:19 on July 22, 2006 Permalink
    Tags: HTML   

    Improved GM Microsummaries generator 

    Following up on Create Microsummaries with Greasemonkey, I added a user interface for choosing between an element’s ID attribute or a simple location path component.

    This consists of a floating panel, where the relevant elements are shown with their ID selected. You then can choose to use the simple location path instead, if more appropriate. The first element with ID selector will be used as the XPath root (looking from right to left, that is).

    Example XPath selector panel

    Update: WordPress messes up the HTML, using screenshot image (and see script page for a better example)

    GM Microsummary Generator UI

    Leaving the default choice results in:

    //div[@id='main']/ul[3]/li[3]/a

    Deselecting every ID attribute results in XPath:

    /html/body/div/div/ul[3]/li[3]/a

    Get the user script here: Generate a Microsummaries Generator for Firefox 2.x

     
  • Joe 10:54 on July 21, 2006 Permalink
    Tags: , Greasemonkey Building, HTML, user interface solution,   

    Create Microsummaries with Greasemonkey 

    Building your own Microsummaries Generator in XML for the new Firefox 2.0 (beta 1) can be a daunting task.

    Figuring out the whole XPath string can be an annoying experience, especially counting the number of nested divs, table rows and such. To alleviate this, Greasemonkey comes to the rescue with my Microsummary Generator user script.

    The general idea is that you start the script on your target page. Then you all individually discernible elements on the page will be highlighted when you move the mouse over the (just like for instance DOM Inspector). When you click the desired element, the script generates the proper Microsummaries Generator XML document for this element.

    Determining the XPath for the Microsummary headline is currently done with these simple rules in mind:

    Calculate the full XPath location path, down to the document root element (html). This results in a full nesting of named elements, indexed by their position if not the first of the same kind. Example:

        /html/body/div/div[2]/table/tr[3]/td[2]/a

    If an element has an ID attribute, take this as the starting point. Example:

        //div[@id='stats']/span[2]

    The general idea is that an “id’ed div” bears more semantic meaning, as intended by the website architect, and as such is much more likely to survive (minor) design and markup changes.
    This, however, fails whenever an ID is generated for some other reason, like the title elements of this weblog (id=”post-31″). I have no solution for this yet, but I’m considering some user interface solution like this:

        /html/body/div/div[2]/table/tr[3]/td[2]/a
        |          |   |      |     |
        |          |   |      |     +- ( ) id='id2e7f2ab'
        |          |   |      +------- (*) id='statstab'
        |          |   +-------------- ( ) id='stats'
        |          +------------------ ( ) id='main'
        +----------------------------- ( ) use root element

    Description: every element, which has an ID attribute, can be selected as the root of the XPath expression. 

    So the current version of the script has a few rough edges and there are still many manual steps needed in order to get the resulting XML Generator properly installed into Firefox. Be sure to share your thoughts for improvement!

     
    • Johan Sundström 18:42 on July 21, 2006 Permalink

      id=”post-31″ might not have been the ideal example of a nonsemantic id IMO, but I see your point. The sketched-out UI for picking a preferred XPath reference hook looks great; it’s just the kind of tool I’d want to have in the XPath extension, or better still in FireBug.

      A GM script to do that kind of thing would be a great start, though.

  • Joe 22:15 on April 4, 2006 Permalink
    Tags: , HTML, , ,   

    April 5th: CSS Naked Day 

    Tomorrow, April 5th, is acclaimed Annual CSS Naked Day by Webdeveloper Dustin Diaz of Yahoo!

    Funny to see all those nicely designed websites start to look like the old days of HTML 1.0 and the Mosaic web browser.

    Strange that most of us need to do our utmost best to live up to this challenge, to make our well designed sites look at least reasonable without any style applied. For me, it is good to experience that following web standards pays off, even in this weird challenge.

    In my case I already had positioned my navigation and other non-content stuff absolutely. Now I had a good reason to move this below the page content in the HTML source.
    Not only makes this the CSS Naked look neat (relatively spoken), but it also benefits the loading time before the actual content is readable, with CSS applied.

    I just replaced my CSS stylesheet by an empty one to accommodate the Aussies’ time zone.
    Take a look for yourself and experience the clean look of what the web was like, some 15 years ago…

    By tomorrow night all will be back to normal (with slightly improved loading time!).

    BTW, there’s some leftovers of in-line style, e.g. for the relative size of links in my tag cloud.

    For Firefox, the inline styles can be overridden with this simple Javascript function:

    <script type="text/javascript">
    
    window.onload = function() {
    	var l = document.getElementsByTagName('*');
    	for (var i in l) {
    		try {
    			if (l[i].style.cssText) l[i].style.cssText = "";
    		} catch (e) { }
    	}
    }
    </script>
    

    Notes:

    • Untested on MSIE/Windows.
    • This trick does not work for Safari/OS-X.

    Update: made resetting style conditional:
    if (l[i].style.cssText) l[i].style.cssText = "";

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel

Twitter links powered by Tweet This v1.8.3, a WordPress plugin for Twitter.