So... It's been a while
I'm not gonna go into detail about my personal life (maybe when I sort things out with that), but I am going to
show
what I have so far of a site total revamp.
Side note, I can't believe I just noticed two years later, that the blog page
wasn't visually updated, like, it was one of the things I did finish but apparently I... forgor???
anyways...
So I wanted to nuke everything and start over, and not update until everything is ready.
I started with some sketches of the layout, I recommend writting down what you want in your website first
(links,
updates, music player, stamps, gif and images, the main content, etc) so you can have an idea of how
many
things are going to be on the front page. For this I also recommend exploring Neocities for inspiration, and
also
cause there's a lot of cool websites here, you can check the links on my site to get started!
Now, I knew I wanted my site to be like a cute windows desktop, with various windows across the screen with my
stuff
in them, but you see, I didn't just want my site to look like it had little windows, I wanted the windows to be
somewhat functional; to drag and minimize.
Before I got started on any code or mock-up, I first had to make sure I could make the divs behave like I
wanted,
and for that I had to turn to my swore enemy: JavaScript. I KNEW that what I was trying to do was only possible
with
JS, but because of my poor-piss knowledge of JavaScript, I had to rely on the code of the people on the internet
that generously share their codes online.
I'm going to list a few options that I found that I almost used but in the end I went with another one.
- SuperHi's draggable and resizable windows (almost went with this one since it had the two features that I needed the most, aka be muliple draggables).
- Window's Manager by max1220 (it's so good, the deal breaker for me was the fact that it requires each window to have an iframe for the content, and I thought too many iframes in one page would't be good, but if you don't mind, I recommend it!).
- Resizable & Draggable Dialog by ZulNs (I couldn't figure out how to change the position of the windows).
- DivWindow by Marc Clifton (I thought I would use this one, since you can move, resize, minimize and close the window… But it comes with so many files that I don't know what can I omit or if all of it it's necessary for the windows to work. I might read the documentation in more detail later since I just skimmed trough it, but for now I'll just stick to the code I'm using now).
- Draggable Div Element from CodingNepal (You can minimize the window in the demo(and more!) but I downloaded the zip file to see the code and it didn't have those features??? and I couldn't duplicate the div to boot).
- Drag/Resize/Minimize/Maximize/Close Any Elements by InteractiveJS (Almost perfect! I was going to use this one since I could do multiples, I could customize them with css… But, because the JS is the one creating the template, I couldn't give the window header a title nor an icon, and I could not figure that one out so yeah).
All on these codes were goods, but there were not Exactly what I was looking for, so I did the unthinkable…
LEARN JAVASCRIPT.
I once read a comment that learning JS is like learning to play chest: Is actually easy to learn the basic
rules; where and how each piece moves, what you can do and can't do, and the state of check and mate. But applying all
that knowledge to strategize and win is hard, and its what needs practice.
It's true, no matter how many statements and methods I painstakingly try to read (thanks adhd), I don't really
know how to apply them, but good lord that wasn't going to stop me.
Yes my little outerspace creatures, I, Kiko, against all odds, Learned JavaScripts!!!!!!!!!!!… Kinda.
Well, what you see is a mishmash of codes I forcefully made myself learn and a lot, and I mean A LOT of borrowed stuff from stackflow, that I held with ducktape in hopes of working. And it does!!!! I even made it do math for the battery percentage!
The code in case you want to have it on your website!
I'm so excited about JavaScript now! More optimistic! I'm thinking on making a few more things with JavaScript on
the page! But first!!!!!! The page itself haha.
I based the design of the divs on windows 98, I was torn between doing 98, XP or Vista, and although XP and Vista
are more nostalgic to me since I was too little to use my dad's computer when it had 98, I like the aesthetic of it
a bit more (but I did find css resouces of 98, xp and vista! In case you do what to give it a go).
So I made a quick muck-up in csp and then started making that in vscode.




I, unfortunately, didn't take as many screenshots of the early process of the html as I would've wanted(the downside of thinking 'mmh maybe I should document this' far too late), but basically, I added the divs, tweaked the design a bit, and added the windows for the stuff that I wanted and slowly worked on the contents.
The first window that I did was the music player since, much like the windows, its integration relied on my js skills, thankfully, I find a simple yet effective code by Dev+Coffee, and with my new found knowledge on js, I could modify it to my liking. So that was a quick implementation! (me when I lie, I actually coulnd't decide on a music player look and I did struggle with the js for the trackbar for a bit).

Next thing I did was look for some kind of chat host and luckily on the Neocities Reddit, people recommended Chattable and I see why; easy integration (literally just two scripts and an iframe), and heavy customization (you can choose an already existing theme, or have your own css). Now I was having trouble with the custom css, so I decided to put aside the chat to focus on the next thing.

When putting in practice my js skills (basically to see if I could make a simple function on my own), I endend up making a link that chagnes background and url every page load at random! So I implemented it into my page as a little gif. Where will the links take you? I still don't know haha.

in case you want it (also yeah, I love Mob, its my new personality trait)
Next thing was the paint window; I just wanted a window with a drawing of my artsona that looks like Paint, but because I'm oh so creative, I decided to make the buttons change the drawing inside the window with js.

the code!
And that's basically what I got so far! I was going to do the updates window next, but I got caught up in a design choose; to add the file, edit, view, etc text at the top of the windows, or just leave the windows as they are. I know if I add the text, I'll naturally want to make text appear as they hover instead of only being a non-functional decoration, I'm fighting the urge!!!! But we'll see…
I also have the urge to make my own icon library, I'm using FontAwesome's icons for the page, but I want to have that pixel look to them and I don't know of any icon font that's pixel art and free. I will try to make one in Icomoon, but only if I got the time… Maybe I'll do the icons needed for my page and update the library as I go, so you can use the library too! When I incorporate the chat, make sure to leave a suggestion for an icon!