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="https://hunterleebrown.com">Hunter's Website</a> (he's Super!)
  </div>
  <br/>

  <a class="hoverShower stealth" href="https://hunterleebrown.com">
    <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"/>
    </span>
  </a>
</div>

</body></html>

That’s it!

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 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 ebgc emacs endeavour family ffmpeg food games geek gitlab golden-gate-bridge google-cardboard gravel-bike green-magic-man h.264 hack highway-1 home https hugo hyperlapse internet-archive ios iphone javascript k3s kubernetes landscapes linux lisp luke-battling-darth mac macosx markdown mashup metal montclair motion-jpeg motorcycle mountain-biking mplayer mt-tamalpais nasa new-bay-bridge news ninja oakland partioning php php-htm-mode politics protest rancher recording remaster remix remodel shuttle small-town star-wars swift tahoe technical thirsty-thursday time-lapse time-machine 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.