A Leptos calculator project, breaking and fixing my router, cool fonts, and other things I got up to this week.
Leptos
I wrote a calculator in Leptos to get a better feel for the framework. I've written something similar for work in vanilla JavaScript, so I thought it would be a good simple project to compare with.
It (of course) felt harder because I am not used to Leptos yet. I managed to get something very similar working, though!
It was difficult to figure out how to get the <select> box to dynamically update if the <input> box had a high enough value, but it kind of Just Worked when I called set() on the signal from a the on:input function of the <input> box.
The only thing I couldn't figure out how to do is how to set the focus on a specific element upon hitting the Clear button. This feature was simple to implement in vanilla JavaScript. I know how to set a property or call a method on an element using the web_sys crate, but I have a feeling that Leptos would make it easier than having to query the DOM when the element I'm talking about is right there in the code?
Self Hosting
Tailscale trouble
Tailscale has been acting up for me lately on Android, which is really spoiling my fun. It's supposed to let through all non-Tailscale traffic (since it's based on Wireguard), but recently it's been causing my phone's entire internet access to just not work. Maybe it has to do with DNS, but when I turned off "Use Tailscale DNS" it didn't help at all. Tailscale did recently do an update, so I kind of think that did something.
I was able to restore internet access to my phone by checking off every single app and service (besides my SSH app) in the "App split tunneling" section. There is no way to select all. When I want to do web development on my phone now, I have to go in there and uncheck my browser. I tried installing a second browser (Firefox) to only use with Tailscale so that I didn't have to do that each time. Strangely, when I have either browser unchecked, the other one also stops having connectivity.
It keeps giving me little warning messages like "we can't connect to Tailscale so your tables might be out of date" or "DNS is unreachable" with no apparent way to read more. Sometimes it works, sometimes it doesn't. When it does work, it's often spotty or I'll have to turn Tailscale off and on again.
I see a lot of closed issues that look very similar in symptoms to mine with short messages like "fixed" (no explanation), so I don't know if it's a regression or just some really common failure mode, but I don't have much of a way of knowing where to troubleshoot. The debugging messages they have people gather to report are cryptic, and I really prefer to understand what I'm sending people.
Well. Sometimes that's the price of magic! So I'm feeling really motivated to figure out Wireguard to access my LAN recently.
Wireguard inter-LAN test
I installed and configured Wireguard on my laptop using a combination of the Wireguard quickstart, the Ubuntu server documentation, and someone's blog post (which was helpful in showing me that the casual-friendly wg-quick command exists, ironically absent in the official quickstart). I feel a lot more confident about the configuration now, but I couldn't get a handshake with the router. I am equipped to test and troubleshoot now, when before I was just trying to connect through my phone.
Breaking (and fixing) OpenWRT
I realized that I hadn't used the same port for the Wireguard interface on the router and the port forwarding rule. After I... fixed? that, my router started struggling. The Wifi wouldn't respond, and I couldn't access the router over the web interface or SSH (even via Ethernet).
OpenWRT has a failsafe mode that you can boot into, but it turns off DHCP. To connect, you have to tell your network card to have a static IP address. That was stressful to figure out how to under pressure, especially when I wasn't even sure the connection would work when I did get it right!
Once I did get in, I was able to back up my config. I zipped up the relevant config files as explained in this backing up OpenWRT guide, but I had to change a couple things:
- After logging in for the first time to failsafe mode, it seems that you can't log in again without a password. Enter didn't work, and I didn't know the password if there even was one. This made it hard to zip up the files and then use
scp. I was able to set a temporary password withpasswd. - That guide suggests doing the
scpcommand from the router, which I couldn't get to work. I think my computer was silently rejecting the request, because it timed out. Not even temporarily opening my firewall worked. Trying to runscpfrom my computer gave some error, and through an OpenWrt forum post about the samescperror I discovered it was because my version ofscpwas trying to usesftpunder the hood, which the router doesn't support. A-Oflag on the command fixed the issue. - I also want to remind anyone reading this that the resulting backed-up config files contain secrets including Wifi passwords and Wireguard private keys, and they need to be stored accordingly.
After backing up, I did a soft factory reset and restored my config files one-by-one. Nothing broke. After installing the Wireguard backage and rebooting to enable it, the problem came back. I was able to delete the Wireguard interface from my config file in failsafe mode and then everything was fine again. I'm going to try again, very cautiously, using the official OpenWrt Wireguard documentation (which I hadn't used before because it doesn't use the web UI).
Icecube
We generalized our bitmap font code to allow another font option. Now we have a font trait, to be used for other font formats later. We aren't entirely sure how to best store the different kinds of fonts. For some reason I don't remember, it wouldn't let us put it in a Box.
The default fonts should get to be const, but image::load_from_memory wasn't letting us do that, despite the memory in question being loaded in with include_bytes!. Not sure if there's some fundamental reason, or if it's just because that crate hasn't made their functions const.
We'll need to decide which fonts to package with Icecube. Here are some fonts:
- Not Jam Font Pack (CC0, TTF)
- Tamzen Font (modify and distribute permitted, multiple formats)
- Creep2 (MIT, multiple formats)
- Cozette (MIT, multiple formats)
- Nb Pixel Font Bundle (CC0, TTF)
- Nb Pixel Font Bundle 2 (CC0, TTF)
- Vonwaon (CC0, TTF)
Browsers
I built Ladybird. It took a long time, but was surprisingly straightforward. They have a script.
Through their docs, I learned about wpt.fyi, which is a project that runs all the tests on all the browsers. You can look for failing tests and run them. What a weird, big world browser development must be.
Since it's so easy to identify so many bugs, I thought it might be fun to try contributing. But upon reading their code of conduct, I decided I didn't want to invest a lot of energy into the project. There are so many explicitly welcoming projects that don't leave me wondering out there that I'd rather focus on.
I was disappointed, but then my friend and coding buddy John told me about a modular browser engine project called Servo. It seems like it could be a lot nicer. As an added bonus, it's in Rust, so it would be more fun to mess around with, too! I'll try building it soon.
Discoveries
Some podcasts I enjoyed this week:
- Rustacean Station: Dioxus with Jonathan Kelley I thought the discussion on plugging into the Rust compiler to do hot patching was really cool. I was also excited to hear a cross-platform rust framework putting energy into playing nice with accessibility tools.
- Change, Technically: You deserve better brain research This was about a paper people were sharing online about your brain on AI. I try not to let the AI hype machine occupy too much space in my brain so I hadn't payed much attention to it, but I guess it wasn't a very well-designed study! It's fun to listen to people talk about research. The podcast's backlog has some interesting topics about engineering and people's brains. I'm looking forward to the one about math anxiety.
- Software Engineering Radio: Luca Palmieri on Rust In Production I had fun listening to this because I've had to be thinking about similar issues when preparing to share Accordion Task with other people. I'm always really excited to hear about books for how to do some software skill, but presented through Rust. I might take a look at it later, though it seems more relevant for when you have a backend, and my first web prototype for Accordion Task won't.