How I discovered an ideal stack for mastering HTML and CSS - Vue without build

Disclaimer: this is not a pure tech article, with detailed manual. It is a story about: decision-making problem, thinking logic, and random life events influencing us. Anyway, you'll find all necessary tech info too.

TOC

• Stack-choosing pain
• Switching a social media
• A JS guy
• HTML/CSS/Vue propaganda on Twitter
• MacBook and Screencast lessons
• Bootstrapping
• Keyboard Sounder App
• Conclusion

Stack-choosing pain

At the beginning of my professional developer way (summer 2017), I was close to madness of the choice of frameworks. I was working on my first full-stack project with Meteor/Blaze, just because I found a cool tutorial about it on Youtube and moved through it.

Soon I understood that blaze is outdated or just not popular. And every day during a month I was reading comparisons like: "Angular vs React vs Vue".

One of mine experienced dev friends said: "React is an ugly garbage, Vue is elegant". Another one said: "Vue is a toy for hipsters. It isn't used widely. React is cool". Switching focus between react/vue pros and cons was poisoning my mind ¹.

Finally, I told to myself:

Stop!
From now, I will stick to React.
Just because it is most popular.

At that time I didn't use npmtrends.com, but the same picture appeared after reading different articles and Quora discussions.

And I stuck to it tightly until the end of 2021 ².

There are so many things to learn even/especially when you use only 1 frontend framework: bots, backend frameworks, mobile apps, cloud services… I always kept in mind the pain of choosing a frontend framework and in 3 years I never thought to change it. Until once, when I realized, that I didn't use HTML/CSS for that 3 years. So I made a simple HTML/CSS layout of screen keyboard for my 2 y.o. son:

And tried to flavor it with some interactivity -- animation of pressed button and playing audio with its name. Also, I needed a way to display all keys in a loop, what I could do with React in 1 line:

keys.map(keyButton => <Key {...keyButton} />)

My first attempt was with vanilla JS, but direct manipulations on DOM (templates, shadow DOM) looked overwhelmed, annoying, and ugly. It makes me cry looking at code like:

document.querySelector('#parent').appendChild(childElement)

So, I needed something modern, but still simple. And I found the article: Vue JS App Without Build. I tried it and it worked. I fell in love with this approach. I was surprised, that we can use a modern framework in modular/component way without any installation, bundling, build. Of course, for small funny hobby projects.

There is also an interesting story how I took a step away from React/JSX/JSS to HTML/CSS/JS. It was not a quick decision, but a long process…

Switching a social media

At the end of 2020 I disabled my accounts on Facebook and Instagram because I spent a lot of time there. The next year was productive and by the way I learned Open Source deeply. I even translated the whole site (with a lot of content) OpenSource.guide into my country language. There I met lots of quotations from the Twitter, like it was a main network for programmers. But I didn't use it before. So autumn 2021 I started my English Twitter.

A JS guy

To avoid wasting of time, I subscribed only topics related to my work: JavaScript, NodeJS, NextJS, MongoDB, React, Material-UI, Ionic, React-Native, TypeScript, NestJS, TypeORM. Have you noticed in this list the absence of words: HTML, CSS? It is because I was JS-oriented dev as described in: "The Great Divide: Two front-end developers are sitting at a bar. They have nothing to talk about".

For 3 years before I worked only with NodeJS, React, Material-UI, React-Native, RN-Elements, so I never went outside:

• JSX -- instead of HTML
• JSS -- instead of CSS

HTML/CSS/Vue propaganda on Twitter

Despite my preferences, HTML/CSS persistently appeared in my news feed every day. I have a guess how that happened.

When beautiful ladies start learning "TECH", they begin from HTML/CSS. And guess, who succeed in social media getting most likes and love from His Highness The Algorithm? -- Beautiful ladies. In #techTwitter there are so many lonely guys, giving thousands of likes and retweets for girls.

After a couple of months on Twitter I feel ashamed, that I haven't done anything in plain HTML/CSS for years. So, I dramatically didn't have common topics to talk to tech girls.

Also, I remembered one guy tweet, that Vue is more like a way to organize vanilla JS code amongst HTML/CSS. Regularly I met loving tweets about Vue from its community. And I began thinking of it.

MacBook and Screencast lessons

At the end of 2021 I bought a MacBook and tried it to record coding lessons. I wanted to experience the entire process:

• to choose an interesting yet simple project
• to record screencast while coding
• to voice over
• to edit video

to feel in shoes of tech edu celebrities like Brad Traversy or Maximilian Schwarzmüller -- how they make such a great content? But I was thinking towards very beginners, who may find it difficult to get why we use a terminal or bundler.

Bootstrapping

I thought: it will be good to keep things as simple as possible and avoid:

• installation
• bundling
• build

because for a newbie these steps are distracting and frustrating. And honestly, all these things that happen in a magic black window (terminal) with bash commands is not a software design or coding. It is file manipulations and tooling. So, I wanted to separate these concepts -- to take care of newbies.

Also, Vue is a great choice when you want to practice HTML/CSS. There is a saying:

Use Vue if you want JS in your HTML
Use React if you want HTML in your JS

Keyboard Sounder App

So, that's what I've done with a such stack:

• Live Demo
• Code on Github
• Tutorial on how to build it from the scratch

I am planning to record a detailed video tutorial on how to code this app from the scratch, because I find the app to be the perfect teaching example for many reasons. In the meantime, I'll write briefly the most important thing about the file structure:

index.html
index.js
App.js
LangSwitcher.js
Keyboard.js
Key.js

index.html

<head>
  <script src="vue.global.3.2.31.js"></script>
</head>
<body>
  <main id="vue-app"></main>
  <script src="index.js" type="module"></script>
</body>

index.js

window.addEventListener('load', () => {
    Vue.createApp(RootVueComponent).mount('#vue-app')
})

App.js, LangSwitcher.js, Keyboard.js, Key.js -- they are all Vue components and have the same structure:

const template = 
  /*html*/
  `<div>
    some content with vue template elements 
    like v-if, v-bind, v-for
   </div>`

export default {
  template, 
  data() {...},
  props: {...},  
  methods: {...}, 
  computed: {...}, 
  components: {...}, 
}

And it is a miracle! -- when you open served index.html, all things works together well, without any additional steps.

Conclusion

I love this vue without build stack -- because it isn't a stack, but a pure HTML/CSS/JS with one imported script in the head of index.html.

1. Someone can say, that switching between frameworks/tools is easy. Yes it is, when you are already skilled. But when you are a newbie, it is better to stick to one tool you know well, it will release the energy to move forward learning key concepts without being distracting by tools.  ↩

2. There is an interesting story about Richard Feynman's painful choice between Cornell and Caltech Universities in the book "Surely You're Joking, Mr. Feynman" in the chapter "An Offer You Must Refuse". ↩