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
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.
Gran post
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.
Yee soo amazing.
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