! 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.
- Here are my recommendation, still you can chose your preferences as well.
- IDE: VScode
- VScode plugin:
TODO treecomment lightGitLensGit GraphGit HistoryGremlins tracker for Visual Studio CodeDotENVEditorConfig for Visual Studio CodeVim(Options)
- !(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
- JavaScript style: prefer
- Describable comment
TODO:the part of code to do in the futureFIXME:the part of code to fix in the futureREF: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')
}- JavaScript
- CSS
- BEM(
block__element--modify)
- BEM(
- Components
- Vue Official: https://vuejs.org/style-guide/ (check section B)
- Hooks, Composables
- useFeatureA, useFeatureB ...
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.
- often use:
For some people curious about courses which I took:
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
- Keychron Q4
- Mouse: Logitech MX Master 3s
- Terminal: Warp
- Neovim: AstroNvim
- Love themes(VScode):
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