
# Building a Custom Blogging Platform: The Journey So Far 

When I started working on my blogging software, I didn’t just want to create another blog—I wanted to build something that could grow with me, both as a developer and a content creator. Inspired by  [John Cricket's Code challenges](https://codingchallenges.fyi/challenges/challenge-blog), I decided to take on this challenge and document every step of the process.

This blog post is the story so far—a mix of lessons learned, technical insights, and the excitement of creating something from scratch.

### Step Zero: Laying the Foundation
Before diving into any real coding, I tackled the foundational tasks:

In this step I have setup a Next.js project, bought a domain and setup a CI/CD pipeline using [netlify](https://www.netlify.com/) to boost my productivity on the publishing process allowing me to focus on whats important: Coding the Blog!

Why Next.js? Well, besides its many features I wanted to learn more about this awesome framework so I thought why not kill two birds with a stone?

- Setting Up a Next.js Project:
- Buying a Domain
- Setting Up a CI/CD Pipeline (just a few clicks with netlify)

### Step One: Rendering Static Content

Up to this point I has a working Next.js website properly hosted on a cloud provider linked to my domain. Also, everytime I pushed some code CI/CD was shipping and distributing my code to the world.

A piece of advice: Always start with the basics!
 
With the basics in place, I moved on to building the first core feature: rendering blog posts. Here’s how I approached it:

The goal:

- Fetch & render a list of posts
- On clicking a post render its contents properly


With that in mindo, I created markdown files and stored them on a directory inside my Next.js project. That's right, all posts were store on the frontend project. Why? Well, because my goal was to fetch posts from a data store and render on the website. 

That allowed my to work purely on parsing markdown files and rendering stuff like images, lists, code snippets properly on my blog. In the future I can just move the posts to a database but that's a problem for tomorrow!


### Data Model

In order to handles posts I have structured each post so that it has a corresponding JSON object containing metadata like title, creation date, description, and ID.

```javascript
{
  title: "Article 4",
  createdAt: "March 24, 2022",
  description: "Example post with headers, lists, images, tables, and more!",
  id: 'next-15-rc'
}
```

### Markdown Parsing

Problem: I Write and store the posts in markdown files but a browser only undestands html

So obviously I have to parse the markdown files converting them into HTML.The HTML is then displayed based on a template (mostly css I've created), giving the blog posts a consistent look.


I picked to libs for that job:

- markdownit: a javascript markdown parser 
- hljs: a code snippet syntax highlighter

I then combine those libraries on a pipeline to read the posts parse convert them to HTML, highlight Create a backend to serve the frontend with any resources it need.content on a div.





### What’s Next?
Next, I’m diving into Step Two, where I’ll:

Move the posts to a database.
Create a backend to serve the frontend with any resources it need.
This journey is a work in progress, but it’s been incredibly rewarding so far. If you’re curious about how things evolve or have tips and suggestions, drop a comment—I’d love to hear from you!


There is no comment section yet so fell free to reach me on my social media right here on the bottom of the page.

This blog post is the story so far—a mix of lessons learned, technical insights, and the excitement of creating something from scratch.

Building a Custom Blogging Platform: The Journey So Far


# How To Write Comments in JavaScript

### Introduction

In programming, our first consideration is usually the machine — how the computer is reading and interpreting the code we write. However, it's equally important to consider the people who will be reading and working with the code. Whether you're working with a team or on your own, you will need to learn to properly comment and structure your code for human readers.

Comments are annotations in the source code of a program that are ignored by the interpreter, and therefore have no effect on the actual output of the code. Comments can be immensely helpful in explaining the intent of what your code is or should be doing.

As a developer, it can be frustrating to delve into code written by someone else that was not properly commented, and it's remarkably easy to forget what your own code meant when you're no longer immersed in the context of a program. Commenting your code early on will reinforce good programming habits throughout your career to avoid these issues later on.

## Comment Syntax

Let's take a quick look at the two different types of JavaScript comment syntax.

**Single-line**  comments are written with two forward slashes (`//`):

```js
// This is a comment
```

All characters immediately following the  `//`  syntax until the end of the line will be ignored by JavaScript.

**Block**  comments, sometimes referred to as  **mutli-line**  comments, are written with opening tags (`/*`) and closing tags (`*/`). If you know CSS, then you're already familiar with block-level comments.

```js
/* This is
a comment */
```

Everything between the opening and closing tag in the code block above will be ignored.

Both single-line and multi-line comments are written above the code they are designated to explain, as demonstrated in this "Hello, World!" example:

```js
// Print "Hello, World!" to the console
console.log('Hello, World!')
```

When writing comments, indent them at the same level as the code immediately below them:

```js
// Initialize a function
function alphabetizeOceans() {
  // Define oceans variable as a list of strings
  const oceans = ['Pacific', 'Atlantic', 'Indian', 'Antarctic', 'Arctic']

  // Print alphabetized array to the console
  console.log(oceans.sort())
}
```

Note that comments are just as much a part of the code as the program itself. Outdated comments can be more of a detriment than no comment at all, so remember to maintain and update comments regularly along with everything else.

## Inline Comments

Single-line comments are referred to as  **inline comments**  when they appear at the end of a line of code.

```js
let x = 99 // assign numerical value to x
let y = x + 2 // assign the sum of x + 2 to y
```

Inline comments can be used for quick annotation on small, specific snippets of content. Since the comment should only relate to the exact line it's written on, it is the most obvious type of comment.

Remember that there is no way to end a single line comment on a line, so make sure not to put any code after the  `//`  syntax, as seen in the example below.

```js
for (let i = 0; i === 10; i++) // for loop that runs ten times {
	// Running this code results in a syntax error
}
```

Though inline comments can be useful, they should be used sparingly — code covered in an abundance of inline comments will quickly become messy and therefore difficult to read.

## Block Comments

Block-level comments, or multi-line comments, are long-form annotations used to introduce and explain a section of code. Often these types of comments are placed at the top of a file, or before a particularly complex code block.

```js
/* Initialize and invoke a the greetUser function
to assign user's name to a constant and print out
a greeting. */

function greetUser() {
  const name = prompt('What is your name?')
  console.log('Hello ,' + name + '! How are you?')
}

greetUser()
```

You may also sometimes see a slightly modified version of the block comment syntax, which starts with  `/**`  and includes asterisks throughout the left side of comment block.

```js
/**
 * Initialize constant with an array of strings.
 * Loop through each item in the array and print
 * it to the console.
 */

const seaCreatures = ['Shark', 'Fish', 'Octopus']

for (const seaCreature of seaCreatures) {
  console.log(seaCreature)
}
```

Sometimes this type of comment will also include details about the programming file, including the script's name, version, and author.

If you are a beginner in JavaScript, you may write as much as necessary to learn and comprehend the code you write. As you progress as a JavaScript developer, you will be looking to answer the intent, or the  _why_  behind the code, as opposed to the  _how_  or  _what_.

## Commenting Out Code for Testing

Comments can also be used to quickly and easily prevent execution of code for testing and debugging purposes. This is referred to as "commenting out code".

If there is an error in some code you've written, commenting out sections will prevent them from running, and can be helpful in pinpointing the source of the issue. You may also use it to toggle between code to test different results.

```js
// Function to add two numbers
function addTwoNumbers(x, y) {
  let sum = x + y
  return sum
}

// Function to multiply two numbers
function multiplyTwoNumbers(x, y) {
  let product = x * y
  return product
}

/* In this example, we're commenting out the addTwoNumbers
function, therefore preventing it from executing. Only the
multiplyTwoNumbers function will run */

// addTwoNumbers(3, 5);
multiplyTwoNumbers(5, 9)
```

Both single-line comments and block comments can be used to comment out code, depending on the size of the section being toggled.

> **Note**: Commenting out code should only be done during testing purposes. Do not leave snippets of commented out code in your final script.

When working out the logic of a program, commenting out code can prove to be helpful as you determine where bugs are or assess the lines of code that offer the most utility.

## Conclusion

JavaScript code is interpreted by the computer, but will always be read by other programmers, including your future self. Taking the time to leave proper annotation on complicated sections of code will pay dividends in the future, making it easier for you and collaborators to understand the intent of the code you have written.

A straightfoward guide to writing comments in javascript

How to add comments in Javascript


# Understanding Arrays in JavaScript

### Introduction

An  **array**  in JavaScript is a type of global object that is used to store data. Arrays consist of an ordered collection or list containing zero or more datatypes, and use numbered indices starting from  `0`  to access specific items.

Arrays are very useful as they store multiple values in a single variable, which can condense and organize our code, making it more readable and maintainable. Arrays can contain any datatype, including numbers, strings, and objects.

To demonstrate how array can be useful, consider assigning the five oceans of the world to their own variables.

```js
// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'
```

This method is very verbose, and can quickly become difficult to maintain and keep track of. Using arrays, we can simplify our data.

```js
// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']
```

Instead of creating five separate variables, we now have one variable that contains all five elements. We used square brackets (`[]`) to create an array.

Accessing a specific item is as easy as appending the index to the variable.

```js
// Print out the first item of the oceans array
oceans[0]
```

```terminal
Pacific
```

In this article, we will learn how to create arrays, how they are indexed, how to add, modify, remove, or access items in an array, and how to loop through arrays.

## Creating an Array

There are two ways to create an array in JavaScript. The array literal, which uses square brackets, and the array constructor, which uses the  `new`  keyword.

Let's demonstrate how to create an array of shark species using the array constructor, which is initialized with  `new Array()`.

```js
// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')
```

Now here is the same data created with the array literal, which is initalized with  `[]`.

```js
// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']
```

Both methods will create an array. However, the array literal (square brackets) method is much more common and preferred, as the  `new Array()`  constructor method may have inconsistencies and unexpected results. It's useful to be aware of the array constructor in case you encounter it down the line.

We can print out an entire array, which will display the same as our input.

```js
// Print out the entire sharks array
sharks
```

```js
;['Hammerhead', 'Great White', 'Tiger']
```

Arrays are often used to group together lists of similar datatypes, but they can technically contain any value or a mix of values, including other arrays.

```js
// Initialize array of mixed datatypes
let mixedData = ['String', null, 7, ['another', 'array']]
```

After creating an array, we can manipulate them in many ways, but first we must understand how arrays are indexed.

> **Note**: You may see the last item in an array with or without a final comma. This is known as a  [trailing comma](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas). It is common to see them omitted, but generally it is becomming preferred to include them in your code, as this makes version control diffs more clear, and makes it easier to add and remove items without errors. Note that trailing commas are not allowed in JSON files.

## Indexing Arrays

If you've learned about  [indexing and manipulating strings in JavaScript](https://www.digitalocean.com/community/tutorials/how-to-index-split-and-manipulate-strings-in-javascript), you may be familiar with the concept of indexing arrays already, as a string is similar to an array.

Arrays do not have name/value pairs. Instead, they are indexed with integer values beginning with  `0`. Here is an example array, assigned to  `seaCreatures`.

```js
let seaCreatures = ['octopus', 'squid', 'shark', 'sea horse', 'starfish']
```

Here is a breakdown of how each item in the  `seaCreatures`  array is indexed.

<table>
<thead>
<tr>
<th>octopus</th>
<th>squid</th>
<th>shark</th>
<th>sea horse</th>
<th>starfish</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>


The first item in the array is  `octopus`, which is indexed at  `0`. The last item is  `starfish`, which is indexed at  `4`. Counting starts with  `0`  in indices, which goes against our natural intuition to start counting at one, so special care must be taken to remember this until it becomes natural.

We can find out how many items are in an array with the  `length`  property.

```js
seaCreatures.length
```

```terminal
5
```

Although the indices of  `seaCreatures`  consist of  `0`  to  `4`, the  `length`  property will output the actual amount of items in the array, starting with one.

If we want to find out the index number of a specific item in an array, such as  `sea horse`, we can use the  `indexOf()`  method.

```js
seaCreatures.indexOf('sea horse')
```

```terminal
3
```

If an index number is not found, such as for a value that does not exist, the console will return  `-1`.

## Accessing Items in an Array

An item in a JavaScript array is accessed by referring to the index number of the item in square brackets.

```js
seaCreatures[1]
```

```terminal
squid
```

We know  `0`  will always output the first item in an array. We can also find the last item in an array by performing an operation on the  `length`  property and applying that as the new index number.

```js
const lastIndex = seaCreatures.length - 1

seaCreatures[lastIndex]
```

```terminal
starfish
```

Attempting to access an item that doesn't exist will return  `undefined`.

```js
seaCreatures[10]
```

```terminal
undefined
```

In order to access items in a nested array, you would add another index number to correspond to the inner array.

```js
let nestedArray = [
  ['salmon', 'halibut'],
  ['coral', 'reef'],
]

nestedArray[1][0]
```

```terminal
coral
```

In the above example, we accessed the array at position  `1`  of the  `nestedArray`  variable, then the item at position  `0`  in the inner array.

## Adding an Item to an Array

In our  `seaCreatures`  variable we had five items, which consisted of the indices from  `0`  to  `4`. If we want to add a new item to the array, we can assign a value to the next index.

```js
seaCreatures[5] = 'whale'

seaCreatures
```

```terminal
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale' ]
```

If we add an item and accidentally skip an index, it will create an undefined item in the array.

```js
seaCreatures[7] = 'pufferfish'

seaCreatures
```

```terminal
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish' ]
```

Attempting to access the extra array item will return  `undefined`.

```js
seaCreatures[6]
```

```terminal
undefined
```

Problems like that can be avoided by using the  `push()`  method, which adds an item to the end of an array.

```js
// Append lobster to the end of the seaCreatures array
seaCreatures.push('lobster')

seaCreatures
```

```terminal
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]
```

On the other end of the spectrum, the  `unshift()`  method will add an item to the beginning of an array.

```js
// Append otter to the beginning of the seaCreatures array
seaCreatures.unshift('otter')

seaCreatures
```

```terminal
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]
```

Between  `push()`  and  `unshift()`  you will be able to apend items to the beginning and end of an array.

## Removing an Item from an Array

When we want to remove a specific item from an array, we use the  `splice()`  method. In the  `seaCreatures`  array, we accidentally created an undefined array item earlier, so let's remove that now.

```js
seaCreatures.splice(6, 1)

seaCreatures
```

```terminal
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]
```

In the  `splice()`  method, the first parameter stands for the index number to be removed, and the second paremeter is how many items should be removed. We put  `1`, signifying that only one item will be removed.

The  `splice()`  method will change the original variable. If you would like the original variable to remain unchanged, use  `slice()`  and assign the result to a new variable.

```js
let newArray = slice(6, 1)
```

The  `pop()`  method will remove the last item in an array.

```js
// Remove the last item from the seaCreatures array
seaCreatures.pop()

seaCreatures
```

```terminal
[ 'otter',
	'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]
```

`lobster`  has been removed as the last item of the array. In order to remove the first item of the array, we will use the  `shift()`  method.

```js
// Remove the first item from the seaCreatures array
seaCreatures.shift()

seaCreatures
```

```terminal
[ 'octopus',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]
```

Using  `pop()`  and  `shift()`, we can remove items from the beginning and the end of arrays. Using  `pop()`  is preferred wherever possible, as the rest of the items in the array retain the same index number.

## Modifying Items in Arrays

We can overwrite any value in an array by assigning a new value using the assignment operator, just like we would with a regular variable.

```js
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = 'manatee'

seaCreatures
```

```terminal
[ 'manatee',
	'squid',
	'shark',
	'sea horse',
	'starfish',
	'whale',
	'pufferfish' ]
```

Another way to modify a value is using the  `splice()`  method with a new parameter. If we wanted to change the value of  `sea horse`, which is the item at index  `3`, we could remove it and add a new item in its place.

```js
// Replace sea horse with sea lion using splice method
seaCreatures.splice(3, 1, 'sea lion')

seaCreatures()
```

```terminal
[ 'manatee',
	'squid',
	'shark',
	'sea lion',
	'starfish',
	'whale',
	'pufferfish' ]
```

In the above example, we removed  `sea horse`  from the array, and pushed a new value into index  `3`.

## Looping Through an Array

We can loop through the entirety of the array with the  `for`  keyword, taking advantage of the  `length`  property. In this example, we can create an array of  `shellfish`  and print out each index number as well as each value to the console.

```js
// Create an array of shellfish species
let shellfish = ['oyster', 'shrimp', 'clam', 'mussel']

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i])
}
```

```terminal
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'
```

We can also use the  `for...of`  loop, a newer feature of JavaScript.

```js
// Create an array of aquatic mammals
let mammals = ['dolphin', 'whale', 'otter']

// Loop through each mammal
for (let mammal of mammals) {
  console.log(mammal)
}
```

```terminal
dolphin
whale
otter
```

The  `for...of`  loop does not retrieve the index number of the elements in the array, but it is generally a simpler, more concise way to loop through an array. Using loops is extremely useful for printing out the whole value of an array, such as when displaying the items from a database on a website.

## Conclusion

Arrays are an extremely versatile and fundamental part of programming in JavaScript. In this article, we learned how to create an array, how arrays are indexed, and some of the most common tasks of working in arrays, such as creating, removing, and modifying items. We also learned two methods of looping through arrays, which is used as a common method to display data.

A path to learning how to handle arrays in javascript