@smollcoin

ok more vue
this time i upgraded and used a UI framework , NuxtUI which i lowkey am regretting

so for the past 6 hours, i:

• did the header
• did the footer
• set up git
• set up i18n for translation
• set up email form so it works

i had a lot of troubles with the footer because the slots weren’t sloting !! the headers of each columns weren’t aligned properly which pissed me off. i ended up only using the #top and #bottom slots.

probably the final devlog

• i did some small animations!! i saw a youtube video about framer motion and i decided to try it… i like its declarative approach and usage of animation props!! so yum

• i also made a context manager i think thats so cool too

• i made a guide app for people who may need more guidance in navigating the app

• i added skip and next buttons for my music web player

yup!

ok
made a calendar and a countdown to the next epikcase youtube drop…
apps now can be resized in every direction!!!!

that was challenging for me.
i don’t know it was just hard to figure it out
thank god theres no rotate function or else it would probbly be impossible to calculate

im gonna put in animations and sound effects now… maybe a loading screen too

i would love to put a video but i keep getting bad gatway error due to my slow internet connection

but i styled it and added a few more epik high albums! and theres even a cute gif when its in a loading state because i did not want to confuse users. i also did a bit of restructuring and divided them into smaller components…

what ive done

• logic for the music player

1. when i first started this i thought it wouldn’t take long but it did… and i haven’t finished styling yet so it looks really bad…

2. so why it took so long was at first i tried searching up to use spotify, but realised only premium members can select track so never mind…

3. then i considered storing all the songs in a file storage server but i felt bad downloading the songs so i explored other options…

4. so i went to search up how other WebOS does their music player and the ariana grande one used the youtube API so i looked into it… thanks it worked!!

5. ok so after it worked, i tried to separate them into composable and smaller components because it got too messy on one file and that’s where i spent so much time on this…

now im gonna style this better…

yay

updates:

• terminal app with 9 commands and good formatting!!
• you can upload custom wallpapers now!!

i now know how to use the pre html tag… wow.
also its my first time trying to setup a terminal like app that includes cycling pass through past commands and displaying output histrory correctly.

there’s like a bug that doesn’t automatically scroll down towards the bottom and that makes me sad because i can’t fix it but other than that i think its good hehe

i am so happy

what has changed:

• settings app with dark and light mode and can change background
• new start screen
• new cursor

i feel so delighted when the dark/light mode thing worked because embarrassingly i have never successfully implemented one before

dang i lost my streak
but yes i made

• notes app using tiptap package
• gallery app but its more of a scroll thing
  enjoy

i will work on a start screen and then… maybe one more app…

i built a browser app with two tabs! and the links are their stuff on another page!
i also showed icons on the desktop using grid css because I may want to make them organizable in the future…

ok it really is coming together (very slowly)

things i did:

• desktop now renders open/maximized windows on screen
• dynamic modal positioning for search and calendar
• fullscreen toggle
• adjust wallpaper images (lowkey the hardest part i can’t seem to find any good high quality landscape pics and i am too lazy to edit one)

i was so happy when the windows appeared i can’t believe that i could do this !!
now i need to list out the icons on the screen and make all the APPS!!!

things i did:

• rewrote useDrag logic to use the useAppsState file and limit dragging only in the viewport
• wrote useResize logic (only can resize one way because i suck at it and im not motivated to do this)
• define useAppState, wrote function to modify for useAppState

i think i have it figured out… it should be in a global AppsState kinda thing. At first i tried separating them into app info and the state of it eg. open closed, size position etc but i got confused so even though its not good practice i just… smashed them all together

i feel im getting impatient / losing motivation for this project but i don’t know…

this is so random but v-bind is so insane as a beginner vue developer omgomgomgomgo-

gang i wrote so much but there’s an error so it didnt get sent im gonna cry. not very epik yet but give it like 10 more hours

i did:

• styling
• finding images
• making windows draggable
• designing bottom dock but it still can’t work yet

challenges:

• sigh im a little rusty in programming in general
• not sure where to put the app state and what information so i struggled hard with that
• unfamilarity with vue