Hugo Future Imperfect Slim

Tracey Jaquith · PoohBot Pictures

Technophile · Optimist · Cyclist · Archivist · Design · Video · TV · Nomad · Docker

About my PRIOR XSLT site

<—— NOTE: this all refers to my prior site and uses some archived “Wayback Machine” page links so you can still see the code ——>

[ I used XSLT until Sep 2008, when I converted my site to client-side/browser JS ]

I’m using 100% XML, XSL, and (client side) XSLT for my superneato new look. HTML is output by XSL (a language for transforming XML documents into other XML or HTML documents). I have a single HTML file for the “redirect” page here. There is just a skôtch of javascript for “mouseover” events on my time-lapses video page. But other than that, it’s just XML and XSL (and of course, CSS 8-).

How this site works

Each XML page simply contains the page-specific data as normal HTML elements inside the XML declaration. The declaration establishes to a web browser that it is XML, and then loads my styles.xsl XSL stylesheet. The XSL stylesheet outputs the top header and the left-hand navigation. Next, it “copies” all HTML from the XML as the page-specific content. Finally, the XSL stylesheet outputs the footer.

For example, this is what the source of hunter.xml looks like:

<?xml version="1.0">
<?xml-stylesheet rel="stylesheet" href="styles.xsl" type="text/xsl">
<tracey tfile="$RCSfile: xslt.php,v $"
        lastmod="$Date: 2015/05/10 05:27:34 $"
        title="chez Tracey Jaquith">
<div style="margin-top:30px; text-align: center;">
  <a href="https://hunterleebrown.com">Hunter's Website</a>
  (he's Super!)
  <img src="images/superman.jpg"
     title="Hunter is Superman"
       alt="Hunter is Superman"
     width="640px" height="480px">
</div>
</tracey>

That’s it!

My XSL, styles.xsl, will tell the browser how to output HTML. (NOTE: MSIEv7 requires the rel="stylesheet" in the stylesheet declaration or else it will assume your XSL is really an RSS feed and not display!) My XSL will start with the <html> tag and output the <head> and start the <body>. The body contains a main table which will:

  • output an overall site “header” row
  • output an overall site “left hand navigation column” in the next row
  • copy the XML “content” into the next column
  • make a final 3rd row and put an overall site “footer” in it

There are some other special things I do like:

  • Have styles.xsl “load”(!) an XML file. For example, I load quotes.xml because a random quote is used in index.xml
  • Generate a random number in XSL (a pseudorandom). See the top of styles.xsl to see how I finally figured a sneaky way to make a random number (to pick a random quote in index.xml, to pick a random picture in pictures.xml).
  • Use CVS checkin special variables like $Date: 2015/05/10 05:27:34 $ and $RCSfile: xslt.php,v $, which get automatically updated on checkin, to allow for page-specific information in the footer (like what page you are looking at and when it was most recently updated).

But other than that, it’s pretty straightforward.

You crackhead, why XML?

Some benefits:

  • My prior website provider gave me no access to CGI (so PERL, PHP, and such were out of the question).
  • By putting all my HTML in XML, the HTML is forced to be validated as SGML. This allows me to stay on my toes and forces me to have to output well-formed SGML/HTML.
  • Similar to the first point, since I could not do much dynamically on the server side, I can have the client’s browser (which must understand XML and XSL, which fortunately all modern browsers do and have for awhile) do the “XML + XSL” transforming for me.
  • Viewing the source by browsing the XSL page itself with a browser is supernice as the browser does all the XML prettying, formatting, and coloring.
  • You can avoid most Javascript in lieu of the pretty sophisticated XSL language builtins and rules once you get the hang of it.
  • You can test and develop without a webserver running (like needed for executed CGI) – you can just drag files to a webbrowser.

It took me about a week of “moonlighting” to learn all this and convert my site.

So please use any technique(s) you like from my site from what I’ve learned!

Recent Posts

Categories

Tags

#spottheshuttle 1940s 1st person 3d accident aids lifecycle airplane animals appeltart apple pie apple watch architecture arkit art ascii art asia augmented reality baking bali bay area best of biking birthday cafe racer camaro camera video camping candy cars cat pee cat psychology cats cloud coding college colorspaces computer vision cornell crictl css dark mode decaf deinterlace desert design diy docker documentary driving ducting ebgb elbow break emacs endeavour family ffmpeg food games geek gitlab golden gate bridge google cardboard gravel bike green magic man h.264 hack health highway 1 home https hugo hyperlapse internet archive ios iphone javascript jeep k3s kubernetes landdscapes landscapes linux lisp luke battling darth mac macosx markdown mashup metal montclair motion-jpeg motorcycle mountain bike mplayer mt tamalpais nasa new bay bridge news ninja oakland olecranon partioning phoenix php php-htm-mode politics protest rancher recording remaster remix remodel shuttle small town star wars surgery swift tahoe technical thirsty thursday time machine time-lapse timing belt adjustment top end rebuild tracey traefik training ride travel vacation valve job video virtual reality vlog vscode weekend-mechanic work x264 xcode yuvj420p zx6

About

tracey is a nonstop dance party. so you dont have to. dont ask me about containers. thanks for dropping by today. you look nice.