Hey and welcome to my new blog. I wanted to create something so that when I enter 2024 I had an outlet for writing about the technologies I am playing with and my thoughts on the industry as a whole. I am fairly active on X (Twitter?) but I find it quite limiting and it's easy to be dragged into some of the negativity that goes on that platform. This is another place for me to actually experiment with technolgoies themselves (what is a dev blog if the blog itself isn't over engineered?).
I knew I wanted it to be markdown based as I didn't want to worry about databases and overcomplicating it in that way, this may change over time but right now markdown is good enough. The caveat is that I wanted a decent writing expeirence and to be able to expand the functionality e.g. add categories and maybe filter by them down the line. After looking around I came across Keystatic a local content management system where you could control your data and have relationships between the collections . You can also connect this up to Github to have multiple authors. It currently supports NextJS, Remix and Astro. Which is ideal as the next part of this was the foundation of how I would build this.
I initially chose Astro as it doesn't ship Javascript out of the box, it also has support for many frameworks e.g. React, Svelte, Vue, and even it's own proprietary way of doing things through Astro files. I also wanted to play with Astro for a serious(ish) project for a while. When it comes to "best tool for the job", it just makes sense for a small blog. The team at Astro also added support for the new view transistion API which I am looking forward to play around with more. As of writing this blog I haven't added support for it, but the goal is to make quite a "rich" user experience, but I am approaching this with an MVP mindset.
This is where things started to fall a part. I wanted to try out StyleX, granted it hasn't been available to use for that long so I thought there would be some risks with this choise. The reason I wanted to use Stylex vs something like Tailwind is as part of this project I wanted to create a design system, along with a component library. StyleX offers a lot of tools to support this goal, such as type safety. It also has a design token creation API that supports defaults along with things like media queries, so you could have a token where it has a default value, but you could have a dark mode media query to have another value. You only have to reference the one token which simplies things greatly. I can hear people saying "but Tailwind can do that!", don't get me wrong I like Tailwind, but once you get into making variants the syntax starts to resemble what you would write in traditional CSS. Tailwind has many strong use cases but this isn't one of them in my perspective.
So the problems! I found an integration for Astro but I think it must still be work in progress as there is errors when you try to use the tokens inside of stylex.create() . I raised an issue on the repo for this integration so hopefully it won't be long until this is resovled. But at this stage I didn't want to give up on StyleX so I started this project again with NextJS as there was an example in the StyleX repo that seemed to support everything that I needed. I started from scratch with NextJS and deleted everything I didn't need from the boilerplate, this included the global.css file (more on this soon). Once I was all set up nothing was rendering as expetced, the classes were on the elements but no styles were being applied. I retraced my steps, triped checked the docs, ran the example project to compare (which ran fine). I couldn't figure it out. So I set up another project and remove things bit by bit, and noticed when I removed the global.css file from the root layout.tsx file everything broke again. I found even if there was nothing in the global.css file, this was required for it to work. I have raised an issue on the StyleX repo, and one of the contributors informed me that it is a known issue, but they seem to have a fix in mind for this, so again I have hope this will be fixed soon.
I thought all was going smoothly at this point, that was until I revisited the keystatic integration, I had this working before I tackled StyleX, but once I tried to access the [slug] route of the blog there was yet another error. There is currently a conflict between Keystatic and Stylex. At this stage I just wanted to get something done, so I reverted back to my Astro project and replaced StyleX with CSS modules as I knew I could accomplish what I wanted with that. So here we are the new stack of Astro, Keystatic & CSS modules. I plan on revisiting StyleX in the new year as it has a lot of promise but for my timeline it wasn't worth the headache it created for me.
If you would like to check out the code for this website the repo is here , It will be in a constant state of flux so be gentle.…