VektorIT's code style which cannot be enforced using linters or formatters.
The computer can read extremely ugly code and still know what to do.
Humans (and LLMs) have a way harder time reading code than compilers.
So we make sure we write code which can be understood by people,
which keeps the projects easy to maintain.
Helps with readability for both humans and LLMs.
Scope is about where variables are accessible. By minimising it, we reduce the amount of variables one needs to keep in their head as they are reading it.
This section focuses on how to structure files and folders.
If one features is organized into multiple components, keep the components within the same file until another file needs to import it.
By not exporting variables immaturely, we minimise the variables' scope without adding restrictions or unnecessary folders.
Instead of grouping files by categories easily readable for computers, group them by their relation to other files for better human readability.
Don't do this:
//htmlindex.htmlprofile.htmlsign-in.htmlsign-out.html
/cssindex.cssprofile.csssign-in.csssign-out.csslayout.css
/jsindex.jsprofile.jsauth.jsutils.js
Do this instead:
//features/authauth.js/sign-insign-in.htmlsign-in.css
/sign-outsign-out.htmlsign-out.css
/pageslayout.css/indexindex.htmlindex.cssindex.js
/profileprofile.htmlprofile.css
/libutils.js
From the structure alone, we can infer that
auth.jsis only used within the/authfolderlayout.cssis only used within the/pagesfolder/liband/featuress contents are accessible within the whole repository, as they are placed at the root level of the repository
Files and folders are assumed to have access to files and folders within the same directory/folder.
You can imagine that the scope of files cascades down subfolders like a waterfall.
Better to spend extra time thinking about organisation and how the code relates to other code instead of slapping it into a folder letting it rot until some other poor soul has to decipher what files relates to what.
A pure function is one where the result only depends on its arguments.
This is not a pure function as the mutable variable amount could change and affect the result of the add function
let amount = 5;
function add(a: number) {
return a + amount;
}
add(2);Here is an example of how to rewrite add as a pure function
let amount = 5;
function add(a: number, b:number) {
return a + b;
}
add(2, 5);This makes it easy to understand the function type at a glance.
It also helps make sure functions return what they're supposed to, and if the return type changes, your code editor can point you to its occurrences which need to be updated.
- function add(a: number, b: number) {
+ function add(a: number, b: number): string
return `${a}${b}`
}We make an exception for React components as they are the only functions written with PascalCase.
- function Component(): JSX {
+ function Component() {
...
}By JavaScript convention.
By JavaScript and general convention.
Essential Typescript for React - Blogpost, Jacob Paris
https://react.dev/reference/rules
By following these you will implicitly write code in a functional style
If you want to learn more about functional programming ask @phibkro.
- function my_component() {
+ function MyComponent() {
...
}Make sure you understand that functions in JavaScript are hoisted
- const myFunction = () => {
+ function myFunction() {
...
}https://stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement