! 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.

• Documents
  • Shortcut
  • IDE
  • Style
  • Comment
  • Naming
  • Preference
  • Courses
  • In use
  • License

⬆️ Go to Top

• 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

• !(Highly recommend) Technical Writing: Technical Writing for Developers | CSS-Tricks - CSS-Tricks
• Writing
  • Chinese Writing style: 中文排版指北
  • Markdown style: Markdown Lint
• Coding
  • JavaScript style: prefer standard
  • 

⬆️ Go to Top

• 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

// 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

• JavaScript
  • Conventions: https://www.robinwieruch.de/javascript-naming-conventions/
  • Google docs: https://google.github.io/styleguide/jsguide.html#naming
• CSS
  • BEM(block__element--modify)
• Components
  • Vue Official: https://vuejs.org/style-guide/ (check section B)
• Hooks, Composables
  • useFeatureA, useFeatureB ...

⬆️ Go to Top

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

For some people curious about courses which I took:

• Front-End resources(in Chinese)

⬆️ Go to Top

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

And my lovely stickies. (pretty much my skill)

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 ~

Copyright (c) 2022 - present @Benben

MIT License