15 ms·

Show HN: An in-browser text editor to easily create static HTML

140 points by uuddlrlrba 5y ago

uuddlrlrba 5y ago
I wanted to create javascript-free documentation and articles, but it was annoying to add latex, code, sidenotes, a table of contents, and other niceties. So I created a tool to automate the process. It is very unfinished and can't handle many edge cases, but there are plenty of features to try out. Learn how to use it from the documentation located at https://triplelog.com/writer/readme.html https://triplelog.com/writer/readme.html. To give you an idea of what is possible, that page was created with Triplelog Writer and is entirely javascript-free. The total network load is about 100 KB - most of which is the Katex CSS and fonts. I think it is really easy to use, but the documentation is probably not good enough yet to make everyone agree with that statement. If you have any questions about how to use it, ask away.
- ggerganov 5y ago
  The style looks clean and simple - I like it. It seems to have a good set of presentation tools already. I would recommend to emphasise less on the drawbacks (i.e. not being completely ready, not documented well enough, etc.). The initial warning should be enough for anyone interested in the project to know it's in its early stages. Why not host the source on Github for example?
  - uuddlrlrba 5y ago
    Thanks for the kind words! Mainly, I don't really want to deal with pull requests at the moment. Also, I want a dogfooded readme and so having an additional Github readme would be a bit of trouble.
    - tekknolagi 5y ago
      You can add a link to the dogfooded readme and have that be the whole thing.
- cxr 5y ago
  Kudos. With the writer, you're practicing a software packaging and distribution approach that I'd really like to see more projects make use of. From an earlier comment I wrote: > It would be nice if as part of the zero config effort, programs (esp. programs that aim to be easy-to-use Web-authoring tools) would focus even more on being as close to zero setup/zero installation as possible[...] one should be able to use[...] similar programs by using the browser itself to open and run the program <https://news.ycombinator.com/item?id=29382091 https://news.ycombinator.com/item?id=29382091> Any special reason why you're distributing the writer as a ZIP and not a self-contained HTML file with all the JS and CSS inlined? The experience is much nicer in the latter case (no cognitive overhead of keeping track of what needs to be copied/moved, no fragile directory structure that can be broken by a partial copy/move, etc.) I think this format for local software is currently undervalued and stands to be exploited to greater effect. (In case your decision to stay off the social coding sites is intentional, kudos again.)
  - bachmeier 5y ago
    There would be a lot to inline: <script src="./js/prism.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.0/umd/popper.min.js"></script> https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.0/umd/... <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script> https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"><... <script src="https://unpkg.com/mustache@latest"></script> https://unpkg.com/mustache@latest"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <script src="https://cdn.jsdelivr.net/npm/fflate/umd/index.js"></script> https://cdn.jsdelivr.net/npm/fflate/umd/index.js"></script> <script type="text/javascript" src="./js/purify.min.js"></script> <script type="text/javascript" src="./js/papaparse.js"></script> <script type="text/javascript" src="./js/components.js"></script> <script type="text/javascript" src="./js/template.js"></script> <script type="text/javascript" src="./js/main.js"></script>
- alecst 5y ago
  I adore this. It's exactly the kind of thing I'd love to make for myself. The finished product is tiny, clean, and useful, and it's a nice contrast from the huge page bloat you see on so many sites. It definitely profits from using built-in HTML elements over JS. Even scrolling through your README was fun. If this were combined with a static site generator or CMS it could be a real powerhouse. Great work!
  - uuddlrlrba 5y ago
    Thanks! It is intimidating to build from the ground-up, but it has been worth it. I'm not exactly sure how I want to integrate this into a more all-in-one solution. Once I check off some more immediate items on my to-do list I will try to figure out the best way to do that.
    - ngcc_hk 5y ago
      That will be great. Awaiting your result.
  - cxr 5y ago
    > If this were combined with a static site generator or CMS it could be a real powerhouse What do you find lacking about existing offerings? (Serious question; not a statement masquerading as rhetorical snark.)
- 1vuio0pswjnm7 5y ago
  Perhaps the next step is to create a Javascript-free editor that can be used to create Javascript-free documentation and articles. The nice thing about Javascript-free documentation and articles is that one does not need a massive, complicated, corporate-controlled web browser with a Javascript engine in order to read them. It would also be nice to not have to use a massive, complicated, corporate-controlled web browser with a Javascript engine in order to create them.
choffman 5y ago
I'm not sure if the ghost of Netscape Composer is laughing or crying.
all2 5y ago
Hitting "Home" in the content preview clears any markdown you've written. Is this by design?
- uuddlrlrba 5y ago
  No, and thanks for pointing that out! I will disable that button. More generally, there is not yet any sort of auto-save so save early and often if you don't want to lose progress.
Minor49er 5y ago
This is quite nice. This is feedback from just using this briefly, but it might be helpful to intercept the tab key and insert spaces when editing, particularly since there's a syntax highlighting section. Maybe also have the preview with iframe option enabled by default as well just to show the fully rendered page. That aside, I really like how simple and straightforward this is. All of the functionality is clearly labeled and up front. The help documentation is also succinct and immediately useful.
- uuddlrlrba 5y ago
  You can check that random checkbox in the Content button to intercept tabs. I know it is not obvious. I really don't know whether iframes should be enabled by default. It was the default, but I kept clicking endnote links and decided that no iframe is a better default.
  - Minor49er 5y ago
    Ah, very cool! Thanks for letting me know. This is much easier to edit code in now
KaoruAoiShiho 5y ago
Honestly pretty useful maybe, just add a bit of polish and I can see myself using this.
syngrog66 5y ago
not sure what this buys me I cant already do with say vim + Chrome
- episode0x01 5y ago
  Doing it only in Chrome? Having easy buttons for certain snippets? The author didn't make this to be a vim replacement. I don't think this would be a daily or main editor, but seems easy to use in a pinch
fuzzythinker 5y ago
@uuddlrlrba FYI, text shows "\frac{x^3}{2}" but rendering shows "\frac{x^3}{3}" in readme
Mashimo 5y ago
Sometimes pressing the [+] icon to directly add something will insert it randomly into the middle of my text. Not where my cursor is.

140 points by uuddlrlrba 5y ago

I wanted to create javascript-free documentation and articles, but it was annoying to add latex, code, sidenotes, a table of contents, and other niceties. So I created a tool to automate the process. It is very unfinished and can't handle many edge cases, but there are plenty of features to try out. Learn how to use it from the documentation located at https://triplelog.com/writer/readme.html https://triplelog.com/writer/readme.html. To give you an idea of what is possible, that page was created with Triplelog Writer and is entirely javascript-free. The total network load is about 100 KB - most of which is the Katex CSS and fonts. I think it is really easy to use, but the documentation is probably not good enough yet to make everyone agree with that statement. If you have any questions about how to use it, ask away.

ggerganov 5y ago
The style looks clean and simple - I like it. It seems to have a good set of presentation tools already. I would recommend to emphasise less on the drawbacks (i.e. not being completely ready, not documented well enough, etc.). The initial warning should be enough for anyone interested in the project to know it's in its early stages. Why not host the source on Github for example?
- uuddlrlrba 5y ago
  Thanks for the kind words! Mainly, I don't really want to deal with pull requests at the moment. Also, I want a dogfooded readme and so having an additional Github readme would be a bit of trouble.
  - tekknolagi 5y ago
    You can add a link to the dogfooded readme and have that be the whole thing.
cxr 5y ago
Kudos. With the writer, you're practicing a software packaging and distribution approach that I'd really like to see more projects make use of. From an earlier comment I wrote: > It would be nice if as part of the zero config effort, programs (esp. programs that aim to be easy-to-use Web-authoring tools) would focus even more on being as close to zero setup/zero installation as possible[...] one should be able to use[...] similar programs by using the browser itself to open and run the program <https://news.ycombinator.com/item?id=29382091 https://news.ycombinator.com/item?id=29382091> Any special reason why you're distributing the writer as a ZIP and not a self-contained HTML file with all the JS and CSS inlined? The experience is much nicer in the latter case (no cognitive overhead of keeping track of what needs to be copied/moved, no fragile directory structure that can be broken by a partial copy/move, etc.) I think this format for local software is currently undervalued and stands to be exploited to greater effect. (In case your decision to stay off the social coding sites is intentional, kudos again.)
- bachmeier 5y ago
  There would be a lot to inline: <script src="./js/prism.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.0/umd/popper.min.js"></script> https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.0/umd/... <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script> https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"><... <script src="https://unpkg.com/mustache@latest"></script> https://unpkg.com/mustache@latest"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <script src="https://cdn.jsdelivr.net/npm/fflate/umd/index.js"></script> https://cdn.jsdelivr.net/npm/fflate/umd/index.js"></script> <script type="text/javascript" src="./js/purify.min.js"></script> <script type="text/javascript" src="./js/papaparse.js"></script> <script type="text/javascript" src="./js/components.js"></script> <script type="text/javascript" src="./js/template.js"></script> <script type="text/javascript" src="./js/main.js"></script>
alecst 5y ago
I adore this. It's exactly the kind of thing I'd love to make for myself. The finished product is tiny, clean, and useful, and it's a nice contrast from the huge page bloat you see on so many sites. It definitely profits from using built-in HTML elements over JS. Even scrolling through your README was fun. If this were combined with a static site generator or CMS it could be a real powerhouse. Great work!
- uuddlrlrba 5y ago
  Thanks! It is intimidating to build from the ground-up, but it has been worth it. I'm not exactly sure how I want to integrate this into a more all-in-one solution. Once I check off some more immediate items on my to-do list I will try to figure out the best way to do that.
  - ngcc_hk 5y ago
    That will be great. Awaiting your result.
- cxr 5y ago
  > If this were combined with a static site generator or CMS it could be a real powerhouse What do you find lacking about existing offerings? (Serious question; not a statement masquerading as rhetorical snark.)
1vuio0pswjnm7 5y ago
Perhaps the next step is to create a Javascript-free editor that can be used to create Javascript-free documentation and articles. The nice thing about Javascript-free documentation and articles is that one does not need a massive, complicated, corporate-controlled web browser with a Javascript engine in order to read them. It would also be nice to not have to use a massive, complicated, corporate-controlled web browser with a Javascript engine in order to create them.

choffman 5y ago

I'm not sure if the ghost of Netscape Composer is laughing or crying.

all2 5y ago

Hitting "Home" in the content preview clears any markdown you've written. Is this by design?

uuddlrlrba 5y ago
No, and thanks for pointing that out! I will disable that button. More generally, there is not yet any sort of auto-save so save early and often if you don't want to lose progress.

Minor49er 5y ago

This is quite nice. This is feedback from just using this briefly, but it might be helpful to intercept the tab key and insert spaces when editing, particularly since there's a syntax highlighting section. Maybe also have the preview with iframe option enabled by default as well just to show the fully rendered page. That aside, I really like how simple and straightforward this is. All of the functionality is clearly labeled and up front. The help documentation is also succinct and immediately useful.

uuddlrlrba 5y ago
You can check that random checkbox in the Content button to intercept tabs. I know it is not obvious. I really don't know whether iframes should be enabled by default. It was the default, but I kept clicking endnote links and decided that no iframe is a better default.
- Minor49er 5y ago
  Ah, very cool! Thanks for letting me know. This is much easier to edit code in now

KaoruAoiShiho 5y ago

Honestly pretty useful maybe, just add a bit of polish and I can see myself using this.

syngrog66 5y ago

not sure what this buys me I cant already do with say vim + Chrome

episode0x01 5y ago
Doing it only in Chrome? Having easy buttons for certain snippets? The author didn't make this to be a vim replacement. I don't think this would be a daily or main editor, but seems easy to use in a pinch

fuzzythinker 5y ago

@uuddlrlrba FYI, text shows "\frac{x^3}{2}" but rendering shows "\frac{x^3}{3}" in readme

Mashimo 5y ago

Sometimes pressing the [+] icon to directly add something will insert it randomly into the middle of my text. Not where my cursor is.