tomato

sunday, april 16th 2023

it’s day three!!!!!!!!!!!!!!

no $10 for you!! sorry!!

today i decided to take the code first, write later approach. which surprisingly worked well?? and i actually got some coding done for once?? who would’ve thought!!

anyways. don’t have much to show for it, but spent a bit of time today kind of hijacking a silly little video player together. have not done as much javascript shenanigan-ary as i would have liked. and decided to take the lazy approach and only add a play/pause button. but i am overall happy with what it turned out looking like!! unless you are looking at it on mobile. in that case.. get off your phone. that would be good for me. and more importantly, good for you!!

first thing i had to do was create some sort of page format for the “recipes” i will be making in the “kitchen” from now on. then kind of decided against it and will henceforth (or at least until further notice) be keeping the spinning tomato back button and the thank you footer. and just sandwiching whatever silly things i end up making in the middle of them.

basic skeleton of recipe pages to come!!

ok!! now to address the element in the room. haha!! funny.

the tomato themed video player. yes!! i am really happy with how it turned out. not that it’s technically supposed to be difficult or anything. but man.. so fun.

i learned about *mask-image* by holding my breath and diving into terrifying territory. also known as stack overflow. to find out how to make the video element more fun. and honestly.. it delivered!! i cannot believe that this css property exists. i will be using it for the rest of my life. with the help of mozilla web docs, though.

after this incredible discovery, i felt on top of the world. and wanted to do more unnecessary steps to make the video player look like even more like a tomato.

which is where our hero slash villain slash unlikely protagonist slash villain we love to hate stack overflow comes in. figured out how to use the drop-shadow filter on a background image of the mask image to make it look like the outline of the player was glowing. if that even makes sense. and then added some funky hue-rotate and invert filters simultaneously (which i didn’t know you could do!! another reluctant thank you to stack overflow) to make the video in question more tomato-coloured.

tomato themed video player!!

now for the part that i actually planned on doing. video controls!! but customized to how i want them. which actually turned out to be literally nothing because i initially was planning on making it like a tomato smiley face of the play/pause and mute buttons as eyes and the progress bar as a mouth but decided against that. which brings us to what i currently have. a single play pause button in the form of a smaller tomato underneath the video player.

used a random treehouse guide on styling custom video controls and pretty much ignored everything except the play/pause part. which currently is functioning on my specific browser on my specific device. so that is good enough for me right now!! this DID, however, inspire me to finally take the plunge and learn a bit more of vanilla js basics *soon*. which has to count for something!!

demo of custom tomato play/pause control

one more unnecessary detail: added shake to the play pause tomato button for fun. and i always forget how it works so i consulted my dear friend w3schools again for help. this link will forever be housed in my bookmarks bar. even if i end up memorizing it someday, it’s just so convenient!!

also.. added more glow-age to the tomatoes and made the background dark for that authentic tv viewing experience. in the dark. no source of light other than the screen and its harsh LED glow.

bask in its glory!! or check it out for yourself if u r not on mobile.

well.. that’s all for today!! i am going to conk out on my bed and feel very accomplished for the rest of the day. until next time..