Was working on some more React practice with Vim and it’s safe to say at this point that I don’t have any issues with it at all. In fact, the tabs and customization of windows has made it really easy for me to work on different components and aspects of my project without getting disorganized. I actually think I prefer it over VS Code. Yes, not having code completion isn’t that fun but it’s not as necessary as you think. Most of the time I am editing more than writing something brand new. Vim is still king to me in that regard.

TLDR;

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

• JavaScript -> Continued tweaking my webpack.config.js file to better understand how things were working. I read a bunch of docs and Stack Overflow questions to figure out my modular Less were not working. It turned out that I needed to manually add the Less module type declaration in my react-app-env.d.ts file for it to work in TypeScript. Sass and css module declarations are included by default but Less is not. That was a learning curve for sure LOL.
• Practice -> Finally got to styling my weather app project. It feels good. The last thing I want to get setup but probably won’t is relative paths for @import statements in Less. That would be really cool. I don’t know if that is even practical but I would like to try setting that up just to get some more practice reps in.

Final setup for Less and module styling to work in my React Components

My Less Loaders in webpack.config.js:

{
  test: lessRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: true,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 3,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      mode: 'local',
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),
},

My Less module Typescript declaration in react-app-env.d.ts:

// Default that came with create-react-app

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

// My manual addition to allow for Less Modules to be recognized

declare module '*.module.less' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

Finally what a React component and styles may look like:

import React from 'react';
import styles from './Navbar.module.less'

class Navbar extends React.Component {

  render(){
    return (
      <nav className={styles.Navbar}>
        <h2 className={styles.city}>Toronto</h2>
        <h2 className={styles.city}>London</h2>
        <h2 className={styles.city}>Tokyo</h2>
      </nav>
    )
  }
}

export default Navbar

Styles in a less file

@import '../../App.less';

.Navbar{
  display: flex;
  gap: 2rem;
  justify-content: center;

  .city{
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;

    &:nth-of-type(1){
      color: #colors[hi_light];
      font-weight: 700;
    }
  }
}

The root App.less file:

#colors(){
  hi_light: #5fb0e8;
  theme_white: #fff;
}

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.