My journey continues in learning more about modularized CSS. Learning more about LESS didn’t actually help answer my questions. I started reading through the webpack docs again to try and find my answer. I found somewhat of an answer but I realized I need to spend more time reading the webpack docs than I thought. It’s unfortunate to have to side track myself again but it’s a marathon not a race. Part of the challenge with learning tech is the overwhelming amount of tools and technologies being combined to build projects. Modern web development is a lot more complicated than the basics of HTML, CSS, and JavaScript. When tackling something so complex, I find that it helps to take things slow and manage my expectations. I have left the head banding days behind me and I opt for a more tranquil approach to not understanding something. What I don’t know is what I don’t know but I can take practical steps to learning it and ensuring that once I learn it I won’t have to scrabble to figure things out again.

I have seen what scrabbling looks like and it is not pretty. I would rather admit my faults than to play the race and lie game. I move at my own pace. There is no peace found in rushing to a destination even if the destination was meant to be peaceful… Now I’m just rambling lol.

TLDR;

Okay, so here are the highlights of what I did:

• CSS -> Read part 1 of a series of articles on css-modules and how they work to help us build truly encapsulated styled components in React without styling inside JavaScript.
• JavaScript -> Read through the getting started with webpack guide. It was nothing new but I have to start with the fundamentals before I get to the more complex topics like loaders. I just want to lay a decent foundation before peaking my head out to look at the specific topic I am interested in.

Webpack Getting Started Notes

Basics (Getting Started)

First let’s create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

Webpack Config Files webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

We can then run the build from the terminal using npx webpack --config webpack.config.js. If a webpack.config.js is present, the webpack command picks it up by default. We use the --config option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files.

A configuration file allows far more flexibility than CLI usage. We can specify loader rules, plugins, resolve options and many other enhancements this way.

npm run build Scripts

package.json:

{
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

Goal For Round 7 of the #100DaysofCode Challenge

This is my seventh round of the “#100daysofcode” challenge. I will be continuing my work from round five and round six into round seven. I am currently working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal is to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.

I have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects.