I'd been wanting to make a little website from scratch to teach myself about raw components of the web. I wanted more than static HTML, so I figured I'd throw in some php as well.
As for the domain name? ...this was a result of a fun train of thought. I was thinking about the slashdot name, and how is was chosen because of how it sounds when said out-loud (ach tee tee pee colon slash slash slash dot dot com), so I went looking around to see if any other fun "dot" domains were open.
The first one I found was dotbun.com.
I just had to come up with something to put on it...
Since 'bun' is often used to refer to especially cute rabbits, I decided to grab some rabbit images and show them randomly.
Over the past day, I added a static link creator and refresh button, and most recently added embedded mp4/webms.
---
The implementation:
I grabbed images and videos from reddit.com/r/rabbits, and ran them through a shell script that gave them short, sequential names and produced webp copies using cwebp.
I then use php to select a random file.
If its a still image (png/jpg) it produces html that will attempt to show a webp picture, with a fallback to the original format. I also made the static links the original format, to make them more accessible to hotlinking and sharing.
If its a gif, it displays it without fallback (since webp doesn't handle moving images).
If the random file is a video, it instead generates a <video> tag that is set to maximum size without affecting aspect ratio, centered in the screen. I use the tag <video autoplay loop> for gif-like behavior.
---
Performance/Modernity:
The server backend is nginx, with a letsencrypt HTTPS cert.
I used media selectors to make the website somewhat responsive. If your horizontal size is below a given limit, the static link and refresh buttons are enlarged and moved from the corners to the top and bottom of the page.
* CDN. This is a big one, as this thing is running on a VPS, which may not handle high traffic terribly well (Let me know if you see timeouts or other server problems). I will probably put this behind cloudflare free tier.
* About page. Basically this post's content, formatted nicely. I expect to have something done over this weekend.
* Upload. Allow people to submit photos. This may be a bit much for my scope, however, so this is not a hard goal.
* Analytics. I want to use matomo, as my goal is to have as close to zero 3rd-party requests as possible without compromising on a modern design, and the "on-prem" option should work.
I have two buns, so I can appreciate this... but.. the website does not work in Safari. I am not a safari user, but when you share it on iphone Messages the default browser to open links is Safari.
The issue seems to be the webp format. I was also not seeing images on an old firefox version. You should use a picture element, so that you can provide working fallbacks.
9 comments
[ 4.5 ms ] story [ 33.5 ms ] threadAs for the domain name? ...this was a result of a fun train of thought. I was thinking about the slashdot name, and how is was chosen because of how it sounds when said out-loud (ach tee tee pee colon slash slash slash dot dot com), so I went looking around to see if any other fun "dot" domains were open.
The first one I found was dotbun.com.
I just had to come up with something to put on it...
Since 'bun' is often used to refer to especially cute rabbits, I decided to grab some rabbit images and show them randomly.
Over the past day, I added a static link creator and refresh button, and most recently added embedded mp4/webms.
--- The implementation:
I grabbed images and videos from reddit.com/r/rabbits, and ran them through a shell script that gave them short, sequential names and produced webp copies using cwebp.
I then use php to select a random file.
If its a still image (png/jpg) it produces html that will attempt to show a webp picture, with a fallback to the original format. I also made the static links the original format, to make them more accessible to hotlinking and sharing.
If its a gif, it displays it without fallback (since webp doesn't handle moving images).
If the random file is a video, it instead generates a <video> tag that is set to maximum size without affecting aspect ratio, centered in the screen. I use the tag <video autoplay loop> for gif-like behavior.
--- Performance/Modernity:
The server backend is nginx, with a letsencrypt HTTPS cert.
I used media selectors to make the website somewhat responsive. If your horizontal size is below a given limit, the static link and refresh buttons are enlarged and moved from the corners to the top and bottom of the page.
By opportunistically using webp, and relying on php pre-processing with NO javascript, I got a 100 on both desktop and mobile according to google's pageSpeed insights: https://developers.google.com/speed/pagespeed/insights/?url=...
--- To-dos:
* CDN. This is a big one, as this thing is running on a VPS, which may not handle high traffic terribly well (Let me know if you see timeouts or other server problems). I will probably put this behind cloudflare free tier.
* About page. Basically this post's content, formatted nicely. I expect to have something done over this weekend.
* Upload. Allow people to submit photos. This may be a bit much for my scope, however, so this is not a hard goal.
* Analytics. I want to use matomo, as my goal is to have as close to zero 3rd-party requests as possible without compromising on a modern design, and the "on-prem" option should work.
<div class="imgbox center-fit">
<picture>
<source srcset="files/webp/file.webp" type="image/webp">
<source srcset="files/file.jpg" type="image/jpg">
<img src="files/file.jpg" alt="Bunny!">
</picture>
</div>
Let me know if that works.