Hi all,
Currently on my wishlist is a customized front-end for Validator.nu.
I’m aware that Simon built a custom CSL validator a while back (
http://simonster.github.io/csl-validator.js/ ), but I like the
interface and flexibility of Validator.nu (and the Jing XML validator)
a little better. However, there are a lot of presets and validation
warnings that could be hidden from our users. Since Validator.nu has a
RESTful API, I’m imagining a custom front-end shouldn’t be too hard to
develop.
Since I’m rather worthless when it comes to coding, I wrote up my
thoughts at http://rintze.zelle.me/csl-validator/ (along with a
mockup), and put up a call for help on the citationstyles.org
frontpage. If anybody here is interested in this side project, let me
know.
Rintze
Hi all,
I managed to create a custom front-end for Validator.nu, currently
available at http://rintze.zelle.me/csl-validator/. The code lives at
https://github.com/rmzelle/csl-validator/. My original post, in which
I outlined the design, moved to
http://rintze.zelle.me/csl-validator-frontend/.
It works pretty well in my hands, and has several advantages:
- the CSL schema version can now be easily selected via a drop-down menu
- the necessary options for validator.nu are preselected and hidden,
reducing user confusion and visual clutter
- irrelevant validation warnings are now hidden
- validation now includes the extracted Schematron schema rules from
the CSL 1.0/1.0.1 schema, which catches calls to undefined macros
I used the Validator.nu REST API
(http://wiki.whatwg.org/wiki/Validator.nu_Web_Service_Interface),
Bootstrap, JQuery and Prism (for syntax highlighting).
If everybody is happy with it, I would eventually like to move the
code to the “citation-style-language” GitHub organization, and make it
available at validator.citationstyles.org.
The only drawback I’m aware off are two layout/CSS issues with the
Prism library, documented at
https://github.com/LeaVerou/prism/issues/324 . If anyone has any ideas
how to solve them, or knows of a better syntax highlighter that
supports both line numbering and line highlighting, please let me
know.
Rintze
P.S. The last webpage I hand-coded was after I read a book on HTML 3.2
in the late nineties. Things sure have become more interesting in the
past decade or two.
Awesome!
One little suggestion based on a glance (will look closer later): somehow
indicate which schema version is current.
Bruce
OK, few more comments after trying the validator:
- the “address” term on the pop-up is confusing; maybe better as “link”?
- my example had only one error, which makes this incorrect: “Oops, I
found 1 errors.” Maybe change last word in template to “error(s)”?
And just a question: does this include a web server aspect? If yes, I say
we move it to the main site, per your suggestion.
OK, few more comments after trying the validator:
- the “address” term on the pop-up is confusing; maybe better as
“link”?
I decided to use the same terms as used on validator.nu, but yeah, “link”
or “URL” might be clearer.
- my example had only one error, which makes this incorrect: “Oops, I
found 1 errors.” Maybe change last word in template to “error(s)”?
Will fix that.
And just a question: does this include a web server aspect? If yes, I say
we move it to the main site, per your suggestion.
It’s currently just a HTML page hosted on GitHub Pages. Validation happens
at validator.nu via their REST API. One could imagine expanding the page
with additional checks that rely on XML parsing (e.g. to help users follow
all our CSL repository requirements), which might require a server.
One little suggestion based on a glance (will look closer later): somehow
indicate which schema version is current.
Will do.
Rintze
Hi all,
With some help from Dan Stillman, my CSL validator is now live at
http://validator.citationstyles.org/. You can see a screenshot at
http://i.imgur.com/19TPArc.png .
I switched out the Prism syntax highlight for the Ace editor, since
the first has some unresolved issues with line highlighting and line
numbering, as I pointed out above. I also improved made the page a
little prettier. The only issue I’m currently aware of is that the
"URL"/“File Upload”/“Text Field”-dropdown menu becomes unresponsive
when the browser window is narrower than 750 px, which is somehow
related to Bootstrap’s grid layout system
(http://getbootstrap.com/css/#grid).
If nobody reports any major issues, I’d like to change the CSL
documentation at
https://github.com/citation-style-language/styles/wiki/Validation to
make http://validator.citationstyles.org/ the primary validator we
recommend to users.
Also let me know if you have any ideas on how to further improve the validator.
Rintze
Thank you Rintze, I like it!
A few things:
a) when I copy-paste a URL and press “Enter”: it seems that doesn’t
work. It works if I use the mouse and I press on “Validate” (it
confused me a little bit)
b) would be nice to have a spinning wheel while it’s doing the
request. I thought that nothing was happening
c) is the code available?
d) would be maybe nice to be able to generate links such as
http://validator.citationstyles.org/?url=https://www.zotero.org/styles/apa&version=1.0.1
e) I had some problem here with an old-ish Firefox. I’ll try again
with a newer one. Chrome is ok…
Have a nice weekend,
Thanks for checking it out!
The page lives at
https://github.com/citation-style-language/csl-validator/. I’ll see if
I can tackle any of your suggestions, but don’t hold your breath. I’m
not a very experienced web developer.
Rintze
Gave it a quick test run. I think it’s great, but here are just a few
nits/suggestions:
-
Certainly +1 for some sort of “busy” indicator. I would say a disabled
(gray) “Validate” button with a spinning circle.
-
The context that it displays for errors is a bit awkward. E.g.
(bibliography is misspelled here)
</styl
I think it should be displaying the full preceding and following lines
instead of chopping them off.
-
Would be neat if it could also inform if there are unused macros
-
How about having it tidy up the formatting as well? E.g. fix indents
(both amount of indenting and spaces instead of tabs), spacing before />,
etc.
-
Would be awesome if you could directly create a pull request against some
style in the repo (e.g. have a field where you could fill in the file name
[with suggestions as you type, of course] for an existing style and then
click a button to create request. A drop-down with all styles might be a
bit too much to handle). I think that might be related to what Carles had
in mind with the link generation.
- Certainly +1 for some sort of “busy” indicator. I would say a disabled
(gray) “Validate” button with a spinning circle.
We could use one of these: Ladda for Bootstrap 3 UI
- The context that it displays for errors is a bit awkward. E.g.
(bibliography is misspelled here)
</styl
I think it should be displaying the full preceding and following lines
instead of chopping them off.
These code snippets are what validator.nu returns in its validation
report. I guess we could extract the full preceding and following
lines from the full XML document, but that’s a bit of work.
- Would be neat if it could also inform if there are unused macros
Funny you should ask. I actually wrote a Schematron rule yesterday
evening to check for these
(Schematron rule · GitHub). Turns out
there are a little over 700 unused macros in the repository:
unused-macros.txt · GitHub
As an aside, I wonder whether we should mark CSL styles that define
unused macros as invalid in the next version of CSL. As an argument
against doing so, unused macros aren’t problematic for CSL processors,
just a waste of space. Maybe we should just have Travis CI and our
validator test for them, but still allow them per the CSL schema.
- How about having it tidy up the formatting as well? E.g. fix indents (both
amount of indenting and spaces instead of tabs), spacing before />, etc.
I think this would only work if we could tidy up the XML before
submitting it to validator.nu. Otherwise I don’t know how to do handle
the line highlighting (since tidying can move the XML code around).
Are you aware of any online tidiers that offer a REST API, or a js
library that does XML tidying?
- Would be awesome if you could directly create a pull request against some
style in the repo (e.g. have a field where you could fill in the file name
[with suggestions as you type, of course] for an existing style and then
click a button to create request. A drop-down with all styles might be a bit
too much to handle). I think that might be related to what Carles had in
mind with the link generation.
I’m not following. What would the workflow be, exactly? You mean
create a pull request from within the validator, once a style passes
validation?
We certainly should consider whether this validator can be extended to
streamline the submission process. Sebastian and I do a lot of
hand-holding to get contributors to follow
Style Requirements · citation-style-language/styles Wiki · GitHub,
and it should be possible to automate some of this.
Rintze
a) when I copy-paste a URL and press “Enter”: it seems that doesn’t
work. It works if I use the mouse and I press on “Validate” (it
confused me a little bit)
b) would be nice to have a spinning wheel while it’s doing the
request. I thought that nothing was happening
The newest version should now start the validation when you press
Enter in the URL field, and during validation the button should become
inactive and show a spinning wheel.
d) would be maybe nice to be able to generate links such as
CSL Validator
Can somebody explain to me how to implement this? A pointer to a
relevant tutorial would do. I guess we want the validator to be able
to both generate such links, and accept them (i.e., take the
parameters and use them to prepopulate the input selections).On Fri, Aug 22, 2014 at 10:14 AM, Carles Pina <@Carles_Pina> wrote:
On Sat, Aug 23, 2014 at 3:22 AM, Aurimas Vinckevicius <@Aurimas_Vinckevicius> wrote:
- How about having it tidy up the formatting as well? E.g. fix indents (both
amount of indenting and spaces instead of tabs), spacing before />, etc.
I found vkBeautify - javascript plugin, which might do the
trick. But we probably want to pretty print the input before sending
it to validator.nu, and I don’t know how to do that for the “File
Upload” and “URL” options.
Rintze
a) when I copy-paste a URL and press “Enter”: it seems that doesn’t
work. It works if I use the mouse and I press on “Validate” (it
confused me a little bit)
b) would be nice to have a spinning wheel while it’s doing the
request. I thought that nothing was happening
The newest version should now start the validation when you press
Enter in the URL field, and during validation the button should become
inactive and show a spinning wheel.
d) would be maybe nice to be able to generate links such as
CSL Validator
Can somebody explain to me how to implement this? A pointer to a
relevant tutorial would do. I guess we want the validator to be able
to both generate such links, and accept them (i.e., take the
parameters and use them to prepopulate the input selections).
If I understand correctly, you’re trying to do all of this entirely via
HTML/CSS/JavaScript, with no server-side scripting whatsoever. In that
case, see
for a general idea for accepting URL parameters. You would probably run
this on page load (then maybe even submit the form automatically). For
updating the URL, you want to use window.history.pushState/replaceState
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
[1],
since that allows navigation via forward/back buttons. We do something
similar in the style repo
https://github.com/zotero/styles-repo/blob/master/htdocs/styles-files/js/js.js#L45
[2]
[1]
[2]
https://github.com/zotero/styles-repo/blob/master/htdocs/styles-files/js/js.js#L45
- How about having it tidy up the formatting as well? E.g. fix indents
(both
amount of indenting and spaces instead of tabs), spacing before />, etc.
I found vkBeautify - javascript plugin, which might do the
trick. But we probably want to pretty print the input before sending
it to validator.nu, and I don’t know how to do that for the “File
Upload” and “URL” options.
File upload could be manageable if you read the file contents
http://www.html5rocks.com/en/tutorials/file/dndfiles/ [3] before
submitting the form and then submit it as text. Unfortunately, reading
contents from links might be more problematic due to cross-origin
restrictions. You probably won’t be able to do this without some sort of
server-side proxy.
[3] Read files in JavaScript | Articles | web.dev
Rintze
Slashdot TV.
Video for Nerds. Stuff that matters.
http://tv.slashdot.org/
xbiblio-devel mailing list
xbiblio-devel@lists.sourceforge.net
xbiblio-devel List Signup and Options
Aurimas
I found a nice JS library, Qurl
(http://ryanburnette.com/2014/02/getting-and-setting-url-query-parameters-in-javascript.html)
to make this work.
Upon page load, the validator now runs automatically if the “url” URL
parameter is set. Upon validating by URL, the “url” and "version"
parameters are set. Upon validating by file upload or by text field,
the “url” and “version” parameters are removed from the URL.
Give it a try! (and report any bugs if you find any)
http://validator.citationstyles.org/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcitation-style-language%2Fstyles%2Fmaster%2Fapa.csl&version=1.0.1
Rintze
