https://jottenlips.github.io/coding/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <link rel="stylesheet" href="/styles.css" />
7    <link
8      rel="stylesheet"
9      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css"
10    />
11    

11<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

11
12    

12<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>

12
13    

13<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/typescript.min.js"></script>

13
14    

14<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/bash.min.js"></script>

14
15    

15<script>
16      (function () {
17        try {
18          var trackUrl = "https://innovative-project-q9p9v.ampt.app/api/track";
19          var body = JSON.stringify({
20            path: window.location.pathname,
21            referrer: (document.referrer || "").slice(0, 200),
22          });
23          if (navigator.sendBeacon) {
24            navigator.sendBeacon(
25              trackUrl,
26              new Blob([body], { type: "text/plain" })
27            );
28          } else {
29            fetch(trackUrl, {
30              method: "POST",
31              keepalive: true,
32              body: body,
33            });
34          }
35        } catch (e) {}
36      })();
37    </script>

37
38  
39    <meta property="og:title" content="Programming" />
40    <meta name="twitter:title" content="Programming" />
41    <meta name="description" content="[1. Your First Web Page with HTML and Vim](html-and-vim/)" />
42    <meta property="og:description" content="[1. Your First Web Page with HTML and Vim](html-and-vim/)" />
43    <meta name="twitter:description" content="[1. Your First Web Page with HTML and Vim](html-and-vim/)" />
44    <meta property="og:image" content="https://innovative-project-q9p9v.ampt.app/hackers.jpg" />
45    <meta name="twitter:image" content="https://innovative-project-q9p9v.ampt.app/hackers.jpg" />
46    <meta name="twitter:card" content="summary_large_image" />
47  </head>
48
49  <body>
50    <div class="coverimage"></div>
51    <div class="container">
52      <nav>
53    <a href="/">Home</a>
54    <a href="/cancer/">Cancer</a>
55    <a href="/climbing/">Climbing</a>
56    <a href="/coding/">Coding</a>
57    <a href="/music/">Music</a>
58  </nav>
59      <!-- <div class="nav">
60        <a class="link" href="/">Home 🏡</a>
61        <a class="link" href="/programming">Programming 💻</a>
62        <a class="link" href="/music">Music 🎸</a>
63        <a class="link" href="/climbing">Climbing 🧗</a>
64      </div> -->
65      <div class="block">
66        <a href="/" style="display:inline-block;margin-bottom:1em;text-decoration:none;color:currentColor;opacity:0.7;" aria-label="Go back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
67<h1 id="programming">Programming</h1>
68<p><img src="https://innovative-project-q9p9v.ampt.app/hackers.jpg" alt="extrasmall" /></p>
69<p><a href="html-and-vim/">1. Your First Web Page with HTML and Vim</a></p>
70<p><a href="functions/">2. Intro to Node.js, local development, and JavaScript functions</a></p>
71<p><a href="react-intro/">3. Intro to React</a></p>
72<p><a href="statemachine/">So you need a TypeScript State Machine</a></p>
73<p><a href="raspberry-pi-kodi/">Raspberry Pi Media Server with Kodi and ExFAT Drive</a></p>
74<p><a href="https://jottenlips.github.io/making-midi">Using MIDI in the Browser Example</a></p>
75<p><a href="https://github.com/jottenlips/hello-rocket">Running a Rust Web Server on AWS with Fargate</a></p>
76<p><a href="we-dont-need-more-data-centers/">We Don't Need More Data Centers</a></p>
77<p><a href="cryptocurrency-is-a-grift/">Cryptocurrency Is a Grift</a></p>
78<p><a href="https://docs.vestaboard.com/blog/vestaboard-github-actions">Ascend with Automation: Vestaboard and GitHub Actions Inspired Consistency in My Rock Climbing Training</a></p>
79
80      </div>
81      <br/>
82      <div class="footer">
83        <!-- socials -->
84         Socials:
85         <a href="https://mastodon.world/@zerocool">
86          <img
87            src="https://innovative-project-q9p9v.ampt.app/mastodon.png"
88            style="width: 16px; height: 16px"
89            alt="mastodon"
90          />
91          Mastodon
92         </a>
93        <a class="link" href="https://github.com/jottenlips">
94          <img
95            style="width: 16px; height: 16px"
96            src="https://img.icons8.com/ios-filled/50/000000/git.png"
97            alt="github"
98          />
99          Github
100        </a>
101        <a class="link" href="https://ottobahn.bandcamp.com/">
102          <img
103            style="width: 16px; height: 16px"
104            src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Bandcamp-button-circle-green.svg"
105            alt="bandcamp"
106          />
107          Bandcamp
108        </a>
109        
110        <a
111          class="link"
112          href="https://www.mountainproject.com/user/201166134/john-ottenlips-franke"
113        >
114          <img
115            style="width: 16px; height: 16px"
116            src="https://images.ctfassets.net/7x51vl0shezi/bPsKzYsWACGBTHstqFgpp/d143cbc129b57cbed94e59aee1996793/best-overall-climbing-app-mountain-project-mobile-app-logo.png"
117            alt="mountainproject"
118          />
119          Mountain Project
120        </a>
121
122        <a
123          class="link"
124          href="https://www.goodreads.com/user/show/101087185-john-ottenlips"
125        >
126        <img
127            style="width: 16px; height: 16px"
128            src="https://cdn-icons-png.flaticon.com/512/4494/4494707.png"
129            alt="goodreads"
130          />
131          Goodreads
132        </a>
133         
134        <p>
135          &copy; 2025 John Ottenlips Franke | Built with HTML, CSS, and a bit of
136          JavaScript. This blog was created with a static site generator I wrote in ReasonML that turns markdown files (.md) into custom styled html and css. Learn more at <a href="https://agavessg.com">agavessg.com</a>.
137        </p>
138        <!-- https://innovative-project-q9p9v.ampt.app/vim_editor.gif -->
139        <a href="https://www.vim.org/">
140          <img
141            style="width: 100px"
142            src="https://innovative-project-q9p9v.ampt.app/vim_editor.gif"
143            alt="vim editor"
144          />
145          </a>
146       </div>
147
148    

148<script>
149      document.addEventListener("DOMContentLoaded", (event) => {
150        document.querySelectorAll("pre code").forEach((el) => {
151          hljs.highlightElement(el);
152        });
153      });
154    </script>

154
155
156    

156<script type="module">
157      // import { fairyDustCursor } from "https://unpkg.com/cursor-effects@latest/dist/esm.js";
158
159      // new fairyDustCursor({
160      //   colors: ["#ef7455", "#e84c7e", "#32a6d6", "#23eeab"],
161      //   fairySymbol: "★",
162      // });
163    </script>

163
164    <footer>
165    <a href="/sitemap/">Sitemap</a>
166  </footer>
167</body>
168</html>