Fixes

✦ There was a problem with displaying the new search results over the card subtitles results i forgot to delete the subtitlels cards before appending the search result which was easy to fix tbh
✦ Had to change the rest of my class names because it was over ridden by websites which was annoying because i know i should have handled this better from the beginning ‘-’

✦ Removed most of the console.logs or commented them i think this is unprofessional of me to keep them there so i removed or commented them and removed my tasks.txt file lol
✦ also had to fix stuff like adding a ? before accessing object keys so if it’s undefined it doesn’t cuz errors
✦ I added a feedback text for how many donwloads there are left i think i talked about it in the last devlog
✦ I fixed some css stuff i usually use the devtools to fix these things and then copy and paste these changes because i don’t want to reload my extention everytime i make a small change
✦ i also spent some time testing everything in different websites that’s how i knew that these problems exist in the first place

The Initial Message

✦ I have added an initial message only if it’s the user first time downloading the extention and i kinda got the idea for this message thing from hridya from his flavourtown utils ext

✦ I used chatgpt to make the design for the message cuz i needed something fast and functional i edited some of his styles tho and changed the box shadow they gave me
✦ It closes when you click on it or press ctrl + b which is the shortcut

README.MD

✦ I had to use preview websites because i needed to see what im doing but then it turns out i could have just used github preview i realized that too late and also added these cool badges

✦ I updated the demo video and linked the badges to my github profile and release link

I Messed up

✦ Turns out i should have used chrome.storage.local directly from my content js i don’t know why i used the background worker to store that but i’m learning why not

✦ also i should have used another shortcut for the customization control panel and made the panel a normal div element and added it in my content js but i didn’t do that i have used the worst method to display the panel
✦ i basically made the panel a new chrome tab and it gave me a looot of headache but i didn’t know that i shouldn’t have used it when i started because this is my first time building an extension

Trying to record a new Demo (Found new bugs)

✦ I had a lot of troubles trying to record the demo as there are a lof of things that could go wrong anyway i edited the demo video using my phone
✦ I found a problem with the connection between the control panel and the background to the content js
✦ i used chrome api to detect the active tab so i can use that to connect the Customization panel to the content js subtitles but there was a problem which was if you had two chrome windows opened they both have seprate active tabs so my code always took the first active tab which was the wrong one
✦ I made it so that when the user clicks on the open control panel button it saves the current window id which is the window the user has focused at that moment and then when i send messages to the content js i use that window id to get the active tab so stuff don’t get mixed up

Changelog

• Sub-Extension/commit/81becbf
• Readme update and removing the task file
• Sub-Extension/commit/3d165f8

Optimization & Fixes

✦ I have fixed my panels search input when it’s now working ✦ also I have fixed problems with the caching
✦ There was a problem with the language filter because I separated my code into two conditions one if the Data is TV shows then add all filters but if they’re movies add only the language filter but I forget to append the container of the filters element in the case where it’s a movie
Fixed a problem with the Nothing found label it wasn’t working
✦ I hadn’t set the movie search for the panel in the last devlog so I did that and made sure it’s working i was testing on youtube this what made me realize that my id and class names were overlapping with websites
✦ removed the console.logs i used for debugging and also changed the readme a bit i’m gonna preview it and maybe change it again so i can add the new stuff i added
✦ Changed some stuff in the styling of the control panel of the subtitles
✦ Added a feedback text when you inject the subtitles so you know whether it worked or not and i also might add a display for how many remaining downloads my api key can make so the user knows if it’ll work or not

Upcoming

✦ Considering doing some final-touch changes improving the styling maybe i’m not sure yet
✦ I definitely need something to tell the user that there’s a shortcut for the search panel because i haven’t done that and might add somestuff to the popup cuz it looks a bit ugly with the search thing

What i learnt

✦ i learnt more about the chrome api and how everything works i’m still struggling a bit to wrap my head around it but it’s not that hard i wish i started the right way and actually spent some time learning before i started the project but i could have not started the project if i waited to know everything first which i’m happy about
✦ I definitely didn’t know that i could do this when i first started but now i feel like there are fun stuff out there we just have to uncover them lol

Changelog

• Sub-Extension/commit/8b490b9

Search Panel

✦ This is kinda the big thing that took me all of this and i kinda found myself immersed in it and spent triple that time fixing problems
✦ i spent 5 hours without noticing i would have devlogged more but i got annoyed because i had to fix a lot of stuff and had to go through all of my old code to figure out how i was gonna make this .
✦ Sooo it’s a panel you open with ctrl+b (i’m might let the user choose the shortcut) it’s basically a panel so you can search and inject subtitles faster than the extention popup i left the extention popup there too they both use the same storage so they’re linked.
✦ I’m using the background worker to fetch the data for me so it’s easier to manage and store data, i have a lot to learn lol the browser api got a lot of stuff im still trying to understand.
✦ I basically copied the search element from the devtools that was in the extention popup and pasted it in the page content itself and edited the css until i got what i wanted and then used that css in my code.

Backend Deployment

✦ i deployed my backend to heruko becaseu i’m closing in on finsihing the project the final touches and fixes are just left
✦ i feel like there’s a lot of stuff to be fixed but as long as my extention works correctly im happy with that

Improvements

✦ Changed the subtitles card thing css styling because it looked bad i added svg icons so they’re user friendly and also changed the color of some stuff too and used coolors.co to help me with colors that fit together
✦ Used a var for my backend url string so i don’t have to go through every fetch manually after deployment

Ongoing stuff

✦ the search isn’t working right now inside the panel which is im trying to fix atm but it’s taking longer than normal because i don’t know what the issue is But i think i’m going in the right direction

✦ After that i’m gonna go through my code again to make sure i won’t break my extention im also gonna cache the data the panel will fetch because i haven’t settin that up yet

Frustrating things

✦ I don’t know why it’s taking me so long to do all of this but that might be the annoying part i enjoy it as long as it’s working but what can i say
✦ Also my code is a complete mess and a complete hole of dirt and mud like literally it looks like a mountain of suffering

Fixing

✦ I fixed the class,id names because they’re overlapping with websites’ elements because i literally use the simplest words when coding
✦ a lot of stuff break to the point i can’t remeber what i fixed, the searchinput element eventlistener wasn’t working correctly and also i was using document.body.innerHTMLwhich broke too much things tbh
✦ there was a lot of case edges where the extention broke so i had to add more coniditonal checks to prevent that

Attached a photo i forgot to attach with the last devlog lol

Changelog

• fixing my injected elements id names and class names so they dont overlap with websites elements
• Sub-Extension/commit/a4a3ad0
• Heroku deployment

Fully Working Now

✦ Finallly the main functionality is now workingg the inject button is working and now you can directly search and download subtitles to the extention without having to go anywhere or do anything
✦ i spent some time debugging a problem i had to use postman to send requests to see what the issue was, it turns out i was passing the wrong param as usual

Backend

✦ I set up the code for the download route to fetch the download link from opensubtitles website, I love backend work but i detest something called frontend

Going Over My Logic

✦ I used a drawing website on my tablet to write my logic and go through it because i had trouble fixing my code and i told myself why not try something new to help me solve the problem faster, i used a random website but it was pretty cool tbh
✦ There was an error with how i used a var before initialization fixed that one too and i hope i preveted anything else from breaking too

Debugging

✦ I didn’t take much debugging this time but at the start i had to , i fixed this problem with the var initialization
✦ i also added caching for the episode and session select values to prevent confusion, wrote the code to call the background worker to fetch and send the subtitles data to the content js
✦ I fixed a problem with the subtitles control panel it wasn’t showing the initial delay value when opening it

Future Plans

- Considering to change the styling for the subtitles card for sure
- Might add a shortcut for the search and subtitles inject panel so you can open it without having to click on google chrome extention tab

Changelog

Sub-Extension/commit/9760c92
Sub-Extension/commit/a233133

Bugs

✦ I have spent a lof of time trying to debug a problem but it turns out to be a problem with misspelling a word in the backend
✦ I though there was a problem with the fetching which turns out to be true the api isn’t accurate when it comes to searching movies or tv shows by the name of it (I’m using the imdb id to fetch them)
✦ I might take a look again at the npm package code on github to figure out whether i should use multiple params like the imdb id and tmdb id at once or they should have their own seprate requests

Backend

✦ I added the movie subtitles fetch it’s similar to the tv one but just with different request parameters it wasn’t hard thanks to the npm package i’m using
✦ I’m still working on it because i feel like the fetching isn’t the best i feel i should add more filters i’ll see
✦ i could be even using the library the wrong way im only passing one param but there isn’t enough documentation for it

Clean code implementation

✦ I made seprate functions for each the tv shows and the movies
✦ wrote comments to make it easier for me to read my code
✦ Made seprate functions for some of the code

Changelog

• Sub-Extension/commit/2ed7059
• Sub-Extension/commit/bd731cc
• Backend Fetch

Optimization

✦ So i can’t remeber exactly what i did but i’m pretty sure that i added google analysis to my website so i can monitor traffic and also changed some stuff to the backend i think

✦ I was basically making sure stuff won’t break when people are voting so i guess i fixed more problems

✦ i might have changed some css styling

Caching & Storage

✦ So i have made everything stored in chrome.local.storage i cached the state of the catg and the state of the search and the subtitles file cards themselves
✦ Fixed tons of problems and had to debugg too much stuff and i had to restructure the code so i can make it clean and so i can use it too
✦ I spent a lot of time going back and forth until everything worked and then tested to see if there’re any other issues
✦ i obviously won’t be able to debug all the problems but i fixed the most vital ones

Backend

✦ I seprated the api into a search route and a download route
✦ i’m gonna recieve the data from the popup and then download the subtitle and send it back to the popup I might use the background worker for that so if the user closes the popup it still works

What i’m going to do

✦ I’m going to write the necessary code in the popup so i have all the data i need to download the subtitles and then write the backend code to send the request with these data
✦ I still have to send this data to the background worker or use the background worker to handle the download with the backend directly (what im probably going to do)
✦ definitely going to change the slop design of the subtitles fetching
✦ I still haven’t implemented the movie subtitles fetch i only have the tv shows fetch but this one is easy so im doing it first and just so that i can finished the popup all at once
✦ i’m gonna have to write the backend for the movie subtitles fetch , i gotta check the documentation to see how im gonna do that

Optimization

✦ I tried to lower how many times i have to use chrome.local.storage.get my code is half a mess but im okay with it i feel like there are just some stuff i need to do like showing “No result” if there are no data stuff like that

Changelog

• Sub-Extension/commit/4bf2026
• Sub-Extension/commit/ed532d2

My suffering

✦ I started working on the menu bar so it’s All, tv shows , movies and finished it
✦ i can assure you that i didn’t do anything useful other than adjusting the css for the animation getting the animation working the way i wanted it and some other stuff but what took long was this animation damn
✦ i spent a loooot of time trying to fix the animation because it wasn’t resetting and restarting and i was creating this circle elment using ::after in the start but then i switched to a nomral div
✦ I added a line below the menu bar

Fixes

✦ i fixed a problem with the overlay container the red “subtitles delay button” when you hover over it 3 seconds and it goes away which is a problem so i fixed that
✦ Not fixed but i cleaned my code in a way changed some stuff so it’s organized

Optimization

✦ I added an arrow-back svg to take the user to the previos state it’s gonna be in the devlog video
✦ Saved the state so if the user goes back the cahced data is shown again
✦ I’m doing something similar to react but not perfectly the same i’m cleaning the whole element innerhtml before i append anything
✦ I’m gonna finish off this menu bar functionality since it isn’t working yet i just finished the design of it and then im gonna get to file downloads and desiging the subtitles cards

Changelog

• UGHHHHHHHHHHH finally got the animation working with the help of chatgpt
• Trying to do the navigation bar animation working I’m suffering here

What i did

✦ Finally, Everything is working with the subtitles fetching and i can’t imagine how much more potential i can get out of this
✦ I have added sorting using the language i also added manual search so like if the automatic fetching didn’t work you can type the name of the show because the data might be corrupted for that tv show or movie
✦ i asked chatgpt to make for me the subtitles cards because i wanted to see the data as fast as i can so i can fix if there’s anything wrong
✦ I love how everything is so far i just hope the api doesn’t screw me over when i try to download subtitles
✦ There’s a limit on the number of downloads my api key can handle i haven’t tested it but i have to get everything working before i start draining some of those downloads

What i’m going to do

✦ There’s a lot of things i want to get done like how i’ll unzip the subtitle file im not even sure if the data is .zip but i’ll check
✦ I’m currently overwhelmed because my code is a literal mess but i’ll get to that later
✦ i noticed that im only fetching tv shows when the user search for anything im fixing that in the future but so far im focusing on getting the subtitles fetching working correctly and integrate it with the overlay so it’s automatic

Fixes

✦ i spent quite sometime fixing the horizontal scroll bar i wanted to remove it completely but just couldn’t
✦ fixed some of the css of the cards i asked chat gpt too
✦ i also fixed a problem with fetching the data i was fetching using the wrong parameters because i didn’t notice it in the doc lol

Changelog

• Subtitles fetching in action !!!
• Backend setup

Subtitles fetch Api integration

• I didn’t expect to find an api that can actually fetch subtitles since i have tried to find one before but failed miserably
• I’m using a wrapper api for a website called opensubtitles.com and it’s quite nice but it requirs a backend so that’s what im doing

Setting the Backend

• I’m using express and node js for the backend it’s a very simple backend i don’t know if i should use a whole express server for this but if it works it works
• I’m gonna deploy it to heroku after it’s done im only creating one route which is /api
• I’m fetching the data using imdb id so it’s accurate and working perfect im gonna
• I’m still working on everything and laying the prototype before actually desiging anything so everything is raw
• I keep searching basic stuff like select,option tags in html i forgot most of the stuff
• also im using chatgpt to give me some useful infos like how to fetch the imdb id using a show name or its tldb id it’s helpful in fetching information fast

Some additional improvements

• I’m saving the search state so the user won’t have to write and fetch their tv show every time the popup closes

I’m currently coding the selection of the episode and session so it fetchs data accurately and help the user find what session and episode they’re looking for

Api integration

• I used an api called tdlb or something like that to fetch movies and series names and photos and rating and got it working

popup implementation

• So I added an animation to my search input it’s still in progress but I have learnt stuff I haven’t understood in decades like the ::after and ::before in CSS I made a cool infinite loop and am still working on improving it because it looks a bit dull tbh

• I have added a container for the results that come from the API and made chat GPT design the card for the data I spent the rest of the time fixing spacing issues and how the cards would take up space in my pop-up

• I’m considering adding permanent storage to my popup because if the user closes the pop-up nothing is saved or kept in storage so I might change that in the future

Changelog

• finished the text animation and made sure i didn’t break anything else
• API INTEGRATION and added the search input and still working on it

Readme update and changes

✦ I added preview photos i spent a lot of time managing my files lol i suffered to get the right photos
✦ I recorded a demo video and uploaded it to youtube and put it in my readme
✦ I fixed some stuff but i don’t know if they were causing any issues and i changed the tech section in my readme because it sucked and the credits too and i changed some other stuff in the readme it was a lot of pain cuz i didn’t know what photos i should pick to upload and my ssd space is full only 600mb is left

Changelog

• Hopefully this fixes anything
• Updated the demo url to my repo youtube demo
• logo fix readme update
• Second readme update
• Initial readme update
• CDN update

What i spent doing

✦ Well i spent most of the time doing the tranisiton animation i had the idea in mind so i just executed it and then applied the animation on it using gsap and yeah that’s pretty much it, i seprated each letter so i can get the fading animation and it actually looks sickk and i like it but i hope it doesn’t glitch or anything

Sound engineering

✦ So i used fl studio to make this pad sound for the transition animation between pages it’s just two chords and i added some reverb and did pitch modulation and that kind of stuff

Optimization

✦ I removed unused fonts and uploaded my new sound effect to the CDN and using it
✦ Changed logic execution for the warning and i’m also gonna record my demo video so i can upload it to my repo
✦ Created a new file called test js and deleted it to test the animation and make it before i put it with the main file

Changelog

• CDN update
• I added an animation in between pages and created my own sound effect in fl studio and integrated it with the animation

Designing

✦ I’m not a UI/UX designer but i like figma so i spent quite some time designing my warning cards i don’t like how they turned up but they’re not bad
✦ Also figured that adding a github logo in the homepage would fill an empty space in the navbar

Optimization

✦ I updated the CDN cached files more than once because i lowered the size of my audio samples and then changed my fonts from ttf,otf to woff2 because it smaller and more compatible with browsers

✦ I added this github logo as said in the designing part

✦ I was trying to get everything ready and faster because i don’t want the user wait 4 years for the site to load or wait for any audio to fetch

✦ So i used a method to fetch audio samples in the background when the user first enters the site and the site renders

✦ Removed the youtube url fetching thing because i couldn’t get my backend to work at all it’s hard to bypass youtube restrictions that’s why i added more audio samples

✦I also spent some time implementing my design in figma which was fun tbh

✦ Spent some time going back and forth because the audio samples weren’t updated on jsdeliver CDNs since i haven’t purged the old files and they have the same name i just lowered the files side

✦ Fixed some stuff with the css too the github logo wasn’t deleted after the webpage shift i have a class called disposable i add it to every thing that will should be deleted after the page shift so it’s easier to manage

I’m considering to add a cool text or something between the pages transition

Changelog

• commit/3c3dd57
• commit/3aa51dd
• commit/821ee93
• commit/d1ee26b
• commit/167acbf

Optimization

✦ Commented most the code im not using that could have been a huge bottleneck for performance and changed when the audio plays
✦ added the meta tag for viewport
✦ Tried to comment parts of my code and push to the repo so i can test the website from my phone and try and find out what’s causing the most lag
✦ Changed the icon so it’s transparent and also changed the audio file i made it more effient how i play it
✦ What took me long was that i kept commenting and recommenting the code and also trying to change some stuff but it didn’t work out
✦ My next plan is that im gonna setup backend for the youtube audio fetching and push that to heroku and also designing a warning so people with bad graphic cards or no graphic cards get that warning

Changelog

• More optimization and cleaning of the code
• testing and changed the audio play a bit
• Fixing responsivness
• Trying to figure out what’s causing the laggness

Finally, Added the loader

✦ I have made this random opacity stuff to the loader and it kinda looks okay
✦ i feel like it’s pretty decent though but it shouldn’t have taken this long but i was trying to figure out exactly what i wanted to do that what took long
✦ I made sure the little audio vis in the navbar works too and removed some stuff from the main html file
✦ I changed also some stuff related to the scroll feeback and tried to add an animation but deleted it and made sure everything else works

Changelog

• THE/commit/9ea35a3

What im trying to do

✦ I have made a pretty cool loader but couldn’t integrate it with my website because i’m using await and load my 3d models but at the same time im using requestanimateframe so the animation for the loader stops
✦ i like to start in new files whenever im trying to create something like a loader so it’s seprate from my main files and so it’s cleaner
✦ This is taking too much time because im pretty dumb and this shouldn’t have taken this long but i’ll give another go and i hope it turns out the way i wanted it
✦ I’m enjoying the journey though i’m kinda turning my brain off which is causing why i can’t fix these bugs but i’ll change my drawing method maybe or i don’t know
✦ i tried to create another loader at the start of this devlog session but i realized early that it won’t work
✦ optimized the draco loader and the geometry for the second statue

Changelog

• THE/commit/0287a1f

Optimization

✦ I used jsdelivery CDN to host my 3d models because the website took too much to load honestly

✦ Made it so that if someone’s device was running on lower than 500 fbs the rendered particles number decrease

✦ Removed a library i wasn’t even using

✦ Clearing a lot of console.logs xD

✦ Still considering to upload my audio files or something

✦ Added a scrollfeedback at the right part of the website so people know where they are in the scroll and i used figma for the design and exported the svg for it

Fixes (Too much problems )

✦ made the audio on autoplay but muted
because that seems to be the way to make it work since chrome doesn’t allow autoplay with audio so the user have to interact with my website so the audio starts

✦ FIxed the css for the small audio visualizer in the navbar because it wasn’t centered and that’s because i removed tailwind from my project so it was centered but because i removed tailwind it got misaligned

✦ Also fixed a problem with the statue placement someone who tried my website got that problem so i fixed it. the statue was basically visible though it shouldn’t

✦ fixed the user select for the navbar text and i can’t remember what else i did but mostly i took long because of the scroll feedback animation since i had to hardcode it

Changelog

• THE/commit/6d8417b
• THE/commit/70284d8
• THE/commit/781c3d6
• THE/commit/ac090e1

Deployment

✦ For the first time the updated version of my website is out there ohhh that was hard

Optimization

✦ i compressed my 3D models with draco and used blender to convert one of the 3d models from .stl to glb i don’t know how the 3d models looks the same though it went from 70mb to 1.7 mb lol and optimized rendering

✦ I cleaned up a lot of code and removed unnecessary imports of some addons like pointerlocker

Fixes

✦ fixed the autostart for the audio after i pushed my files i figured the sound wasn’t working lol so i had to look stuff up about chrome disabling autoplay on refresh

✦ Fixed so the particle background is visable on phones but now after i tried again from my phone it doesn’t work because of the particles size i think or because there are too much particles the mobile gpu can’t handle it

✦ kept fixing the css for the website because i removed the tailwind cdn import which isn’t perfect for production

✦ Also had two imports of the same instance of three js so i removed that

STruggles

✦ PHewww i need someone to teach me how to commit properly because i had repeated commites which i caused but didn’t know i did so i kept communicating with chat gpt to help me restore my files

Changelog

• THE/commit/a1c3273
• THE/commit/720b51a

What i did

✦ OHHHHH I just finished glueing everything together it was terrible since i had to deal with a lot of old code and seeing my old mess gave me headache
✦ I added a text that appears after the user enters the website within 3 seconds so they know they should click on the statue to go to the visuallizers
✦ I merged all my code together since they were scattered all over the place and cleaned a lot of ai comments and cleaned stuff i commented
✦ I added the oscilloscope visualzer to the rest of the visuallzers
✦ Added a new sfx to the last bit of the animation it’s from a tv show called severance i liked this part a lot lol
✦ Added a new audio sample and i’ll probably add more

✦ Fixed a lot of html problems removed the elements from the html file and injected them from the js file to make things easier
✦ Fixed the nav bar it was kinda glitchy a bit

✦ I made sure nothing breaks by adding logic to prevent the user from going to the visualzer without clicking on the statue
✦ repositioned the camera when you enter the vlow visualzer so it’s like a ball talking to you
✦ Moved the test files outside of my folder
✦ It took me some time to get the statue text right and i had to download a lot of fonts and try them untill i find something i like but at the end i used an old font i had and also went back and forth with chatgpt to get the animation right i made it write some of the shaders for me
✦ also made so that any of the statues would work for the animation to start

Changelog

• THE/commit/b178f96
• THE/commit/89c2722
• THE/commit/1c7d92b

Improvments

✦ I have added the mouse interactivity with the light position I watched a video on how perspective camera works in a scene and it was mind blowing since i like math and it was all math i used the z distance between the light and the camera to know how much i should change the y and x values
✦ I have added sound effects to the buttons i’m kinda picky so i haven’t decided whether i’ll keep this specific effect or not i’ll probably find something that fit
✦ I want to also add a flickering sound effect in the background

Failed attemp to make a reveal effect using mouse hover

✦ I tried to add a new material to my statue to make look glassy and icy it looked fabulous but i couldn’t make it interactive with the light and it was a heavy cost for performance so i deleted it
✦ I should probably hurry up since i don’t want to take so long polishing this i want to get my stuff together

What i added

✦ I have tried to think of ways to make the mouse interactive with the scene i have added interactivity with the particles in the background but i don’t like it though
✦ I also added an instruction text so the user knows they should scroll
✦ I played a bit with the shader of the statue but i just didn’t know exactly what i was gonna do with it and it was heavy so i didn’t add it i want the homepage to be smooth a bit so everyone can try it

Failed experiments

✦ The shader of the statue i spent quite some time trying figure out a way to pass the mouse movement to the vertex shader of the statue but i couldn’t do it because i would have to override the original shader
✦ I tried a lot of stuff with the particles-mouse interactivity and i still don’t like the way it is now
✦ I tried to add gloom effect for the whole scene but it was just gonna be laggy and will take away how my homepage looks right now so i didn’t do it

Considering to add

✦ I’m currently working on the mouse interactivity with point light position i saw a project online with a great one but i tried to use it and it didn’t work so i’m doing it myself
✦ I’m adding like a scroll feedback so the user knows where they are at of the whole scroll so they can navigate the animation smoothly
✦ I’m still working on figuring out a way to add sound effects to buttons i want it to be light though but i’ll see

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

Improvements

✦ I have used a noise function to get this cool look i used one online i didn’t write the code for it since they’re complicated
✦ I’m still trying to improve the overall homepage and adjusting the light and all of that stuff
✦ 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

Inspiration

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

Application

✦ 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

What i did ( Learning more about geo and 3D)

✦ 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

Failed experiment

✦ 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 because i don’t know what exactly i want
✦ 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
✦ It took me so long to get the sphere right and as you can see in the photo im trying to attach my scenes as a render target textures on the geo of the sphere but it’s not going as smooth as i thought it would be since you can’t control the scene even setting up the position of these planes are a huge pain
✦ I added helpers and transform controls to everything so i can visualize and edit and move stuff around in real time and it’s making my testing environment better

Setting a testing environment

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

Statues

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 these will be the main statues in my homepage and i also added keyboard controls like i made the letter “s” switch cameras

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

Experimenting with the homepage

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

What i did

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

Cleaning

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.