DEV Community: David Uzondu

Serving Dynamic HTML With Pug And Express

David Uzondu — Wed, 31 Jul 2024 00:19:14 +0000

Before Single Page Applications became a thing, templating languages like Pug were super popular because they allowed developers to render a page on the server side before sending it over to the client. Express is the most popular backend application framework for Node.js. It prides itself on being lightweight, unopinionated, and minimal to use. In this guide, you will learn how to serve dynamic HTML with Pug from an Express.js server application.

How does Pug work?

HTML can be cumbersome to write sometimes. The language has no support for features like "components", which can lead to code duplication unless you rely on external tools like JavaScript.

Pug is a templating engine that makes it easier to write HTML. With Pug, you can split your code and reuse "components" in as many places as you'd like. Regarding syntax, Pug differs from traditional HTML as it uses indentation instead of closing tags. In HTML, you define an element like this:

<div class='hello'>This is something worth noting</div>

In Pug, however, you define an element like this:

div(class='hello') This is something worth noting

The tag name is defined on the left, with its attributes in brackets. The tag is separated from its contents by the space next to it. The Pug transpiler will transpile your code back to the proper HTML code recognized by the browser. Child elements are defined by indentation. This means if you wanted to have a div inside a main tag, you'd do something like this:

main
div Hello from the children of planet Earth!

Integrating Pug with Express

To add Pug to your Express.js project, simply install Pug with any package manager of your choice. For this example, I'm working with NPM:

npm i pug

This will add Pug to your list of dependencies in your package.json file. Now, you'll need to set your view engine to pug, so in your project's entry file (usually main.js, app.js, or index.js ), import express properly and configure the application settings with the set method.

import express from 'express';
const app = express();

app.set('view engine', 'pug');

By setting view engine to 'pug', you're telling Express to use Pug as its templating engine. So, when you call the render method on the response object, you must pass a valid 'view' for Express to render. Views in Express must be placed in a special views directory, in the project's root directory. If you haven't created a views directory, you can do so with the following:

mkdir views
# Make sure you are in your project root

Now, that you've got things set up, let's proceed to writing our first view in Pug.

Basic Pug Usage in an Express Project

Create a views/index.pug file, and add the following to it:

html
  head
    title Welcome to my website
  body
    div Hello World

Now that your index.pug file is ready, you'll need to serve it to the client on a route. Go to your project's entry file and define a get request handler that will render and return the views/index.pug file to the client.

app.get("/", (req, res) => {
  res.render("index.pug");
});

When you open localhost:<your-port>, you should see the "Hello World" message printed on the screen. In the callback function of the get method, you'll see the usage of res.render in its simplest form. The syntax for the render method is shown below:

res.render(view [, locals] [, callback]);

First, we have view, which is simply the path of the .pug file you want to render. Remember that Express locates the .pug files relative to the views directory. So, if you have a Pug file located at views/layouts/main.pug, you should refer to it as layouts/main when setting the view in your route.

app.get("/", (req, res) => {
  res.render("layouts/main");
});

Next, the locals is an object with properties that define local variables that should be passed into the specified view for interpolation. When callback is provided, the resulting HTML from the render operation is not sent to the client. Instead, you can access it via a parameter in the callback function, like this:

app.get("/", (req, res) => {
  res.render("index.pug", {}, (err, html) => {
    console.log(html);
  });
});

When the client makes a get request to '/', a response is not sent. Instead, html is logged to the server console. You can manually send the HTML to the client with the send method:

res.send(html)

Building Dynamic HTML Pages

Now it's time to take things to the next level. You'll learn how to interpolate data with Pug to create dynamic content on the fly. In Pug, string interpolation is done with the syntax #{<item>}. At compilation time, #{<item>} is resolved to its actual value. Here's an example.

// greet.pug
html
  head
    title Welcome to my website
  body
    div Hello #{name}

In the code block above, name will be replaced the actual value from the locals object passed into the render method. If name is undefined, no error is thrown. Here it is in action.

app.get('/greet', (req, res) => {
    const {name} = req.query;
    res.render('greet.pug', {name})
})

When the client hits /greet?name=David, the following HTML will be returned

<html>
  <head>
    <title>Welcome to my website</title>
  </head>
  <body>
    <div>Hello David</div>
  </body>
</html>

The string interpolation syntax (#{}), is escaped by Pug. This is useful in situations where the content comes from users. If you want Pug is render the string as is without escaping, you'll need to use the !{} syntax.

- var example = <strong>very risky</strong>
div !{example}

Tags and Tag Intepolation in Pug

Pug provides a handy syntax for tag interpolation #[], which you can use like this:

Basic Tag Interpolation: You can interpolate a tag directly within text.

p This is a #[strong very important] message.

This will render as:

<p>This is a <strong>very important</strong> message.</p>

Interpolating with Variables: You can also interpolate tags with variables.

- var username = 'John' 
p Hello, #[strong #{username}]!

You don't have to worry about self-closing tags, because Pug knows what tags are self closing. But if you really need to self-close a tag, you can append the / character to the end of the tag like this:

div/

To save space, You can use the : shorthand instead of indentation to specify nested tags.

label: input(type='text' name='username')

The code block above is just as valid as:

label
    input(type='text' name='username')

Using JavaScript in Pug

In the last code block, notice the use of the var keyword from JavaScript to create a variable. Pug allows you to insert valid JavaScript code on any line that starts with an -. For example, you can create an array and iterate over it to render a list of items. Pug has its native syntax for this, but in this example, you can use JavaScript.

html
  head
    title Welcome to my website
  body
    div List of items 
    - var items = ['milk', 'peas', 'bread']
    - items.forEach((item)=>{
      li #{item}
    - })

Study the previous example. Notice how Pug and JavaScript are combined. The forEach method is not part of the Pug API, it belongs to JavaScript. Likewise, the string interpolation symbol is not part of the #{} JavaScript API. The lines with valid JavaScript code are marked with the - symbol. On the second to last line, there is no - symbol, because that is Pug code.

Iteration and conditionals with Pug

For common things like conditionals and iteration, Pug provides its syntax that you can use instead of JavaScript. The most popular keyword for iteration in Pug is each. each must come in the form each VARIABLE_NAME of JS_EXPRESSION. Here's how you can use it:

each item in ['milk', 'peas', 'bread']
   li #{item}

When dealing with objects, the expected format for each is each VALUE, KEY OF JS_EXPRESSION. For example:

each val, key in {1:'milk', 2:'peas', 3:'bread'}
  #{key} : #{val}

You can use the if syntax to handle conditionals. Here's an example:

╴ var loggedIn = false

if !loggedIn
    p Sorry you cannot access this item because you're not logged in

Conversely, Pug has an unless keyword that you can use like this:

unless loggedIn
    p Sorry you cannot access this item because you're not logged in

Advanced Techniques with Pug

Pug offers many features beyond just string interpolation and conditionals. If you are working on a large website, you might need to use advanced features that Pug provides, such as layouts and partials.

Using Layout files for consistent page structure

Layout files allow you to define a common structure for your pages and extend it in other templates, ensuring consistency across your website. Here's an example of how you can use layout files.

//- views/layout.pug
html
  head
    title My Website Title
  body
    header
      h1 My Website
    block content
    footer
      p Footer content

Notice the block keyword in the code block above. A block in a layout file acts as a placeholder. Each block must have a name. In this example, block is defined as content. Whenever you want to use your layout file, you use the extends syntax to tell Pug that a template should include a layout.

//- views/index.pug
extends layout

block content
  p Welcome to the homepage!

In this example, index.pug extends the layout.pug template, which provides the page's base structure, including the header and footer. The block content line defines a block named content where the indented paragraph "Welcome to the homepage!" is inserted. When index.pug is rendered, the final HTML will look this this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

Using Partials for Reusable Components

Partials are reusable pieces of templates that can be included in other templates, which helps to keep your code DRY (Don't Repeat Yourself). You can create partials in Pug with the include syntax.

//- views/partials/sidebar.pug
aside
  p This is the sidebar content.

In sidebar.pug defines a partial template for a sidebar with an aside element containing a paragraph of text.

//- views/layout.pug
html
  head
    title My Website Title
  body
    include partials/sidebar
    block content
    footer
      p Footer content

In layout.pug, a layout template is created with a basic HTML structure. It includes the header and sidebar partials using the include keyword, places a block content placeholder for dynamic content, and adds a footer with a paragraph of text. The final render should look something like this:

<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <header></header>
    <aside>
      <p>This is the sidebar content.</p>
    </aside>
    <p>Welcome to the homepage!</p>
    <footer>
      <p>Footer content</p>
    </footer>
  </body>
</html>

Tips for optimizing Pug templates

1. Use partials and layouts wherever you can: Using partials, layouts, and helpers in Pug enhances template organization and efficiency. Partials are reusable snippets that prevent code repetition, while layouts provide a consistent structure for pages by defining common elements and extending them in individual templates.

2. Minimize the use of inline JavaScript: When writing your templates, try to use inline JavaScript sparingly. Adding huge blocks of JavaScript to your code can create issues with debugging and maintainability.

One way to reduce inline JavaScript is through the use of helpers. Helpers, defined in the server-side code, allow dynamic content within templates. You can pass a helper function to a template using the locals method on the express app.

const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.locals.formatDate = function(date) {
  return new Date(date).toLocaleDateString();
};

app.get('/', (req, res) => {
  res.render('index', { title: 'Home', currentDate: new Date() });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

With the formatDate helper function set, you can use it in your Pug template like this:

p Welcome to the homepage!
p Today's date is #{formatDate(currentDate)}

Conclusion

In this guide, you learned how to serve dynamic HTML with Pug and Express. We covered basic Pug syntax, integrating Pug with Express, building dynamic pages, and advanced techniques like using layout files and partials.

Templating engines are very powerful especially when building a server-side web application. They are great for Search Engine optimization too because unlike single-page applications, the content is rendered on the server on each request.

How To Create a Before and After Image Slider With Vanilla JavaScript

David Uzondu — Fri, 01 Dec 2023 08:58:18 +0000

In the field of web development, user engagement and interactive design play pivotal roles in creating a memorable online experience. One powerful technique that captivates audiences and tells compelling visual stories is the Before-and-After Image Slider.

This component allows users to seamlessly compare two images by sliding between them, unveiling transformations, enhancements, or the passage of time. In this guide, you will learn how to build the image slider using just HTML, CSS, and Vanilla JavaScript.

Setting Up The Development Environment

To get started, create a new folder. On UNIX systems and Windows, you can do so with the mkdir command. In this folder, add the following files: index.js, index.html and app.css. Open the index.html file and add the following starter code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="app.css" />
    <title>Before and After Image Slider</title>
  </head>
  <body>
    <h1>Before and After Image Slider</h1>
    <form>
      Add "before" image:
      <input type="file" accept="image/*" name="" id="before-selector" onchange="updateImage()"/>
      <br />
      Add "after" image:
      <input type="file" accept="image/*" name="" id="after-selector" onchange="updateImage()"/>
    </form>
    <div class="image-container">
      <input type="range" name="" id="" min="0" max="100" value="50" tabindex="-1"/>
      <div class="image-after"></div>
      <div class="image-before"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

In the code block above, there is form element that holds two input elements, with each one of them having an onchange event handler that calls an updateImage() function.

Next, you have an "image-container" div, that holds three additional elements, a "range" input element and two divs that will hold the "before" and "after" image respectively.

The input element with type "range", has a default value of 50, and the tabindex attribute is there to ensure that the input element does not receive tab focus.

Adding Some Styling

Right now everything looks bland, so open up the app.css file, and add the following:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.image-container {
  display: flex;
  margin-top: 10px;
  height: 700px;
  width: 1015px;
  background-color: transparent;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  position: absolute;
  width: inherit;
  padding: 0px;
  margin-top: 360px;
  z-index: 100;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  margin-top: -10px;
  background-color: white;
  cursor: grab;
  height: 1.1rem;
  width: 1.1rem;
}

input[type="range"]::-webkit-slider-thumb:active {
  background-color: rgb(231, 227, 227);
  cursor: grabbing;
}

.image-before {
  position: absolute;
  padding: 0;
  margin-left: 8.5px;
  background-image: url("https://cdn.pixabay.com/photo/2023/08/16/23/47/annas-hummingbird-8195150_1280.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 5px 0px 9px 1px #fffefe11;
  height: inherit;
  width: 1000px;
  z-index: 10;
  border-right: solid 0.5px rgba(255, 255, 255, 0.425);
}

.image-after {
  position: absolute;
  margin-left: 8.5px;
  background-image: url("https://cdn.pixabay.com/photo/2016/11/23/18/27/hummingbird-1854225_640.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: inherit;
  width: 1000px;
  /* z-index: -10; */
}

From the CSS above, there are four important things you should pay attention to: The styling for the input element of type "range",image-container and image-before and image-after.

The image-before and image-after divs have their positions set to absolute, with image-before overlaying image-after. This is important because it helps sell the illusion of a smooth transition between images as the user moves the slider.

The "range" input element is important because you can hook onto it with JavaScript and use the "value" attribute, to determine how wide an image should be. Notice how the default styling for input[type='range'] is overridden with appearance: none.

Making Things Functional With JavaScript

Moving on to JavaScript, open the index.js file, select all the necessary elements from the Document Object Model (DOM), and bind them to variables, like this:

let slider = document.querySelector("input[type='range']");
let beforeImage = document.querySelector(".image-before");
let afterImage = document.querySelector(".image-after");
let beforeSelector = document.querySelector("#before-selector");
let afterSelector = document.querySelector("#after-selector");

Next, using the getComputedStyle function, retrieve the width of beforeImage and bind it to the beforeImageWidth variable. Remember that getComputedStyle returns the width alongside its unit (which you do not need in this case). In this case, since the unit is "px", you can use the slice method to remove the unwanted unit like this:

let beforeImageWidth = getComputedStyle(beforeImage).width.slice(
  0,
  getComputedStyle(beforeImage).width.indexOf("p")
);

Next, add an event listener to slider that will listen for "input" events on the element. In the event listener's callback function, call the updateImage function and pass in the target element as a parameter:

slider.addEventListener("input", (e) => {
  adjustImage(e.target);
});

Finally, add define the adjustImage function like this:

function adjustImage(target) {
  beforeImage.style.width = `${(target.value / 100) * beforeImageWidth}px`;
}

In the code block above, the adjustImage function takes in the target parameter and uses the value property to modify the width of beforeImage.

Finally, call the adjustImage function, and pass in slider as a parameter. This will ensure consistency by automatically setting the width of beforeImage on page load:

adjustImage(slider);

Taking Things Further By Adding Upload Functionality.

The image slider works fine, but right now, there is no way to modify the before and after images without digging through the app.css file and modifying the hard-coded values in the background properties of image-before and image-after. To make things dynamic, create an updateImage function like this:

function updateImage(){

}

Check if #beforeSelector contains any files, then instantiate the FileReader object and call the readAsDataURL method.

if (beforeSelector.files && beforeSelector.files[0]) {
  const reader = new FileReader();
  reader.onload = function (e) {
    // Display the selected image
    beforeImage.style.background = `url("${e.target.result}")`;
  };
  reader.readAsDataURL(beforeSelector.files[0]);
}

Do the same for #afterSelector, like this:

if (afterSelector.files && afterSelector.files[0]) {
  const reader = new FileReader();
  reader.onload = function (e) {
    // Display the selected image
    afterImage.style.background = `url("${e.target.result}")`;
  };
  reader.readAsDataURL(afterSelector.files[0]);
}

Returning to the browser, you should be able to select the before and after images from the front end, without needing to modify the hard-coded CSS values:

Things To Consider When Building An Image Slider

While this guide covered the basics, in a real-world application, there are many things to consider when building an image slider, like responsive design, support for touch gestures, and accessibility.

Note that not all users are the same, and you should always strive to provide alternatives for users with disabilities, even if it comes at the cost of aesthetics. Lastly, keep it simple and focused – don't overwhelm your audience with too many images or flashy transitions. Striking the right balance between aesthetics and functionality is the secret sauce for an effective image slider.

Learning to Code in a Third World Country

David Uzondu — Fri, 27 Jan 2023 11:16:08 +0000

Learning to code in third world countries can be a challenging task. The lack of resources, a lack of access to technology, proper internet connection and limited access to education can make it difficult for people to succeed as programmers. However, despite these challenges, many individuals in third world countries are still able to learn how to code and succeed in the field.

One of the biggest challenges that people in third world countries face when learning to code is the lack of access to the necessary technology. Many individuals in these countries cannot afford to purchase a computer, and even if they can, they may not have access to reliable internet service. This can make it difficult for them to access online coding resources and tutorials, and to practice and test their code.

Another challenge that people in third world countries face when learning to code is the lack of proper education. Many schools in these countries do not offer computer science classes, and even if they do, they may not have the resources or trained teachers to provide a comprehensive education. This can make it difficult for individuals to learn the basics of coding and to get the hands-on experience that they need to succeed in the field.

In third world countries like Nigeria, It is not uncommon to hear of people who are using their Android phones to learn.

Despite these challenges, there are still ways for people in third world countries to learn how to code and succeed as programmers. One of the most effective ways is to take advantage of free online resources. There are many websites and tutorials that offer free coding lessons, and these resources can be accessed from anywhere with an internet connection. Additionally, many open-source communities have been working on creating tutorials and resources in local languages, providing education and help to people who would otherwise struggle to access resources.

Here is a list of free online resources that might be beneficial to people living in third world countries.

FreeCodeCamp: provides a comprehensive curriculum of coding lessons and projects, as well as a community of learners to connect with. I particularly like FreeCodeCamp because of the fact that their website loads really fast, which is beneficial to those living in areas with slow internet connection.
SoloLearn: offers mobile-friendly coding lessons in a variety of languages, including C++, Python, and JavaScript.
Khan Academy: provides coding lessons and projects as part of its computer science curriculum.
Udacity: offers free coding courses in subjects such as web development, data science, and artificial intelligence.
Coursera: partners with universities and organizations to offer free coding courses in a wide range of subjects.
edX: similar to Coursera, it partners with universities and organizations to offer free coding courses.

Best Practices: Optimizing your React Application

David Uzondu — Fri, 27 Jan 2023 10:58:15 +0000

Debugging and optimizing your React and JavaScript code for performance is crucial for creating a smooth user experience and improving the overall performance of your application. In this article, we will discuss some best practices and tools that can help you debug and optimize your code.

One recommended practice for debugging your React code is to use the React Developer Tools extension for your browser. This extension allows you to inspect the component tree and see the current state and props of your components. It also allows you to trace the component lifecycle and see when and why a component is re-rendering.

You can optimize your React application using the React.memo() higher-order component for memoizing your functional components. This allows React to compare the previous and next props and state, and only re-render the component if they have changed.

Memoization? WTF is that?

Memoization is a technique used to optimize the performance of functions or calculations by caching their results. In React, memoization is often used to prevent unnecessary re-renders of components. When a component re-renders, it can cause a chain reaction where all of its child components also re-render, even if their props haven't changed. This can lead to wasted resources and slow down the performance of your application.
React provides two hooks, useCallback() and useMemo(), which can be used to memoize values and functions that are passed as props to a component.

The useMemo() hook is used to memoize a value that is passed as a prop to a component. It takes two arguments, a function that returns the value and an array of dependencies. The hook returns a memoized version of the value, which is only re-created when one of the dependencies in the array changes.

Here's an example of how the useMemo hook could be used:

const memoizedValue = useMemo(() => {
    // Expensive calculation or function call
}, [dependency1, dependency2]);
return <Component value={memoizedValue} />;

In this example, the useMemo hook creates a memoized version of the value. The memoized version of the value is only re-created when either dependency1 or dependency2 changes.

Another way to optimize your React code is to use the useCallback() hook to memoize values and functions that are passed as props to your components.

When a callback function is passed as a prop to a component. The useCallback() hook is used to memoize the callback function. It works by returning a memoized version of the function, which is only re-created when one of its dependencies changes.

This can help to prevent unnecessary re-renders of the component that is receiving the callback as a prop, as well as any child components that may be affected by the callback.
Here's an example of using the useCallback() hook to memoize a function:

import { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    // do something
  }, []);

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

Warning
It's worth noting that memoization is a powerful technique but it should be used with care. If it is used excessively it can add some overhead to your application. It is important to understand how your application is behaving and how its components are interacting before deciding to memoize values or functions.

Finally, you can also optimize your JavaScript code by using tools such as the minifier and the transpiler. The minifier removes unnecessary whitespace and comments, while the transpiler converts your code into a version that is compatible with older browsers A minifier is a program that removes unnecessary whitespace and comments from your code, making the file smaller in size and faster to download. This is particularly useful when deploying your application to a production environment, as it reduces the time required to download and parse the code.

One popular minifier for JavaScript is UglifyJS. It can also perform other optimizations such as renaming variables to shorter names and removing dead code. It can be used as a command line tool or integrated into a build system like webpack.

npm install uglify-js -g
uglifyjs input.js -o output.min.js

Another tool that is commonly used to optimize JavaScript code is a transpiler. A transpiler is a program that converts your code into a version that is compatible with older browsers. This is useful for ensuring that your code will work on a wide range of devices and platforms.

One popular transpiler for JavaScript is Babel. It allows you to use the latest version of JavaScript even if the user’s browser doesn’t support it. It can be used as a command line tool or integrated into a build system like webpack. You can install Babel using the following commands.

npm install -g babel-cli
babel input.js --out-file output.js

Holy Sheet! Building A (Really) Simple Blog with Google Sheets as the Database

David Uzondu — Thu, 19 Jan 2023 03:35:24 +0000

Before we get into it,

Check out a preview of what we are going to be building today.

Check out the Google Sheets spreadsheet that acts as the database.

Google Sheets is a powerful tool that can be used to store and organize data, it can technically be used as a database for a blog. However, it is not advisable to use Google Sheets as a database for a blog because it is not ACID compliant.

ACID is an acronym that stands for Atomicity, Consistency, Isolation, and Durability, which are the four key properties of a database that ensures data integrity and reliability. Google Sheets, as a spreadsheet application, does not offer the same level of data integrity and reliability as a traditional database that is ACID compliant.

In this easy to follow, step-by-step tutorial, I will be showing you an easy way to build a very simple blog with Google Sheets as the database. We will be creating a custom API which will allow us to fetch data from our spreadsheet, manipulate that data and display them on our page.

Who can follow this tutorial?

Basically anyone with some basic understanding of JavaScript and how the Fetch API works.

Project Setup

First, we'll need a text editor (Notepad++ is a great option if you are low on system resources) and a Google Account (obviously).

Setting up your main API and connecting it to Google Sheets

Head over to docs.google.com and sign in with your Google Account, if you are prompted to do so.

Click on the navigation menu on the top right hand side of the page and select 'Sheets'. You will be directed to a page where you can click the (+) icon to create a new sheet.
Once the new sheet is created, we will need to get the spreadsheet ID. Getting the spreadsheet ID is fairly simple. If the URL to your spreadsheet is https://docs.google.com/spreadsheets/d/1AxVnqOgcu7h6rr030PtV7WIEiQRMAgYIL6uReg_x8BQ/edit#gid=0, then your spreadsheet ID is 1AxVnqOgcu7h6rr030PtV7WIEiQRMAgYIL6uReg_x8BQ.
Navigate to the A1 cell and type in the word, "Title". After doing that, click on B1 and type in the word, "By". Cell C1 should be filled with the word "Content".
Alright, so far, all we have now is a spreadsheet and a column for the title, another column for the content.
Now we are going to create an API that will allow us to retrieve data from our spreadsheets and return an array of objects. Each object should contain the keys (Title, By, Content and an id).
On the menu bar, click on the "Extensions" button and select "Apps Script". You will be redirected to a new tab with a code editor.

Add the following function to your code.

function getSheetData() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var jsonData = [];
  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    var obj = {};
    for (var j = 0; j < row.length; j++) {
      obj[sheet.getRange(1, j + 1).getValue()] = row[j];
    }
    obj["id"] = i;
    jsonData.push(obj);
  }
  return jsonData;
}

The getSheetData() function retrieves all the data from the active sheet in the spreadsheet, converts it to an array of objects with each object representing a row of data from the sheet. It uses two nested loops to iterate through the data, the outer loop iterates through each row, and the inner loop iterates through each cell of the row.
The outer loop uses the index i to reference the current row and the inner loop uses the index j to reference the current cell of the current row. The sheet.getRange(1, j + 1).getValue() function is used to get the header value of the current column, which is used as the key of the object.

Now, we need a function that receives the GET request, calls the getSheetData() function, and uses the ContentService.createTextOutput() method to create a text output with the JSON data and convert it using JSON.stringify(). The setMimeType() method is used to set the MIME type of the response to "application/json", so that the browser knows to interpret the response as JSON. So go ahead and add the following function to your code.

function doGet(e) {
  var jsonData = getSheetData();
  return ContentService.createTextOutput(JSON.stringify(jsonData)).setMimeType(ContentService.MimeType.JSON);
}

Your final code should look something like this:

function getSheetData() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var data = sheet.getDataRange().getValues();
  var jsonData = [];
  for (var i = 1; i < data.length; i++) {
    var row = data[i];
    var obj = {};
    for (var j = 0; j < row.length; j++) {
      obj[sheet.getRange(1, j + 1).getValue()] = row[j];
    }
    obj["id"] = i;
    jsonData.push(obj);
  }
  return jsonData;
}

function doGet(e) {
  var jsonData = getSheetData();
  return ContentService.createTextOutput(JSON.stringify(jsonData)).setMimeType(ContentService.MimeType.JSON);
}

Deploying our API

Click on the "Deploy" button in the top menu
A dialog box should appear on the screen. Click on the "Settings" icon and select "Web App". Click on the icon again and select "Library".
In the "Execute the app as" field, select your Google account.
In the "Who has access to the app" field, select "Anyone"
Click on the "Deploy" button.
A dialog box will appear with the "Current web app URL" which you can use to access your web app. The web app URL is the API link.

Note
If this is your first time using Apps Script, you might get a menu that says "The Web App requires you to authorize access to your data.". Click on "Authorise access". A window will open for you to sign in with your Google Account. You will be presented with a warning screen that tells you that Google has not verified the web app. Click the "Advanced" button and click the "Go to Project Name' link. You will then be presented with an authorization screen where you must click "Allow" in order to proceed.

When you deploy a Google Apps Script as a web app, it will be accessible via a unique URL. The format of this URL is determined by the configuration of the deployment. By default, the URL will be in the following format: https://script.google.com/macros/s/{SCRIPT_ID}/exec
Where SCRIPT_ID is a unique identifier for your script. The SCRIPT_ID can be found in the Apps Script editor by clicking on the "Project settings" button in the top right corner of the window, it will be in the top right corner of the page, under the "Project ID" header.

Setting up another API for the number of rows

For this project, we will need another API that will tell us the number of rows in the spreadsheet. Since each row represents a single blogpost, the total number of blogposts is simply, the number of rows in the spreadsheet - 1 . So if our spreadsheet contains three rows, it means that there are two blogposts because each cell in the firstrow contains the title of each column. Just we did previously, head over to Extensions > Apps Script.

On the side bar, navigate to files and click the (+) icon to create a new file. Name the file length.gs(or whatever you feel like). Paste the following code in the editor.

function doGet(e) {

  var spreadsheet = SpreadsheetApp.openById(SHEET_ID);

  var sheet = spreadsheet.getActiveSheet();

  var rowCount = sheet.getLastRow();

  return ContentService.createTextOutput(rowCount);
}

This script uses the SpreadsheetApp class from the Google Apps Script API to access a specific spreadsheet, identified by its ID.

Then it opens the spreadsheet by its ID using SpreadsheetApp.openById(SHEET_ID) and retrieves the active sheet using getActiveSheet() method. After that, it retrieves the number of rows in the sheet using getLastRow() method. Finally, it returns the number of rows as the response to the GET request using ContentService.createTextOutput(rowCount).

Populating our spreadsheet cells

Now, we are done with our APIs, it is time to start inputting some data in the spreadsheet. The Title column is where we store the title of our blogpost and the Content column is where we store the actual content. The By column is where you can input the name of the blog author.

You are free to include HTML tags in your content column. One really cool thing about Google Sheets is that we do not have to worry about saving our data, because everything is synced with your Google Drive account automatically.

Setting up our frontend

Setting up our frontend is fairly simple. You can use Vanilla JavaScript or a framework of your choice, however, I am going to use Vanilla JavaScript in this tutorial. The numberOfPosts() function is responsible for fetching the number of posts via our second API, while the render() function is responsible for fetching the actual post with the help of our main API.

Here is the JavaScript Code.

And here is the CSS

And finally here is the HTML

Why would anyone want to do this?

Because Google Sheets is easy to use and accessible from anywhere, has advanced features such as data validation, conditional formatting, and pivot tables. Google Sheets is also a good option for small projects or teams with limited resources.

Github Repository

Please ask your questions in the comments (if any!) and I will be glad to answer them.