SteemDev Part 4 - Learning STEEMJS - The Most Basic Blogreel with HTML and Javascript

This is fun! In this article, I'm going to share with you how you can display blogpost links of the steem blockchain in your browser. This could be useful if you were to start designing a new front-end to compete with steemit or busy.org.

For now, it is very primitive and it's purely for entertainment purposes. All you need is a basic text editor and to create 2 files:

index.html
script.js

How to create a primitive blogreel using STEEMJS

Let's build our basic html first in the index.html file:

<!DOCTYPE html> 
<html lang="en">
 <head>
<script type="text/javascript" src="\script.js"></script>
 <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
</head>
<body>
    <h1>Steem Blog Test</h1>
        <div id="blog">
    <script>fillBlogEntries('your account name here');</script>
</div>
</body>
</html>

You can see here that we are calling the steem.js library via CDN, this is not a long term solution if you were to build a front-end but it's good to create a quick and easy experiment.

In the script.js, we are entering this:

function fillBlogEntries(username)
{
  steem.api.getDiscussionsByBlog({tag: username, limit: 10}, function(err, blog) 
    {
      var blogContainer = $('#blog');
      for (var i = 0; i < blog.length; i++) 
      {
        blogContainer.append('
 + 
          blog[i].url + '">'+ blog[i].created + ' ' + blog[i].title  + '');
      }
    });
}

Let me explain the code...

On the html front, it's fairly straight forward. All that we do is display a basic html page where we call a function. This function is called fillBlogEntries.

What this function does is based on the code found in script.js

This function calls the Steem API -> steem.api.getDiscussionsByBlog. Then within the