This is a common question that I feel a lot of people face every day, from season vets to newbies looking to learn something that might be useful elsewhere.

One thing I can say, from what I've learned, is that the framework isn't really all that important, it's the fundamentals that matter. When I was younger and and the commercial internet was still in its infancy, the big saying was “RTFM,” read the fucking manual. Which is still true to this day. If it doesn't have good documentation, move on.

As far as a language, I'm sticking to JavaScript. I like it. I was never hardcore into programming like all of the Rust and Go people out there. I just want to be able to do stuff. If I ever hit a point where JavaScript isn't doing what I need it to do, then I'll move on.

OKAY, I get it, I know some people are annoyed by the term fullstack... Some people don't agree that you can do everything in JavaScript... I'm not convinced that you can't. I'm really impressed with projects like enimga ½ bbs... Curious what The Primeagen would have to say about that one in particular. He's around my age, he must have some BBS experience. But in any case, I want to write a PWA. I want to turn my idea into a usable application experience across a multitude of platforms with as little resistance to using it as possible; desktops, laptops, tablets, and mobile. The last thing that I want to do is learn Rust or Go just to have a solid backend. This project isn't going to support a bunch of users, it's just going to be a local experience (for now).

In terms of hosting, it'll either be a standard VPS with someone like GoDaddy, or I might use DigitalOcean for their App Platform. I think I'm pretty much set on DigitalOcean though. I could go the AWS route just for the hell of it because that's what a lot of people use (we use it at work), but this is my own personal project. Whether or not it makes any money is also going to be dependent on how easily I can use my toolchain to deploy fixes and patches and everything else, as well as how much I enjoy working on the project. AWS is not fun... Stop it.

Project requirements

• Progressive Web App (Priority) I personally think this is going to be the way things progress in the future. giving up 30% of gross revenue to Apple or Google is just kind of depressing. Also, it's interesting to me that even Microsoft is pushing to replace the Office Suite with PWAs. I've been using the new Outlook at work and I really like it.

• Backend API functionality The application will make calls to ChatGPT or another AI to return spread interpretations.

• Simple file structure Next.js makes my head hurt when I create a new project directory. Vue can be complicated as well, but there are very easy ways to get started without the boilerplate.

• Lightweight and simple UI library This one isn't as easy as it seems... I'm using Bootstrap right now, but as I move to a more touch-focused interface, I'm going to need to replace it. Also, I'm not really doing a whole lot with Bootstrap right now anyway.

Frameworks

Here are the frameworks I'm looking at and my thought process behind the pros and cons. I may very well be wrong, or my opinions could be based on misinterpretations, or not knowing different ways to approach certain obstacles. So, if there is something that I'm missing or something that is misstated because I don't fully understand how something works, please reach out to me. Let me try and learn from your experiences.

1. ExpressJS

Express is appealing because I can do everything in vanilla JS if I want, and just keep building on the project as-is. OR, I can do all the Express-specific stuff and combine it with pretty much any other framework, and I only have to write the AI API calls once—at least that's my theory.

2. Preact

Incredibly lightweight, and I did learn React, and this is similar enough to it... Do I really remember React? No, I'm not a big fan of React.

3. Vue.js

I really like the philosophy behind Vue. As well as the idea that you can just use it through a CDN is incredibly appealing, but we're shooting for a local experience, which means installing it as a dependency. The biggest pain with Vue will be re-writing a bunch of stuff.

4. Svelte

Other than watching Primeagen interview Rich Harris, I know nothing about how Svelte works or any of its design philosophies.

5. Angular

Again, I don't know much about this, I've never played around with this dialect. I know it's essentially Google's answer to React, but Google also has Polymer. [^1]

6. Polymer

Last I checked this was a UI toolkit for Dart or some shit like that... This was many years ago though. At that time it wasn't exactly its own framework in the same way that we understand modern JavaScript frameworks. [^2]

7. PWABuilder

Fucking Microsoft... They really are a different company these days. I recently watched a Primeagean video where he read through a Medium article called “From VSCode to VIM” and the point was brought up: The mindset of VSCode is to use it, not learn it. The mindset of VIM is to learn it then use it. PWAs really aren't all that complicated; it's a manifest and a service worker (essentially), but PWABuilder just does it all for you! Use it, don't learn it. Honestly though, I will take the time to learn it, but I played around with the VSCode PWABuilder Studio today, and I might be sold on the idea!

Yeah...

I think ExpressJS with vanilla JS and PWABuilder Studio might be the way that I go... Just have to decide on a lightweight UI library. Maybe I stick with Bootstrap??

[^1] : It was pointed out to me that Angular was first, and React was Facebook's answer to Google.

[^2] : Apparently Polymer is being replaced by Lit.

Not too long ago, one of the members of the Pixel Pints shared with us a simple webapp that he found for building top-whatever lists, called Topsters.

I decided to play around with it a bit, and, as I mentioned in the last post—which was itself a top 20 list—I wanted to have an overlay for links on top of the image, so it was more like a widget instead of just an image. The power of Topsters is not the image that it generates necessarily, but how easily you can generate the image by querying a bunch of APIs based on your media selection (books, albums, movies, or games). So, in that regard adding a little flare to the image seemed appropriate, and why not give it some interactivity? Topsters itself utilizes a canvas element to arrange the pictures of the book, album, movie, or game covers. I could always consider maybe doing that myself, or

As I've mentioned, Write.as does give you a script area that you can use, and I don't think you can just inject JavaScript anywhere... I did try simply putting script tags in the markdown of a singular post, but it wasn't passing through when I inspected the live version of the site.

The next best option was to write an if statement which launches a specific function to act on a specific div when certain conditions are met.

You can clone from here, or simply take a look at the code:

//Global Variables to use:
const path = document.location.pathname;
/*--------------------------------------*/
function albumNum() {
  let covers = document.getElementById("covers");
  covers.style = "position: relative;";

  for (let i = 1; i <= 20; i++) {
    let numbers = `<a href="#item${i}"><p class="albNumber" id="cover-${i}">#${i}.</p></a>`;
    covers.innerHTML += numbers;

    setNumPos(i);
  }
}

function setNumPos(num) {
  let displayedNumber = document.getElementById(`cover-${num}`);

  let imgHeight = covers.getElementsByTagName("img")[0].height;
  console.log(imgHeight);
  let imgWidth = covers.getElementsByTagName("img")[0].width;
  console.log(imgWidth);

  let row = [
    imgWidth * 0.25, 
    imgWidth * 0.5, 
    imgWidth - imgWidth * 0.25
  ];
  let col = [
    imgHeight * 0.02,
    imgHeight * 0.23,
    imgHeight * 0.43,
    imgHeight * 0.63,
    imgHeight * 0.83
  ];

  console.log("Widths " + row);
  console.log("Heights " + col);

  switch (num) {
    case 1:
      displayedNumber.style = `position: absolute; top: ${col[0]}px; left: 0px;`;
      break;
    case 2:
      displayedNumber.style = `position: absolute; top: ${col[0]}px; left: ${row[0]}px;`;
      break;
    case 3:
      displayedNumber.style = `position: absolute; top: ${col[0]}px; left: ${row[1]}px;`;
      break;
    case 4:
      displayedNumber.style = `position: absolute; top: ${col[0]}px; left: ${row[2]}px;`;
      break;
    case 5:
      displayedNumber.style = `position: absolute; top: ${col[1]}px; left: 0px;`;
      break;
    case 6:
      displayedNumber.style = `position: absolute; top: ${col[1]}px; left: ${row[0]}px;`;
      break;
    case 7:
      displayedNumber.style = `position: absolute; top: ${col[1]}px; left: ${row[1]}px;`;
      break;
    case 8:
      displayedNumber.style = `position: absolute; top: ${col[1]}px; left: ${row[2]}px;`;
      break;
    case 9:
      displayedNumber.style = `position: absolute; top: ${col[2]}px; left: 0px;`;
      break;
    case 10:
      displayedNumber.style = `position: absolute; top: ${col[2]}px; left: ${row[0]}px;`;
      break;
    case 11:
      displayedNumber.style = `position: absolute; top: ${col[2]}px; left: ${row[1]}px;`;
      break;
    case 12:
      displayedNumber.style = `position: absolute; top: ${col[2]}px; left: ${row[2]}px;`;
      break;
    case 13:
      displayedNumber.style = `position: absolute; top: ${col[3]}px; left: 0px;`;
      break;
    case 14:
      displayedNumber.style = `position: absolute; top: ${col[3]}px; left: ${row[0]}px;`;
      break;
    case 15:
      displayedNumber.style = `position: absolute; top: ${col[3]}px; left: ${row[1]}px;`;
      break;
    case 16:
      displayedNumber.style = `position: absolute; top: ${col[3]}px; left: ${row[2]}px;`;
      break;
    case 17:
      displayedNumber.style = `position: absolute; top: ${col[4]}px; left: 0px;`;
      break;
    case 18:
      displayedNumber.style = `position: absolute; top: ${col[4]}px; left: ${row[0]}px;`;
      break;
    case 19:
      displayedNumber.style = `position: absolute; top: ${col[4]}px; left: ${row[1]}px;`;
      break;
    case 20:
      displayedNumber.style = `position: absolute; top: ${col[4]}px; left: ${row[2]}px;`;
  }
}

if (path !=='/' && document.querySelector("#covers")) {
  setTimeout(() => {
    albumNum();
  }, 500);
}

I need to do a bunch of stuff to this code; – re-write the switch statement as a function that checks for the number of rows and columns; and – re-write the for loop's iteration condition to be the rows multiplied by the columns.

I'm thinking I can signify by either reading the image file name, or using the id or class attributes.

The cool thing is that I can put it anywhere and the image will render.

As the quality of televised and digital entertainment has degraded over the years, and not wanting to be bombarded by the sheer negativity of it all, I've found myself spending more time listening to music and reading comics. It's been a gradual transition for me... That isn't to say that I don't spend entirely way too much time watching garbage on YouTube or mindlessly surfing, looking at things I'll never buy, or researching video games, or learning things that have no real practical purpose in my life other than to be interesting topics for cocktail parties that I'll never attend, etc.

Something happened though... A tipping point? I did attempt doing a web comic maybe a year or so ago, but I never stuck with it. I have revisited the idea though, and this time I sat and thought about the story ahead of putting pencil to paper, I drew a few outlines and sketches first.

Just from my 9-to-5 and thinking about the type of comic that I wanted to read, I came upon the idea of an insurance company in the relatively near future. But it's going to evolve beyond that, because, fuck it, I have a story universe where people live on Europa and Titan, and giant monsters are a real thing. So I'm going to play with the surreal and the supernatural, the pragmatic and the practical, and I want to put it together to highlight the absurdity of life and the human condition.

We're really in a timeline where aliens are real and just a few years ago we globally went into lock down for a novel communicable virus which may or may not have been created in a laboratory. That's some Depression-era level shit right there. So of course there is a need for art to reflect on that stuff.

I don't really care to debate the details, I just want to examine the greater implications and the social structures behind how civilization deals with those types of situations.

Super hero-adjacent characters exist, but won't necessarily be the focus of the stories that are told. Corporate espionage and libertarian -slash- anarcho-capitalist theory will be themes explored—because I find it interesting, the actual practicalities of implementing such civic systems aside. But it's all just flavor for the world and to inform the behavior of the characters.

Switching gears a bit. One of the things that I need to do is think about how to implement a page navigation system. WriteFreely doesn't really have a “web comic” module like Wordpress does. However, Matt Baer has thought about the utility of his writing platform, and he's implemented a place where you can inject some js into every page. I like that, and it should serve this particular purpose just fine.

I've intentionally labeled each entry as the page number, so the url slug and the title as well as page number are all the same. I do not anticipate ever going beyond 999 pages.

That being said, here's how I implemented an automated page navigation:

let path = document.location.pathname;

function displayNav(){
    let page = parseInt(path.substring(1,4));
    let next = (new Array(3).join('0')+((page + 1).toString())).slice(-3);
    let prev = (new Array(3).join('0')+((page - 1).toString())).slice(-3);

    let div = `<div class="page-nav">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td id="first"><a href="/001"><i class="bx bxs-chevrons-left"></i></a></td>
                        <td id="last"><a href="/${prev}"><i class="bx bxs-chevron-left"></i></a></td>
                        <td id="next"><a href="/${next}"><i class="bx bxs-chevron-right"></i></a></td>
                        <td id="recent"><a href="/"><i class="bx bxs-chevrons-right"></i></a></td>
                    </tr>
                </table>
            </div>`;
    
    let content = document.querySelector('.e-content').children.item('p');
    content.insertAdjacentHTML('beforeend', div);
    return content
}

if (path !== '/'){
   setTimeout(() => {
    displayNav();
   }, 200);
}

Everything hinges on the url path, so that's defined at the top level scope. I figured this would be the easiest way to deal with pages. Stylistically I wanted to go with three digits, so working with that in javascript is a little clunky.

Originally I had an lpad function that was taken wholesale from stack. It seemed like the most elegant solution. But I wouldn't have used that function anywhere else, or more than twice, so I refactored what the function did right into the declaration of my next and last variables.

Once we have those variables we know what our URL is going to be for going backwards and forwards. So I defined a template literal with the HTML of our navigation block.

How do we know where to place it? Well, I want to make sure it's right after the picture and that's the only paragraph we have. Writefreely dumps your post into a div with the class “e-content”. Despite the fact that it's not an id, it does only show up once on the DOM. So, we query that class, look for the p and dump our div variable as html at the end.

Writefreely also provides user-specified CSS, so I've imported the Boxicons cdn so I can use it like FontAwesome and have some icons to represent first, last, previous and next.

Might not be the most elegant way to do what I need it to do, and might not be the most robust, but it works, and I'm happy about that. I don't have to keep writing a table/navigation element for each page.