My second blog post

Today I signed up for Atabook¹, which is a creation of Nekoweb², a competitor to Neocities. I’m an old person, so I don’t know about these newer static site hosts. I also don’t really draw a lot of anime fanart or anything like that anymore, so I don’t fit in with a lot of the flashy Neocities blogs which function as portfolios for up and coming young artists.

My sibling, who is 30, told me that when I turn 30, I will be middle-aged³. I’m approaching middle age at a rate of one day closer per day. When I joined the Neocities discord (I think it may actually be the discord for the Neocities Reddit community) I was surprised by how many people under 18 were there. It makes me happy to see young people making their own websites. Back when I was a teenager, I mostly used Tumblr and enjoyed customizing my blog relentlessly. Neocities and other static site hosts seem like the extremely upgraded version of that; you can customize everything to your heart’s content and don’t end up growing neurotic about the number of likes and reblogs you might get on your posts.

When implementing my guestbook, I used a custom Hugo shortcode. This is pretty simple to do when using Hugo. You create a folder in your layouts folder called _shortcodes and then create an HTML document containing the shortcode’s code in that folder. Then you can call it from any Hugo page using the shortcode notation⁴. You can define your shortcode to receive arguments; my guestbook is basically a wrapper for an iframe that doesn’t take any arguments since I don’t plan to link other people’s guestbooks.

So for example, in _shortcodes/guestbook.html I have the following code:

 1<style>
 2	.guestbook {
 3        display: block;
 4        border: none;
 5        height: 80vh;
 6        width: 100%;
 7    }
 8</style>
 9
10<iframe src="https://oleracea.atabook.org/" width=100% height=600 class="guestbook"></iframe>

I then call the shortcode on any page I want and it embeds the guestbook. This is pretty much the simplest sort of shortcode you can write.

I may write more shortcodes as the need arises. I recently arranged the song “Paper Doll” by the Mills Brothers to be sung by Pikmin, so creating a Bandcamp embed would be useful. I originally intended to have it be sung by Hatsune Miku to match with the lyrical theme, but I still can’t bring myself to purchase the Vocaloid software considering how little music I make these days. However, if I owned the software, I might find myself more inclined to use it in my free time. Such is the dilemma of life.

Oh, yeah, I thought I would share the confetti generation. I load the script from Canvas Confetti’s⁵ Github page and then set it up this way:

 1
 2  function randomInRange(min, max) {
 3    return Math.random() * (max - min) + min;
 4  }
 5
 6  var scalar = 1.5;
 7  var broccoli = confetti.shapeFromText({ text: '🥦', scalar });
 8  var kale = confetti.shapeFromText({ text: '🥬', scalar });
 9
10  var count = 200;
11  var defaults = {
12    origin: { y: 0.7 },
13    shapes: [broccoli, kale],
14    scalar,
15    
16    
17    particleCount: randomInRange(50,70)
18  };
19
20
21  function fire(particleRatio, opts) {
22    confetti({
23      ...defaults,
24      ...opts,
25      origin: {x: event.clientX / window.innerWidth,  y: event.clientY / window.innerHeight},
26      particleCount: Math.floor(count * particleRatio),
27      disableForReducedMotion:true
28    });
29  }
30
31  function confetticannon() {
32    fire(0.25, {
33      spread: 26,
34      startVelocity: 55,
35    });
36    fire(0.2, {
37      spread: 60,
38    });
39    fire(0.35, {
40      spread: 100,
41      decay: 0.91,
42      scalar: 0.8
43    });
44    fire(0.1, {
45      spread: 120,
46      startVelocity: 25,
47      decay: 0.92,
48      scalar: 1.2
49    });
50    fire(0.1, {
51      spread: 120,
52      startVelocity: 45,
53    });
54  }
55  document.body.onclick = confetticannon;

This is basically a combination of the “Realistic Look” and “Emoji” examples on catdad’s page. It creates a lot of confetti, so I might tone it down in the future so that page performance improves if you click a lot. But I do like having a lot of confetti.

I’d like to add other stuff to my website as well, like a CV or something like that. But I’m still deciding how much of this website will contain my personal life (stuff like what’s on this blog now, musings about the creation of the blog, vague references to my existence) versus my professional life (what I’ve achieved in Stata today, talking about my research, etc.) versus my unprofessional life (if I ever get around to drawing a piece of anime fan art, little Pikmin covers of old songs, my opinions on the latest video game). I fear that the three of them do not mix well; such is the core conflict of my life. I am proud of the professional parts of my life, and I am proud of the unprofessional parts of my life. But mixing them together seems like a recipe for disaster.

Other news from my life: I finished knitting a little beret. Yippee! I might start uploading pictures of my knitting projects to this site once I can take a nice enough picture.

I seem to have accidentally IP banned myself from Neocities by sending too many push requests, so I will use a VPN to update my blog. Or I could use school wifi. At some point, I need to get in contact with the Neocities staff and apologize profusely for accidentally triggering their anti-DDoS flag because I was having trouble with the CLI timing out.

You can find my guestbook in the top menu of my blog. Please send me a message! Let me know what you would like to see on my blog!