DEV Community

Rafael Pereira
Rafael Pereira

Posted on

Hashnode review

This post is originally written in Hashnode: https://bsides.hashnode.dev/hashnode-review

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.

Editor design and layout

It's very clean.

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.

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.

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.

Markdown support

Looks great and is easy to go by

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

List of good things:

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

Things I'd change

  1. A padding bottom for sure
  2. 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.
  3. That item got really big.
  4. Code coloring for markdown would be awesome

Now that some markdown was created, I'd like to put a link to my Mastodon account and also my Twitter in case it doesn't die horribly because of some billionaire purchase.

Also, I would like to randomly showcase this neat typescript tip from Wes Bos

interface CourseBase = {
  name: string
}

interface FreeCourse extends CourseBase = {
  youtube: string
  price?: never
}

interface PaidCourse extends CourseBase = {
  youtube?: never
  price: number
}

type Course = FreeCourse | PaidCourse
Enter fullscreen mode Exit fullscreen mode

Usage example

const beginnerCourse: Course = {
  name: 'Beginner Course',
  youtube: 'http://youtubelinkhere.com',
}

const anotherCourse: Course = {
  name: 'Another Course',
  price: 22.90
}
Enter fullscreen mode Exit fullscreen mode

Also, I'd say:

Please make code snippets use less space and with a monospaced font. Yes, even in the editor.

But I already used block quotes before to make subtitles. Well, I guess it's working!

Conclusion

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!

Thanks for reading.

Latest comments (0)