\n\t\t\t\t404 Sorry, I could not find that page\n\t\t\t
\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\tAvoiding homework with code (and getting caught)
\n\n\t\t\t\t\n\t\t\t\t\tBack in 2020, my school used a few online learning platforms that allowed\n\t\t\t\t\tprofessors/teachers to assign homework to students. I, as a lazy developer, wanted to\n\t\t\t\t\tspend more time playing games and writing code, especially when everyone was spending\n\t\t\t\t\ttheir time at home because of lockdown. I started writing this post in January of 2022,\n\t\t\t\t\tbut I put off publicizing it for a while. It has been long enough since this all happened,\n\t\t\t\t\tso please sit back and enjoy.\n\t\t\t\t
\n\n\t\t\t\tThe back story
\n\t\t\t\t\n\t\t\t\t\tLet's set the scene. 2018, my school introduces a new online homework platform for\n\t\t\t\t\tstudents. It's called HegartyMaths and it does a lot. It's fairly simple, teachers\n\t\t\t\t\tchoose a topic to set for us as homework, with that we get a 10-15 minute\n\t\t\t\t\ttutorial/informational video on the subject (of which we have to write down notes whilst\n\t\t\t\t\twatching) and a shortish quiz to complete after finishing the video. It's a lot of work,\n\t\t\t\t\tespecially the quiz, and in the worst cases can take up to an hour to complete one topic\n\t\t\t\t\t(bad).\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tMostly, software engineers are rather lazy individuals. We tell metal how to do stuff for\n\t\t\t\t\tus. Homework then, naturally, is an arduous task for a developer who is still at school.\n\t\t\t\t\tSo, still 2018, a close friend of mine by the name of{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tScott Hiett\n\t\t\t\t\t{' '}\n\t\t\t\t\tand I decided to do something about the Hegarty situation. We started to reverse engineer\n\t\t\t\t\tthe frontend app and eventually came up with a Tampermonkey userscript that would glitch\n\t\t\t\t\tthe embedded YouTube player to say that we'd watched the video at least 1x. Crucially, our\n\t\t\t\t\tteachers could see how many times we'd watched the video, so being able to skip up to 20\n\t\t\t\t\tminutes of homework time was especially useful ā and it was a lot of fun to build too.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tSo we flexed it on our Snapchat stories and had our school friends message us to use it\n\t\t\t\t\tblah blah. We eventually figured out that we could also set it to be watched over 9999x\n\t\t\t\t\ttimes; every time we did that our accounts were reset by the Hegarty team.\n\t\t\t\t
\n\t\t\t\tThe first email
\n\t\t\t\t\n\t\t\t\t\tAfter this, we got in contact with our Math teacher in November of 2018 and got her to\n\t\t\t\t\tsend an email to HegartyMaths informing them of our petty exploit and they got back to us\n\t\t\t\t\tvery quickly.{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tI don't have the original email anymore but I distinctly remember it saying something\n\t\t\t\t\t\talong the lines of \"Stop trying to hack our platform and get back to doing your\n\t\t\t\t\t\thomework.\"\n\t\t\t\t\t{' '}\n\t\t\t\t\tEdit: While writing this, I was able to uncover the deleted email from a photo we had\n\t\t\t\t\ttaken of it in 2020. See below{' '}\n\t\t\t\t\t(certain details redacted for obvious reasons):\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThis response excited us a bit, as they were now aware of us messing around with the site\n\t\t\t\t\tand they had no intention of fixing the minor vuln we had anyway, so we kept using it. We\n\t\t\t\t\thad tried to build a script to answer the questions for us, but it was too much work at\n\t\t\t\t\tthe time (complex data structures, weird API responses, etc etc).\n\t\t\t\t
\n\t\t\t\tEducake
\n\t\t\t\t\n\t\t\t\t\tFor a while, students had access to another platform called Educake. Similar to\n\t\t\t\t\tHegartyMaths but targeting Biology, Chemistry and Physics. There was no video to watch at\n\t\t\t\t\tthe beginning. We'd used it for a few years, in fact since I joined the school, but I'd\n\t\t\t\t\tnever thought about reversing until all of this began.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tOne common factor between Hegarty and Educake is that they immediately give you the\n\t\t\t\t\tcorrect answer if you got a question wrong. We took advantage of this and wrote a small\n\t\t\t\t\tnode/mongo app & tampermonkey script to detect when a user was on a quiz page, answer\n\t\t\t\t\tevery question with a random number, and then store the correct answer in mongodb. I don't\n\t\t\t\t\thave the original source but the TamperMonkey script was probably something like\n\t\t\t\t\tthe following:\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tAs you can see, it was quite literally a loop through every question, saving the correct\n\t\t\t\t\tanswer as we got it and moving on. Eventually I added a few more features to fetch from\n\t\t\t\t\tthe database if we already had the right answer (meaning we don't answer{' '}\n\t\t\t\t\tMath.random every time) and also I added in support for multiple choice (so\n\t\t\t\t\tthat we actually pick one of the possible answers rather than making it up ā however I was\n\t\t\t\t\tsurprised that the Educake backend would allow an answer that wasn't even in the possible\n\t\t\t\t\tchoices).\n\t\t\t\t
\n\t\t\t\t\tNow working on the project solo, I decided it would be time to build a nice UI for it all\n\t\t\t\t\tand bundle it all into a simple Tampermonkey script for both flexing rights on Snapchat\n\t\t\t\t\t(people constantly begging me to be able to use it was certainly ego fuel I hadn't\n\t\t\t\t\texperienced before) and also for myself to get out of homework I didn't want to do.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThe end result? A ~200 line codebase that scooped up all questions and answers on the site\n\t\t\t\t\tthat could repeatedly get 100% on every single assignment and a 15mb mongo database.\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tBelow is a small video of what it all looked like. It also demonstrates a feature I added\n\t\t\t\t\tallowing for a \"target percentage\" ā meaning users could get something other than 100% to\n\t\t\t\t\tlook like more real/human score. Video was recorded on my Snapchat in November 2019.\n\t\t\t\t
\n\n\t\t\t\t\n\n\t\t\t\tHegarty 2
\n\t\t\t\t\n\t\t\t\t\tThe success of this script, along with pressure from my peers, led me to gain a lot of\n\t\t\t\t\tmotivation to start working on reversing Hegarty again. I reached out to an internet\n\t\t\t\t\tfriend who, for the sake of his privacy, will be named \"Jake.\" He also used HegartyMaths\n\t\t\t\t\tat his school and was in the same boat as me trying to avoid doing our homework. Together,\n\t\t\t\t\twe managed to figure out how to answer many varying types of questions, including multiple\n\t\t\t\t\tchoice and ordered answers, resulting in a huge amount of data stored. We had sacrificial\n\t\t\t\t\tuser accounts and managed to answer 60,000 questions in a couple minutes, rocketing our\n\t\t\t\t\tway to the top of the HegartyMaths global leaderboard.{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tWould like to give a special shoutout to Boon for lending us his login and letting us\n\t\t\t\t\t\tdecimate his statistics.\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tTogether, Jake and I scraped the entirety of Hegarty's database and now had a JSON file\n\t\t\t\t\tthat could be argued to be worth as much as Hegarty the company itself due to the entire\n\t\t\t\t\tproduct quite literally being the database we had copied.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tWith this file, I wanted to take it a step further and allow my friends and other people\n\t\t\t\t\tto make good use of it without directly giving out the database (irresponsible)... And\n\t\t\t\t\there Mochip was coined.\n\t\t\t\t
\n\t\t\t\tMochip
\n\t\t\t\t\n\t\t\t\t\tSo, where does Mochip tie in to this? Mochip was a Chrome extension, a collection of both\n\t\t\t\t\tour scraped Hegarty and scraped Educake databases sat behind a TypeScript API and a small\n\t\t\t\t\tReact app. Hosted on Heroku free tier and MongoDB Atlas free tier, users could log in,\n\t\t\t\t\tenter a question (from either site) and get back a list of answers Mochip has for that\n\t\t\t\t\tquestion. Here's what the landing page looked like:\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tIn the screenshot we can see a few stats on the right like total estimated time saved and\n\t\t\t\t\thow long you've had your account for. We gamified it a little just to keep people engaged\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tOur chrome extension was made for Educake as they disabled copying question text with the\n\t\t\t\t\tclipboard. We re-enabled that just by clicking a button that was injected into the UI. The\n\t\t\t\t\tchrome extension is no longer on the chrome web store, but we've found that mirrors still\n\t\t\t\t\thave listings that we can't get taken down:{' '}\n\t\t\t\t\t\n\t\t\t\t\t\textpose.com/ext/195388\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tOur userbase grew so big that we ended up with a Discord server and even our own listing\n\t\t\t\t\ton Urban dictionary ā I'm yet to find out who made it!{' '}\n\t\t\t\t\t
\n\t\t\t\t\tEventually we \"rebranded\" as I wanted to disassociate my name from the project.\n\t\t\t\t\tUnfortunately I do not have any screenshots from this era to show. I made an alt discord\n\t\t\t\t\taccount and a few announcements saying we'd \"passed on ownership\" however this ineveitably\n\t\t\t\t\tonly lasted for a couple weeks before we were rumbled.\n\t\t\t\t
\n\t\t\t\tCrashing down
\n\t\t\t\t\n\t\t\t\t\tAll good things must come to and end, and Mochip's did after Scott posted about Mochip on\n\t\t\t\t\this reddit account. Like any good CEO, Colin searches his company every now and then on\n\t\t\t\t\tGoogle to see what people are saying or doing and unfortunately came across our reddit\n\t\t\t\t\tpost. He signed up (although under a different email) and tested out the app and was\n\t\t\t\t\tshocked to see it working. Shortly after this I received an email from Colin directly. See\n\t\t\t\t\tbelow\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tI was upset but also a little content ā it was sort of validation that I'd successfully\n\t\t\t\t\tmade it and that catching the attention of Colin himself was sort of a good thing. We\n\t\t\t\t\tquickly scheduled a Google Meet, also inviting Scott, and I had one of the most memorable\n\t\t\t\t\tconversations of my life. I am extremely grateful for the advice Colin gave us in the\n\t\t\t\t\tcall.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tI'd like to give a special thank you to the legendary Colin Hegarty for his kindness and\n\t\t\t\t\tconsideration when reaching out to me. Things could have gone a lot worse for me had this\n\t\t\t\t\tnot been the case. HegartyMaths is a brilliant learning resource and at the end of the\n\t\t\t\t\tday, it's there to help students learn rather than be an inconvenience.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tShortly after, Colin reached out to the Educake team, who we also scheduled a call with.\n\t\t\t\t\tWe explained our complete methodology and suggested ways to prevent this in the future.\n\t\t\t\t\tThe easiest fix from our point of view would be to implement an easy rate limit with Redis\n\t\t\t\t\tthat would make it wildly infeasible to automate a test. The other thing we suggested was\n\t\t\t\t\tto scramble IDs in the database to invalidate our cloned database as much as\n\t\t\t\t\tpossible (e.g. we only had the Hegarty IDs, so we could no longer reverse lookup a\n\t\t\t\t\tquestion).\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tThank you for reading, truly. Mochip was a real passion project and I had a wild time\n\t\t\t\t\tbuilding it. ā\n\t\t\t\t
\n\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\tEdit 23 Sept, 2022: After making this post public, I posted this on HackerNews and\n\t\t\t\t\tamazingly sat in the #1 spot overnight. This site consequently received a lot of traffic,\n\t\t\t\t\tand I served almost 1.5TB in just shy of 6 hours. Some of the employees at Sparx (the\n\t\t\t\t\tparent company of HegartyMaths) ended up seeing this and forwarded it to Colin. A few\n\t\t\t\t\tminutes ago I just received a really lovely email from Mr Hegarty himself with the subject\n\t\t\t\t\t\"Congrats to you!\" I am so grateful for the kindness and consideration Colin has shown\n\t\t\t\t\tScott and me, so if you are a teacher reading this, then please consider using\n\t\t\t\t\tHegartyMaths at your school! This was the happy ending!\n\t\t\t\t
\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "src/blog/2022/01/serverless-discord-oauth/serverless-discord-oauth.tsx", "content": "import {stripIndent} from 'common-tags';\nimport Link from 'next/link';\nimport {Highlighter, Shell} from '../../../../components/syntax-highligher';\nimport {Post} from '../../../Post';\nimport discordOAuthDashboardImage from './discord-oauth-dashboard.png';\n\nexport class ServerlessDiscordOAuth extends Post {\n\tpublic name = 'Serverless Discord OAuth with Next.js';\n\tpublic slug = 'serverless-discord-oauth';\n\tpublic date = new Date('2 January 2022');\n\tpublic excerpt = \"Implementing basic Discord OAuth on Vercel's serverless platform\";\n\tpublic hidden = false;\n\tpublic keywords = ['serverless', 'vercel', 'discord', 'oauth', 'node'];\n\n\tpublic render() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\tServerless Discord OAuth with Next.js
\n\n\t\t\t\t\n\t\t\t\t\tOAuth is a brilliant solution to a difficult problem, but it can be hard to implement,\n\t\t\t\t\tespecially in a serverless environment. Hopefully, this post will help you get started.\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tLive demo:{' '}\n\t\t\t\t\t/demos/serverless-discord-oauth\n\t\t\t\t
\n\n\t\t\t\tThe setup
\n\t\t\t\t\n\t\t\t\t\tFirstly, we're going to need to create a Next.js with TypeScript app. Feel free to skip\n\t\t\t\t\tthis if you \"have one that you made earlier.\"\n\t\t\t\t
\n\t\t\t\tDependencies
\n\t\t\t\t\n\t\t\t\t\tWe will be relying on a few dependencies, the first is discord-api-types{' '}\n\t\t\t\t\twhich provides up-to-date type definitions for Discord's API (who could've guessed). We'll\n\t\t\t\t\talso need axios (or whatever your favourite http lib is) to make requests to\n\t\t\t\t\tDiscord. Additionally, we'll be encoding our user info into a JWT token & using the cookie\n\t\t\t\t\tpackage to serialize and send cookies down to the client. Finally, we'll use{' '}\n\t\t\t\t\tdayjs for basic date manipulation and pathcat to easily build\n\t\t\t\t\turls with query params.\n\t\t\t\t
Code
\n\t\t\t\tDope, you've made it this far already! Let's get some code written
\n\t\t\t\t\n\t\t\t\t\tFirstly, you're going to want to open up the folder pages/api and create a\n\t\t\t\t\tnew file. We can call it oauth.ts. The api folder is where Next.js will\n\t\t\t\t\tlocate our serverless functions. Handily, I've written a library called{' '}\n\t\t\t\t\tnextkit that can assist us with this process but for the time being it's out\n\t\t\t\t\tof scope for this post ā I'll eventually write a small migration guide.\n\t\t\t\t
\n\t\t\t\t\tCool! This is the bare bones that we will need to start writing our OAuth. It's quite a\n\t\t\t\t\tlot to bite, but if you break it down line by line and read the comments, it should be\n\t\t\t\t\tfairly self-explanatory. We're still missing a few prerequisites to tell Discord who we\n\t\t\t\t\tare: the client id and secret.\n\t\t\t\t
\n\n\t\t\t\tObtaining keys
\n\t\t\t\t\n\t\t\t\t\tOur tokens can be obtained by visiting{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tdiscord.com/developers/applications\n\t\t\t\t\t{' '}\n\t\t\t\t\tand registering a new application.\n\t\t\t\t
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tCopy and paste your client ID into your
oauth.tsfile\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tCopy and paste your client secret into your
oauth.tsfile\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tAdd your redirect URI (
http://localhost:3000/api/oauth) on the dashboard\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tMake sure all your changes are saved and then we are ready to test it out for the first\n\t\t\t\t\t\ttime!\n\t\t\t\t\t \n\t\t\t\t
Testing it
\n\t\t\t\t\n\t\t\t\t\tAwesome, we've got everything setup correctly. Now we can give it a quick spin. You can\n\t\t\t\t\tstart your Next.js development server if you haven't already by running{' '}\n\t\t\t\t\tbun dev in your terminal, you should be able to navigate to{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tlocalhost:3000/api/oauth\n\t\t\t\t\t{' '}\n\t\t\t\t\tand successfully authenticate.\n\t\t\t\t
\n\t\t\t\t\tAfterwards, if you open up your browser's devtools and check for the cookie section, you\n\t\t\t\t\tshould see a cookie by the name of token ā this is ours! Copy the value and\n\t\t\t\t\tpaste it into{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tjwt.io\n\t\t\t\t\t{' '}\n\t\t\t\t\tto decode it and see your details encoded inside it!\n\t\t\t\t
Why JWT?
\n\t\t\t\t\n\t\t\t\t\tWe've picked JWT because it lets us store information on the client side where only the\n\t\t\t\t\tserver can mutate and verify that the server created it. This means users can't modify the\n\t\t\t\t\tdata inside a JWT token, allowing the server to make guarantees about the data encoded.\n\t\t\t\t
\n\n\t\t\t\tEnvironment variables
\n\t\t\t\tOkay, we're almost there. Final stretch
\n\t\t\t\t\n\t\t\t\t\tRight now, we have our constants defined in this file which is fine for prototyping but it\n\t\t\t\t\tnow means that if you want to push your code to github, for example, your client secret\n\t\t\t\t\tand perhaps other private information will be publicly available on your project's\n\t\t\t\t\trepository! The solution? Environment varibles.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tEnvironment variables are bits of information that are provided to a process at runtime.\n\t\t\t\t\tIt means we don't have to store secrets inside our source code.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThankfully, Next.js makes it super easy for us to use environment variables with something\n\t\t\t\t\tcalled an env file.\n\t\t\t\t
\n\n\t\t\t\tCreating our env file
\n\t\t\t\t\n\t\t\t\t\tFirstly, make a new file in your project's file structure called .env and add\n\t\t\t\t\tthe content below. The format for env files is KEY=value. You can use{' '}\n\t\t\t\t\topenssl rand -hex 64 to generate a JWT secret.\n\t\t\t\t
\n\t\t\t\t\tFinally, we need to update our code to make sure that our api/oauth.ts file\n\t\t\t\t\tcan use the newly generated environment variables.\n\t\t\t\t
\n\t\t\t\t\tAnd that should be all good! I'll be writing a part two and three later on that will cover\n\t\t\t\t\taccessing the JWT from the server and also deployment to vercel.\n\t\t\t\t
\n\n\t\t\t\tThanks for reading!
\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "src/blog/2022/01/zero-kb-blog/zero-kb-blog.tsx", "content": "import {stripIndent} from 'common-tags';\nimport {Note} from '../../../../components/note';\nimport {Highlighter} from '../../../../components/syntax-highligher';\nimport {Post} from '../../../Post';\n\nexport class ZeroKbBlog extends Post {\n\tpublic name = 'The 0kb Next.js blog';\n\tpublic slug = 'zero-kb-nextjs-blog';\n\tpublic date = new Date('6 Jan 2022');\n\tpublic hidden = false;\n\tpublic excerpt = 'How I shipped a Next.js app with a 0kb bundle';\n\tpublic keywords = ['nextjs', 'zero', 'bundle', 'nextjs-zero-bundle', 'unstable_runtimeJS'];\n\n\tpublic render() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\tThe 0kb Next.js blog
\n\n\t\t\t\tpages directory of Next.js as App Dir\n\t\t\t\t\t(released in v13) does not support the settings used here. RSCs offer a similar idealogy\n\t\t\t\t\tof rendering components on the server only, while also allowing for client side JS.\n\t\t\t\t\n\t\t\t\t\tOk so the title was a liiittle bit clickbaity, but it's not technically a lie. This\n\t\t\t\t\tentire website has zero JavaScript on every single page... a Next.js app with zero\n\t\t\t\t\tclient side JS. How can this be possible?\n\t\t\t\t
\n\n\t\t\t\tSome context
\n\n\t\t\t\t\n\t\t\t\t\tNext.js is a huge abstraction of react-dom/server and other helpful utilities\n\t\t\t\t\tfor building server side rendered apps powered by React. It's really easy to get started\n\t\t\t\t\twith, and features things like file system routing, statically generated content and much\n\t\t\t\t\tmuch more. The most important thing to understand here is that there's a server...\n\t\t\t\t
\n\t\t\t\t\tFor those of you who are not familiar with React, it's a JavaScript framework for\n\t\t\t\t\tbuilding user interfaces. It handles the view layer of an app and is used to render the\n\t\t\t\t\tUI. Next.js takes this a step further and allows you to write your own view layer to have\n\t\t\t\t\tthe first render performed on a server, which allows for a lot of performance and UI\n\t\t\t\t\toptimizations because we can ship back a lot less to the client (foreshadowing).\n\t\t\t\t
\n\n\t\t\t\tRuntime JS
\n\n\t\t\t\t\n\t\t\t\t\tWith something called PageConfig, we can instruct Next.js to supply zero\n\t\t\t\t\truntime JS to the client. It comes with a couple of trade-offs, but the general idea is\n\t\t\t\t\tthat we perform our first render on the server and the resulting HTML and CSS is \"frozen\"\n\t\t\t\t\tand sent down to the client over the wire. Zero JavaScript runtime in the browser, no{' '}\n\t\t\t\t\t<script> tags in sight!\n\t\t\t\t
What's the catch?
\n\n\t\t\t\t\n\t\t\t\t\tAs the saying goes, there's no such thing as a free lunch. As with anything, doing this\n\t\t\t\t\tcomes with some trade-offs. For example, Next has a lot of built-in React components that\n\t\t\t\t\tcan speed up not only your app, but also development speed. Using the zero kb mode, we\n\t\t\t\t\tunfortunately cannot make full use of the next/link component; a component\n\t\t\t\t\tthat prefetches pages so that clicks on links don't cause a full page reload.\n\t\t\t\t\tAdditionally, we cannot use next/image as this also requires some minimal\n\t\t\t\t\truntime JavaScript (a regular img works just fine). This also means zero\n\t\t\t\t\tstate updates or literally any JavaScript that would've otherwise been bundled can run.\n\t\t\t\t
\n\t\t\t\t\tSo if you're fine with that, then you can go ahead and enable it. No more worrying about\n\t\t\t\t\tworrying about installing huge npm packages and watching your user count drop in realtime.\n\t\t\t\t\tSee your gorgeous website in pure static HTML & CSS. Gone are the days of\n\t\t\t\t\tbundlephobia.com... I bet at this point you are itching to know how to enable it. Well,\n\t\t\t\t\there's a quick example:\n\t\t\t\t
\n\n\t\t\t\tThis page has no JavaScript!
;\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t\n\t\t\t\t\tAnd boom! just like that, 0kb bundle. If you are going to use this though, just bear in\n\t\t\t\t\tmind that as well as the trade offs mentioned above, you literally cannot use any\n\t\t\t\t\tJavaScript in the client anymore for this page. Zero. Nada. Null. Void. That means no\n\t\t\t\t\tstate updates, no network requests, no useEffect, no event listeners, no timers. Nothing.\n\t\t\t\t
\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "src/blog/2022/03/open-source/open-source.tsx", "content": "import {Post} from '../../../Post';\n\nexport class OpenSource extends Post {\n\tpublic name = 'Open Source';\n\tpublic slug = 'open-source';\n\tpublic date = new Date('20 Mar 2022');\n\tpublic hidden = true;\n\tpublic excerpt = 'Thoughts & feelings on Open Source';\n\tpublic keywords = ['Developer', 'Open Source', 'GitHub', 'sponsorships'];\n\n\tpublic render() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\tOpen Source
\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tRelevant xkcd: #2347\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tI really do love open source. I love being able to build software that I know people will\n\t\t\t\t\tbe able to make great use of. I love that we can extend already existing open source\n\t\t\t\t\tsoftware & I love that we're able to put licenses on our code and explain where and\n\t\t\t\t\thow you can use it.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tBut open source is a truly double-edged sword. There are always stories on Twitter with\n\t\t\t\t\tpeople explaining how they were taken advantage of, or don't have the resources to keep\n\t\t\t\t\tmaintaining a project.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tRecently, a library called faker.js was nuked by the author in an attempt to\n\t\t\t\t\tmake a \"political\" point. Wildly unsuccessful and, in my opinion, extremely immature.\n\t\t\t\t\tHowever, the community responded really quickly and quickly forked the project into{' '}\n\t\t\t\t\t@faker-js/faker. This meant developers could easily switch their project over\n\t\t\t\t\tto use a 100% API compatible, up-to-date and community-managed version of the project. The\n\t\t\t\t\toriginal author, Marak Squires, ended up deleting the original repo. As well as that,\n\t\t\t\t\tSquires also placed malicious code in another project of his, colors.js, that\n\t\t\t\t\twould infinite loop the victim's computer.\n\t\t\t\t
\n\t\t\t\t\tBut there was a reason for this. Thanks to the wonderful archive.org, we're able to see\n\t\t\t\t\told and deleted posts explaining why this had happened ā and it's a common frustration\n\t\t\t\t\twithin the community. Famously, Marak mentions he will do{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tNo more free work\n\t\t\t\t\t{' '}\n\t\t\t\t\tand he's also written a good{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tfew hundred words\n\t\t\t\t\t{' '}\n\t\t\t\t\ton the topic, too.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tOkay, so he's frustrated with people taking Open Source for granted. What's the solution\n\t\t\t\t\there? Well, fantastic companies like OpenCollective and GitHub are taking the initiative\n\t\t\t\t\tto provide a direct, low-fee method of sponsoring open source projects. Big companies like\n\t\t\t\t\tDiscord, Stripe, and Microsoft have all sponsored small and large projects and sometimes\n\t\t\t\t\tthey get their name on the README in return. At the moment, we're not quite there\n\t\t\t\t\tcompletely, but we're definitely heading in the right direction.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tAlternatively, a recent JavaScript library popped up called motion (\n\t\t\t\t\tmotion.dev) which caused a bit of a stir in the\n\t\t\t\t\tcommunity for shaking things up a little bit with regards to their monetization strategy.\n\t\t\t\t\tThe library itself exists on npm and can be installed as you would any other node module,\n\t\t\t\t\texcept there is no GitHub URL for the package..? Taking a look at the README on npm says\n\t\t\t\t\tthe following:\n\t\t\t\t
\n\t\t\t\t\tBecome a sponsor and get access to the private Motion One repo. File issues, read the\n\t\t\t\t\tchangelog and source code, and join discussions that help shape the future of the API.\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\tOkay, interesting, so you can use the module and read the documentation for free, but\n\t\t\t\t\taccessing the source code requires somewhat of a paid subscription. There is valid\n\t\t\t\t\tincentive for companies to do this as it allows them to not only audit the codebase (under\n\t\t\t\t\tsecurity concerns), but also it allows for reading the source code to see how everything\n\t\t\t\t\tworks and learn a lot.\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tSo what's the downside to this? Well, one of the reasons traditional open source is\n\t\t\t\t\tbrilliant is because it allows anybody to freely see how something works ā so assuming\n\t\t\t\t\tthat is true, could we even call motion an open source project? What's more,\n\t\t\t\t\ta lot of individual developers are students or kids learning and as such, they're not\n\t\t\t\t\tfinancially able to support projects. On top of that, they are the generation we want to\n\t\t\t\t\tbe educating the MOST about programming and so immediately cutting them off is definitely\n\t\t\t\t\tnot a win.\n\t\t\t\t
\n\t\t\t\t\tOne final example of open source being painful has got to be Fastify. Fastify's creator is\n\t\t\t\t\tactive on Twitter very often and there have been a few Tweets describing some headaches\n\t\t\t\t\tthey have had to go through as a team to get Fastify to be successful. Keeping it short,\n\t\t\t\t\tbut one thing they have done extensively has been advertising Fastify, which has kept it\n\t\t\t\t\tmainstream and allowed for more users and therefore sponsorships. Matteo Collina,\n\t\t\t\t\tFastify's creator, has explained that had there not been the advertising done, Fastify\n\t\t\t\t\twould not be as maintained, if at all, as it is today. Right now, Fastify has two core\n\t\t\t\t\tmaintainers and 16 on the core team overall.\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tThere is plenty of room for innovation in this space. I'm excited to see where GitHub\n\t\t\t\t\tsponsors and OpenCollective go and if we can see some large tech companies spreading the\n\t\t\t\t\tword about open source.\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\tBy the way, I do accept sponsorships via GitHub, so if you enjoy my work or writing then\n\t\t\t\t\tplease consider any spare VC funding you have just raised š{' '}\n\t\t\t\t\tgithub.com/sponsors/alii\n\t\t\t\t
\n\n\t\t\t\tThanks for reading!
\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "src/blog/2022/08/strict-tsconfig/strict-tsconfig.tsx", "content": "import {stripIndent} from 'common-tags';\nimport {Highlighter} from '../../../../components/syntax-highligher';\nimport {Post} from '../../../Post';\n\nexport class StrictTSConfig extends Post {\n\tpublic name = 'A strict TSConfig';\n\tpublic slug = 'strict-tsconfig';\n\tpublic date = new Date('08 Sep 2022');\n\tpublic hidden = false;\n\tpublic excerpt = 'The strictest TypeScript configuration possible. \"Look ma, no errors!\"';\n\tpublic keywords = ['strict', 'tsconfig', 'typescript'];\n\n\tpublic render() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t\n\t\t\t\t\tHere's a very strict TypeScript configuration file. All the safety checks you could ever\n\t\t\t\t\twant. \"Look ma, no errors!\"\n\t\t\t\t
\n\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\tAlthough, nowadays I'm just using bun init...\n\t\t\t\t
WTF, ESM!?
\n\n\t\t\t\t\n\t\t\t\t\tI{' '}\n\t\t\t\t\t
Preface
\n\n\t\t\t\t\n\t\t\t\t\tI am so incredibly grateful for the absolutely wonderful{' '}\n\t\t\t\t\t
\n\t\t\t\t\tAndrew works on TypeScript itself at Microsoft, specifically on auto imports and modules.\n\t\t\t\t\tIt's likely he's the only person on the planet who knows exactly how this works inside\n\t\t\t\t\tout. It's been rumoured that he will be summoned if you utter \"module resolution\" three\n\t\t\t\t\ttimes in the dark. Thank you Andy - you're truly a super star āš\n\t\t\t\t
\n\n\t\t\t\t\n\n\t\t\t\t
\n\t\t\t\t\tRight now, it's extraordinarily clear we are experiencing growing pains in our great\n\t\t\t\t\tmigration to ECMAScript Modules. Below is the part of my package.json that I\n\t\t\t\t\tposted.\n\t\t\t\t
\n\t\t\t\t\tAs mentioned above, I made some mistakes here. First of all, it's important to\n\t\t\t\t\tdifferentiate between what is runtime code that engines will understand (what is\n\t\t\t\t\tJavaScript), and what is type definitions (what is TypeScript). This (seems) easy enough,\n\t\t\t\t\twe can see clearly that there are two types fields. One is under the{' '}\n\t\t\t\t\t. entrypoint for exports, the other is at the root. Let's break\n\t\t\t\t\tit down.\n\t\t\t\t
Where did I go wrong?
\n\n\t\t\t\t\n\t\t\t\t\tIt's pretty hard to get a conclusive answer from the \"crowd\" of JavaScript developers\n\t\t\t\t\tabout the best way to publish a package to npm. Everyone has conflicting answers & we\n\t\t\t\t\tall seem to be following what already exists on GitHub and npm. There are lots of packages\n\t\t\t\t\tthat are published technically incorrectly but used and installed by millions of people.\n\t\t\t\t\tThis means a lot of packages follow what I'm calling a colloquial standard. Here's what I{' '}\n\t\t\t\t\t*thought to be true*, and so do most other devs...\n\t\t\t\t
\n\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\t
.typesat the root is for TypeScript type definitions. A single{' '}\n\t\t\t\t\t\t.d.tsfile can define all exported symbols in your package.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.mainis for CJS beforeexportsexisted. You can emit a single\n\t\t\t\t\t\tCJS compatible file that can be consumed by (legacy) runtimes.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.moduleis for an ESM entrypoint beforeexportsexisted. This\n\t\t\t\t\t\twas mostly used by bundlers like Webpack, and has never been part of any standard. It's\n\t\t\t\t\t\tsuperseded byexports, but it might be good to keep in order to support the\n\t\t\t\t\t\tolder bundlers.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.exportsis the new standard for defining entrypoints for your package. It\n\t\t\t\t\t\tis a map of entrypoints to files. The.entrypoint is the default\n\t\t\t\t\t\tentrypoint. We also include./package.jsonso the package.json file is also\n\t\t\t\t\t\taccessible. Theexportsfield is supported in modern runtimes. Node has\n\t\t\t\t\t\tsupported it since v16.0.0 - for this reason, you will seeexports{' '}\n\t\t\t\t\t\tsometimes referenced as node16.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.exports.*.typesis for TypeScript type definitions. A single{' '}\n\t\t\t\t\t\t.d.tsfile can define all exported symbols in your package for both CJS and\n\t\t\t\t\t\tESM.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.exports.*.importis for ESM. This is the entrypoint for how a modern\n\t\t\t\t\t\truntime should import your package when running under CommonJS. It is a single ESM\n\t\t\t\t\t\tcompatible file.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.exports.*.requireis for CJS. This is the entrypoint for how a modern\n\t\t\t\t\t\truntime should import your package when running under CommonJS. It is a single CJS\n\t\t\t\t\t\tcompatible file.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
.exports.*.defaultis for when a runtime does not match any other\n\t\t\t\t\t\tcondition, and is a fallback. It's also within the spec to specifydefault{' '}\n\t\t\t\t\t\tas the only entrypoint. I did not usedefaultin my initial Tweet.\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\tI made a few mistakes here. First of all, types are specific to ESM and CJS. This means\n\t\t\t\t\tthere should be two types fields. One for ESM, one for CJS. Even the\n\t\t\t\t\tTypeScript documentation gets this wrong, and is something they're working on updating.\n\t\t\t\t\tSolutions for this are also pretty wild. I've managed to get things working by simply\n\t\t\t\t\tcopying ./dist/index.d.ts to ./dist/index.d.cts after bundling,\n\t\t\t\t\tand making the following changes to my package.json.\n\t\t\t\t
\n\t\t\t\t\tNote that we point to a .js file and not .mjs when targeting ESM. This is because our\n\t\t\t\t\tpackage.json has type set to module. This tells our runtime that\n\t\t\t\t\tall files are assumed to be ESM unless they have a .cjs extension. There's no\n\t\t\t\t\tsuch thing as an ESM package, only ESM files. Using \"type\": \"module\", is just\n\t\t\t\t\ta way to tell the runtime to interpret existing files as ESM.\n\t\t\t\t
What gives?
\n\n\t\t\t\t\n\t\t\t\t\tClearly, this is messy. It's messy because we're trying to support a lot of different\n\t\t\t\t\truntimes, and we're trying to support them all at once. We're trying to support ESM, CJS,\n\t\t\t\t\tlegacy bundlers, modern bundlers, and TypeScript. We're trying to support all of these\n\t\t\t\t\truntimes at once, and finally, we're trying to support them all at once in a single{' '}\n\t\t\t\t\tpackage.json file. Few other languages suffer from this level of complexity\n\t\t\t\t\tand fragmentation.\n\t\t\t\t
\n\t\t\t\t\tLet's break down the mess and why all these things are the way they are. Starting off with{' '}\n\t\t\t\t\texports.\n\t\t\t\t
\n\t\t\t\t\texports is the modern way to define what your package exports. We have\n\t\t\t\t\talready established that it is a map of entrypoints to files. Let's step through what\n\t\t\t\t\thappens when a runtime/consumer (we'll use the word consumer, because TypeScript - which\n\t\t\t\t\tis not a runtime - is also reading our code in this case) wants to import our package.\n\t\t\t\t
- \n\t\t\t\t\t
- \n\t\t\t\t\t\t
Consumer encounters an import statement
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\t\t\timport {something} from 'my-package';\n\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t \n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tConsumer resolve the source code for
\n\t\t\t\t\tmy-package. In Node.js this is done\n\t\t\t\t\t\t\tby looking for the folder name innode_modules, and then finding the{' '}\n\t\t\t\t\t\t\tpackage.json. In any case, this is up to the consumer to implement\n\t\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tConsumer finds
\n\t\t\t\t\tpackage.jsonfile in the source code folder, and begins to\n\t\t\t\t\t\t\tread theexportsfield\n\t\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\tIt steps through each field (in order, despite it being an object) and checks if the\n\t\t\t\t\t\tcondition the consumer is looking for exists in the
exportsfield.\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tIf the condition is met, the consumer will use the file specified in the{' '}\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\texportsfield as the entrypoint for the package. If the condition is not\n\t\t\t\t\t\t\tmet, it will continue to the next field. If no condition is met, a consumer will\n\t\t\t\t\t\t\tusually exit/throw an error.\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAn example of a condition being met could be Node.js looking for an ESM file. In this\n\t\t\t\t\t\t\tcase, it would look for the
\n\t\t\t\t\timportcondition first, before trying to fall\n\t\t\t\t\t\t\tback todefaultif it exists.\n\t\t\t\t\t\t \n\t\t\t\t
Ambient Declarations
\n\t\t\t\t\n\t\t\t\t\tI recently landed a pull request (\n\t\t\t\t\t#18024) in{' '}\n\t\t\t\t\tBun that reorganized and rewrote significant portions of\n\t\t\t\t\tBun's TypeScript definitions. Working on this PR made me realize how little documentation\n\t\t\t\t\tthere is on ambient declarations, so I wanted to write about it.\n\t\t\t\t
\n\t\t\t\tWhat are ambient declarations?
\n\t\t\t\tI'll start by answering this question with a couple questions...
\n\t\t\t\t\n\t\t\t\t\t1. How does TypeScript know the types of my node_modules, which are mostly\n\t\t\t\t\tall .js files?\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t2. How does TypeScript know the types of APIs that exist in my runtime?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tThe short answer: It can't!\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThe short but slightly longer answer is that it CAN with some extra files - ambient\n\t\t\t\t\tdeclarations! These are files that exist somewhere in your project (usually in{' '}\n\t\t\t\t\tnode_modules) that contain type information and tell TypeScript what{' '}\n\t\t\t\t\tthings exist at runtime. They use the file extension .d.ts, with the\n\t\t\t\t\t`.d` denoting \"declaration\".\n\t\t\t\t
\n\t\t\t\t\tBy things I mean anything you import and use. That could be functions, classes,\n\t\t\t\t\tvariables, modules themselves, APIs from your runtime, etc.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThey're called \"ambient\" declarations because in the TypeScript universe ambient simply\n\t\t\t\t\tmeans \"without implementation\"\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tIf you've ever imported a package and magically got autocomplete and type checking, you've\n\t\t\t\t\tbenefited from ambient declarations.\n\t\t\t\t
\n\t\t\t\tA simple ambient declaration file could look like this:
\n\t\t\t\t\n\t\t\t\t\tIf you can already read TypeScript this ambient declaration will be very easy to\n\t\t\t\t\tunderstand. You can clearly see a JSDoc comment, the types of the arguments, the return\n\t\t\t\t\ttype, an export keyword, etc. It almost looks like real TypeScript, except the really\n\t\t\t\t\timportant part to note here is the keyword declare is used. This keyword\n\t\t\t\t\ttells TypeScript to not expect any runtime code to exist here, it's purely a type\n\t\t\t\t\tdeclaration only.\n\t\t\t\t
declare keyword inside of\n\t\t\t\t\tregular .ts files. There are many use cases for this, a common one being declaring types\n\t\t\t\t\tof globals.\n\t\t\t\t\n\t\t\t\t
How Does TypeScript Find Types?
\n\t\t\t\t\n\t\t\t\t\tModule resolution is an incredibly complex topic, but it boils down to TypeScript looking\n\t\t\t\t\tfor relevant types in a few places.\n\t\t\t\t
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tBundled types: Some packages include their own
.d.tsfiles.\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tDefinitelyTyped: If not, TypeScript looks in
@types/packages in{' '}\n\t\t\t\t\t\tnode_modules.\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tYour own project: You can add
.d.tsfiles anywhere in your project\n\t\t\t\t\t\tto describe types for JS code, global variables, or even new modules.\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tSource: If the module resolution algorithm resolves to an actual TypeScript file,\n\t\t\t\t\t\tthen the types can be read from the original source code anyway. Some packages on NPM\n\t\t\t\t\t\talso publish their TypeScript source and allow modern tooling to consume it directly.{' '}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tAmbient declarations are NOT used in either of these scenarios\n\t\t\t\t\t\t\n\t\t\t\t\t\t.\n\t\t\t\t\t \n\t\t\t\t
Ambient vs. Regular Declarations
\n\t\t\t\t\n\t\t\t\t\tRegular declarations are for code you write and control.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tAmbient declarations are for code that exists elsewhere.\n\t\t\t\t
\n\t\t\t\tModule vs. Script Declarations
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tModule declarations: Any
.d.tsfile with a top-level{' '}\n\t\t\t\t\t\timportorexport. Types are added to the module.\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\tScript (global) declarations: No top-level import/export. Types are added to the\n\t\t\t\t\t\tglobal scope.\n\t\t\t\t\t \n\t\t\t\t
| File Type | \n\t\t\t\t\t\t\tExample Syntax | \n\t\t\t\t\t\t\tScope | \n\t\t\t\t\t\t
|---|---|---|
| Module | \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\texport declare function foo(): void;\n\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\tModule only (must be imported) | \n\t\t\t\t\t\t
| Script (global) | \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tdeclare function setTimeout(...): number;\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t declare function foo(): void;\n\t\t\t\t\t\t\t | \n\t\t\t\t\t\t\tGlobal (available everywhere) | \n\t\t\t\t\t\t
\n\t\t\t\t\tRule of thumb: An ambient declaration file is global unless it has a top-level\n\t\t\t\t\timport/export.\n\t\t\t\t
\n\t\t\t\tglobalThis.\n\t\t\t\t\n\t\t\t\t\tWhy does this distinction exist? TypeScript is old in JavaScript's history - it predates\n\t\t\t\t\tthe modern module system (ESM) and needed to support the \"everything is global\" style of\n\t\t\t\t\tearly JS. That's why it still supports both module and script (global) declaration files.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tHow does TypeScript treat these differently?\n\t\t\t\t
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tModule: Everything you declare is private to that module and must be explicitly\n\t\t\t\t\t\timported by the consumer - just like regular TypeScript/ESM code.\n\t\t\t\t\t \n\t\t\t\t\t
- \n\t\t\t\t\t\tScript (global): Everything is injected directly into the global scope of every\n\t\t\t\t\t\tfile in your program. This is how the DOM lib ships types like
window,{' '}\n\t\t\t\t\t\tdocument, and functions likesetTimeout.\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\tWhen would you use each?\n\t\t\t\t
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tModule: For packages, libraries, and almost all modern code.\n\t\t\t\t\t \n\t\t\t\t\t
- \n\t\t\t\t\t\tScript: For patching browser globals, legacy code, or when you really need to add\n\t\t\t\t\t\tsomething to the global scope.\n\t\t\t\t\t \n\t\t\t\t
global {'{ ... }'} escape hatch, but that should be reserved for\n\t\t\t\t\tunavoidable edge-cases.\n\t\t\t\tDeclaring Global Types
\n\t\t\t\t\n\t\t\t\t\tSuppose you want to add a global variable that your runtime creates, or perhaps a library\n\t\t\t\t\tyou're using doesn't have types for:\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tBecause this declaration file is NOT a module, this will be accessible everywhere in your\n\t\t\t\t\tprogram.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tWhat if you wanted to add something to the window object? TypeScript declares\n\t\t\t\t\tthe window variable exists by assigning it to an interface called Window,\n\t\t\t\t\twhich is also declared globally. You can perform{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tDeclaration Merging\n\t\t\t\t\t{' '}\n\t\t\t\t\tto extend that interface, and tell TypeScript about new properties that exist.\n\t\t\t\t
Declaring modules by name
\n\t\t\t\t\n\t\t\t\t\tYou can declare a module by its name. As long as the ambient declaration file gets\n\t\t\t\t\treferenced or included in your build somehow, then TypeScript will make the module\n\t\t\t\t\tavailable.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThis syntax also allows for declaring modules with wildcard matching. We do this in{' '}\n\t\t\t\t\t@types/bun, since Bun allows for importing .toml and{' '}\n\t\t\t\t\t.html files.\n\t\t\t\t
Writing Your Own .d.ts Files
\n\t\t\t\tSuppose you're using a JS library with no types. Here's how to add them:
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\tCreate a new
.d.tsfile (you could put this in atypes/{' '}\n\t\t\t\t\t\tfolder)\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\t
Write a module declaration:
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\tdeclare module 'my-lib' {\n\t\t\t\t\t\t\texport function coolFeature(x: string): number;\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t\t\t \n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\tMake sure your
tsconfig.jsonincludes the types folder (usually automatic).\n\t\t\t\t\t \n\t\t\t\t
Compiler contract
\n\t\t\t\t\n\t\t\t\t\tSince ambient modules don't contain runtime code, they should be treated like \"promises\"\n\t\t\t\t\tor \"contracts\" that you are making with the compiler. They're like documentation that\n\t\t\t\t\tTypeScript can understand. Just like documentation for humans, it can get out of sync with\n\t\t\t\t\tthe actual runtime code. A lot of the work I'm doing at Bun is ensuring our type\n\t\t\t\t\tdefinitions are up to date with Bun's runtime APIs.\n\t\t\t\t
\n\t\t\t\tConflicts
\n\t\t\t\t\n\t\t\t\t\tWhile doing research for the pull request mentioned at the beginning, I found a few cases\n\t\t\t\t\twhere the compiler was not able to resolve the types of some of Bun's APIs because we had\n\t\t\t\t\tdeclared that certain symbols existed, where they might have already been declared by{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tlib.dom.d.ts\n\t\t\t\t\t{' '}\n\t\t\t\t\t(the builtin types that TypeScript provides by default) or things like{' '}\n\t\t\t\t\t@types/node (the types for Node.js). .\n\t\t\t\t
\n\t\t\t\t\tAvoiding these conflicts is unfortunately not always possible. Bun implements a really\n\t\t\t\t\tsolid best-effort approach to this, but sometimes you just have to get creative. For\n\t\t\t\t\texample, you might see code like this to \"force\" TypeScript to use one type over another:\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tBun's types take this a step further by using a clever trick that lets us use the built-in\n\t\t\t\t\ttypes if they exist, with a graceful fallback when they don't.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\tdeclare module \"bun\" {\n\t\t\t\t\t\t\tnamespace __internal {\n\t\t\t\t\t\t\t\t// \\`onabort\\` is defined in lib.dom.d.ts, so we can check to see if lib dom is loaded by checking if \\`onabort\\` is defined\n\t\t\t\t\t\t\t\ttype LibDomIsLoaded = typeof globalThis extends { onabort: any } ? true : false;\n\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Helper type for avoiding conflicts in types.\n\t\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t\t * Uses the lib.dom.d.ts definition if it exists, otherwise defines it locally.\n\t\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t\t * This is to avoid type conflicts between lib.dom.d.ts and \\@types/bun.\n\t\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t\t * Unfortunately some symbols cannot be defined when both Bun types and lib.dom.d.ts types are loaded,\n\t\t\t\t\t\t\t\t * and since we can't redeclare the symbol in a way that satisfies both, we need to fallback\n\t\t\t\t\t\t\t\t * to the type that lib.dom.d.ts provides.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\ttype UseLibDomIfAvailable =\n\t\t\t\t\t\t\t\t\tLibDomIsLoaded extends true\n\t\t\t\t\t\t\t\t\t\t? typeof globalThis extends { [K in GlobalThisKeyName]: infer T } // if it is loaded, infer it from \\`globalThis\\` and use that value\n\t\t\t\t\t\t\t\t\t\t\t? T\n\t\t\t\t\t\t\t\t\t\t\t: Otherwise // Not defined in lib dom (or anywhere else), so no conflict. We can safely use our own definition\n\t\t\t\t\t\t\t\t\t\t: Otherwise; // Lib dom not loaded anyway, so no conflict. We can safely use our own definition\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t\t \n\n\t\t\t\t\t\n\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\t\tdeclare var Worker: Bun.__internal.UseLibDomIfAvailable<'Worker', {\n\t\t\t\t\t\t\t\tnew(filename: string, options?: Bun.WorkerOptions): Worker;\n\t\t\t\t\t\t\t}>;\n\t\t\t\t\t\t`}\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tThis declares that the Worker runtime value exists, and will use the version\n\t\t\t\t\tfrom TypeScript's builtin lib files if they're loaded already in the program, and if not\n\t\t\t\t\tit will use the version passed as the second argument.\n\t\t\t\t
\n\t\t\t\t\tThis trick means we can write types that can exist in many different environments without\n\t\t\t\t\tworrying about impossible-to-fix conflicts breaking the build.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t
Declaring entire modules as global namespaces
\n\t\t\t\t\n\t\t\t\t\tIn Bun, everything importable from the 'bun' module is also available on the\n\t\t\t\t\tglobal namespace Bun\n\t\t\t\t
\n\t\t\t\t\tIn fact, you can do an equality to check to see that importing the module gives you the\n\t\t\t\t\tsame reference to the global namespace.\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tDeclaring this in TypeScript uses some strange syntax. You can{' '}\n\t\t\t\t\t\n\t\t\t\t\t\tfind the declaration here\n\t\t\t\t\t\n\t\t\t\t\t, but it looks like this:\n\t\t\t\t
\n\t\t\t\tLet's break it down
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\t
We have an import statement, so this file becomes a module.
\n\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tWe import everything from the
\n\t\t\t\t\tbunmodule and alias to a namespace called{' '}\n\t\t\t\t\t\t\tBunModule\n\t\t\t\t\t\t \n\t\t\t\t\t - \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tWe use the `declare global` block to escape back into global scope, and then use the\n\t\t\t\t\t\t\tfunky syntax
\n\t\t\t\t\texport importto re-export the namespace to the global scope\n\t\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\tThis export import syntax a way of saying \"re-export this namespace\" - except\n\t\t\t\t\twhen declaring on the global scope (inside a declare global {'{ }'} block or\n\t\t\t\t\tinside a script/global file) the export keyword kind of turns into a namespace declaration\n\t\t\t\t\tfor the global scope.\n\t\t\t\t
\n\t\t\t\t\tHere is the \"rest\" of @types/bun that piece this all together\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\t\tdeclare module \"bun\" {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Creates a new BunFile instance\n\t\t\t\t\t\t\t\t * @param path - The path to the file\n\t\t\t\t\t\t\t\t * @returns A new BunFile instance\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tfunction file(path: string): BunFile;\n\n\t\t\t\t\t\t\t\tinterface BunFile {\n\t\t\t\t\t\t\t\t\t/* ... */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t`}\n\t\t\t\t\t \n\n\t\t\t\t\t\n\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\t\t// You \"import\" types by using triple-slash references,\n\t\t\t\t\t\t\t// which tell TypeScript to add these declarations to the build.\n\n\t\t\t\t\t\t\t/// \n\n\t\t\t\t\t\n\t\t\t\t\t\t{stripIndent`\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\"name\": \"@types/bun\",\n\t\t\t\t\t\t\t\t\"version\": \"1.2.13\",\n\t\t\t\t\t\t\t\t\"types\": \"./index.d.ts\",\n\t\t\t\t\t\t\t\t// ...\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t`}\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\tIn previous versions of Bun's types, the Bun global was defined as a variable that\n\t\t\t\t\timported the bun module.\n\t\t\t\t
\n\t\t\t\t\tBut since this is a runtime value, we have lost all of the types that are exported from\n\t\t\t\t\tthe bun module. For example we can't use Bun.BunFile in our\n\t\t\t\t\tcode.\n\t\t\t\t
\n\t\t\t\t\tIn the pull request mentioned at the beginning, I changed previous declaration to use the{' '}\n\t\t\t\t\texport import syntax which fixed this issue. It means you can now use the Bun\n\t\t\t\t\tnamespace exactly like you'd expect the bun module to behave.\n\t\t\t\t
\n\t\t\t\t
Ambient declaration gotchas
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\t\"Cannot find module\" or \"type not found\" errors: Make sure your{' '}\n\t\t\t\t\t\t
.d.tsfile is included in the project (checktsconfig.json's{' '}\n\t\t\t\t\t\tinclude/exclude).\n\t\t\t\t\t \n\n\t\t\t\t\t - \n\t\t\t\t\t\tConflicts: If two libraries declare the same global, you'll get errors. Prefer\n\t\t\t\t\t\tmodule declarations, and avoid globals unless necessary.\n\t\t\t\t\t \n\t\t\t\t
Resources
\n\t\t\t\t- \n\t\t\t\t\t
- \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tBun's TypeScript types\n\t\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t
- \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tTypeScript Handbook: Declaration Files\n\t\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t
- \n\t\t\t\t\t\tDefinitelyTyped\n\t\t\t\t\t \n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t);\n\t}\n}\n"
},
{
"path": "src/blog/Post.ts",
"content": "import type {ReactNode} from 'react';\n\nexport abstract class Post {\n\tpublic abstract readonly name: string;\n\tpublic abstract readonly slug: string;\n\tpublic abstract readonly date: Date;\n\tpublic abstract readonly hidden: boolean;\n\tpublic abstract readonly excerpt: string;\n\tpublic abstract readonly keywords: string[];\n\n\tpublic toJSON(): Post.PartialJSON {\n\t\treturn {\n\t\t\tname: this.name,\n\t\t\tslug: this.slug,\n\t\t\tdate: this.date.toISOString(),\n\t\t\thidden: this.hidden,\n\t\t\texcerpt: this.excerpt,\n\t\t\tkeywords: this.keywords,\n\t\t};\n\t}\n\n\tpublic toTinyJSON(): Post.TinyJSON {\n\t\treturn {\n\t\t\tname: this.name,\n\t\t\tslug: this.slug,\n\t\t\tdate: this.date.toISOString(),\n\t\t\texcerpt: this.excerpt,\n\t\t};\n\t}\n\n\tpublic abstract render(): ReactNode;\n}\n\nexport namespace Post {\n\texport interface PartialJSON {\n\t\tname: string;\n\t\tslug: string;\n\t\tdate: string;\n\t\thidden: boolean;\n\t\texcerpt: string;\n\t\tkeywords: string[];\n\t}\n\n\texport interface TinyJSON {\n\t\tname: string;\n\t\tslug: string;\n\t\tdate: string;\n\t\texcerpt: string;\n\t}\n}\n"
},
{
"path": "src/blog/posts.ts",
"content": "import {Mochip} from './2022/01/mochip/mochip';\nimport {ServerlessDiscordOAuth} from './2022/01/serverless-discord-oauth/serverless-discord-oauth';\nimport {ZeroKbBlog} from './2022/01/zero-kb-blog/zero-kb-blog';\nimport {OpenSource} from './2022/03/open-source/open-source';\nimport {StrictTSConfig} from './2022/08/strict-tsconfig/strict-tsconfig';\nimport {WTFESM} from './2023/wtf-esm/wtf-esm';\nimport {AmbientDeclarations} from './2025/ambient-declarations/ambient-declarations';\n\nexport const posts = [\n\tnew AmbientDeclarations(),\n\tnew WTFESM(),\n\tnew OpenSource(),\n\tnew Mochip(),\n\tnew ZeroKbBlog(),\n\tnew ServerlessDiscordOAuth(),\n\tnew StrictTSConfig(),\n] as const;\n\nexport function sortPosts(p: typeof posts) {\n\treturn [...p].sort((a, b) => {\n\t\tif (a.date > b.date) {\n\t\t\treturn -1;\n\t\t}\n\n\t\tif (a.date < b.date) {\n\t\t\treturn 1;\n\t\t}\n\n\t\treturn 0;\n\t});\n}\n"
},
{
"path": "src/components/blog-footer.tsx",
"content": "import {CiGlobe, CiTwitter} from 'react-icons/ci';\nimport {VscGithubAlt} from 'react-icons/vsc';\nimport {ExternalLink} from '../components/external-link';\n\nexport const BlogFooter = (\n\t\n);\n\nfunction FooterLink({href, children}: {href: string; children: React.ReactNode}) {\n\treturn (\n\t\t\n\t\t\t\t\t\tSpecial thanks to the following people for reading revisions and helping with this post:\n\t\t\t\t\t
\n\t\t\t\t\tConrad Crawford,{' '}\n\t\t\t\t\tCody Miller\n\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\n\t\t\t\t\t {\n\t\t\t\t\t\t\tflushSync(() => {\n\t\t\t\t\t\t\t\tsetIsLockedOpen(x => !x);\n\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\tbutton.current?.blur();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitial={didHoverOrFocusOnce ? 'hidden' : 'shown'}\n\t\t\t\t\t\tanimate={didHoverOrFocusOnce ? 'hidden' : 'shown'}\n\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\tshown: {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\thidden: {\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tToggle blog post list\n\n\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\tI write every now and then, often about stuff I've recently worked on.\n\t\t\t\t\t\tHover your mouse here to see the list.\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{isLockedOpen && didHoverOrFocusOnce ? (\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{allPosts.map(post => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{post.name}\n\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t{post.excerpt}
\n\t\t\t\t\t\t\t\t{children}
\n\t\t\n\t);\n}\n\nexport function MessageGroup({messages}: MessageGroupProps) {\n\treturn (\n\t\t\n\t\t\t
\n\t);\n}\n"
},
{
"path": "src/components/stats.tsx",
"content": "import {useMemo} from 'react';\nimport {useFirstEverLoad, useVisitCounts} from '../hooks/use-first-ever-load';\n\nexport function Stats() {\n\tconst [stats] = useFirstEverLoad();\n\tconst [visits] = useVisitCounts();\n\n\tconst firstEverLoadTime = useMemo(() => new Date(stats.time), [stats.time]);\n\n\treturn (\n\t\t\n\t\t\t\t{icons[props.variant]}\n\t\t\t\t{props.title &&
\n\n\t\t\t{props.title}
}\n\t\t\t{props.children}
\n\t\t\n\t\t\t
\n\t);\n}\n"
},
{
"path": "src/components/syntax-highligher.tsx",
"content": "import type {PropsWithChildren} from 'react';\nimport SyntaxHighlighter from 'react-syntax-highlighter';\n\nimport light from 'react-syntax-highlighter/dist/cjs/styles/hljs/lightfair';\nimport dark from 'react-syntax-highlighter/dist/cjs/styles/hljs/vs2015';\n\nimport clsx from 'clsx';\nimport {TbBrandCss3, TbBrandHtml5, TbBrandJavascript, TbBrandTypescript} from 'react-icons/tb';\n\nconst Pre = ({children}: PropsWithChildren) => \n\t\t\t\tYou first visited my website on {firstEverLoadTime.toLocaleDateString()} at{' '}\n\t\t\t\t{firstEverLoadTime.toLocaleTimeString()} and on this first visit, you were on the{' '}\n\t\t\t\t{stats.path} page. Since then, you have visited {visits - 1} more times.{' '}\n\t\t\t\t{visits > 1 && 'Thanks for coming back!'}\n\t\t\t
\n\t\t{children};\n\nexport function Shell({\n\tchildren,\n\thasDollarOnFirstLineOnly,\n}: {\n\treadonly children: string;\n\treadonly hasDollarOnFirstLineOnly?: boolean;\n}) {\n\tconst lines = children.split('\\n');\n\n\treturn (\n\t\t\n\t\t\t{lines.map((line, index) => {\n\t\t\t\tconst isFirst = index === 0;\n\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t{line === '' ?
: line}\n\t\t\t\t\t\n\t\t\t\t);\n\t\t\t})}\n\t\t \n\t);\n}\n\nfunction Filename({filename}: {readonly filename: string}) {\n\tconst icon = (() => {\n\t\tswitch (true) {\n\t\t\tcase filename.endsWith('.ts'):\n\t\t\t\treturn \n\t\t\t{icon}\n\t\t\t{filename}\n\t\t
\n\t);\n}\n\nexport function Highlighter({\n\tchildren,\n\tlanguage = 'typescript',\n\tfilename,\n}: {\n\treadonly children: string;\n\treadonly language?: 'typescript' | 'javascript' | 'bash' | 'json' | 'css' | 'html' | 'markdown';\n\treadonly filename?: string;\n}) {\n\treturn (\n\t\t\n\t\t\t
\n\t);\n}\n"
},
{
"path": "src/global.d.ts",
"content": "declare module '*.css';\n"
},
{
"path": "src/globals.css",
"content": "@import 'tailwindcss';\n\n@plugin \"@tailwindcss/typography\";\n\n@theme {\n\t--font-serif: var(--next-font-serif), --default-serif-font-family;\n\t--font-sans: var(--next-font-sans), --default-sans-font-family;\n\t--font-mono: var(--next-font-mono), --default-mono-font-family;\n}\n\nbody {\n\t@apply overscroll-none bg-[#fefefe] font-sans text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-100;\n}\n\n#__next {\n\t@apply absolute inset-0;\n}\n\na[href] {\n\t@apply ring-sky-500 focus-visible:ring-[2.5px] focus-visible:outline-none;\n}\n"
},
{
"path": "src/hooks/layout.ts",
"content": "import {useLayoutEffect} from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : () => {};\n"
},
{
"path": "src/hooks/use-did-initial-page-animations.ts",
"content": "import {useEffect} from 'react';\n\nconst store = {did: false};\n\n// This is basically a \"did already mount some pages\" flag\n// which means that if a user is going back and forth between\n// pages, we don't want to do the initial page animations\n// because it makes them wait unnecessarily\nexport function useShouldDoInitialPageAnimations() {\n\tuseEffect(() => {\n\t\tstore.did = true;\n\t}, []);\n\n\treturn !store.did;\n}\n"
},
{
"path": "src/hooks/use-first-ever-load.ts",
"content": "import {useLocalStorage} from 'alistair/hooks';\nimport {useRouter} from 'next/router';\n\nexport function useFirstEverLoad() {\n\tconst router = useRouter();\n\n\treturn useLocalStorage('user:first-ever-load', () => ({\n\t\tpath: router.pathname,\n\t\ttime: Date.now(),\n\t\tquery: router.query,\n\t}));\n}\n\nexport function useVisitCounts() {\n\treturn useLocalStorage('user:visit-counts', () => 1);\n}\n"
},
{
"path": "src/hooks/use-isomorphic-value.ts",
"content": "import {useSyncExternalStore} from 'react';\n\nconst noopsub = () => () => {};\nexport function useIsomorphicValue\n\t\t\t\t{filename && \n\t\t\t\t\t{children}\n\t\t\t\t \n\t\t\t
\n\n\t\t\t\n\t\t\t\t{filename && \n\t\t\t\t\t{children}\n\t\t\t\t \n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\nexport const getStaticProps: GetStaticProps\n\t\t\t\t\n\t\t\t\t\t{post.name} \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t)}\n\n\t\t\t\t\n\t\t\t\t\t{post.render()}\n\t\t\t\t\n\n\t\t\t\t{BlogFooter}\n\t\t\t
\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tcd ../\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t{post.hidden && (\n\t\t\t\t\tThis post is not listed on the homepage. Please don't share the link
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\tUh oh...
\n\t\t\tApologies, something went wrong there...
\n\t\t\n\t\t\t\t\n\t\t\t\t\t
alistair.sh/blog
\n\n\t\t\t\n\t\t\t\t
\n\t\t);\n\t}\n\n\tconst avatar_url = user.avatar\n\t\t? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}`\n\t\t: user.discriminator === '0'\n\t\t\t? `https://cdn.discordapp.com/embed/avatars/${(BigInt(user.id) >> BigInt(22)) % BigInt(6)}.png`\n\t\t\t: `https://cdn.discordapp.com/embed/avatars/${Number(user.discriminator) % 5}.png`;\n\n\treturn (\n\t\tyou are not signed in!
\n\n\t\t\t\t\n\t\t\t\t\tLog in with Discord ā\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t);\n}\n\nexport const getServerSideProps: GetServerSidePropshello, {user.username}!
\n\n\t\t\tclear your cookies to logout!
\n\t\t\n\t\t\t
\n\t);\n}\n"
},
{
"path": "src/pages/experiments/morphing-shapes.tsx",
"content": "import {useSearchParams} from 'next/navigation';\nimport {useEffect, useMemo, useState} from 'react';\nimport {v4 as uuid} from 'uuid';\n\nconst THEME_COLORS = ['#fc9494', '#94e4fc', '#bffc94', '#ffffff'];\nconst randomColor = () => THEME_COLORS[Math.floor(Math.random() * THEME_COLORS.length)]!;\n\nconst IS_BROWSER = typeof window !== 'undefined';\n\nconst LIMITS = {\n\tTOP: IS_BROWSER ? window.innerHeight - 50 : 750,\n\tLEFT: IS_BROWSER ? window.innerWidth - 50 : 550,\n\tSCALE: 2,\n};\n\nconst randomNumber = (scale: number) => Math.ceil(Math.random() * scale);\n\ninterface BoxState {\n\ttop: number;\n\tleft: number;\n\tscale: number;\n\trotation: number;\n\tborderRadius: string;\n\tbackground: string;\n\tclipped: boolean;\n}\n\nfunction generateNewState(oldState: Partial\n\t\t\t\tThis is a list of random experiments I've built on this website. There's not a lot here and\n\t\t\t\tthis is all quite old.\n\t\t\t
\n\n\t\t\t- \n\t\t\t\t
- \n\t\t\t\t\tMorphing Shapes\n\t\t\t\t\t
\n\t\t\t\t\t\tAnimating and shifting divs using just css transitions and JS to initiate them\n\t\t\t\t\t
\n\t\t\t\t \n\n\t\t\t\t - \n\t\t\t\t\tMonzo Dashboard\n\t\t\t\t\t
\n\t\t\t\t\t\tUsing the Monzo API to display personal account details. Unfortunately, the Monzo API\n\t\t\t\t\t\trequires me to manually add users, so if you want access, contact me.\n\t\t\t\t\t
\n\t\t\t\t \n\n\t\t\t\t - \n\t\t\t\t\tRekordbox History Parser\n\t\t\t\t\t
\n\t\t\t\t\t\tRekordbox exports history in a format not so useful for copy pasting. This is a tiny\n\t\t\t\t\t\ttool to fix that\n\t\t\t\t\t
\n\t\t\t\t \n\t\t\t
\n\t\t\t