What I’m making

Personal website, made by someone who really wants to play a pokemon game that I used to play when I was little but can’t find now.

What I did

• I made a new pop-up for my art!! This was for sure the hardest thing I’ve done because I had to learn abt APIs and stuff and I felt it was terribly confusing.
• Soo umm why did my art pop-up need APIs? I had this idea, that if sm was visiting the site, and they really liked a certain piece, they could like it! That’s why I had to learn abt APIs. Tbh I’m still confused what I’ll do when I upload it on Github, because I’m pretty sure its a Security Issue™ to just leave the info out in the open.
• Because this is a porfolio/ personal page I figured I’ll add a section abt education. I wanted to add some ✨ pizzaz ✨ to the pop-up!! So I drew a gif, recorded it to my lapse, and connected it to my hacktime!!!!
• I’m soooo happy with how it turned out!!!!! I didn’t think it would look nice, but it does! All in all, a preety good update.
  Cheers!

#What I’m making

• A personal website, slightly gamified! The basic premise is that you choose a sprite, a name, move around a room and interact with the objects there. Some of them are going to be purely animated stuff that I’m going to work on pretty soon!!!

What I did

• Spent a bit of time improving the movement. Read: a lot of time. It’s a lot better now!
• Next I began with the interactive objects. I’m going to finish off the more code?/typing based work first before I begin with the animations for the pop-ups.
• I made a pop-up to show my projects! You click on the board abv the computer 💻 . I made an overview tab, a devlog tab (I just copied my devlogs on stardance) and a links tab for the readme and deployment and stuff
• A lot of time was spent on the css, but I’m happy with how it turned out. I might add like a bit of texture to the pop-up, maybe I’ll make a plaid background?
  Anyway, have a great day!!!! Check out the video if you have time :)
  ps-idk why my screen recording doesn’t show my sprite walking It makes me sad 😭 😭

What I’m making

• A personal website, but make it creative. Last time, I just finished the landing page, where you choose a sprite and a name! The general look I’m going for is kinda like the pixel pokemon games

What I added

• So I began by storing the user’s name and choice of character. Then I remembered that I needed to convert my animated gifs into spritesheets. I’ve never actually made this before, else I would have just done them as I was animating
• I made the UI, which is a isometric room and a topbar. Then came the fun part! Making the sprite move and not bump into the furniture. This was where I jinxed myself. My room was a flat image, and individually plotting areas where the sprite couldn’t move was….hard to say the least.
• I created a temporary debug code using where I could adjust the points, view the coordinates in my console and copy it into my code. It worked, but only to an extent. I was three seconds away from exiling myself to yt to learn blender to make a 3d model instead.
• Idk how, but in some stroke of inspiration, I decided instead of marking places that weren’t walkable, I’d mark the places that actually were.
• Things got a lot simpler from there. I drew over the walkable areas and inserted it. I kept it transparent so the code could see it but you can’t. IT WORKED, by some grace. It isn’t perfect, but soo much better.
  Cheers!

What I’m Making

• I’ve been thinking about making a personal website for so long, but I simply didn’t like the idea of simply making a scrolling page with a sleek design. I think that websites can be so much more interesting than that! What I want to make is something with character and colour. Sooo here goes-
• I have a very distinct idea of what I want to make though I’m not sure if I can make it. But I’m going to try anyway lol. The theme is going to be pixel art!!!
• So today I locked in and made the landing page. I forgot to track the designing 😭😭 so this is only the coding time. The landing page has three avatars you can choose from, an info button and a keyboard for your username.
• All sprites are drawn and animated by me! Check out the video, I think this is coming along pretty nicely!
• Next devlog will be better, I’m in a rush rn . I have my physics paper tmr and I haven’t studied yet 💀

What I added

• Okay, you guys; this might just be the most complete this project has ever been. I only did minor additions here, so here goes-
• I made add the buttons with text on them hover uniformly. Its slightly superficial, but I just wanted them to be uniform.
• I added information buttons on the header for certain apps that might have quirks or be un-intuitive to navigate. Tbh I copied the code for my first information button pop-up and just added a different letter in front of it.
• I also added wallpapers! You now have six wallpapers to choose from. Initially I wanted to draw all of them. The default background I drew btw, but I just don’t have the time for it rn, so maybe in the future.
• So someone reviewed and told me my project doesn’t work in comet. I didn’t really know what comet was until I looked it up. There are a lot of differing opinions on what it could have been, so I have no clue. If someone has any idea, do reach out.
• Finally, I organized my html. Its strange to see how many comments I made towards the beginning, telling exactly what a div did. I was really unfamiliar with making page of that size, even if it wasn’t much. This time I didn’t go overboard in commenting and organising it
• I don’t have git so now I need to update my files on github, and edit the README. Once that’s done, its time to ship!
  Super excited for that

What I Added

• I think this might just be my best app yet. I created an app called Terminal, which is a ripoff PowerShell. I had so much fun making it! There are multiple commands, some which run an animation, and others that perform simple tasks. When I was done with Terminal, I saw that I had exactly 11 apps. Which is a great number, don’t get me wrong, but I wanted an even twelve. Hence-Comms. My final app. You need a password to access it.
• Where you may get the password? That’s up to you to click around and find out. If you’re curious enough to know what it is, but not enough to explore, I’ll put it in my READMe when I ship this! Because I do want everyone to be able to use all applications, if you don’t feel like a treasure hunt. It’s a pretty cool app that you miiighht need if you want to access another window.
• I added another button on the Top Bar. It opens up a window, that may or may not be related to Comms. Be warned, it probably might tell you exactly what Comms is but not how to access it. This window allows you to use whatever you find in Comms to good use! I also made the two-tone filter update while you choose the colours. I also discovered the Go Live extension, which has worked wonders for both my refresh button and my console, which kept showing me the phrase unsafe URL for every image I loaded. I’m glad it finally found peace in its security

What I Added

• I added a third slide to my sidebar, which means we get a new group of apps! With context to my last post about practicing DRY, I decided to parse through my code to see how much I could cut down. There was so much! I was under-using my classes so much, its crazy. Or so many places I didn’t make a class at all and just copy-pasted the styles on the buttons. I did my level best to fix all of that without breaking anything. My code looks much better now. Thanks for the tip, random reviewer I do not know-I finally saw the light lol.
• I made an app to place filters on images! Right now there’s a B&W filter and two toned filter the user can choose. There’s also an info button on the header if there’s any confusion. I feel like I’ll be adding that info button in a few more places. I also made a calendar.
• Okay, I’m going to vent here a little, feel free to scroll. This is mostly abt all the issues I ran into while coding-and all of it is very dumb. I learnt that I apparently didn’t know that its calendar not calender. Also I switch between American and British English a lot, so my html and js did NOT match in their spelling of “grey”. Istg, I make my own life harder at times. In the same vein, a similar naming mishap caused my js to break- it was at the end of the file, and hidden enough that its not visible while using. When I wrote the code for my calendar it didn’t work. I thought I made a mistake. I spent so much time rewriting, googling, getting frustrated. A lot of places it mentioned maybe the script wasn’t being defered properly. I was like nope, everything else works fine. I put the logic into the html script, it worked. I thought it was a mistake in the punctuation or indent and left it at that. Later in the day when I returned to make another app, it obviously did not work- I went through the same cycle. This time I was stubborn and didn’t want to put it in the html. I literally exhausted all possible options until I realized I could just check the console. There I did find an error, not in my calendar code, not in the app I was making, but in the filter app. I went through the five stages of grief in that second lol. I have no idea why I spelled grey differently. There should be a spellcheck while coding too. English is not my native language, so it could be a bit excusable, but I feel so dumb rn. You live and learn ig.

So first of all, I got my payout! Thank you so much to everyone who voted and gave me feedback. All your suggestions were really great and I’ve started to fix some of the bugs you guys found. I would have probably not have found out about the zooming thing because I never zoom in lol.

What I Added

• So, I added a task manager. It’s basically a to-do list, where you can list the stuff you need to get done and check the box once it is. Initially it was just a button the hid itself. Out of curiosity I googled and found out there is a way to add a checkbox! You make an input element and give it the type “checkbox”. I rewrote my code to add that.
• Then I made a stopwatch and timer thing. The js felt really hard to write, so I asked a friend for help and she basically guided and explained the logic to me. The timer style was modelled of that of my phone, which meant you needed to scroll to set the time. But the scrolling was interpreted as dragging by my dragging code, so I needed a fix. Right now, you need to click on the text and press the arrow keys to navigate it. I understand that it might not be very intuitive, so I added a pop-up warning.
• I also added a few more tracks to my song app along with a scroll bar.
• I implemented some suggestions from the reviews, like making the window offset at the centre instead of the top left and it has made such a difference. I also understood I was repeating myself a lot in the code as someone pointed out. I’m trying my best to be mindful and code effectively now!

In the interest of transparency, I was making a weather app that could check your weather. I ran into a lot of issues on the first half itself. I spent a lot of time trying to fix it. At one point, it messed up all my other code, so I had to delete it. At least an hour or three was wasted in that. I feel like it’s a bit unfair of me to count that so I’ll turn off my tracker the next time I code. Idk, it just makes me feel like I’m cheating to count those hours when nothing really came out of it. Anyways, here’s the progress pic!

What I added:

• I really wanted to make a music player next, so that’s what I set upon making. I already knew that I wanted to make it look like an iPod. This app now can mute, skip to songs on the playlist, show you the menu and pause. It will also play on the background while the app is both open or closed until the song is over.
• Next up is a POST-IT app. It create multiple post its, change colours and has multiple formatting options. This was even more fun to make than the music player lol. My icon accidently hides behind the ipod icon, so I do need to fix that. Its pretty straightforward but I feel to lazy rn.
• I realized that if I were to keep making more features, my page was going to look really cluttered. I thought of adding another sidebar but decided against it. I instead made two buttons under the sidebar and grouped all my apps into two. So, when the current group is active, the other app icons are hidden, and by clicking the next button you can see the next group of apps.
• This is your reminder that you can make art with anything- even with a limited colour palette. So why not make it on my webOS? If you want more options, I just added an opacity slider and an option to choose your own colours.

Major Update

• When I first began this project, it was a really basic idea. I felt no motivation to continue after the initial structure was created. For the past few days, I was brainstorming on how I could possibly make it better. I finally found something that made me excited to work on, and decided to integrate it here. So here goes-
• Most of us would all agree that space is cool. Satellites, rockets so on and so forth. I for one would love to learn more about them if it wasn’t so intimidating. Take the ISS-when I downloaded an official NASA guide about it, I got overwhelmed by the disjointed diagrams, had no clue where everything was and took away a vague understanding of what I read.
• This is where this project comes in- a rotatable and zoomable model of the ISS, with interesting, bite-sized information that you get by clicking around. When you’re done exploring, you can take a quiz if you so wish.

What I did

• When I first downloaded the model from the official site, I thought I would begin with renaming all the parts. That didn’t work out, as most parts were joined together and had overlapping sections. I then found out about google model-viewer.
• Once I found out about that, I realised I could import the mode there, create hotspots and copy the coordinates of the dots to create buttons. I would highly recommend model-viewer by google, as it was so much easier to navigate as a newbie.
• I then put my quiz structure in a comment to deal with later and began marking hotspots. The first one went beautifully, but the second button did not deign to show up. I sat there troubleshooting for so long, trying everything I could- importing new coordinates, cutting my code, changing visibility. Nothing seemed to work. The best I managed to do was this:-
• I was frustrated beyond belief, it had been hours. I disabled my waketime, at that point it felt like it was taunting me. Went to bed, before school I looked up the official instructions and finally found what my sleep-deprived head was missing. I had my buttons in the div container, but the hotspot coordinates in the buttons container. My hotspot was meant to be in the main container, the div one. Once I fixed that, the button finally showed up. I felt sooo dumb but so relieved too. Here’s what it looks like now:

And….yeah. #Gotobedontime #Ithelpsyoucodebetter #regretovermylackofintellect

So this project is finally ready to ship. Sorry for the formatting on the last devlog, I didn’t realize they added Markdown. I’m sure that must have been a nightmare to read through!

What I Did (Final Touches)

• I felt the buttons could use some pizzaz so I changed the background to black, the text and the border to orange. It looks so much better! Check out the calculator, it looks amazing now.
• Finally, I added a small animated pixel sprite on the bottom right of the screen. This sprite is just pure randomness personified. I had so much fun picking it out.

—

I created my GitHub repo and edited my README to look a little better. When I generated the link for my webpage on GitHub Pages, my top bar was cut off!?!? At that point, I was genuinely so frustrated. It wouldn’t fix no matter what I tried. In the end, I just generated a new link and it somehow showed up!? How? Great question, I have no idea.

I’m so glad I finally finished this OS! I never got around to thinking of a name so it’s just gonna stay as Cyber-OS lol.

I really never thought I would be able to make this, even when I started with the mission. I’m glad I stuck to it. Thanks for following along with me! Go check my OS out yourselves!

Cheers!

What I’m Making : A custom web-based OS that I’ve taken to calling Cyber OS (cool name pending) What I’ve Done so Far: –So today might not have been the most productive day in creating something new per say. A lot of my time was spent refining features already available. Case in point, today I 1) Changed the content of one of my applications from interesting proses to words instead. I do maintain a list of obscure words, so it was really fun to pick which ones made the cut 2) I changed the canvas of my painting application from black to white and muted the colors available to fit my theme more. 3) I fixed an error in my calculator that involved exponents. I also changed the display to be slightly more neater. 4) I created an application to alter display settings. Most of the filters available are inspired from those old televisions, those really chunky cathode ray ones. I didn’t quite do it justice though I do think I might ship this as an initial version when I get the time. Not really sure about it, I’m really indecisive. Anyways, here’s the customary progress pic!

What I’m making
-So I’m actively working on a custom built OS that I’ve been calling Cyber OS because I can’t think of a great name yet. I plan to make applications?/windows? for my hobbies, which are pretty wide ranging. From art to math to literature, the goal is to have something for everyone.
What I’ve done
-Quick recap, I made an information window, drew the background, and made a scalable code for closing and dragging windows. I then created my first app that is a small archive of phrases that I came across while reading that I particularly liked.
-Update time! I made an application for drawing. It has eight colors, undo and redo buttons and a feature to change the brush size.
What I struggled with
-This time I had more of an issue making the code by myself. Most of the time was spent debugging tbh. I had a really major issue with the colors not showing up on the canvas. It was really a learning experience fixing that. I also realized that the brush slider just made my entire window move. So I changed it to an number input based thing. I ran into a few issues with the slider too, but managed to solve it relatively quicker.
All in all, I’m really proud of all the progress I made.
Cheers!

What I’m Making
-A web-based OS that I’m calling Cyber OS currently. I’m a person with really diverse interests, so I’m creating something that will hopefully spark your interest too.
What I’ve Done
-Major style updates
-Drew an app icon
-made a draggable and closable window
-connected the app and the window
-created hover effects for each button
-organized my code
Next session I’ll probably begin creating the next app. I also want to make a task bar of sorts. Despite doing my best to keep my code clean its really messy rn. I’ll build the app in another file and then bring it over to my OS. Overall a really productive day, but I’m pretty pleased with the results. The progress from my previous logs is really visible. I’m knackered though, so I’m off for the day.
Cheers!

What I’m Making
-I’m working on a web-based OS that I’ve been calling Cyber OS (cool name pending)
What I’ve added
-a top bar
-an active clock
-a draggable and closable information button
What I struggled with
-I made a few mistakes with naming variables, which took me a lot longer to identify that it should have.
-I couldn’t figure out why my page was a little larger than my screen. I kept having to scroll. I deleted a few lines of formatting and re-wrote it. Didn’t really work out. A second of googling later, I found out about the overflow button?/function? Phew. That was a relief.
Cheers!

What I’m making:
-I’m working on a Web-OS that I’ve named Cyber OS.
What I’ve done so far
-I created the welcome box and stylized it
-Drew a wallpaper for the background
What I struggled with
-Mainly I had a bit of an issue with Github, because I couldn’t figure out why my time wasn’t logging when I was coding in an active workspace. Eventually I decided to copy the code I wrote to my VS editor and upload the project in Github later. I did loose around half an hour but uk….you do what you must.

What I’m Making
A web-based quiz on space. I’m a newbie, so the first version will be really basic. I’m planning to create different levels of difficulty, a score tracker, hand-drawn animations and fun fact pop ups.
What I did today:
-Major style updates. I had a lot of fun with css. I really adored playing around in it.
-Accidently created two different loops
-Accidently broke out of one of the loops
-Gave up on the second loop for the time being
-created a score tracker
-animated a gif on flipaclip to attach
If you have any resources that you feel particularly helped you learn Python or JavaScript or any other language in general, do recommend them.
Cheers!

What I’m Making
-A web-based quiz about space. I plan to make it as sleek and professional looking as possible. The final version is meant to include: different modes (easy, medium, hard), a score tracker, animated transitions made by me, and fun fact pop ups every once in a while.
Where I’m At
-I’m a newbie to coding, and with a bit of effort I’ve managed to make a WORKING!? (I’m as shocked as you are) web-quiz with a grand total of 5 question! cheers weakly in exhaustion

What I Struggled With
-Slow Typing (uhh my skill issue tbh)
-Naming/Spelling consistency (I made a mistake that took a really long time to catch hold of. I basically had two undefined functions because I made a mistake while naming them. Pay attention to what you type, folks.)

Conclusion
-This is my first ever programming project and it seems really intimidating. I’m somewhat happy with what I’ve made, but a little disappointed that it doesn’t look exactly like what I’ve hoped. I’ll work on it tho!

• If you can, do recommend all and any resources you utilized to learn any programming language, particularly JavaScript or Python.
  Cheers!