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!

RE: How to solve the lack of a real multi-threading in JavaScript?

Recently on LinkedIn post the question was raised. And I was surprised how "respectable" people on JS community are struggling in their insulated "JS" world. While there are many ways to solve the given problem none was even exposed. It seems to be a good opportunity for people with out of the box thinking and bigger knowledge. But to gain the advantage there is a need for willingness to listen from community. Is there any?

On subj:
While JS is single threaded by definition, there are lot of ways to have parallel processing from graphics computation to data conversion. XSLT, SVG & CSS transforms just to name a few. Depend of your needs big chance there is a solution.
@Jeff Schwartz. The JS loading and parsing is multithreaded in Chrome. Running is not. XSLT uses internally multithreaded processing; frames have own threads. And so on. I had 2 alerts on the screen quite a bit when tuned communication in between. Have whole HTML rendered as a string with multithreaded XSLT and than passed to single-threaded DOM rendering. Please do not confuse people if do not know what you are talking about. 
There is no multithreaded JS(Web Workers aside). But there are numerous ways to use multithreading in browser from JS and between JS VMs. 

XHTML5 DTD validation and data-dojo- attributes

 In development, updates will follow. 

While this is guide for dojo templates validation, the concept is applicable to any JS library which leverage of data- HTML5 attribute.

The mistakes in HTM dojo toolkit widget templates could cost quite a pain as browser will try to make a smart guess what it should actually make out of invalid document. As result you could find misbehavior in completely irrelevant location and spend a fortune on finding the original cause.
The solution is simple: add the DTD validation into development process.
If template is made as HTML, the smart enough IDE or online validator will highlight the errors.

The dijit templated widget uses a DIV as template string source which prevent regular DTD check. Fortunately text! AMD pluging gives ability to strip the tag from html body content:
SAMPLE

HTML5 twisted design made DTD validation impossible just for sake of XML hating. Lucky us there is a work around. XML allow to use the XSL and browsers are capable to render data-dojo- attributes out of "dojo-data" namespace before JS and HTML dom is used making the browser to deal with HTML5 syntax and XML parser with DTD validation.

The sample of completely valid XML and HTML5:
SAMPLE.

Dijit template does not accept the XML as template string, so you would need to use the XHtmlBody! loader.
SAMPLE.

References:

www.html5dtd.org - try to cover some subset of HTML5 dtd.

OSI Foundation as a service?

For my open sourced projects shim library, shim-based JS framework, API registry, Dash Studio and series of micro-projects there is a need for legal shelter and non-profit monetary support. In general it fits to same concept as Apache or Dojo foundation. From brief review I have not found the way of using either of them as a base for my projects. There is no transparency on how the money flow between the particular project/contributor and donation/investor. In the world of highly dynamic projects arising, success and failure/death there is no service which could support opensource projects efficiently as a service. People at the moment either on their own or completely given up in favor of "free" community service. Usually not-profile activities are balanced among

• outsourced(free) Foundation for legal purposes
• Source repository/project management which is free for OSI project
• Demo content hosting, light services on related VCS service hosts or cheapest hostings paid out of pocket
• Donations processed either personally or by shelter company
• (continuous) build and test environment

There some other aspects like publishing and advertising, meetings and large shows participation, etc.

The service of such kind will be quite beneficial  for efficient support of free and open source projects.

For such organization will be essential the transparency of funds distribution and flow along with straight targeting of donations.

Modules compatibility as business problem

While the issues(and solutions) bellow are not browser client specific, the current subject of API registry primarily focused there.

• Legal compatibility. While open source is a great engine of progress it also a significant problem in keeping the application legally clean. Most of opensource contributors are enthusiastic junior developers who do not really paying attention for such things. And adding some fancy UI component could lead to the lawsuit with the cost way bigger than nice UI could ever bring. To prevent such gap the OSI licensing has been developed but going further it become not sufficient to use the library which has multiple contributors.
  Contributors License Agreement(CLA) has been developed by foundations and each code commit should be backed by it when applied to the library or application. When using external modules legal department should go over commit list and make sure that every committer have signed it.
  The complete chain of external modules licences and CLAs could relax the restrictions for external use or make the approval process straight.
  
• Identity validation (electronic signatures on sources&/binaries) will give an assurance for security review. For now this is performed(if at all) by IT department while it could be delegated to the trusted verifier within API registry.
• Methods overloading. JS methods could have multiple signatures as result there is a need for signature recognition in beginning of method and routing to the code matching the particular signature in run time. That increases JS code size, makes API confusing and code hard to maintain(as business logic mixed with signature recognition).
  In compiled languages this problem is resolved by performing of signature recognition and type casting during compile time. That way methods overloading does not cost in development/maintenance and runtime performance.
• Extending the existing API. Some existing API often need to be extended with additional functionality. For example retryCount in XHR or alternative location for AMD MID. Shim code could be attached to API similarly to AOP advise.
• Platform support. Often the API has a generic solution which is broken in some environments( like lack of Html Components or Web Components in browsers ). Special treatment could be done before|after|instead of original module methods for such special case. The problem is in separation of main codebase and special cases. It is pretty similar to extending the existing API but with platform conditional inclusion applied on top.
• API registry. For one or another reason like licensing or platform support the alternative modules could be demanded. The AMD does not answer whether AMD MID has a backup location or what licence it uses. The API registry meant to hold information about the module for legal, design, development, maintenance reasons
  
  • API - interface definition locator. The reference to pure API(s) which will be implemented by module.
  • dependencies presenting not just a list of modules used by given one bul also their validated/permitted revisions and perhaps sources.
  • API compatibility. The similar business logic could be implemented by different modules but not all of them could be compatible between each other and the caller. Method signature will resolve just the API syntax but not the implementation compatibility..
  • Localization I18N and accessibility support.
  • source and primary source location (VCS branch+revision)
  • identity validation. Verifiable source(as particular module as involved in binary assembly other modules) and binary signature, trusted compilation environment reference and locator, binary assembly all sources
  • help,blog,FAQ,discussion
  • support abilities
  • legal (license, foundation, contributor CLA, etc)
  • Platform support
  • Test( + against dependencies revisions) and results matrix and related support. The test in this case is treated as "test" dependency for original module.
  • Other dimensions TBD. Registry should permit custom attributes  of different types.
• Open registry network. Currently solutions for the some of problems above are insulated under single foundation umbrella with same ( like ISI or Dojo ) licence or API convention. Having registry as open platform capable of passing through and caching data should take the compatibility complexity out of decision making opening the doors for individual contributor modules into enterprise. The best analogy for data sharing would be DNS.

opensource micro projects hosting

It is time to split playground kitchen sink set into independent subprojects. Question is

what opensource hosting platform will serve the project better? 

It should serve as contributors as developers who use it, project discoverability and popularity.

Required components:

• Version control( SVN, HG, GIT )   with 
  • http(s) protocol
  • free for opensource
  • project with contributors ACL
  • private repositories ^*
• Ticket tracking(Jira,bugzilla,Track,etc)
  • link to VC via commits^*
  • 
    
• Wiki(w/ comments)
• FAQ( w/ comments)
• Forum
  • web+mailist
  • spam control
  • filters( aka out of office removed )
  • moderation (permissive and by approval)
  • voting
• project management ^*
• public discover-ability/self-advertisement
• demo site
  • static content with own JS
  • active content (php,.net,py,java)
  • SQL
• integrated continuous builds and tests environment ^*

What is missing?

* nice to have but for micro-project alone has no value, just as potential to grow into complex or commercial project.

There are some commercial suites like cloudforge.com, offering free service; free ones like sourceforge.net.

The popularity of GitHub among of opensource community is unquestionable and it grows along with GIT popularity itself. While the startup commercial pricing is loosing to bitbucket.org, should the herd instincts be accounted as more significant factor for opensource project?

Conclusion.

• Host VC, bug tracker, Wiki on GitHub, outsource demo to JsFiddle + PHP hosing, mail list/forum either to google groups or one of PHP+maillist apps. Static pages and forum could be over GitHub Pages but need some extra effort to learn jekyll.
• cloudforge.com - all including continuous integration. As integration requires $20/m (standard account+integration daemon) multiple projects could be integrated into common test flow. Active back-end and demo outsourced.
• sourceforge.net hosts most of services. Developer web given PHP,  Perl, Python, Tcl, Ruby, and shell scripts. No direct build integration.
• codeplex.com - .NET centric Microsoft source hosting proj. Has all except of content hosting.

My preliminary choice is GitHub for VC+Tracking ( has GIT with SVN bridge, best visibility and toolset ), CloudForge for test integration as cumulative proj; external demo hosting, forum TBD(perhaps CloudForge or SourceFourge).

Helpful links:
jsfiddle.net - front-end code demo site (JS, HTML, CSS, web service simulation)
GitHub Pages hosts myproj.github.io and uses static HTML (could be with HTML generator jekyll with disqus blog services- run by ruby locally and committed to github )

ajaxian.com - popular blog on Web 2.0 subjects.

Comparison of open-source software hosting facilities

• Wiki
• Opensource.com review