Ode to Webtober

As a youngin’ I was always a little envious of people who can draw partly because of Inktober. The art was always so cool looking on my instagram feed. But now we have technology! And with that we have Weird Web October! I heard about Webtober while reading the Piccalilli Newsletter. And I figured I needed the excuse to improve my javascript. Plus the tech/protocol they use (Octothorpes) is pretty nifty as well, I like the idea of bringing back hashtags and incorporating them into the web in a more personalized way. And using it with something like a community webtober event is the perfect use case. At first I was pretty confident this was something I could handle. I admit one website a day was/is daunting but I knew even if I did a couple days i’d be happy with myself. Which is about what I was able to accomplish!

For convenience, here’s my full contribution for the month: webtobr.netlify.app. I know, a whole 8 days! didn’t even break double digits. But there’s always next year!

First came Transparency, I was really stuck on ghosts so I attempted a little ghost animation. It took like two or more hours lol but it worked out okay.

Maps was funny because at first I looked at adding google maps, noticed it was paid, switched to mapbox, remembered there was an open source option, MapLibre, so eventually read the docs and got it setup. But using the API was a little more difficult than I had time to logic through. One day I’ll go back to that.

Sub-optimal felt like I had to do one of those things where you make a really simple feature really complicated.

Next, Containers, I could only think of bootstrap containers, so that’s fine.

Blink was my true javascript challenge. Took me freaking forever to get question 2 to work. I didn’t actually submit this one for till like 5 days after the date, so I took a break for a little after this one lol. I might actually make this a little longer or into an actual game because I like the concept and it was simple enough for me to do in a reasonable amount of time.

Counter was sweet and simple, I just reused the same pics of ahri from blink. I could’ve ramped up the css a little for that page and made it look cute but I didn’t lol.

I was really stuck on Texture. Somewhere while googling I ran into a nice site with texture images and spheres. And I just wanted to put them on there as they came because they looked so satisfying.

And last but not least, I had no plans for Halloween so I put Jeff on a website for Spooky. Honestly the text fade was really giving me the run around. It’s much smoother when you fade in and out with css keyframes, but for some reason I was dead set on changing the text after the fade out, and having it fade in with the new text, and I couldn’t figure out how to incorporate that with the keyframe. So I just did the whole thing in vanilla js, which is why it’s choppy. but that’s fine. It works for this purpose. One day i’ll dig into proper javascript animations either with a library or different techniques.