Hidoki (in beta) is using Elixir

Chat / Discussions
,
1

Hi everyone :wave:,

Posting here to showcase my latest Elixir product - https://hidoki.com/ which is now public. :tada:

Hidoki is a project tracking tool for companies - if tools like Jira/Trello focus more on the micro (tasks/backlog etc), Hidoki focuses on the macro - which projects are live, where are the docs, who’s working on them, are they on track etc. It also supports per-project discussion threads, very similar to GitHub issues.

I’m inspired by the repo workflows we have as devs and want to make them available to non-devs. I was also hugely impressed with how Shopify approach project tracking using their private in-house tool seen here.

It’s just me working on this so I try to keep the tech stack as simple as possible:

  • elixir
  • phoenix
  • hotwire (turbo/stimulus/drive)
  • heroku (with postgres add-on)
  • imgix
  • metabase add-on for analytics
  • and a few hex packages (thank you bamboo, quantum, earmark and all the rest!)

Huge thanks to José, Chris and all the others who’ve worked on this tech. Without it all Hidoki wouldn’t be possible.

Btw, the link above takes you directly to the (public) workspace for Hidoki itself. i.e. It shows all the projects I’m using to build Hidoki. Will hopefully give you an idea of how it can be used in other companies.

Would love to hear your thoughts/feedback. Anything al all would be amazing, either on tech or on the product.

Best,
James

9 Likes
2

Whoa that feels really snappy.

How hard was it to use turbo on phoenix, are you planning on open sourcing the code used for this integration?

2 Likes
3

Great to hear. Turbo is super easy to install (https://turbo.hotwired.dev/handbook/installing).

Using turbo frames is very easy (you don’t have to do anything on the backend), streams require a bit more work, but if you don’t want to use websockets for them it’s as simple as:

    conn
    |> put_resp_content_type("text/html; turbo-stream")
    |> render("_content.html")

And render it with a minimal template so you don’t send too much extra stuff.

2 Likes
4

Why do you prefer hotwire over liveview?

4 Likes
5

Nice site. I play around a bit. It is not obvious to me how to put a image in the markdown. Do I have to host the image somewhere myself?

1 Like
6

Thanks for trying it out!

For images you can simply paste or drag any (jpg/png) image into the editor. No hosting required.

7

A few reasons. Firstly I already wanted some kind of turbolinks functionality so it made sense to make use of frames/streams as well. Secondly, the turbo frames/streams approach seems simpler than liveview because it’s stateless - it’s just html templates replacing other html templates with regular http requests.

Having said that, I’ve never used liveview properly, perhaps it would be better. I’m sure it can be more efficient from a performance point of view.

1 Like
8

Nice. You need to make this more obvious in your interface. It is a nice feature to have.

1 Like
9

Another question: How do you deal with user entered markdown? There can be some malicious content that can mess up your layout or even compromise your site. Do you sanitize the markdown or the generated html?

1 Like
10

Yes, I sanitise the markdown using https://github.com/rrrene/html_sanitize_ex.

11

So you convert markdown to html then sanitize it? I feel it is not very elegant because:

  • 2 parse rounds, one for markdown, one for html
  • User may be confused because there is no direct feedback that whatever he entered is not allowed

I wish there is a subset of markdown safe for web forum directly baked in earmark, with tweak-able knobs and just flat out tell the user what is wrong with the input.

1 Like
12

So you convert markdown to html then sanitize it?

Yes. The text is stored as raw text, then parsed to html using earmark, then sanitised using html_sanitise.

As you say, it’s not perfect as, in theory, the user could enter forbidden text which is stripped without them realising. However, I haven’t seen that in practice.

Edit. It’s also complicated by the fact I have to use a separate parser for the client side preview when editing.

13

FYI, Liveview will make server-side markdown preview usable. See one of my project:

I have no sanitizing pass though. For this particular project there is little risk.

I also think it is possible to take the core of html_sanitize_ex and run it on the AST from earmark, before serializing out.

1 Like
14

I see, did’t know that. But if you only need that, should be trivial in liveview.

App looks great :+1:

1 Like
15

Update, this project is now called Macro and has moved to https://macroapp.io.

More info here: https://macroapp.io/updates/255.