recarmdra's Website Devlog

[recarmdra]

Hello, hello everyone! Welcome to my website devlog! Here I'll talk about my NeoCities projects and whatnot, I hope you all find it interesting. :>
This is inspired by the blog "celeste's hobbyist webdevlog" by @terashards so go give that one a read too if the topic interests you!

So, I'm kind of showing up to this devlog empty-handed, as I've scrapped everything I've coded today. For context, I've been feeling really demotivated this year, but recently, my motivation has come back! I want to use this space to prepare for the launch of my new website, as I'm abandoning my old one.
"Why?" you may ask. Well, I'm not feeling proud of that website anymore. I kind of coded it in a hurry and didn't take my time with it. My code is an absolute mess and, initially, I used a template to make the main page. There's nothing wrong with that, of course, but I just want to use something I made myself, with code I (mostly) understand.
Initially, I had written a super long blog post about a new page I created for my personal site, "Lunar World", but as I said earlier, I've scrapped it. It really did help to get the coding cobwebs out of my system, though.
I also want to distance myself from Lunar World for unrelated personal reasons.

And so begins my new project! An unknown and unnamed website rises from the ashes of mechanicaldance.neocities.org! (I'll leave the old site up as an archive)

Before I even start, I'd like to outline some of my goals.


GOALS
♦ Accessibility! The most important of my goals.
♢ Taking. My. Time. I need to understand that I don't have to finish a page the day that I start it.
♦ Relying on my own code rather than templates and snippets I find online. I want to truly understand what it is I'm doing.
♢ Experiment! I usually shoot down my own ambitious ideas because I think "No, that'd be too hard." There's no harm in trying!
♦ Keep tidy! My code is usually so messy that I forget what it does the next time I end up looking at it, I want to get into the habit of writing down comments for future me, explaining what sections do what.
And probably more that I'm forgetting!

Anyway, the first thing I have to do is to actually name my website. I was thinking recarmdra.neocities.org, it'd match with my old MegaTen site as they're both MegaTen spell names. But I'm totally open to any suggestions or advice when it comes to naming my site, I'd love to hear how you all came up with your website URLs/usernames. :>

 

[terashards]

excited about another webdev thread in here + i'm very flattered to be mentioned as inspiration, thank you

i hope you don't mind a lot of commentary? i think you have some really great goals here! genuinely all of them, though particularly wanting to have more accessible webpages - it's a learning curve and won't be instantly intuitive but even just thinking about accessibility is something that a lot of other people aren't doing and the effort is always appreciated. remembering to add alt text to every image (or aria-hidden="true" to completely decorative content, use with care of course) and beginning to learn how to make a webpage work on both desktop and mobile devices without being impossible to navigate on one or the other is a great start. there's still a lot of accessibility stuff i'm still learning, and sometimes i do run into the issue of balancing artistic intention and accessibility when those two things conflict with each other, but overall it's been very worth it to learn.

as for website name, recarmdra.neocities.org works in my opinion! it's very short too which is always nice. i guess there's a couple things to consider with it:

1. is there any reason you'd have qualms with the website coming up if someone were to search your bulbagarden username on google? do you have any problem with people stumbling on the website who are independently looking up "recarmdra" for megaten information? because it will likely end up in search results for recarmdra even though it's a pre-existing thing in megaten. (or is this perhaps a bonus for you?)
2. since recarmdra is a spell name and not straightforward english words, it may be harder to remember for some people who are trying to open your website again. "mechanicaldance" was longer but also easy to remember because it's the words mechanical and dance smashed together lol. it's up to you if this matters to you (and it could also wrap back around to being more memorable, so shrug)
3. is there something else that might fit the website better? you don't necessarily have to make the contents of your website fit the URL to a T (or at all if you don't want to i'm not your mom), but recarmdra as a URL implies that there might be megaten somewhere on the website, or that there might be fantasy vibes present in the layout. just food for thought.

personally i don't believe there's an issue in deciding on a name now and changing it later in the earlier stages of the website while you're still setting up and learning, if you want to just go with something and chew on the name over time. the main issue with changing a website's URL is just link rot - any prior hyperlinks to the site will be broken. but it's unlikely there's going to be many links to the old site other than ones you've put on your own profiles while you're still this early in and it would be alright to change it without much damage.

all of my websites were named in different ways. Blue Moon Falls actually used to be called Classic Pokemon Guide but was changed to remove "pokemon" from the URL which i felt could lead to legal risks (something you really don't have to worry about as much because you're not purchasing a domain like i was). i'm like you in enjoying references to my favorite things in my URLs and BMF is no exception - it's a reference to an episode of the johto anime that heavily features quagsire with a location of the same name, but it sounds generic enough to be unrelated lol. i enjoy website names that sound like a location, like you're visiting a place, so it worked out and now that website is far too big and gets way too much traffic to change it ever again so like it or not, i'm stuck with it! "virtualobserver" is also a reference, in this case to my favorite singer, and is two words smashed together. "60minlkdt" is just the name of the event the website is for so that was very straightforward. the only website name that breaks this trend is armastide, which is a combo of the word "armastus" in estonian which more or less means love, and "tide" like the tides of the ocean. smashing two words together as a URL always works, is my point lol.

wishing you luck and excited to see updates! definitely watching this thread

 

[recarmdra]

i hope you don't mind a lot of commentary?

Not at all, its exciting to chat with someone else about this topic! :>

how to make a webpage work on both desktop and mobile devices without being impossible to navigate on one or the other is a great start.

Having a responsive website would honestly be an achievement for me. I've messed around with making one a few months ago but grew too impatient during the process (a running trend lol).

Thank you so much for the feedback! I'll be giving it some more thought today. As you said, I've got plenty of time as I'm just starting this project so fixing links wouldn't be too much of a hassle.
Though in the meantime I could probably get started with some "concept art" for the site (messing around on Paint.NET LOL but it works!) and maybe starting on a website button.

 

[recarmdra]

I REALLY wanted to have my homepage all finished before I came back with updates, but someone (me) got too impatient and excited.

recarmdra.neocities.org

Yahoo! I had a LOT of fun working on this. The homepage is pretty much finished in terms of coding, all I need to do is replace the placeholder text with stuff I'm gonna write tomorrow and add some more flair/details. I spent most of the time figuring out how grids work, since I really wanted to make it responsive. I thought it was going to frustrate me, but surprisingly I had a lot of fun!

I'm gonna start working on a website button tomorrow as well, but I suspect that its going to take me a long time since I'm awful at deciding (though I suppose I could always make several).

I'm slightly worried that I'm not going to have enough ideas on what to fill the homepage with, but I'll figure it out LOL.

Spoiler: "Concept Art" and WIP screenshots.

Marquee text isn't supported anymore, so the actual text is static. I know I could do animated text, but I decided against it.

Screenshots of me messing around with grids live. Don't mind my Discord nickname.

For now, I only have 3 pages.

The landing page
The home page
The error page

I actually coded the error page first, it was a good warm up!

 

[recarmdra]

Ahh, where does the time go? I can't believe the day is already over!
Anyway, I've been messing around with my homepage all day today, and I'm happy to announce that it is finished! (For now, at least)
I ended up yapping so much about my goals for the site, that I actually ran out of space on the homepage. I'm probably going to elaborate on that in one of the blog entries I'll write for the website soonish.

Let me walk you all through my progress today! :>

Last I left off, the site was looking like this:

I only had Lorem Ipsum displayed on the site LOL. Anyway I wrote a couple paragraphs on a word processor and pasted 'em in but it ended up being too long as I said.
I wrestled with the font for hours only to go from MS Gothic to MS PGothic (I even considered the Undertale font as a joke).
Then I added a colored <div> to display "NAVIGATION" in just to break it up a little bit. I changed the "BUTTONS" section to contain a chat box and an "UPDATES" section like in my "Concept Art".


Website Buttons
After that, I got started on a website button! Making buttons is super time consuming for me because I have no clue what it is I'm doing, just me and Aseprite against the world.
I even messed up the dimensions, I did 81x33 instead of 88x31. I saved it, here it is:

(Messing up the dimensions was not my brightest moment.)
I wasn't satisfied with it, so with @Okido's much appreciated help, I arrived at the following (I even made two variants!)

(Don't worry, these are the correct dimensions orz...)
I'd love to add people to my "Friends on NeoCities" section! If any of you reading this have a website and don't mind being linked to, let me know!


Random Title Text
This was something I had already implemented on a whim last night, but it didn't make the cut since I couldn't get a gradient working on it. But I thought "what the heck, why not?" and decided to re-implement it without the gradient. But I could not find the tutorial for it for the life of me! It involves super simple JS that still manages to fly over my head, so I needed instructions so clear that even a four year old could understand them.

The code, if anyone wants it:
<p id="randomText"></p>

<script>
const texts = [
"Random Text 1",
"Random Text 2",
"Random Text 3",
];

const randomIndex = Math.floor(Math.random() * texts.length);
document.getElementById('randomText').innerText = texts[randomIndex];
</script>

I have everything placed within <HTML>, there's definitely a neater way to do this but this is what worked for me LOL. You can put a style= tag within <p> to change the font, color, size, etc.
But! Now the title text changes every time you refresh my homepage, isn't that neat?


This is how things are looking like now:

Anyway that concludes my update for today, thanks for reading!

Spoiler: Bonus: me struggling

 

[terashards]

glad to see you're already jumping into CSS grid!! i was super late to the party with that and i still have some old webpages i need to update to use it to make my stuff more accessible at some point (cough BMF cough)

you already really clearly have a knack for making appealing looking webpages because i genuinely think your index page looks super pretty. it's simple but in a good way, seriously pleasing on the eyes and aesthetically cohesive. also love the bit of flavor with the random text at the top! it made me think of the minecraft subtitle text and for what it's worth, embedding a tiny script like that directly into the HTML file is pretty normal - i only separate out my javascript files if it's a huge amount of code or something i need to reuse on multiple webpages. so i think your script looks fine. oh and i love your buttons!! i said you had a knack for making appealing looking webpages but you also apparently have one for making appealing looking site buttons LOL

i super appreciate your dedication to adding proper alt text to every image, including the list of "random buttons" on the right sidebar!! you mentioned that you wanted to make your webpages more accessible so i'll put a couple of quick things you could do if you wanted in a spoiler (so if you aren't feeling up to it or don't want constructive criticism you don't have to read it)

Spoiler: accessibility notes

• you don't have actual navigation links yet, just placeholder text, but when you do i'd put the links in a semantic <nav> element instead of a <p> element. this tells screenreaders, hey, this is where the navigation links are, and the user can "jump" to the navigation links quickly if they need to that way!
• on that note, i'd also change the headers to be <h1>, <h2>, <h3>, etc elements, whatever feels appropriate. similar reasoning as the above, it clearly separates out your content for screenreaders. (you can also style all header elements with the same CSS this way instead of having to use the style attribute on each one in the HTML)
• it is possible to make your updates list an actual unordered list (<ul>) and style it to have the bullet points be stars and whatnot. similar reasoning as above, it's a little more semantically clear that it's a list of things, but also it would prevent you from having to copy/paste the star symbol every time which is nice lol. this one's a lot less important than the other bullet points, i just figured i'd mention it since i was pogging out when i found out you can change the bullet points to an image or whatever. could be useful for future webpages too

anyway this is seriously looking great and i'm glad you're having fun

 

[recarmdra]

glad to see you're already jumping into CSS grid!! i was super late to the party with that

I thought it was gonna be so much harder than it actually was LOL! I used to use <table> to get that sort of look on pages but it just looks so messy in the code, I'm so happy I decided to push on through with it!

it made me think of the minecraft subtitle text

Ooh yeah! Exactly!!

oh and i love your buttons!! i said you had a knack for making appealing looking webpages but you also apparently have one for making appealing looking site buttons LOL

Thank you so much!! That means so much to me!

Also thank you so much for the feedback! I truly appreciate it! I'll implement the changes today and keep it in mind for future pages. Don't worry about spoilering things or giving criticism/feedback, I'm 100% down for it and I'm thankful for the time you've spent on it.

 

[recarmdra]

I had to actively hold myself back from posting here every day because I didn't want to spam BUT! I've been super busy!

So! Initially, I was going to make placeholder pages utilizing the "template" I created for my homepage, and I got a good 3 pages in, until I thought to myself "If I don't do it now, I'm going to lose motivation when I see all the pages I'm going to have to remake." This... was a couple of days ago. I've spent most of my time working on those pages and I've learned a lot!

Here is an example of a page before and after I remade it:

See how the one on the left looks exactly like my homepage? That is what I meant by template!

I've learned a lot the past couple days, so let me recap it!

GOALS PAGE:

• How to display text on top of an image.
• Overflow-y property and containing divs to a specific height.
• How to round scrollbars.

CODE PAGE:

• How to animate an image moving up and down.
• How to make an image follow you as you scroll.
• How to use <textarea>
• How to make gradient background.

ABOUT PAGE:

• Intermediate usage of grids (...I think my setup is complicated enough to qualify as intermediate...?)
• How to change an image on hover.
• How to animate an image on hover (rotate).
• How to position text using the absolute property.
• How to tilt text.
• How to use tabs.

CREDIT PAGE:

• How to display backgrounds to the left.

That's pretty much it! As you may have noticed, I release all of my code publicly! It may not be the best or most polished, but having to explain what everything does really helps me further my understanding of everything!

As always, you can visit my website from the link in the signature below, but here it is for convenience!

 

[Mialentia]

Whoa, you really have a talent (and dedication) for this stuff! This is making me want to make a website too, lol (not that I'd have anything to talk about, and not that I know how to code at all). I wish all of the Internet looked like this.

Good luck with your goals! I'm sure you can do it. ^^

 

[terashards]

this is actually so sick. it's like you were born to make good looking webpages, seriously these look great LOL. i went to the actual site and scrolled around and it's hard to believe you've only been doing this more recently to be honest. also your code templates saying "powered by friendship and VGM" is so real (by the way i love your site's official email address lol, proton ftw)
i enjoyed reading you elaborating on your goals, you seem really passionate and dedicated and i'm excited to see more!

i wanna let you know though, the html <center> tag is deprecated. from mdn web docs:

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

point is it'll probably work on most browsers but you're better off centering with CSS text-align: center; for inline elements or margin: auto; for block elements for most things!

otherwise your code looks great and you're seriously learning fast

 

[recarmdra]

i wanna let you know though, the html <center> tag is deprecated. from mdn web docs:

No...!! My beautiful wife is getting taken away from me...!! I'll start tweaking some of the code today then, I wanted to change some of the large text to be vw instead of px anyway.

also your code templates saying "powered by friendship and VGM" is so real (by the way i love your site's official email address lol, proton ftw)

I would be nothing without cute and silly easter eggs. Also YEAH I switched to proton last year and never looked back. I woke up one day unreasonably (or reasonably) mad at Google so I just switched to as many alternatives as I could. I got so close to installing Linux but didn't because of compatibility concerns.

---

This is making me want to make a website too, lol

(Points at you very loudly) You should do it! The first thing that comes to my mind in your case is a space to host your writing on! I know AO3 exists but the HTML capabilities of it are super limiting. You can get really creative and give your work super different looks from each other with proper HTML!

 

[Mialentia]

Hehe, I appreciate the support. Honestly though? I'm pretty satisfied with AO3's offerings as of right now. I can add images, custom colored text and audio, and that already covers pretty much everything I need at the moment. If I ever need more though maybe I'll consider it hehe