outputs of gingervitis

I suck at frontend dev

This was a day of web dev fails on this NextJS blog.
I have a lot of things on my todo list to enhance for this blog. I've finally been more active and learning to use GitHub, and have created some GitHub Issues of my tasks so I can track them like a real engineer!

Ok wait, wait, positive comments first!

I checked off my first Issue #1 and moved my domain over to this blog! Be sure to bookmark gingervitis.net!
I've had that domain for over 15 years; it'd been pointing to my outdated portfolio for the last several years. It's time for some fresh content!
Now for the negative stuff.

I decided to try and convert this blog to Typescript

Typescript sounds like it's also becoming the hot new way to code these days, plus at work we've been talking about converting our product's code base to TS as well.
For years I've been hearing engineer peers hate on Javscript because lack of its lack type and how it feels loose and sloppy. But it's hard to avoid that the internet now runs JS almost everywhere. So I feel like Typescript came around to make these engineers happier about using this JS-looking hybrid. (I don't know what i'm talking about).
I'm not very opinionated about these things, even though I probably should be? Honestly, just give me something that works and I'll figure it out and try and use it to its max potential to produce great things.
Anyway I figured I should learn some of the workings of TS before we get around to it at work. NextJS's tutorial looked pretty quick and easy. So I should get to this before my code base here gets too big!
Total fail.
This is likely because I tried to do too much.
I converted all the files that the tutorial suggested, but of course I got a bunch of type and formatting errors, which the tutorial did not cover how to fix.
I also figured while I'm at it, let's do this right and add a ESLint and Prettier. BAD IDEA.
After cleaning up a bunch of code from lint results, I ended up spending all afternoon troubleshooting all the config fiiles, and all the other mysteroius errors that wouldn't go away and I didn't know how to fix. (Such as a explicit-module-boundary-types warning on files that exported JSX).
I can't quite tell if it's because my VSCode takes a while to register all the new config settings and doesn't relfect the changes on the files? Or do I still have this damn error/warning?? Or was it because I didn't config something properly? Or was a missing another dependency?
Because I'm not familiar with what all the libraries do, I was hesitant with blindly copy/pasting all the dependencies I find from various search results. So maybe I did a half ass job there too? Doesn't entirely make sense though.
Alas, my timebox had been reached. Time to git reset --hard and GTFO. I'll table this Typescript effort and do it more piecemeal next time.

I found this promising Image optimization library!

Since I tend to be more visually-inclined, I thought it'd be important for me to optimize my post images somehow. I like pictures, and will likely be posting a lot of them!
So I came across this next-optimized-images library. It looks amazing and well documented. It does everything I think I should have! Optimize PNGs? Yes please! Resize images? Sweet, I'll make thumbnails on the fly! Placeholder colors while your image loads? Cool!
Plus it has great docs; looks real easy to implement!
I updated a bunch of files to set them up to display images and thumbs; this is the fun stuff to me! Re-organize components, make some styles, restructure some code away from the initial set up so they're easier to read. yay!
Then it came time to actually implement the functionality.
I kept getting this error:
error

error

Ugh
Process:
  • Uhhh, ok maybe my path is wrong. I'm not sure how the system is reading in files, path-wise, so let me try different paths.. ../images/posts/..? /images/posts/..? posts/..? NOPE
  • Ok let me consult the Vercel docs on static file serving.. Ok yup my file does live in public/images.
  • Ok let me consult the libarary docs on paths.. Looks like I can do custom paths. I edit a bunch of them, trial and erro. Do my changes even do anything at all??! Still can't find the module! WTF
  • Oh wait, looks like I should just do <img src={imgUrl}> without the require(). Oh great! The image loads. But the optimizer doesn't do anything at all. This ain't right. I still need the require.
  • Scour the end of the internet for "NextJS Cannot find module" and related searches. No luck.
Hours go by. Dinner is forgotten.
Ughhhh, wtf am i missing?! What did I do wrong????
It's 12am already. Dammit, what a fail.

This part of the job sucks.

This is the part of my job as a "Frontend developer" that I'm just not good at. I had never really been involved with this part, and haven't had training on it. I really just wanted to code things all pretty and make them usable!
I was hoping that this blog project would be a chance for me finally learn this stuff on my own, but these fails are really discouraging.
I couldn't seem to google any useful answers to either my fails today. It makes me wonder how come no one else has my problems, and that it must because I'm doing this dev thing all wrong.
It makes me question my job, my capabilities in this role. It confirms that I'm an impostor. I've just been lucky so far, or maybe I've just beeing helping the company fulfill some gender imbalance (not true, but that has crossed my mind in the past).
It makes me not interested in getting all this code infrastructure set up. All this muysterious "webpack 'n stuff" as I call it; this stuff I can't visually see working. I was initially excited at how easy it was to get this inital NextJS blog setup, hoping most things would just work.
But I should know better.
I just wish I had someone to dumb this stuff down for me. I wish I had someone to ask stupid quesitons at, without being afraid of them thinking I'm dumb. I wish the documentation for this stuff was written for idiots like me.

Next steps?

Sign up for my own CDN account somewhere?

I don't even know where start with this. Signing up for AWS sounds scary and maybe even overkill?
And then I'll have to figure out how to push images up to it during build time.
Or end up manually running commands myself separately from the build process. sounds silly.

Look into one of these CMS apps that NextJS is boasting?

Hmm most require you to create an account somewhere. Oh but they have free plans. And then install a bunch of packages and environment vars locally.
The docs make it sound easy, but I don't trust them anymore. 😩
I'm also afraid they'll end up being too heavy and turn into a WordPress of sorts.
#nextjs#web development#fail