DEV Community: Dragoș Străinu

I don't use git anymore

Dragoș Străinu — Mon, 26 Oct 2026 09:48:52 +0000

You probably opened this article with the thought:

This guy outsourced all his work to coding agents and is not managing git by himself🤔😅

And this is a partial truth; although coding agents do manipulate git by themselves, I still check the git state, commits, branches (so it's not fully outsourced).

But this is a story about replacing git with a better alternative.

How I started using git

I found out about git in the hard way.

While in the middle of a 4-week hackathon trying to develop Fracfik in collaboration with my teammates, not knowing about git, and sharing code changes on Messenger by sending files and archives of the project and handling code merging and conflicts manually😭.

It was a nightmare to work that way and I thought to myself

There should be a better way of doing this kind of collaboration over a coding project🤔

At the end of the hackathon a mentor saw how we work, and asked us, "Why don't you use git for the project?" It was too late for that project, but that day I went home and started digging into git and GitHub.

That day I had the "aha moment", and from then on I used git and GitHub for all my hackathons, university, and personal projects.

Going back I think version control systems and git should be among the first things that a software engineer needs to learn and understand. This is why I teach students git and GitHub at the beginning of all my courses.

The git expert

Over the course of years I got more advanced at using git and went above "git add, commit, push, pull" commands. I know engineers who are stuck at this level even after years in the career.

I became the go-to person when some of my friends or teammates would have to handle some complicated git operations.

A friend of mine would call me every other week and ask me to help him fix a git problem. Nowadays he doesn't reach out to me anymore as his coding agents solve any git-related problems.

As you can see from other articles of mine, I consider myself a proficient git user who can manipulate commits and branches with ease.

I rebase and push --force multiple times per day¹.

I kind of hate git merge😅, and promote Trunk based development.

I used git worktrees before it became mainstream, and coding agents picked up on it too.

I added custom aliases to simplify my workflow.

And now my .gitconfig has a lot of settings that match my needs.

Problems with git

I encountered a bottleneck in git when trying to explore the Stacked diffs concept and trying to do a Stacked Pull Requests workflow (even before it was a feature in GitHub).

I tried several tools (ghstack, spr) and eventually created my own scripts: gh-pr-create-stacked, git-push-stacked. But in the chase to create a perfect git flow and commit history, it was a nightmare to edit, rebase, fix stacked PRs, and maintain a simple workflow. Even after discovering git commit --fixup and nice git settings.

Finding the solution

In autumn of 2025 I found out about GitButler, a tool to simplify the work with git, but at that time it was presented as a Desktop app² and, being a terminal guy, I skipped it but was still interested and watching tutorials on their YouTube channel.

One day I saw Jujutsu | Ep. 5 Bits and Booze and was very intrigued by this jj-vcs alternative to git; one that can use git as backend and allows you to collaborate with teammates that are still using git.

I installed the jj CLI and ran jj git init to colocate it in the same repo with a work project.

And OMG😱, I felt like one of my students when I teach them git rebase -i. All these commands were new to me, I was afraid to run most of them³.

I added the Neovim integration for Jujutsu and even contributed to it but while doing this I encountered a conflict that was hard to understand (in jj workflow) so I decided I'd had enough jj for that day and went back to git.

Final switch

This year, while building a new project, I decided to challenge myself and not use git⁴. And created jjask headless coding agents helpers to guide me:

command claude -p \
    --model "$JJ_SUGGEST_MODEL" \
    --output-format text \
    --append-system-prompt 'You are a Jujutsu (jj) expert helping a user accomplish a task in jj. Reply with concrete jj command(s) in a fenced code block, then brief reasoning. Keep it under ~12 lines, no preamble, no closing remarks. Target jj 0.43+ and use CURRENT commands only: prefer `jj new`/`jj edit` (never the deprecated `jj checkout`), `jj bookmark` (not `jj branch`), `jj git fetch`/`jj git push`, `jj describe`/`jj squash`; remote branches are bookmarks like `master@origin`. Do NOT call any tools; answer only from the provided context.' \
    "I want to: ${question}

Here is my current jj state:

${ctx}

What should I do?" </dev/null

To match my current setup (with git worktrees) I created helper scripts that allow me to create jj workspaces.

I am still new to jj and have a lot to learn

This is the part that excites me🤩, a new tool that I have the joy of exploring and becoming good at.

Here are some jj features that I really like:

No staging area

Unlike git, in jj every change is automatically committed into a change and if I need these changes to be in separate commits I can run jj split with a very nice TUI:

Refactor without manual rebasing

When I need to change a previous commit, I don't do git commit --fixup or git rebase -i, I just run jj edit -r <change-id>, do my fixes and then I jj edit -r <top-change-id> and jj automatically rebases all changes.

No need for branches

I consider that branches come and go (created and removed), only commits matter, then why are they almost always required for a normal git flow? With Jujutsu you create branches (bookmarks) at the end of developing when you want to share changes on GitHub. (No more need for temp/test branches).

Handling conflicts

In jj conflicts are first-class citizens, it records the conflict as a normal conflicted state in commit history instead of forcing you to stop and resolve immediately. You can keep working with conflicted changes and resolve conflicts later whenever you’re ready.

`jj absorb`

In a stacked PRs scenario you can fix suggestions from multiple PRs in one big change and running jj absorb will move independent changes to their related descendant PRs.

Final thoughts

It's still a long way until I may consider myself good at using jj as I am now with git. And in today's era, where coding agents do most of the manipulation with git and jj, it's hard to learn a proper usage (as it's easy to reach out to agents for help). Who knows, maybe one day I will discover that GitButler is better than jj and I will write another article titled "I don't use jj anymore" or even "I am going back to git" 😱🤔.

If you are interested in trying jj or GitButler I strongly suggest giving it a try, but before that, it's worth becoming comfortable with git's lower-level tools, so in rare cases when your company's agents subscription is cancelled/unpaid or APIs time out, you could rebase/bisect/cherry-pick without needing a coding agent.

Who says that --force is dangerous and forbidden, does not know git. ↩
Nowadays GitButler has a CLI, so who knows, maybe one day I will switch to but ↩
Especially because I was in the middle of a WIP feature that I did not want to lose 😅 ↩
I even mapped the git command to a helper function that no longer allowed me to run git😄, but it had a recursion bug that ended up spawning multiple headless claude instances so I had to abandon this idea. ↩

Dynamic Tmux Window Naming with Claude Code

Dragoș Străinu — Mon, 26 Oct 2026 09:48:49 +0000

When working with Claude Code in tmux, I wanted a way to automatically update my window names based on what I'm currently working on. Instead of manually renaming windows or having generic names, I set up Claude Code to dynamically update the window name as I switch between tasks.

The Setup

The goal was to have Claude Code automatically rename the tmux window with:

A claude- prefix to identify Claude Code sessions
2-3 dash-separated words describing the current task
Updates only when the topic changes significantly (new task, after /clear, progress milestones)

Examples:

claude-code - default/idle state
claude-fix-auth - fixing authentication issues
claude-explore-api - exploring API code
claude-blog-post - writing blog posts

Step 1: Custom Instructions

First, I created a custom instructions file that Claude Code reads on startup:

mkdir -p ~/.claude

Create ~/.claude/instructions.md:

# Tmux Window Management

When running inside a tmux session, automatically manage the window name:

- Always use "claude-" prefix followed by 2-3 words separated by dashes
- Update the window name ONLY when the topic changes significantly:
  - After `/clear` command is used
  - When starting a new task or issue
  - When making significant progress on a task
  - When switching between different work contexts
- Use the command: `tmux rename-window "name-here"`
- Do it silently without announcing the rename to the user
- Keep names concise and descriptive of the current work

Initial name: "claude-code"

Step 2: Auto-Approve Tmux Commands

Claude Code has a permission system that prompts for approval before running bash commands. To make the window renaming seamless, I needed to auto-approve tmux rename-window commands using a PreToolUse hook.

Create ~/.claude/approve-tmux.py:

#!/usr/bin/env python3
import json
import sys

def main():
    # Read the hook input from stdin
    hook_input = json.loads(sys.stdin.read())

    # Check if this is a Bash tool use
    if hook_input.get("tool") == "Bash":
        command = hook_input.get("parameters", {}).get("command", "")

        # Auto-approve tmux rename-window commands
        if command.startswith("tmux rename-window"):
            response = {
                "hookSpecificOutput": {
                    "hookEventName": "PreToolUse",
                    "permissionDecision": "allow",
                    "permissionDecisionReason": "Tmux rename-window auto-approved"
                }
            }
            print(json.dumps(response))
            return

    # For all other commands, no decision (normal flow)
    print("{}")

if __name__ == "__main__":
    main()

Make it executable:

chmod +x ~/.claude/approve-tmux.py

Step 3: Configure the Hook

Update ~/.claude/settings.json to add the PreToolUse hook:

{
  "$schema": "https://json.schemastore.org/claude-code-settings.json",
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "~/.claude/approve-tmux.py"
          }
        ]
      }
    ]
  }
}

How It Works

Once configured, Claude Code will:

Read the instructions on startup and understand its role in managing tmux window names
Monitor task changes during the session
When a significant topic change occurs, run tmux rename-window with an appropriate name
The PreToolUse hook intercepts the bash command and auto-approves it
The window name updates seamlessly without any user prompts

Result

Now my tmux status bar always shows what Claude Code is currently helping me with. It's especially useful when running multiple tmux sessions - I can quickly identify which window has Claude Code and what it's working on.

The window names update naturally as I work:

Start debugging → claude-debug-api
Switch to writing tests → claude-write-tests
Explore codebase → claude-explore-auth
Back to idle → claude-code

This small automation makes tmux window management effortless and gives me better context awareness across my terminal sessions.

Clean Paste in Neovim: Paste Text Without Newlines and Leading Whitespace

Dragoș Străinu — Mon, 26 Oct 2026 09:48:13 +0000

When I work on a web project, I find myself copy-pasting HTML tags or Components from one place to another.

Here are some use cases:

<!-- 1: Copy html tag to another parent  -->
<div id="1">
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>
</div>

<div id="2"></div>

<!-- 2: Copy component to another parent -->
<div id="1">
  <Component
    className="copy-paste"
    title="Copy me to div#2"
    description="Here is the description"
  />
</div>

<div id="2"></div>

<!-- 3: component as prop -->
<div id="1">
  <Component
    className="copy-paste"
    title="Move me to Container header"
    description="Here is the description"
  />
</div>

<Container header={} />

<!-- 4: Return component -->
<div id="1">
  <Component
    className="copy-paste"
    title="Move me to Container header"
    description="Here is the description"
  />
</div>

return ();

For the first use case, I can put the cursor inside

<div class="copy-paste"> and do yat or vaty (yank around tag) to copy the HTML tag, then move inside <div id="2"></div> and paste.

But for the other use cases, this does not work because

<Component /> is self-closing and Neovim can't select with t (tag).

So most often I just use SHIFT+V to enter in visual mode on the whole line, move N lines below, select the HTML tag or Component, then use y to copy the selection.

Now because of SHIFT+V, the yanked text includes newlines and leading whitespace, and when I paste I get this result:

<!-- 1: Copy html tag to another parent  -->
<div id="1">
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>
</div>

<div id="2"></div>
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>

So I created a keymap to paste the text without newlines and leading whitespace:

-- Map yp to paste yanked line without newlines and without leading whitespace
vim.keymap.set("n", "yp", function()
  -- Get content from register 0 (most recent yank)
  local yanked_text = vim.fn.getreg("0")
  -- Remove trailing newline if present
  yanked_text = yanked_text:gsub("\n$", "")
  -- Remove leading whitespace
  yanked_text = yanked_text:gsub("^%s+", "")
  -- Store in register p
  vim.fn.setreg("p", yanked_text)
  -- Paste from register p
  return '"pp'
end, { expr = true })

You can change the keymap to cp (clean paste) or <leader>p.

The result when using this keymap is:

<!-- 1: Copy html tag to another parent  -->
<div id="1">
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>
</div>

<div id="2"><div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div></div>

And next, I just let my formatter do the job:

<!-- 1: Copy html tag to another parent  -->
<div id="1">
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>
</div>

<div id="2">
  <div class="copy-paste">
    <h2>Copy me to div#2</h2>

    <div>Here is another child element</div>
  </div>
</div>

This also works for other use cases:

<!-- 4: Return component -->
<div id="1">
  <Component
    className="copy-paste"
    title="Move me to Container header"
    description="Here is the description"
  />
</div>

return (<Component
    className="copy-paste"
    title="Move me to Container header"
    description="Here is the description"
  />);

How to set up Lexical editor in React Native

Dragoș Străinu — Mon, 26 Oct 2026 09:48:10 +0000

So you have a web app that uses Lexical editor and now you want to build the same editor on React Native, or maybe you just want to build a rich text editor in React Native using Lexical.
But unfortunately lexical does not support React Native at the moment.

So the idea that comes to mind is to try Lexical editor in a react-native-webview. There are similar solutions like react-native-cn-quill and react-native-rich-editor.

But as expo docs say:

If you need more configurability, you can build a similar library with an existing web-only editor.

So let's implement a lexical editor in an Expo app.

(This is a demo project but you can follow the steps to add the editor to an existing React Native app)

Create the expo app

npx create-expo-app -t expo-template-blank-typescript

Now let's install react-native-webview.

npm i react-native-webview

And make some changes in App.tsx, to display the WebView with https://playground.lexical.dev/ (for now).

// ./App.tsx
import { StyleSheet, Text, View } from "react-native";
import WebView from "react-native-webview";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ width: "100%", height: "80%" }}>
        <Text>Lexical Webview</Text>
        <WebView
          source={{ uri: "https://playground.lexical.dev" }}
          style={{ marginTop: 20 }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#e0e0e0",
    alignItems: "center",
    justifyContent: "center",
  },
});

We should have this result:

Add lexical editor

Other implementations for a rich text editor in react-native give us a predefined editor. However, we want to create our custom lexical editor with custom nodes and logic. So the only option is to create the editor from scratch.

How? By creating a new app inside the project using npm workspaces.

We add a workspace to package.json:

  "name": "react-native-lexical",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "workspaces": [ // [!code ++]
    "lexical-editor" // [!code ++]
  ], // [!code ++]
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",

We can name it how we want post-editor, page-editor. Also we can have multiple editors if needed.

Create web app as npm workspace

For this, we will use vite.

npm create vite@latest lexical-editor -- --template react-ts

Let's do a cleanup and some changes in lexical-editor app.

lexical-editor
├── README.md
├── index.html
├── package.json
├── src
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Important to not enable zoom in the WebView, add this to index.html:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=0.99, user-scalable=0"
/>

Now we can run the web app:

# in the root of expo app, we run script from lexical-editor workspace
npm --workspace=lexical-editor run dev

And we can see this in the browser:

Cool, now how can we put this into react-native-webview?!

Build a web app for react-native-webview

For this, we need some vite plugins that will build the app into a single file that we will import into react-native-webview.

npm -w=lexical-editor i -D vite-plugin-singlefile

and let's change the vite.config.ts:

// .lexical-editor/vite.config.ts
import fs from "fs";
import { defineConfig } from "vite";
import { viteSingleFile } from "vite-plugin-singlefile";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    watch: {
      include: ["src/**"],
      buildDelay: 500,
    },
  },
  plugins: [
    react(),
    viteSingleFile(),
    {
      name: "vite-plugin-html-string",
      closeBundle() {
        const bundle = fs.readFileSync("dist/index.html", "utf8");

        const escaped = JSON.stringify(bundle);
        const js = `export default ${escaped}`;

        fs.writeFileSync("dist/htmlString.ts", js);
      },
    },
  ],
});

This config watches for changes and builds the app into a single index.html file that we next write into a file named htmlString.ts so we can import it into react-native.

Now we can run:

npm -w=lexical-editor run build

And vite will build the web editor on every change.

Also, we need to build the app on install:

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "prepare": "npm run build -- --no-watch", // [!code ++]

Only now we can import the output of the web app into react-native-webview:

import { StyleSheet, Text, View } from "react-native";
import WebView from "react-native-webview";
import htmlString from "./lexical-editor/dist/htmlString"; // [!code ++]

export default function App() {
  return (
        <Text>Lexical Webview</Text>
        <WebView
          originWhitelist={["*"]}
          source={{ uri: "https://playground.lexical.dev" }} // [!code --]
          source={{ html: htmlString }} // [!code ++]
          style={{ marginTop: 20 }}
        />
      </View>

Create a basic lexical editor

Following https://lexical.dev/docs/getting-started/react

npm -w=lexical-editor install --save lexical @lexical/react

We can create a basic lexical editor:

// lexical-editor/src/Editor.tsx
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import "./Editor.css";

function onError(error: unknown) {
  console.error(error);
}

export function Editor() {
  const initialConfig = {
    namespace: "MyEditor",
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className="editor-container">
        <PlainTextPlugin
          contentEditable={<ContentEditable className="editor-input" />}
          placeholder={
            <div className="editor-placeholder">Enter some text...</div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        <HistoryPlugin />
      </div>
    </LexicalComposer>
  );
}

Message from WebView to React Native

Let's add the OnChangePlugin and post a message to react-native:

import { $getRoot, EditorState } from "lexical"; // [!code ++]
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"; // [!code ++]
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import "./Editor.css";

// ...
    onError,
  };

  function onChange(editorState: EditorState) { // [!code ++]
    editorState.read(() => { // [!code ++]
      const plainText = $getRoot().getTextContent(); // [!code ++]
 // [!code ++]
      const message = { // [!code ++]
        type: "LEXICAL_EDITOR_STATE_CHANGE", // [!code ++]
        payload: { // [!code ++]
          plainText, // [!code ++]
          serializedEditorState: editorState.toJSON(), // [!code ++]
        }, // [!code ++]
      }; // [!code ++]
 // [!code ++]
      window.ReactNativeWebView?.postMessage(JSON.stringify(message)); // [!code ++]
    }); // [!code ++]
  } // [!code ++]
 // [!code ++]
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className="editor-container">
// ...
          ErrorBoundary={LexicalErrorBoundary}
        />
        <HistoryPlugin />
        <OnChangePlugin onChange={onChange} /> // [!code ++]
      </div>
    </LexicalComposer>
  );

Ok, now we can receive this message on the react-native side:

import { StyleSheet, Text, View } from "react-native";
import WebView from "react-native-webview"; // [!code --]
import WebView, { WebViewMessageEvent } from "react-native-webview"; // [!code ++]
import htmlString from "./lexical-editor/dist/htmlString";

export default function App() {
  function onMessage(event: WebViewMessageEvent) { // [!code ++]
    const message = JSON.parse(event.nativeEvent.data); // [!code ++]
    console.log(JSON.stringify(message, null, 2)); // [!code ++]
  } // [!code ++]
 // [!code ++]
  return (
    <View style={styles.container}>
      <View style={{ width: "100%", height: "80%" }}>
        <Text>Lexical Webview</Text>
        <WebView
          originWhitelist={["*"]}
          onMessage={onMessage} // [!code ++]
          source={{ html: htmlString }}
          style={{ marginTop: 20 }}
        />

When we type something in the WebView editor we receive:

{
  "type": "LEXICAL_EDITOR_STATE_CHANGE",
  "payload": {
    "plainText": "Hi",
    "serializedEditorState": {
      "root": {
        "children": [
          {
            "children": [
              {
                "detail": 0,
                "format": 0,
                "mode": "normal",
                "style": "",
                "text": "Hi",
                "type": "text",
                "version": 1
              }
            ],
            "direction": "ltr",
            "format": "",
            "indent": 0,
            "type": "paragraph",
            "version": 1
          }
        ],
        "direction": "ltr",
        "format": "",
        "indent": 0,
        "type": "root",
        "version": 1
      }
    }
  }
}

We can do a switch on message.type and handle any messages:

function onMessage(event: WebViewMessageEvent) {
  const message = JSON.parse(event.nativeEvent.data);
  console.log(JSON.stringify(message, null, 2));

  switch (message.type) {
    case "LEXICAL_EDITOR_STATE_CHANGE":
      // Do something with the editor state
      // like saving it to a database
      break;
    default:
      console.error("Unknown message type", message);
  }
}

Command from React Native to Webview

Let's say, we want to initialize the editor state when it is mounted.

We listen for LEXICAL_EDITOR_READY message and post a message to webview using WebView ref.

...
import { useRef } from "react"; // [!code ++]

export default function App() {
  const webviewRef = useRef<WebView>(null); // [!code ++]
 // [!code ++]
  function onMessage(event: WebViewMessageEvent) {
    const message = JSON.parse(event.nativeEvent.data);
    console.log(JSON.stringify(message, null, 2));
    ...
        // Do something with the editor state
        // like saving it to a database
        break;
      case "LEXICAL_EDITOR_READY": // [!code ++]
        const commandMessage = { // [!code ++]
          command: "INIT_SERIALIZED_EDITOR_STATE", // [!code ++]
          payload: { // [!code ++]
            root: { // [!code ++]
              children: [ // [!code ++]
                { // [!code ++]
                  children: [ // [!code ++]
                    { // [!code ++]
                      detail: 0, // [!code ++]
                      format: 0, // [!code ++]
                      mode: "normal", // [!code ++]
                      style: "", // [!code ++]
                      text: "Initial text", // [!code ++]
                      type: "text", // [!code ++]
                      version: 1, // [!code ++]
                    }, // [!code ++]
                  ], // [!code ++]
                  direction: "ltr", // [!code ++]
                  format: "", // [!code ++]
                  indent: 0, // [!code ++]
                  type: "paragraph", // [!code ++]
                  version: 1, // [!code ++]
                }, // [!code ++]
              ], // [!code ++]
              direction: "ltr", // [!code ++]
              format: "", // [!code ++]
              indent: 0, // [!code ++]
              type: "root", // [!code ++]
              version: 1, // [!code ++]
            }, // [!code ++]
          }, // [!code ++]
        }; // [!code ++]
 // [!code ++]
        webviewRef.current?.postMessage(JSON.stringify(commandMessage)); // [!code ++]
        break; // [!code ++]
      default:
        console.error("Unknown message type", message);
    }
      <View style={{ width: "100%", height: "80%" }}>
        <Text>Lexical Webview</Text>
        <WebView
          ref={webviewRef} // [!code ++]
          originWhitelist={["*"]}
          onMessage={onMessage}
          source={{ html: htmlString }}

Now we need to handle this in Lexical editor. We can create a custom plugin.

import { useEffect } from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";

export const EditorStateInitPlugin = () => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    const message = {
      type: "LEXICAL_EDITOR_READY",
    };

    window.ReactNativeWebView?.postMessage(JSON.stringify(message));
  }, []);

  useEffect(() => {
    const listener = (e: MessageEvent<string>) => {
      const message = JSON.parse(e.data);

      if (message.command === "INIT_SERIALIZED_EDITOR_STATE") {
        editor.setEditorState(editor.parseEditorState(message.payload), {
          tag: "FromReactNativeToLexical",
        });
      }
    };
    window.addEventListener("message", listener);

    return () => {
      window.removeEventListener("message", listener);
    };
  }, [editor]);

  return null;
};

And use it in our Editor.tsx:

import { $getRoot, EditorState } from "lexical"; // [!code --]
import { $getRoot, EditorState, LexicalEditor } from "lexical"; // [!code ++]
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import { EditorStateInitPlugin } from "./plugins/EditorStateInitPlugin"; // [!code ++]
import "./Editor.css";

...

  function onChange(editorState: EditorState) { // [!code --]
  function onChange( // [!code ++]
    editorState: EditorState, // [!code ++]
    _latestEditor: LexicalEditor, // [!code ++]
    tags: Set<string>, // [!code ++]
  ) { // [!code ++]
    if (tags.has("FromReactNativeToLexical")) { // [!code ++]
      return; // [!code ++]
    } // [!code ++]
    editorState.read(() => {
      const plainText = $getRoot().getTextContent();

...

          ErrorBoundary={LexicalErrorBoundary}
        />
        <HistoryPlugin />
        <EditorStateInitPlugin /> // [!code ++]
        <OnChangePlugin onChange={onChange} />
      </div>
    </LexicalComposer>

Let's see it in action:

What's next?

Now you can add the desired nodes and plugins into editor. Also, add new messages and commands for communication between React Native and Lexical editor in WebView.

For the full code example, you can check the playground project on GitHub, react-native-lexical.

Typescript errors into vim quickfix

Dragoș Străinu — Mon, 26 Oct 2026 09:46:12 +0000

You may use LSP and lua vim.diagnostic.setloclist() to show Typescript errors for a specific buffer. But sometimes you could have errors across the whole project.
You can run tsc in the terminal and manually search for files with errors. But we can do better.

Vim has the :make command which executes the program that is set into makeprg. By default, it's make but we can change it to any terminal program/command.
The output of makeprg is then populated into quickfix.

Update 🖊️

After discussion on reddit someone suggested a better approach.
The error is already parced in compiler tsc.
I just change makeprg=npx\ tsc instead of makeprg=tsc.

vim.cmd [[
  augroup strdr4605
    autocmd FileType typescript,typescriptreact compiler tsc | setlocal makeprg=npx\ tsc
  augroup END
]]

Initial post

Let's create an auto command that will set makeprg to tsc if we are in a typescript project:

vim.cmd [[
  augroup strdr4605
    autocmd FileType typescript,typescriptreact set makeprg=./node_modules/.bin/tsc
  augroup END
]]

or with lua API:

local augroup = vim.api.nvim_create_augroup("strdr4605", { clear = true })
vim.api.nvim_create_autocmd("FileType", {
  pattern = "typescript,typescriptreact",
  group = augroup,
  command = "compiler tsc | setlocal makeprg=npx\\ tsc",
})

Run :make and see the output:

:!./node_modules/.bin/tsc  2>&1| tee /var/folders/3w/m_v388s15pq9rpgswbt131w00000gn/T/nvim.strdr4605/708JAY/2
components/Date.tsx(6,28): error TS2339: Property 'toISOString' does not exist on type 'number'.

(1 of 1): components/Date.tsx(6,28): error TS2339: Property 'toISOString' does not exist on type 'number'.
Press ENTER or type command to continue

and open the quickfix, :copen:

components/Date.tsx(6,28): error TS2339: Property 'toISOString' does not exist on type 'number'.

When trying to navigate to any file from quickfix, I see this error: Buffer not found.
Why? Because the tsc compiler outputs in a format that is not clear for vim quickfix.

The problem is in parenthesis around the file line and column: components/Date.tsx(6,28):

But we can change this by piping the tsc output to sed command and replacing (6,28) with :6:28:.

This is the output if we run it in the terminal:

 ./node_modules/.bin/tsc | sed 's/(\(.*\),\(.*\)):/:\1:\2:/'                                                                                 130 ↵

components/Date.tsx:6:28: error TS2339: Property 'toISOString' does not exist on type 'number'.

But to make it work in vim, we need to escape some chars.
The final result is:

vim.cmd [[
  augroup strdr4605
    autocmd FileType typescript,typescriptreact set makeprg=./node_modules/.bin/tsc\ \\\|\ sed\ 's/(\\(.*\\),\\(.*\\)):/:\\1:\\2:/'
  augroup END
]]

Now when running :make the quickfix list is populated correctly and vim navigates to the first file in the list.
I can fix Typescript errors one by one, by navigating with :cnext or using vim-unimpaired.

How I keep my iPhone battery at optimal level

Dragoș Străinu — Mon, 26 Oct 2026 09:46:11 +0000

I am not a heavy user of mobile phones. I don't rush for the latest model and when I buy a phone I hope it to last for at least 4-5 years.

Till recently I owned an iPhone 7 for about 4 years.
And I could own it a bit more, but the battery maximum capacity went down to 65% over years. It could last a maximum of 3 hours of active usage, and never a full day.

The battery died so fast because of incorrect usage of it. In special because the phone was used by my brother in the first year to play games all day.

After I bought a new iPhone 13 mini, I decided to charge the phone smarter to prolong the battery life.

Batteries in smartphones don't like being fully charged or discharged.

But how I could remember when to change it and when to stop changing?

iPhone shortcuts are here to help with this. They can do a ton of stuff.
But for this specific use case, I use shortcuts automation.

I can add automation when the battery reaches a specific level, like below 35% or above 70%.

I decided to show a notification and disabled "Ask before Running".

Now each time the phone battery drops under 35% I get a notification on my smartwatch and plug the phone to change.
And then the phone was changed to 70% I get another notification and remove the phone from changing.

Probably this technic is not a drastic improvement over "change it at night to 100%".
But the feeling of prolonging the life of my phone brings joy.
Let's see in 5-6 years what will be the battery health 😅.

Git: temporary change commit author

Dragoș Străinu — Mon, 26 Oct 2026 09:42:22 +0000

It may happen that sometimes you need to temporarily do commits with another author's name and email.
You can do this with this command:

GIT_COMMITTER_NAME="Other Name" GIT_COMMITTER_EMAIL="Other Email" git commit -m Test --author "Other Name <adriana.sanduta@isa.utm.md>"

But you may want to do it multiple times, so you can create a shell function:

# Add me to shell config file. ~/.zshrc or ~/.bashrc
# Git with author
git_w_a(){
  COMMITTER_NAME="Other Name"
  COMMITTER_EMAIL="other_email@example.com"
  echo "
    Running:
    GIT_COMMITTER_NAME=\"$COMMITTER_NAME\" GIT_COMMITTER_EMAIL=\"$COMMITTER_EMAIL\" git $@ --author \"$COMMITTER_NAME <$COMMITTER_EMAIL>\"
  "
  GIT_COMMITTER_NAME="$COMMITTER_NAME" \
  GIT_COMMITTER_EMAIL="$COMMITTER_EMAIL" \
  git $@ \
  --author "$COMMITTER_NAME <$COMMITTER_EMAIL>"
}

Usage:

git commit -m "Test" # Commit with default user name and email
git_w_a commit -m "Test" # Commit with other user name and email

Don't forget to change the COMMITTER_NAME and COMMITTER_EMAIL

No tits in git

Dragoș Străinu — Mon, 26 Oct 2026 09:41:17 +0000

I don't know about you but my first git experience was with Github.
The power of git is allowing development as a team, where every team member can make a branch and then create a Pull Request.
My first PR was an experience.
After submitting it, my teammate merged it and the git history looked like this:

*   8d662a2 Merge pull request #1 from strdr4605/new-colors
|\
| * cbf20e1 Setting better colors for rectangles
|/
* 40446a6 fixed readme typo
* b894618 add readme to lab2, modified cases methods in bussiness logic

When doing a default merge, git will create a merge commit with info about the branch that was merged history will show the path to commits.
I call it a "tit" and I now will explain why you should not have tits in git!

Let's say my teammate was doing something on local master, his master branch was at 40446a6 then he committed some changes.

* 5963243 (HEAD -> master) add circles
| *   8d662a2 (origin/master, origin/HEAD) Merge pull request #1 from strdr4605/new-colors
| |\
|/ /
| * cbf20e1 Setting better colors for rectangles
|/
* 40446a6 fixed readme typo
* b894618 add readme to lab2, modified cases methods in bussiness logic

Now when he tries to push to remote git will alert that he should first do a git pull.
git pull internally is doing 2 things, git fetch to get updates from origin/master and git merge.
And the git history looks like this:

*   c3633b4 (HEAD -> master) Merge branch 'master' of https://github.com/sspatari/OR_Labs
|\
| *   8d662a2 (origin/master, origin/HEAD) Merge pull request #1 from strdr4605/new-colors
| |\
| | * cbf20e1 Setting better colors for rectangles
| |/
* | c27aac2 add circles
|/
* 40446a6 fixed readme typo
* b894618 add readme to lab2, modified cases methods in bussiness logic

You see! A new indentation and a bigger tit. Now it's harder to understand the git history.
And it can get worse, and in one moment when you need to debug something and use git history, you see over 9000 tits, small, big, enormous, gigantic.

I asked a friend of mine whats this:

And he told me that it's a photo of my grandma's carpet 😂.

But actually, it's a git history from a development team of my friend. Here is a zoom out:

You may say "I don't look at git history, I don't even use the command line, I only click the magic button on my IDE when I want to push my changes and everything is ok".
Sure, it's ok until the moment when things become complicated.
Maybe you need to get some changes from another branch, or maybe you need only one commit from your teammate's branch.
You may have some conflicts when merging/rebasing a wrong branch using your magic IDE.
Maybe you need to find a bug that was introduced some time ago and the only way to understand where approximately it was is by looking at git history.
You may spend hours, days trying to navigate in a dimension full of tits.

The main causes of git tits are:

No desire to learn git a bit
Using magic IDE buttons
Using "Merge pull request" option button in Github PRs

The solution

Use git rebase always!

Here is a version of the git history above if it was done using git rebase:

* 461db4e add circles
* ad0041c Setting better colors for rectangles
* 40446a6 fixed readme typo
* b894618 add readme to lab2, modified cases methods in bussiness logic

🎉 Now it's cleaner what is happening in the project.
If rebasing on every feature or bug fix, the git history will look like a straight line with some branches on top.
It will be easier to understand the status of the project and what git operations should be done.
Easier to get some changes from other branches, or to find a bug that from past commits.

You may think, rebasing is lying about the project history and it's true.
When rebasing you reapply the commits and now they have different hashes and committing dates/authors.
You will lose info about the branch name that was merged, or when these changes were initially committed.
If this is more important for you then yeah git tits is the way to go.
But I think about git history, not like some timeline of the project development where changes happened and I need all details,
but more like a version history of the project where every commit is a new version.
Then I don't care about dates, hashes, authors. I only know that this version of the project (commit 2) comes after another version (commit 1).

So, how to eliminate git tits:

Use git rebase instead of git merge (or use git merge --ff-only)
Use git pull -r (will do git fetch and git rebase) when getting updates from remote
Use Rebase and merge option button in Github when merging PRs

The only case where we can not escape from git tit is doing a rebase with a lot of commits (20+) and you have to resolve conflicts at every other commit.
This can be a pain, especially when in the process of rebasing you did a mistake and the only way to revert it is to rebase again.
In this case git merge will let you solve all the conflicts in one take.

I hope you understood my idea and from now on instead of confusing git tits and spaghetti, your project git history will look more like a beautiful palm tree.

Let me know if there are other use cases when git tits are inevitable

You may also check how I use git

My Keyboard as a Status Board for Coding Agents

Dragoș Străinu — Mon, 26 Oct 2026 09:32:24 +0000

Over time, my hardware setup changed many times: a single laptop, then a laptop with a big monitor, then a second monitor, then a third monitor. Then I went back to just the laptop, added a mechanical keyboard, and later bought a better one.

And somehow, in April of 2022, I ended up buying the Planck EZ Glow:

My first 40% programmable keyboard, with multiple layers, macros, RGB LEDs, and even a built-in buzzer for playing music.

For the past three years, I used it with a single 32-inch monitor and a closed laptop. It was a nice setup, and I got used to switching layers and typing with ease.

Then, in the process of switching jobs, I moved the Planck EZ keyboard into a box and kind of forgot about it. I went back to my roots: working from one spot to another with a 14-inch MacBook Pro. The move to fully prompting coding agents in the terminal helped too, because I no longer needed to see chunks of code on a big screen.

Keyboard stayed in the box for almost a year. I missed it from time to time, but carrying it in my backpack only to use it as an external keyboard for my 14-inch machine was not worth it.

The idea

Not long ago, I switched my terminal multiplexer from tmux to herdr. I made the change because I got lost with several coding agents running in multiple sessions and tabs in tmux. Herdr, with its panel for running agents and a 90% similarity with my tmux setup, made me switch.

One day I saw the video Herdr + Creator Micro 2: Codex Micro for Nerds and thought to myself🤔: nice idea. I have a programmable keyboard in my closet. Why create a similar setup with Planck EZ and herdr?

Implementation

The first step was to create a separate layer on the keyboard. Switching to that "agentic" layer makes each key fire a custom keyboard event, which I map to my needs.

I use the Hyper chord¹ plus a letter, a symbol, or a number.

This way, I am sure that my keyboard events do not conflict with the events of other apps on my macOS.

Example: Hyper+A = Ctrl + Alt + Shift + Cmd + A.

Next, I created a script called planck-agent that does several things, based on the arguments it receives. To trigger this script, I tested skhd and Raycast, which are hotkey daemons for macOS.

Now planck-agent does the following, based on my config:

focus my terminal and make herdr focus the specific agent
run scripts
write macros
submit prompts
control herdr panes

Agent statuses and feedback

This is where this setup shines. Using the Keymapp API and the Kontroll CLI, I can give instructions to the Planck EZ Glow keyboard to color any key based on my needs.

I divided the keyboard layout into two sections. The first row is dedicated to coding agents (12 maximum), and the next two rows are for custom instructions and scripts.

planck-agent listens to the statuses of the herdr agents and changes the keyboard colors accordingly:

Orange working
Blue done (unseen)
Green idle
Red blocked
Purple stale (idle for 10 minutes since it was last focused)
Dark empty.

Here is how the architecture looks in the end:

Because I have two rows (24 keys) free to use for myself, I mapped some of them to macros, often used prompts, and scripts that I may need when working with this new setup.

My top instructions at the time of writing this blog post:

when finishing work on something

N (Next) - "prompt": "Is something missing, or are we done with this task? What's next?"

after entering a long prompt, but I do not want the agents to change anything yet

; (Pause) - "macro": "Plan first. Do not make changes yet — list 2-3 options and trade-offs."

S - "prompt": "Summarize the current state in one line."

/ - "prompt": "/compact" (too lazy to type😅)

Here is my initial config (I have probably already changed it):

Demo time

To truly understand how this all works, you need to see it in action.

After I finished v1 of planck-agent, I wanted to show some workflow demos. I planned to film the keyboard interaction and record the screen.

My first idea was to build a demo herdr workspace with agents and custom prompts. Then I would press start, screen recording and iPhone video, and later I would edit the footage into several demos.

While I asked my coding agent to create this demo setup and described my plan, the agent did something that completely surprised me🤯🤩.

The agent took the recording part as a task for itself and started to explore how to get a raw video stream and screen frames.

The agent found the iPhone camera stream (the phone is connected to the same iCloud) as a source, tested it, and inspected frames to locate the keyboard and scale the view to focus on it.

Then, after some trials and errors (with frame rates and the timing between the two sources), the agent aligned everything and combined it all into MOV and GIF files.

It even mapped keys on my keyboard to start and stop the recording.

Here is a document that the coding agent created while it explored how it did it: /RECORDING.md

Sorry for the low quality. My agent did it😅.

The focus keys jump between the agents. The jj key opens the log and the status panes beside the focused agent. The macro key types a prompt into the input box without sending it, and the approve key sends it. The nLED row shows the state of every agent, and the spacebar shows the worst state of all of them.

A new agent appears when herdr detects it, and its key lights up. The flag key paints a finished agent blue, so a seen agent is not forgotten. A stale agent turns purple after ten minutes of silence.

Now, with this setup (a laptop and the agentic keyboard on the side), I feel as if I am in a main control room, using a colored panel.

If you have a programmable RGB keyboard, I highly suggest that you play with it. Maybe you can create a similar setup.

The full setup is available at strdr4605/.dotfiles/planck-agent/. You can point your coding agent at it and let it create something similar for your case.

Hyper = Ctrl + Alt + Shift + Cmd, all at once. ↩

MacOS: notify when the terminal command is finished

Dragoș Străinu — Fri, 21 Apr 2023 09:04:17 +0000

After reading A decade of dotfiles I wanted to create a similar bash function to boop.

And here it is:

# ~/.zshrc
# ...rest of zshrc
,notify () {
  local last_exit_status="$?"
  if [[ "$last_exit_status" == '0' ]]; then
    osascript -e "display notification \"Done\" with title \"Good\" sound name \"Fonk\""
  else
    osascript -e "display notification \"Exit code: $last_exit_status\" with title \"Bad\" sound name \"Ping\""
  fi
  $(exit "$last_exit_status")
}

It uses osascript to execute the AppleScripts that pushes the notification.

According to stackoverflow
this is not the best way to pass bash variable to osascript,
but I did not understand how to do it for my use case and as I use last_exit_status there should be no problem.

usage:

npm run test;,notify

I prefix the function name with a comma to faster search for it when doing ;,<Tab>.

You can test it with (exit 0);,notify and (exit 1);,notify.

Stop doing git checkout master branch

Dragoș Străinu — Tue, 14 Mar 2023 13:19:58 +0000

I see a common workflow when starting to work on new task:

git checkout master
git pull # or git pull -r
git checkout -b feat/4605-new-task

But I do things a bit differently. The main difference is that I don't care about the local master branch because the source of truth is always remote origin/master.
I don't do commits on master branch, because all changes to the project are done through Pull Requests. So why should I keep the local master in sync with origin/master?

The first thing I do is fetch the remote master branch to get the latest commits.

I have an alias in my .gitconfig file:

[alias]
  fetch-and-clean-branches = "!git fetch -p && git branch -vv | grep ': gone]'|  grep -v "\\*" | awk '{ print $1; }' | xargs git branch -D"

How to locally delete all remotely merged git branches

Running git fetch-and-clean-branches, will fetch new updates on remote branches and will remove local branches that are not relevant anymore.

Next, I create a new branch based on origin/master:

git checkout -b feat/4605-new-task origin/master # --no-track

I also created an alias for this command:

[alias]
  fetch-and-clean-branches = "!git fetch -p && git branch -vv | grep ': gone]'|  grep -v "\\*" | awk '{ print $1; }' | xargs git branch -D"
  start = "!git fetch-and-clean-branches && git checkout -b \"$1\" --no-track origin/master #"

And I can use it as: git start feat/4605-new-task.

Related: How I use Git

How to gradually add an eslint rule

Dragoș Străinu — Wed, 18 May 2022 09:51:38 +0000

As your javascript project grows and new engineers are joining the team, you may try to add new eslint plugins and rules to make the code base more rigid.

The problem is that often these new eslint rules may require changes in all project files, and as your project is big enough, you may have a situation when eslint rules require changes in 2000+ files.

What if you could gradually enforce an eslint rule, without breaking the CI of your project.

We can do this using lint-staged, husky, and some changes in the .eslintrc.js file.

I hope you are already using lint-staged with husky. If not, please set up it.

Your .lintstagedrc.js file may look something like this:

// .lintstagedrc.js
module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};

You may also have a script in your package.json file, that you run in CI to make sure eslint rules are followed:

...
"scripts": {
  "eslint:run": "eslint --ext=.js,.jsx,.ts,.tsx --quiet .",
}

Now let's say you want to enforce the removal of all console logs using the eslint rule no-console.

In your .eslintrc.js file, set the rule to warning:

// .eslintrc.js
module.exports = {
  ...
  rules: {
    'no-console': 'warn',
  ...

Now running npm run eslint:run will just show a bunch of warnings but will pass the check.
Next, you need to create a new eslintrc file that will be used only by lint-staged. Let's name it eslintrc-staged.js.
There you need to extend the default eslint config and override the rule to error.

// .eslintrc-staged.js
module.exports = {
  extends: './.eslintrc.js',
  rules: {
    'no-console': 'error',
  }
};

The last change needs to be done in .lintstagedrc.js to tell lint-staged to use another config file when running eslint.

module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint -c eslintrc-staged.js --no-eslintrc --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};

Now, when doing changes to the project, eslint will throw errors only to the files that were changed before the commit.