How to write a blog with your own Widget

4 min readFeb 20, 2023

How to display a square shape in Javascript

Writing a blog these days is quite easy, just as easy as sending a tweet message. You don’t need to host it, you don’t need to worry about the search engine, moreover it doesn’t cost you a dime. The technology helps us to focus on the content, instead of the infrastructure to make it happen.

Ok, but lately I want to do it from scratch. I actually had attempted this couple of times in the past, but all failed due to the unmet expectation. But I want to give it another try, because no matter how much I like a blogging platform, there’s always small things that I want to add to the page which isn’t allowed technically.

So instead of dwelling on this idea, I like to take this opportunity to explore how difficult to write and publish a blog so that I can be free to write whatever crap I want in the future. I anticipate this would require me to write code to support it, but that’s exactly the point here, your own code for the blog.

Classical HTML and CSS

The first thing I did is to see whether it’ll work with any code for the blog. So I went to the CodePen and tried it out.

The nice thing of using the CodePen service is that I can throw any combination of HTML/CSS/JS to see the result right away. As you can see from the above pen, the content is more or less HTML based:

<div id="question">
  <h1>How to display a square in Javascript?</h1>
  <h2>Problem:</h2>
  <p>Print a square shape of size <code>n</code> using symbol <code>*</code>.</p>

I really want to get into the markdown in the future, for now to cut down the budget, I settle with nice and cheap HTML syntax.

To make the site more blog feel, I throw some minimum CSS and even add a Google Font:

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  font-family: Raleway;
  margin: 5rem;
}

Support your own widget

Continuing writing the blog, I encountered a need to display a square shape filled with *, such as:

n=5
*****
*****
*****
*****
*****

Moreover I planned to display it couple of times with different size parameter n . This is the HTML I would like to write if possible:

<div class="demo-list">
    <div class="square" data-n="5"></div>
    <div class="square" data-n="4"></div>
    <div class="square" data-n="3"></div>
    <div class="square" data-n="2"></div>
    <div class="square" data-n="1"></div>
  </div>

Essentially I want any div classed with square written above to be magically replaced with a Square component in the runtime so that I don’t need to manually display all the shapes HTML, kinda tedious.

This is where I need to write my own code. Let’s start with the trivial algorithm in displaying the shape first:

function square(n) {
  if (n <= 0) return;

  const u = new Array(n).fill("*").join("");
  const res = new Array(n).fill(u);

  return res.join("\n");
}

Skipping the unit testing, I quickly move to use it for a Square React component:

const Square = ({ n }) => {
  return (
    <div>
      <code>n={n}</code>
      <pre style={{ lineHeight: "0.7rem" }}>
        <code>{square(n)}</code>
      </pre>
    </div>
  );
};

Now let’s wire things together:

document.querySelectorAll(".square").forEach((el) => {
  const n = parseInt(el.getAttribute("data-n")) || 1;
  ReactDOM.render(<Square n={n} />, el);
});

The snippets above isn’t 100% typical use of React, but just imagine Square is a mini App component so to help understand what it does.

This integration code can be replaced with a third party library such as React to WebComponent. But for now I don’t want to hide this interface.

Publish my own blog

With all the preparation work done, it’s ready to move to my own hosting environment, such as localhost first. It might be easier than you think.

Create a folder, create a file called display-square-in-javascript.html:

<!DOCTYPE html>
<html>
<head>
  <title>How to display a square in Javascript?</title>
  <style>
YOUR CSS
  </style>
</head>
<body>
YOUR HTML
  <script>
YOUR SCRIPT
  </script>
</body>

Copy the HTML, CSS and Script from the pen to three separate locations in the above template. Open this file in any browser, you should expect to see exactly what you see in the CodePen.

You can even save the copy/paste part if you click “Export” button from the bottom screen of your pen.

Just to wrap it up a bit, you basically end up with a single html file, a blog if you want to call it. And since it’s ready to be published, you can throw it to any web hosting. It will be a nice looking page, and carry your own signature of widgets for your content.

Summary

Writing a blog from scratch isn’t as difficult as it sounds. Moreover, you can highly customize the look and feel based on your needs. Essentially, a blog can be a typical example of a micro frontend.

Note

Actually codpen exported code does do the transpile job, so that the code can be ready to run inside the browser. So this is a catch.

const Square = ({ n }) => {
  return /*#__PURE__*/(
    React.createElement("div", null, /*#__PURE__*/
    React.createElement("code", null, "n=", n), /*#__PURE__*/
    React.createElement("pre", { style: { lineHeight: "0.7rem" } }, /*#__PURE__*/
    React.createElement("code", null, square(n))))
  );
};

document.querySelectorAll(".square").forEach(el => {
  const n = parseInt(el.getAttribute("data-n")) || 1;
  ReactDOM.render( /*#__PURE__*/React.createElement(Square, { n: n }), el);
});