Website Progress: Avenging Burnout
Been hard at work on the site, and while there's plenty to show for it, the most cathartic part is incredibly small.
Man… Programming’s hard. Web dev’s hard. So many pitfalls and traps, of things you’d think would work one way but work another way entirely, and when you pound your head against the wall for long enough, eventually you burn out entirely.
That’s what happened to me when I first finished the Astro Blog tutorial. I was more-or-less familiar with HTML, but completely inexperienced with JS or CSS. And when I tried to wrap my head around passing Astro’s code-fenced variables into a script tag to use them for client-side stuff (as opposed to Astro’s usual server-side rendering)… I could only pound my head against the roadblocks and complete lack of sense of direction that I had, until I eventually burned out entirely.
And that’s just where the website sat since February. Kinda just collecting dust in the corner, as I switched focus to more offline and less burn-outing pursuits.
The real shame of it, though, is that all that burn-out was for what amounted to polish on the website. I already had the date and time listed for my blog entries, but I was frustrated that they would only find themselves converted to the server’s local time, rather than the client’s. Time zone conversions were impossible with the knowledge and experience that I had, as I was missing several pieces I needed to even start being able to logic out why the solutions I had tried weren’t working. So when I burned out, I instead created fake times on each blog entry, so that the date would remain stable. And that… honestly could have just been where I left it.
And for a while, it was.
Recently, though, I went back to working on the website. I’ve been really silent with everything I’ve been doing lately, and I recently resolved on Bluesky that I was done being silent and humble. And with that new mindset, I needed a place to actually put the stuff that I wanted to show off. With that came a rejuvinated effort to bring this website to life (starting with some polish on the random quotes on the home page, after realizing some of the emoji parings were off thanks to a friend’s acknowledgements).
Since then, having long since healed from the scars of the past, I’ve been once again off to the races on this website. I’ve made so many changes along the way. Honestly, it’s hard to list them all off the top of my head, but, aside from posting new Blog entries, updating the Index and Now pages, and adding a new Portfolio page, I’ve:
- Added meta tags so that other websites can show previews of my website, which have defaults and mostly autofill themselves based on the content of the page.
- Appended the website name at the end of title tabs other than the Home page.
- Added a check to detect which page structure you’re on, and activated my premade simple.css’s Nav bar highlighting to show which tab you’re on.
- Added new custom CSS to simple.css that removes bullets from unordered lists with checkboxes and pushes them back to where they should be without them.
- Restructured Blog posts on the site so that they all generate automatically under /blog rather than under /posts.
- Added and customized a Ko-Fi button.
- Added custom randomly generated text to the button.
- Dove into the Ko-Fi app script’s CSS to forcibly give the button more breathing room when it has longer text, by increasing its iframe’s
width. (Finding a sense of direction on this is the only thing I needed to ask my web dev brother for help with. Digging into the button’s iframe’s CSS through Inspect Element helped me find everything I needed to find!)
- Used what I learned making the random text for the Ko-Fi button to remake the Index page’s random quote generator without using Preact (like the Astro tutorial’s version).
- Setting the random generators up gave me the foundations I needed to cook with client-side scripts, which I had been super hazy on since I failed to grasp the tutorial’s explanations.
These are already some pretty nice steps forward, and I’ve felt really proud of everything I was able to figure out along the way. However… thanks to what I’ve learned throughout all these steps, I realized that the problem that burned me out two months ago, out of nowhere, just suddenly seemed… doable. The knowledge gained through all my progress offered new tools and a refreshed sense of direction towards solving that original problem. And all that then stood in the way of me learning how to do the client-side date conversions… was learning how to access code-fenced variables in hydrated scripts.
After several failed attempts troubleshooting ways to grab the fenced-off variables as I pounded my head against the wall, trying and failing to use dataset as recommended by standards online… The gears started clicking. I found the break points. I found alternatives to the steps that were failing that would reach the same goal…
And I did it. By passing the relevant frontmatter data peacemeal and using getAttribute() instead of dataset… I finally got to access the blog’s frontmatter dates in from Astro’s code-fences. And the rest was a breeze.
To say this feels good is an understatement. Finally overcoming a hurdle that actively burned me out and made me want to quit (or at least put things on extended pause) in the past is cathartic beyond belief for me. Building everything on top of itself while building other stuff live, learning from the other tasks and wrapping around the trouble task until I naturally learned the things I needed to know, by doing it live… Honestly, the only reason I’m not celebrating more and running a mile while continuing to work on this site more today is because I fell very sick last night.
At the end of the day, it’s not really a huge accomplishment. I figured out how to do something myself that countless people have done before much more easily. But to the me two months ago that got burned out by this? I’ve avenged you.
Go forth and make things. Even if you can’t solve a problem the first time around with what little you know right now, if you keep working on other things surrounding the problem, you’ll keep learning more and more along the way. And maybe one day you’ll find your way back, with new tools and perspective, to where you needed to be all along.
Stay tremendo.