‧͙⁺˚*･༓☾🐺☽༓･*˚⁺‧͙

Style guides

4 min read

Parents : MOC-Computer-Science

Date and time note was created$= dv.current().file.ctime
Date and time note was modified$= dv.current().file.mtime

Inspiration for folder structures

React Folder Structure

react

  • A simple Folder structure might look like this which is quite scalable and maintainable
  • The structure is organized into an src the directory containing the React app’s source code.
  • The actions and reducers folders contain Redux-specific code.
  • The components folder contains the React components for the app.
  • The styles folder contains CSS styles.
  • The utils folder contains utility functions.
  • The views folder contains higher-level components responsible for rendering specific pages or sections of the app.
  • The App.js file contains the root component of the app.
  • The index.js the file is responsible for rendering the root component and mounting it to the DOM.
  • The package.json file lists the dependencies for the project
  • The README.md the file provides documentation for the project.

Conventions for naming

Camel Case

When using camel case, you start by making the first word lowercase. Then, you capitalize the first letter of each word that follows.

So, a capital letter appears at the start of the second word and at each new subsequent word that follows it.

Here are some examples of how you would use camel case:

numberOfDonuts = 34

favePhrase = "Hello World"

In the example numberOfDonuts, the first word number is lowercase. Then, the first letter of the second word, Of, is capitalized, as is the first letter of the third word, Donuts.

You will encounter camel case in Java, JavaScript, and TypeScript for creating variable, function, and method names.

Snake Case

Snake case separates each word with an underscore character (_).

When using snake case, all letters need to be lowercase.

Here are some examples of how you would use the snake case:

number_of_donuts = 34

fave_phrase = "Hello World"

Snake case is used for creating variable and method names.

Snake case is also a good choice for naming files, as it keeps names readable.

You will typically encounter it the most when programming in Python and not so much when programming in Java, JavaScript, or TypeScript.

You will also come across it when working with databases, as it is used for creating table and column names.

There is also an all-caps version of the snake case where all letters are in the upper case - also known as the screaming snake case.

Here are some examples of how you would use upper case snake case:

NUMBER_OF_DONUTS = 34

FAVE_PHRASE = "Hello World"

The capitalized version is used for declaring constants in most programming languages. A constant is a data item whose value doesn’t change throughout the life of a program.

What is Kebab Case?

The kebab case is very similar to snake case.

The difference between snake case and kebab case is that kebab case separates each word with a dash character, -, instead of an underscore.

So, all words are lowercase, and each word gets separated by a dash.

The kebab case is another one of the most human-readable ways of combining multiple words into a single word.

Here are some examples of how you would use kebab case:

number-of-donuts = 34

fave-phrase = "Hello World"

You will encounter kebab cases mostly in URLs.

A URL (short for Uniform Resource Locator) is a unique address for accessing a resource on the Web.

Pascal Case

Pascal case is similar to camel case. The only difference between the two is that pascal case requires the first letter of the first word to also be capitalized.

So, when using pascal case, every word starts with an uppercase letter (in contrast to camel case, where the first word is in lowercase).

Here are some examples of how you would use pascal case:

NumberOfDonuts = 34

FavePhrase = "Hello World"

You will see the pascal case used for naming classes in most programming languages.

Related

References

Graph View