I am teaching myself frontend development using vue.js

Warning: This is somewhat of a rant.

Off to a great start

This week I have been toying around with the idea of doing something that would involve some processing on the frontend that goes beyond submitting a form to the backend.

After some googling, I decided to try out my idea and set up a vue.js project. The easiest way to get started seemed to be to use my preferred IDE and set up a starter vue.js project with all the default settings. Ok, done. Find a little beginner tutorial and make some changes to the example component, and that also works immediately.

For my little project I want to use marked to parse markdown into html on the client. Do I npm install marked and make some changes to the component with the help of Google. I manage to get a textbox working that automatically uses marked to parse and update some html on the page.

Excellent! I feel like a frontend developer already.

Great, let’s add some styles with tailwind

But the textbox is awkwardly sticking the left of the browser window and the html is right below it. I would like to have them side-by-side. Ok, so I need to add some css, but I never had taken the time to learn how to create a css layout from scratch. I had always relied on Bootstrap in the past, ever since I had first found it. It was so nice to not have to worry about browser compatibility and css details.

But this time, I didn’t want to use Bootstrap. Remember, I wanted to learn real frontend development.

I remember having read about tailwind css being the new hotness. But that was a while ago. Would it even still be around? Because one thing I know about JavaScript land: they like to create new tools overthere, and something that is hot today will be obsolete in a couple of weeks…

… and then everything comes to a screeching halt

Turns out, tailwind does still exist. Following the instructions on the website I use my trusty npm install and a few seconds try to run my project again. Some error about postcss 8 appears and this is where things get ugly.

The error message links to a help-page that – spoiler alert – is neither helpful nor relevant for this particular situation, but I don’t know that at the time. Soon I find myself updating my global npm-installation, uninstalling and re-installing packages, trying to understand why there seems to be no way to tell npm to actually upgrade packages. Oh, of course, there is package for that, it’s called npm-check-updates. But that doesn’t seem to help either, I am still getting the same error.

So I manually remove all explicit versions from my package.json and replace them with an asterisk. Same result, same error.

npm list shows me that I have vue 2.6.14 installed. And I had read somewhere that postcss 8 (the thing that the error message mentions) is not compatible with vue 2. But isn’t vue 3 the current version that I am using? Oh, vue 3 doesn’t support postcss either, at least not in a release, only in some alpha or beta version? Oh, I also have vue-cli-service 4.5.14 installed. I am confused. The vue 3 documentation mentions vite, which is – of course – a new build management tool that my IDE does not (yet?) support, so I was weary of putting such a new tool on top of my broken set up. There is mention of vue-cli v5.0.0-beta.6, maybe that’s what I need? What’s the difference between vue-cli-service and vue-cli?

Light at the end of the tunnel

At this point I am basically randomly changing package versions and installing vue, vue-cli, vue-cli-service, I don’t even care anymore. I just wanted to have the most recent version of vue that I could use tailwind with, which seemed to require postcss 8. Why was this so hard?

And then, suddenly, the error is gone. Yes! Success! I am a genius!

But wait, why is the markdown no longer updating the html formatting when I change it? Did I accidentally break something in the component? I don’t remember touching it.

Looking at the generated html, it turns out that the correct h1-tags are actually applied, but the text is not formatted as heading 1. What’s going on?

Welcome to tailwind css, where you start from zero

As I had suspected, tailwind is the culprit. It removes all styles, and I mean all styles. There is no visual difference between h1, h2, li, etc. They all look the same.

I can see how that can make sense, and I somewhat can appreciate it. Also, there is an easy way to apply custom styles to all these tags. However, I don’t understand why there seems to be no comprehensive example that will basically just re-apply some styles to these common html tags? I have tried googling for a while, but I just couldn’t find what I was looking for. Probably, because I don’t know the correct search terms?

Also, my packages are a mess

The postcss 8 error is gone, and I had hoped that I had solved it by updating to the newest vue 3 version. But that doesn’t seem to be the case, judging by my installed packages:

├── @tailwindcss/postcss7-compat@2.2.17
├── @vue/cli-plugin-babel@4.5.14
├── @vue/cli-plugin-eslint@4.5.14
├── @vue/cli-service@4.5.14
├── @vue/cli@5.0.0-beta.6
├── autoprefixer@9.8.8
├── babel-eslint@10.1.0
├── core-js@3.18.3
├── eslint-plugin-vue@7.20.0
├── eslint@6.8.0
├── marked@3.0.7
├── npm-check-updates@11.8.5
├── postcss@7.0.39
├── tailwindcss@npm:@tailwindcss/postcss7-compat@2.2.17
├── vue-cli-plugin-tailwind@2.0.6
├── vue-template-compiler@2.6.14
└── vue@2.6.14

There are still postcss7-compat packages instead of postcss8. WTF?

Where do I go from here?

This was a wild ride of emotions. The whole experience left me feeling angry and annoyed. Why is JavaScript land such a mess? Why is the most widely used infrastructue – the web browser, html, css, and JavaScript – such a terrible experience for me as a developer? How can people live like that? Why is the documentation of tailwind assuming it is ok to depend on a pre-release version of vue?

Or is this just me?

In the past I have tried to avoid frontend development whenever possible for exactly the reasons that were frustrating me here. The overwhelming number of tools and frameworks, the insane pace of new versions and consequently, the permanently outdated documentation. To me as backend developer with experience in Python, C#, and Java, the JavaScript ecosystem seems to be a messy and hostile place. (I am not talking about the people and the community, just the tools and frameworks.) Why would I ever want to subject myself to that kind of environment?

Te reason is simple: Because I want to process markdown on the client-side. It’s just not a good user-experience to have the parsing take place on the backend.

So, today I decided to teach myself frontend development, whatever that means exactly. But I am not making any promises. I might quit this experiment any day.

See also