Bringing My OCD Online: Userscripts for Immersive Forum Browsing

\n\n

\n Hi, I'm Will. I'm 24, autistic, and have OCD tendencies. I'm learning to code and this is my first public\n project. I’d really appreciate your feedback and encouragement!\n

\n This project lets me solve some of my OCD problems online. There are a couple of parts of the forums that I\n visit – Space Battles, Sufficient Velocity, and Questionable Questing – that I want to remove. Specifically, I\n hate seeing indicators of how much is left in a forum thread, because I keep thinking about how much content\n is left. It stops me from immersing myself in the story. It stressed me out. Before I learned to code, I'd use\n my hand to block the total chapter count so I could read the blurb and see the word count. I would do my best\n to ignore the page navigation bar except for the next page button, but I usually ended up failing. One of the\n reasons I always read in full-screen Safari is that I didn't have to see the tab name that always had the page\n number. I learned not to hover my cursor over the window because it would tell me the page number.\n

\n This project is a series of userscripts that hide those indicators. I coded the userscripts in JavaScript, and\n I used{\" \"}\n this system. Despite the fact I didn't know what a\n userscript was until I started coding them, AI assistance allowed me to code them with minimal help from my\n brother, Stevie. Khanmigo helped me plan, write, and debug code. ChatGPT taught me the theory. Part of the\n reason I coded a lot faster with the later userscripts is I knew enough to realize when AI was talking about\n something irrelevant and redirect it. One cool moment was when I correctly predicted I didn't need to code\n different userscripts for SpaceBattles and Sufficient Velocity because Sufficient Velocity used to be part of\n SpaceBattles.\n

\n I find it relaxing not to have to worry about accidentally seeing the chapter count or the final page number.\n Maybe they’ll help one of you!\n

\n \n ,\n );\n};\n\nconst app = new Hono();\napp.get(\"/\", Bringing_My_OCD_Online);\nexport default app.fetch;","deleted","label","children",[],[157],{"_102":176,"_95":177,"_158":178,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":179,"_99":32,"_166":167,"_168":180,"_170":22,"_171":-5,"_172":181,"_98":182},"9caa5dd0-1baf-11f0-acef-569c3dd06744","Debugging_Guide","a957ffc9-1c78-438b-ba66-e261b6b89a2a",["D",1744910150972],"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n// last stable version is 61\nconsole.log(\"[Init] Starting Debugging_Guide val\", new Date().toISOString());\n\nexport const Debugging_Guide = (c: any) => {\n const html = `\n\n \n Debugging Guide\n \n \n \n \n

Debugging Checklist

The classic \"print-statement-debugging\" techniques may work for simpler cases, but quickly get unmanageable. The checklist below is an extremely effective way to find and fix bugs. Debugging is a learning process - you are about to learn more about your program's behavior and how to translate your ideas into code!

\n
Observe the bug
\n
\"What makes me think there is a problem?\"
\n
\n
Create a reproducible input
\n
\"How can I reliably reproduce this problem?\" You want the smallest, simplest test case possible that reproduces the bug. The smaller it is, the quicker you will be able to debug it.
\n
\n
Narrow the search space
\n
\"\"How can I narrow down to the code that could cause this problem?\" Tracing through the whole program is not feasible. Instead, consider:\n\n\n\n\n\nUsing your intuition as a starting point. Did you change a function recently? Are there any likely culprits?\n\n\n\nPut console.log at significant point of the program so I can see what’s happening. Ideally, I can spot the problematic code is from that. If not, put console.log at places like half way through the code to get closer to the bug.\n\n\n\nConsole logs being truncated. Check if I need everything in the log and maybe split the log into multiple parts.\"\n\nIf you're in GitHub you can use binary search to more easily find the last working version. The explanation is here.
\n
\n
Analyze
\n
\"What information can I gather from this identified code?\" Now use consoles.log so I can mentally follow along. Inspect the values of variables and flow of control, and draw pictures. Try externalizing by writing out what I think should be happening, what is happening, and why it's not happening.
\n
\n
Devise and run experiments
\n
Devise and run experiments. \"How can I check my hypotheses about the issue?\" Make inferences about the root cause and run experiments to validate your hypothesis. Iterate until you identify the root cause.
\n
\n
Modify code to squash the bug
\n
\"How can I fix the issue, and confirm that the fix works?\" The fix should be validated by your experiments and passing the original failed test case. You should be able explain the series of facts, tests, and deductions which match the observed symptom to the root cause and the corrected code.
\n

\n\n

Do not change your code haphazardly. As a scientist, you should change only one variable at a time while experimenting. This ensures you can fully understand the program behavior and causes at every step.
Good style means easier debugging. Anything that helps you navigate and understand your code is key to efficient debugging.\n\n.
Thorough testing helps uncover bugs. You can never reach step 1 if you are unaware of lurking issues!

\n View Source\n

\n \n \n`;\n\n return c.html(html);\n};\n\nconst app = new Hono();\napp.get(\"/\", Debugging_Guide);\nexport default app.fetch;",[],[177],{"_102":184,"_95":185,"_158":186,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":187,"_99":32,"_166":167,"_168":188,"_170":22,"_171":-5,"_172":189,"_98":190},"9caa62f8-1baf-11f0-acef-569c3dd06744","Time_Blindness_Loud_Calendar_via_iOS_shortcuts","b1ca175c-e942-44b4-a882-bcfd3babddd6",["D",1744910150972],"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Context, Hono } from \"npm:hono\";\n\n// Define the route handler function\nexport const Time_Blindness_Loud_Calendar_via_iOS_shortcuts = (c: Context) => {\n console.log(\"Route accessed: Time_Blindness_Loud_Calendar_via_iOS_shortcuts\");\n const htmlContent = `\n \n \n \n Time Blindness Loud Calendar via iOS Shortcuts\n \n \n \n \n

Time Blindness Loud Calendar via iOS Shortcuts

I have time blindness, a condition which makes it hard to notice the passing of time. I couldn't find a calendar app that had alerts loud enough that I'd notice.

The iOS Clock app is loud enough, though. So I created an iOS shortcut to schedule Clock alarms based on events in my calendar: Loud Calendar Alarm.

How it works

The first thing it does is delete the alarms it created from prior day by the label “Calendar Alarm”. Then it pulls all my calendar events for the next day, subtracts 15 minutes from the time, and creates an alarm. The shortcut is scheduled to run every night at midnight.

$\"Screen$

My shortcut is based on this one.

Installation Guide

1. Add the shortcut

On your iPhone, click Loud Calendar Alarms
Click the Open in the pop-up.
Click Add Shortcut.

2. Give permissions to the shortcut

Click the name of the shortcut.
Click Delete Always in the pop-up asking for permission.
Click Allow Always in the pop-up asking for permission to display notifications.
Click Always Allow in the pop-up asking for permission to share calendar events.

3. Schedule the shortcut

Click Automation at the bottom of the screen.
Click the +
Click Time of Day
Click the time under the blue check.
Change the time to when you want it to run (ie midnight)
Click Run Immediately
Click Notify When Run
Click Shortcut that sets alarms before calendar events, and delete them after use
The following day, confirm that you get a notification that the alarms were deleted and alarms were sent because sometimes you need to manually run the shortcut to re-give permission or even re-download the shortcut. Then it should work normally.
Enjoy!

\n \n `;\n return c.html(htmlContent);\n};\n\nconst app = new Hono();\napp.get(\"/\", Time_Blindness_Loud_Calendar_via_iOS_shortcuts);\nexport default app.fetch;",[],[185],{"_102":192,"_95":193,"_158":194,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":195,"_99":32,"_166":167,"_168":196,"_170":22,"_171":-5,"_172":197,"_98":198},"9caa6b22-1baf-11f0-acef-569c3dd06744","homepage","f055e102-9803-43ac-84c9-aa2c90da07be",["D",1744910150972],"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Context, Hono } from \"npm:hono\";\n\nexport const homepage = (c: Context) => {\n return c.html(\n \n \n Will Krouse\n code{all:unset}blockquote{border:1px solid var(--slate10);color:var(--slate11);padding:2px 0 2px 20px;margin:0;font-style:italic}a[data-astro-cid-eimmu3lg]{display:inline-block;text-decoration:none}a[data-astro-cid-eimmu3lg].active{font-weight:600;text-decoration:underline}header[data-astro-cid-3ef6ksr2]{margin:0 0 2em}h2[data-astro-cid-3ef6ksr2]{margin:.5em 0}`,\n }}\n >\n \n \n \n

Will Krouse

\n Projects{\" \"}Twitter\n {\" \"}\n Github{\" \"}\n Val Town\n

\n Hi, I'm Will, a 24-year-old autistic individual in Florida. I love reading. I enjoy playing board games,\n tennis, and pickleball.\n

\n\n

\n I'm learning to code. My favorite part are the meta-skills. For example, the debugging mindset is always\n useful for fixing problems.\n

\n\n

\n I find the complexity of current events and politics really interesting. I enjoy articles that significantly\n change my understanding. I really like{\" \"}\n Tangle{\" \"}\n because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and\n when I can't tell who's right because no one addresses the best arguments from their opponents.\n

\n I am on the autism spectrum, so I sometimes misunderstand people's tones and vibes or send the wrong ones.\n Your patience and feedback are appreciated!\n

\n\n

\n I built{\" \"}\n \n this site\n {\" \"}\n on Val Town.\n

\n\n

Credit

\n I copied the formatting from{\" \"}\n Valjean Clark{\" \"}\n and was inspired by his design.\n

\n \n ,\n );\n};\nconst app = new Hono();\napp.get(\"/\", homepage);\nexport default app.fetch;",[],[193],{"_102":200,"_95":201,"_158":114,"_160":-5,"_161":139,"_162":118,"_164":116,"_104":202,"_99":163,"_166":203,"_168":204,"_170":22,"_171":-5,"_172":205,"_98":206},"a3d58ab2-1baf-11f0-9ad7-569c3dd06744","personalWebsite",["D",1744910163030],"http","/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"npm:hono@3\";\nimport { Bringing_My_OCD_Online } from \"./Bringing_My_OCD_Online\";\nimport { Debugging_Guide } from \"./Debugging_Guide\";\nimport { homepage } from \"./homepage\";\nimport { projects } from \"./projects\";\nimport { Time_Blindness_Loud_Calendar_via_iOS_shortcuts } from \"./Time_Blindness_Loud_Calendar_via_iOS_shortcuts\";\nconst app = new Hono();\n\n// Add a middleware to include the viewport meta tag and additional CSS in all HTML responses\napp.use(\"*\", async (c, next) => {\n await next();\n if (c.res.headers.get(\"Content-Type\")?.includes(\"text/html\")) {\n const html = await c.res.text();\n const updatedHtml = html.replace(\n \"\",\n `\n \n \n `,\n );\n c.res = new Response(updatedHtml, c.res);\n }\n});\n\napp.get(\"/\", homepage);\napp.get(\"/projects\", projects);\napp.get(\"/projects/Time_Blindness_Loud_Calendar_via_iOS_shortcuts\", Time_Blindness_Loud_Calendar_via_iOS_shortcuts);\napp.get(\"/projects/Bringing_My_OCD_Online\", Bringing_My_OCD_Online);\napp.get(\"/projects/Debugging_Guide\", Debugging_Guide);\n\nexport default app.fetch;",[],[201],{"_102":208,"_95":209,"_158":210,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":211,"_99":163,"_166":167,"_168":212,"_170":22,"_171":-5,"_172":213,"_98":214},"acb850b0-1baf-11f0-acc0-569c3dd06744","projects","a9effb48-7ef9-47fa-b9d6-5332ce4fd920",["D",1744910177937],"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Bringing_My_OCD_Online } from \"./Bringing_My_OCD_Online\";\n// import { Debugging_Guide } from \"./Debugging_Guide\";\nimport { Context, Hono } from \"npm:hono\";\nimport { Time_Blindness_Loud_Calendar_via_iOS_shortcuts } from \"./Time_Blindness_Loud_Calendar_via_iOS_shortcuts\";\n\nexport const projects = (c: Context) => {\n return c.html(\n (\n \n \n Projects\n code{all:unset}blockquote{border:1px solid var(--slate10);color:var(--slate11);padding:2px 0 2px 20px;margin:0;font-style:italic}a[data-astro-cid-eimmu3lg]{display:inline-block;text-decoration:none}a[data-astro-cid-eimmu3lg].active{font-weight:600;text-decoration:underline}header[data-astro-cid-3ef6ksr2]{margin:0 0 2em}h2[data-astro-cid-3ef6ksr2]{margin:.5em 0}`,\n }}\n >\n \n \n \n Home{\" \"}Twitter{\" \"}\n Github{\" \"}\n

Projects

\n 11/19/2024 -{\" \"}\n \n ChatGPT Text Definition Update\n \n

\n 10/28/2024 -{\" \"}\n \n Val Town Version Logger\n \n

\n {\n /*

\n 8/26/2024 -{\" \"}\n \n Debugging Guide\n \n

*/\n }\n

\n 8/20/2024 -{\" \"}\n \n ChatGPT Text Definition\n \n

\n 8/19/2024 -{\" \"}\n \n Jumpchain Infosite\n \n

\n 7/7/2024 -{\" \"}\n \n Calculating Work Time\n \n

\n 6/18/2024 -{\" \"}\n \n Clarifying forum text and phrases\n \n

\n 5/31/2024 -{\" \"}\n \n Time Blindness Loud Calendar via iOS shortcuts\n \n

\n 3/6/2024 -{\" \"}\n \n Bringing My OCD Online: Userscripts for Immersive Forum Browsing\n \n

\n \n \n ),\n );\n};\n\nconst app = new Hono();\napp.get(\"/\", projects);\napp.get(\"/projects\", projects);\napp.get(\"/projects/Bringing_My_OCD_Online\", Bringing_My_OCD_Online);\napp.get(\"/projects/Time_Blindness_Loud_Calendar_via_iOS_shortcuts\", Time_Blindness_Loud_Calendar_via_iOS_shortcuts);\n// app.get(\"/projects/Debugging_Guide\", Debugging_Guide);\n\nexport default app.fetch;",[],[209],{"_102":216,"_95":217,"_158":218,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":219,"_99":32,"_166":203,"_168":220,"_170":22,"_171":-5,"_172":221,"_98":222},"9caa76a8-1baf-11f0-acef-569c3dd06744","testWbsite","1f9ccb98-3473-4155-b07e-6a0312eff403",["D",1744910150972],"/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\nexport const testWebsite = (request: Request) => {\n // convert to Response\n return new Response(\n renderToString(\n \n \n Page Title\n \n \n H e{\" \"}\n l l{\" \"}\n o\n \n ,\n ),\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n};",[],[217],"files",[155,175,183,191,199,207,215],"counts",{"_227":32,"_228":163,"_229":32,"_230":231},"pulls","branches","forks","envVars",{"_232":32,"_233":32},"count","emptyCount","contents",[236,239,242,245,248,251,254],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":237,"_99":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_98":238},["D",1744910150972],[157],{"_102":176,"_95":177,"_158":178,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":240,"_99":32,"_166":167,"_168":180,"_170":22,"_171":-5,"_98":241},["D",1744910150972],[177],{"_102":184,"_95":185,"_158":186,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":243,"_99":32,"_166":167,"_168":188,"_170":22,"_171":-5,"_98":244},["D",1744910150972],[185],{"_102":192,"_95":193,"_158":194,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":246,"_99":32,"_166":167,"_168":196,"_170":22,"_171":-5,"_98":247},["D",1744910150972],[193],{"_102":200,"_95":201,"_158":114,"_160":-5,"_161":139,"_162":118,"_164":116,"_104":249,"_99":163,"_166":203,"_168":204,"_170":22,"_171":-5,"_98":250},["D",1744910163030],[201],{"_102":208,"_95":209,"_158":210,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":252,"_99":163,"_166":167,"_168":212,"_170":22,"_171":-5,"_98":253},["D",1744910177937],[209],{"_102":216,"_95":217,"_158":218,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":255,"_99":32,"_166":203,"_168":220,"_170":22,"_171":-5,"_98":256},["D",1744910150972],[217],"file","upstreamProject",{"_102":147,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":260},{"_93":261,"_131":262},"willthereader","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXZ0bE1rbVBEMkhHNzR3SmVmMHc3eldBQiJ9","upstreamBranch",{"_102":142,"_104":265,"_266":267,"_95":43,"_140":147,"_99":268,"_141":-5,"_143":-5,"_269":270,"_106":-5,"_152":22,"_108":109,"_151":261,"_16":149,"_150":96},["D",1744900563378],"updatedAt",["D",1759336647099],245,"lockfileKey","1759336647438-esm.town_v_willthereader_WillpersonalWebsite@245-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":277,"_230":282},{"_102":103,"_95":96,"_104":278,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":118,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":279,"_133":280,"_136":281,"_152":22},["D",1744910150972],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":144,"_145":109,"_146":147,"_148":149,"_150":96,"_151":94},[],"actionData","errors"]

Bringing My OCD Online: Userscripts for Immersive Forum Browsing

Debugging Checklist

Observe the bug

Create a reproducible input

Narrow the search space

Analyze

Devise and run experiments

Modify code to squash the bug

Time Blindness Loud Calendar via iOS Shortcuts

How it works

Installation Guide

1. Add the shortcut

2. Give permissions to the shortcut

3. Schedule the shortcut

Will Krouse

Credit

Projects

stevekrouse

WillpersonalWebsite

Environment variables