Shellsharks Blogroll - BlogFlock
2026-06-17T12:51:40.442Z
BlogFlock
Adepts of 0xCC, destructured, Trail of Bits Blog, fLaMEd, Aaron Parecki, Westenberg, James' Coffee Blog, gynvael.coldwind//vx.log (pl), joelchrono, Evan Boehs, Kev Quirk, cool-as-heck, Posts feed, Sophie Koonin, cmdr-nova@internet:~$, <span>Songs</span> on the Security of Networks, Werd I/O, Johnny.Decimal, Robb Knight, Molly White, Hey, it's Jason!, Terence Eden’s Blog
Adding a Town Square - Kev Quirk
https://kevquirk.com/town-square
2026-06-17T09:24:00.000Z
<p>I recently learned about <a href="https://github.com/cauenapier/TownSquare/">this fantastic project</a> where visitors are able to "chat" with one another in a fun and private way.</p>
<p>I had to try it!</p>
<p>So now, at the bottom of every page on this site, you will see my little town square. Please take a look and have some fun with it. If you want to learn more about Town Square, you can take a look at <a href="https://cauenapier.com/blog/townsquare/">this post</a> from its creator, Cauê Napier.</p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=Adding%20a%20Town%20Square">reply to this post by email</a>, or <a href="https://kevquirk.com/town-square#comments">leave a comment</a>.</p>
</div>
📝 2026-06-17 07:04: We have the incubator setup incubating a dozen eggs, including the last 2 our hen... - Kev Quirk
https://kevquirk.com/2026-06-17-0704
2026-06-17T06:04:00.000Z
<p>We have the incubator setup incubating a dozen eggs, including the last 2 our hen that was caught by the fox layed.</p>
<p>Expect regular updates. 🐣</p>
<p><img src="https://kevquirk.com/content/images/2026-06-17-0704/1000009739.webp" alt="1000009739" /></p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=%F0%9F%93%9D%202026-06-17%2007%3A04">reply to this post by email</a>, or <a href="https://kevquirk.com/2026-06-17-0704#comments">leave a comment</a>.</p>
</div>
In need of numbers? - Johnny.Decimal
https://johnnydecimal.com/blog/0221-in-need-of-numbers/
2026-06-17T02:32:49.000Z
<p>It took me a while to figure out what this even was. So much potential…</p>
<figure class="figure jdimage jdimage--auto-dark"> <picture> <img class="figure__inner" alt="A photograph of a beige control panel, attached to a wall. There's a grid of 5 × 6 buttons – except they're not buttons, they're just a mold where the buttons would be. Only the lower left of these 30 potential buttons is actually a button, and it's very lightly embossed with the word 'CALL'." height="1280" loading="lazy" src="https://johnnydecimal.com/blog/0221-So_much_potential-1280x1280.jpeg" width="1280"> </picture> </figure>
World Cup, Sci-Fi movies, Birthday! - W24 - Joel's Log Files
https://joelchrono.xyz/blog/w24
2026-06-16T22:00:00.000Z
<p>Hey hey! Good news, this was my birthday week! And it has been pretty awesome. The World Cup started, and as much as I hate everything behind the politics and the greediness of FIFA. Us Mexicans and many other people choose to focus on the beautiful game that brings the world together, no matter what.</p>
<p>Alas, these are my notes from June 9 to 15, 2026, enjoy!</p>
<ul>
<li>
<p>🚲 Went on another nice ride in the park and saw a lot of bicycles on the way. I also noticed how literally none of them were locked. Saw plenty of them on the move too, I actually struggled to keep up with them and got left behind by a bunch of senior citizens.</p>
</li>
<li>
<p>⚽ The World Cup is upon us, and as a Mexican, it is my duty to support my team like an absolute maniac until they mess it up badly. They started out showing promise! But backing away instead of trying for more. We’ll see how it goes!</p>
</li>
<li>
<p>📺 My workplace (as every decent workplace in Mexico should have done) set up all the TVs to watch the game live and also gave us free snacks and drinks. The atmosphere was pretty cool. Although the TV in our office specifically had some signal issues. All in all, three hours of not-working while at work were nice.</p>
</li>
<li>
<p>🌧️ The constant rains have exposed a couple of big leaks in my bed room, and I’ve been woken up midnight because of the water dripping in. I’ve used two buckets and they both were filled halfway by the morning, RIP.</p>
</li>
<li>
<p>✈️ My sister visited due to the vacation period so she managed to show up for my birthday and help organize it a bit this time.</p>
</li>
<li>
<p>🍿 My family and I went to the movies to watch <em>Disclosure Day</em>, we also got some cool shirts and had a blast overall.</p>
</li>
<li>
<p>🥳 Another birthday week happened, and I am now twenty six years young. This is weird. in four more years I’ll be thirty, by the next world cup I’ll be thirty!</p>
</li>
<li>
<p>🌕 Had a small birthday party where I invited some friends and the theme was <em>space</em>. My cake was made by my sister and it was themed after the moon! The candle was an astronaut. Of course everyone gave me Star Wars themed gifts lol (I love <em>Star Wars</em> so that’s not a complaint).</p>
</li>
<li>
<p>🃏 We played a bunch of games during the party, some of the highlights were <em>Happy Salmon</em>, <em>Cheat</em> and <em>Snap</em>.</p>
</li>
</ul>
<h2 id="watching">Watching</h2>
<ul>
<li>
<p><strong>The World Cup</strong> - I of course watched the opening for the World Cup and was happy to see the fans of the sport having a blast, the atmosphere seemed great, even if the 2-0 result of Mexico vs Sudafrica left me wanting more. I also watched the match between Japan and the Netherlands, and that was an absolute roller coaster. I was rooting for Japan (because of <em>Blue Lock</em> and how they played in 2022), and they definitely delivered. Great stuff. I screamed more than with the Mexican match, since I was shy at the office, but there were also like no stakes compared to Japan.</p>
</li>
<li>
<p><strong>Disclosure Day</strong> - Steven Spielberg is back, and this movie felt like a Spielberg movie for sure. Lots of fascinating elements, many thought-provoking situations, a lot of chase sequences and gripping emotional moments. There were some clichés and some convenient moments, but I really enjoyed it, even if it felt a little long. It’s a movie that deals with the truth and how it should be handled, and I found it fascinating. While I agree with the message and concepts, the execution felt a bit mixed.</p>
</li>
<li>
<p><strong>The Martian</strong> - Speaking of execution, this movie gets all of that right. One of the best sci-fi films I’ve ever seen. This is a rewatch and it continues to just be cool. Humanity against all odds will never get boring for me. A guy is left for dead and ends up stranded on Mars, and has to make contact with Earth and try to get by, using any means necessary, while NASA and the world try to figure out how to save him before time and rations run out.</p>
</li>
<li>
<p><strong>Mission to Mars</strong> - This movie from the 2000s was a weird choice to watch after <em>The Martian</em>. A sci-fi very focused on the “fi” side of things, but in an interesting way. A team of astronauts is killed by a weird sand snake, another group ends up attacked by micrometeorites, and in the end, there is a <em>2001</em>-esque sequence where the truth about humanity’s origin is revealed and some weird animation effects are used and honestly? The hole thing is a trip. The visual effects are actually stunning, the zero gravity sequences (including a whole dance) are peak. This movie <em>looks awesome</em>, but it has pacing issues and some cosmical things going on and it kinda works but doesn’t but I really liked it so whatever.</p>
</li>
<li>
<p><strong>Max Steel: Bio Crisis</strong> - I continue watching my childhood movies and this one is just plain fun. It is much more laid back than the first ones, which can be a deterrent, but seeing Max Steel going through every obstacle making funny remarks and jokes is hilarious to me. This movie features a new character addition to the world. Cytro, a robot designed to destroy Max Steel, but ends up becoming an ally on his quest to stop an evil scientist from poisoning an island for his own gains.</p>
</li>
</ul>
<h2 id="gaming">Gaming</h2>
<h3 id="completed">Completed</h3>
<p><strong>Metroid Prime Remastered</strong> - This game, this game is awesome! I ended up completing it and fighting against the last two bosses, after acquiring a bunch of the collectibles. I gave up on 100% that, as I didn’t want to go through all the regions of the game again. This is an awesome title and I will definitely write my review of it in the future. I highly recommend it already.</p>
<h3 id="started">Started</h3>
<p><strong>Transistor</strong> - All of a sudden, I picked up my Nintendo Switch after beating Metroid, and decided to open up this game for once and WOW. The atmosphere of this is already immaculate. We control Red, a lady who picks up a giant sword out of a dead man, and the sword talks! But it’s all so weird and mysterious, it has this strange, I don’t know, like a Cyberpunk Neon Noir atmosphere. There are a lot of questions in my head about how this will all play it, but for now, I’ll keep going!</p>
<p>The combat has been really interesting, with a planning mechanic that lets you perform a sequence of attacks in slow mo, and then see how they play out. It’s like programming your movements. It has been incredible to see and I am trying to get better at it. It’s a game from the creators of <em>Hades</em>, and it already shows.</p>
<p><strong>Survidice</strong>. This is a Mexican indie <strong>board game</strong> developed by Vadle Studios where you have to survive through hordes of zombies by using dice! Each character is a dice, the actions and steps you can move is defined by the value of your dice, each zombie is a dice and they have the same rules. It’s a cooperative game where every character has to help each other out. You can also play walls to block off some paths and make zombies take longer to get to you. There’s different types of zombies, that movie faster or tank some damage.</p>
<p>We played a whole game and it was really exhilarating at times when you got into it. It is divided in two phases, players move, and then do the zombies. Because of this, it has vibes similar to a Tactics RPG. The board has special spawn points for every type of zombie dice, which are always rerolled after every wave. It is such a complete package and it offers a lot of replayability, with ways to make the game much harder by adding extra zombies or altering the way movement works.</p>
<h3 id="ongoing">Ongoing</h3>
<p><strong>Hollow Knight: Silksong</strong> - Indeed, I have returned. I have returned to this title because I want to get to Act 3 for once! There are so many extra boss fights and things I’ve heard about, so I really look forward to getting there sometime soon. For now Transistor got the focus though, and I may replace it or add it to my Summer Game Challenge.</p>
<h2 id="reading">Reading</h2>
<h3 id="completed-1">Completed</h3>
<ul>
<li><strong>Tiamat’s Wrath (The Expanse #8) by James S.A. Corey</strong> - What a journey so far. And how many changes and things happened here… I really didn’t see a lot of this coming. Many welcome surprises, many losses were had as well. I can’t wait for the final chapter of this journey, the ninth book is coming! I am ready to start… <em>Leviathan Falls</em>.</li>
</ul>
<h3 id="ongoing-1">Ongoing</h3>
<ul>
<li>
<p><strong>Clarkesworld #211 by Neil Clarke</strong> - I am currently reading <em>The Rambler</em> a short story about a bridge that moves and causes mayhem around the city… It seems a bit absurdist and kinda funny and feel free to share your thoughts to explain it to me.</p>
</li>
<li>
<p><strong>My Wife is From a Thousand Years Ago</strong> - Up to chapter 285. This rom-com manhua continues to be very fun.</p>
</li>
<li>
<p><strong>Shikimori’s Not Just a Cutie</strong> - Up to chapter 116. Same same, all fun but nothing super unique by now, just cute couple stuff.</p>
</li>
</ul>
<h2 id="around-the-web">Around the Web</h2>
<h3 id="blog-posts">Blog posts</h3>
<ul>
<li>
<p><a href="https://bojidar-bg.dev/blog/2026-06-15-edc-bag/">Hullo, new EDC bag</a> by Bojidar Marinov</p>
</li>
<li>
<p><a href="https://syls.blog/a-small-check-in/">A Small Check-In</a> - by Syl</p>
</li>
<li>
<p><a href="https://brennan.day/yes-buy-them-a-coffee-support-and-mutual-aid-on-the-indieweb/">Yes, Buy Them a Coffee: Support and Mutual Aid on the IndieWeb</a> - by Brennan Kenneth Brown</p>
</li>
<li>
<p><a href="https://blog.avas.space/llm-circus/">our workplace LLM mass delusion</a> by Ava</p>
</li>
</ul>
<h3 id="youtube">YouTube</h3>
<ul>
<li>
<p><a href="https://youtu.be/6saQ5PpgO24">This Camera Went Missing 15 Years Ago. Let’s Find The Owner</a> by Man + River</p>
</li>
<li>
<p><a href="https://youtu.be/QTJvFcx0DPE">Someone threw out 13 monitors… I took them all</a> by Marcin Plaza</p>
</li>
<li>
<p><a href="https://youtu.be/bAuhWUYz3y4">2027 is already stacked (the games I’m excited for)</a> by Laura’s Cloud Saves</p>
</li>
</ul>
<p>This is day 80 of <a href="https://100daystooffload.com">#100DaysToOffload</a></p>
<p>
<a href="mailto:me@joelchrono.xyz?subject=World Cup, Sci-Fi movies, Birthday! - W24">Reply to this post via email</a> |
<a href="https://fosstodon.org/@joel/116762071130447224">Reply on Fediverse</a>
</p>
Note published on June 16, 2026 at 4:45 PM UTC - Molly White's activity feed
6a317db7f3a5676bc2fa5584
2026-06-16T16:45:43.000Z
<article><div class="entry h-entry hentry"><header></header><div class="content e-content"><p>Setting aside the absurd premise of this op-ed, I love that the writer felt the need to hedge with "not that has been reported"</p><p>"No one's reported that one of the most famous popstars in the world dated a man who at the time was a random oyster farmer from Maine, BUT IT IS POSSIBLE"</p><div class="media-wrapper"><a href="https://storage.mollywhite.net/micro/48e9d1bb19de36ee56ad_Screenshot_20260616-022003.png" data-fslightbox=2a1af6a76b65076b552c><img src="https://storage.mollywhite.net/micro/48e9d1bb19de36ee56ad_Screenshot_20260616-022003.png" alt="@ wsjopinion 13h Did Taylor Swift once date Graham Platner? Not that has been reported, but her songs about dissolute men do echo accounts of women who dated the Maine Democratic Senate nominee, writes Allysia Finley WSJ wsj.com Opinion | Taylor Swift Sings About Graham Platner and Donald Trump" /></a></div></div><footer class="footer"><div class="flex-row post-meta"><div class="timestamp-block"><div class="timestamp">Posted: <a class="u-url" href="https://www.mollywhite.net/micro/entry/202606161243"><time class="dt-published" datetime="2026-06-16T16:45:43+00:00" title="June 16, 2026 at 4:45 PM UTC">June 16, 2026 at 4:45 PM UTC</time>. </a></div></div><div class="social-links"> <span> Also posted to: </span><a class="social-link u-syndication mastodon" href="https://hachyderm.io/@molly0xfff/116760797944266581" title="Mastodon" rel="syndication">Mastodon, </a><a class="social-link u-syndication bluesky" href="https://bsky.app/profile/molly.wiki/post/3mog4e25vl22h" title="Bluesky" rel="syndication">Bluesky</a></div></div><div class="bottomRow"><div class="tags">Tagged: <a class="tag p-category" href="https://www.mollywhite.net/micro/tag/maine" title="See all micro posts tagged "Maine"" rel="category tag">Maine</a>, <a class="tag p-category" href="https://www.mollywhite.net/micro/tag/media" title="See all micro posts tagged "media"" rel="category tag">media</a>, <a class="tag p-category" href="https://www.mollywhite.net/micro/tag/us_politics" title="See all micro posts tagged "US politics"" rel="category tag">US politics</a>. </div></div></footer></div></article>
Read "MAGA Pronatalism is Anti-Freedom No Matter the Packaging" - Molly White's activity feed
6a3149c691f30f1ebeda58c2
2026-06-16T13:04:06.000Z
<article class="entry h-entry hentry"><header><div class="description">Read: </div></header><div class="content e-content"><div class="article h-cite hcite"><div class="title"><a class="u-url u-repost-of" href="https://nobody-wants-this.ghost.io/maga-pronatalism-is-anti-freedom-no-matter-the-packaging/" rel="bookmark">“<span class="p-name">MAGA Pronatalism is Anti-Freedom No Matter the Packaging</span>”</a>. </div><div class="byline"><span class="p-author h-card">Anne Lutz Fernandez</span> in <i class="p-publication">Nobody Wants This</i>. <span class="read-date"> Published <time class="dt-published published" datetime="2026-06-15">June 15, 2026</time>.</span></div><blockquote class="summary p-summary entry-summary">But its sanewashing is underway</blockquote><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><footer class="footer"><div class="flex-row post-meta"><div class="timestamp">Posted: <time class="dt-published" datetime="2026-06-16T13:04:06+00:00" title="June 16, 2026 at 1:04 PM UTC">June 16, 2026 at 1:04 PM UTC</time>. </div></div><div class="bottomRow"><div class="tags">Tagged: <a class="tag p-category" href="https://www.mollywhite.net/feed/tag/extremism" title="See all feed posts tagged "extremism"" rel="category tag">extremism</a>, <a class="tag p-category" href="https://www.mollywhite.net/feed/tag/women's rights" title="See all feed posts tagged "women's rights"" rel="category tag">women's rights</a>. </div></div></footer></article>
Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh) - The Weblog of fLaMEd
https://flamedfury.com/guides/11ty-homepage-neocities-2026/
2026-06-16T12:00:00.000Z
<p>What’s going on, Internet? Way back in 2022 I wrote a <a href="https://flamedfury.com/guides/11ty-homepage-neocities/">guide on building a static site with 11ty and deploying it to Neocities</a>. It’s been one of my most-read posts, but it’s also aged: Eleventy has moved to v3 with a brand new module system, the dev server changed, and my whole workflow has shifted away from GitHub toward <a href="https://forgejo.org/" rel="noopener">Forgejo</a> and <a href="https://codeberg.org/" rel="noopener">Codeberg</a>. So here’s the refresh.</p>
<p>I haven’t hosted my own site on Neocities for years now, but it’s still home to a huge community of personal sites and homepages, especially folks in the <a href="https://32bit.cafe/" rel="noopener">32-Bit Cafe</a>, so this guide is still very much for them.</p>
<p>This guide aims to help you create a homepage using the static site generator (SSG) <a href="https://11ty.dev/" rel="noopener">11ty</a>, keep the code in version control, and deploy it to <a href="https://neocities.org/" rel="noopener">Neocities</a>, first by hand, then automatically.</p>
<p>The homepage that we are creating will take advantage of the <a href="https://mozilla.github.io/nunjucks/" rel="noopener">Nunjucks</a> templating language, allowing us to create a shared header, navigation and footer across all the pages on our homepage.</p>
<p>We will be creating an about, links, and contact pages before diving in and creating the ability to add a blog and a list of all blog posts on the blog page!</p>
<p>We will structure and style the page with a standard HTML5 boilerplate and some basic CSS that should allow you to add in your unique flavour that we all know you love to do.</p>
<aside class="aside flow note">
<div class="aside__content">
<p>This guide assumes the following:</p>
<ul>
<li>You have a basic understanding of HTML and CSS</li>
<li>You have a basic understanding of the command line and terminal</li>
<li>You have Node.js installed (version 18 or newer)</li>
<li>You're using <a href="https://vscodium.com/">VSCodium</a> as your editor</li>
<li>You have a Neocities account</li>
<li>You have somewhere to keep your code: a <a href="https://forgejo.org/">Forgejo</a> instance or a <a href="https://codeberg.org/">Codeberg</a> account</li>
</ul>
</div>
</aside>
<aside class="aside flow note">
<div class="aside__content">
This guide uses Eleventy v3, which is written in modern JavaScript modules (ESM). If you've followed an older 11ty tutorial that used <code>.eleventy.js</code> with <code>module.exports</code>, the config in this guide will look a little different. That's expected.
</div>
</aside>
<h2 id="create-a-new-project"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#create-a-new-project">Create a new project</a></h2>
<p>First off, from a terminal, confirm that you have Node and NPM installed:</p>
<aside class="aside flow note">
<div class="aside__content">
Any terminal will do here: Terminal.app on macOS, the default terminal that ships with whatever flavour of Linux you run, or the latest Windows Terminal on Windows. I use <a href="https://ghostty.org/">Ghostty</a>.
</div>
</aside>
<pre class="language-bash"><code class="language-bash"><span class="token function">node</span> <span class="token parameter variable">-v</span> <span class="token operator">&&</span> <span class="token function">npm</span> <span class="token parameter variable">-v</span>
v22.11.0
<span class="token number">10.9</span>.0</code></pre>
<aside class="aside flow note">
<div class="aside__content">
Eleventy v3 needs Node.js 18 or newer. If your version is older, grab the current LTS release from <a href="https://nodejs.org/">nodejs.org</a> first.
</div>
</aside>
<p>Create a new directory and cd into it:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> 11ty-neocities <span class="token operator">&&</span> <span class="token builtin class-name">cd</span> 11ty-neocities</code></pre>
<p>Initiate a new project:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> init <span class="token parameter variable">-y</span></code></pre>
<p>Install 11ty:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> @11ty/eleventy</code></pre>
<p>Once the 11ty installation is complete, open the project in your favourite code editor:</p>
<pre class="language-bash"><code class="language-bash">codium <span class="token builtin class-name">.</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
Typing <code>codium .</code> into a project directory will open up the project directory in VSCodium.
</div>
</aside>
<p>You should now be in VSCodium with the following project structure:</p>
<pre class="language-text"><code class="language-text">11ty-neocities/
├── node_modules/
├── package.json
└── package-lock.json</code></pre>
<p>Open <code>package.json</code> and update the scripts section to the following:</p>
<pre class="language-js"><code class="language-js"> <span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">"start"</span><span class="token operator">:</span> <span class="token string">"npx @11ty/eleventy --serve"</span><span class="token punctuation">,</span>
<span class="token string-property property">"build"</span><span class="token operator">:</span> <span class="token string">"npx @11ty/eleventy"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>
<p>We also need to tell Node that this is an ESM project. Add <code>"type": "module"</code> to <code>package.json</code>. The file should look like this:</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span>
<span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"11ty-neocities"</span><span class="token punctuation">,</span>
<span class="token string-property property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span>
<span class="token string-property property">"description"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token string-property property">"type"</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span>
<span class="token string-property property">"main"</span><span class="token operator">:</span> <span class="token string">"index.js"</span><span class="token punctuation">,</span>
<span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">"start"</span><span class="token operator">:</span> <span class="token string">"npx @11ty/eleventy --serve"</span><span class="token punctuation">,</span>
<span class="token string-property property">"build"</span><span class="token operator">:</span> <span class="token string">"npx @11ty/eleventy"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token string-property property">"author"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
<span class="token string-property property">"license"</span><span class="token operator">:</span> <span class="token string">"ISC"</span><span class="token punctuation">,</span>
<span class="token string-property property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">"@11ty/eleventy"</span><span class="token operator">:</span> <span class="token string">"^3.1.6"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
<p>The <code>"type": "module"</code> line lets us use modern <code>import</code>/<code>export</code> syntax in our config and JavaScript files.</p>
<p>The <code>start</code> script lets us run <code>npm start</code> to serve our homepage with hot-reload, provided by Eleventy's built-in dev server. Every time you save a change in VSCodium, the browser reloads with your most recent changes, amazing!</p>
</div>
</aside>
<h2 id="create-an-11ty-config-file"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#create-an-11ty-config-file">Create an 11ty config file</a></h2>
<p>From the terminal (or VSCodium), create a new file <code>eleventy.config.js</code> at the project root:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> eleventy.config.js</code></pre>
<p>Open the file in VSCodium and add the following and save:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">"public"</span><span class="token punctuation">,</span>
<span class="token literal-property property">includes</span><span class="token operator">:</span> <span class="token string">"_includes"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
<p>This configuration file tells 11ty what to do.</p>
<p>Setting the <code>input</code> directory to <code>src</code> tells 11ty where to look for changes, this is our working directory.</p>
<p>When changes are detected, 11ty builds the site and outputs it to the <code>output</code> directory <code>public</code> which is where the static html/css/img files are served from, amazing!</p>
</div>
</aside>
<h3 id="gitignore"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#gitignore">.gitignore</a></h3>
<p>As we’re going to be keeping our homepage code in version control, create a <code>.gitignore</code> file in the project root:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> .gitignore</code></pre>
<p>Open the file in VSCodium and add the following and save:</p>
<pre class="language-md"><code class="language-md"><span class="token title important"><span class="token punctuation">#</span> dependencies installed by npm</span>
node_modules
<span class="token title important"><span class="token punctuation">#</span> build artefacts</span>
public</code></pre>
<aside class="aside flow note">
<div class="aside__content">
<p>The .gitignore file is a text file that tells Git which files or folders to ignore in a project.</p>
<p>In this case, our <code>.gitignore</code> file tells git to ignore the <code>node_modules</code> directory and the <code>public</code> directory where our static files are built locally.</p>
</div>
</aside>
<h2 id="start-building-the-homepage"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#start-building-the-homepage">Start building the homepage</a></h2>
<p>Now comes the fun part, building our homepage. 11ty supports a number of templating languages, but the two you’ll reach for most are Markdown and plain HTML. Markdown is the popular choice for content like blog posts: you just write, without <code><html></code> tags getting in the way. HTML is handy when you need precise structure. The best part is you can drop HTML straight into a Markdown file and 11ty renders it correctly, so it’s never one or the other.</p>
<p>For the pages that make up the site’s structure (home, about, links, contact) we’ll use HTML, because it maps neatly onto the layouts and partials we’re about to build. When we get to the blog, we’ll write the posts in Markdown, where it shines. Use whichever fits the job.</p>
<aside class="aside flow tip">
<div class="aside__content">
Want to push <a href="https://www.markdownguide.org/">Markdown</a> further? Once you've finished the guide, try rewriting one of the HTML pages as a <code>.md</code> file. The <a href="https://www.11ty.dev/docs/languages/markdown/">11ty Markdown docs</a> are a good place to start.
</div>
</aside>
<p>Create a <code>src</code> directory at the project root and cd into it:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> src <span class="token operator">&&</span> <span class="token builtin class-name">cd</span> src</code></pre>
<p>Create an <code>index.html</code> file in the terminal or VSCodium:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> index.html</code></pre>
<p>Open the file and add some content:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My New 11ty Homepage on Neocities!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Check out your cool new static site built with
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://11ty.dev<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>11ty<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> on
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neocities.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neocities<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Now from the terminal start 11ty:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> start</code></pre>
<p>If everything has been configured right so far you should see the following:</p>
<pre class="language-bash"><code class="language-bash"><span class="token operator">></span> 11ty-neocities@1.0.0 start
<span class="token operator">></span> npx @11ty/eleventy <span class="token parameter variable">--serve</span>
<span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Writing public/index.html from ./src/index.html <span class="token punctuation">(</span>liquid<span class="token punctuation">)</span>
<span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Wrote <span class="token number">1</span> <span class="token function">file</span> <span class="token keyword">in</span> <span class="token number">0.03</span> seconds <span class="token punctuation">(</span>v3.1.6<span class="token punctuation">)</span>
<span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Watching…
<span class="token punctuation">[</span>11ty<span class="token punctuation">]</span> Server at http://localhost:8080/</code></pre>
<p>Now you can open up <code>http://localhost:8080</code> and check out your new 11ty homepage! It should look like this:</p>
<figure slot="image"><picture> <source type="image/webp" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-480w.webp 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-800w.webp 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" />
<source type="image/jpeg" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-480w.jpeg 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-800w.jpeg 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-1200w.jpeg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" /><img src="https://flamedfury.com/assets/images/11ty-neocities-2026-01-hello-world-1200w.jpeg" width="1200" height="829" alt="A plain Hello World page with a heading and a sentence, in the browser's default styling" loading="lazy" decoding="async" eleventy:ignore="" /></picture><figcaption>A Basic Hello World HTML Page</figcaption></figure>
<p>Amazing! But what we want to avoid is having to write out the <code><html></code> and <code><head></code> and <code><body></code> tags on each and every page, and be able to include a site header, navigation and footer so we don’t have to copy and paste the changes across every page each time we update.</p>
<p>Let’s checkout templating a layout!</p>
<h3 id="create-a-base-layout"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#create-a-base-layout">Create a base layout</a></h3>
<p>Create a new directory <code>_includes/</code> in the <code>src/</code> directory and cd into it:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> _includes <span class="token operator">&&</span> <span class="token builtin class-name">cd</span> _includes</code></pre>
<aside class="aside flow note">
<div class="aside__content">
In a non-demo situation I would create a <code>layouts/</code> directory under <code>_includes/</code> for better organisation. For the sake of simplicity we'll just keep everything in <code>_includes/</code> for now.
</div>
</aside>
<p>Create a file <code>base.njk</code> in the terminal or VSCodium:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> base.njk</code></pre>
<p>Open the file and add the following:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>{{ content | safe }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
<p>We've created <code>base.njk</code> as a Nunjucks template file, hence the <code>.njk</code> file extension. This means we can use Nunjucks' double curly braces for using frontmatter variables.</p>
<p>In our layout template we're calling <code>{{ title }}</code> and <code>{{ content }}</code>.</p>
</div>
</aside>
<p>Now, head back to the <code>index.html</code> file you created earlier, delete the contents and add some front matter and some content:</p>
<pre class="language-html"><code class="language-html">---
title: Hello World!
layout: base.njk
---
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Check out your cool new static site built with
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://11ty.dev<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>11ty<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> on
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neocities.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neocities<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This homepage template is perfect for:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Creating your own space on the web<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Expressing yourself<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Displaying all the gifs you've collected<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Why do you want a homepage?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The web was made for personal homepages, make this one yours<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>If you’ve kept 11ty running and the browser running it should look like this:</p>
<figure slot="image"><picture> <source type="image/webp" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-480w.webp 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-800w.webp 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" />
<source type="image/jpeg" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-480w.jpeg 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-800w.jpeg 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-1200w.jpeg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" /><img src="https://flamedfury.com/assets/images/11ty-neocities-2026-02-template-1200w.jpeg" width="1200" height="829" alt="The homepage now rendered through the base layout, showing the title and the homepage content" loading="lazy" decoding="async" eleventy:ignore="" /></picture><figcaption>A Basic Hello World HTML Page Using a Template</figcaption></figure>
<p>Amazing! Now lets create the additional pages for our homepage.</p>
<p>Create the following pages in the <code>src/</code> directory with the terminal or VSCodium:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> about.html <span class="token operator">&&</span> <span class="token function">touch</span> links.html <span class="token operator">&&</span> <span class="token function">touch</span> contact.html</code></pre>
<p>Open each of them up and add in some front matter and content:</p>
<p>about.html:</p>
<pre class="language-html"><code class="language-html">---
title: About Me
layout: base.njk
---
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Heya 👋 this is my homepage.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>links.html:</p>
<pre class="language-html"><code class="language-html">---
title: Links
layout: base.njk
---
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>These are some of my favourite websites 🔗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://flamedfury.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>fLaMEdFury.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://11ty.dev<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>11ty<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neocities.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neocities<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://32bit.cafe/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The 32-Bit Cafe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>contact.html:</p>
<pre class="language-html"><code class="language-html">---
title: Contact Me
layout: base.njk
---
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Heya 👋 this is my contact page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>You should now be able to browse each of these pages if you kept 11ty running on the following urls:</p>
<p><code>http://localhost:8080/about/</code><br />
<code>http://localhost:8080/links/</code><br />
<code>http://localhost:8080/contact/</code></p>
<p>Great stuff, but that’s no use without a navigation! Let’s take a look at <code>partials</code> and create a shared <code>header</code>, <code>navigation</code>, and <code>footer</code> to bring our homepage together.</p>
<h3 id="creating-our-partials"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#creating-our-partials">Creating our partials</a></h3>
<aside class="aside flow note">
<div class="aside__content">
In a non-demo situation I would create a <code>partials/</code> directory under <code>_includes/</code> for better organisation. For the sake of simplicity we'll just keep everything in <code>_includes/</code> for now.
</div>
</aside>
<p>In the terminal cd into <code>_includes/</code> and create three partial files:</p>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> _includes <span class="token operator">&&</span> <span class="token function">touch</span> header.njk <span class="token operator">&&</span> <span class="token function">touch</span> navigation.njk <span class="token operator">&&</span> <span class="token function">touch</span> footer.njk</code></pre>
<p>Open each of them up and add some content:</p>
<p>header.njk:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to my Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
<p>navigation.njk</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/links/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Links<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
It's important to structure your links with the slashes <code>/</code> on either side of the href <code>/about/</code> to ensure the links are always from the root of the site.
</div>
</aside>
<p>footer.njk:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my footer | © 2026 Me.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Once our partials are created, open <code>base.njk</code> again and update it to include our new elements and partials:</p>
<p>base.njk:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>{% include 'header.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>{% include 'navigation.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
{{ content | safe }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>{% include 'footer.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>If you’ve kept 11ty running and the browser running it should look like this:</p>
<figure slot="image"><picture> <source type="image/webp" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-480w.webp 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-800w.webp 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" />
<source type="image/jpeg" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-480w.jpeg 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-800w.jpeg 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-1200w.jpeg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" /><img src="https://flamedfury.com/assets/images/11ty-neocities-2026-03-partials-1200w.jpeg" width="1200" height="829" alt="The homepage with the shared header, navigation links and footer added from the partial files" loading="lazy" decoding="async" eleventy:ignore="" /></picture><figcaption>A Basic Hello World HTML Page Using a Template and Partials</figcaption></figure>
<p>Amazing! Now lets add the blog.</p>
<h3 id="creating-the-blog"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#creating-the-blog">Creating the blog</a></h3>
<p>Blog posts are mostly prose, so this is where Markdown earns its keep. We’ll write the posts as <code>.md</code> files and let 11ty turn them into pages.</p>
<p>Create a new directory <code>blog</code> in the <code>src</code> directory and cd into it:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> blog <span class="token operator">&&</span> <span class="token builtin class-name">cd</span> blog</code></pre>
<p>Create the following files in the <code>src/blog</code> directory with the terminal or VSCodium:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">touch</span> my-first-post.md <span class="token operator">&&</span> <span class="token function">touch</span> my-second-post.md <span class="token operator">&&</span> <span class="token function">touch</span> my-third-post.md <span class="token operator">&&</span> <span class="token function">touch</span> blog.json</code></pre>
<p>Awesome, Open each of them up in VSCodium and add the following:</p>
<p><a href="http://my-first-post.md/" rel="noopener">my-first-post.md</a>:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml">title: My First Blog Post</span>
<span class="token punctuation">---</span></span>
This is my first blog post</code></pre>
<p><a href="http://my-second-post.md/" rel="noopener">my-second-post.md</a>:</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml">title: My Second Blog Post</span>
<span class="token punctuation">---</span></span>
This is my second blog post</code></pre>
<p><a href="http://my-third-post.md/" rel="noopener">my-third-post.md</a></p>
<pre class="language-markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml">title: My Third Blog Post</span>
<span class="token punctuation">---</span></span>
This is my third and final blog post</code></pre>
<p>blog.json</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>
<span class="token property">"layout"</span><span class="token operator">:</span> <span class="token string">"blog"</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
What we've done here with the directory data file <code>blog.json</code> is made it so that every blog post in the <code>/blog/</code> directory has the <code>blog.njk</code> layout applied without having to include it in each post's front matter.
</div>
</aside>
<p>We better create a blog layout so it renders!</p>
<p>Head back to the <code>_includes</code> directory to create a new layout file:</p>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>/_includes <span class="token operator">&&</span> <span class="token function">touch</span> blog.njk</code></pre>
<p>Open <code>blog.njk</code> up in VSCodium and add the following:</p>
<p>blog.njk:</p>
<pre class="language-html"><code class="language-html">---
layout: base.njk
---
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span>{{ content | safe }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
What we've done here is called layout chaining. This is an 11ty feature that lets us extend a child layout from our base layout. That way if we make changes to our <code>base.njk</code> layout file, the child layouts like <code>blog.njk</code> get the same changes.
</div>
</aside>
<p>Check that your blog posts are loading:</p>
<ul class="list">
<li><a href="http://localhost:8080/blog/my-first-post/" rel="noopener">http://localhost:8080/blog/my-first-post/</a></li>
<li><a href="http://localhost:8080/blog/my-second-post/" rel="noopener">http://localhost:8080/blog/my-second-post/</a></li>
<li><a href="http://localhost:8080/blog/my-third-post/" rel="noopener">http://localhost:8080/blog/my-third-post/</a></li>
</ul>
<p>Amazing right? But to make it a blog, we need a blog page that lists all of our blog posts. We can do this with a <code>tags</code> collection:</p>
<p>Open <code>blog.json</code> again and add a key called <code>tags</code> with a value of <code>blog</code>:</p>
<p>blog.json:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>
<span class="token property">"layout"</span><span class="token operator">:</span> <span class="token string">"blog"</span><span class="token punctuation">,</span>
<span class="token property">"tags"</span><span class="token operator">:</span> <span class="token string">"blog"</span>
<span class="token punctuation">}</span></code></pre>
<p>Now 11ty has created a collection called <code>blog</code> and all we have to do is list it.</p>
<p>Head back to the <code>src/</code> directory and create a <code>blog.html</code> file:</p>
<pre class="language-bash"><code class="language-bash"><span class="token builtin class-name">cd</span> <span class="token punctuation">..</span> <span class="token operator">&&</span> <span class="token function">touch</span> blog.html</code></pre>
<p>Open it and add the following:</p>
<p>blog.html:</p>
<pre class="language-html"><code class="language-html">---
title: This Is My Blog
layout: base.njk
---
These are all of my amazing blog posts, enjoy!
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
{% for post in collections.blog | reverse %}
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ post.data.title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
{% endfor %}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>If you’ve kept 11ty running and the browser running it should look like this:</p>
<figure slot="image"><picture> <source type="image/webp" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-480w.webp 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-800w.webp 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" />
<source type="image/jpeg" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-480w.jpeg 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-800w.jpeg 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-1200w.jpeg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" /><img src="https://flamedfury.com/assets/images/11ty-neocities-2026-04-blog-list-1200w.jpeg" width="1200" height="829" alt="The blog page listing the three blog posts as links" loading="lazy" decoding="async" eleventy:ignore="" /></picture><figcaption>A Basic Blog List Page</figcaption></figure>
<p>Amazing huh?</p>
<h2 id="add-some-styles"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#add-some-styles">Add some styles</a></h2>
<p>Great, so far we have a fully functional home page, but it doesn’t look quite right. We need a style sheet. You can use the one below as an example, it’s basic styling with some modern techniques, or just throw in your own!</p>
<p>Create a new <code>css</code> directory in <code>src</code>, cd into it and create <code>styles.css</code>:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> css <span class="token operator">&&</span> <span class="token builtin class-name">cd</span> css <span class="token operator">&&</span> <span class="token function">touch</span> styles.css</code></pre>
<p>Open <code>styles.css</code> in VSCodium and add the following:</p>
<p>styles.css:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token comment">/* Let the browser handle light and dark automatically */</span>
<span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span>
<span class="token comment">/* Two system-font stacks: sans for body, serif for headings */</span>
<span class="token property">--font-body</span><span class="token punctuation">:</span> system-ui<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">--font-head</span><span class="token punctuation">:</span> ui-serif<span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> <span class="token string">"Iowan Old Style"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token comment">/* Purple/pink palette. light-dark() picks the light value first, dark second */</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span>#fdf4fa<span class="token punctuation">,</span> #1a141f<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span>#2a1f2d<span class="token punctuation">,</span> #ece0ef<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--muted</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span>#6f5d77<span class="token punctuation">,</span> #a892b0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span>#a21caf<span class="token punctuation">,</span> #ff7ab6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--border</span><span class="token punctuation">:</span> <span class="token function">light-dark</span><span class="token punctuation">(</span>#ecd9ec<span class="token punctuation">,</span> #3a2f40<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">*,
*::before,
*::after</span> <span class="token punctuation">{</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-body<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.15rem<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.6<span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 40rem<span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Site header */</span>
<span class="token selector">header</span> <span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">padding-block</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Navigation */</span>
<span class="token selector">nav</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid <span class="token function">var</span><span class="token punctuation">(</span>--border<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Main content */</span>
<span class="token selector">main</span> <span class="token punctuation">{</span>
<span class="token property">padding-block</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Site footer */</span>
<span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>
<span class="token property">padding-block</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid <span class="token function">var</span><span class="token punctuation">(</span>--border<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Links */</span>
<span class="token selector">a</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--accent<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-underline-offset</span><span class="token punctuation">:</span> 0.18em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Headings */</span>
<span class="token selector">h1,
h2</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font-head<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 2.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h2</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.8rem<span class="token punctuation">;</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> 2.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
This is a small, dependency-free stylesheet you fully own. Tweak the custom properties at the top to make it yours. It leans on two system-font stacks, a sans for body text and a serif for headings, so there's nothing to download. The <code>light-dark()</code> function (paired with <code>color-scheme</code>) gives us automatic light and dark themes from a single set of variables, no media queries required. It's well supported in modern browsers.
</div>
</aside>
<p>Now we need to include the style sheet in our <code>base.njk</code> layout file. Open it up and add <code><link rel="stylesheet" href="/css/styles.css" /></code> to the <code><head></code>:</p>
<p>_includes/base.njk:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/css/styles.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>{% include 'header.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>{% include 'navigation.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
{{ content | safe }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>{% include 'footer.njk' %}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>You would have noticed that the stylesheet hasn’t been applied, we have to do one more thing in <code>eleventy.config.js</code>, something called file passthrough copy.</p>
<p>Open <code>eleventy.config.js</code> in VSCodium and add the following:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"./src/css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">"public"</span><span class="token punctuation">,</span>
<span class="token literal-property property">includes</span><span class="token operator">:</span> <span class="token string">"_includes"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
Passthrough copy is used for passing through static asset files such as stylesheets, images, fonts, and JavaScript files.
</div>
</aside>
<p>Because this will come up we may as well create the directories and add in the configuration for our images, fonts and JavaScript files.</p>
<p>Create the following directories in <code>src</code>:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">mkdir</span> img <span class="token operator">&&</span> <span class="token function">mkdir</span> fonts <span class="token operator">&&</span> <span class="token function">mkdir</span> js</code></pre>
<p>Update <code>eleventy.config.js</code> again:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"./src/css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"./src/img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"./src/fonts"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eleventyConfig<span class="token punctuation">.</span><span class="token function">addPassthroughCopy</span><span class="token punctuation">(</span><span class="token string">"./src/js"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">"public"</span><span class="token punctuation">,</span>
<span class="token literal-property property">includes</span><span class="token operator">:</span> <span class="token string">"_includes"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Just make sure you put all your static files in the appropriate directory and you’ll be good.</p>
<p>So finally, if you’ve kept 11ty running and the browser running it should look like this:</p>
<figure slot="image"><picture> <source type="image/webp" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-480w.webp 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-800w.webp 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" />
<source type="image/jpeg" srcset="https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-480w.jpeg 480w, https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-800w.jpeg 800w, https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-1200w.jpeg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 80vw, 1200px" /><img src="https://flamedfury.com/assets/images/11ty-neocities-2026-05-styled-1200w.jpeg" width="1200" height="984" alt="The finished homepage, centred with a clean system font, spaced-out navigation and a footer divider" loading="lazy" decoding="async" eleventy:ignore="" /></picture><figcaption>A Nicely Styled Homepage</figcaption></figure>
<p>Yours will look a little different depending on the colours and fonts you chose above. Now we have a homepage we’re happy with, let’s get it online.</p>
<h2 id="deploy-to-neocities"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#deploy-to-neocities">Deploy to Neocities</a></h2>
<p>There are two ways to get your site onto Neocities. We’ll start with the simplest, pushing it from your terminal by hand, then automate it so a deploy happens every time you commit.</p>
<aside class="aside flow note">
<div class="aside__content">
Not on Neocities? The guide still applies. The same build and the same Forgejo Actions automation work for any host, you just swap out the deploy step. If you're on shared hosting or a VPS, I've written that up separately in <a href="https://flamedfury.com/posts/deploying-an-11ty-project-to-shared-hosting/">Deploying An 11ty Project To Shared Hosting</a>.
</div>
</aside>
<h3 id="build-the-site"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#build-the-site">Build the site</a></h3>
<p>Whichever method you choose, first build a fresh copy of your site:</p>
<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> run build</code></pre>
<p>This writes the finished HTML, CSS and assets to the <code>public</code> directory. That’s the folder we deploy.</p>
<h3 id="the-simple-way-the-neocities-cli"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#the-simple-way-the-neocities-cli">The simple way: the Neocities CLI</a></h3>
<p>Neocities provides a command-line tool that lets you push your site straight from your terminal. It’s a Ruby gem, so you’ll need <a href="https://www.ruby-lang.org/" rel="noopener">Ruby</a> installed.</p>
<pre class="language-bash"><code class="language-bash">gem <span class="token function">install</span> neocities</code></pre>
<p>The first time you run a command it’ll ask for your Neocities username and password, then store an API key locally so you don’t have to log in again.</p>
<p>Push the contents of your <code>public</code> directory:</p>
<pre class="language-bash"><code class="language-bash">neocities push public</code></pre>
<aside class="aside flow warning">
<div class="aside__content">
Add the <code>--prune</code> flag (<code>neocities push --prune public</code>) to also remove files on Neocities that no longer exist in your local <code>public</code> folder. Handy for keeping things tidy, but double-check you're pushing the right directory first. It deletes remote files.
</div>
</aside>
<p>That’s it, your homepage is live. For a lot of people this is all you need. Build, push, done.</p>
<h3 id="the-automated-way-forgejo-actions"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#the-automated-way-forgejo-actions">The automated way: Forgejo Actions</a></h3>
<p>Pushing by hand is fine, but it’s even nicer to have your site rebuild and deploy itself every time you commit a change. We can do that with <a href="https://forgejo.org/docs/latest/user/actions/" rel="noopener">Forgejo Actions</a>, the built-in CI for Forgejo. If you self-host Forgejo this runs on your own runner; if you don’t self-host, <a href="https://codeberg.org/" rel="noopener">Codeberg</a> offers the same thing (more on that below).</p>
<aside class="aside flow note">
<div class="aside__content">
Don't want to self-host Forgejo but still want to use it? There are managed instances out there. If you're a member of the <a href="https://32bit.cafe/">32-Bit Cafe</a>, we run a Forgejo instance at <a href="https://git.32bit.cafe/">git.32bit.cafe</a> that you can sign into with your 32-Bit Cafe SSO. If you're an <a href="https://omg.lol/">omg.lol</a> member, you can use <a href="https://source.tube/">source.tube</a>.
</div>
</aside>
<p>First, push your project to a repository on your Forgejo instance. Then grab your Neocities API key from your <a href="https://neocities.org/settings" rel="noopener">account settings</a> (Manage Site Settings → API Key) and add it to your repository as a secret named <code>NEOCITIES_API_KEY</code> (Repository → Settings → Actions → Secrets).</p>
<p>Now create a workflow file at <code>.forgejo/workflows/deploy.yml</code>:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy to Neocities
<span class="token key atrule">on</span><span class="token punctuation">:</span>
<span class="token key atrule">push</span><span class="token punctuation">:</span>
<span class="token key atrule">branches</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> main
<span class="token comment"># only run one deploy at a time</span>
<span class="token key atrule">concurrency</span><span class="token punctuation">:</span>
<span class="token key atrule">group</span><span class="token punctuation">:</span> deploy<span class="token punctuation">-</span>neocities
<span class="token key atrule">cancel-in-progress</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">jobs</span><span class="token punctuation">:</span>
<span class="token key atrule">deploy</span><span class="token punctuation">:</span>
<span class="token key atrule">runs-on</span><span class="token punctuation">:</span> docker
<span class="token key atrule">steps</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Checkout
<span class="token key atrule">uses</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//code.forgejo.org/actions/checkout@v4
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Set up Node
<span class="token key atrule">uses</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//code.forgejo.org/actions/setup<span class="token punctuation">-</span>node@v4
<span class="token key atrule">with</span><span class="token punctuation">:</span>
<span class="token key atrule">node-version</span><span class="token punctuation">:</span> <span class="token number">22</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install and build
<span class="token key atrule">run</span><span class="token punctuation">:</span> <span class="token punctuation">|</span><span class="token scalar string">
npm ci
npm run build</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy to Neocities
<span class="token key atrule">uses</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/bcomnes/deploy<span class="token punctuation">-</span>to<span class="token punctuation">-</span>neocities@v3
<span class="token key atrule">with</span><span class="token punctuation">:</span>
<span class="token key atrule">api_token</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span> secrets.NEOCITIES_API_KEY <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token key atrule">dist_dir</span><span class="token punctuation">:</span> public
<span class="token key atrule">cleanup</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></code></pre>
<aside class="aside flow note">
<div class="aside__content">
<p>A few things to note in this workflow:</p>
<ul>
<li><code>runs-on: docker</code> picks the runner label. This is the default on Forgejo and Codeberg.</li>
<li>Actions are referenced by their full URL. The checkout and setup-node actions come from <code>code.forgejo.org</code>, so we stay off GitHub for those.</li>
<li>The deploy step uses <code>bcomnes/deploy-to-neocities</code>, which is hosted on GitHub. We're only <em>using</em> it. Your code still lives on Forgejo or Codeberg. The <code>cleanup: true</code> option removes remote files that aren't in your new build, the same as <code>--prune</code> on the CLI.</li>
</ul>
</div>
</aside>
<p>Commit and push the workflow file. From now on, every push to <code>main</code> rebuilds your site and deploys it to Neocities automatically.</p>
<h3 id="not-self-hosting-use-codeberg"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#not-self-hosting-use-codeberg">Not self-hosting? Use Codeberg</a></h3>
<p>If you don’t run your own Forgejo instance, <a href="https://codeberg.org/" rel="noopener">Codeberg</a> is a free, community-run home for your code and runs the very same Forgejo Actions. The workflow file above works as-is. Push your project to a Codeberg repo, add the <code>NEOCITIES_API_KEY</code> secret in the repository settings, and you’re away. You may need to enable Actions for your repository first; see the <a href="https://docs.codeberg.org/ci/actions/" rel="noopener">Codeberg CI documentation</a> for details.</p>
<h2 id="bringing-your-existing-site-across"><a class="heading-anchor" href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#bringing-your-existing-site-across">Bringing your existing site across</a></h2>
<p>Already have a homepage you’ve been hand-coding on Neocities? You don’t have to start from scratch. Eleventy is happy to take what you’ve got and slot it into this structure.</p>
<p>Copy each existing page into <code>src/</code> (your old <code>index.html</code> becomes <code>src/index.html</code>, and so on). Then move the parts every page repeats, the <code><head></code>, header, nav and footer, into <code>base.njk</code> and the partials you built earlier. Delete that boilerplate from each page and add a little front matter at the top:</p>
<pre class="language-html"><code class="language-html">---
title: About Me
layout: base.njk
---</code></pre>
<p>Whatever’s left in the file is just that page’s own content, and the layout wraps it.</p>
<p>Your CSS goes in <code>src/css/</code>, images in <code>src/img/</code>, and fonts in <code>src/fonts/</code>. The passthrough copy we set up earlier ships them straight to <code>public/</code>.</p>
<p>If a page is mostly writing, paste the body into a <code>.md</code> file instead of <code>.html</code>. Any fiddly HTML, like an embed or some custom markup, can stay exactly as it is and 11ty will render the Markdown around it.</p>
<p>Run <code>npm run build</code>, check <code>public/</code> looks the way you expect, then push it live with the Neocities CLI or your Forgejo Actions workflow. Same site you already had, now with layouts, partials and a build step doing the repetitive work for you.</p>
<hr />
<p>Reference: I created the original version of this guide based heavily on these existing guides, and they’re still well worth a read:</p>
<ul class="list">
<li><a href="https://11ty.rocks/posts/create-your-first-basic-11ty-website/" rel="noopener">Create Your First Basic 11ty Website</a></li>
<li><a href="https://sia.codes/posts/itsiest-bitsiest-eleventy-tutorial/" rel="noopener">Itsiest, Bitsiest Eleventy Tutorial</a></li>
</ul>
<p>Without these, I wouldn’t even know how to write down what I needed to.</p>
<p>Hey, thanks for reading this post in your feed reader! Want to chat? <a href="mailto:hello@flamedfury.com?subject=RE: Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh)">Reply by email</a> or add me on <a href="xmpp:flamed@omg.lol">XMPP</a>, or send a <a href="https://flamedfury.com/guides/11ty-homepage-neocities-2026/#webmention">webmention</a>. Check out the <a href="https://flamedfury.com/posts/">posts archive</a> on the website.</p>
Two Way TV - product photos of 1997's hottest gadget - Terence Eden’s Blog
https://shkspr.mobi/blog/?p=72448
2026-06-16T11:34:18.000Z
<p>Back in the late 1990s, I did a brief stint of work experience at the BBC. One of the most memorable moments was sitting in on a meeting about <a href="https://shkspr.mobi/blog/2022/12/early-forms-of-interactive-tv/">early forms of Interactive TV</a>.</p>
<p>I saw a demo of "Two Way TV". A flimsy grey box which (somehow) integrated with your OnDigital TV Box and connected to a server via a modem. If you were watching "Who Wants To Be A Millionaire" you could play along at home, send in your answers in realtime, and win REAL CASH PRIZES!!!</p>
<p>An anonymous benefactor read my blog post about the tech, had a pootle through their loft, and found one of the trial boxes they'd been sent in June 1997. With their kind permission, here are some photos of the future we never got.</p>
<p>The unit came in a chunky box with enough logos to convince you it was safe to plug in to the phone network.</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Box.webp" alt="Orange box with regulatory logos." width="739" height="344" class="aligncenter size-full wp-image-72449">
<p>Flipping it over, we see a little more of the tech-specs and a defunct barcode (<code>5033936000023</code> for anyone searching) and product number (<code>SD2044N</code>).</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Rear-Box.webp" alt="Box with a barcode and promises of NICAM stereo." width="445" height="751" class="aligncenter size-full wp-image-72450">
<p>Mmmm! NICAM! So, what did the Set Top Box (STB) actually look like:</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/STB.webp" alt="Boring grey box." width="435" height="219" class="aligncenter size-full wp-image-72452">
<p>Pretty much the same as every other Digital TV STB of the era. A featureless grey slab. Here's a closer view.</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/STB-detail.webp" alt="A slight close up showing the logo." width="693" height="126" class="aligncenter size-full wp-image-72451">
<p>How was it all connected? Here's the rear of the box:
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Rear-panel-with-scart-connectors.webp" alt="SCART and other connectors." width="756" height="252" class="aligncenter size-full wp-image-72453"></p>
<p>Aerial in and out - I assume it had a digital decoder in it, but could pass the analogue channels through to the TV.</p>
<p>Stereo out, for plugging in to your sound system.</p>
<p>SCART in and out. I assume that let you connect your VCR or games console in pass-through mode.</p>
<p>Keyboard looks like a PS/2 port - which would have been the standard at the time. Comms and Remove Receiver both appear to be 8 pin serial connectors.</p>
<p>Finally, there's a standard telephone port for connecting to the dial-up service which makes it all work.</p>
<p>So, you've plugged in all the wires, how do you actually play the games? The unit comes with two controllers - one red and one blue.</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Red-Controller.webp" alt="Game controller. Four blue buttons and a primitive touch screen with a red background." width="680" height="435" class="aligncenter size-full wp-image-72454">
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Blue-Controller.webp" alt="Game controller. Four blue buttons and a primitive touch screen with a blue background." width="640" height="413" class="aligncenter size-full wp-image-72455">
<p>The four buttons (triangle, square, circle, lozenge) were for answering on-screen questions. There's an up and down scroller in the middle and a help button above it. I don't know what the large grey circle does.</p>
<p>But what's the peculiar button on the coloured background? That's an early cursor control! Commercially available touchscreens were still in their infancy. This physical controller allowed you to position a digital cursor on screen. Nifty!</p>
<p>Also in the box was a TV guide:</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Two-Way-TV-Guide.webp" alt="Magazine offering you the ability to play Wheel of Fortune with Jenny." width="374" height="521" class="aligncenter size-full wp-image-72456">
<p>A getting started leaflet:</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Getting-Started-Guide.webp" alt="Getting Started Guide." width="416" height="296" class="aligncenter size-full wp-image-72458">
<p>There's also a service manual:</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Field-Service-SD2044-and-SD2044N.webp" alt="Field Service SD2044 and SD2044N." width="420" height="546" class="aligncenter size-full wp-image-72457">
<p>I don't know what the difference was between SD2044 and SD2044<strong>N</strong>. Do you?</p>
<p>How much would this amazing interactive experience cost you? I've no idea about the upfront payment for the kit, but there's a Direct Debit form for the monthly subscription.</p>
<img src="https://shkspr.mobi/blog/wp-content/uploads/2026/06/Direct-Debit-cost.webp" alt="£6.95 per month." width="670" height="466" class="aligncenter size-full wp-image-72459">
<p>That's about £14 in today's money.</p>
<p>So there you have it! A snapshot of 1997's vision of the future. From my understanding, the box was never a hit with the public. Two Way TV pivoted to other forms of interactive content like premium-rate phone-ins before <a href="https://www.tvforum.co.uk/tvhome/two-way-tv-goes-administration-7314">going bust in 2003</a>.</p>
<p>If you have any more memories of the service, or interesting photos, please leave a comment or <a href="https://edent.tel">get in touch with me</a>.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=72448&HTTP_REFERER=Atom" alt width="1" height="1" loading="eager">
The Filing Association of New York - Johnny.Decimal
https://johnnydecimal.com/blog/0220-filing-assoc-of-ny/
2026-06-16T08:53:20.000Z
<p>Via <a href="https://oldstructures.com">Don</a>, news of the annual meeting of the Filing Association of New York. The after-dinner at Gonfaroni's – <a href="https://restaurant-ingthroughhistory.com/2024/06/23/behind-the-scenes-at-gonfarones/">closed for 96 years</a>, sadly – sounds like a hoot.</p>
<figure class="figure jdimage jdimage--auto-dark jdimage--drop-shadow"> <picture> <img class="figure__inner" alt="A newspaper clipping. The text reads: OFFICE APPLIANCES — July, 1922.
The Filing Association of New York.
The annual meeting of the Filing Association of New York was held at the Washington Irving High School, the President, Mrs. E. K. McDowell, presiding.
The following officers were elected to serve for the coming year:
President, Ethel G. Armstrong; vice-president, Annabel Oatis; second vice-president, Katherine Clemens; treasurer, Emma D. Bendelari; recording secretary, Louise Keese; corresponding secretary, Florence Huisking.
Executive board: Cora Corbin, Helen Sprague, Estelle W. Merrill, Elizabeth King McDowall, Myrta L. Mason (appointed last year—one more year to serve).
The executive board has accepted with regret the resignation of Mrs. E. K. McDowall, who finds the pressure of business too heavy to continue on the board. Miss Julia Behringer has been appointed to serve in Mrs. McDowall's place.
Article IV of the Constitution was amended to read:
'Dues. Annual dues of the Association shall be $2.00, payable upon notice of election. The fiscal year shall begin June first.'
The annual convention of the N. Y. State Federation of Business and Professional Women's Clubs will be held on Saturday, May 27, at the Hotel Pennsylvania. The convention will end with a dinner in the evening. It is expected that the Filing Association will be represented by several members.
The last meeting of the Filing Association for this season was a dinner at Gonfaroni's, McDougall and Eighth streets, New York, on Monday, June 12, at six o'clock. The chairman of the entertainment committee, Mrs. Winifred Wilbur, has gone to great pains to make this affair a success. The speaker of the evening, Mrs. E. W. Sears, president of the New York League for Business and Professional Women, had just returned from a trip throughout the United States and will have many interesting things to tell.
There will be no more meetings of the association until the Fall, but this does not mean that all activities will cease. The Executive Board will continue to meet and the various committees will be at work getting ready to start up with renewed vigor after the Summer vacation." height="1105" loading="lazy" src="https://johnnydecimal.com/blog/0220-Filing_association-1012x1105.webp" width="1012"> </picture> </figure>
<p>Of course this is charming and quaint, but it makes obvious something that I think about all the time: the fact that, in the past, people used to actively work on the problem of filing. It was a profession; there was a local Association that met regularly.</p>
<p>These filing associations turned into organisations like <a href="https://en.wikipedia.org/wiki/ARMA_International">ARMA</a>, the <em>Association of Records Managers and Administrators</em>. So it's not like we totally forgot how to file stuff. But – at least in my professional experience – it's not something the normal office worker is ever exposed to.</p>
<p>And when filing <em>is</em> something you're forced to do, it tends to be in service of checking a compliance box. Those of us who've had the pleasure of using an enterprise 'document management system' – looking at you, <a href="https://community.opentext.com/cfs-file/__key/communityserver-discussions-components-files/236/D-13-45590--City-Parklands-TRIM-Content-Manager-User-Training-Manual.pdf">HP TRIM</a> – know that they rarely make a thing easier to find. They just make your mistakes harder to correct.<sup><a href="#user-content-fn-deleted" id="user-content-fnref-deleted" data-footnote-ref="" aria-describedby="footnote-label" class="footnote">1</a></sup></p>
<p>Yet it remains the situation that the average office worker is the one creating volumes of <em>stuff</em>; this worker being given little to no training in the still-essential field of filing. No wonder our systems are such a mess.</p>
<p>No wonder nobody can find anything any more.</p>
<div data-footnotes="" class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-deleted">
<p>Every single such system hosting a folder named <code>z_deleted</code>. <a href="#user-content-fnref-deleted" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref footnoteBackLink">↩</a></p>
</li>
</ol>
</div>
📝 2026-06-16 08:11: Sun's out, so there's only one way to travel to the office... ☀️ - Kev Quirk
https://kevquirk.com/2026-06-16-0811
2026-06-16T07:11:00.000Z
<p>Sun's out, so there's only one way to travel to the office...</p>
<p>☀️</p>
<p><img src="https://kevquirk.com/content/images/2026-06-16-0811/1000009732.webp" alt="1000009732" /></p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=%F0%9F%93%9D%202026-06-16%2008%3A11">reply to this post by email</a>, or <a href="https://kevquirk.com/2026-06-16-0811#comments">leave a comment</a>.</p>
</div>
📝 2026-06-16 07:55: Like we don't have enough animals already. This little black blob will be joining us... - Kev Quirk
https://kevquirk.com/2026-06-16-0755
2026-06-16T06:55:00.000Z
<p>Like we don't have enough animals already. This little black blob will be joining us on August.</p>
<p><img src="https://kevquirk.com/content/images/2026-06-16-0755/1000009729.webp" alt="1000009729" /></p>
<p><img src="https://kevquirk.com/content/images/2026-06-16-0755/1000009730.webp" alt="1000009730" /></p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=%F0%9F%93%9D%202026-06-16%2007%3A55">reply to this post by email</a>, or <a href="https://kevquirk.com/2026-06-16-0755#comments">leave a comment</a>.</p>
</div>
Read "Anthropic's Safety Superpower" - Molly White's activity feed
6a30a49d91f30f1ebeda3ca4
2026-06-16T01:19:25.000Z
<article class="entry h-entry hentry"><header><div class="description">Read: </div></header><div class="content e-content"><div class="article h-cite hcite"><div class="title"><a class="u-url u-repost-of" href="https://stratechery.com/2026/anthropics-safety-superpower/" rel="bookmark">“<span class="p-name">Anthropic's Safety Superpower</span>”</a>. </div><div class="byline"><span class="p-author h-card">Ben Thompson</span> in <i class="p-publication">Stratechery</i>. <span class="read-date"> Published <time class="dt-published published" datetime="2026-06-15">June 15, 2026</time>.</span></div><blockquote class="summary p-summary entry-summary">Here’s the thing about these safety justifications: I think they work because, to Anthropic, they aren’t justifications. The company really believes that they are the only ones who believe in super intelligence, and thus are the only ones who are sufficiently concerned about the dangers. That excuses decision after decision, policy after policy, and confrontation after confrontation that, to people on the outside, look like a bizarre combination of cynicism and naiveté.
The contrast to OpenAI is massive: I think that one way to understand how and why OpenAI lost its lead is that, in the years following the release of ChatGPT, the company has been at war with itself internally as what used to be a research lab was suddenly seized with the burden of being the accidental consumer tech company; to the extent OpenAI solved that conflict, it was by bleeding huge amounts of talent to Anthropic in particular.
Anthropic, on the other hand, has perfect alignment between talent and mission and business. The company gets to sell to researchers the creation of a machine god, with the mantle of being the sort of person who cares about the dangers and is smart enough to navigate them on behalf of humanity; that every policy change that falls out of that happens to be great for business is the most beautiful coincidence in the world.</blockquote><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><footer class="footer"><div class="flex-row post-meta"><div class="timestamp">Posted: <time class="dt-published" datetime="2026-06-16T01:19:25+00:00" title="June 16, 2026 at 1:19 AM UTC">June 16, 2026 at 1:19 AM UTC</time>. </div></div><div class="bottomRow"><div class="tags">Tagged: <a class="tag p-category" href="https://www.mollywhite.net/feed/tag/anthropic" title="See all feed posts tagged "anthropic"" rel="category tag">anthropic</a>, <a class="tag p-category" href="https://www.mollywhite.net/feed/tag/artificial_intelligence" title="See all feed posts tagged "artificial intelligence"" rel="category tag">artificial intelligence</a>. </div></div></footer></article>
Read "Choosing to Stay Human" - Molly White's activity feed
6a309f1d91f30f1ebeda3b6e
2026-06-16T00:55:57.000Z
<article class="entry h-entry hentry"><header><div class="description">Read: </div></header><div class="content e-content"><div class="article h-cite hcite"><div class="title"><a class="u-url u-repost-of" href="https://substack.com/home/post/p-196018638" rel="bookmark">“<span class="p-name">Choosing to Stay Human</span>”</a>. </div><div class="byline"><span class="p-author h-card">Ethan Mollick</span> in <i class="p-publication">One Useful Thing</i>. <span class="read-date"> Published <time class="dt-published published" datetime="2026-05-26">May 26, 2026</time>.</span></div><blockquote class="summary p-summary entry-summary">To be clear, I am cool with a lot of cognitive surrender. I don’t remember phone numbers anymore because my phone does that for me. I am happy my kids didn’t need to learn cursive. I am fine with calculators doing my daily math and my computer figuring out how to schedule my classes. These were once useful skills, but we were probably right to get rid of them.
AI is different because the technology is general enough that virtually any cognitive task can be offloaded into it to some degree. I don’t want to be too precious about writing: there is no principle that says a polished email draft has to come out of a human mind any more than a column of arithmetic has to. But we don’t want to give up everything, and that we mostly don’t know yet, for any specific task, what is important and what is not. Deciding that is going to be a real challenge.</blockquote><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><img src="https://www.mollywhite.net/assets/images/placeholder_social.png" alt="Illustration of Molly White sitting and typing on a laptop, on a purple background with 'Molly White' in white serif." style="display: none;"/></div><footer class="footer"><div class="flex-row post-meta"><div class="timestamp">Posted: <time class="dt-published" datetime="2026-06-16T00:55:57+00:00" title="June 16, 2026 at 12:55 AM UTC">June 16, 2026 at 12:55 AM UTC</time>. </div></div><div class="bottomRow"><div class="tags">Tagged: <a class="tag p-category" href="https://www.mollywhite.net/feed/tag/artificial_intelligence" title="See all feed posts tagged "artificial intelligence"" rel="category tag">artificial intelligence</a>. </div></div></footer></article>
Wonders of Web Weaving, Episode 6 - James' Coffee Blog
https://jamesg.blog/2026/06/16/www-6
2026-06-16T00:00:00.000Z
<p><a href="https://web-weaving.jamesg.blog/6" rel="noreferrer">The sixth episode of Wonders of Web Weaving is out</a>:</p><blockquote>In Episode 6, I chat with <a href="https://coryd.dev">Cory</a>, the author of <a href="https://coryd.dev">coryd.dev</a>. We talk about, among other things, the role of community in the indie web, a day in the life with his website, and music listening and community as it relates to personal websites.</blockquote><p>I hope you enjoy the episode!</p><p><a href="https://web-weaving.jamesg.blog/subscribe/" rel="noreferrer"><em>Wonders of Web Weaving has an RSS feed</em></a><em> you can use to follow along from wherever you get your podcasts.</em></p><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0cc341b8a82acd1',t:'MTc4MTYzNzk1OA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
<a class="tag" href="https://coryd.dev">Cory</a>
<a class="tag" href="https://coryd.dev">coryd.dev</a>
<a class="tag" href="https://web-weaving.jamesg.blog/6">The sixth episode of Wonders of Web Weaving is out</a>
<a class="tag" href="https://web-weaving.jamesg.blog/subscribe/">Wonders of Web Weaving has an RSS feed</a>
Note published on June 15, 2026 at 5:30 PM UTC - Molly White's activity feed
6a303698f3a5676bc2fa551c
2026-06-15T17:30:00.000Z
<article><div class="entry h-entry hentry"><header></header><div class="content e-content"><div class="media-wrapper"><a href="https://storage.mollywhite.net/micro/d918fc3188176a109109_peony.jpg" data-fslightbox=cc13496ab3f559f785fe><img src="https://storage.mollywhite.net/micro/d918fc3188176a109109_peony.jpg" alt="Three blooming peonies that are blush pink at the middle, turning yellow/cream toward the outer petals. There are others that have not yet bloomed. Variety is “Raspberry Sundae”." /></a></div></div><footer class="footer"><div class="flex-row post-meta"><div class="timestamp-block"><div class="timestamp">Posted: <a class="u-url" href="https://www.mollywhite.net/micro/entry/202606151326"><time class="dt-published" datetime="2026-06-15T17:30:00+00:00" title="June 15, 2026 at 5:30 PM UTC">June 15, 2026 at 5:30 PM UTC</time>. </a></div></div><div class="social-links"> <span> Also posted to: </span><a class="social-link u-syndication mastodon" href="https://hachyderm.io/@molly0xfff/116755307259783129" title="Mastodon" rel="syndication">Mastodon, </a><a class="social-link u-syndication bluesky" href="https://bsky.app/profile/molly.wiki/post/3modsqm5xzl2p" title="Bluesky" rel="syndication">Bluesky</a></div></div><div class="bottomRow"><div class="tags">Tagged: <a class="tag p-category" href="https://www.mollywhite.net/micro/tag/gardening" title="See all micro posts tagged "gardening"" rel="category tag">gardening</a>. </div></div></footer></div></article>
Bloggers, can we make better titles for our posts? - Kev Quirk
https://kevquirk.com/bloggers-can-we-make-better-titles-for-our-posts
2026-06-15T14:29:00.000Z
<div class="link card"><h2>Bloggers, can we make better titles for our posts?</h2><p class="post-author">by Michael Harley</p><p>Michael makes the case for us bloggers to use better titles when writing our posts as it helps discovery.</p><p><a class="button" target="_blank" href="https://michaelharley.net/posts/2026/06/15/bloggers-can-we-make-better-titles-for-our-posts/">Read post ➡</a></p></div>
<hr>
<p>I agree with Michael on this, but I realised that since <a href="https://kevquirk.com/2026-06-06-1802">adding other post types to my RSS feed</a> I too am guilty of this, as my <a href="https://kevquirk.com/?type=notes">notes posts</a> only show the date and time of the post in the RSS feed.</p>
<p>No more!</p>
<p>I've just pushed an update to my RSS feed that shows the first 15 words of the note after the date and time, which hopefully makes things more descriptive.</p>
<p>That aside, good post by Michael, you should go check out his blog. 🙃</p>
<p>P.S. apologies for any RSS reader spam.</p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=Bloggers%2C%20can%20we%20make%20better%20titles%20for%20our%20posts%3F">reply to this post by email</a>, or <a href="https://kevquirk.com/bloggers-can-we-make-better-titles-for-our-posts#comments">leave a comment</a>.</p>
</div>
[RSS Club] What happens to old posts? - Terence Eden’s Blog
https://shkspr.mobi/blog/?p=72429
2026-06-15T11:34:34.000Z
<p>Welcome to RSS Club! These posts are <em>only</em> available to RSS and Atom subscribers. You can read more about the idea at <a href="https://daverupert.com/rss-club/">Dave Rupert's site</a>.</p>
<p>I recently received an email from a distraught reader:</p>
<blockquote><p>I was going through my recent bookmarks and I found <code>https://shkspr.mobi/blog/2026/04/rss-club-for-wordpress</code> which I had clearly saved to reference again later.</p>
<p>However, as with the nature of RSS Club™, I can't just revisit that post in my browser. I'd long since deleted the RSS item in my feed and re-adding your entire feed only fetched the last ~20 items, of which this wasn't one.</p></blockquote>
<p>Oh no! It is true that my feed only goes back 20 entries. As a consequence, older posts are lost in the Time Vortex - much like several episodes of Doctor Who.</p>
<p>My first thought was "is this a bug or a feature?" Perhaps those posts should be ephemeral. It is possible that they've been archived - but it is equally possible that they've drifted away on the breeze like a child's balloon. Do I want people rummaging in the archives to get old club posts?</p>
<p>I think my answer is… I'm happy for them to be inaccessible for the casual reader.</p>
<p>But there are a few ways the determined scholar can find older posts.</p>
<h2 id="manually-save-the-contents"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#manually-save-the-contents">Manually Save The Contents</a></h2>
<p>Your feed reader probably lets you store a permanent copy of a post. You should do that if you want a local version available.</p>
<h2 id="archive-org"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#archive-org">Archive.org</a></h2>
<p>The Internet Archive regularly grabs a copy of my RSS feed. For example - <a href="https://web.archive.org/web/20260000000000*/https://shkspr.mobi/blog/feed/atom/">https://web.archive.org/web/20260000000000*/https://shkspr.mobi/blog/feed/atom/</a></p>
<p>You can peruse older versions to your heart's content.</p>
<h2 id="json-api"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#json-api">JSON API</a></h2>
<p>WordPress's JSON API contains the full contents of the post (albeit in a slightly verbose JSON format). You need to know the post's ID.</p>
<p>For example, the JSON for this post itself can be found at <a href="https://shkspr.mobi/blog/wp-json/wp/v2/posts/72429">https://shkspr.mobi/blog/wp-json/wp/v2/posts/72429</a></p>
<h2 id="feed-pagination"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#feed-pagination">Feed Pagination</a></h2>
<p>By default, you only get 20 items per feed. If you'd like to go to the 2nd page of the feed, you can use:</p>
<p><a href="https://shkspr.mobi/blog/feed/atom/?paged=2">https://shkspr.mobi/blog/feed/atom/?paged=2</a></p>
<p>Then <code>?paged=3</code> for the next, etc.</p>
<h2 id="category-feeds"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#category-feeds">Category Feeds</a></h2>
<p>WordPress has build-in support for category-specific feeds. So, if you want to subscribe to <em>only</em> the RSS Club posts, you may use <a href="https://shkspr.mobi/blog/category/rss-club/feed/">https://shkspr.mobi/blog/category/rss-club/feed/</a></p>
<p>This also works with tags, for example <a href="https://shkspr.mobi/blog/tag/rss-club/feed/">https://shkspr.mobi/blog/tag/rss-club/feed/</a></p>
<p>They <em>should</em> both be the same, but I primarily use categories to differentiate between club and non-club posts.</p>
<h2 id="email"><a href="https://shkspr.mobi/blog/2026/06/rss-club-what-happens-to-old-posts/#email">Email</a></h2>
<p>Feel free to email me if you can't find something. My contact details are on <a href="https://edent.tel/">https://edent.tel/</a></p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=72429&HTTP_REFERER=Atom" alt width="1" height="1" loading="eager">
This week at JDHQ – 2026-06-15 - Johnny.Decimal
https://johnnydecimal.com/blog/0219-this-week-2026-06-15/
2026-06-15T04:55:55.000Z
<blockquote>
<p>Originally sent to the <a href="https://johnnydecimal.com/support/contact-community/mailing-list-rss-social/">mailing list</a>.</p>
</blockquote>
<p>As promised (to ourselves), we've had a bit of time off here in Taiwan. So this is just a quick note to remind you that the first of the weekly Small Business sessions is this <a href="https://www.worldtimebuddy.com/?qm=1&lid=5368361,5128581,2643743,2950159,292223,1668341,1880252,1835848,2147714,2193733&h=1668341&date=2026-6-18&sln=16-17&hf=undefined&c=1769">Thursday 18th June at 16:00 +8</a>.</p>
<p>That's morning if you're in Europe, daytime for EMEA and into Asia, and evening in Oceania. The session next <a href="https://www.worldtimebuddy.com/?qm=1&lid=5368361,5128581,2643743,2950159,292223,1668341,1880252,1835848,2147714,2193733&h=1668341&date=2026-6-23&sln=6-7&hf=undefined&c=1505">Tuesday 23rd June at 06:00 +8</a> is nicer for those of you in the Americas.</p>
<p>Zoom links for both of those are on the <a href="https://johnnydecimal.com/support/knowledge-base/sbs-events-calendar/">SBS events page at JDHQ</a> – subscribe to the calendar there for the most up-to-date information.</p>
<p>We'll be kicking off the annual cycle with something easy, just to test out the process: your travel administration and records. As a reminder, the calendar has been designed to touch <em>every</em> aspect of your business over the course of the year. It's a light check-in to make sure that everything's in order and that you haven't forgotten, say, to renew your company's annual travel insurance policy.</p>
<p>I'll be sending those of you who asked for the Baserow template a link in the next couple of days. We'll go through it in the session so there's no pre-work required.</p>
<p>Of course if you're not already in the Small Business System, there's still time to <a href="https://johnnydecimal.com/sign-up/">upgrade your account</a>. See you Thursday.</p>
<p>j.</p>
AI Blog Questions Challenge - Kev Quirk
https://kevquirk.com/ai-blog-questions-challenge
2026-06-14T15:21:00.000Z
<p><a href="https://blog.avas.space/ai-question-challenge/">Ava did it</a>, then <a href="https://manuelmoreale.com/thoughts/ai-blog-question-challenge">Manu did it</a>, then <a href="https://thomasrigby.com/posts/ai-blog-question-challenge/">Thomas did it</a>. So now I'm joining in. <a href="https://kevquirk.com/tag/ai">I haven't written a lot about AI</a> on this site, so maybe this will give you all some insights as to what my opinions are on it all.</p>
<h2>1. How was your first experience with AI models?</h2>
<p>I don't remember my first time actually using an LLM, but I do remember what my feelings were in the early days of it all. Like many others, I tried Chatty Geeps and just talked shit to it. I found it to be far too sycophantic, but interesting nonetheless.</p>
<h2>2. Do you use AI or are you completely against using it?</h2>
<p>I do. I currently have a subscription to Google's Gemini and I use it for 2 main purposes:</p>
<ol>
<li>To help when I get stuck coding.</li>
<li>As a search engine when I'm looking for something niche or complex.</li>
</ol>
<h2>3. Do you have any preference among different models, for example Claude vs ChatGPT? If yes, how do you choose?</h2>
<p>Not really. I've used Chatty Geeps in the past, then Claude, and like I said above, I'm currently using Gemini. I've found them to all be similarly capable for my needs.</p>
<p>The main reason I'm currently using Gemini is because it comes with my Google One subscription.</p>
<h2>4. What aspect of AI models do you like and what do you not like?</h2>
<p>99.99% of the time I use an LLM in one of the two ways I mentioned above. And I think they work <em>really</em> well for this. As a result of using an LLM, I've been able to learn so much about coding because I can get it to explain problems to me, which I find really helpful.</p>
<p>Similarly, when I'm searching for something niche or complex, an LLM is very helpful. It saves me from wading through page after page of SEO garbage, Reddit posts, or stale forums. It does all that for me and generally gives me either the correct answer, or points me in the right direction so I can go from there.</p>
<p>There's two things that <em>really</em> irks me about LLMs though. The first is that they're so damned sycophantic. Not everything is a <em>great idea</em>, despite what the models say.</p>
<p>Second is the way they always end a reply with a question. Why is this necessary? Just give me the answer I need, then pipe down.</p>
<h2>5. How do you feel about AI generated images? Does it annoy you if someone uses them in a blog post?</h2>
<p><a href="https://kevquirk.com/on-ai-images-and-feature-images-in-general">I've actually written about this before</a>. Using them for feature images on a blog…meh. More generally, I think generated images have their use at times. </p>
<p>For example, we're about to have some work done on the stables and my wife wanted to get an idea of what it would look like. So she took a photo of the stables, then asked Gemini to add the details of the work we're getting done. It did a great job and gave us a really good idea of what to expect.</p>
<p>I don't generate images for fun though. I think it's wasteful and I don't really see the point of it.</p>
<p>I also don't think that AI generated images are art.</p>
<h2>6. Internet is flooded with AI slop now, full of generated text, images, audio, and videos. How do you filter it from authentic human creation? Do you have a strategy?</h2>
<p>I have no strategy. When I come across it, I generally just ignore it and move on.</p>
<p>For the record, I really dislike the word "slop" too. I think a lot of what LLMs generate is really useful, so to bundle it all in the "slop" bucket is unfair in my opinion.</p>
<h2>7. Are you hopeful for a better future with A.I. or a dystopian one?</h2>
<p>I think it will go the same way as all the fads that have come before it. The bubble will burst, many of these AI companies will die off, and we will be left with a handful of large providers that continue to iterate and improve upon it.</p>
<p>It's very similar to blockchain - 5 years ago companies were popping up and trying to shoehorn it into everything. That bubble burst and we rarely hear of it now. It still has it's uses, but it generally goes under the radar these days.</p>
<p>Long-term I think LLMs and AI have a future. They're very useful, but I don't think they're a magic pill for all our problems. Far from it.</p>
<h2>Your turn!</h2>
<p>Feel free to write your own response to this post - I've enjoyed reading the responses I've seen so far, which is why I decided to get involved in the first place.</p>
<p>If you do decide to write a reply, here's the questions in a handy-dandy, pastable (is that even a word?) format:</p>
<pre><code>1. How was your first experience with AI models?
2. Do you use AI or are you completely against using it?
3. Do you have any preference among different models, for example Claude vs ChatGPT? If yes, how do you choose?
4. What aspect of AI models do you like and what do you not like?
5. How do you feel about AI generated images? Does it annoy you if someone uses them in a blog post?
6. Internet is flooded with AI slop now, full of generated text, images, audio, and videos. How do you filter it from authentic human creation? Do you have a strategy?
7. Are you hopeful for a better future with A.I. or a dystopian one?</code></pre> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=AI%20Blog%20Questions%20Challenge">reply to this post by email</a>, or <a href="https://kevquirk.com/ai-blog-questions-challenge#comments">leave a comment</a>.</p>
</div>
📝 2026-06-14 12:49 - Kev Quirk
https://kevquirk.com/2026-06-14-1249
2026-06-14T11:49:00.000Z
<p>Can someone who's more green fingered than me tell me is this is giant hogweed please?</p>
<p>It's all over one of our fields, so if it is I'll need to get someone in to get rid of it.</p>
<p><img src="https://kevquirk.com/content/images/2026-06-14-1249/1000009676.webp" alt="1000009676" /></p>
<p><img src="https://kevquirk.com/content/images/2026-06-14-1249/1000009677.webp" alt="1000009677" /></p> <div class="email-hidden">
<hr />
<p>Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️</p>
<p>You can <a href="mailto:19gy@qrk.one?subject=%F0%9F%93%9D%202026-06-14%2012%3A49">reply to this post by email</a>, or <a href="https://kevquirk.com/2026-06-14-1249#comments">leave a comment</a>.</p>
</div>