React and WordPress: The Aftermath of Five Months in a Coding Bootcamp

September of last year I signed up for a frontend web development bootcamp. My final grade finally came though. I was stressing for a minute, I didn't think that I really covered enough material in my submitted project to get a good grade. Then again, I did that to myself the entire time that I was in the bootcamp, I kept trying to do more than what the assignment was asking because I was in a constant state of Dunning-Kruger. I thought that I understood the material, my confidence was great, but then when I would dig into it, I quickly realized the giant chasm of stuff  between what I had been exposed to and what I hadn't learned yet, everything was always tip-of-the-iceberg. And through no fault of the school I went to either. By their very nature bootcamps are supposed to very quickly distill the pure essence of the thing that you're learning into a massive hit of information and give you the tools you need to survive in the wilderness.

We learned React along with vanilla JS basics, HTML and CSS. They did not teach us WordPress, but I'll get to that later on in this post. Interestingly enough, HTML is actually quite a bit different than I remember it being back in the late 90s. I suppose JavaScript is practically unrecognizable too, though I never did much with JavaScript back in the day. I let DreamWeaver handle that shit for me... Likewise, with CSS, there is quite a bit more that you can do than what you used to be able to do... The only styling I did was what I was required to do. Recently though I helped a friend solve a dilemma that he was having with a design that he did in Photoshop that didn't quite translate to code. I didn't all the way solve the issue for him, but at least allowed him to find a compromise with the developer he was working with. Seriously though, in my everyday life, my greatest skill is being able to manage personalities. I always got "works well with others" marks on my report cards in elementary school, and I took that heart when I was a kid, I thought that would be an important skill to have in life, and I don't think that I was wrong about that.

But now is when the real work begins. Going through the bootcamp was sort of all for naught if I'm not actually utilizing my newfound skills and knowledge, and expanding on what I've learned. So, I'm concentrating on developing a portfolio website.

My goal is to have something working by the end of this week... Doesn't have to look pretty, but it will be functional at least.

These are the elements that I need:

1. An "intro page" (of sorts) that gives a breakdown of me and my skills,  and an "AutoBio," if you will;
2. A project page for listing and showcasing specific projects that are distinct from the rest of my "just fooling around" repositories on GitHub; and
3. A blog.

One thing I notice myself doing more than I used to is opening up the dev tools in Chrome or FireFox and just inspecting stuff, trying to figure out if I can replicate it, and also how the code might look... One of the things that has changed about JavaScript in the last 20 years are compilers, in particular Babel (since that's what React uses), so it's interesting to see the transpiled result rather than actually being able to see what someone wrote. On top of that we're now entering the AI era and a lot of people are copying and pasting what ChatGPT gives them. I can honestly say that I haven't done that. And if anyone is interested, I still have my argument with ChatGPT where it also couldn't solve the issue that I was having. So, if you're afraid, you're currently afraid of an infant without teeth.

    I. 📜 AutoBio

This will be simple enough, but it does have to catch people's attention. I really like the way that Eric Von Holtz and Lauren Waller did their pages. I'm thinking  about something similar, cut the page in half, the left side of the page (or the entire screen if you're on mobile) will be a quick biographical statement and work history/summary, the right side of the page will be giant CSS-animated words that are just links to everything else.

    II. 🧰 Projects

I'm going to focus on two major projects that I did during the bootcamp; my "tarotjs" implementation and the CornerComics comicbook collection tracker. 

Tarotjs is broken up into two separate repositories right now, and I need to take the time to combine them. One option I have is to translate the project into React, but I'm not sure if I want to tackle Electron or React Native first. The intention is to have it be a mobile app eventually, but I'm going to be spending a lot of time with it on the desktop. React Native definitely seems like the way to go, write once and deploy everywhere. I actually really enjoyed just writing it in vanilla JS, and I'm kind of happy with how simple it actually is. I'm also debating if I should have it exist as it's own stand-alone website.

CornerComics will live on it's own, but I hope that eventually it might get rolled into the Metron comicbook database project. I'm just going to re-purpose "CornerComics.net" but I also might try doing what I did with VideoGameGossip, and having CornerComics be split between the comic collection tracker and an RSS feed aggregator for comicbook news.

    III. 📖 Blog

Having a development blog to share the things I've learned and to keep a journal of the stuff that I'm working on and trying out will help me to process learning new concepts and maybe getting some useful feedback from other people in the industry on ways I can improve me code or different ways to think through problems. Also, hopefully something that I've done or worked on can help someone else.

I do want to do a redesign of this blog, but I think I'll keep it as is for right now. For whatever reason Blogger is one project that Google hasn't shuttered. It still works remarkably. There are no ads or anything of that nature, and it links to an actual URL, I don't have to be hidden behind another brand or a slash.

⚙The Process

Everything will be hosted under, or in conjunction with, mtkultra.com. I'm going to build a React frontend for a WordPress backend. I know this seems crazy, but I think there are a lot of businesses and companies out there who would love to refurbish their old Wordpress site with a flashy React PWA ("Progressive Web App"), but they might be locked into a traditional LAMP hosting plan, or they don't want to recreate or convert all of their content to a new format and move that from a SQL database to something like Mongo. Admittedly, I have not been in the tech industry in many years now, but I have gone through software conversions at my current position, and I know what it's like to have all that proprietary data move from one closed system to another. Everything is still all web-based. React seems to be the perfect way to preserve an old WordPress instance and still offer a fresh experience, especially for companies that have built up their e-commerce niches and they don't want to have to worry about their payment infrastructure. 

An estimated 43% of all websites are powered by WordPress. I don't think that software is going anywhere, and this approach also keeps JavaScript where it belongs--in the front end... Not saying that I won't eventually delve into full Node.js sites or use stuff like Express. But, for right now, that type of hosting is comparatively expensive, and unless you're using something like Ghost, deploying a full blog written in pure/vanilla JS is not a fun process. Also, it requires an entirely different skill set. While I've played around with AWS and DigitalOcean (which I prefer 100X more than AWS for a number of technical reasons) and I know how to deploy things to the cloud--I've set up virtual Linux servers before--that's not something I really want to do for clients or companies that hire me. Maintaining the infrastructure is another job entirely, but it's a dangerous and slippery slope when you start offering services to clients who don't fully understand what all is involved in maintaining infrastructure. I would rather just focus on coding frontends and not having people rely on me to maintain their VPSes too. This approach allows me to develop a process that is potentially beneficial to a wider array of people as well.

Part of the reason I am cautious of delving into the entire lifecyle of a React-WordPress baby is because I know all too well the cottage industry that WordPress fostered (and to some degree still fuels). When WordPress took off, that's about the time I stopped caring about learning any of the code behind something. Even with Drupal to a certain extent (Drupal with a React frontend would be pretty bad ass though). There are a lot of people out there who use WordPress and can do some complicated things with their website, but the people utilizing these sites didn't necessarily build them. Instead they paid someone a lot of money who did a really good job and now that website is on autopilot and probably has been for the last five years. It doesn't mean that it isn't showing it's age.

I'm thinking that I'll document the process here and then maybe copy those posts over to mtkultra's blog once that is deployed.

So far I've only run across instructional articles that discuss implementing React to use the WordPress REST API, and I haven't actually seen anyone do it, that's where mtkultra comes in.

⎆ The Execution

Starting from scratch. On Monday I set up Apache2, MySQL and PHP on my desktop (which, predictably runs Linux, and not just any Linux, but Debian, one of the most server-friendly distros), and I also set up a WordPress instance. All of this I can access from my 2011 Macbook Pro. I may or may not do most of the React coding from that and just have it call WordPress off my desktop. I do still need to tear it apart, re-do the thermal paste, install the Kingston SSD I bought for it, and upgrade to Ventura, but that's a post for another time I suppose. Yesterday I went through the process of building a React code directory/setup without utilizing "create-react-app." Tonight I'm musing my thoughts and focusing on what it is that I need to do going forward. 

I'm less effective at outlining in code than I am just writing my thoughts out. I imagine myself speaking to someone face-to-face when I write, I'm talking to YOU, dear Reader. 

I failed Oral Com twice in college, I'm not the best verbal communicator. I suppose it's for the same reasons I liked to draw while listening to lectures in class. Flipping through my notebooks from high school and college, looking at doodles that I did, immediately those take me back to the class I was in and the doodles also remind me of what we studied. I'm able to recall that information the same as someone who reads through their own shorthand. Having concrete notes about something never really worked for me, it had to be extremely brief bullet points and a bunch of drawings. Looking through my notes you would have guessed that I wasn't paying attention, when in reality I was just processing the information.

So what is the goal for tomorrow? Write the components and pages necessary to display a list of blog posts from WordPress inside of React... That might actually take me more than a couple hours. We'll see.

Wish me luck! 🍀