the weirdest web project I've made

    Reading time
    2 minute read

    Thinking of posting my website to Filipino developer subreddits to gain more first-day traction on release, but mommy i’m scared… some of those little small-dicked neckbeards are vicious, ruthless, and only comment shit to hurt under the guise of constructive criticism.

    Plus, this is like the weirdest web project I’ve made because of how personal it is. It’s soooo scary to just give it to someone so they can rip it to shreds.

    But anyway, the website is shaping up good. I’m loving every pixel I’ve put into it. More pixels to come.

    Also, I say personal because it literally is. I tried to infuse lore into the borders, color choices, fonts, animations, and interaction effects. I wanted it to feel like stepping into an ongoing TV show, or an active crime scene. I wanted every pixel to scream into the void with something to say. That’s convoluted, and frankly, quite pretentious. But that’s how I made it, and I don’t wanna keep explaining it but I feel the urge so I keep doing it 🤣

    I used animejs, but I didn’t use it for every effect there is. Maybe some timeline shenanigans and drag-n-drop, but that’s it. The rest are SVG and CSS filters. Tried to keep it as vanilla as possible, but also that means some of the effects don’t work in Firefox and Safari, but there’s decent fallback styles for everything so all’s good.

    For the curious, I use SVG filters in backdrop-filter, and aparently in Firefox, backdrop-filter only applies SVG filters if they can be recreated with CSS filters (e.g. blur, contrast, saturation). That means stuff like displacement maps don’t work when plugged into backdrop-filter.

    I don’t know why it doesn’t work in Safari though. Things I’ve read say these effects should work in Webkit. Right now, the effects only work in Chromium browsers.

    Also, analytics this time around is courtesy of Goat Counter! It’s open sourced, and I am much more confident about the data they collect. I am just concerned about view counts, and I am planning to make the page views public.

    Send a shoutout!

    Did you post a response to this in your own website? Send me a webmention!

    Don't have a website? Send a response via commentpara.de ! Copy and paste the URL of this webpage, and paste it on there along with your response. Comments can be anonymous, too!

    You on the Fediverse yet?

    If you have a Fediverse account, you can also send me a shoutout by commenting on this post:

    Thinking of posting my website to Filipino developer subreddits to gain more first-day traction on release, but mommy i'm scared... some of those little small-dicked neckbeards are vicious, ruthless, and only comment shit to hurt under the guise of constructive criticism.

    Plus, this is like the weirdest web project I've made because of how personal it is. It's soooo scary to just give it to someone so they can rip it to shreds.

    Comments from the Fediverse

    teacherbuknoy Francis Rubio

    But anyway, the website is shaping up good. I'm loving every pixel I've put into it. More pixels to come.

    teacherbuknoy Francis Rubio

    Also, I say personal because it literally is. I tried to infuse lore into the borders, color choices, fonts, animations, and interaction effects. I wanted it to feel like stepping into an ongoing TV show, or an active crime scene. I wanted every pixel to *scream* into the void with something to say. That's convoluted, and frankly, quite pretentious. But that's how I made it, and I don't wanna keep explaining it but I feel the urge so I keep doing it 🤣

    teacherbuknoy Francis Rubio

    I used animejs, but I didn't use it for every effect there is. Maybe some timeline shenanigans and drag-n-drop, but that's it. The rest are SVG and CSS filters. Tried to keep it as vanilla as possible, but also that means some of the effects don't work in Firefox and Safari, but there's decent fallback styles for everything so all's good.

    teacherbuknoy Francis Rubio

    For the curious, I use SVG filters in backdrop-filter, and aparently in Firefox, backdrop-filter only applies SVG filters if they can be recreated with CSS filters (e.g. blur, contrast, saturation). That means stuff like displacement maps don't work when plugged into backdrop-filter.

    I don't know why it doesn't work in Safari though. Things I've read say these effects should work in Webkit. Right now, the effects only work in Chromium browsers.

    teacherbuknoy Francis Rubio

    Also, analytics this time around is courtesy of Goat Counter! It's open sourced, and I am much more confident about the data they collect. I am just concerned about view counts, and I am planning to make the page views public.

    goatcounter.com/