Skip to content

Latest commit

 

History

History
193 lines (137 loc) · 5.54 KB

README.md

File metadata and controls

193 lines (137 loc) · 5.54 KB
Raw

Documents

! This is a document for who taking over my projects and write some principles for myself. ! Maybe I just put in codes randomly and you saw it, no matter how, welcome as well.

Hi, there!

I follow most style guides beneath and I suggest to overview these guides as well if you are taking over my project or stuff.

Some of them are interesting blog posts with cases and scenario, no just boring rules line by line.

Again, these are all my personal preferences, if you have better solutions then good for you and go for it. Don't tell me you just want dirty codes(Do you even hear brainf**k before?) so you don't want to follow any rules.

Still, I studied and researched a lot so that I found these guides are useful for me.

Then, let's check out.

Shortcut

⬆️ Go to Top

IDE

  • Here are my recommendation, still you can chose your preferences as well.
  • IDE: VScode
  • VScode plugin:
    • TODO tree
    • comment light
    • GitLens
    • Git Graph
    • Git History
    • Gremlins tracker for Visual Studio Code
    • DotENV
    • EditorConfig for Visual Studio Code
    • Vim (Options)

⬆️ Go to Top

Style

⬆️ Go to Top

Comment

  • Describable comment
    • TODO: the part of code to do in the future
    • FIXME: the part of code to fix in the future
    • REF: reference documents, resources
example 
// REF: https://www.typescriptlang.org/
class item {
  constructor (private name: string) {}

  getItemName: () => this.name

  // FIXME: fix any type
  setItemName: (newName: any) => this.name = newName

  // TODO: add new feature
  someThingNew: () => console.log('new stuff')
}

⬆️ Go to Top

Naming

⬆️ Go to Top

Preference

Just preference, much depend on projects' needs.

  • React (Framework)

    • prefer React hook + function component over than class component + function component.
    • often use with: Next, Redux, Formik
    • often css with: Tailwind, Styled-component, Emotions
    • often utils with: Vite, react-use

  • Vue (Framework)

    • prefer Composition Api rather than Options Api
    • often use with: Nuxt, Vuex(Pinia), VeeValidate
    • often css with: Tailwind, UnoCSS, SCSS
    • often utils with: Vite, vue-use

  • CSS

    • prefer Atomic CSS like: Tailwind, Windi CSS, UnoCSS ...
    • SCSS/SASS are good as well, but you know naming CSS is a big problem.

  • Utils

    • often use: axios, lodash
    • package manage: prefer pnpm > yarn > npm
    • bundle tools: prefer vite > parcel > webpack
    • TypeScript maybe, depend on development timing.
    • Testing maybe, depend on development timing but prefer Vitest.
    • A component is about 300 ~ 500 lines, rely on CSS or some things like that.
    • Service(call BackEnd Api) separate to files in a same folder to manage them.

⬆️ Go to Top

Courses

For some people curious about courses which I took:

⬆️ Go to Top

In use

something I am in use when I am coding.

  • Laptop: Apple macbook pro M2 14 / 10 cores CPU / 16 cores GPU / 512G / 32G
  • Screen: BenQ EW2880u(28 inch) + BenQ GW2475H(24 inch)
  • Screen bar: Esense LED 11-PRO100
  • Keyboards:
    • Keychron Q4
      • Switch: Cherry MX Speed Silver(Self-Lubricating)
      • Layout: 60%
      • State: Most using
    • Keychron K9 pro
      • Switch: Gateron low-profile MX 2.0 Red
      • Layout: 60%, low-profile
      • State: When I go out using
  • Mouse: Logitech MX Master 3s
  • Terminal: Warp
  • Neovim: AstroNvim
  • Love themes(VScode):
    1. ever frost
    2. sonokai
    3. dracula soft

laptop

And my lovely stickies. (pretty much my skill)

desk setup

I love what I'm doing.

If you have any questions or suggestions, you can find my contact information in benben.me website.

Just feel free to AMA (ask me anything), I will reply as soon as possible!

Happy Coding ~

License

Copyright (c) 2022 - present @Benben

MIT License