Marcelo Zárate
Marcelo Zárate

Marcelo Zárate

Why I almost don't choose Hashnode

Why I almost don't choose Hashnode

Three little reasons

Marcelo Zárate
·Oct 16, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Good day, fellow reader.

Before I ever started considering writing, I did some research to find out which platform would be a better fit for me. I looked into several of them. And finally opted for Hashnode, because it provides a few key features.

Three pros (most important ones)

  1. CONTENT OWNERSHIP. Caps are not accidental. This includes the option to set up custom domains for your blog

  2. A community that is not only welcoming to newbies but also dynamic and diverse.

  3. No paywall (I'm an advocate of freedom of information)

Barney Stinson ironic thumbs up Barney Stinson from How I met your mother (TV Series)

Three cons

Well, it's not a land of roses around here, there was something I really liked from other platforms I couldn't find in Hashnode. It was a boomer. Those three little things were the difference between a normal article, and a LEGEN-DARY one. And those three things were this

What? Yeah, those three little dots, the horizontal rule from other platforms, so simple, yet so elegant. I wanted them. And I wanted them badly. I couldn't find an already made solution for this. So I borrowed some of the code from other fronts, and decided to do my own widget. That way I could easily insert that three dots everywhere in my articles.

Don't you know how to create a widget for hashnode? Catalin Pit explains it step by step

Three dots separator (horizontal ellipsis)

To create it, I set widgetid as three-dots-separator so I could use like this in my articles

%%[three-dots-separator]

and the markup as follows

<style type="text/css">
.three-dots-separator {
 box-sizing: border-box;
 display: flex;
 justify-content: center;
 text-decoration: none solid rgba(0, 0, 0, 0.8);
 margin: 32px 0px 14px;
 padding: 24px 0px 10px;
}

.first-dot, .second-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 margin: 0px 20px 0px 0px;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}

.third-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}
</style>
<div class="three-dots-separator" role="separator">
 <span class="first-dot"></span><span class="second-dot"></span><span class="third-dot"></span>
</div>
Barney Stinson Genuine Thumbs up

Hope you like it, feel free to use it, improve it, and comment with any suggestions you have!

See you around!

 
Share this