The more I use git worktree, the more use cases I find. But what is git worktree? Basically, it takes a copy of your project and creates a new folder with the copy. So that you can work in parallel on the same project, without the need to stash or commit your current changes.

A good use case is, for example, when you are working on feature X and your boss found a bug in your application which needs to be fixed as soon as possible. You tell your boss: “No problem, I'll fix it right away”. You don't need to close your editor, stop the dev server or stash your changes. With git worktree you create a copy of your project into a new branch. Now you can work in parallel on both branches, without juggling with unsaved files.

One new use case, I've found, was while working on a client's project. Usually, we need a VPN to get data into the local dev server. My plan was, to have Storybook running and the main site on localhost, to compare components. The task here was, to rewrite the components from Styled-Components to Linaria CSS. Unfortunately, the VPN had connection issues and I required a different way. So, I've created a new worktree and ran a second Storybook server. Now I was able to compare the components because I had the new files running on one server and the old files on a second. 🥳

To get have an easier life working with git worktree, I've created some git aliases:

[alias]
    ....
    wt = worktree
    wa = worktree add
    wr = worktree remove
    wl = worktree list
    ...

---

65 of #100DaysToOffload

#log #git #dev

Thoughts? Discuss...

This is a little gem I've found. In the future, this can save some lines of code.

An example implementation could be:

:root {
  --theme-bg-light: #eeeeee;
  --theme-bg-dark: #111111;
}

.my-component {
  background-color: light-dark(var(--theme-bg-light), var(--theme-bg-dark));
}

I'm excited to use this feature in non-tailwind projects. :)

---

38/100 of #100DaysToOffload

#log #dev #css

Discuss...

I finally took the State of JS 2024 survey. It was surprising how much was new for me. But, looking back in 2024, I think it is ok, that I had not the time and motivation to keep up. On the other hand, this survey felt strange because it asked a lot about how much I used different Frameworks. Which is basically justifiable, but the same frameworks were included in multiple questions. With most of the frameworks, I was familiar. I've checked their docs in the past and for the most, I was not interested in building a project with it. So, if nothing new comes up, I will stick with ReactJS and Next.js for a while. 😎

I've also taken the State of (HTML | CSS | ReactJS) surveys this year and in the years before. Next time, I write about them. This year I missed it. 🤷

---

37/100 of #100DaysToOffload

#log #dev #survey #stateOf

Discuss...

Over the years, I got used to a specific stack. As a Web Developer, the main use case is creating websites and -apps. In this field, you have plenty of tools to choose from. Which is a blessing and a curse at the same time. 😅

As a base, I use Next.js. Here I enable Typescript + ESLint and Tailwind CSS. Typescript and ESLint are a no-brainer for me. Sadly, Prettier is not in the box. So I install it afterward. On vercel.com, Next.js can be easily deployed and you have a good free tier. So you can develop and share a URL with your client, for example.

The next bigger thing is Tailwind CSS. For years, I was using Styled-Components, but was unhappy with it. Then I started my first project with Tailwind CSS and styling made fun again. To let play nicely with React.js, I'll use tailwind-merge. From their description: Merge Tailwind CSS classes without style conflicts.

To build nice components, there are Radix-UI Primitives. These pair really nice with Tailwind CSS. The biggest win on the Radix-UI Primitives is the react-form, which saves an extra installation of a separate React.js form library.

Every App or Site needs Icons. Here I found Heroicons, from the Tailwind CSS creators. The collection is big enough to get the most out of it. For comparison, the Radix-UI Icons have a nicer look, but they are very basic, and I often didn't find what I was searching for.

So, Next.js, Tailwind CSS, Radix-UI Primitives and the Heroicons cover the Frontend. Time for the Backend. 🥳

For the Backend, I simply use Supabase. Which covers all my needs. A Database, Authentication, and Storage. That's it. Nothing more to say. Supabase has also a good free tier and can be self-hosted if needed. 👌

As mentioned before, I use pirsch.io. Web-Analytics from Germany. I like that it is privacy-friendly and that there is no need for cookies. The Standard tier with €6/Months is the only thing in my current Stack2go which is paid.

And that's it. Have fun with it. 😊

---

31/100 of #100DaysToOffload

#log #stack2go #dev #frontend #backend

Discuss...

Lately, I discovered this CSS value of the align-items property, which I didn't know about. I just wanted to share it. For me, it came quite handy in a project.

align-items: "last baseline";

More about this feature:

• https://web.dev/blog/last-baseline?hl=en
• https://devdocs.io/css/align-items#baseline

I hope it will help someone.

---

28/100 of #100DaysToOffload

#log #dev #css

Discuss...