Blog: 6 articles

R3FThree.js

Last time, I covered React Three Fiber basics, from first scene to simple animation. This time, as a follow-up, let's make things respond to events like hover and click. Using these kinds of events in plain three.js means implementing them with a Raycaster, which takes a bit of…

R3FThree.js

React Three Fiber (R3F from here on) is a React renderer for three.js. Its defining feature is that you build scenes declaratively out of React components. At its most minimal, JSX like this is enough to place a 3D object in a scene: We'll use Vite this time, so start with…

Git/GitHub

GitHub CLI lets you operate GitHub from the command line. For example, you can create issues and pull requests, or check on them. In this post, I'll go through the GitHub CLI commands I find myself using the most. This is only a small slice of what it can do, so see the…

Others

This blog uses Rehype Pretty Code, which I introduced in a previous post. With Rehype Pretty Code, you can display a diff by setting the language to diff, like this: Next, import transformerNotationDiff from @shikijs/transformers: Then pass it as a Rehype Pretty Code option.…

Others

Last time, we set up syntax highlighting with Rehype Pretty Code (rehype-pretty-code) and changed the theme. This time, let's go a step further and add line numbers and highlight specific lines inside code blocks. Rehype Pretty Code lets you configure a highlighted code block…

Others

If you're writing a technical blog, syntax highlighting is a must. So in this post, let's set it up. The package we'll use is a rehype plugin called Rehype Pretty Code, which does its highlighting with Shiki. Prism is the famous name in syntax highlighting, but this time I went…