JSON added to XmlView, a bookmarklet for web service presentation as sortable table

In addition to early promoted XML in XmlView the JSON format support appeared to be an easy effort. The recognition of JSON format and conversion to XML was all needed to make a sortable table presentation for JSON based web services.

It is not as efficient and scalable as XML though. JSON doubles the browser memory consumption, half of which reside in the JS VM; additional parser for JSON consumes extra CPU/time.

Is it possible to make a faster and smaller memory consumption implementation using JSON without XML?

I guess not. XML reside in browser memory and is not a subject for JS limitations which will be in place for JSON. There is no multi-threaded(yet?) template transformation from JSON to HTML. Not to mention there is no way to render directly DOM by template engine besides XSLT.

Potential for the improvement

There is a prototype for virtual scrolling via XSLT. It could be used as a base for rendering just visible part of data delegation the rendering on scroll in real time.

Happy coding!

XmlView browser button shows XML as a sortable table

XmlView

The one extra module appeared on XmlAspect.org. This is a browser button to make the web services visualization. Along with Web 2.0 methods implemented by client-side cross-browser XSLT rendering it is a great showcase for CSS3 capabilities. The collapsing and sub-branch selection is implemented by pure CSS without any JS.

While JSON fans have been claiming the XML presentation is ugly and not useful, I was happy with its default presentation as a collapsible tree in browser. But most of web services comprise the tabular kind of data. Which is more helpful when shown as a table. The sorting on all columns could help with usability. That is what the tool does: present tabular data as sortable table.

Besides changing the sorting the URL will be adjusted by adding the sorting parameters into hash part. That will allow to share the URL with view parameters set.

As a tool for developer the cross-browser support will rely on audience interest. For now it is tested on current Chrome and FF.

The module is completely open sourced, feel free to use anywhere. Github given a great service where I am happy to use SVN on git repository.

Happy coding!

CSS3 trigger UI

How to make trigger UI using only CSS?

Once in a while there is a need to have some kind of trigger for checkbox functionality on the plage. Usually it is a regular <input type="checkbox"/> styled with background images like those: .
To use the styling based on background image you would need JS as INPUT itself does not have the ability to override the image on its container level during change event. There are some tricks how to do that properly as you do not want to use JS during page load to make the checkbox UI.
CSS3 gives you ability to implement the trigger UI design without any JS. The magic reside in ::before selector and background: linear-gradient. It is backward-compatible and shows regular checkbox where CSS3 is not available.

input[type='checkbox']{ display: block; width: 100%;margin:0; }
input[type='checkbox']::before
{ content: "OFF";
  display:block; padding: 0 1em 0 60%; color: white; font-weight: bold;
  text-align: "right";
  border: 1px solid black; border-radius: 3px;
  background: #73777b; /* Old browsers */
  background: linear-gradient(to right, #ffffff 0%,#ffffff 49%,#f1f1f1 50%,#73777b 51%,#73777b 100%);
  white-space: nowrap;
}
input[type='checkbox']:checked::before
{ content: "ON";
  padding: 0 60% 0 1em;
  background: #49aa50; /* Old browsers */
  background: linear-gradient(to right,  #49aa50 0%,#49aa50 49%,#f1f1f1 50%,#ffffff 51%,#ffffff 100%); /* W3C */
  white-space: nowrap;
}

Demo - click on the trigger or blue label text
See in action

Links: gradient-editor
Happy coding!