untilted dot lol blog (dotart.blog's version)

(note: Blog* = the untilted dot lol blog at this website)

I have implemented a kind of experimental code for my new blog. This code defines a multifunctional sidebar interface combined with blog post navigation, a popup message system (that people can optionally click), and my attempt at dynamic RSS JSON feed generation. Below, I explain every line and component to highlight how the code works and its technical structure.

mySidebar

The sidebar is represented by the <nav> element. It is positioned to remain fixed on the left side of the page, occupying the full height. Here I will explain its inline CSS styles (I use inline CSS for everything because it's easier to keep track of which CSS styles are linked to a specific HTML div):

• z-index:3: Since nav is positioned to be fixed, the z-index property is used to ensure that the sidebar appears above most page elements but below higher-priority components like the popup (For context, the popup's z-index is 5).
• width:320px, height:100%: These physical dimensions are appropriate for sidebars and for both mobile and desktop users.
• position:fixed, top:0, left:0: Fixes the sidebar at the top-left corner of the viewport.
• background-color:white: Sets the sidebar's background color for better readability.
• overflow:auto: Enables scrolling if the content inside the sidebar exceeds the sidebar height.
• border-right:1px solid #ddd, box-shadow: Adds a subtle shadow and lining for visual separation.

The reason for the id="mySidebar" identifier is to allow JavaScript functions to interact with this element dynamically.

What's Inside The <nav>?

You will note that most everything is in block format which means that block elements stack on top of each other.

1. <div id="makespaceforbutton">:

   • Acts as an empty container for any potential dynamic content placed via JavaScript and also to, as the id obviously puts it, “make space for button”. There is a border-bottom:1px solid #ddd line, the space between the content and the border is about 35px (padding), and all text is aligned center for consistency.

2. <a id="aboutLink"> and its styles:

   • Serves as a navigational link titled “About This Blog.”
   • Attributes: href="javascript:void(0) prevents default link navigation, instead relying on onclick="showAboutPopup()" to show the “About This Blog” popup.
   • Styling (background-color: #616161, color:white, etc.) gives a greyish background with white text and ensures a user-friendly, visually distinct appearance.

3. Posts Section Toggle (<a id="postsBtn">):

   • Exists to enable the visibility of the list of available posts as a clickable button. This is managed via the onclick="togglePosts()" handler. All other styles it contains is for aesthetic purposes.

Posts Section

<div id="Demo1"> shows a list of collapsible posts, initially hidden as display:none. It contains individual post links structured as (example):

<a ... onclick="showPost('Post1')">
  <div>
    <span>POST1</span>
    <p>insertdatehere</p>
  </div>
</a>

These links include:

• Dynamic IDs and Styling: Each link is styled for clean layout with borders (border-bottom:1px solid #ddd) and 16px padding.
• Functions for Content Display: The onclick event attribute calls showPost(), a function that takes an argument (in this case, the ID of the post to be shown) and performs the necessary operations to reveal the specified post and hide the others.

Sidebar Toggle Button

So where the “makespaceforbutton” section is located, there is a <button> element outside the sidebar that toggles its visibility. Key features include:

• Positioning (position:fixed, top:16px, left:16px): Like the sidebar, the button is positioned albeit slightly at 16px at the top left to ensure consistent placement.
• Functionality (onclick="toggleSidebar()"): When you click the button, a JavaScript function toggles the sidebar and adjusts the main content's margin (style.marginLeft).

Informational Popup

<div id="id01"> is a modal overlay designed to display a popup. It uses the following:

• display:none: This initially hides the popup until triggered by JavaScript.
• Styling: Covers the entire page (width:100%; height:100%) and dims the background to a transparent black color (background-color:rgba(0,0,0,0.5)).
• Popup Content: Contains auxiliary <div> elements styled (background-color: coral, padding:16px) for clarity. The close button (technically a multiplication sign, but we can use it as a normal X as well) invokes JavaScript to hide the popup.

CSS Inside <style> Block

The external CSS block includes:

1. #popup-content:
   • Defines the dimensions and animations of the popup.
   • Responsive Design: Adjusts width under smaller screens for mobile users (width:80% for max-width:768px).

Main Content and Blog Posts

The <div id="content"> represents the main content outside the sidebar:

1. <div id="defaultMessage">:

   • Displays introductory text for first-time visitors, including FAQs and descriptions of blog functionality. Once you click on any of the blog posts, it disappears and switches to any selected post.

2. Post Content (<div id="Post1">):

   • Encapsulates individual posts, styled for readability, with sections for headers, metadata, and footer content.
   • Integrates JSON-LD Structured Data (<script type="application/ld+json">): Originally, I did want to integrate some sort of RSS thing, but the problem is that I can't seem to upload files directly to the website's server, and my website/registrar's Cloudflare settings seem to make it difficult to turn web pages into RSS data. So I ended up with JSON-LD, which is actually apparently really only useful for SEO purposes, BUT it can be used as an RSS to a limited but useful extent as well. It took me a while to research and realize that.

JavaScript Functionality

The <script> block governs dynamic behaviors:

1. generateRSS Function:

   • Scans posts for JSON data, builds an RSS-compatible JSON feed (or at least a semblance of it?), and returns it.
   • Utilizes querySelectorAll to locate elements containing data-rss-feed.

2. Event Handlers:

   • togglePosts(): Toggles the visibility of the Demo1 container (posts section).
   • showPost(postId): Hides the default message and displays a specified post by its ID.
   • showAboutPopup() and toggleSidebar(): Control popup and sidebar toggling.

3. Feed Storage: Saves RSS JSON to sessionStorage for quick retrieval.

RSS Feed Copy Button

Finally, the <button> for copying RSS JSON is placed at the bottom-right corner of the viewport. It interacts with the clipboard via navigator.clipboard.writeText().

How Well Did I Do?

This code took me about 3 weeks to get right. I think the JSON thing was the hardest part. Because of how I thought it would be somewhat simple enough to do, and it turned out to be somewhat difficult.

At some point I may add more extra things, so this is just how the code is as of this time in writing.

If you have any feedback of any kind you are welcome to leave it!

For any inquiries or feedback, please contact me at this email right here. (When commenting on a blog post, kindly include “Re: [insert blog post name here]” in the subject line.)

The Untilted comic strip is now available for free in both Free and Premium Plans. The Premium Plan will now include not just all comics and commenting, but also:

✅ Exclusive custom art commissions for members only

✅ Exclusive members-only group to help artists improve their skills, provide feedback on their work, and help them develop their unique voice and style

✅ Early access to behind-the-scenes art from my other artistic projects

✅ Guest artist features

...and potentially more.

Additionally, for people who DON'T want to have to register to read the comic for free, I put all my comics on my Buy Me A Coffee page on the Gallery tab, no registration required. There is also a BMAC version of the Premium Plan as well if you'd like.

It took me a while to realize that being vague and mysterious and secretive apparently doesn't work out well in terms of marketing after all, especially for newer artists like myself. So, I decided on a more transparent and inclusive Plan B, as I seem to be getting very little exposure.

I am currently in the process of making some changes to the untilted.lol website. Just a reminder!

For any inquiries or feedback, please contact me at this email right here. (When commenting on a blog post, kindly include “Re: [insert blog post name here]” in the subject line.)

Effective April 12, (or earlier), I will be retiring the Official Blog. The reason for this decision is simple: I believe I can create a better experience than what the current CMS allows.

As you may have seen in my latest post on Buy Me A Coffee, I've been dedicating a lot of time to learning web development, specifically HTML, CSS, and JavaScript, to enhance the website's appearance. This new direction requires more flexibility than the blog currently provides, so you won’t see the Official Blog anymore.

If you have any questions, feel free to reach out. I plan to keep my posts concise, as I know many people prefer shorter reads. I certainly don't enjoy typing lengthy messages, especially for this announcement!

Moving forward, the blog will primarily serve for important updates and announcements, but please note that I may not always update it regularly. If I happen to miss something, a gentle reminder would be appreciated.

Thank you for your understanding!

For any inquiries or feedback, please contact me at this email right here. (When commenting on a blog post, kindly include “Re: [insert blog post name here]” in the subject line.)

Most works of fiction follow predictable patterns, tropes, and clichés in the name of convention, audience comfort, nostalgia, or the like. Conventions in storytelling have long been established as a means of creating a sense of familiarity and recognition for the audience. Certain narrative structures, character archetypes, and plot devices have become so ingrained that they serve as a foundation for many storylines of shows, movies, and more. This familiarity provides a sense of comfort and security, allowing the audience to engage with the story more readily.

At the same time, that same audience may also demand less, not more, predictable stories, in favor of more unique ones.

Does it really matter?

ɴᴏᴛ ʀᴇᴀʟʟʏ.

Contrary to what some folks might say, most people don't actually care if a story is generic.

In fact, many readers actively seek out stories with familiar elements. This preference for the comfortable is often underestimated in discussions about storytelling.

But, it's also true that fiction thrives on a delicate balance between familiarity and innovation.

When stories break away from conventional patterns, they can surprise and captivate audiences, and potentially lead to a more memorable experience.

Fortunately, I was mature and intelligent enough to realize narratives are far more complex than simple accusations of unoriginality. My own experiences navigating the stories promoted by popular culture and wrestling with my own attempts at teaching myself how to write a story revealed a nuanced landscape of narrative expectations. And I'm open to all the endless possibilities.

However, I was tired. Tired of seeing the same kinds of stories and characters over and over again. The realistic, down-to-earth romantic dramas, the superheroes rescuing damsels in distress, the funny animal adventures – don't get me wrong, those can be great, but STILL.

I'm not exactly fond of episodic things – those can actually be kind of forgettable. But I didn't want to go the other extreme and dive into some big, convoluted plot that everyone has to follow religiously. Those kinds of stories can be overwhelming, for everyone. I didn't want to feel like I was getting bogged down in intricate world-building or trying to keep track of a million different characters and plot threads.

Originally I wanted this to be a straight up comic series with origin stories and stuff, but that's daunting too. So, I decided to scale things back a bit and go with a more manageable comic strip format instead. That way, I could focus on crafting individual, self-contained strips without having to worry about weaving together a larger narrative arc.

But I was still having trouble coming up with something.

Then, I came up with this idea.

What if everything took place in a world where:

1. Nothing is consistent, organized, and overly polished. Not everything needs to be perfect or meticulously arranged to be valuable or meaningful. When things are inconsistent or less polished, they can feel more genuine and relatable. In this way, people are more likely to appreciate things like perspective issues or line quality variation, rather than criticize them.
2. All characters are neither human nor non-human, and have their own unique and oddly specific biological traits. All this is open to interpretation, and it also allows for a diverse range of beings that defy conventional biological norms. However, this is not better explained by any fictional construct such as that in science fiction or fantasy – in other words, they won't be stereotypical aliens or unicorns or dragons or whatever.
3. Everyone lives in fairly basic societies focused on survival needs, but the social constructs of the real world do not apply to this world. Concepts like class, race, or gender roles may not hold the same significance or influence as they do in the real world. While this is also open to interpretation, it is important to remember that the aforementioned concepts would not be relevant. This doesn't mean that there aren't any differences or inequalities, but they would likely be based on more practical and immediate factors.

To make things even more simpler, I decided that there will be only one main character.

Now, if you saw what my character looked like, you may notice how plain-looking, at first glance, the character design is.

However, that is a deliberate choice on my part, not a shortcoming. The simplicity of the humanoid look is done to create a sense of universality and an appearance that is more relatable and accessible. It's a deceptively simple design that hides the true nature of the protagonist. (and no, it's not as evil or cliche as it sounds)

The decision to focus on a single main character allows for depth rather than breadth. Instead of juggling multiple story lines and personalities, we can dive deep into one being's experiences, thoughts, and growth.

Now, this approach to storytelling isn't about rejecting all conventions. Rather, it's about questioning why those conventions exist and whether they serve the story we want to tell. It's about finding a balance between the familiar and the novel, or rather, the generic and the unique, and creating a world that feels both different and strangely relatable.

In the end, this isn't just about creating a more unique comic strip. It's about challenging our perceptions, expanding our understanding of what storytelling can be, and inviting readers to see the world – both the fictional one I'm creating and the real one we inhabit – from a new perspective. It's an experiment in narrative, in art, and in the very nature of existence itself.

And it shouldn't be about how generic or how bad a story is. The focus should be on evaluating the artistic merit and craftsmanship of the story, rather than simply making broad, subjective judgments about its perceived flaws or lack of uniqueness. A good critique examines the specific techniques, choices, and execution of the story, considering both its strengths and areas for improvement. The goal should be to provide constructive feedback that helps the storyteller develop their skills and create more compelling, impactful stories in the future.

For any inquiries or feedback, please contact me at this email right here. (When commenting on a blog post, kindly include “Re: [insert blog post name here]” in the subject line.)