Hugo Future Imperfect Slim

Tracey Jaquith · PoohBot Pictures

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

About my PRIOR JS-base (JavaScript) site

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

September 2008, as I fretted over the upcoming election, I decided to rewrite this website to use (“client side”) JavaScript and JSON for the majority of the look, navigation, and formatting.

So, for example, the upper header, the lower footer, the lefthand navigation, etc. are all inserted with Javascript around whatever each page’s <body> tag is. I have a single Javascript file (see source here) that takes care of everything. It nicely only has one global (JSON) variable that encapsulates all my methods and (JSON) data elements. At the bottom of the JS file is the call to init() which sets a window.onload() event to fire off and set the page up.

For example, this is what the source of hunter.htm looked like:

<html><head><meta mod="$Date: 2015/05/10 04:46:34 $" fi="$RCSfile: oldjs.php,v $"/>
  <script src="js.js"></script>
  <link rel="stylesheet" href="old-css.css" type="text/css"/>
</head><body class="std">

<div style="width:660px; margin-left:auto; margin-right:auto;">
  <div style="text-align:center">
    <a href="">Hunter's Website</a> (he's Super!)

  <a class="hoverShower stealth" href="">
    <span class="hoverShower">
      <img class="showOnHover" src="/img/superoverlay.gif"/>
      <img src="/img/superman.jpg"
           title="Hunter is Superman"
           alt="Hunter is Superman"
           width="640px" height="480px"/>


That’s it!

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

Recent Posts



#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 death valley 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 grand canyon gravel bike green magic man h.264 hack health highway 1 home https hugo hyperlapse internet archive ios iphone javascript jeep k3s kubernetes 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 sedona 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


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