diff options
| -rw-r--r-- | forgejno.html | 51 | ||||
| -rw-r--r-- | index.html | 73 | ||||
| -rw-r--r-- | prose.css | 82 | ||||
| -rw-r--r-- | soplt.html | 89 | ||||
| -rw-r--r-- | stars.js | 57 | ||||
| -rw-r--r-- | style.css | 2 | ||||
| -rw-r--r-- | toc.js | 49 | ||||
| -rw-r--r-- | writing.html | 12 |
8 files changed, 256 insertions, 159 deletions
diff --git a/forgejno.html b/forgejno.html index 71246e7..a413440 100644 --- a/forgejno.html +++ b/forgejno.html @@ -7,42 +7,9 @@ <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="prose.css"> - <style> - summary { - font-family: 'Gelasio'; - color: #888; - } - summary::marker { - color: #888; - } - - code { - font-size: 1rem; - color: #00ff78; - } - </style> - <script> - function htmlTableOfContents() { - var toc = document.getElementById('toc-list'); - var headings = document.body.querySelectorAll('h1, h2, h3, h4, h5, h6'); - headings.forEach(function (heading, index) { - var link = document.createElement('a'); - link.setAttribute('href', '#'+heading.id.toLowerCase()); - link.textContent = heading.textContent; - - var li = document.createElement('li'); - li.appendChild(link); - - toc.appendChild(li); - }); - } - </script> + <script src="toc.js"></script> </head> - <body onload="htmlTableOfContents();"> - <div class="toc"> - <ul id="toc-list"></ul> - </div> - + <body> <div class="content"> <h1 id="title">You Don't Need Forgejo</h1> <p><a href="https://mitchellh.com/writing/ghostty-leaving-github">People</a> @@ -69,7 +36,7 @@ <p class="comment">I'll be using Caddy as the webserver for this setup, but I'll link tutorials for NGINX and Apache if prefer xml configuration files and manual https certificates ;)</p> <p>To keep everything organized, I'll run cgit under a user called "git". Our git repos will be stored in this directory.</p> - <p><code>$ useradd -r -d /var/lib/cgit -s /usr/bin/git-shell git</code></p> + <code>$ useradd -r -d /var/lib/cgit -s /usr/bin/git-shell git</code> <h3 id="cfg-fcgiwrap">fcgiwrap</h3> <p>cgit is served as a <a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface">cgi application</a>.</p> @@ -88,7 +55,7 @@ <li><p>Install cgit with a package manager. This will place the cgit files at /var/www/htdocs/cgit</p></li> <li> <p>Make sure that location is owned by "git", but is readable by all users:</p> - <p><code>$ chown -R git /var/www/htdocs/cgit && chmod -R 764 /var/www/htdocs/cgit</code></p> + <code>$ chown -R git /var/www/htdocs/cgit && chmod -R 764 /var/www/htdocs/cgit</code> </li> </ol> @@ -109,24 +76,22 @@ }</code></pre> <h3 id="cfg-shell">Lock down SSH access</h3> - <p>Using <code>git-shell</code> - blocks normal shell access and allows only git-style SSH commands.</p> + <p>Using <code>git-shell</code> blocks normal shell access and allows only git-style SSH commands.</p> <ol> - <li><p>Create an SSH directory for the <code>git</code> - user: <code>$ install -d -o git -g git -m 700 /var/lib/cgit/.ssh</code></p></li> + <li><p>Create an SSH directory for the git user: <code>$ install -d -o git -g git -m 700 /var/lib/cgit/.ssh</code></p></li> <li><p>Add your public key to <code>/var/lib/cgit/.ssh/authorized_keys</code> with mode <code>600</code>.</p></li> </ol> <h3 id="cfg-repos">Create some repos</h3> <p>Create a bare repository:</p> - <p><code>$ sudo -u git git init --bare /var/lib/cgit/example</code></p> + <code>$ sudo -u git git init --bare /var/lib/cgit/example</code> <p>Push to it from your local machine:</p> <pre><code>$ git remote add origin git@git.my.tld:example $ git push -u origin main</code></pre> <h3 id="cfg-cgitrc">cgitrc</h3> - <p>A clean default /etc/cgitrc file might look like this:</p> + <p>A clean default <code class="path">/etc/cgitrc</code> file might look like this:</p> <pre><code>css=/cgit.css logo= virtual-root=/ @@ -10,85 +10,36 @@ body { align-items: center; } - + .content { width: 47ch; + z-index: 2; } - - h1 { - text-align: center; - } - - #bg { - position: fixed; - inset: 0; - pointer-events: none; - } - - .star { - position: absolute; - width: 3px; - height: 3px; - border-radius: 50%; - background: white; - box-shadow: 0 0 4px white; - } - + .cards { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } - + .card { font-family: 'Roboto Mono'; - color: white; + font-weight: 450; + color: #e6e6e6; text-decoration: none; transition: color 0.1s ease; - } - - .card:hover { - color: #4DA3FF; + + &:hover { + color: #4DA3FF; + } } </style> + <script src="stars.js"></script> </head> <body> - <div id="bg"></div> - <script> - const bg = document.querySelector("#bg"); - for (let i = 0; i < 100; i++) { - const star = document.createElement("div"); - star.classList.add("star"); - - star.x = Math.random() * window.innerWidth; - star.y = Math.random() * window.innerHeight; - - star.vx = (Math.random() - 0.5) * 0.1; - star.vy = (Math.random() - 0.5) * 0.1; - - star.style.left = `${star.x}px`; - star.style.top = `${star.y}px`; - - bg.appendChild(star); - } - - function animate() { - for (const s of bg.children) { - s.x += s.vx; - s.y += s.vy; - - s.style.left = `${s.x}px`; - s.style.top = `${s.y}px`; - } - - requestAnimationFrame(animate); - } - - animate(); - </script> <div class="content"> - <h1>Collin Williams</h1> + <h1 style="text-align: center;">Collin Williams</h1> <div class="cards"> <a class="card" href="https://bsky.app/profile/cwilliams1221.bsky.social">Bluesky</a> <a class="card" href="https://tangled.org/cwilliams1221.bsky.social">Tangled</a> @@ -1,50 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap'); -html, -body { - overflow-x: hidden; - overflow-y: auto; -} - -body { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 75ch) minmax(0, 1fr); - align-items: start; - column-gap: 2rem; - padding: 2rem 1.25rem 4rem; -} - -.toc { - grid-column: 1; - width: min(17rem, 22vw); - position: fixed; - top: 32px; - left: max(0.75rem, calc(50vw - 37.5ch - 20rem)); - max-height: calc(100vh - 2rem); - overflow-y: auto; - padding-right: 0.75rem; - z-index: 1; -} - -.toc ul { - margin: 0; - padding-left: 1rem; -} - -.toc li { - margin-bottom: 0.35rem; -} - .content { - grid-column: 2; width: 100%; - margin: 0 auto; - padding: 0 0 2rem; max-width: 75ch; - height: auto; - flex-grow: 0; - flex-shrink: 1; - overflow: visible; } p { @@ -57,12 +15,23 @@ p { a { color: #4DA3FF; transition: color 0.2s ease, background-color 0.2s ease; + border-radius: 3px; + + &:hover { + background-color: #4DA3FF; + color: #121212; + text-decoration: none; + } +} + +code { + font-family: 'Roboto Mono'; + font-size: 0.9rem; + color: #00ff78; } -a:hover { - background-color: #4DA3FF; - color: #121212; - text-decoration: none; +li { + font-family: 'Gelasio'; } li::marker { @@ -105,15 +74,20 @@ p.comment { padding: 1rem 1rem 3rem; } - .toc { - position: static; - width: auto; - max-height: none; - margin-bottom: 1.25rem; - padding-right: 0; - } - .content { padding: 0; } } + +summary { + font-family: 'Gelasio'; + color: #888; + + &::marker { + color: #888; + } +} + +code .path { + color: #888; +} diff --git a/soplt.html b/soplt.html new file mode 100644 index 0000000..4979e75 --- /dev/null +++ b/soplt.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Summer of PLT</title> + + <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="prose.css"> + <script src="toc.js"></script> +</head> +<body> + <div class="content"> + <h1 id="title">Summer of PLT</h1> + <p>Looking for a summer coding project? Try making a programming language!</p> + <p>I think that every programmer, new or experienced, could benefit from understanding a little bit about how the languages they use daily actually work.</p> + <p>As such, this is my collection of resources that I used to teach myself a little bit of Programming Language Theory last summer, which concluded in my creation of <a href="https://github.com/bluedragon1221/ci">CI lisp</a>.</p> + <p>I'm planning on doing something similar this summer, so I figured I'd invite other people to try a 'Summer of PLT' too.</p> + <p class="comment">Disclaimer: I'm just a guy with no formal education in PLT. Like <a href="https://danilafe.com/blog/i_love_programming_languages">Daniel Fedorin said</a>, I just <em>love the field of programming languages</em>.</p> + + <h2 id="read">Read a Book</h2> + <p> + If you're new to the field of programming languages, my first piece of advice is READ CRAFTING INTERPRETERS! + <span style="color: #666">(or at least the first section, "A Treewalking Interpreter")</span> + In my opinion, there is no better way to break into the field of PLT than by reading Bob Nystrom's book on the subject: <a href="https://craftinginterpreters.com">Crafting Interpreters</a>. + There's also a free HTML version on his site if you don't feel like paying money.</p> + + <p>After that, I would suggest looking into Lisp.</p> + + <h2 id="lisp">Make a Lisp</h2> + <p>Lisp is one of the foundational language of PLT. My advice to anyone trying to start in this field would be to make a Lisp. Its minimal syntax makes parsing and interpreting much easier.</p> + <p>For a nice overview (and a bit of history), check out the Wikipedia page on Lisp: <a href="https://en.wikipedia.org/wiki/Lisp_(programming_language)">Lisp (programming language)</a>.</p> + + <p>Before making your lisp, it would probably be good if you knew Lisp. Here's a good resource for that: <a href="https://lisp-lang.org/learn/getting-started">lisp-lang.org</a>.</p> + <p class="comment">Alternatively, you could consider going down the Emacs rabbit hole to teach yourself lisp. In the Emacs environment, you'll quickly gain proficiency with the parentheses, but you'll probably lose at least a few weeks in the process.</p> + + <p>Theory-wise, I would recommend reading the original John McCarthy Lisp paper (be prepared for dense academic writing though): <a href="https://www.cs.tufts.edu/~nr/cs257/archive/john-mccarthy/recursive.pdf">Recursive Functions of Symbolic Expressions and Their Computation by Machine</a>.</p> + <p>The C2 lisp rant is also a fun read (but by no means required): <a href="https://wiki.c2.com/?LostInaSeaofParentheses">Lost Ina Seaof Parentheses</a>.</p> + + + <p>If you want more of a guided, handhold-y tutorial for making a lisp clone, I can only recommend <a href="https://github.com/kanaka/mal">mal - Make a Lisp</a>. I personally have not gone through it, but I've heard good things.</p> + <p class="comment">Alternatively, ask an LLM to help you learn how programming languages work. Just make sure that you're actually learning, not just copying whatever it says to do. Try something like "Don't give me any code, just explain to me..."</p> + + <h2 id="next">What next?</h2> + <p>After you make your lisp, you can use it as a playground for more ideas in the field of PLT.</p> + + <h3 id="lambda">Lambda Calculus</h3> + <p> + If you find yourself seeking more of the theory-side of PLT, consider learning Lambda Calculus and Church Encoding and implementing them in your lisp! + </p><p> + There's tons of resources on Lambda Calculus, but you can't go wrong with a skim of Alonzo Church's original book on the subject, <a href="https://compcalc.github.io/public/church/church_calculi_1941.pdf">The Calculi of Lambda-Conversion</a> + </p><p>Or you don't feel up to reading 1940s academic rhetoric, the Wikipedia page on Lambda Calculus is nice: <a href="https://en.wikipedia.org/wiki/Lambda_calculus">Lambda calculus</a> + </p> + + <h3 id="monads">Monadic IO</h3> + <p>Also on the theory-heavy side, you could learn about Haskell's system for safe IO operations which use monads.</p> + <p>This paper on the subject (discovered on the Haskell wiki) is a pretty dense, but has all of the foundational ideas for Monadic IO in Haskell: <a href="https://web.archive.org/web/20140303101716/http://www-fp.dcs.st-and.ac.uk/~kh/papers/io-tutorial/io-tutorial.html">Monadic I/O in Haskell 1.3</a>.</p> + + <h3 id="sugar">Syntactic Sugar</h3> + <p> + If you're looking more into the practical side of PLT, you could look into adding syntactic sugar to your lisp. + One source to look into might be David Wheeler's <a href="https://dwheeler.com/readable/sweet-expressions.html">Sweet Expressions</a>. + </p> + + <h3 id="chompchomp">Bytecode VM</h3> + <p> + If you're interested in becoming more like the "real programming languages", you could look into writing a bytecode VM for your language. + It's a big undertaking, but it's outlined very well in the second section of Crafting Interpreters, <a href="https://craftinginterpreters.com/a-bytecode-virtual-machine.html">A Bytecode Virtual Machine</a>. + </p> + + <h3 id="cas">Make a CAS (?)</h3> + <p> + If you're a math nerd (like me), you could look into writing a CAS hosted in your lisp. + For me, this meant writing a deep pattern matching system and substitution engine. + Definitely a fun project! + </p> + + <h3 id="no">Try something else</h3> + <p>Maybe you're sick of lisp? That's fine! There's lots of other PLT stuff that might suit your fancy:</p> + <ul> + <li><p>Make a Forth -- Sorry, I don't have very much information on this one, but stack-based languages are pretty neat!</p></li> + <li><p>Make a Python -- You can extend the ideas of lexing and parsing to a more complicated syntax, leading to more of a Python-like experience</p></li> + </ul> + + <h2 id="contact">Contact</h2> + <p>Did I interest you in a 'Summer of PLT'? Let me know! I'd love to see some toy lisps this summer!</p> + </div> +</body> +</html>
\ No newline at end of file diff --git a/stars.js b/stars.js new file mode 100644 index 0000000..347d7c0 --- /dev/null +++ b/stars.js @@ -0,0 +1,57 @@ +function animate() { + const bg = document.querySelector("#bg"); + + for (const star of bg.children) { + star.x += star.vx; + star.y += star.vy; + + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; + } + + requestAnimationFrame(animate); +} + +document.addEventListener("DOMContentLoaded", () => { + const bg = document.createElement("div"); + bg.setAttribute("id", "bg"); + + const numStars = Math.floor((window.innerWidth * window.innerHeight)/10_000); + for (let i = 0; i < numStars; i++) { + const star = document.createElement("div"); + star.classList.add("star"); + + star.x = Math.random() * window.innerWidth; + star.y = Math.random() * window.innerHeight; + + star.vx = (Math.random() - 0.5) * 0.2; + star.vy = (Math.random() - 0.5) * 0.2; + + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; + + bg.appendChild(star); + } + document.body.prepend(bg); + + var styleBlock = document.createElement("style"); + styleBlock.textContent = ` + #bg { + position: fixed; + inset: 0; + pointer-events: none; + } + + .star { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + background: #e6e6e6; + box-shadow: 0 0 4px white; + } + `; + document.head.append(styleBlock); + + requestAnimationFrame(animate); +})
\ No newline at end of file @@ -9,13 +9,13 @@ html, body { margin: 0; padding: 0; min-height: 100vh; - overflow: hidden; } body { display: flex; justify-content: center; align-items: flex-start; + padding-top: 2rem; } h1 { @@ -0,0 +1,49 @@ +document.addEventListener("DOMContentLoaded", () => { + var tocDiv = document.createElement("div"); + tocDiv.classList += "toc"; + var toc = document.createElement("ul"); + + document.body.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => { + var link = document.createElement('a'); + link.setAttribute('href', '#'+heading.id.toLowerCase()); + link.textContent = heading.textContent; + + var li = document.createElement('li'); + li.appendChild(link); + + toc.appendChild(li); + }); + + tocDiv.append(toc); + document.body.prepend(tocDiv); + + var styleBlock = document.createElement("style"); + styleBlock.textContent = ` + .toc { + position: fixed; + width: 17rem; + top: 32px; + left: calc(50vw - 37.5ch - 20rem); + padding-right: 0.75rem; + z-index: 1; + + ul { + margin: 0; + padding-left: 1rem; + line-height: 1.4; + } + + li { + margin-bottom: 0.35rem; + font-size: 1.1rem; + } + } + + @media (max-width: 1000px) { + .toc { + display: none; + } + } + `; + document.head.append(styleBlock); +})
\ No newline at end of file diff --git a/writing.html b/writing.html index d95ba16..bceef66 100644 --- a/writing.html +++ b/writing.html @@ -7,10 +7,22 @@ <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="prose.css"> + <script src="stars.js"></script> + <style> + body { + align-items: center; + } + + .content { + width: fit-content; + } + </style> </head> <body> <div class="content"> + <h1>My Writing</h1> <ul> + <li><p><a href="./soplt.html">Summer of PLT</a></p></li> <li><p><a href="./forgejno.html">You Don't Need Forgejo</a></p></li> </ul> </div> |