Show HN: An in-browser text editor to easily create static HTML(triplelog.com)
triplelog.com
Show HN: An in-browser text editor to easily create static HTML
https://triplelog.com/writer/
29 comments
@uuddlrlrba FYI, text shows "\frac{x^3}{2}" but rendering shows "\frac{x^3}{3}" in readme
Sometimes pressing the [+] icon to directly add something will insert it randomly into the middle of my text. Not where my cursor is.
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. 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.
Learn how to use it from the documentation located at 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.
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>
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.)
> 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>
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.)
Not sure what you mean by "inlined", but sadly Firefox still doesn't support .mth(ml) = .eml (even though Thunderbird does !)
Inline scripts being the opposite of using the "src" attribute for referencing external resources.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
There would be a lot to inline:
<script src="./js/prism.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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/... <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"><... <script src="https://unpkg.com/mustache@latest"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <script src="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>
<script src="./js/prism.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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/... <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"><... <script src="https://unpkg.com/mustache@latest"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script> <script src="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>
I don't understand your point. The browser eventually has to deal with that stuff whether it's in one bundle or split up with the added overhead of extra HTTP requests/file opens. Being able to more easily avert your eyes and ignore it doesn't change that. There's no magic. If anything, being able to ignore it more easily can actually remove the motivation to wean oneself off the kinds of things that are more convenient than they are strictly necessary.
It's unlikely to matter from a performance perspective. If you're only going to load, it doesn't really matter. If you want to work with the file, all the other stuff will be in your way, for little gain.
What do you mean work with the file?
Either way, small HTML tools like this I'd rather have dependencies in-lined any day. I'd want to be able to chuck it into a folder for 3 years and be able to use it later even if the dependency hosting goes down.
Either way, small HTML tools like this I'd rather have dependencies in-lined any day. I'd want to be able to chuck it into a folder for 3 years and be able to use it later even if the dependency hosting goes down.
just loading external files requires some kind of web server, or access to the disk. That's why people like binary files for programs - they don't want to have to compile your code first just to run your app.
Toolchains are powerful, but I agree that not having to set anything up is really nice for people without those systems already installed.
I had it as one file and agree it is nice, but it is easier to edit with things separated. I might offer that option as well.
I had it as one file and agree it is nice, but it is easier to edit with things separated. I might offer that option as well.
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!
If this were combined with a static site generator or CMS it could be a real powerhouse. Great work!
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.
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.
That will be great. Awaiting your result.
> 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.)
What do you find lacking about existing offerings?
(Serious question; not a statement masquerading as rhetorical snark.)
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.
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.
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?
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?
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.
You can add a link to the dogfooded readme and have that be the whole thing.
I'm not sure if the ghost of Netscape Composer is laughing or crying.
Hitting "Home" in the content preview clears any markdown you've written. Is this by design?
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.
More generally, there is not yet any sort of auto-save so save early and often if you don't want to lose progress.
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.
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.
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.
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.
Ah, very cool! Thanks for letting me know. This is much easier to edit code in now
Honestly pretty useful maybe, just add a bit of polish and I can see myself using this.
not sure what this buys me I cant already do with say vim + Chrome
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