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
Here is the result
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!