
Show HN: Dotbun.com - A random bunny for your viewing pleasure - Qub3d
http://dotbun.com
======
kick
While you can still edit the post title, you might want to explain what it
does. Cute website!

~~~
Qub3d
Good call. I also added a comment explaining some stuff.

------
ibdf
I got a turtle.

~~~
Qub3d
Really? Did you get the static link by chance?

------
Qub3d
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.

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=...](https://developers.google.com/speed/pagespeed/insights/?url=dotbun.com)

\--- 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.

~~~
ibdf
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.

~~~
Qub3d
Unfortunately I don't have a good way to test on Safari. I'll see if I can
find someone to help me with that.

~~~
0x14c1de72
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.

~~~
Qub3d
Alright, I've gone ahead and replaced the css background-image with a
<picture> element, with fallbacks:

<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.

