Awfice – A collection of tiny office suite apps | Hacker News Reader

Awfice – A collection of tiny office suite apps

zserge.com

338 pointsnightfuryx70 comments

Well you can store it in localStorage or PUT to server [1]. Functionally it is not far from Wordpad yet it is possible to embed code, create UI and it is a web page — ready for publishing.

I've published minimal setup to github for convenience [2].

UI is not included (yet) as I use bookmarklets, it is easy and fun way to extend the platform. Each published bookmarklet contains builder (check page source [3]) — change contenteditable, click Update and drag to bookmarks bar.

It is similar to Smalltalk — edit image with image tools. In fact it is not hard to write `do it (d)`, `print it (p)`.

[1] http://sergeykish.com/live-pages

[2] https://github.com/sergeykish/live-pages

[3] http://sergeykish.com/bookmarklet-put-xhtml

I have not published HTML PUT yet, fixed [1]. It is example of real life complexity — I have to work around Firefox bug, smartphones choose awfully small font without <meta viewport>, avoid quirks mode with <!DOCTYPE>, <textarea> does not reflect value in outerHTML, search engines asks for <h1>.

And demo now has Save, Load, Reset buttons to store changes in localStorage. There is also body.onload handler so it loads changes on page load [2].

[1] http://sergeykish.com/bookmarklet-put

[2] http://sergeykish.com/live-pages

This was/ is very cool. Thanks for mapping all of that out. I've been using Nullboard for the last few months and it's been really nice to be able to save. I'm going to add your note pad idea to it to be able to keep longer notes about things.

data:URI origin has no access to localStorage, so you have to run your own HTTP(S) server to either have origin for browser instances localStorage or roll something like your PUT persistence.

Yeah, my point was on "tiny", not data URL.

Do you think running own server is a big obstacle?

    $ git clone https://github.com/sergeykish/live-pages.git
    $ sudo pacman -S ruby
    $ cd live-pages
    $ bundle install
    $ bundle exec rackup

I may write browser extension if it helps

Today I learnt you can enter html into the url bar.

Paste this into the URL bar:

  data:text/html,<h1>hello</h1>

or try this like the article suggests:

  data:text/html,<html contenteditable>

Or this;

    data:text/html,<script>alert('pasting code from the internet in to your address bar should not be encouraged');</script>

Good note. The implications of pasting arbitrarily code in address bar is known as self-XSS which can be used to hijack online accounts.

Encouraged? No, but data urls are heavily sandboxed, e.g. can't even access own cookies.

Although, this is not a data URL per se, but just pasting it in the URL bar allows you to do pretty much anything:

    javascript:alert(document.cookie)

My Firefox here does not allows that.

1. It strips the JavaScript: part away if I just paste it once

2. Even if I re-add it manually, it still does no alert

Ergo, a sane browser can be quite sandboxed to avoid the average user to do stupid to easily.

Yup. javascript: URL (either pasted or typed into URL bar) are long gone as self-xss precaution. The only way you can run javascript: URL is bookmarking it and invoking resulting bookmarklet. And AFAIK there is no way to re-enable it again. You have to start web developers console to rund ad-hoc JavaScript code in pages' context. (I see this as an end of glorious era of "you can do pretty much anything in URL bar".)

Is this any different than running code from the internet by typing a website into your address bar?

Well I just quickly tested, and NoScript doesn't seem to block that, whereas it would if it were externally loaded or inline JS on a web page.

So that's one difference. Not that the type of person to use NoScript would likely paste obvious javascript into the address bar...

Edit: Doesn't look like you can create a valid URL with that format, but it can be launched via pasting in (obviously), a bookmark (which the contents of which could be obfuscated by telling a user to drag an image to the bookmark bar and click it), and can be launched via command line, e.g.

  start firefox "data:text/html,<script>alert('');</script>"

Sadly it does not work on Firefox Mobile :-(

https://github.com/mozilla-mobile/fenix/issues/2871 tracks effectively the same issue, which is that Firefox Android no longer supports bookmarklets.

javascript:location.href='https://archive.vn/'+document.location.href;

bookmark to access archive.today instead of addon

And https://viewdns.info/ping/?domain=archive.today to get the fastest IP and include it in /etc/hosts

To take this to a fun little limit, I tried to turn it into a self-saving form. Unfortunately, I hit problems with the History API being forbidden, replacing the URL seemed to only reload the page and not change it and so on... But I did eventually get something that is quite useable, which you should obviously not copy and past blindly:

    data:text/html,<div id="c" contenteditable></div><a id="p"></a><script>var el=document.getElementById('c');el.addEventListener('input',function(){document.getElementById('p').textContent='Copy me';document.getElementById('p').href="data:text/html,"+this.parentElement.innerHTML;},false);</script>

And to expand that awful payload, it's basically the very simple:

    <div id="c" contenteditable></div>
    <a id="p"></a>
    <script>
    var el = document.getElementById('c');
    el.addEventListener('input', function() {
        document.getElementById('p').textContent = 'Copy me';
        document.getElementById('p').href = "data:text/html," + this.parentElement.innerHTML;
    }, false);
    </script>

The idea being, you can _almost_ have a self-saving editable page. Because it was fun to make.

> ARE YOU SERIOUS?

> Well, in no way it’s a replacement for a proper office suite. But it’s a good demonstration of minimalism and tiny code.

Exactly that. It is a nice example and I learned something today. Loved the writeup and the creativity behind it.

For the spreadsheet to work change `#ccc` in `d.style.border=` to `gray`. It is fixed in the repo but not in the article.

Thank you. I expect that it will still require some changes as =SUM(A1,C1) did not generate any result.

Try =A1+C1

Neat! Few other additions and historical artifacts:

0: HTML(/SVG/plaintext) sandbox in dataURI under 1kB: https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388... (persistence in location.hash, sadly blocked in Chrome recently)

1: similar, quite famous "MiniCodeEditor", even smaller, served from file (2013): http://xem.github.io/miniCodeEditor/ (https://news.ycombinator.com/item?id=6860642)

2: famous "Spreadsheet in 30 LOC" (2013): https://jsfiddle.net/ondras/hYfN3/ (https://news.ycombinator.com/item?id=6725387)

I wonder if we took a standard build of the most recent versions of Google chrome, firefox, or safari, plus this tiny code, whether or not that would cost more or less storage than a minimum install of office 97 or whatever the oldest viable version of office for Mac OS x is still out there.

With these few kilobytes of code plus the hundreds of megabytes of runtime that constitutes the browser still take up less storage space than an office suite that can retain State and persist data?

I installed MS Office with floppies at some point. So I guess no?

In some sense saying a browser based tool is small is like putting "c:\path\to\word.exe" in a bat-file and counting the lines.

This is great!

I'd love to see more use of contenteditable in general, and continuing incremental improvement to browser support & standards for it. Right now it's fairly niche, but there's huge potential here imo to build a web that's easier for users to edit and create for themselves directly.

A massive improvement would be if saving didn't open the save dialog and instead just saved the file. I understand why it doesn't work this way but it is a must for a decent editor. Autosave being almost as important, of course (hitting ctrl-s at every keystroke is deep in my psyche, though).

In theory the new file system API would allow for this: https://web.dev/file-system-access/. Ask for a path & save permissions once, and then you're allowed to continue saving to that file however you like, until the tab/browser is closed (and then next time you need to ask for permission again).

Significantly more complex though as you need a bunch of JS, and it's Chromium-only right now.

I'm afraid that won't be allowed for data URLs anyway, they can't access localStorage, or their cookies, or even redirect their own URL location.

It is limitation of modern browser, first browser was browser-editor. Opera Unite was a server running in the browser, have not tried it though...

There is Web Server as Chrome extension [1], MIT license.

PWA should be able to intercept PUT request and stub GET request with empty page.

[1] https://chrome.google.com/webstore/detail/web-server-for-chr...

[2] https://github.com/kzahel/web-server-chrome

Check out the README.sh on their Github repo. Such a nice touch.

https://github.com/zserge/awfice/blob/main/README.sh

> Try pasting this into your URL bar. If your browser is nice with you, you should be able to use Ctrl+B or Ctrl+I to make text look bold or italic.

No. On most normal browser this triggers the bookmarks-bar and in case of Firefox, the Page Info dialog.

Depends on what you mean "most normal browser". In Chromium and related browsers it works as said.

Slightly off-topic but serious question: Why we have only Microsoft formats for the office documents. Why the open document formats have really bad tooling, why are we not moving to OD ? What will it take to move ?

Because Office grabbed the vast majority of users, and that for decades. Open formats never got the same level of adoption as Office. You are free to move, it would mostly be compatible with Office when you have to send your work to some friend who only uses Windows and MS tools. What it will take to move is growing adoption of open formats for office documents, many people have moved decades ago, but the tooling quality is in proportion to the user base size

How do you think I can help push adoption ? Is there a possibility of moving to a different format (non xml based) say html for docs and json for xls and so on ?

There is, but it's not trivial. I elaborated on a better strategy for displacing Microsoft Office and its formats a few months ago:

https://news.ycombinator.com/item?id=23795918

1. The open source office suites actually having a good user interface. 2. There being a company that you can pay for support. Corporations/governments can be absolutely paranoid about needing support (even when it is often unused for years). 3. Lots of marketing. 4. 100% compatibility with Microsoft Office.

Because the charter of projects like LibreOffice are fundamentally broken—they're aiming to replace Microsoft Office by cloning it, but Microsoft Office itself is part of a busted paradigm. It reminds me of that old quote from Linus Torvalds about why distributed version control schemes are worthwhile whereas migrating to Subversion is not—because Subversion aimed to be "CVS done right", and that's a fundamentally flawed premise. You need to make something better that fixes what's wrong with the first thing, and make it obvious/unavoidable what the flaws of the first thing were. To displace Microsoft Office, it isn't enough to try to clone it. (Even if you could, Microsoft Office really only persists due to its own momentum, anyway.)

Microsoft Office is a digital approximation of a paper-based paradigm, but it's not really great at either one of those things. The Web and its plaintext formats are way better for sharing and interoperability than MS Office formats. Some fans of MS Office will dispute this, but they're not being honest with themselves. The fans who aren't lying to themselves will instead point out that it's better for print, but it's only better for print in comparison to the Web. If you're actually serious about print, then TeX and PDF/PostScript are better. But most stuff created in Microsoft office isn't ever really intended for print, anyway. So what gives? Microsoft Office succeeds despite being mediocre on both measures because while the alternatives each have things that make them better in their strong suit, they fail at the things they aren't strong at. Microsoft Office squeaks by because it's able to get a C in all its classes, whereas the others remain well-liked among their friends and family, but they don't get to graduate.

Interesting, but why doesn't the article provide demos? am i missing something?

Yes I can drag and drop the code to new tabs but it would have been so easy to have demo links, or to run the code in iframes on the page itself!

You can find the demos on the project page https://github.com/zserge/awfice (cf. "Try it!" links)

I know, and again it's not hard to run without that.

But I'm always surprised people don't realise how much difference it makes to have a big "DEMO" link in people's face vs "oh you can click here and here and then you see it!"

Adding these links may literally be the 5 minutes in your creative process that will give you the most value

I have a feeling that, for the poster, the creative process itself has enough value. I appreciate their generosity in taking the time to share their creativity, and inspire others to think of creative ways to test limits and subvert standard ways of doing things- like using a bulky office suite, or putting a big demo button, rather than encouraging readers to interact with interfaces in ways they hadn't considered before.

Of course, if you're trying to monetize, or make sure it's easy for less savvy folks to access a useful tool, you're probably absolutely right.

That is `data:text/html,...` samples — copy, paste into URL, submit. Unfortunately Firefox does not load "data:..." links [1], github "Try it" links digress to hosted pages which breaks the point.

You've made me think though. If it is hard to copy URL, maybe it is hard to copy code into the console. I've added buttons to my contenteditable demo [2].

[1] https://blog.mozilla.org/security/2017/11/27/blocking-top-le...

[2] http://sergeykish.com/live-pagesj

> Here worth mentioning that elements with an id can be accessed as window[id] or window.id. The thing that wasn’t standardized for a long time and has been a hack from IE, now has become a standard.

Didn't know this.

You can access forms using `document.forms.$name`. Form needs to have `name` attribute set, though.

You can also access input elements using `form.elements.$inputName`.

    <form name="contact">
      <input name="message"/>
    </form>

this form can be accessed directly using

    const form = document.forms.contact
    const message = form.elements.message

In URL office suite apps, using data:text/html:

Text editor - 63 bytes, Spreadsheet - 758 bytes, Drawing app - 410 bytes, Presentation maker - 631 bytes

Cool ideas!

<html contenteditable> is too powerful I think. You can paste HTML, which you might find desirable for stuff like pasting link anchors, but if you paste something that uses tables for layout (HN titles for example). It leaves it in this weird state where you can delete the table contents but not the table itself. I think for my purposes I'll use something like

  data:text/html,<textarea>

with some CSS to make it fit the page size.

Update:

  data:text/html,<textarea style='font-size:1.25rem;margin:0px;height:100%25;width:100%25;'>

code: <50 bytes

runtime: >100 MB

Reminds me of https://esolangs.org/wiki/HQ9+ :-)

    import fullofficesuit

    def main:
      fullofficesuit.presentation()

By that logic:

    import linuxkernel

    if __name__ == "__main__":
      linuxkernel.run()

Not saying you're wrong, just that the size and complexity of your runtime is an interesting consideration :)

Russian translation appeared on https://habr.com/ru/company/vdsina/blog/523306/, congrats.

It’s a fun piece, but there is nothing tiny about a modern browser.

I can write a better tiny office suite in Visual Basic for applications.

So...care to show us?

That reminds me of the Turbo Toolbox for Pascal. I loved that editor and used it for years.

Beautiful thinking

it inspires!: a reflection of this for pico8-likes, how would it look? how would it be built?

This is Aw-some.

Combine this with the new File Access API, and you could actually build a self hosting office suite in a few pages.

Love the package name Awfice. Aww.

Amazing! Can you add real time editing for multiple users now? }:)

Already implemented, just connect another set of mouse and keyboard to the computer for each additional user.

Sorry for being cynical; But Firefox memory footprint is ~30 GB

browsers have the bad habit of autorefresh

You made my day.

You forgot to include React, Angular, JQuery, Bootstrap, Tailwind, Facbook and Google trackers, and Github CI and Typescript and ES8 syntax! And underscore, moment.js, using a linter with randomized settings. You did however use a minifier and ES6 syntax, so Ill give you one Github star.

wowldz tinywiest offwice

Awesome, but the spreadsheet isn't working for me.

Check my simple presentation tool https://mark.show

That's quite a clickbait title. Contenteditable is not new by any means and also is a compatibility mess.

Pencil and paper aren't new, but we can still admire and enjoy the creativity of a poem.

Reply on news.ycombinator.com