Creating an account (or logging in) is never something users want to spend time doing, they just want to start clicking around in your cool new hotness app. Setting aside any personal feelings about Google, having a “Log in with Google” or “Sign up with Google” really does smooth out some of that friction in the authentication process.
When we use Google APIs to sign a user in, the flow looks something like this:
A React component that allows users to drag and move both regular DOM elements as well as SVG elements.
I love making interesting interactive web things, and I recently wrote an article about creating a
useDrag hook in React. Like I mentioned in that article, there are about a bazillion drag and/or drop libraries out there, both specifically for React or otherwise. For example,
react-beautiful-dnd is, well, a beautiful drag and drop implementation that’s intended to be used to move between lists, a lot like Trello. …
TypeScript rules, and I’ve spent hours converting various JS(X) files to TS(X). Along the way, I’ve encountered quite a few head-scratchers. One recent issue I ran into was a problem that necessitated the use of a type guard, which serves to “guard” a certain block of code from using the wrong type(s). It’s a relatively simple concept, but I thought I’d go through some of the common type guards…using examples with wizards!
Let’s say you’ve got yourself a ragtag fellowship of adventurers on a quest to destroy an ancient and evil ring, and the fate of all hangs in the…
There’re approximately one billion libraries that handle moving and dragging for React floating around the Reactiverse, and a lot of them are actually pretty rad. Sometimes, though, you might not want a fully fledged library, or the libraries you found don’t accomplish what you need, or you just like to learn stuff and want to write your own darn code! 🤓
Something else to point out is that the hook we’ll be building is meant to be used for dragging an element on the page and actually changing its position through a
CSS property. We’ll therefore be using