DEV Community: joshchu

5 Podcast I'll start listening as a Web Developer

joshchu — Mon, 07 Mar 2022 08:25:37 +0000

Am I the only developer who hasn't heard a single developer podcast episode yet? It feels like I'm living in a cave after finishing the first episode of The Bootstrapped Founder. I knew that Podcasts exists. But, I haven't really been active in listening to one.

So, I'm going to share 5 podcasts that I'm gonna start listening from now on. There are a lot of podcasts out there but I feel that these are the podcasts that caught my attention and is relevant to me at the moment.

1. The Bootstrapped Founder

The Bootstrapped Founder Podcast is a weekly show about starting and bootstrapping businesses, how to build an audience, and how to build in public.

2. developer tea

This is a podcast about helping engineers find clarity, perspective, and purpose in regular short bursts of high-value content.

3. Soft Skills Engineering

Soft Skills Engineering is a weekly advice podcast for software developers about the non-technical stuff that goes into being a great Software Developer.

4. Front End Happy Hour

A software engineering podcast featuring a panel of Software Engineers from Netflix, Twitch, & Atlassian talking over drinks about Frontend, JavaScript, and career development.

5. The Hanselminutes podcast

Hanselminutes - Fresh Air for Developers is a weekly talk show that brings interesting people together to talk about the web, culture, education, technology and more.

It's gonna be overwhelming to see the number of episodes you've missed and it you would most likely feel the need to catch up by listening to all of the past episodes, I also feel the same. But, for sure you don't have to go through everything, just choose the episodes that interests you and enjoy your podcast journey instead of treating it like a task.

What about you, do you have any podcast shows to suggest?

How to setup Prettier, ESLint, Husky and Lint-Staged with a NextJS and Typescript Project

joshchu — Sun, 06 Mar 2022 15:09:28 +0000

Working in a team can sometimes be challenging, we try to make our codebase look like it has been coded by one person. We can do this by adhering to a code style/format that everyone should follow.

However, it would be tiresome and impractical to do it manually and it would be easy to bypass and forget following these standards. Therefore, it's in our best interest to automate it using tools.

Setting up project tools can sometimes be a pain. I've been in this situation, existing materials is either out of date, has conflicting versions or simply just doesn't work on my end. And for that reason, I would like to share my own setup which I use for almost all of the projects I do.

Disclaimer. Do keep in mind that these versions are working properly at the time of writing. You can update these packages but make sure to account for these changes and fix conflicting errors.

1. Now, to start with our project. Let's install a fresh NextJS & Typescript project.

npx create-next-app --typescript new-app --use-npm

I added the flag --use-npm to ensure that my project is generated using npm instead of yarn.

2. We would now be installing Prettier and EsLint.

npm install prettier@2.5.1 eslint@8.9.0 -D

3. Install additional configs and plugins in order to extend the functionality of our linter. These the are multiple configs and plugins that I use for every project. ( you can add or exclude anything that you don't want from this setup ). Here is a list of things you can add.

@typescript-eslint/eslint-plugin (version 5.3.0) - An ESLint plugin which provides lint rules for TypeScript codebases.
eslint-config-airbnb) (version 18.2.1) - This package provides Airbnb's .eslintrc as an extensible shared config.
eslint-config-prettier (version 8.3.0) - Turns off all rules that are unnecessary or might conflict with [Prettier].
eslint-plugin-jsx-a11y (version 6.4.1) - Static AST checker for accessibility rules on JSX elements.
eslint-plugin-prettier (version 4.0.0) -Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
eslint-plugin-react(version 7.27.0) -React specific linting rules for eslint.
eslint-plugin-react-hooks(version 4.2.0) - This ESLint plugin enforces the Rules of Hooks.
eslint-plugin-security (version 1.4.0) - ESLint rules for Node Security.
eslint-plugin-simple-import-sort (version 7.0.0) - Easy autofixable import sorting.
eslint-plugin-sonarjs (version 0.12.0) - SonarJS rules for ESLint to detect bugs and suspicious patterns in your code.

To install these packages:

npm install @typescript-eslint/eslint-plugin@5.12.1 eslint-config-airbnb@18.2.1 eslint-config-prettier@8.4.0 eslint-plugin-jsx-a11y@6.5.1 eslint-plugin-prettier@4.0.0 eslint-plugin-react@7.27.0 eslint-plugin-react-hooks@4.3.0 eslint-plugin-security@1.4.0 eslint-plugin-simple-import-sort@7.0.0 eslint-plugin-sonarjs@0.12.0 -D

4. After installing, we should not start setting up our .eslintrc.js and .prettierrc.js files. Let's first setup our .eslintrc.js file. Currently our project scaffolding has a .eslintrc.json there is nothing wrong with using this as a default and writing the configs in JSON format but I prefer writing my configs in Javascript that's why we need to rename it.

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },

  env: {
    browser: true,
    node: true,
    es6: true,
  },

  settings: {
    react: {
      version: "detect",
    },
    "import/resolver": {
      node: {
        extensions: [".ts", ".tsx"],
      },
    },
  },

  plugins: ["@typescript-eslint"],
  extends: [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:sonarjs/recommended",
    "plugin:security/recommended",
    "plugin:react-hooks/recommended",
  ],


  rules: {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      1,
      {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
      },
    ],
    "react/jsx-props-no-spreading": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      },
    ],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        components: ["Link"],
        specialLink: ["hrefLeft", "hrefRight"],
        aspects: ["invalidHref", "preferButton"],
      },
    ],
    "no-nested-ternary": "off",
    "import/prefer-default-export": "off",
  },
}

We need to export these configs inside an object. The first we need to setup is the parserOptions. we specify in ecmaVersion that we want our linter to support ES2020. sourceType indicates that we would be parsing files in Javascript Modules. and ecmaFeatures additional support that we would like to have, in our case we want to have jsx support.

The env defines which environments we will be supporting.

settings are just additional settings for our linter. import/resolvers sets the resolver for finding where the export is in import x in "module".

plugins provides additional rule definitions like for the previous configs that we added.

extends extends configuration of our base file based on the eslint plugins we added.

difference between plugins and extends is further discussed here.

finally, rules which specifies how your linter should treat every little detail you want to be checked. For me, these are the rules I want my linter to check or ignore. Here are the list of rules you can add.

5. We now setup our .prettierrc.js. By default, this is not included in the scaffolding of our project. Setting up our prettier configs are pretty much similar with how we setup eslint configs.

module.exports = {
    tabWidth: 4,
    printWidth: 80,
    endOfLine: "auto",
    arrowParens: "avoid",
    trailingComma: "es5",
    semi: true,
    useTabs: false,
    singleQuote: false,
    bracketSpacing: true,
};

Here is the prettier options I use for all of my projects. You can see that I prefer trailing commas and I don't like using single quotes. You can add more options and modify these according to the what your team agreed on. You can find the list of options here.

At this point everything should be working properly. But, there are instances that it doesn't. The first step I do to ensure that It's working properly is to restart my Code Editor. This usually solves the problem.

If you use eslint-plugin-jsx-a11y you might come up with an error:

Error: Plugin "jsx-a11y" was conflicted between ".eslintrc.json » eslint-config-next/core-web-vitals » /node_modules/eslint-config-next/index.js" and ".eslintrc.json » ../../.eslintrc.json » eslint-config-airbnb » /node_modules/eslint-config-airbnb/rules/react-a11y.js".

You can resolve this issue by ensuring that you've installed eslint-plugin-jsx-a11y@^6.5.1 and
eslint-plugin-react@^7.27.0 in your project and running npm dedupe this is what dedupe means.

Now, we've pretty much setup our ESLint and Prettier. Our work here is pretty much done. However, it would also be nice to catch these errors and fix code formatting on every git commit we make to ensure that we won't be pushing bad code accidentally and for that we would use Husky to create some git hooks.

6. Install and add the command we want to perform on every commit we perform.

npm install husky -D

And to initialize the our pre-commit hooks run:

npx  husky install

and

npx husky add .husky/pre-commit "npx tsc --noEmit && npx eslint --fix . && npx prettier --write ."

this command ensures that there are no typescript errors with tsc. running eslint to ensure no linting error and formatting our code with prettier by runnint prettier --write ..

If you try to add and commit your changes right now you'll notice that the checking pauses and takes a bit of time to do that. This happens because it checks all the files even for those that didn't even change. This is a not optimal for us so we also want to use lint-staged package to only check those files that changed or those that we addded to the stage to later on commit.

7. Install lint-staged

npm install lint-staged -D

8. Now we're going to create a lint-staged.config.js file. add these rules:

module.exports = {
  // this will check Typescript files
  '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',

  // This will lint and format TypeScript and                                             //JavaScript files
  '**/*.(ts|tsx|js)': (filenames) => [
    `yarn eslint --fix ${filenames.join(' ')}`,
    `yarn prettier --write ${filenames.join(' ')}`,
  ],

  // this will Format MarkDown and JSON
  '**/*.(md|json)': (filenames) =>
    `yarn prettier --write ${filenames.join(' ')}`,
}

9. go to the file under the .husky folder and open pre-commit and then replace the last line with .

npx lint-staged

And we're pretty much done with the setup. Congratulations! 🚀

Conclusion

These tools are used in order to enhance the consistency of our codebase they help us enforce the rules and standards that we ought to follow. However, there are limitations to these tools and that we all must be aware of it. We must still code in a manner that would ideally need less of these tools. After all, we progress forwards and not back.

Why I chose to lead the path of Essentialism - Part 1.

joshchu — Sat, 05 Mar 2022 08:08:48 +0000

Essentialism as described in the book, "Essentialism: The Disciplined Pursuit of the Less" - is the systemic approach in identifying where our highest point of contribution lies, and the execution of those things effortlessly. Essentialism believes in "Less but Better".

Decision Fatigue.

As human beings, we tend to do a lot of things. We try to be a lot of things. This, I would say, is the nature of men, we are multi-dimensional beings, it is in our nature to want to do more. However, it is this very nature that would sometimes lead us to the path of dissatisfaction, discontentment, and being distracted.

Every day we are presented with a lot of choices. In my case, I've always been indecisive about what I want to be, not because I can't choose, but because I want to have it all. I easily jump into new things that piqued my interests, things that others advocate for. But, as I read the first chapter of this book, I started to realize that I haven't really been a master of any of those topics that I have touched nor would I consider myself knowledgeable in the subject area. It left a cluttered roadmap of my life and career.

The first chapter taught me to pause and ask myself the question, the right questions - "Am I investing my time and resources in the right thing? is this the thing that I truly want?". Right at the moment, it would really be hard to decipher whether you're making the right decision or not. But, I have also learned to decide not based on emotions, as they are temporary and soon pass, but by reason and practicality. Ask these questions to yourself; this would help you filter through your cluttered mind, leaving non-essentials behind. Having less, but better.

Learn to say No.

I'm a people pleaser. I love to make people happy around me and help them in ways that I can. I do things as they bid, without actually thinking for myself or how it would disrupt my schedule. What's important for me then, is that people would be able to depend on me, that I'd feel important to them. The amount of "yes" (Some of my yes's) I've replied would also be the same amount of "No" I wished I'd uttered.

This book has taught me that we should evaluate whether the request is something that we can truly do without having to compromise our own tasks and schedule. If we can't accommodate, it's okay to say no. By being selective and articulate in the things that we will do, it would afford us greater freedom where creativity can be fostered. Trying to get the right things done is a million times better than trying to get everything done. Always assess the trade-offs and ask whether accepting the request is worth our time. After all, time is the most expensive thing.

If we would be able to filter through what other people want of us or what we want to do for them, we would be able to put our focus on the things that truly matter for us, leaving behind non-essentials. By doing less, we become better.

How to get myself to read books

joshchu — Fri, 04 Mar 2022 15:43:15 +0000

Reading Frenzy.

I love to read blogs and articles, you'll often see my browser tabs swarmed by unread articles from yesterday and the tabs gets smaller by the hour. I also love to read books however, I haven't really finished any. Yet. I have been stuck in this cycle of constantly jumping books and I get distracted over shiny and new things leaving me a half-baked idea of what the book really is - the concepts it would have illuminated me and the knowledge I could have shared.

To give justice to these books, I would challenge myself to read and absorb as much as I can by holding myself accountable through public learning and blogging. I would challenge myself to a Reading Frenzy. Doing this every day probably will suck and will make the journey less enjoyable and beneficial for me. So, I've decided to write every 3 days or at least 2 articles per week on every book/topic I'll read.

Reading multiple books might not be a good idea. But I'm willing to give it a try and see how this goes.

tycs

tycs is a compilation of books that mirrors the course taught by the founder (bcsi). There are a lot of interesting books included in this list but I decided to start reading from the top. The first book would be about "The Structure and Interpretation of Programs" which is available online. It is taught in a different programming language than what I'm used to so to better understand it without switching context a lot I'll use the Javascript version of this book and read it back and forth just to get a better sense of the concepts.

Design Patterns

I have been interested in learning design patterns yet, I haven't had the time to understand what they are and how they can help me. I've decided to use Patterns.dev's free book on Javascript and React Design Patterns and use Head First's Design Pattern as complementary material.

and alas! my brain would be fried from all this technical bonanza. It needs spiritual care also. That is why I"m also going to read:

Essentialism

This is a bit awkward because the book is all about the pursuit of less and yet I'll be reading a lot. There are a lot of self-help books out there but I think this is the most relevant topic at the moment. I hope that this would allow me to de-clutter my life as well as my mind.

This won't be an easy journey and it would take a lot of courage to be consistent but I hope that I would be able to turn this into something that would not only help me but also those who struggle to do the same.