Skip to content
Malouf Developer Docs

Our Coding Standards

Introduction

The intention of this document is to help implement and maintain our coding standards. I think that, as developers, it’s safe to say that when writing code we want to create something that is fast, efficient, and of quality. Unfortunately, sometimes, individual preferences don’t line up from person to person. This is why we should adhere to some coding standards.
This document is a guide, not a rule set. Although it would be nice if you used these standards since everyone else will be, right? RIGHT??!

What are coding standards?

In short, coding standards are rules and guidelines that are used to create and maintain a code base. These standards are used to ensure that the code base is clean, organized, and consistent.

You can read more about what coding standards are and why they’re important in an article called Coding Standards: What Are They and Why Are They Important?, by codacy.

1. General Formatting

  • Indentation: Use two spaces for indentation. Do not use tabs.
  • Line Length: Limit lines to 80 characters.
  • Spacing: Use a single space after a comma or colon.
  • Semicolons: Use semicolons at the end of each line (in Javascript).

Example:

<head>
  <title>Simple Code Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple example.</p>
  <script src="script.js"></script>
</body>
window.onload = function () {
  const heading = document.querySelector('h1');
  const paragraph = document.querySelector('p');

  heading.textContent = 'Hello, World!';
  paragraph.textContent = 'This is a simple example.';
};

2. Naming Conventions

  • Variables and Functions: Use descriptive names in camelCase.
  • Classes: Use descriptive names in kebab-case.
  • IDs: Use descriptive names in camelCase.
  • Quotes: Use single quotes in javascript and double quotes in HTML.

Example:

<body>
  <div id="thisIsMyDiv">
    <p class="this-is-my-paragraph">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor.
    </p>
  </div>

  <script>
    const oiYouThere = 'hello world';
    console.log(oiYouThere);
  </script>
</body>

3. Comments

  • Comments: If your code is complicated, confusing, or required something finicky.

Example:

// Function to generate the Fibonacci sequence up to 'n' terms
function fibonacci(n) {
  const sequence = [0, 1];

  // Loop to calculate the subsequent terms of the Fibonacci sequence
  for (let i = 2; i < n; i++) {
    // Calculate the next term by adding the last two terms
    const nextTerm = sequence[i - 1] + sequence[i - 2];
    sequence.push(nextTerm);
  }
  return sequence;
}

4. Other Standards

  • If/Else Single Statements and Arrow Functions: Use curly braces.

Good Example:

function hungry() {
  if (hungry) {
    return 'I AM HUNGRY';
  } else {
    return 'i am not hungy';
  }
}

Bad Example:

function smelly() {
  if (smelly) return 'i forted';
  else return 'is clean';
}
  • Promises: For fetch api calls use async/await instead of then/catch.

Good Example:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

Bad Example:

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
  • REMs vs PXs: Use REMs for typography and PXs for layout.
body {
  font-size: 16px; /* Base font size for the entire document */
  line-height: 1.5; /* Line height relative to the base font size */
}

h1 {
  font-size: 2rem; /* 32px (16px * 2) */
  margin-bottom: 20px; /* Using PX for layout */
}

p {
  font-size: 1rem; /* 16px */
  margin-bottom: 10px; /* Using PX for layout */
}

.container {
  width: 960px; /* Fixed width layout using PXs */
  margin: 0 auto; /* Centering the container using PXs */
}

Conclusion

It’s clear that adherence to these guidelines is essential for maintaining code quality and consistency within our team. While it may seem silly to follow these standards, the benefits far outweigh the inconvenience.

Consistent formatting, clear naming conventions, thoughtful commenting, and best practices not only make our code more readable but also contribute to better collaboration and easier maintenance.

Here’s to coding with style, swagger, and a whole lot of pizzazz! Let’s rock on, developers! 🚀✨