mattseq

i thought this would be a lot harder but honestly it was easy. first i watched some videos on how git works, this series by Brief was amazing: https://www.youtube.com/watch?v=fWMKue-WBok&list=PL9lx0DXCC4BNUby5H58y6s2TQVLadV8v7. git actually has a really elegant solution to storing snapshots of files efficiently and exploiting file structure to do so. i wont elaborate on the details, you can watch the video if you like. so far its only around 130 lines of python, but i only have basic commits using the whole object system. im not sure how much i want anvil to be similar to git tho, i might make a remote server like github but using locks so only one person can push changes at a time. thats how it used to be done and it means i dont have to implement merges and all those more complicated stuff. also i just want to experiment around with various version control ideas. heres a picture of one of those objects, specifically a tree that references other blobs with their hash

releasing the mod today! its not entirely complete, the commit jsons arent compressed, block changes arent stashed at intervals so it might take a lot of memory after a lot of block changes. i improved the commands, wrote the README, etc. i also learned github actions yesterday, so i set up one that automatically creates issues from any TODO comments, which was cool, although not that useful for a small project

ok just finished up. changes are now automatically stashed and unstashed when stopping and starting the server so they’re never lost. i also added a status command as well, so its a bit more obvious whats going on. as promised, i recorded a video demo but it was too large to attach to this devlog so here’s a google drive link: https://drive.google.com/file/d/1O23bMkSVQa4SZZll06KLZY89ol3WN7id/view?usp=sharing

added a initialization endpoint so that an admin can be created when the service first starts. had to make this bc only admins have permissions to create users but when the service first starts and there are no admins, its otherwise impossible to create an admin, which results in a weird permission paradox. the initialization endpoint only works when there’s no admins already in the db. i also added a README, finally.

added jwt auth filter. basically it just extracts stuff like roles from the jwt and passes it on as SecurityContext and in my SecurityConfig i can use methods like .hasRole() on specific URIs. i also included claims in the jwt so that it contains id, username, roles, etc. and it also has specific extract methods but i might combine those into one that returns a User.

renamed the project to auth-service. i also implemented the login and verify endpoints using jwts. i also started using postman for the first time to test my api, since im on windows and used to ssh into my rpi just to use curl. im still not hashing passwords yet lol. heres a picture of my postman flow that i used to test

started by watching Mosh’s spring boot tutorial. dont really know how im supposed to use some of that stuff though. got started with creating a database with spring jpa. just using h2 for now, i’ll switch to postgres later or something. all i did was get the repository and basic crud working and user methods working. ran into a small issue with spring security automatically asking for authentication at every endpoint. next i need to create jwt auth, and use the security filter stuff provided by spring security to block certain endpoints. then i’ll create roles and make the verify endpoint

for the past few days, i’ve been working on an actual website implementing some of these techniques. i learned a lot, like how to make hover animations, video animations, and most importantly i learned that GSAP’s pin is far superior to position: sticky and is more flexible. i dont really have any good pictures so here’s a picture of the site i was working on.

added a progress indicator for the carousel. unfortunately they’re both positioned absolutely so it gets messed up when the screen size changes. def gotta fix that. i also noticed something really important. when looking at others websites, specifically GSAP’s showcase site, i noticed that they dont have to make scene containers super tall in order to have sticky objects. it turns out they were using GSAP’s pin which I already discovered but didnt really understand how useful it was. instead of creating really tall containers to hold the sticky objects while you scroll down you can just pin the whole scene container with gsap and define how long you want it to stay like that. the other animations work as usual and can still work on scroll. I replaced the sticky positioning in the inhabitants section with that and i plan to do so with as much of the rest of the site as i can.

ok fixed a minor mistake. i thought i had to wrap the ReactLenis component around my content but you’re actually supposed to just leave it as a standalone component at the top. ig i kinda skimmed the docs since there’s an example of this on there. i had to go back and fix this on my other projects as well. here’s a picture of the docs and then a picture of what my code is now. before, i had the AnimationWrapper (which is essentially the ReactLenis component) wrap around the other content

ok took a while looking at what we already have (what Jeremy already made). he used framer motion instead of gsap tho. i decided that its probably best to just redo the whole website instead of trying to make changes to the existing one. it will probably take me less time and the result will be better and with less clutter from old code. I created a new Next.js app and tried setting up GSAP + Lenis like I have with other React apps. I immediately ran into some problems with SSR. this is my first time using Next.js so it took some getting used to. I separated the basic HTML from the animations so that the animations would run directly on the client and the HTML could be rendered server side. i had to implement a mount check to see if the elements were in the DOM before the animations tried to run. i havent yet made a github repo but here’s a screenshot of some of my code. its an AnimationWrapper which returns a ReactLenis element and passes down children. it handles all the gsap animations as well, calling Animate()

finally animated videos on scroll! it was pretty easy actually, since GSAP had an onUpdate() callback i could use in animations. its kinda laggy tho. i would record a video but i already launched battefield 6 sooooo… Here’s a picture of all the commits from today

used express-session for auth. pretty easy to setup, at least for one user. i still havent made file uploading possible through the frontend. i’ll probably do that next since im too lazy to set up multiple users. i did also make the frontend fetch private file metadata which only took a bit of copy + paste. also yes i uploaded the exact same file for every single test

ok i just finished with some frontend stuff: it fetches public file metadata and displays them along with a link to where its actually hosted. there’s also space for displaying private files later. i would have done that too but i need to make the backend send a jwt cookie instead of just the jwt token itself (or get express-session working). for a while i was just trying to figure out styling. i understand it in principle but it always becomes harder in practice

added basic frontend with login (doesnt store jwt cookie yet), configured caddy to expose the api, added /api/auth endpoint to check auth. had a problem for a while with this annoying error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."

the browser fetched the html file properly but it couldnt get the css and js files that it referenced. I thought it had to do with the base url in the vite config, since i was building static files and servign them. i’d seen this same problem before and changing the base url worked. it turns out it was Caddy this time. i used handle_path instead of handle. handle_path strips the path prefix so it was looking for the js and css files in the wrong place. lesson learned! hopefully, i never make that mistake again.

improved the collision detection for the apex’s charge goal. instead of just using minecraft’s mob.horizontalCollision (which hardly works), i made a custom box in front of the apex and it checks whether there are any blocks in that area