New Brunswick Tourism web page annotation folly

The NB tour-us page at http://www.tourismnewbrunswick.ca/
offers which text characters to select (not to copy, but that also would be reasonable given that HTML is hyperTEXT ?)

Characters as Text to select is how browser annotation of web pages is done usually. Displaying a URL is optional in most browsers now. So … how to make a note about visiting NB and keep that note linked to that page with one click ? ANSWER: select text characters at ?

Tip : my annotation tool uses CTRL-F12 as the note hotkey when text is selected. OneNote would make a pointless image-copy if there were no text to select. Perhaps the staff programmers do not even know that the Tx icon means "remove text formatting" — or why some browsers offer "copy as plain text."

---

Firefox urlencode lapse, or ?

I was validating an HTML page at kanji.aule-browser.com today when I hit a few URL errors in anchor links.

The URL's were added ad hoc for kanji from pages found in Firefox and the URL copied out of the address field.

Oops!  These URL's are for kanji stroke order diagrams and the URL includes a Japanese character.  The URL comes back from Firefox address bar "COPY" with the kanji character urlencoded. But: the URL includes a param following an ampersand and THAT was not encoded.

According to w3c the URL is not valid unless the ampersand is escaped (but the links were tested and worked fine ...)

Once the ampersand was escaped,  the HTML validator stopped objecting - but the "?" for the start  of parameters was still not escaped!

Here is what Firefox returns:

http://www.sp.cis.iwate-u.ac.jp/icampus/u/akanji.jsp?k=%E9%9A%A3&o=e99aa3

Here is what the HTML validator insists upon:

http://www.sp.cis.iwate-u.ac.jp/icampus/u/akanji.jsp?k=%E9%9A%A3&o=e99aa3

Notice that %26 is not what is required for this URL to work correctly.

http://www.sp.cis.iwate-u.ac.jp/icampus/u/akanji.jsp?k=%E9%9A%A3%26o=e99aa3

Firefox reports the URL on my web page as

http://www.sp.cis.iwate-u.ac.jp/icampus/u/akanji.jsp?k=%E9%9A%A3&o=e99aa3

The HTML anchor attribute on the page is now set to

href="http://www.sp.cis.iwate-u.ac.jp/icampus/u/akanji.jsp?k=%E9%9A%A3&o=e99aa3"

The kanji is 隣

---

Firefox Perapera for Kanji

I am finding that my two pages testing edict and edict2 as UTF-8 encoded text are also a great test of the Perapera Japanese-English dictionary plug-in for the Firefox browser.

Of course, the plugin required the compilation of the dict ... but it clearly hints at more uses for the content of EDICT2 than as some single text file out on a server.

I have posted two versions of each of EDICT and EDICT2 as HTML pre text:

edict white-on-black
edict black on white
edict2 w/b
edict2 b/w

Kanji dict plugins to read an English gloss are available for your web browser.

Note: each page may take a moment to load as there are some 162,000+ entries.

---

Jan Zwicky, Wittgenstein and Form

I was thinking that had PART ONE had the single line page headers and PART TWO had double-line page headers ... too obvious? A one unit and then a two unit length line as page headers? Golden ratio lengths? Imagine the unexplained subtle elegance of the book without the PART pages themselves being required as partitions.

§
What about a poem which opens with a left indent to

I wonder if it is the case that 

    [and then stanza(s),
    finally ending with
    a right indented ]

        I think that it is so.

Imagine starting to see this as a recurring form in poetry magazines, anthologies.

A paradigm case of  the ugly: a single quote from misguided Ernest Gellner Words and Things, 1st Ed. ?

Dal segno al coda would require us to use U+1D10B as the non-printing HTML UNICODE escape sequence &#1D10B;

The printer or the author was selective in the LW segno chosen?

It was not the segno

Repeat:

And then to the coda.

Header Image

The blogger.com, i.e., blogspot.com simple template which we have been using has an option to add a background image and to have that image adjust its size to fit.

The result is not acceptable except for the mobile view.

But this one minor edit to the template HTML for the default CSS style gives a good result:

#header img {
width: 100%;
max-width:100%;
margin-$startSide: auto;
margin-$endSide: auto;
}

Select "Proceed" when warned about doing edits to the HTML. Be sure to preview the result before saving the template.

.htm for Mini Mobile and .html for aLL eLse Larger?

2014 might not be too late to achieve this simple option:

  htM for Mobile web content

  htmL for Laptop and aLL other Layout

Luckily, we never had an "xhtml" file extention - and we were permitted both SHTM and SHTML for server-side includes.

The reason to consider HTM for mini displays is that it would not require typing by users to shorten or lengthen the extension if browsers would agree on a hot-key combination.  A smart browser would check at any site offering an HTML whether there was an HTM if the last URL used was HTM by user choice and so offer the option visually to the user for the current site.  It would be a simple browser  configuration option for those devices, the format of which, was neither Large nor Mini.

Lately I have been using htm for 4.01 HTML and html for XHTML and also for HTML5.  As the web moves to the latter, we should be able to set a meta value to flag that, say,  this .html file has a sibling .htm file for constrained display and vice versa.  And ditto for .shtm and .shtml and whatever might follow from 2014 until we achieve 20/20 hindsight.

IE8 compatibility and leaks links

Microsoft has their IE8 compatibility page here at http://www.microsoft.com/windows/internet-explorer/readiness/developers.aspx

There is a useful discussion in the forum at http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/772e4b07-29e1-4909-b77f-f61c503f9579

A long-standing resource is quirksmode.org at  http://www.quirksmode.org/dom/intro.html

David Hammond's webdevout.net shows no blog post since July 24, 2009 at http://www.quirksmode.org/dom/intro.html but still has a lot of information.

The wikipedia quirks_mode article at http://en.wikipedia.org/wiki/Quirks_mode is also useful.

Here are 2 links on Internet Explorer and memory leaks due to closures with circularities impeding GC:
Understanding and Solving Internet Explorer Leak Patterns
Circular Memory Leak Mitigation
At least msdn one page suggested by David Flanagan in the rhino book is now missing.

David Flanagan slides on ECMAScript 5 at http://davidflanagan.com/Talks/es5/slides.html

IE9 and ECMAScript 5 link at msdn: http://blogs.msdn.com/b/ie/archive/2010/06/25/enhanced-scripting-in-ie9-ecmascript-5-support-and-more.aspx

ECMAScript 5 conformance suite link: http://es5conform.codeplex.com/

Hubris and nested markup for text in the humanities

My attention is usually directed to alternative markup for the humanities, specifically poems and their alternative translations as presented on the internet in a web browser.

Consider a simple case: a poem of two stanzas or verses of 6 lines each.  The first four lines of verse ONE satisfy some criterion A and the last 4 lines of verse TWO satisfy some criterion C. Lines 5 through 8 satisfy some criterion B.  Proceed to markup using HTML, LML, XML or my preferred Curl.

One solution in markup such as Curl which has no "closing tag", e.g.,

{tag
  content
}

rather than

<tag>
  content
</tag>

might be this:

{A
line 1
line 2
line 3
line 4
|{B line 5
line 6
} || end of A (a comment starts with dbl-bars )

{C
line 7
line 8 |} || end of DOUBLE_BRACED  B  (a comment only)
line 9
line 10
line 11
line 12
} || end of C comment

Note that such a double-brace solution as |{  and |} is not available in Curl.  In mathematics, such bracketing would be nonsense.  But two stanzas are not two equations.

In zoology, the existence of the species Lupus canis (wolf) and Lupus latrans (coyote) yields to the fact that wolves and coyotes hybridize in nature. In the northeastern United States the question is what should journalists call these hybrid animals.  In the case of common tree species which readily hybridize, the challenge for botany is far greater.  Classification always cedes ground to the facts of genetics.

But in the simple case of a mere translation of a difficult two stanza poem from German to English, markup falters.  This would not be the case with simple paint programs, where one "markup range" or "marginal note" translates readily into over-lapping graphical figures.  Some are less effective than others: think of the reach of A above as red, C as blue and B as some shade of violet.  Over-lapping transparent coloured rectangles, if you like.  But the "markup" on the page risks being unreadable.  Text has been abandoned to graphics.  Font triumphs over content, if you will.

The awkward XML solution is

<A>
<B>
</A>
<C>
</B>
</C>

which you may detect above as the overlapping Bold-Italic-Bold of a sentence above.  It is awkward because you must now parse with specialized software to extract that of A which satisfied B.

Consider this alternative:

<A>
<B>
</B>
</A>

<C>
<B>
</B>
</C>

What is now lost is the continuity of B.

Visiting any major poetry or philosophy web site will reveal that very little is available to compare translations - because the problems of markup are daunting.  Arguably philosophy students are more penalized by attempts to markup premises and suppressed premises relevant to an argument when the text is itself a challenge.  One example would be the limited efforts of philosopher Jonathon Bennett to make Early Modern philosophy texts more accessible to students.

For an example of from poetry, take the poem by Werfel and the "translation" by Robert Lowell.
The solution which I find frightful is that of "lines" in poetry and "sentences" in philosophy.  Here is the two stanza poem as lines:

{line num=1,stnza=1,feature="A", line 1 here} 
{line num=2,stnza=1,feature="A", line 2 here}
{line num=3,stnza=1,feature="A", line 3 here}
{line num=4,stnza=1,feature="A", line 4 here}
{line num=5,stnza=1,feature="B", line 5 here}
{line num=6,stnza=1,feature="B", line 6 here}
{br}{br}
{line num=7,stnza=2,feature="B", line 7 here}

{line num=8,stnza=2,feature="B", line 8 here}
{line num=9,stnza=2,feature="A", line 9 here}
{line num=10,stnza=2,feature="A", line 10 here}
{line num=11,stnza=2,feature="A", line 11 here}
{line num=12,stnza=2,feature="A", line 12 here}

for now I have lost the elegant markup

{stanza
}

{stanza
}

in which each stanza had its lines - with or without line markup.

Documenting a Curl Surge Lab Interface class

Surge Lab had been marketed as the name for the Curl IDE. The IDE has a feature that you may recognize if you use eclipse or Aptana: you can flip from one perspective to another. But the IDE gives only a glimpse of Curl interaction for the developer because, like Smalltalk Seaside 'halos' on a web page, Curl offers a Ctrl-Right-Click which opens text and graphic inspectors on objects embedded in a 'live' web page.

The ctrl-right-click pop-up menu includes viewing and editing the Curl source, inspecting objects and both 'Start Profiling' and 'Start HTTP Monitoring'. (Curl also offers test-coverage tools for HP's Mercury QTP.)

The inspectors are toolbar driven and almost feel like a Smalltalk object inspector becuase one toolbar item is 'Evaluate' which is just like the JavaScript popup in FireFox developer tools. Unfortunately, the inspectors lack some features of a typical Smalltalk inspector. The first that I would add to be Curl-ish would be a 'select-text-F1' event-handler to get the fine Curl doc viewer to popup.

What I will do this morning is include a Curl snippet of what you might browse in such a popup; it demonstatrates how the doc viewer is driven.

The following snippet is copied from

I:\Curl RTE\Surge\6\ide\editor-interface
EditorInterface.scurl

Snippet:

{doc-next
{purpose
This class defines the interface that an editor must support
to be integrated with Surge Lab.
}
{details
An external editor needs to implement this class, and define
a top-level variable named {monospace surge-lab-editor} which
is an instance of its implementation of this class.
}
}
{define-class public open abstract EditorInterface

{doc-next
{purpose
Initialize the editor.  An interface back to Surge
Lab is provided for the editor.
}
}
{method public open abstract {initialize
surge-lab-interface:SurgeLabInterface
}:void
}

The behavior of the default Curl editor is not my favorite side of Curl at the moment: high-lighting a '{' offers a context popup to view the '{' in a class browser instead of the handy behavior when you add a '}' which is to blink the matching '{' in red.
Adding a '}' and then placing a CR in front has the disconcerting behavior of aligning the '}' with the matching '{'. This is annoying if it is your habit to end a line using a 'do' with an opening brace ( as required by many script interpreters such as Tcl and which is {script-style} for many programmers.)

But the little annoyances in the default editor come to nothing because there is an interface for external editors.

Over at eclectic-pencil I will add a page with a working HTML example of an embedded Curl {example} macro using a TreeControl object. Install the plugin and Ctrl-Right-Click. Cool.

Sciter, TiScript, DyBase and JSON

If you have ever looked at XUL for Mozilla, you owe it to yourself to look at an alternative way of declaring a UI with JavaScript.
TiScript is an extended-JavaScript with a few twists and it works with DyBase to provide scripting and persistence for Sciter.
Sciter is from Terra Informatica, whom you may know for BlockNote or their SqlLite wrapper.

What Sciter offers is an alternative to JavaScript+DOM. Instead of loading the DOM for an HTML page, the strategy is to use TiScript with a few extensions to CSS.

Sciter offers web developers 8 DOM and Window classes:

• Element - DOM element. All HTML elements including the document root, frame, inputs, etc. are elements in Sciter.
• Attributes - a collection of named attributes of any html element.
• Style - a collection of style attributes applied to any element.
• Image - bitmap image objects on which you can draw using Graphics methods
• Graphics - an object wrapper for drawing primitives for drawing on any Element or Image
• View - represents Sciter window (the main Sciter window and Dialog are views)
• Event - represents the current UI event.
• Sciter - a global object holding Sciter application specific methods.

Top level windows are represented by View objects in Sciter. Both the main window of the Sciter.exe application and the client area of the X-Sciter.dll sandbox window are views. Dialog windows also have their associated views.

Each view has a root property which is the root element of the loaded document. The root element in Sciter is the <HTML> element of the loaded document and there is no dedicated Document class because in Sciter the Document is an element tree composed of an element and its children.

Frames and framesets are also ordinary DOM elements. Each has a single child element: the root element of the loaded document. If the document is loaded into a frame, the parent property of the root element of the document will refer to that containing frame element.

These simplifications are intended to make up for inherent weaknesses in how CSS+Javascript is used in web layout to complement simple HTML.

This interests me while I am looking at the separation of concerns which is attempted by Mozilla with XUL for Firefox and for other XPCOM applications outside the browser which use the XPFE (Cross-platform front-end) framework. Sciter+TiScript+JSON is also interesting when contrasted to Rebol/View and the upcoming Liquid-GLayout marriage for Rebol (Rebol does not yet have a cross-platform IDE - which is something else Rebol shares with Oz and Mercury.)

The major change that you will find in TiScript is the use of type to define both classes and modules (namespaces) without the prototype-based emphasis of JavaScript. A class with a this() function has an instance constructor*. In TiScript the prototype field is a reference to a type or is undefined. TiScript also has a nice variant on C# properties to provide set and get accessors for field privacy. Sciter itself uses 'self' to refer to the root object as in self.myFunc()

Corporations in the far east which have used Curl will not want to migrate to XUL+rdf+dtd+css+js and it is hard to imagine ActionScript and Flash as being much more attractive. It would be interesting to know whether TiScript itself would obviate the need for the Google Web Toolkit as a JavaScript nostrum while also streamlining the scripting ( GWT is touted as a remedy for unintended JS closures causing memory leaks under IE - but I should add that GWT does have a fine inexpensive plugin to Eclipse by Instantiations.)

Another point of interest is that TiScript offers JSON persistence through a version of a DyBase library which has been modified to support 'native' TiScript. DyBase is said to have interfaces to PHP, Perl,Python, Rebol and Ruby but I could only find a Smalltalk alpha outside of the home archives of the DyBase author (and none at rebol.org, CPAN or the Python Cheese Shop and no RubyForge or sourceforge entries; the dybase site at garret.ru was off-line this weekend.)

Dybase could be as neglected as the database options offered by associative and hierarchical/network databases (MUMPS, DNS and LDAP are hierarchical) in the world of MySql and XBase. And there is Lazysoft, to which there are links at StumbleUpon and AboutUs.

Perhaps if an AltME group opens on DyBase there will be an opportunity to judge its merits across a few languages. Until then I will watch ltu.

* the author of TiScript is the author of Harmonia, an FLTK for the D language.