DEV Community

Cover image for Day 14: Random Quote Machine

Posted on

Day 14: Random Quote Machine

Setting up files

I though I can use npm and Node.js for this, so I installed it yesterday.

The project is part of the FreeCodeCamp's course, and the first one is:

Random Quote Machine

Then I started off with making the three essential files for web dev:

The three files

And then I deleted them after realizing that I need to run npm init first:

npm init

And then I reverted back because I want to learn the basics first: I don't want important things to be hidden. Node.js and npm offers good shortcut for working, but this is not going to teach me anything 🫠.

So, I'm back to square one. To get a refresher on React, I made a simple counter with a button. (I used the recommended beginner config for React here.)

Simple counter

And it worked! Yay 🥳

Next step is to install preprocessors for SASS and JSX, instead of depending on external ones. I opted for dart-sass and babel-cli, both installed with pacman.

sudo pacman -S dart-sass babel-cli
Enter fullscreen mode Exit fullscreen mode

Both of this have watch option, where it automatically compiles when the source files change. Isn't that neat?

Well, the dart-sass package seems to work well. But babel-cli throws an error?

Babel Error

A dive into StackOverflow says that I need to install babel-preset-react, which means a reinstall of npm 🤦‍♂️.

(Another thing that really bugs me is the vulnerabilities that npm shows. I don't know if I should ignore this, but I'm scared.)

After half an hour wrestling with dependencies and plugins 💪, I have a working babel preprocessor, with the watch option.

And that's already stressful enough.


A big lesson for me today is that web development change so fast that I need to follow the official documentation to avoid deprecated solutions.

Also, npm packages are HUGE. I seriously don't understand why, and for now I'll try to use other alternatives (native binary, etc.) whenever possible.

I think that's all from me today. See ya!

Follow me on Github!
Also on Twitter!

Top comments (0)