Writing
-
Create videos as React apps with Remotion
Create dynamic videos with Remotion using HTML, CSS, JavaScript, and React. As a tech content creator, I have found many use cases and showcase them today.
-
Expressive Code: My go-to code syntax highlighter
A new syntax highlighter, Expressive Code, makes it a no-brainer to highlight code. It has many wanted features by default, like line markers and multi-themes support, and works in any build system.
-
My first impressions of Panda CSS
Tailwind CSS vs. Panda CSS: A comparison of styling solutions for the web, covering type safety, merging styles, and component variants.
-
Astro goes full on View Transitions
Explore Astro's latest features: lightweight SPA router with cross-page animations, form support, and simplifying web development tools.
-
Share state across Astro Islands with Nano Stores
Astro Islands shouldn't share state by default because they don't necessarily have the same lifetime. However, when sharing data across some of them is required – like the authenticated user's data – Nano Stores is helpful.
-
Create a proxy state machine to drive CSS transitions on state changes with XState
In order to add some behaviors to a state machine, we can change it, or we can add another machine in front of it to delegate some responsibilities. In this article I present the machine we added in front of our main machine to manage the load button of our Turing machine visualizer.
-
Create stale data indicator with XState
The are few things as boring as not knowing the state of an application. Is this document saved or should I Ctrl+S? In this article I present the stale data indicator we display on our Turing machine visualizer when visualizer is not in sync with inputs.
-
Prevent flickering loading animation with XState
Loading indicators tell users that something is happening and will complete soon. They exist to improve UX, but they can worsen UX if they are directly hidden after underlying HTTP requests resolve. In this article I share XState patterns I used to prevent this issue in our Turing machine visualizer.
-
Orchestrate request for server-side execution of Turing machine with XState
We built a Turing machine visualizer but it does not execute machines itself—it's the job of an Erlang server. The visualizer needs to make a request to execute machines, and XState is the perfect tool to orchestrate this in combination with other behaviors of the visualizer.
-
Control tape of Turing machine visualizer with XState
The execution of a Turing machine with an input produces a list of operations on a tape, that are made to be visualized. I built such a visualizer with XState, and used cool patterns to visualize operations on the tape.
-
Handle logic at the right place in React
Deciding where to put logic code in React applications is crucial to keep a codebase clean and maintainable, and even functional. Rethinking the place of the logic to go from top to bottom can help a lot, and it's the main purpose of XState.
-
Simplify data fetching in SvelteKit with page endpoints
Page endpoints are a new way to simplify fetching data from endpoints in SvelteKit. They reduce the amount of code needed to fetch data, and prevent to forget handling HTTP errors.
-
Generate RSS Feed with SvelteKit
RSS Feeds let readers know about new content on your website. SvelteKit provides endpoints that can be used to generate RSS feeds.
-
Recreate Testing Library waitFor function with XState
Testing Library brings a formidable waitFor function to your tests to wait for a condition to be met before a timeout is reached. But sometimes we need such a function outside of client-side tests.
-
Create state machines in Erlang
Erlang is a functional language that implements pattern matching. We can make use of this great feature to create declarative state machines.
-
Temporal and Actor Model
Temporal follows Actor Model to create workflows that are just plain code functions and plain actors.
-
Interpret SCXML state machines with XState
SCXML is an universal format to describe state machines. XState can be used to interpret them in JavaScript.
-
External transition to child state
All transitions are external by default with XState, except transitions with a relative target, that are internal. It can lead to bugs when not understood properly.
-
Parallel states and events with XState
Parallel states are an advanced feature of statecharts that allows to run a set of child states concurrently. We can even synchronize them easily by using normal XState events.
-
YouTube player for React Native that also works on the Web
The de facto library to use a YouTube player with React Native is react-native-youtube-iframe. Although is works perfectly on native platforms, it has some issues when used on the Web.
-
Expo in a monorepo
An Expo application can not be integrated inside a monorepo without doing some extra work. Fortunately the Expo team has published some tools to ease our job.
-
My commitment to learn in public
I commit to learn in public by sharing my knowledges and showing my mistakes to everybody everyday.