W3C home > Mailing lists > Public > public-webplatform@w3.org > May 2013

WPD page info tool

From: David Kirstein <frozenice@frozenice.de>
Date: Mon, 6 May 2013 21:38:24 +0200
To: <public-webplatform@w3.org>
Cc: "Alex Komoroske" <komoroske@google.com>, "Scott Rowe" <scottrowe@google.com>
Message-ID: <004f01ce4a91$46877980$d3966c80$@frozenice.de>
Heya,

 

this tool is primarily intended for the Template Corps
<http://docs.webplatform.org/wiki/WPD:Community/Task_Force/Template_Corps>
members, but I figured it would probably be of interest to others, too (also
check out the fun bits in the source code at the end of this mail). It shows
diverse information and statistics for a given page and does so by calling
our (S)MW API via JSONP.

 

You can find it here:  <http://webplatform.frozenice.de/pageinfo.html>
http://webplatform.frozenice.de/pageinfo.html

 

Check out some examples:

-
<http://webplatform.frozenice.de/pageinfo.html#css/properties/display>
http://webplatform.frozenice.de/pageinfo.html#css/properties/display

-
<http://webplatform.frozenice.de/pageinfo.html#svg/tutorials/smarter_svg_sha
pes>
http://webplatform.frozenice.de/pageinfo.html#svg/tutorials/smarter_svg_shap
es

 

There is also a bookmarklet on the top right, which you can drag into your
bookmarks bar and activate whilst browsing WPD pages, it will automatically
open that page in the page info tool. I've only really tested the tool in
Chrome (Firefox looked okay, too), so if something doesn't work, please try
Chrome first before reporting (feedback is welcome)! :)

 

Here is a non-complete list of things you can do with this:

-          Quickly look at site meta stats at the top (number of articles
etc.)

-          List all (semantic) properties of a page, including the type of
the property and links to the property itself, as well as a search for each
specified value, to find all pages with that value

-          Find out which (semantic) form a page uses and from where that
setting was inherited, also shows if multiple forms are set (by accident)

-          List all contributors with number of edits and bytes added /
removed (from the last 500 revisions of that page)

-          Grab the HTML source of that article (just the content bit, not
the head / body boilerplate)

-          Head stuff can be grabbed separately (e.g. you can see the
different syntax CSS rule blocks, if there are code examples on the page)

-          See all internal / external links and images (with preview)
present in that article

-          List used templates and generated sections (it also shows if a
section was generated through a template)

-          Get some internal properties / statistics, like pageid / revid
and stuff like __NOEDITSECTION__, or the parser performance report

 

There is also a form which you can use to expand templates (so, for example,
you put in {{Note|hi}} and it will show you the generated HTML). Beware that
the input is limited in length (because of GET). Below that is another form
to grab several properties / stats for a specific pageid / revisionid or
even raw wikitext (also limited in length for the same reason).

 

This is just a 'web-app', consisting of HTML / CSS / JS (just some lines shy
of 3k LOC), but it's an intermediate step towards my envisioned "admin-tool"
(which will then use my [to be finished] MW API lib through a JS env
<http://frozenice.de/blog/jurassic-tools/>  run via .NET).

 

Some CSS was taken from the site skin, to make it look familiar. I had some
fun while coding (don't expect readability!), so interested folks may find
some of those useful / fun:

-          An easy HTML structure for the menu on the left, which is CSS
only (no JS), supporting a submenu (yes, the '>' is also dynamically added
via CSS)

-          An easy HTML structure for the tabs, which, again, are CSS only
(I love this!), supporting an automatic / flexible height for the tab
contents (inspect the expand form for a simple example)

-          The loading spinner is only defined once via a data URI and on
load distributed throughout the page

-          Basic 5 lines, single-regex function to indent HTML / XML source
code (indentSource) plus a fun, yet flexible, way to generate indentation
characters (Math.pow)

-          For the math nerds, a fun way to get a string with the correct
unit (KiB, MiB etc.) for a given file size in bytes, using Math.log (no if
or loops)

 

It helps me a great deal when debugging our templates etc. So, as I said,
any feedback is welcome. Enjoy!

 

-fro

 


Received on Monday, 6 May 2013 19:38:50 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:13:48 UTC