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
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
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
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:
I hope it will help someone.
28/100 of #100DaysToOffload