We're going for tabs with automatic activation. This means a tab panel will be revealed as soon as it's respective tab receives focus either by click or by using the arrow keys. We want to re-use the tabs functionality in many places, with many diffe...
Big Heads Hi all! Today I launched my random character generator called Big Heads. You can combine expressions, clothing, hair styles and colors into billions of different unique characters. Embed them on your website, use them in your favourite desi...
Authentication is figuring out who the user is. Authorization is figuring out what the user is allowed to do. For this article I'll be focusing on the latter. Authenticate Before we can focus on authorization, we do need to be authenticated. So witho...
I recently came across the need for undo and redo functionality in my app. The app is an editor of sorts that allows you to add stuff and remove stuff using several different tools and keyboard shortcuts. All implemented using xstate. It would be gre...
You've probably seen a button like this one before: <Button>Cool Button</Button> One that has options: <Button secondary>Secondary Cool Button</Button> Maybe even more options: <Button tertiary>Tertiary Cool Button</Button> But what if I did this?...
If you're a computer scientist or follow @davidkpiano you've probably heard about state machines. They are awesome. Here's an example of how to use one for form handling! Our designer says the form should look like this: From this concept we can ded...
The goal is to create a backend that allows us to: Signup and login Create and manage posts through a GraphQL API Enable everyone (also unauthenticated users) to READ all posts Prevent users from editing posts by others We run the following command...
Let's consider a basic form with a controlled component in react: class Form extends React.Component { state = { value: '', }; handleChange = e => { this.setState({ value: e.target.value, }); }; render() { return ( ...