Coding

A collection of 35 posts

Coding

Libraries for writing raw SQL safely

One of my responsibilities at PropelAuth is writing example apps / guides in various languages / frameworks. It’s truly one of the most fun parts of my job. I get to play around with different stacks, new and old, and figure out the best ways to support our customers. Because of

Coding

Guide to Dependency Injection with FastAPI's Depends

One of the first concepts I learned at my first job was dependency injection. In this post we'll go over what it is and how to effectively use it, with FastAPI’s depends.

React

Complete Guide to State Management in React

If you are writing a React application, you are almost certainly managing state somewhere. State is surprisingly hard to define, but easier to understand with examples: * An input box has state - which is often just the value in the input box. * A form has state - which is usually

Next.js

It’s not just you, Next.js is getting harder to use

I wrote a blog post the other day about how Next.js Middleware can be useful for working around some of the restrictions imposed by server components. This led to some fun discussions in the world about whether this was a reasonable approach or if Next.js DX was just.

Next.js

Getting the Current URL in Next.js Server Components

You are writing a server component using the new(ish) App Router in Next.js, when you realize you need to get the current URL’s path. This could be for a sidebar, navbar, or even just breadcrumbs at the top of your page. Should be pretty easy, a quick

FastAPI

Writing Clean Code with FastAPI Dependency Injection

Before anyone else read the code that I wrote, “clean code” wasn’t really a thing for me. I had no issues reading my code because, well, I wrote it. That was also pretty true for me in college as well. Classes rarely worried about the readability of code -

Next.js

A Complete Guide To Using Cookies in Next.js

As Next.js has grown in complexity, it means there are a number of different ways to use cookies, each with their own caveats. You can read them in server components in the App Router, but you can’t modify them.

Coding

Reanimating the GeoCities Experience with react-spring

Happy Halloween! And for Halloween, we wanted to make the scariest thing we could think of… a modern version of early 2000s web design patterns. We’re going to be building this: It’s a web app where a small flock of bats follow your mouse around. We’re specifically

React

Why we still use React HOCs

If you’ve integrated with our React library, @propelauth/react, you’ve probably seen that we offer a pretty standard React hook useAuthInfo. It returns a few important pieces of information like: * isLoggedIn - whether or not the user is logged in, as you probably already knew * user - the

Coding

Using Astro View Transitions for my Chess Library

Astro 3.0 was released recently, and one of the headlining features is their support for the View Transitions API. View Transitions are a surprisingly simple way to create animations across pages. In this post, we’re going to build the frontend for an application I use to store chess

Coding

The Joy of Pointless Projects

When I was a kid, I learned how to code with QBasic and VB6. One of the first projects I ever had someone else use was... if we are being polite, a password manager for my dad. If we are being realistic, it was a small script that opened up

Next.js

5 Common Pitfalls with Server Components in Next13 (with examples)

The App Router is a new feature in NextJS 13, and it was recently switched to being the recommended option when you create a new NextJS application. This effectively replaces the Pages Router, and NextJS has documentation on how you can incrementally switch over. The most notable difference in the

Authentication

Abra-QR-dabra: Watch Passwordless Mobile Auth Magically Appear

A few days ago, a post on hacker news caught my eye, where folks were playing around with and linking to various QR Code designers. This got me to thinking, how quickly could I add a QR flow into our authentication processes? Starting Out For ease and speed, I wanted

React

Using useMutation to make an advanced toggle in React

Recently, we were adding some new functionality to our dashboard, and we wanted an experience like this: The basic features are: * The toggle should make an external request when clicked to change the setting * While the request is being made, a loading spinner should appear next to the toggle * If

Coding

Dev Tools to Make Debugging Easier

Throughout my career, I’ve found that debugging is one of the most valuable skills a developer can have. This can range from debugging small issues like “why is this test failing” to debugging large production issues across multiple systems. Most of us have had the experience of banging our

Coding

What My Cousin Vinny can teach us about debugging

If you haven’t seen My Cousin Vinny yet, go watch it real quick, we’ll wait. Great movie, right? Marisa Tomei absolutely deserved her Academy Award. In case you didn’t watch a whole movie in between the first and second line of this post, the central plot of

Coding

Custom Metadata: How It Works

Last week, we released a long awaited and asked for feature in PropelAuth, Custom Metadata on both users and organizations! However, the term “metadata” is nebulous and vague, so today we’re excited to walk through this new aspect of the product, and how you can start customizing to your

Coding

Pair Programming with GPT-4: CrosswordGPT

Now that GPT-4 has been released and a lot of incredible demos are coming out, I wanted to give it a try with a complex project. I settled on a React-based crossword puzzle because there are a few moving parts and some tricky state to manage. Ultimately, I (we?) built

Coding

Drizzle - An ORM that lets you just write SQL

If you're a developer who's already comfortable with SQL, you know how frustrating it can be to switch to an ORM that requires you to learn a whole new query language. And if you’ve never heard of an ORM before, it’s basically a library

Authentication

What Does SSO Actually Mean?

Before answering the question at hand, you should know that you’ve probably used SSO already. Any time you’ve signed up for or logged into a product using a Google or Facebook or other social account, you’ve been using SSO. SSO stands for "Single Sign-On", and

Coding

Clean Code with Rust & Axum

One of my favorite parts of the book Clean Code was seeing a code snippet that starts off gross and unmanageable and watching it iteratively improve. In this post, we’re going to do the same thing but specifically use a close-to real-world example with Rust and Axum. For each

Coding

Drawing a Turkey with CSS

We learned how to generate arbitrary shapes with CSS. We then learned how to scale, rotate, and position those shapes in order to create your own artwork. While you probably shouldn’t create giant works of art in pure CSS, you can use these techniques to add a little more pizzazz to your designs.

Coding

Generating Chess Puzzles with Genetic Algorithms

We took a library used for function minimization, attached Stockfish to it, and used it to generate surprisingly complex mate in 3 chess puzzles without too much code. Libraries like this excite me because it feels like the limit is your imagination and your ability to transform ideas into code.

Coding

This Menu Takes 20 Seconds to Scroll Through

A common cycle that products go through is: Someone builds an easy to use, slightly opinionated product. It gains adoption because it perfectly solves a problem for a set of users.

Authentication

JWT Authentication Explained with Code Examples

When I’m trying to understand a concept, I like to play around with relevant libraries. We’ll try this out with JWTs using the popular javascript library jsonwebtoken.