What i did

✦ I added gain flickering to the audio in the background and made it interactive with the scroll animation
✦ Trying to fix my github repo LOL i don’t know what i have done but im pretty sure i messed up the commits
✦ Fixed some bugs with the opacity and made sure stuff wont break when scrolling
✦ Made so that the animation start when you click the statue i don’t know if it’s noticable i’ll see what i can do

Changes i’m considering to make

✦ I might also add a scroll feedback on the right so that the user knows when to stop scrolling to see the animation how i saw it or how i intended it to be
✦ I might change the animation start button because i don’t think people will notice that you can click on the statue
✦ Also i’m still thinking what to add to make the mouse interactive with the scene I’m not sure it’s gonna be the lighting or something in the shader but currently im trying to merge the files together so i can finally finish the project and make it ready

Changelog

• /THE/32ba6fb

Fixes

✦ so i had tons of problem starting with the scroll trigger container it had a problem is that i didn’t understand how to works excatly but i figured it out
✦ i had prblems with the animations they weren’t the best and the fading of the sphere sucked i spent quite some time fixing those

Improvments - features

✦ i added this cool flickering effect i kinda got the idea by accident i broke my gsap transtions one time and i saw the flickering and i liked so i added a math.random to the opacity value
✦ Didn’t do much actually except for fixing the problems and optimizing the page
✦ i’m getting the page ready so i can add the oscilloscope visuallzer i made earlier

Changelog

• /THE/6105080

The new visualizer

✦ I spent sometime trying to understand how everything works but i gave up lol i tried to use a shader i got online i’ll credit the person in my repo but it didn’t work quite how i wanted it so i asked chat gpt to write the shader for me he gave a good one but i still had to edit the render frame rate to make it look smoother

What i’m trying to do

✦ I’m trying to add a midi keyboard or smth similar I might not add to since i want to get the fundamental done first i still have to integrate the homepage file with the scenes file
✦ I still have the last scroll trigger animation to make it’ll be this visualzer

Learning

✦ It’s somehow complex but only because im trying to write code without planning i might try and wrap my head around this but after i finish because i really wanna get this done
✦ One of the coolest stuff i have ever encountered is the web audio api it’s freakin amazing thought not the best i have some knowlenge in music production so it’s decent

Changelog

• commit/a86d3cb

New stuff i’m adding

✦ So I have created a new file where i’ll be creating my next and last scene hopefully It’ll be a raw visualizer oscilloscope
✦ I also might add a new statue i found what i want to add it’s a statue of david michelangelo im not sure if i’ll add it or not i might not like it but i’ll se

Learning

✦ I’m learning more about audio buffers and audio samples and how digital audio gets recorded and how The Fast Fourier Transform work
✦ i have been watching some content on youtube to get a better grasp at this but it’s not easy tbh I’m also asking chat gpt to simplify things like this and how exactly they work
✦ Getting better at three js and learning more about geometry it’s actually my first time understanding how cameras work in 3D which is AMAZING!!!!!! It has math involved and i just love it
✦ Learning more about shaders since I’m using it almost in everything i’m also using someones tutorial to write the visualzer shader im gonna depend on it untill im ready to take off on my own I’m trying not to just copy and paste their shader i want to understand why it works and how to build it from scratch
✦ First time hearing about fullscreen quad and it’s basicallly A way to make three js render a 2D screen, it’s basically a plane that fills up your whole screen whatever you do and a lot of new stuff i’m learning along the way and i need to finish this project asap!!!

Changelog

• commit/42bad4c

Upcoming feature

pheew so im trying to make the extention more dynamic by integrsting an api with it
i have tried multiple approach but i think the best solution would be that i redirect the user to a subtiltes website and when they download the file i automatically store it
I have tried a couple of apis but im using only one now
also im trying to improve my css but im real bad at designing

Fixes

• a lot of bugs in youtube I tried to fix most of them i made my extention run when the browser is idle it was loading before the document loads but i forgot to change that when i was testing
• I discovered that the extention
  wasn’t working well on youtube because of how i
  inject the content so i optimize it by checking if
  the url id changes i inject the overlay again but
  keeping the chrome event listeners the same
• I also changed the font of the control panel and adjusted the color selector fixed its position too it wasn’t centered
• I commented my feature because i still haven’t gotten to it yet since i was trying to fix the extention to work again i got rejected because it wasn’t working so i hope it’ll work now
• Also fixed the subtitle delay displayer it was showing nothing when you first use the extention because i didn’t set the var to 0 if it was the user first use of my extention
• Made so that when the user pauses the video it shows the subtitle file name so he knows what file he currently has embedded but i might change that i didn’t like it much but i needed it

Changelog

• fix(windowpopup):I fixed some css in there like
• Opps pushed stuff im testing uncommented
• feat(popupbackground):trying to add a search

Improvements & Architecture

✦ Added a loader for the admin page and orders page
✦ Changed and imporved the dark and light mode css (It’s still not the best)
✦ I changed some response messages so stuff don’t break at the front end
✦ also there was a small problem in the backend regarding the token auth

Fixes

✦ i fixed a logic problem when checking out
✦ fixed a problem with the navbar animation at the login page
✦ Fixed the home page animation so it runs only when the user refresh

Changelog

• feat: add loaders, homepage animation & better login

Improvements

✦ I have upgraded the checkout page and made checkout easy to follow
✦ changed the colors of most of the button
✦ I added an animation to the homepage
✦ added a notification animation for the “add to cart” button
✦ also removed a whole section that was just empty i was gonna put info about the website in there but it’ll be for future updates

Fixes

✦ fixed a problem with overlapping navbar panels
✦ made so the user scroll state is saved

My comment:

I just improved the whole thing overall and fixed some stuff someone told me about :)

Animation

✦ Added a preloader when opening the website with dynamic params
✦ fixed my cart bug i had to refetch and cache when user logs in
✦ polished the css for someitems

COMMIT

#NoNet29ea8bf77042e490e92ba6e4b2ce436121fdb436

Huge improvement

✦ Changed the whole login-signup page design
✦ I added a scroll trigger animation using gsap and the hardest part was getting everything working together and trying to position the phone was quite a difficult part too
✦ what made me change the login page was that i didn’t like how to looked and it wasn’t working well on safari because safari struggles with css layout changes and messes it up
✦ and actually getting the Quaternion rotation to work was hard too a lot of gliches and unnecessary stuff that happened
✦ I still have no idea what is Quaternion rotation
✦ downloaded some fonts and tested them until one clicked

Fixes

✦ i spent a lot of time adjusting the css for the navbar and the text in there and having to change the login page not create one from start was even harder
✦ I spent some time trying animations and rotation for the phone i stuck with this one

Fixes

✦ My project now works on Safari since they use a protocol that prevents me from saving auth cookies ;) )
✦ I built a jwt authentication system in addition to my old session-cookie auth system
✦ i tried fixing an animation problem on safari but couldn’t so i might change the animation
✦ I’m using a website online to test my website on safari browser which is great to debug but im still not sure if my website fully works on safari

Technical things i added

✦ added a scroll trigger animation
✦ added a scene from one my visualizers
✦ changed the shader of the homepage’ background
✦ styled the nav bar (Still not finished)
✦ a failed attemp trying to add my scene as a texture

I hope this’ll look great when i finish it because it’s good so far

Stuff i learned along the way

✦ Not my first time using gsap but this is the first time me using it with a clarity i’m using their docs to understand how everything works
✦ Made a bit of research on scroll triggers because i didn’t quite understand exactly how they work
✦ Getting better at memorizing tailwind syntax lol

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

✦ I have used a noise function to get this cool look
✦ I’m still trying to improve the overall homepage
✦ Fixed some light bugs

CURRENT TASK

GETTING THE HOMEPAGE READY FOR INTEGRATION

Final commit

Optimization (26 minutes)

• i made sure everything was working fine for the last time
• optimized the css layout so it’s positioned the correct way every time
• Made it so the subtitles resizes itself to the screen every time the user scrolls or resizes the window

What i learned :)

✦ I liked this project a lot though it’s not the hardest or the most unique out there but i enjoyed it because i built it to solve my own problem and it was much fun to reverse engineer extentions and this is my first time ever building an extention so it has been a great journey
✦ I learned how to build extentions which is obvious
✦ Learned how to interact with chrome api for extentions
✦ I also didn’t know much about iframes and video elements in html which was a huge thing for me to learn
✦ Learned more about how streaming works in youtube and different streaming websites since i was reverse engineering stuff they use small packs of video and send it back and forth
✦ Learned how to handle stuff step by step and get a better understanding of how things work

Tech used

✦ I used javascript to build this project with a bit of html and css ( I didn’t vibe code the extetnion popup) which was the funniest part lol life hasn’t been better
✦ Chrome api and i used my knowledge in backend to actually get this to work it’s similar to full stack website

Improvments (1h 38m)

• It works on Youtube now lol i definitely didn’t think it was gonna be this easy to hack youtube pages but it turned out to be fun
• i even changed the code so it works on any website with video element inside of it
• edited the design a bit
• Maybe i should add more font control to it but i still don’t know if anyone will find it useful other than me
• fixed a problem with youtube the overlay kept escaping the video container

I’m so happy with this because i thought youtube was impenetrable and stuff but it’s good to know that we can manipulate content on youtube this opens a lot of doors

Fixes (43 minutes)

• added responsive to the subtitle controls so it’s working on smaller devices i kept changing the width and height and make sure it’s resizeable
  and i also spent some time on my phone to design the blueprint for the logo i made it with the help of ai but thanks good they didn’t ruin it My prototype for the logo sucked anyway

Insertions

• I created an icon to the extention and spent some time trying to get it to work ;_ i made the 3d blurprint for it and after that i converted it to a 32x32 png to add it to my project file

Instruction code

• I added this to guide people to the button functionality since no one knew how to use the button i got rejected a lot for this
• I deployed the project to github pages
• I also used gsap to do the text animation
• added a glow effect on the button it was pretty hard since i hate css and designing in general
• I’m trying to make things intuitive for whoever will use this i hope it all good now

Architecture

✦ Added cash on delivery button
✦ handled a backend logic error
✦ fixed the order page buttons

Updates

✦ updated some css in the homepage

I keep getting rejected for small problems but i hope the project will be approved soon

Edits

✦ I edited the home page css because it wasn’t responsive when you toggle between categories
✦ I added the Adminstrator access code field and handled the backend i had to fix this more than one time because i forgot to remove the displayed attr from the input element loll
✦ Added more text to the mouse cursor hover animation

I tried to add transition between pages i had it in an old project i tried to integrate it but failed

Nothing much (25 minutes)

✦ I have added more texts to be visiable inside the blur animation for the mouse cursor hover i keep doing this a lot lol

SOOOOO

✦ I made sure to try other websites to see if the extention works and it did
i tried it on the website i use to watch tv shows and made sure it works even in the worst situations like on mobile phone and it worked fine and i also tried it on similar sites to the one i watch tv shows on they were working too since they all use iframe or element

Implementation

• I have added a control panel to control subtitles layout and delay and it took so much because i handled delay in the wrong way at first i was storing it in my js file in a normal var but now i’m using the browser storage to store delays and make it so that it works even if you refresh the delay state will still work
• changed the design of the extention a bit i didn’t like the old one it wasn’t even a design but i like the new one it has a simple contrast to it and i love minimalism
• Spent a lot of time to make sure the content.js-control panel messaging system works and delay and everything else it had a lot of issues because i didn’t understand how things worked but it was much harder to fix the bugs than to actually learn how these stuff connect together

So i saw a video on instgram with impeccable vfx and he did something like what i did here but i still haven’t got to half what he did
○ added these visualizer with planes geometry first
○then changed it to buffer geometry
○i spent the 7 hours doing this and trying to fix my post processing effects but no luck till now
○I experimented a lot at first with planes geo and different noise functions

I have added statue text and description for the statues i watched a youtube tutorial for the layout of the text
im also trying to get the lighting right i haven’t thought what it’ll be like
I’m planning to add a particle visualizer but a crazy one

What i did

• I have changed my design it’s terrible either ways
• spent a lot and too much time doing the delay thing with the event listeners but they didn’t work
• made the delay work with a button
• changed some stuff in the structure of my code and how i handle subtitles so the user don’t have to reupload the subtitles every time they refresh

HOLY MOLLY

• So i started this devlog session with reverse engineering an extention called subtital it’s similar if not exact to what i wanna do im building mine for phones though,i have spent maybe the first 5 or 4 hours debugging and scanning their code trying anything that can help find out how they do it after a lot of suffering

• i found how they did it and then kept going back and forth with chat gpt to help me implement it and finally i did it and i’m still going to finish it up polish it but it’s almost ready but DAMMN this was tough and brain melting stuff. here is what i have come to

So I used figma which I’m not used to do normally but I found it hard but practical gets things done faster and here is the things I did:
▫〇Designed the page first on figma
▫〇 I had a hard time implementing the design to my website
▫〇 the two audio players are now working
▫〇wrote the tasks I have to do next time

sorry for the mess but i’ll improve the UI later
▫〇 found an opensource api (streams full audio length)
▫〇 filtered results so that there’re no duplicates
▫〇 adding helper elements

Learning procces

• I know nothing about web extensions so i spent most of the time debugging and trying to make the code work there’s a lot of stuff it’s my first time hearing about like background workers and content scripts and a lot of unknown territory but extentions turn out to be normal css and html and java script im using chrome api to build the extention so it probably won’t be the best choice since it won’t work on all browsers but i’ll see im also using mainfest v3 which is the tech behind the extention

Algorithm writing

• i wrote the code that deconstructs the subtitles file and turn it into segments it was a bit hard because i didn’t even understand .stl files it’s my first time seeing them but the algorithm building was straightforward since i built a telegram bot before and it had a similar approach to this Algorithm
• i connected my background worker with my content script and the popup input listener and it was messy as hell things kept breaking but don’t mind the design it’s just a place holder

pheeeeew that was tough and still is
here is what i did:
▫〇 I set up both backend and frontend (express + React)
▫〇 I set up the backend to handle spotify login , spotify data fetching and session-cookie auth
▫〇 I build a basic frontend to test things out like getting spotify tracks and artists
▫〇 i spent maybe one hour debugging why sessions weren’t working out but it turned out that my backend and frontend url wasn’t matching up (localhost,127.0.0.1)

here is what I’m gonna do:
▫〇 hopefully i’ll find a way to put full length songs on the websites i don’t know how i’ll do it maybe use soundcloud for the tracks or any public songs website with full length audio fetching
▫〇 improve the frontend like a ton cuz i’m not really a frontend developer so what i have rn is complete garbage

● Experimented a bit with planes and vertices and textures to understand how geometries and UV mapping work which was terrible and i didn’t really understand a lot

● i have added these two arrows that allow you to switch between statues , im still polishing them and making them work properly

●i have tried to add a mouse raycast to control the light but failed miserably so i’ll give another try late

● spent some time changing the camera position and lighthing position still working on it

Fixes and improvements

✦ i added this menu dropdown for mobile phones

✦ also fixed a problem with logic behind the animation in this dropdown

✦ i added more texts to the cursor hover
✦ I had to fix some stuff in the menu drop down js file i keep them in an array of objects so i had to add some more properties to them so it’s convenient

i tried a couple of things i tried to attach scenes to planes to make some kind of a room full of scenes but that didn’t work out but anyways i spent sometime figuring out how to adjust this navbar with this sine wave visuallzer using math i made it It’s wasn’t hard but i had to handle when the user pauses the song and start it again
the sphere kind of room i couldn’t do that as it was hard to render the scenes as textures and had a lot of problem with the geomtry of this anyway

Deployment

✦ I deployed my backend to heroku using the cli
✦ Pushed my new version to github pages

Fixes

✦ fixed the footer positioning in all pages i actually added it to the other routes because i only had in the main route
✦ i fixed some bugs with ordering and admin dashboard
✦ I also thing something is quite wrong with the payment method the cod and vodafone cash don’t work well and sometimes makes the backend break

here is what i did:
● i have adjusted the lights still not finished
● added a sphere i kinda want to make my scene attach to the sphere surfuce so user can toggle between them and im still figuring that out
●i added helpers to everything so i can visualize and edit and move stuff around in real time

So i have been trying to set up a testing environment so it’s easier for me to move the 3d objects and control light settings and trying to find the best place to put the camera at and i have imported two greek objects im inspired by a project with similar statues but im doing my own thing and i have added light control using gui and yeah i hope i don’t mess this up i might change the staues in the future
i downloaded these statues online i found them after a lot of strugle
i added rotation to the statues and will add position transtion in the future three js is just great and have infinte possibilities

I’m experimenting with three js and reading the docs trying most of the things to understand better i didn’t do much except trying things and different lights on object the cube attached this wasn’t the only thing i did but i kept trying stuff i also removed the old curve stuff because it didn’t work as expected and was just too complicated

So things didn’t turn out to be the way i wanted it to look so im thinking to just start all over again and maybe learn the basics again. im trying to create a landing page something creative i dont know what i’ll do yet
i tried to add my scene as a texture but i couldn’t so i would have to add the actual meshs inside these scenes but that will overload the website since i have some heavy scenes im having fun experimenting with this but I dont like the results yet

So i created a new file in this project just to start fresh
I’m trying to create a transition between different scenes it’s hard because i don’t know what i want to do
i have struggled a lot with applying this i still don’t understand a lot of three js works i have to dig more in their docs but
I removed two features from a scene and added this path this will be the homepage , these rings are going to be my scenes and you choose which one you wanna enter but i hope this would work i don’t know how i’ll add my scene to this curve it might even not work

improvements

✦ i added lights to the scene and adjusted the position for it
✦ I made sure the html form stays on top
✦ It wasn’t easy since i haven’t used three fiber a lot
✦ I finished the transition and kept changing things
✦ my idea is kinda there but still im not satisfied i might change things in the future like the bakcground and stuff but whatever
✦ i also added a footer with this font i like it looks great i think it has a cool sense to it

Learning new tech

✦ I know it doesn’t look good but i’ll try to make the transiton controlable with a button or something
✦ I don’t like how it looks but i’ll settle for it for now
✦ I used the width and height property of the login form to make this fill animaton
✦ I’m working on the login and signup page im trying to create something unique
✦ i have this vision in my head that’s what i want to do.I’m learning a lot of stuff all at once (react fiber, gsap, and 3D things in general)
✦ i created a text file where i’ll keep my tasks written down in the future so it’s easy for me to follow up with what i need to do

Development

✦ I have added this little cursor texture kinda like an iphone theme
✦ I downloaded this iphone .glb file online and added it to my scene i’ll add lighting and change the scene background and i hope it turns well
✦ im experimenting with 3d to make a 3d login form where the phone comes at you to login like a transition i’m watching a yotube tut soon just to figure out how to make this thing happen :)

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.