Giantpaper.org

Tag: webdev

  • GPORG Reloaded – 2023

    GPORG Reloaded – 2023

    Having worked at a web agency for 5 years (3 as a web dev, and 2.5 as client support as of today), I encountered a bunch of a really cool looking websites. Approximately 0 of them were personal blogs like GPORG, but a lot of them had some cool design features on their sites I really liked (ex. carousels, masonry galleries, etc).

    GPORG Gets a Facelift

    So far, none of that made it into the new GPORG (because technicalities). I did get some of the aesthetics from a few sites though (rounded corners, the handwritten H1 titles). Uhhh…I just found a bunch of stuff on a ton of sites I liked and managed to stuff them all onto one site. In case you’re wondering why the “vibe” is all over the place.

    GPORG the Tumblelog

    I always knew I wanted to GPORG to be a blog. And as time went on, I didn’t want just a normal blogblog (from way back when in the early 2000s). I wanted to be a text blog + photoblog + linklog + microblog. Wikipedia has a list of different blog types and my first thought ‘how many of these can I stuff into GPORG? 🤔’ It was a challenge I was willing to accept!

    And then I realized (just recently), that this is basically a tumblelog—what Tumblr is basically.

    Instead of adding a bazillion cool features like related posts to each post and an embedded map to the photo posts, I decided to just keep it simple, after knowing that simple, minimalist blogs on the rise. (No, I don’t have a source for this. Just my general observation.)

    Reworking the Guts

    GPORG in its previous iteration was also a tumblelog, but the different blog types were mostly segregated into their own separate miniblogs, using custom post types. I switched from custom post types to using just WP’s default post type (the one literally just called post). And define the post types by top level category.

    (See, WP’s post formats would’ve worked wonders for this, but they’re no longer including post formats in current versions anymore.)

    I still kept the hashtag format of the post tags, just because I like them. It’s like combining today’s social media with the blogs of old!

    GPORG: Dullahan Edition?

    I learned about headless sites at my job. Not many people know how to build a headless site! I learned using Vue + Storyblok. You can view the fruits of my labor at Guinea Glorious Art. The problem I found with normal WP themes is, depending on how complicated it is, the user could be staring at a blank screen for a second or two (which is a lot with webpage speed), while waiting for server-related stuff to load.

    Only problem with this is externally loaded content takes about a second to load, whereas the local components (header, footer, styles) load instantly. In the GGA site, the carousel and images (both relying on the Storyblok API) take longer to load, while everything else is just there when you first open the page. I can handle that on GGA, but not on GPORG. Maybe one day, I’ll learn how to make lightning fast headless sites, but for now, we’re back to using PHP with WordPress’s theme code.

    New Subscribe Page!

    The subscribe page is now simpler and easier to understand. Instead of opening the page, and being presented with 10 options that are just variations of the same thing, plus 2 other versions of the same 10 versions if you have different tech, you get 6 options max. I figured people who’ve never heard of RSS or Atom (which is almost everyone these days) might prefer Atom over RSS, but the RSS link is there for people who still prefer it. And I think if you’re savvy enough to know you like RSS better, you’re probably savvy enough to know how to plug the URL into your feed reader.

    No Comments

    Yeah, I disabled comments and completely removed the ability for people to add them (which was also done in the previous version). Not only would comments mean something extra to style, I would have to be responsible for more shit, like storing people’s email addresses (which would need to be addressed in a privacy policy), combating spam, and dealing with trolls who want to dunk on my opinionated posts. I’m fine with people disagreeing with me, but just as long as it’s done respectfully. And this is the Internet. No one knows how to respect people.

    And yes, when I disable comments, I’m almost practically blocking the ability for me to see level of engagement on my blog. But that’s ok! Probably almost no one reads this regularly except for bots maybe, but I like to pretend I’m a much bigger deal than I think. 🙌

    Under the Hood

    For those peeking at the console, yes there are errors. There are a LOT of errors in fact. I fixed whatever I could. What’s left is coming from 3rd parties (embedded Youtube videos), the browser not supporting some CSS property that Tailwind injected in, or the browser complaining about vendor prefixes that are no longer needed (that whatever node package is responsible for that hasn’t gotten rid of yet). People say “oh yeah, if your site outputs any errors on the console, you’ll be rejected by people looking for devs”. But y’know??? All you need to do is embed something from a 3rd party and BAM, errors on the console. How do you avoid that??? Not embed the video????

  • Is this one reason why people use git?

    Just checked the locally hosted version of GPORG on my computer and found that none of the fonts, etc were loading and the CSS that was supposed to render after the JS finished loading didn’t. 🤔 Checked the console and found that some of the CSS was being blocked by the new(ish) CSP rules I had set up. Wut. I opened my editor, checked the .htaccess file where I keep the rules, and IT WAS GONE. 😱 Not sure what removed it, but I found through my git client that SOMETHING had removed it for some reason. Aaaand all I had to do was discard the changes, and bam 💥, all fixed.

  • Self-Validating Forms Annoyance – Part 2

    "I hate forms that start yelling at me the second I touch the keyboard. / Fucking wait until I finish typing before complaining. Bad UX."

    Remember this? I’m glad other people find this annoying as well! (◕‿◕✿) Don’t validate on the keyup/keydown event–do it on the blur event (if using JS)! Or how to validate forms the correct way with CSS.

    https://www.reddit.com/r/webdev/comments/s26fjy/have_you_tried_combining_tailwindcss_with_other/hsd7h3y/

  • From Mac OS Big Sur to Monterey: The Saga

    From Mac OS Big Sur to Monterey: The Saga

    So my big, super amazing plans for GPORG that I’m been working at furiously behind the scenes (locally) at had to be put on hold.

    Apple decided to release Monterey around Halloween. And I upgraded, after reading that there’s not much of a difference between it and Big Sur (because apparently, Monterey is based of Big Sur, code-wise).

    The biggest difference I noticed is that Apple decided to remove the built-in PHP in Monterey. And to be fair, they did warn about this in Big Sur (labeling it as deprecated), but I completely forgot about this. (And honestly, having a third party PHP install means you could update it whenever you want. If you were using Mac OS’s PHP, you were at the mercy of Apple, whenever they realized PHP needs to be updated. Which was almost never.)

    After doing some searching online, I decided to install PHP from Homebrew. I ran into some 403 (Forbidden) error issues, and one of the suggestions I found online was to upgrade Apache. Except you can’t upgrade the OS’s built-in Apache for some reason. And the solution to that was to install Apache from Homebrew instead.

    I’ve been using Homebrew for about a few years now, so it wasn’t anything new to me. I already had PHP 8 installed through Homebrew. And I already knew what was involved in setting up Apache, because for some reason, whenever people upgraded between Mac OS versions (from Catalina to Big Sur, etc), the OS would completely reset your Apache settings. 🤨 I think in newer Mac OS versions, they’ve been backing up the config files, by changing the old files to something like httpd.conf__BACKUP or something (which was better than completely removing them). But even so, I needed a tutorial to figure out how to set up this install of Apache.

    I don’t remember which tutorial I followed, but I did everything by the letter, and whenever I visited 127.0.0.1, I got a “could not connect to server” error, and after tweaking the config file a little later, it turned into a 403 error. Like, wut.

    Nothing I did fixed it. For a while, I thought it was being literal and there was a problem with folder permissions. And then after reading online, someone on StackOverflow suggested it was a PHP problem. Like maybe there was a problem with the PHP install. I couldn’t tell if that was it. apachectl configtest said “Syntax OK”! And brew doctor kept giving unrelated warnings about other brew packages (and no, fixing them did not fix the problem).

    OpenLitespeed???

    At one point, I tried ditching Apache for OpenLitespeed! Because my host uses the enterprise version, I’m already pretty familiar with Litespeed servers in general, right???

    And installing it on Mac OS only gives you two options: you could either build it from source or install it through Docker. I tried it from source, because I didn’t want to go the Docker route. I barely understand Docker or its purpose, and while Docker!OLS comes with its own MySQL/MariaDB and PHP installs, I wanted to use whatever I already had installed from Homebrew, and not savvy enough to know how to get Docker!OLS to recognize the Homebrew installs, instead of the Docker versions (or if it was even possible).

    Installing from source did not work. I think I got part of it running, but 127.0.0.1 still gave the “could not connect to server” error. And didn’t know how to fix that.

    So I tried that Docker route, and while I got it running successfully, I didn’t know how to get it to recognize the folders I set up for each virtual host. And I looking through the OLS folder, I found a .env file that covered the entire server. One of the settings was for WordPress (URL specifically). So I need to have one WordPress install per server only?? Searching online for “multiple wordpress installs on openlitespeed” only brought up one page on this, and it didn’t talk about setting up multiple WordPresses on one OpenLitespeed server. 😐

    Back to Apache

    After this point, I decided that as a user, I’m pretty familiar with Litespeed. But as a server admin, I’m more familiar with Apache, and while I’m not an expert at debugging either, I’m better at debugging Apache.

    So I was back to trying the usual stuff before I even though about OpenLitespeed. Googling “mac os apache 403 forbidden” (or any combination of) showed me all search results with purple links. 😬 (As in I already visited them before, probably several times).

    I also tried uninstalling and reinstalling Apache, as suggested by someone on StackOverflow. It didn’t fix the problem, but before I uninstalled, I renamed the httpd folder to httpd_old, so I would get the default config files. However it’s set up, I wanted to see if changing as few settings as possible would fix things.

    Eventually I found this article. And it looked like the other 50 articles I read about the topic, and it’s for the built-in Apache rather than the Homebrew version, but Ctrl/Cmd+F for the heading “Losing Localhost”.

    Instructions for fixing the 403 error on Mac OS Apache.
    Screenshotted, because Gutenberg kept messing up the formatting.

    So I have at the top of my httpd-vhosts.conf file:

    Screenshot of a portion of my httpd-vhosts.conf file

    /usr/local/var/www is the default DocumentRoot for Homebrew Apache, BTW. It already has a index.html with “It Works!” text, so 🤷‍♀️.

    Another thing I did that wasn’t done after I reinstalled Apache: uncomment this line in httpd.conf:

    LoadModule userdir_module lib/httpd/modules/mod_userdir.so

    If you’re getting errors when restarting Apache (for me, it was about not finding the public_html folder), in your httpd-userdir.conf, look for this line:

    UserDir public_html

    If you try to access localhost/~username from your browser, Apache will try to look for a public_html folder in your user folder. You can either create a public_html folder in your user folder, or just change it to:

    UserDir Sites

    Since I already had ~/Sites set up from the old Apache install (pre-Monterey), I just changed it to Sites. But it can be wherever you’re keeping your local sites files on your computer.

    sudo apachectl restart

    …and Apache works again. 🥳

    Now gotta fix this huge number of PHP errors on my local sites, after jumping from PHP 7 to 8. 🙈