Tag: Webdev

April 4, 2023

What I’ve been working on

A lot has happened in the last couple of weeks. I think I’m now a permanent member of the “web development is fun” club. It’s like a slightly more frustrating LEGO with an endless amount of ever changing parts. What’s not to love? That being said, here’s what I’ve been working on in the last couple of weeks.

My new portfolio: marcel.fyi

This one took me a while but I’m very happy with the result. It was harder than my other projects because “Ah fuck it, I’ll just leave it like that” is easier to achieve when it’s not about presenting you and your work but only about learning something new. I powered through and I’m quite happy with the result.

👉 https://marcel.fyi

(I don’t understand why the domain was still available. Sorry other Marcels, it’s mine now.)

Next.js and React are still something I’m actively trying to wrap my head around but since it’s a known problem and I need ever changing challenges to keep me motivated, I wanted to spice it up a little.

Spline is a fantastic tool to add 3D elements to websites. I’m cheap, though, and paying $7/month seems crazy to me just to add a silly 3D avatar to the upper left corner of some random website. A couple of years ago, in one of my previous “let’s learn programming” bursts, I bought Three.js Journey, a fantastic course that I just wasn’t equipped to understand yet. Fast forward a couple of months of intense learning of basic programming skills later: No problem. I fired up Blender, built a 3D character of myself, found out how to hook everything up to Three.js and React Three Fiber and voilĂ . Not only am I saving $7 a month, I also learned valuable skills in the process.

Drawmatic

Drawmatic is a little app that gives you a new drawing prompt each day. The rudimentary drawing tools and time limit are there to give you a little kick of non-perfectionistic creativity to start your day. Your allotted drawing time is only counted when you’re actually making lines.

Finished drawings are being saved to local storage. I even added a “Create an image from this HTML element and copy it to your clipboard or save it to your computer” feature! All of this is unfortunately slightly broken on mobile but what can you do.

Gone Fishing

I needed something to teach myself user auth and databases so I grabbed myself a copy of Supabase and build a… I guess… game…? There’s no gameplay loop and it doesn’t make sense and isn’t fun but it works. A user can sign up via magic link. When they come back to the site and haven’t added a username yet there’s a prompt for that and after that they can… fish. For those three items that I was willing to add to the database.

I implemented a working rarity system. A way to sell items. A lot of unnecessary Framer Motion fine tuning for the bucket button and, here’s the kicker: I won’t release it to the public because it’s obviously a piece of shit that has no right to exist except as a playground for me.

That’s it for now. Thanks for reading.

Byeeee!

March 10, 2023

Adventures with Route Handlers & request methods

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.

Continue reading “Adventures with Route Handlers & request methods”
March 6, 2023

I built a whole book blog system

You might remember my ramblings about how I’m starting to get the hang of web development and actually having fun with it, right?

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!