friday, april 28th 2023

it’s day fifteen!!!!!!!!!!!!!!

and it’s friday!!!!! crazy times!!!!!!!!!

before i go into the nitty gritty of my Lit, Crazy, Movie life coding. i want to say that i just realized that i am lowkey using miffy colours. or before u weird colour theory people come at me. a miffy inspired colour palette..

anyways.. i essentially spent all my Coding Time today conjuring up a single page. and was it worth it?? i am not sure. but. alas. nothing i can do about it now!!

the idea behind this page. because relationships. was that it’d be a kind of simulation of what it’s like to be my friend. except it was way more complicated and convoluted than i anticipated. and i kind of gave up towards up the end!! sounds exciting. i know. onwards..

can u believe this is not real..

first off!! the facetiming page. which like. u probably only now know it’s a facetiming page because i said so. i know that. but do not tell me that.

used a wonderful amazing handy dandy tutorial on how to conjure up a user’s webcam. which i honestly do not know why anybody who would accept perms for camera access on this site but if they do. they will be in for a huge disappointment.

was going to make it so that it would be a circular thing of their face on top of the white blobby character thing so it would be like. wow. she just like me fr. and managed to do it ok with the help of stack overflow. but THEN making it responsive was hell and i did not do that.

also made a placeholder image of agnes varda’s face on the white blobby character thing and it worked out good!! so in the likely case that somebody does not want my sketchy site having camera perms, it would just show her there instead. used this sexy w3schools tutorial for it. but somehow i accidentally undid that somewhere in css or maybe in the file system. who knows. either way. it is not there and i’m too lazy to add it in again right now.

u r probably wondering.. how did i do the inner border div thing as some sort of makeshift laptop/ipad mockup. yes. that is what it is. well!! glad u asked. or not. because i used this random css multiple borders tutorial thing that did the trick quite nicely!! yay to pseudo-elements!!!!!! and then ended up realizing that i could also just go calculate(90vw - 30px) and whatnot instead. so that is what i did on the final page. but more on that later!!

this is the most high energy conversation i have ever had

ok. at the top of the screen u should see the little “message popup”. which is as low effort as they get and scales weirdly on bigger monitors. but ignore that!! and see where it takes u!! which just so happens to be the messaging page. had a wonderful flexbox guide page in a pinned tab the entire time. fought for my life with different element displays and layouts and whatnot. and ended up with this mess. also used some more javascript. courtesy of w3schools and stack overflow. to hide divs and show divs when the “message” is sent. also a nifty little setTimeout thing to delay the appearance of the final message. amazing!!!!!

at this point i had not yet figured out how to only make the inner div scrollable. which i am stupid. and forgot to make the overflow: scroll. and used this stack overflow thing for more help. so go me!! also decided to make an additional page which hopefully had more room for text so that i would not need to make it scrollable. which i still ended up having to make it scrollable. but this is where the tiktok dupe comes in.

i just realized the vertical spacing is off i'm going to cry will fix tomorrow bye

for reference. i am a tiktok on desktop user. at least. i was. i am at least 5 months tiktok sober!! but i also blocked it on my computer w/the self control app. so i could not reference the official tiktok on desktop layout when building this. not that i really needed to, though. already know that this one barely resembles the real one. but will find out how badly i messed up tomorrow when my 8 remaining hours are up!!!

all this because i couldn’t be bothered to make a div scrollable and thought it would be funny if whoever comes across my site gets the Authentic Experience of getting sent horrible links from me. even got a little text to speech thing with the contents of this page set to one of those overstimulating slime/sand x family guy x subway surfers videos going on!! honestly most proud of the video and how the dialogue sometimes matches up with the movement of the characters’ mouths.

might make the video sticky later if i feel. sticky. or something. but for now. this is how it all looks!! i have not tested any of this on mobile yet. do not want to talk about it.

before i go!! here is a demo of the entire flow!!

u r officially my friend now