ブ⌑グu

Building my website was a first foray into the development process, beyond an education setting. The guardrails come down. I quite enjoy this, but therein lies the danger. I will burrow to the very end of many a rabbit hole if it tickles my brain just right. Maybe a feature I've envisioned is more complex than previously imaginable. Perseverance deserves respect, but how many hours before that thought is an obstacle before the overarching goal?

And then there's the unknowingness of the unknown. It mustn't paralyze, but how am I to know if I'm learning in a bad direction? Where is my threshold of ignorance? I've come to prioritize following the route that keeps me in motion. I stop well short of sitting down and reading the JavaScript documentation front to back. Now, what in the world is this supposed to mean?

Anyhow, let's take a closer look at the parts I'm most proud of.

-----BEGIN ENCRYPTED FORM-----

Sending encrypted messages can be pretty straightforward. So long as I can jumble the text to be unjumbled later, all that's left is the ability to send some text. I didn't want to bother with a mail server or anything, so I took a big shortcut in using Netlify and its forms. That leaves the jumbly business. Again, I got some help and pulled in the incredible, open-source work of others by using OpenPGP.js, which enables the use of the OpenPGP email encryption standard with JavaScript. I was left with the task of piecing everything together. OpenPGP.js activates upon form submission, encrypting the text into the standard OpenPGP format. Then, the form text is replaced with the encrypted text before it is sent off to my inbox. There, I use my private key to decrypt the message.

One shortcoming here is that OpenPGP.js is not all that tree-shakable. That is to say it's a pretty large JavaScript library, and I'm using a small part of it. I believe that will change in the next major release, fingers crossed.

Janglophonic

With translation, again, the vision was pretty straightforward: a simple, responsive, bilingual, language-switching toggle button. Click the button and the language switches instantaneously. And I'm happy to say the vision has been realized.

Having built my website upon LitElement and lit-html, I knew much of what I wanted could be accomplished with lit-html templates. Here's my shot at a quick explanation: lit-html templates allow you to quickly update and render HTML any time data within the template changes. In this situation, all the text on the page switches languages, triggering an HTML update. The real challenge here was routing.

I hoped to preserve whichever language is chosen, between page changes or refreshes. My solution feels a bit hacky, but I don't know how hacky. Though I imagine if I feel this way, it's likely quite hacky. Whenever a page changes, I look to the address bar. If the address ends in “jp”, the page should be Japanese, otherwise, it's English. There are probably some good reasons not to do this. For the time being, I'll enjoy the bliss of ignorance and a functioning translation toggle button.

UPDATE: I removed the router I was using altogether, so no more checking the URL for information. One less dependency, and I think it works better. I have the same URL throughout the site, but I think it's a small enough site to not matter. Now I just save the current page and language in a property that will automatically update all subcomponents when it changes.

Bent on Bending

For the demo on my page, I thought I'd lean on my civil engineering master's to appear doubly smart. While I was in school, I had done something similar using MATLAB, but it never quite met my personal expectations. The concept is to allow the user to bend an on-screen structural member. That's the most basic level, but there's so much room to build upon this, either by tweaking the bending model to be more realistic, displaying animated plots, or adding some choice in the type of member, be it an I-beam or a hollow section.

To reach my goal required the right tools to work in three dimensions. Enter three.js. I'm not too sure what to say here, other than I had to put in the hours. The earliest days were just getting anything at all to display. Once that happened, I might be overcoming graphical glitches or tweaking quaternions—the link is as much for me as it is for you—dozens of times until I landed in the right place. Large portions have effectively been done twice, as early attempts I'd consider to be brute force. I'm pleased with how far it's come, and I plan to continue making improvements.

Working in three dimensions has made some of the poorer memory management more noticeable. The frame rate might dip in use, or behind the scenes, the memory tab of the browser's developer view will show the memory usage ballooning with continued use. All in all, things seem relatively smooth, so we'll call further improvements polish.

UPDATE: I made an effort to attack some of the processing bottlenecks. Most costly is extruding the cross-section along the curve of the bend. What I did to limit these computations was to limit the number of extrusion steps for smaller bends. It's harder to spot the polygons in the smaller bends, so I don't want to spend as much time calculating them as I do the big bends. In writing this update, I realized I should only calculate half of the geometries. Then clone and flip the opposite bends. Thought I should share the eureka moment.

What I really want to point out with the demo are the subtle details I've added to the bending model. I made an attempt to demonstrate the Poisson effect as well as anticlastic saddles forming in the flanges. Compressed areas of the section contract while areas in tension expand, that's Poisson in a nutshell. And the anticlastic part is just what makes the beam take a saddle shape as it bends. That's a result of physics. Okay, I'm not an expert on why it happens. But it's a nice touch, no?

—ピ-クu