Mary Knize | mary.codes

I started painting again

Mon, 01 Apr 2024 20:00:00 GMT

I don't love how this painting turned out, but I enjoyed every moment of creating it.

(I did the best I could on the photography with a tripod, my phone, and my office lights.)

I absolutely adore how the background turned out, and I'm sure I'll use some of those techniques in the future (texturing with paper, diluted paint splatter). However, I don't love how the really experimental parts turned out. The 3D printing didn't come out quite how I envisioned, and the smaller drops, added to cover some "happy little accidents", feel like too much.

Why I paint

I enjoy painting mostly because it's something I've been doing since childhood. Growing up, there was an almost endless supply of craft paints and things to paint on, whether it was canvas, wood, or ceramic.

While I love creating digital art, I feel like I can mentally work myself into a frenzy as I'm coding. Ideas snowball into more ideas, and I can spend hours traveling down different avenues trying to create cool effects.

With paint, everything slows down. The time between idea and execution is much longer. While acrylic paint dries quickly, it's best to give layers ample time to dry. You also have to settle on the best idea and commit to it. The only undo is repainting and starting over again.

The background of this piece took well over a day to complete. There were a few paint-overs when I didn't like an effect, but in general, I painted over with diluted paint, so the past "mistakes" could still show through and give character to the painting.

A different kind of problem-solving

You probably don't think about problem-solving when creating art, but I feel like I'm constantly problem-solving when I'm painting. How do I get the effect I'm going for? What's the best way to mask part of this painting? Should I go mixed-media or just paint traditionally?

One of the problems I came across in this painting was that the tops of my 3D printed elements looked much worse than the bottoms. The simple fix was to flip the 3D printed pieces so the bottoms were now the tops. In hindsight, I probably should've taken the extra time to flip the pieces in the slicer and try printing the bottom layer with different patterns to see which I liked the best.

I also encountered a problem with a big white glob of paint dripping right into the center of the canvas. I hid the blob with the small drop, but now I just can't stop thinking about how it doesn't look right. Sometimes, the best solution is to take the time to redo it right.

Adventures in mixed media

Adding 3D elements to paintings has been something I've wanted to do for a long time. The last time I painted, which has to be over six months ago, I was trying to use 3D prints as stencils, but they haven't been a great stencil material for me, at least on canvas. A smoother surface like wood might yield better results.

Instead, I've been thinking about using 3D printing to emphasize geometric elements in my paintings, as well as to introduce some generative features. In this painting, I used some existing code to generate flow fields, saved the one I liked the most, then used Inkscape to "cut out" the drop shapes. Then, I used Tinkercad to create the extruded designs.

The process is similar to my older post, 3D printing generative art with P5.js and Blender, but instead of using Blender I've found that Tinkercad can be much faster and easier to work with for simple extruded designs. The code that I used for that earlier blog post is the same that I used for this painting, with a few changes.

Thoughts for future paintings

I'm looking into fancy specialty filaments and build plates for the 3D printed elements, specifically holographic build plates.
I like the ModPodge finish and the way that I painted it on. The X-shaped texture really looks great in person.
I want to experiment more with different ways to affix the 3D printed pieces to the canvas. I used ModPodge to glue the pieces on, but I'm thinking of other ways, like pins, thread, and even magnets.
More geometry. I really like bold, simple geometric art. It's surprisingly hard to make good, simple, geometric art without it looking too basic.
More color! I really need to get better at mixing large amounts of colors and more mindfully mixing colors to achieve the effect I want.

100 days of Japanese on Duolingo

Fri, 22 Mar 2024 21:00:00 GMT

Today I officially hit a 100 day streak of learning Japanese on Duolingo. I'm proud of the accomplishment, but at the same time, not feeling incredibly motivated to continue. While I plan to keep going, I've identified some pain points that I need to address going forward.

The gamification is too much

I'm fine with keeping up a streak, but Duolingo layers on levels of gamification. Right now, I'm in the semifinals of the Diamond Tournament. When I last stopped using Duolingo, they had just introduced the league system. When I started learning Japanese, I didn't care too much about progressing in the leagues. However, my motivation to learn the language gave me plenty of XP to easily reach Diamond League.

Now, as I'm getting deeper into Japanese and the lesson are getting harder, I'm struggling to keep up. I want to win the Diamond Tournament now that I'm close, but I also dread the upcoming grind. I hope, once I finish the tournament, I can go back to not caring about the leagues.

New lessons aren't sticking

This relates to the earlier gamification problem. Each unit is throwing new vocabulary and sentence structures at me, and I'm not able to absorb everything before moving on to the next level.

Why? It's all about the double XP bonuses.

To really get the most XP and stay at the top of the league, you have to effectively stack XP bonuses. This involves doing at least one lesson in the morning and evening every day to get the Early Bird and Night Owl XP chests. Then, each completed level grants double XP for 15 minutes.

I feel pressured to grind levels in order to get XP bonuses, so I'm "faking my way" through new concepts instead of taking my time understanding what I'm learning. It's all about doing as much as possible within 15 minutes to get the next bonus.

Also, XP bonuses only exist in the mobile app. This deters me from using the website. I think if I used the website I would consult other resources more often.

This is really a problem of my own making, I know, but also, it's the way this app was designed. Duolingo is created to generate maximum engagement to sell subscriptions and generate ad revenue, not to teach you a language.

I can't read

The first section forces you to learn hiragana and katakana to progress, and it's not exactly a fun time. You're finishing units and then you're hit with doing 15 or so hiragana/katakana lessons. You don't get any XP bonuses for these lessons. Because the writing system lessons aren't similarly rewarded, it feels like a slog.

Once the first section is finished, there are no more forced writing system roadblocks, but there's still an unstated expectation that you'll keep up with those lessons and move on to kanji for each unit.

Again, my bad for not finishing the hiragana and katakana lessons and starting with kanji, but it's honestly not emphasized. It feels like an afterthought within the app.

Not everything is bad

Even with these problems, I still actually do like learning with Duolingo! While I feel like the program could use more grammar instruction, I kind of like figuring it out for myself by parsing out sentences. Duolingo feels designed to give you those "aha!" moments when something finally clicks. This is opposed to more traditional learning methods, where you learn a concept, then implement what you learned.

Personally, I learn best with "aha!" moments. It's one reason why I love tinkering with things and strange programming problems. I also enjoy the pattern recognition skills that I get to use with this type of learning. Getting the language thrown at me feels like the most engaging way for me to learn, even when it's temporarily frustrating.

Supplementing with other resources

I'm to a point where I really do want more information on Japanese grammar. I do worry that if I continue making assumptions based on parsing out sentences, I'm going to make some wrong assumptions that will become ingrained.

For learning kanji, I found WaniKani. WaniKani is a resource specifically geared towards learning kanji and vocabulary. While I'm still trying to progress with hiragana/katakana, I know that I need to get a jump start on kanji as well, and this resource is highly recommended.

For learning grammar, I found Bunpro. I'm really enjoying Bunpro. WaniKani and Bunpro emphasize slower learning and spaced repetition. Bunpro in particular warns about trying to learn too much at once. This is contrary to Duolingo's attention-based approach.

My favorite part of Bunpro is how each lesson is broken down to really teach the quirks of Japanese grammar. If Bunpro's explanation isn't enough, there are additional resources linked at the bottom of each lesson. Before finding Bunpro I spent some time trying to read Imabi and Tae Kim, which are both excellent grammar resources, but they're a lot to take in all at once. I'm finding them much more useful linked to actual grammar lessons.

I also enjoy that Bunpro quizzes require typing in answers as opposed to using a word bank. I feel like I use the Duolingo word bank too much as a crutch.

Bunpro also offers additional "decks" (courses), and I've added on a vocabulary course as well. I do feel like I might end up overdoing it with new vocabulary, but I'm taking Bunpro at a much slower pace than Duolingo.

An additional resource that I'm interested in is MaruMori, which is a newer site that aims to be an all-in-one resource for learning Japanese. It aims to replace Duolingo, Bunpro, WaniKani, and Anki (a flashcard app). However, I'm not looking to replace Duolingo, and I also don't want to restart from the beginning. Also, MaruMori only offers a 14-day free trial, vs. the 30-day trials of Bunpro and WaniKani. (Bunpro also has a totally free option.) While I think MaruMori looks interesting (and beautifully crafted), I think I'll stick with the other options for now.

I've also looked at textbooks like Genki, which are highly recommended, but at $40 per textbook, plus an additional workbook, I kind of want to see how I fare with the online options.

The next 100 days

I'm going to be switching up my tactics a bit. I'm going to emphasize grammar over blindly following Duolingo's lead. I'm only a few days in with Bunpro and WaniKani, but I plan to utilize those resources more as I continue with Duolingo. Instead of blindly memorizing patterns as I'm doing now, I'm going to take the time to learn the grammar rules behind the patterns.

My current progress

Section 2: Explorer, Unit 10. There are 18 total units in section 2.
- This means I've completed 15 units out of a total of 143 units over 6 sections (section 7 has 6 levels, unknown if those are "units").
87216 total XP (this goes back to 2014).
11 top 3 finishes (I think this also counts all language courses).
Average 352.88 XP per day (just for Japanese).
Most XP in a day: 1928 (Feb. 10, 2024).

How I'm organizing my work in 2024

Wed, 20 Mar 2024 21:00:00 GMT

Lately, I've had a lot of projects going on. I have some ongoing projects at work as well as multiple projects I'm working on in my free time (my 3D OSM map, investigating animated gif accessibility, learning Japanese, etc.) I'm always looking for good ways to organize my work notes. Here's a few new tactics I've been using for work and personal projects.

Google Keep

I used Google Keep years ago and recently picked it back up as a bookmark alternative. When I find an interesting article or resource, I either use the Google Keep Chrome Extension if I'm on desktop (although it's been intermittently broken) or share to Keep on mobile. I have a bunch of labels that I use to sort my notes, and I'm trying to get better at re-organizing notes on a weekly basis.

A peek at my Keep:

The Verge has a good article on "How to make the most of Google Keep". I don't use colors to organize much, but I might actually start color-coding some of my notes.

I generally only use Keep for personal notes, not for work, but I should probably utilize the Keep attached to my work email. Instead, I've been using Discord channels.

Discord channels

I started using a personal Discord server to quickly jot down notes related to Jira tickets. I create a new private text channel for each ticket. It's more convenient than using Keep because I already use Discord for communication, but I do worry about running into a limit on text channels. I believe I can have up to 50 at a time. This should be plenty, because I delete tickets as they're no longer relevant.

This is a good way to keep notes for myself that I would have cluttered Jira comments with before, or would've lost within a Google Doc. Anything that is pertinent to the ticket or testing will go in comments, but miscellaneous other info can live in the Discord channel as I work on it.

I do wonder if I should transfer these notes to Keep instead, but that's one more window that I have to keep open during the day. I tend to already have a lot of Chrome tabs open, which takes me to my last and favorite new organizing tactic.

Chrome tab groups

This has been the best productivity discovery of the year. Every new ticket goes into a tab group, and just like with Discord, the tab group gets removed once the ticket is safely deployed. I like to keep documentation, articles, GitHub repos, etc. open while I'm working on a project, and this has been the best way I've found to keep all that information at the ready.

I also bounce between projects sometimes. When that happens, I can easily reopen a tab group and pick up right where I left off. I can also save a group for long-term projects so they display right in the bookmark bar, and saved groups can also be hidden to the bookmark bar as well. Again, The Verge has an article all about "How to create and save Chrome tab groups" that I found to be really helpful.

I've started using tab groups for my personal browsing, too. Right now I have groups for things that I'm currently researching, like OpenStreetMaps and AI UX design.

It's a constant battle to find ways to organize work that are both easy and useful. If I check back in six months, I may very well be trying something new. But for right now, these three things have really helped me capture and organize articles and resources without having to backtrack and re-find resources in my browser history or within a virtual pile of disorganized documents.

Watch the documentary 'Good Night Oppy' if you're feeling science-y

Mon, 18 Mar 2024 23:00:00 GMT

Good Night Oppy was an impulse watch, and totally worth it. Currently, it's available to stream on Prime Video.

A documentary, Good Night Oppy follows the lifetimes of the Spirit and Opportunity Mars rovers and their respective crews. Originally scheduled for 90-day missions, both rovers outlived their missions many times over. The film begins by explaining the reason for a geological mission to Mars: to find evidence of water. It then goes through the approval of the mission and the building of the two rovers before proceeding to the launch and harrowing descent of both rovers to the Martian surface.

Spirit and Opportunity landed on opposite sides of the planet. Spirit was surrounded by volcanic rock. Opportunity, however, landed in a crater, and immediately found bedrock and signs of ancient water (acidic water, but still water) on Mars.

Good Night Oppy also chronicles the lives of the people who worked on the Mars rover program. For some of them, their work ended once the rovers were built and deployed. But for others, they faced 90 days of working weird Martian hours. Little did they realize that they would end up working with their rovers for years.

Once the rovers were a few years into their missions, the operations crews decided to drive them as far as they could before they stopped working. Spirit and Opportunity both managed to get stuck a few times, but Spirit was the first to get permanently stuck and lose communication with Earth after 6 years. Opportunity managed to continue for 14 years, and at its 5,000 sol (Martian day) birthday, the crew used its camera to take a selfie.

The film ends with the Mars rover team coming to terms with eventually losing contact with both rovers. By the end of the mission, 14 years later, some of the original team had been replaced. Some of the new crew members were children who were inspired to study aerospace engineering by the launch of the rovers years before.

One of the most interesting things about this documentary are the scenes from Mars, created by Industrial Light & Magic. You forget that you're watching a computer generated rover. It feels like authentic footage from another planet. While the rovers are being built, you see them in archive footage, but they become true characters once they're on Mars.

Overall, I'd say this is one of the best documentaries I've watched in a while. It made me immediately want to check up on how the current rovers, Curiosity and Perserverance, are doing. I haven't been as tuned into space exploration lately as I had been in the past, and this film has recharged my interest in the subject.

Sculpted robo-goldfish, a rainbow office building, and a look inside click farms

Fri, 15 Mar 2024 12:30:00 GMT

Five-ish things that I loved this week.

I made a Chill Space-Roving Robo-Goldfish / Transforming Junk into Cosmic Wonders (video)

The attention to detail on this sculpture is stunning.

Digital walled gardens (blog post)

I really enjoyed this short post about walled gardens vs. digital gardens. It compares traversing through personal blogs to wandering through open, welcoming gardens. A few days later, I read "Following Links", which shares similar thoughts about surfing the web. Following links wherever they may lead is more interesting than relying on an algorithm.

That's one of my main motivations for Friday Faves. I want to present the most interesting links I've found by following links through the IndieWeb or through one of my RSS subscriptions.

Speaking of walled gardens and algorithms...

Photographer steps inside Vietnam’s shadowy ‘click farms’ (article)

In this interview, photographer Jack Latham recalls what he experienced researching "click farms" in Vietnam for his book "Beggar's Honey". These businesses are able to simulate thousands of user interactions which are easily used to manipulate popular opinion.

While researching, Latham said he found that algorithms — a topic of his previous book, “Latent Bloom” — often recommended videos that he said got increasingly “extreme” with each click.

“If you only digest a diet of that, it’s a matter of time you become diabetically conspiratorial,” he said. “The spreading of disinformation is the worst thing. It happens in your pocket, not newspapers, and it’s terrifying that it’s tailored to your kind of neurosis.”

I generally like to post feel-good things in my faves, but I found this too fascinating to pass up. I think if more people realized how easily algorithms can be manipulated... well, honestly, I think many people do understand, at some level, that everything they see on social media is artifically manipulated. They just don't care.

A Rainbow Office Building Brightens Up the Tokyo Streets with Prismatic Color (article)

A beautifully-designed office building featuring sheets of rainbow-painted glass. The details are minimal but the photos are gorgeous.

View this post on Instagram

A post shared by 迫慶一郎 | SAKO Architects (@keiichiro_sako)

Bob Cassette Rewinder: Hacking Detergent DRM for 98% Cost Saving (article/git repo)

I don't think I've ever seen a README with so much detail before, it really is a blog post in itself. I've also never heard of this Bob dishwasher before, but I really enjoy this story. Buying replacement dishwasher "cassettes" is expensive and wasteful, so dekuNukem, who seems to do a lot of reverse-engineering, figured out how to refill and reset the cartridges so they can be reused. While they spend a lot of time dumping data to figure out how to manually reset the wash count on the chip, they even go as far as figuring out the diswashing detergent formula used for the cassettes. It's a fascinating read.

Special 6th thing! My Post-AI Writing (blog post)

In response to being asked about the effect of AI on writing, the author explains how AI makes writing less fun and thoughtful. In a world where you can have AI gather your thoughts and polish your writing, there's something extra freeing about just letting words fall out onto the page.

"But AI has had an indirect positive and enjoyable effect on my writing: It has made me lower my craftsmanship standards, which were never very high to begin with. This is one reason I’m writing a lot more this year. The causal chain from AI is subtle, and AI is not the whole explanation for changes in my writing, so let me try to unpack the part that is."

I really enjoyed this. It mirrors my thoughts about writing and organizing thoughts publicly. There is a time and place for AI-assisted writing, as the author notes. Whenever a high amount of polish is required, and you can't run it by an editor or trust your self-editing, maybe running your writing through an AI for some final touches is the way to go.

However, when writing is for fun or being used as a way to gather your thoughts, AI just doesn't cut it. I've tinkered with using AI to help spark ideas, but it always comes up clinical and flat. I come up with more genuine ideas by consuming quality content, sitting quietly with it, and thinking.

I made... carnitas tacos with fresh corn tortillas

Wed, 13 Mar 2024 23:00:00 GMT

Tonight, I made carnitas for the first time. I also made corn tortillas for the first time. Beginner's luck, I'm sure, but they came out great.

For the carnitas, I used the recipe for crispy slow cooker carnitas from Gimme Some Oven. I made a few changes to the recipe. I used a cup of pineapple juice and pineapple chunks instead of beer or chicken stock, and I also added some leftover chipotles in adobo sauce (about 4) because I needed to use them. I also used about 3 pounds of pork roast instead of 4 to 5. I'd used the rest of the pork loin for porkchops.

I left the pork in the slow cooker on high for about 5 hours. It came out a little bit dry, so I probably should've turned it off an hour earlier. I also was able to get all the shredded pork on one sheet tray.

To make the corn tortillas, I simply used the recipe on the back of the masa harina bag, but divided it by 4. I used 1/2 cup of masa, about 3/8 cup of water, and a dash of salt. I mixed it all together and divided the dough into 4 balls of about 1.25 oz each.

I don't have a tortilla press or plastic wrap (forgot to buy some), so I pressed the dough balls between two pieces of wax paper and a plate. The plate doesn't get the dough very thin, though, so I rolled out the tortillas even thinner with a rolling pin. I still think they may have been a little too thick in the center, because my tortillas began to split as I was eating the tacos.

I threw the tortillas on the electric griddle heated to 300F for about 30 seconds to a minute on each side.

I dressed my tacos with some diced sweet onion, cilantro, and queso fresco. The second taco got a dollop of sour cream. I think they turned out pretty great!

Finding the Design Engineer within the Full-Stack Developer

Mon, 11 Mar 2024 21:00:00 GMT

Have you ever heard the term "design engineer"? Up until recently, I didn't realize that there was a niche being carved out in the last five years for people who specialize in bridging the realms of development and design.

Discovering design engineering

Last month, Jim Nielsen wrote an article called "The Case for Design Engineers, Pt. II" (2024). The article gives an example of how a static design can be interpreted many different ways by a developer. There is a distance between the design and the implementation. Nielsen makes the case that designing with code makes sense.

"Design engineers don’t just push pixels around in a GUI tool, they do it in a web browser — the medium of delivery — designing not just the visuals but the interactions that make sense for a living, breathing, moving interface.

This approach to design — designing with code — doesn’t result in one artifact that approximates the final deliverable to drive consensus, then requires a translation to the deliverable artifact itself.

Instead, the artifact is the deliverable — just in embryonic form."

This is a follow-up article to "The Case for Design Engineers" (2022). In the original article, Nielsen makes a case for having a dedicated design engineer role to reduce wasted time iterating between design and programming. The article references "Traditional Web Design Process is Fundamentally Broken" (2022) which explains how many wireframes and mockups, a.k.a "artifacts", are now required for a responsive web design, if they are created in a static medium. According to Nielsen, "design engineers are worth their weight in gold" because of this problem.

"They have an understanding of the constraints of the medium, so from sketches to wireframe to high fidelity mocks, they only have to produce one or two artifacts while simultaneously keeping a picture in their head of how the elements of those designs flex and flow and change across different sizes."

In "On Design Engineering: I think I might be a design engineer..." (2021), Trys Mudford narrows down the niche in which design engineers live. Many web developers either live in the backend or back-of-the-front-end, where design is a second-class citizen to functionality. Design engineers live in the front-of-the-front-end, and work closely with designers to bridge the gap between design and functionality. Design engineers work alongside designers and back-of-the-front-end engineers to come up with solutions that are both beautiful and functional.

"In essence, a design engineer’s goal is to be helpful. Helping UX come to sound decisions, helping research get the most useful insights from their testing, helping designers generate sound & deliverable ideas, and helping engineers understand the design intention. But the primary focus is on doing anything they can to help translate the design for the engineering team."

Brad Frost writes about the divide between front-of-the-front-end and back-of-the-front-end web development (2021). A front-of-the-front-end developer is an expert in semantic HTML, CSS, DOM manipulation, accessibility, and design. A back-of-the-front-end developer is an expert in business logic, routing, APIs, authentication, and data.

Adactio (Jeremy Keith) has an article about consciously specializing in front-of-the-front-end development as a design engineer (2021). Specializing in UX design and development allowed Keith's clients to utilize whatever backends they wanted, while Keith focused on creating optimized front-end experiences.

One of the earliest articles I could find on this subject, although the term "design engineer" never appears, is "The Great Divide" (2019) by Chris Coyier. This article began exploring the differences in JavaScript developers that was already happening at that time. Two front-end developers could have vastly different skillsets and goals based upon whether they specialized in presentation or business logic, but they're still both called front-end developers.

"Two 'front-end web developers' can be standing right next to each other and have little, if any, skill sets in common. That’s downright bizarre to me for a job title so specific and ubiquitous. I’m sure that’s already the case with a job title like designer, but front-end web developer is a niche within a niche already."

Perhaps InVision's Design Engineering Handbook (2020) explains design engineering best:

"Simply put, design engineering is where solutions are created at the intersection of design and development. It’s not only about solving problems for customers; it’s also about improving the design and engineering process, making a space for communication and collaboration, and building a great experience. Or to phrase it another way: It’s a question of building the right thing versus building the thing right."

How I feel about design engineering as a full-stack developer

I feel like the realm of design engineering is an area of development that I gravitate toward, but I have a hard time understanding it as a job title and full-time role.

I started out as a front-of-the-front-end developer. I could consume an API and transform data, but my main focus was on creating HTML and CSS, with a dash of JavaScript for interactivity. I spent a lot of time creating WordPress themes, which required a bit of JavaScript and PHP, but mostly, I was focused on making things look great.

Once I was hired as a professional front-end developer I had to quickly learn more about working within a full JavaScript application. I had to learn how to work within a large JavaScript app and use data from APIs. I hadn't given much mind to security when working on my own projects, so I had to learn all about XSS attacks and form validation. I started collecting skills like Pokémon badges, and each one took me further away from my safe space in front-of-the-front-end land.

Eventually, I started working with PHP and databases. I mean really working with them. I've gotten to a point where I can write a pretty complex SQL query in a few minutes. Now I mostly work on a PHP monolith with a sprinkling of React frontends.

On a small team, nobody has the luxury of working only on the front-of-the-front end. Part of what makes my job interesting is being able to work on a wide variety projects, and no two are alike. One week I might be working on something front-of-the-front-end, like implementing a new modal or form. The next week I might be designing email deployments. Another week, I might be working on payments.

However, one of the best parts of my job is that I often get a lot of leeway in my project designs. Oftentimes, I have design guidelines that I have to follow, but I'm given time to iterate on an idea and try out different designs and interactions. While my sole focus isn't on design engineering, my goal is the same, to create solutions that are accessible and easy to use.

Focusing on design engineering skills

While I'm a generalist by necessity, I am increasingly focusing on developing my design engineering skills in my free time. I've been reading design books. I'm learning Figma. I'm working through lecture notes on User Interface Design and Implementation at MIT OpenCourseWare. As I dig deeper I find a wide variety of sub-niches that are appealing to me.

Accessibility. How can systems be designed and implemented to be accessible to the widest audience possible? How can human-computer interaction be made easier for everyone, regardless of ability?
WebXR. How do we create augmented and virtual experiences that are user-friendly and accessible? How do people respond to XR experiences? In what ways can XR experiences be democratized, instead of walled behind expensive headsets and glasses?
Human-centered AI (HCAI). How can AI be used to augment human capabilities? How should user interfaces be designed to best serve humans in a safe and understandable way?

These are just some of the topics that I've been thinking about lately. Do they really belong as part of design engineering? Maybe they're more on the fringes, especially WebXR and human-centered AI. However, I think they're some of the most interesting topics to research right now.

Daily practice, spinning guitars, and Eloquent Javascript

Fri, 08 Mar 2024 00:00:00 GMT

Five-ish things that I loved this week.

‘I paint daily, no matter what’: how one woman’s coping mechanism became a global business (article)

I found this article a little sad but very inspiring. It's about Margo McDaid finding success in art after overcoming tragedy. She turned to creating daily paintings to cope, and years later, her prolific painting has honed her craft and brought her success as an artist.

“I wanted to see how my work would change if I practised every day. As a teacher, I’d watch how kids developed, from circling around their hands to joined-up handwriting... All the Old Masters were apprentices. Trying to improve in a short space of time is tough. Doing it daily, you don’t expect outcomes quickly.”

The article also discusses a few other people in other fields who use daily practice and repetition to hone their respective crafts. One of my favorite books is Atomic Habits, which not only emphasises daily practice, but striving to be a little bit better every day. I suppose that's why this article resonated with me, it reminded me about the importance of daily habits. (I also talk about James Clear and his 1% better theory in my post "Streaking into the new year").

What Happens When Your Art Is Used to Train AI (interview)

Another artist, Dorothy Gambrell of Cat and Girl, reacts to her name being included in a court document naming artists whose work has been used to train AI, specifically Midjourney. She created a comic called 4,000 of my closest friends about the difficulty of being a small, independent artist whose work was then taken and used by others for for-profit purposes.

But this interview is so much more than that. It discusses visibility on the internet, content silos, and how the wealthy have already been monetizing our work via the main avenues of communication on the internet, long before the AI age. And, now that everything is fed to us by "the algorithm" on social media, or hidden behind low-effort crap, finding interesting, authentic content on the internet is no longer satisfying.

"Internet users in 1999 were seeking out things to read and see. We had the internet, we wanted it to entertain us, and there just wasn’t much there. So it was really exciting to find someone’s comics! People were really excited to find your comics! And then the internet filled up, and it was hard to get anyone’s attention, because there were so many other things to see and do. And now… there are so many things, but it feels like there’s nothing. We’re all content, and content is just an infinite slog. I feel that way as a reader, too. Somehow removing the small effort of searching something out or entering a url has made everything we see feel equally worthless."

The more that I read different perspectives on AI, and the more that I think about it, the more I'm convinced that AI is going to further homogenize the internet in general. AI generated content is, in my opinion, quite bland, and as it proliferates it will just make the internet more and more bland, and browsers like the Arc Browser (I touch on its summarization capabilities a bit in a prior Friday Fave) will condense the blandness even further. It makes me hopeful that genuine, personal content created by humans will become increasingly valuable.

...Well, this should probably be its own blog post, shouldn't it?

Eloquent JavaScript, Fourth Edition (book)

Eloquent JavaScript, Second Edition was one of the first JavaScript books I read when I was learning JavaScript. I look forward to reading through this version and seeing what's changed. I didn't read the third edition, so I assume there's going to be big changes from the second. If you're interested in learning JavaScript or you're a pro looking for a refresher (like me!), I think Eloquent JavaScript is a great place to start.

Anson's Aggregated Feed (website)

This is a really cool project that takes RSS feeds and displays them card-style. It's inspired by The Webpage, which displays feeds in a newspaper format. I really like the idea of having a publicly-available aggregation of RSS feeds that anyone can read and use as their own RSS inspiration. Of course, now this has me thinking about building my own aggregator, but I'm also interested in an open source solution like FreshRSS.

360 spinning guitar (video)

I really love watching people work on ridiculous engineering projects. The more creative the better. Creative projects require creative solutions, and I love watching people come up with creative solutions that actually work. Not only is this video a great look into the build process of this seemingly impossible guitar, but it's also incredibly funny.

"It's kind of flat. I see a problem here. So I cut it into six parts and you know what? Now it's broken. But now it's broken and cylindrical."

Displaying the current Git branch in my Linux terminal prompt

Wed, 06 Mar 2024 13:00:00 GMT

It wasn't until I heard about a cool, fast, new, insert-superlative-here terminal that I began thinking about how nice it would be to have the active Git branch displayed in the terminal at all times. Because this was a feature of the cool, fast, new, etc. terminal I decided to install it... and was promptly hit with a login page. Excuse me? I need an account registered on someone else's site to use a terminal installed on my computer?

As it turns out, getting and displaying the current Git branch is easy peasy if you can stomach a little bash scripting.

Step one, have Git installed and be on a relatively recent version. I currently have 2.34.1 installed, and the latest release, as of this writing, is 2.44.0.

Step two, open ~/.bashrc in your text editor of choice. I'm a vim girl, so

vim ~/.bashrc

Step three, add a line that begins with PS1= that will contain whatever information you want in the terminal prompt. This is where things start to get a little bit technical.

This is a very simple prompt, showing the current directory, the Git branch, and a dollar sign.

PS1="\w\$(__git_ps1)\$ "

However, I like things to be colorful and interesting, so I've added some colors and an emoji.

PS1="💀 \[\033[01;36m\]\w\[\033[01;33m\]\$(__git_ps1)\[\033[01;32m\]\$\[\033[00m\] "

To break it down:

\[\033[01;36m\] is a blue color in the terminal. \w is the current directory. \[\033[01;33m\] is a yellow color in my terminal. \$(__git_ps1) appends the current Git branch. The $ is important, without it, the branch name won't update when you change branches. \[\033[01;32m\] is a green color, \$ prints a dollar sign, and \[\033[00m\] returns the text following the prompt back to white, unbolded text.

Step four, save and exit out of your text editor.

Step five, type the following into your terminal:

source ~/.bashrc

The terminal should change to reflect your new settings.

I know just enough about .bashrc and bash scripting to be dangerous, so take care while following these steps, and maybe also look up some other resources if you get stuck. Here's one from the actual Git docs: Git in Other Environments - Git in Bash. These are the steps that worked for me on a Pop!_OS system, so if you're on an Ubuntu flavor of Linux, I think this will work for you too.

Generating a 3D map with OpenStreetMap and A-Frame

Mon, 04 Mar 2024 13:00:00 GMT

Over the weekend, I was able to work more on my Disney World wait time project that I began over at Translating OpenStreetMap data to HTML5 Canvas with Rust and WebAssembly. This project was last left in a state where I was pulling data from the Overpass API, processing it using Rust, and then using the generated coordinates to draw to an HTML5 canvas.

It's a proof-of-concept that I was really just using to see if I could (more or less) get accurate coordinates from OpenStreetMaps. However, the goal was never really to draw to a canvas. The goal is to draw the map in 3D.

Set up the 3D environment with A-Frame
Creating a custom geometry component
Generating custom geometries from OSM data
Rust code updates
Drawing the rest of the map
Creating walkway lines
Ongoing work
Demo

Set up the 3D environment with A-Frame

As a reminder, I'm sort of freestyling right now with static files. I'm using http-server, globally installed, to serve my files. Eventually I'll probably migrate all of this into React or some other sort of framework/build system. But for now, this is freeform jazz, baby. I'm also jumping right into this from where I left off before.

First, I'm going to clean up index.html a bit. I'm going to take the script that I had previously written within the body of index.html and add it to js/script.mjs.

I'm also going to add three scripts to the head of index.html. One adds A-Frame to my project, the second adds a basic environment with aframe-environment-component, and the third adds orbit controls.

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.3.2/dist/aframe-orbit-controls.min.js"></script>
<script type="module" src="js/script.mjs"></script>

Now, in the body of index.html, I'm going to add a basic scene that should orbit around the origin of the scene. For the environment preset, I'm going to use the "contact" setting, but remove the trees and create a completely flat ground. (Why? Because I think it looks cool.) I've also added orbit controls to the camera. I commented out <script type="module" src="js/script.mjs"></script> for now, the lack of a canvas will make that script error out.

<body>
    <a-scene environment="preset: contact; dressing: none; ground: flat; fog: 0.7">
        <a-camera look-controls="enabled: false" orbit-controls="target: 0 0 0; minDistance: 2; maxDistance: 180; initialPosition: 0 2 -5; rotateSpeed: 0.5; maxPolarAngle: 85"></a-camera>
    </a-scene>
</body>

This is a quick and easy way to create a basic scene and test that everything is working correctly.

Creating a custom geometry component

The next step is to create a component that will register a custom geometry in A-Frame. This geometry component will use the coordinates provided by the OSM conversion and create basic 3D shapes. Once the component is created, it'll be appended to the <a-scene>.

First, I'll create a new JavaScript file called geom.js and put that in the same js directory as script.mjs. This file will hold any custom A-Frame geometries that I want to create.

Creating a custom A-Frame geometry requires a good amount of knowledge of THREE.js. A-Frame is built with THREE.js as a base, allowing you to easily create immersive 3D scenes with basic geometries, but it's incredibly extensible by tapping into THREE.js's custom geometries.

Here's the full code for the custom component:

AFRAME.registerGeometry('map-item', {
  schema: {
    height: {default: 1},
    vertices: {
      default: ['-2 -2', '-2 0', '1 1', '2 0'],
    }
  },
  init: function(data) {
    const shape = new THREE.Shape();
    // A THREE.Shape is created by drawing lines between vertices.
    for (let i = 0; i < data.vertices.length; i++) {
      let vertex = data.vertices[i];
      let [x, y] = vertex.split(' ').map(val => parseFloat(val));
      if (i === 0) {
        shape.moveTo(x, y);
      } else {
        shape.lineTo(x, y);
      }
    }
    // Adding a very small bevel to the top of each geometry.
    const extrudeSettings = {
      steps: 2,
      depth: data.height,
      bevelEnabled: true,
      bevelThickness: 0.02,
      bevelSize: 0.01,
      bevelSegments: 8,
    };
    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    // Geometry needs to be rotated and translated to be in the right position
    geometry.rotateX(Math.PI / 2);
    geometry.translate(0, data.height, 0);
    geometry.computeBoundingBox();
    this.geometry = geometry;
  }
});

A-Frame requires a schema and init function to register a component. There are other lifecycle methods, but because I'm not animating or updating the geometry, I should be able to get by with just using init.

For the schema, I want to be able to set the height of the geometry and the vertices from the <a-entity> properties. I've added some default vertices as a test.

In the init function, I'm initializing a new THREE.Shape. For each of the vertices, I can't pass a two-dimensional array in A-Frame, so I'll pass the vertices as "x y", splitting them by the space. I'm iterating over each vertex and updating the shape. Once the shape is complete, I set extrude settings for the Extrude Geometry. The height will be dictated by whatever height I pass in for the map type.

Finally, I create a new Extrude Geometry by passing in the shape and extrude settings. Then, I'm rotating the geometry by 90 degrees on the X axis and translating it up by the amount of its height. This gets the geometry in the right position. Finally, I'm going to compute the bounding box (I might need that later, I'm not sure) and set the geometry to this.geometry.

This should be enough to generate a basic shape and extrude it. I'm going to write some temporary JavaScript below the new component that will generate and append a new element to the scene.

const scene = document.querySelector('a-scene');
let mapItem = document.createElement('a-entity');
mapItem.setAttribute('geometry', {
  primitive: 'map-item'
});
mapItem.setAttribute('material', {
  color: '#bada55'
});
scene.appendChild(mapItem);

I'm using the default vertices and height and adding a second attribute as a material.

I'll add the script to index.html with the defer attribute. That way, the script won't be executed until after the document is parsed. Otherwise, a-scene isn't available to the script.

<script defer src="js/geom.js"></script>

After testing this script, I can remove the defer as long as I don't try to manipulate the DOM in geom.js, which I don't plan to do. This is the result of the new geometry component:

Generating custom geometries from OSM data

Now, I want to feed the vertices supplied by OSM to my custom geometry component to create map elements. First, I'm going to remove that test script from js/geom.js and remove the defer from it in index.html.

I'm removing all references to canvas in script.mjs, and instead querying for the <a-scene> element.

let scene = document.querySelector('a-scene');

Then, I will create a function very similar to the code that I just deleted from geom.js.

function createGeometry(p, height, color) {
  // WASM returns a 3-dimensional array. Map over each element, then the points.
  for (let polygon of p) {
    let vertices = polygon.map(point => {
      let [x, y] = point;
      return `${x} ${y}`; // Fix this in Rust to return 2D array.
    });
    // Create the element and append.
    let mapItem = document.createElement('a-entity');
    mapItem.setAttribute('geometry', {
      primitive: 'map-item',
      height,
      vertices,
    });
    mapItem.setAttribute('material', {
      color,
    });
    scene.appendChild(mapItem);
  }
}

I will comment out all the calls to drawPolygons() and instead add a function call to createGeometry() for the water elements.

createGeometry(water, 0.05, 'rgb(83,156,156)');

Refreshing the page now displays a huge ocean of water. Scrolling out, it's larger than the A-Frame world. I'm going to update the Rust code to scale down the scene and to return a 2D array instead of a 3D array. There's no reason to do the conversion in JavaScript, just return data in the correct format the first time!

Rust code updates

All the Rust changes take place in the process_points function.

fn process_points(node: &osm::Node, bounds: &osm::Bounds, width: f64, height: f64) -> JsValue {
    let y = map_points(node.lat, bounds.minlat, bounds.maxlat, -width / 2.0, width / 2.0) / 50.0;
    let x = map_points(node.lon, bounds.minlon, bounds.maxlon, -height / 2.0, height / 2.0) / 50.0 * -1.0;
    JsValue::from_str(&format!("{} {}", x, y))
}

I'm dividing both points calculations by 50 in order to scale the scene to a manageable size, and I'm also multiplying the x axis by -1, because my bad math is coming back to haunt me.

I've also updated the start2 and stop2 points for the map_points function to be from half the width/height in the negative direction to half the width/height in the positive direction. This is due to the fact that the HTML5 canvas considers the origin to be in the top left corner of the canvas, while A-Frame puts the origin in the middle of the scene.

I'm also returning a formatted 'x y' string from this function as well, as opposed to the array that it previously returned.

Finally, script.mjs is updated to remove that extra vertex parsing from createGeometry();

function createGeometry(p, height, color) {
  for (let vertices of p) {
    let mapItem = document.createElement('a-entity');
    mapItem.setAttribute('geometry', {
      primitive: 'map-item',
      height,
      vertices,
    });
    mapItem.setAttribute('material', {
      color,
    });
    scene.appendChild(mapItem);
  }
}

I'm also going to update the camera element to initialPosition: 0 10 -20, just so I can get more of the map in view.

Drawing the rest of the map

Creating the rest of the map geometry is as easy as converting drawPolygons() function calls to createGeometry().

createGeometry(water, 0.05, 'rgb(83,156,156)');
createGeometry(gardens, 0.1, 'rgb(136,172,140)');
createGeometry(buildings, 0.5, 'rgb(88,87,98)');
createGeometry(named_buildings, 1.0, 'rgb(88,87,98)');

Buildings are now the same color but I've made the "named buildings" (which should mostly be rides and attractions) twice as tall. I plan to tweak the building heights as I go along.

Here's an initial look down the center of Main Street, USA towards Cinderella Castle (which obviously does not look like a castle).

Creating walkway lines

To add the lines for walkway areas, I've decided to skip creating a new A-Frame geometry component. Instead, I'm going to add a THREE.Line directly to the scene. I figure that since the walkway won't have any interactivity, it makes more sense to just add it directly. I may end up taking the walkway lines out altogether (or have a toggle to display them).

function createLineGeometry(p) {
  for (let vertices of p) {
    const points = vertices.map(point => {
      let [x, y] = point.split(' ').map(val => parseFloat(val));
      return new THREE.Vector3(x, 0.01, y);
    });
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000}));
    scene.object3D.add(line);
  }
}

This function is constructed similarly to the earlier component, but instead of creating a shape, I'm creating a THREE.Vector3 with the y-axis just slightly above 0. Then, the THREE.BufferGeometry is set from the array of vectors, which is then used to build the line. The THREE.js documentation has an entire page dedicated to drawing lines.

An important note is that the line is added to scene.object3D. This is the proper way to access the THREE.js scene from A-Frame.

Ongoing work

I'm still working on adding more features and detail to the 3D map by querying more features. I'm also looking into some problems when it comes to adding sidewalks/walkways. In some cases, relations are made of many different tiny ways, that are then stitched together to form the outline of an area. My geometry component doesn't like that very much. So, I'm working on that and other optimizations to make the map look great before adding wait times.

Demo

Click and hold to rotate, mouse wheel to zoom.