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('<div class="bloglinks"><a target="_blank" href="https://steemit.com' + 
          blog[i].url + '">'+ blog[i].created + ' ' + blog[i].title  + '</div></a>');
      }
    });
}

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

we display each bloglink by using a for loop until it reaches the maximum established by the api call. In this case 10.

Here is the result

Screenshot 2018-06-09 16.55.59.png

It wouldn't be too hard to add a little CSS and a username prompt to make it a very basic functional application.

Conclusion

This is a small step for me to understand how SteemJS works and I hope it motivates you as much as it motivates me to learn more about this amazing technology!

Thanks. I'm starting to follow some of the details. I need to did deeper into JS.

It's good to see that you're getting familiar with the Steem.js library so quickly. I spent days trying to understand the documentation. In the end, I guess trial and error is your best friend (and @kareniel of course).

I'm still walking down the tree at the free code camp :-D did you manage to get in contact with the steemdev guys?

It's good to see people working with SteemJS and wanting to learn that, but I myself don't have the patience to start studying it

I have no idea about programming language.I just have heard about java script and html.I once tryed to learn about programming languages for making websites.Then i came to know about html,it was fun.

Coding is life, world is great.

Wow, coders are really insane (in a positive way). I could never think of something like this

Your progress is really motivating. I don't know much about programming or coding, your progress and the way you have make the whole thing look like fun make me want to learn. Thanks for always updating us with your progress

I think it is so cool that you are doing this. I look at the codding and am lost. It is something that I should learn though. Programming is so important and getting more important every day. I am learning a tiny bit about coding while using Ozobots with my students. They are really cool and easy to set up a code for.

It made me want to resume my Java classes, it looks quite entertaining, as well as learning a little more about Steemjs.

Well, I'm going to follow you because I think I'm enjoying this new technology and I want to learn a lot more so I hope to keep reading to you

I like this. Nice one, @cryptoctopus.