<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rafael Pereira</title>
    <description>The latest articles on DEV Community by Rafael Pereira (@bsides).</description>
    <link>https://dev.to/bsides</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F28719%2F99730295-62ee-483b-867c-192c786530fd.jpeg</url>
      <title>DEV Community: Rafael Pereira</title>
      <link>https://dev.to/bsides</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bsides"/>
    <language>en</language>
    <item>
      <title>Hashnode review</title>
      <dc:creator>Rafael Pereira</dc:creator>
      <pubDate>Wed, 09 Nov 2022 14:01:00 +0000</pubDate>
      <link>https://dev.to/bsides/hashnode-review-d3f</link>
      <guid>https://dev.to/bsides/hashnode-review-d3f</guid>
      <description>&lt;p&gt;This post is originally written in Hashnode: &lt;a href="https://bsides.hashnode.dev/hashnode-review"&gt;https://bsides.hashnode.dev/hashnode-review&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I've come here just to post something and test its editor and markdown capabilities. You'll start to see some random tests below because of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Editor design and layout
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;It's very clean. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You start writing like a blank canvas thing with little to no interface buttons. Hashnode bar is at the top, which if I were them would make it short to grab the user's attention in the content. Regardless it's not bad. Also, the publish button and the constant "Saved" notification are pretty good.&lt;/p&gt;

&lt;p&gt;The tools to format the text are all there: headings, bold, italics, lists, code snippet, quotation, URL, image inserting - and you can also use markdown as you type. The only thing I miss is a preview - although it exists as a button, I think I'm better with a live preview sometimes. Also, I don't like the font face when I'm typing - it's too deprived of a personality. The letter "f" followed by an "i" form a glued shape, which I don't like very much. I'd prefer to choose a font for when I'm writing and I know people are very particular about this kind of detail. Regardless, I'm going too deep in this review and those are not things that are relevant in the big picture.&lt;/p&gt;

&lt;p&gt;As you type more and more text, you'll arrive at the bottom of the page, which is also the bottom of the browser window. That worries me a little bit. I could live with a little more padding in there. The editor tools are fixed on the screen after a scroll and that makes me happy. There are very good decisions in the design department.&lt;/p&gt;

&lt;h2&gt;
  
  
  Markdown support
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Looks great and is easy to go by&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm going to test some of them right now. This is a text &lt;strong&gt;with bold&lt;/strong&gt;. It's &lt;em&gt;funny&lt;/em&gt; because the text that says it's bold &lt;strong&gt;is not actually&lt;/strong&gt; bold but &lt;em&gt;with&lt;/em&gt; bold. Got it? 🤭&lt;/p&gt;

&lt;p&gt;List of good things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The markdown don't go transforming things live - it needs a preview&lt;/li&gt;
&lt;li&gt;Makes it better by just typing and not worrying about some HTML in the way&lt;/li&gt;
&lt;li&gt;It was easy to create this list&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Things I'd change
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;A padding bottom for sure&lt;/li&gt;
&lt;li&gt;That's for markdown: I don't want to use numbers as a numeric list. I know it makes sense but if I have a list with 10 items and remove the 2nd, I have to rename each one, which makes little sense. I'd keep this number version but add a "hash" (#) version that automatically numbers it.&lt;/li&gt;
&lt;li&gt;That item got really big.&lt;/li&gt;
&lt;li&gt;Code coloring for markdown would be awesome&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now that some markdown was created, I'd like to put a link to &lt;a href="https://mastodon.lol/@bisso"&gt;my Mastodon account&lt;/a&gt; and also my &lt;a href="https://twitter.com/bsides"&gt;Twitter&lt;/a&gt; in case it doesn't die horribly because of some billionaire purchase.&lt;/p&gt;

&lt;p&gt;Also, I would like to randomly showcase &lt;a href="https://www.youtube.com/watch?v=LX_f1wuxFFQ"&gt;this neat typescript tip&lt;/a&gt; from &lt;a href="https://twitter.com/wesbos"&gt;Wes Bos&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;CourseBase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;FreeCourse&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;CourseBase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;youtube&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;
  &lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;PaidCourse&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;CourseBase&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;youtube&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt;
  &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Course&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;FreeCourse&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="nx"&gt;PaidCourse&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usage example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;beginnerCourse&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Course&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Beginner Course&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;youtube&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://youtubelinkhere.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;anotherCourse&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Course&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Another Course&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;22.90&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also, I'd say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Please make code snippets use less space and with a monospaced font. Yes, even in the editor.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But I already used block quotes before to make subtitles. Well, I guess it's working!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I stopped everything to come and see this editor and I'm impressed. It's clean enough to focus on typing and creating content. There are some things I'd edit, but regardless it's good enough to start a blog. I'll definitely consider it - and I think you should too!&lt;/p&gt;

&lt;p&gt;Thanks for reading.&lt;/p&gt;

</description>
      <category>hashnode</category>
      <category>markdown</category>
    </item>
  </channel>
</rss>
