It took me something like eight hours to understand how to bring Next.js 13 Beta to let a user put text into an input field and use that text in a function. Here’s why:
The component has to be client-side for a state driven input field to work.
The function had to be invoked server-side because it uses an (OpenAI) API key that would have otherwise been exposed.
I tried for hours to somehow manage to take the string from the input field and throw it into the server rendered component. That doesn’t even make any sense and was always going to fail. It would be a paradox.
It took me only a couple of hours to come to that conclusion. That’s when I figured that Route Handlers, formerly known as API Routes might be the solution. There was only one problem: I didn’t really understand what they are, what they’re doing and what exactly they’re meant to be used for. After playing around with them for a while, I somehow lost my mind and went back to my initial approach: Trying to convince a server side component to dynamically render something based on data from a client side component.
Well, what can I say. I did what I set out to do when I cancelled my Webflow powered book blog because of their insane pricing: I learned how to program and built my own. It’s a lot faster, has more features and doesn’t cost me anything.
You can play around with it here: buch.fyi I haven’t written any opinions for books read in 2022/23 but everything else should be there.
After talking to friends about how I don’t understand how a React application can securely use API keys and secret data like that, they pointed me in the general direction of Next.js and explained server side rendering to me. I worked through the documentation and built buch.fyi on top of it. Since I love life on the cutting edge, I’m using Next.js 13 with the new /app folder structure.
While doing so I discovered that I don’t need any API keys or databases at all. It’s all markdown files, baby!
It’s all TypeScript! Look at me, writing typed code. All type saved up in here.
I’m still using TailwindCSS for everything CSS related. It’s just fun to use, I’ll refresh my classic CSS knowledge when the time comes.
Some transitions are using Framer Motion, which is as complex as it’s amazing.
The book covers show up thanks to Open Library’s Covers API. That’s me, casually using an API to mix and match data!
It’s all hosted on Vercel. I don’t understand why it’s free and how they manage to make everything as sleek as it is but I’m a fan. It’s incredible.
I even learned how to create a RSS feed! Look at https://buch.fyi/feed and tell me this isn’t the best feed you’ve ever seen me create.
This may sound weird but I can’t wait to see what I’m doing next. So many possibilities! So much stuff to play around with!
Okay, hear me out. Web development is actually kind of fun. I mentioned that I worked through The Joy of React recently and while the course managed to transfer a lot of valuable knowledge, it didn’t do a great job at keeping me motivated.
I’m not one of those people waiting for motivation to magically hit me. I know that it’s something you create by actually sitting down and doing the work. Nevertheless, something about the course constantly trying to trick me into working on something it hasn’t taught me before, made me just watch the solution videos before actually trying to solve the problems. I knew that I could not possibly know the “right” solution, so I stopped trying. That resulted in me finishing the course without applying most of the things it covered.
100 Days of SwiftUI‘s approach worked far better for me. It covered a couple of concepts, then gave me a challenge and told me that I already know everything needed to solve it properly. I knew that it’s completely my fault if I don’t manage to come up with a solution and I also knew that I only had to re-watch the previous lessons to stumble upon the answer at some point. That’s motivating! Telling me that I’m theoretically able to solve the challenges gave me enough confidence to sit down and try until something worked.
So here’s how I got over my disgruntled and unmotivated “Web dev sucks” state:
I bought the limited early access to The Joy of React the other day and worked through the whole course since then. Switching to web development while still being at the very beginning of my journey of becoming a Swift developer might not be the smartest choice but I never claimed to follow a thought-through master plan in regards to my learning, so whatever.
Before we get started: These are my current thoughts on getting into web development as somebody who has only a basic understanding of HTML and CSS. These thoughts will be different in a year from now. Cool your jets and consider this as something like a user test for the question of “How accessible is becoming a web developer?”.
Web development is a pain in the ass. You need to understand what a terminal is, what it’s used for and how to use it to even get to the point of asking yourself “What the fuck is NPM?”. Then NPM needs to be installed which feels like hacking the Matrix, since it does something somewhere but you won’t see anything but lines of text in your little terminal window into the soul of your computer that you’re afraid to touch because what if you sudo your SSD or something.
The other day I stood in a meadow, waiting for a puppy to poop when I somehow got involved in a conversation with an 83-year-old woman. It started by me asking her if it’s okay if we come closer so the still not pooping puppy can say hi and learn that there’s no need to bark at people.
She answered: “Sure, but I won’t pet him!”.
We chatted for something like 30 minutes and I found out that she not only doesn’t want to pet this specific dog but dogs in general. She even enjoys looking after her daughter’s dog sometimes (who likes to sleep at the end of her bed when he’s visiting) and still won’t pet him.
I didn’t ask why. It didn’t really matter. She told me her rule and I understood that this is one of the foundational truths of her life. She doesn’t pet dogs.
There’s something intriguing about people who set boundaries that you can’t understand, but you can respect.
In the end, there was no poo. We found an interesting stick that had to be gnawed on for a long time, though.
Unfortunately, things are made by people. People have the tendency to live for quite some time and go through several iterations of being while existing. This, combined with the fact that nearly all 8 billion of us are now permanently connected through a series of tubes, results in everything having the potential of being tainted forever.
Everything requires a disclaimer now.
So, you enjoyed watching Seinfeld? Did you know that one of the actors had a weird racist breakdown live on stage? Oh, you’re looking forward to what seems to be the best Harry Potter game ever? Please keep in mind that the original author of the books is transphobic! You’re enjoying the wrong thing! Please be entertained by products made by, with and based on less flawed people!
These things are wrong and absolutely worth criticising. No doubt.
However, I wonder if the dynamic of always watching out for the next bad thing, being on edge because everything has the possibility of being tainted, never being able to enjoy something for what it is, because it has to be dissected on a socioecological level, does something to us.
There must be a cost to always having to watch your back in case you’re enjoying something a little too much that others feel should not be enjoyed anymore. I don’t think that’s helpful for anyones mental health.
Not criticising wrong behaviour is obviously not the solution. Attacking ourselves and everyone else all the time, because things are made by people and people are inherently flawed, doesn’t seem like the way to a content life either.
After leaving social media for over a year, I realized that one of the worst aspects of it is that it rewards you for being negative. Every complaint, gripe and grumble can be a piece of content. Complaining about something makes you look and feel like someone who knows better.
It’s an easy trap to fall into. You complain about something, people agree with you and you feel good. Since there’s always something to complain about, we’re all sitting on a cornucopia of hot takes that we can help ourselves to endlessly.
I’ve been there myself. Now that I’m back on (parts of) social media, I’m actively trying to be more positive, constructive and understanding. Shouting never-ending criticism into an endless void of an approving audience doesn’t cut it anymore. Neither as an author, nor as a consumer of such content.
This was read by an AI using a sample of my actual voice.
Turns out: When your sign up flow consists of users entering an email address and password you might want to verify that the person signing up actually owns that email address. Who would have guessed.
Since I’m using Firebase to build Goblin Mode I have a whole plethora of features and functions at my disposal that make this easily possible. In theory.
In practice I would have had to learn Firebase cloud functions to delete accounts without a verified address after a specific timeframe and that just wasn’t realistic. I’ll teach myself how cloud functions work when I start working on notifications.
Well, how to solve the issue of people being able to sign up with other people’s email addresses? You circumvent the whole thing by not offering email/password sign up at all.
Goblin Mode sign ups now use Sign in with Apple. Ethically it’s the only right choice if I want to even think about releasing the thing at some point. I’m not good enough at programming yet to say with conviction that I could build a confidence-inspiring login system any other way.
But that’s fine. This flow is surprisingly sleek and Apple even offers to hide people’s actual email addresses.
Oh and I used this opportunity to slightly tweak the whole onboarding experience. It’s not my greatest design work ever but it does the job.
My friends and I have been using Goblin Mode for over a month now. At first there was no way to interact with others at all. You could update your status and read the ones from your friends. That felt okay but we somehow thought that at least a bit of interaction could be a good addition.
Then I added likes which resulted in an significantly improved experience. People felt a little better connected to their friends. The problem quickly became that likes are a bit one-dimensional. You don’t want to “like” that somebody has a bad day.
So I took the chance and replaced likes with reactions while refactoring the whole thing. Reactions are basically the same list of tags you can add to your status updates but you can now use them to add one as a little piece of communication to somebody else’s status.
On the one hand this enables to react with better fitting communication-nuggets. On the other hand it enables micro-humour by allowing people to search for and react with funny reactions. Stuff like “This is my step count, what’s yours?” is now possible as well.
Based on the two days since this feature was released I’d say that the overall amount of interactions has decreased while the quality has increased. Receiving a reaction is far more valuable than only receiving a generic like.
I noticed that my current implementation of… basically everything results in me not being able to create good Firebase security rules for Goblin Mode. So I‘m refactoring… basically everything. What sounds like a pain in the ass is actually a lot of fun. The next iteration will be so much better. Hopefully.
A lot has happened since I shared thesetwo posts about the project I’m currently working on. I figured it’s time to let you know what has happened in the meantime. Here’s the short version: I learned a lot. Like A LOT. This is my third app ever and it’s the one where a lot of previously vague concepts finally clicked. I’m injecting dependencies, juggle with types and create view models like there’s no tomorrow. It’s so much fun!
What was supposed to be a placeholder icon has grown on me over time
A couple of weeks ago I invited some friends to try out the app and see if the overall idea works. This was a huge moment for me. People signed up for something I programmed. They created literal user accounts saved to a database I connected to an app I coded. Crazy. It got even cooler after that: They started using the app. And somehow they didn’t stop. I’m not sure if they’re only using the App because they want to be nice but it feels like they enjoy sharing one-off status updates with a closed and private group of friends. No endless timeline, no fame, only letting people know what you’re up to.
Let me give you an overview of how the app looks like at the moment.
This is the main view. You see your own current status and how old it is. Below that you’ll see all current status of your friends.
I wrote the code for all of this like three separate times. The first two iterations didn’t care about the amount of database requests at all. They worked but they weren’t scalable. I’m now using Firestore realtime updates and it’s amazing. If a friend updates their status while you’re in the app, the status automatically gets loaded from the server and displayed on top of the stack.
But what happens when a friend hasn’t updated their status since midnight?
SPIDERS!
They become stale. I like the idea of having a predefined tabula rasa moment. Each day starts with a clean slate. If you post something one minute before midnight that status will only be fresh for one minute. Slightly weird, but I kind of like it.
Speaking of likes: I implemented a system to like status. It works well and is fun. I’ll probably replace it with a system to react with a tag, though. Liking feels wrong when a friend posts a status about them being tired, feeling empty or being sad. I want to be able to react to these with “🤡 Clown”.
There are more than 130 tags now. I built an admin area and support for admin accounts into the app and can CRUD tags and tag categories in seconds. New tags and categories show up on user’s devices without the need for an app update. It’s all in the cloud, baby!
I also build a system for tags and tag categories that are behind the paywall. My current idea for monetizing the app would be to put most of the cool tags behind a subscription of some kind. Those server bills need to be paid!
With the ever increasing amount of tags my friends asked for a tag search feature. That has been implemented as well. For those moments when you need to share your shower thought quickly.
And last but not least: I revamped the whole follow/unfollow system I talked about here. It became clear that asynchronous following isn’t the right concept for an app that’s meant for you to share semi-private status updates. Now there’s a whole screen dedicated to see who requests being friends with you. If you accept a request you become friends with the other person and you can both see the status of each other. If you cancel a friendship both ex-friends stop being able to see the respective status. Fair and easy.
I’m toying with the idea of limiting the maximum number of friends each person can have. Just to drive the point of the app home. That didn’t work out very well for Path back in the day but maybe times have changed. Who knows.
That’s it for now. I still don’t know if I’m going to release this to the public at any point. I’m still a novice coder and my implementation of everything related to Firebase has a big potential to suck. I’m generally cool with my code not being the best but in this case it could result in me racking up an enormous Firebase bill. That would not be fun at all.
As I said: Who knows. I might find a way to limit the app features enough to let people try it out without me becoming poor while allowing people to pay to cover the database costs. It sure would be an interesting problem to have.
Do you feel like there’s a Goblin Mode shaped hole in the lives of you and your friends?
Happy new year, friends! I’m a little late to the party but there you go. In case you waited for me to welcome you to the new year, you can now feel wholly welcome.
Earlier this year I decided that I’m not walking enough. It’s supposed to be healthy and my average daily step count for 2021 looked like this:
That’s obviously not good enough. An average of 4000 steps is not only embarrassing but also a far cry from the 10,000 steps you’re supposed to walk if you trust some company’s advertisements. Or science.
I tried walking 10,000 steps a day previously and found that it’s basically impossible to do if you don’t have a commute or two hours a day to walk through the city. Since I’ve been working from home for six years now and I didn’t plan on walking through Berlin Mitte two hours each day, I needed a better solution.
My friend Luise told me about her WalkingPad. A slow treadmill you can put under your standing desk to walk while working. A worthwhile investment, as you can see by my stats for 2022.
If you want to walk more in 2023, make sure to check out Stoins. It’s a step counter I designed and programmed that lets you repair your walking streak by collecting Stoins. It’s a whole thing.
I’m guessing wildly how a performant and thought-through data structure is supposed to look like but this one is mine and it works and I’m proud of it. I had another breakthrough in understanding why MVVM makes sense while working on a feature related to this, by the way. What seemed like a lot of files and complicated connections between things that could just live in one file now makes sense.
Oh and I think I found the name for this project but I have to live with it for a couple of days first before I’ll announce it to the world. It was called “Shmood” for the first couple of days but I decided that that name doesn’t feel right.
And while we’re at it, here’s a bit of eye candy, featuring POW.
I’m having the time of my life over here. Without getting too much into what my next app will be: Look at this! All the data gets fetched from Firebase. Creating a new tag uploads it to firebase. The categories are documents in Firebase as well. The view showing categories and tags together is based on an array of objects that combines both. I’m juggling with data!
I wouldn’t have been able to do any of this a couple of months ago. We’re looking at a logged in user, authenticated through email and password, that has an isAdmin flag set to true. Only admin users are able to see the tag management section and are able to create new ones.
Databases! Optionals! ViewModels! Aysnc/Await! Everything comes together.
This is so much fun that I have to force myself to stop working to get a good night’s sleep.
Most people are drifting. Passively cruising along a path defined by others. Not even some specified “others” with a plan, playing us like puppeteers. “Others” as in an amalgam of randos with ill-conceived opinions and products.
It’s just so delightfully easy to ditch responsibility and with it many forms of constructive friction.
True intentionality is perhaps the quality I have come to value most in others. People who thoroughly think about the what, why and how of what they spend their severely limited lifetime with.
Embracing constructive friction, not accepting what feels right but isn’t, may be one of the most essential and attractive qualities of a person.
Some of you might have guessed it: I’m a big fan of the internet. The simple fact that I could work through this amazing seven(!) hour video about SwiftUI and Firebase by Stephan Dowless for free is still mind-blowing to me. It is free knowledge. Potentially life-changing information just lying around on the internet and all you have to do is consume it.
Stephan is an incredibly enthusiastic instructor who made the time fly by. Even though he obviously doesn’t do this for the first time, he still bursts out stuff like “How fucking slick is that!?” all the time. I felt thoroughly entertained. This is easily one of the most helpful courses I’ve worked through.
I know now that Firebase is the way to go for what I’m currently looking for. The course went through the whole process of building a low-tech Twitter clone. From signing up to fetching data from Firebase to storing images and writing and liking tweets. Not only do I now understand the basics of Firebase (and how to work with databases in general), I also got a better insight into how slightly more complex apps are supposed to be structured. MVVM is easier to understand when applied to a project with a certain complexity. I didn’t get it when other people tried to explain it with simpler examples.
This was very well invested time and I feel like I’m ready to start my next project. Something with databases! On the internet! How exciting!
Today I worked through this tutorial and came away with the conclusion that Firebase seems to be exactly what I was looking for. The Firebase SDK seems to be straight-forward enough to work well with my current skillset.
This code here creates a user that can be authenticated by email and password. Just like that. I don’t have the slightest idea what’s happening behind the scenes but to be honest: At this point I don’t really care. I’m just happy that it works.
func register() {
Auth.auth().createUser(withEmail: email, password: password) { result, error in
if error != nil {
print(error!.localizedDescription)
}
}
}
After working through the tutorial I even managed to implement a couple of experimental test functions myself. I’m off to a good start and managed to recreate my motivation by approaching the problem from a different angle.
