-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
travissouthard
committed
Oct 21, 2024
1 parent
4de5e38
commit 43393e4
Showing
3 changed files
with
278 additions
and
2 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Building the web I want to see | Travis Southard</title> | ||
| <meta property="og:title" content="Building the web I want to see | Travis Southard"> | ||
| <meta property="og:description" | ||
| content=" | ||
| I have made a webring! This feels important to me as I try (along with many others) to build a better | ||
| web. This was a project I have been meaning to take on for some time. I did start with a basic set of | ||
| "> | ||
| <meta property="og:image" content="https://travissouthard.com/assets/images/blog/webring.png"> | ||
| <meta property="og:image:secure_url" content="https://travissouthard.com/assets/images/blog/webring.png"> | ||
| <meta property="og:image:type" content="image/png"> | ||
| <meta property="og:image:width" content="640"> | ||
| <meta property="og:image:height" content="346"> | ||
| <meta property="og:image:alt" content="A brick-like pattern of white rectangles with blue outlines, blue names like Ruby Gertz, Clotheshorse, and many other names of people and projects, plus each rectangle has blue labels with the topics each person/project covers"> | ||
| <meta name="author" content="Travis Southard"> | ||
| <meta name="robots" content="noai, noimageai"> | ||
| <link href="https://jawns.club/@travissouthard" rel="me"> | ||
| <link rel="stylesheet" href="../style.css"> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon_io/apple-touch-icon.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon_io/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon_io/favicon-16x16.png"> | ||
| <link rel="manifest" href="../assets/favicon_io/site.webmanifest"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Travis Southard</h1> | ||
| <p>Philadelphian Software Engineer</p> | ||
| </header> | ||
| <nav><ul> | ||
| <a href="../index.html"> | ||
| <li>Home</li> | ||
| </a> | ||
| <a href="../projects.html"> | ||
| <li>Projects</li> | ||
| </a> | ||
| <a href="../art.html"> | ||
| <li>Art</li> | ||
| </a> | ||
| <a href="../blog.html"> | ||
| <li>Blog</li> | ||
| </a> | ||
| <a href="../about.html"> | ||
| <li>About</li> | ||
| </a></ul></nav> | ||
| <main> | ||
| <h2>Building the web I want to see</h2> | ||
| <div class="detail-view"><ul class="blog-nav"> | ||
| <a href="why-is-some-documentation-better-than-others.html"><li><<</li></a> | ||
| <a href="your-project-is-worth-it.html"><li><</li></a> | ||
| <li></li> | ||
| <li></li> | ||
| </ul> | ||
| <article class="blog-post"> | ||
| <h5>Last updated: Sun Oct 20 2024 | <a href="https://travissouthard.com/blog/building-the-web-i-want-to-see.html">Permalink</a> | <a href="https://travissouthard.com/rss.xml" target="_blank">RSS</a></h5> | ||
|
|
||
| <img src=".././assets/images/blog/webring.png" alt="A brick-like pattern of white rectangles with blue outlines, blue names like Ruby Gertz, Clotheshorse, and many other names of people and projects, plus each rectangle has blue labels with the topics each person/project covers" width="100%"> | ||
| <p class="image-desc"><em>A brick-like pattern of white rectangles with blue outlines, blue names like Ruby Gertz, Clotheshorse, and many other names of people and projects, plus each rectangle has blue labels with the topics each person/project covers</em></p> | ||
|
|
||
|
|
||
| <p> | ||
| <b>I have made a webring!</b> This feels important to me as I try (along with many others) to build a better | ||
| web. This was a project I have been meaning to take on for some time. I did start with a basic set of | ||
| links to friends in the footer of my website, but I wanted to use it more to show the web I usually interact | ||
| with. | ||
| </p> | ||
| <p> | ||
| I would still like to add a little flair and some organization to the webring page, but I am trying to build | ||
| this website without delivering any JavaScript, if possible. I do think the current iteration could go into | ||
| a <code>noscript</code> block and then go and implement the immediate method I am thinking of. I did spend | ||
| quite some time trying to use a <a href="https://editor.p5js.org/travissouthard/sketches/RUw3LR7cIO" | ||
| target="_blank">force-directed graph</a> to help me layout the Venn-diagram-like design I was | ||
| originally imagining. In this case, a "Done is better than perfect" approach had to be taken. | ||
| </p> | ||
| <p> | ||
| The web has <a href="https://xoxofest.com/2024/videos/molly-white/" target="_blank">become less magical</a>. | ||
| There is <a | ||
| href="https://doctorow.scribe.rip/the-specific-process-by-which-google-enshittified-its-search-1ffd3b02d205" | ||
| target="_blank">a lot of evidence</a> pointing to search engines largely getting worse | ||
| and nigh unusable and the state of the web (as most people use it) has become <a | ||
| href="https://twitter.com/tveastman/status/1069674780826071040" target="_blank">"five websites, each | ||
| consisting of screenshots of text from the other four."</a> | ||
| </p> | ||
| <p> | ||
| I remember the web feeling very magical and largely found the best websites from word of mouth from people I | ||
| knew. The exception to this largely was finding webcomics from the footers of <a | ||
| href="https://rice-boy.com/" target="_blank">webcomics</a> <a href="https://www.nedroid.com/" | ||
| target="_blank">I</a> <a href="https://www.kcgportfolio.site/" target="_blank">was</a> <a | ||
| href="https://www.octopuspie.com/" target="_blank">already</a> <a href="https://www.smbc-comics.com/" | ||
| target="_blank">reading</a>. Many of the comics I was reading would have a "My friends" section with | ||
| links to their comics. Even then that felt very powerful and community-oriented, but as discovery and | ||
| recommendation algorithms have dominated those five website we go to, that kind of list feels almost | ||
| transgressive. | ||
| </p> | ||
| <p> | ||
| Facebook and Twitter both punish users for linking to anything that's outside their walled gardens. | ||
| Instagram only allows for one external link per account (the famous "link in bio"), which has led to | ||
| services like Linktree because of course we all have more than one link to share. But these are all | ||
| platforms where, if you were to be banned, you would lose access to everything if it was the only place you | ||
| kept your photos, videos, jokes, etc. Or <a | ||
| href="https://www.nytimes.com/2019/03/19/business/myspace-user-data.html" target="_blank">the site may | ||
| have a catastrophic data failure</a> and lose everything. | ||
| </p> | ||
| <p> | ||
| The method I have appreciated for avoiding getting shut out by some billionaire has been <a | ||
| href="https://indieweb.org/POSSE" target="_blank">POSSE</a> (Publish (on your) Own Site; Syndicate | ||
| Elsewhere). I post blogs, art, and projects on my own site first, then share them to social media I use. | ||
| Having your own website is a way to have aesthetic control over your own space as well! Almost none of the | ||
| large platforms allow you to customize your page with more than a profile picture, banner, and | ||
| <em>MAYBE</em> a highlight color. But those aeshetics matter. They help set us apart, express ourselves, and | ||
| signal to others that we may be aligned just on sight. | ||
| </p> | ||
| <p> | ||
| Making a website can certainly seem daunting. You don't have to handcraft code for a website (though it is | ||
| fun, and I like it myself). There are many WYSIWYG (What You See Is What You Get (pronounced <em>wizzy | ||
| wig</em>)) options out there from the big corporate spaces or more indie spaces like <a | ||
| href="https://noblogs.org/" target="_blank">NoBlogs</a> or <a href="https://neocities.org/" | ||
| target="_blank">NeoCities</a>. In an increasingly online space, having your own little place to call | ||
| your own feels more and more necessary. And if you want to jump into the deep end, you could learn to code | ||
| and also <a href="https://github.com/iffybooks/host-a-website-at-home" target="_blank">how to self-host a | ||
| website in your own home</a>. | ||
| </p> | ||
| <p> | ||
| We all have cool businesses, practices, hobbies, and more that we would like to share with others, so we | ||
| should have control over how we present that, and how we connect to each other. So please, build your own | ||
| sites. Make them how you want them (which may include making something crazily maximalist, go for it), and | ||
| link to your friends and the people whose work you like most. The <a href="https://indieweb.org/" | ||
| target="_blank">Indie Web</a> is already a growing movement and there's some great things being built. | ||
| The future of the web is many more small connected sites each with cool, niche, resource-rich pages. | ||
| </p> | ||
|
|
||
| <p> | ||
| <em> | ||
| Thank you for reading! | ||
| <a href="https://ko-fi.com/travissouthard" target="_blank"> | ||
| Please consider supporting this blog. | ||
| </a> | ||
| </em> | ||
| </p> | ||
| </article> | ||
| <ul class="blog-nav"> | ||
| <a href="why-is-some-documentation-better-than-others.html"><li><<</li></a> | ||
| <a href="your-project-is-worth-it.html"><li><</li></a> | ||
| <li></li> | ||
| <li></li> | ||
| </ul></div> | ||
| </main> | ||
| <script src="app.js"></script> | ||
| <footer><ul> | ||
| <a href="../index.html"> | ||
| <li>Home</li> | ||
| </a> | ||
| <a href="../projects.html"> | ||
| <li>Projects</li> | ||
| </a> | ||
| <a href="../art.html"> | ||
| <li>Art</li> | ||
| </a> | ||
| <a href="../blog.html"> | ||
| <li>Blog</li> | ||
| </a> | ||
| <a href="../about.html"> | ||
| <li>About</li> | ||
| </a> | ||
| <a href="../webring.html"> | ||
| <li>Webring</li> | ||
| </a> | ||
| <a href="../rss.xml"> | ||
| <li>RSS Feed</li> | ||
| </a> | ||
| <a href="https://github.com/travissouthard"> | ||
| <li>GitHub</li> | ||
| </a> | ||
| <a href="../resume.html"> | ||
| <li>Resumé</li> | ||
| </a></ul> | ||
| <div class="ml-embedded" data-form="5G9C2m"></div> | ||
| </footer> | ||
| <script> | ||
| (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[]) | ||
| .push(arguments);},l=d.createElement(e),l.async=1,l.src=u, | ||
| n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);}) | ||
| (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml'); | ||
| ml('account', '1030264'); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters