
Show HN: Poor man's Google Docs - marco1
https://github.com/delight-im/HTML-Sheets-of-Paper?hn=2016-08-30
======
cwkoss
Looks pretty good.

For an even-poorer-man's google docs, I like to keep this bookmarked:

    
    
        data:text/html, <html contenteditable>
    

If you navigate to that string in your browser it gives you a blank, editable
page. No saving or any fancy features, but it is pretty convenient to be able
to quickly spin up a scratch pad sometimes.

~~~
ianlevesque
Clever, but why? Notepad.exe, TextEdit.app, Gedit, nano are all already there
- and do save if you want to after. TextEdit will even just let you quit and
come back without saving and the draft is there. Leave the browser sometimes
man!

~~~
zatkin
How dare you forget my favorite text editor in your list.

~~~
dcgoss
Which is?

~~~
gravypod
Cat, Awk, Grep, and unix pipes

------
nattaylor
It doesn't take away from this, but because of the title: Google Docs started
much like this, but eventually they gave up on plain HTML and changed to the
current model which still uses the DOM but is "complicated"(tm) HTML.

I can't find the link at the moment, but I think it's interesting because
despite it being the simple solution, they eventually realized it was holding
back adoption amongst business users.

Edit: Found the article: "Babe Ruth and Feature Lists" [0] where former Google
PDM Ken Norton writes:

>We were relying on the browser’s rich text surface, which used HTML as the
underlying data format and caused browser compatibility nightmares. You’d bold
a word and then be unable to un-bold it. Bulleted lists couldn’t be edited or
deleted without screwing up the whole page or turning everything into a
bullet. Centering a line would often center-align the entire document.
Formatting bugs had been an annoyance for Googlers, but they were fatal for
groups of students who needed to print a term paper to a teacher’s exacting
specifications.

0 - [https://library.gv.com/babe-ruth-and-feature-
lists-1818bb8c6...](https://library.gv.com/babe-ruth-and-feature-
lists-1818bb8c6ca8#.sq8086m2t)

~~~
jkaptur
Here's a great technical explanation of the problem:
[https://medium.engineering/why-contenteditable-is-
terrible-1...](https://medium.engineering/why-contenteditable-is-
terrible-122d8a40e480)

~~~
marco1
Thanks, great read!

Please see my comment on the parent to your post for a response.

------
BinaryIdiot
No JavaScript? Nice. Don't see too many functional pages without it. I don't
know that I would call it a poor man's Google Docs due to the lack of
equivalent features but good work nonetheless.

~~~
combatentropy

      > No JavaScript?
    

And even these keyboard shortcuts work, at least in Chrome:

Ctrl B: bold

Ctrl I: italic

Ctrl U: underline

~~~
marco1
They do not work in Firefox (and probably other browsers), unfortunately, but
you can still edit the DOM in the inspector there.

------
rtcoms
My favorite is this chrome extension :
[https://chrome.google.com/webstore/detail/new-tab-notes-
alph...](https://chrome.google.com/webstore/detail/new-tab-notes-
alpha/dnghgncclglnalfilefbdpoflgajhdpo)

~~~
kawera
Another one (bottom-left menu for options):
[https://chrome.google.com/webstore/detail/papier/hhjeaokafpl...](https://chrome.google.com/webstore/detail/papier/hhjeaokafplhjoogdemakihhdhffacia)

------
kowdermeister
It's possible to generate PDF client side. You might consider adding that
feature.

~~~
tantalor
"Print to PDF" isn't clientside enough for you?

~~~
justinlardinois
As far as I know Chrome is the only browser that offers that as built in
feature.

~~~
creshal
Every browser in Linux and OSX does it, and doesn't Windows 10 ship with a
built-in PDF printer too?

~~~
justinlardinois
Those are built into the operating system, not the browser.

My point is that not everyone has those features out of the box. Sure, you can
install more software, but it's not a reason to not have a feature like that
in this word processor.

~~~
stephenr
Well by that logic, I sure hope my word processor has a calculator and an mp3
player and shit it better have an app store too.

Printing is the responsibility of the platform, not the application.

~~~
creshal
> Well by that logic, I sure hope my word processor has a calculator and an
> mp3 player and shit it better have an app store too.

Something something Zawinski's Law.

------
kevinwang
>No skeuomorphic paper

But isn't it skeumorphic to have pages based off of real paper sizes?

~~~
nathancahill
No, that's just good design. The use-case seems to be for printed documents.

~~~
kevinwang
I guess my confusion is just: are we saying that white rectangles with the
dimensions of paper are not skeumorphisms of paper?

What, then, would skeumorphic paper be?

~~~
marco1
Sorry for the confusion!

This was actually only added to underline that there's nothing like [1] in
this project. Will improve the README.

[1]
[https://www.google.de/search?q=paper+texture&tbm=isch](https://www.google.de/search?q=paper+texture&tbm=isch)

------
bryanrasmussen
I believe Google Docs is actually the poor man's Google Docs.

~~~
rezashirazian
my wife calls Google Docs poor man's Microsoft Word.

------
markwaldron
I'm a big fan of Papier for chrome. It doesn't save to your Google account so
my notes on my home computer are different than my work computer, which is
just how I like it:
[https://chrome.google.com/webstore/detail/papier/hhjeaokafpl...](https://chrome.google.com/webstore/detail/papier/hhjeaokafplhjoogdemakihhdhffacia?hl=en)

------
elwell
Might be nice to add "outline: none;" to .page

~~~
marco1
What browser are you using? Did you test this? I can't see any difference.
Please note that a drop shadow has been added deliberately here.

~~~
milankragujevic
Safari on OS X has a blue glow around the input field when focused.

~~~
GrantSolar
As does Chrome 52 on Windows 10

------
CarolineW
What happens if multiple people load the same page and type simultaneously?
I'm on a phone and can't test that for myself, but the simultaneous
access/editing is what Google Docs truly valuable.

Does this do that?

~~~
marco1
Good point!

It doesn't do this _yet_ , because the focus here has been on perfect
representation of pages via CSS.

But using socket.io or something like this, it shouldn't be thard hard.

~~~
CarolineW
I suspect it is harder than you think. Have a go, and let us know how you get
on. I'd love to see a simple, light-weight, elegant alternative to Google
Docs.

~~~
marco1
Thanks, I didn't mean it's _trivial_ , but it's not a hard technical problem
(anymore) to do that on the web.

Not sure if I'll be working on this, though, because there are so many
(commercial) services providing this already. Sure, you might think that
Google Docs could be more lightweight and elegant, but for many people it's
working fine and that 10% improvement _on Google Docs_ is definitely too much
work for a _tiny_ open-source project.

I was talking about basic functionality, just as you were in your first
comment. The title of this contribution didn't talk about a _poor man 's_
Google Docs by chance.

------
vtempest
This contributes nothing more than <div contenteditable> and to present this a
document editor is counter-productive to users searching for something
reliable. The link below shows the many shortcommings of just calling the
contenteditable browser API as an emulator. For example, Google Docs does not
use contenteditable at all -- for the many reasons outlined below. Building a
real doc editor that functions as a widget in blogs and forums sites requires
a lot more support -- of the open source alternatives, Medium is one of the
best.

Why ContentEditable Is Terrible, Or: How the Medium Editor Works (2014)
(medium.com)
[https://news.ycombinator.com/item?id=11487667](https://news.ycombinator.com/item?id=11487667)

~~~
marco1
It does!

You might not have looked at this closely enough, but "contenteditable" is
really only one line that has been added to make the demo more useful.

The real thing this is about is the CSS. There are ~250 lines that produce the
correct page sizes, margins and paged content and ensure that prints are as
expected.

------
stephenr
Adding content to the first "page" doesn't cause the content below it to re-
flow onto the second page.

Is that a bug, or is it not intended to work that way?

~~~
marco1
Thanks!

This does only affect the "in-browser" view. In the print view, everything is
correct.

Yet, you're right in that this just isn't acceptable. The "preview" mode in
the browser should work exactly like the print mode here.

This is a known issue and had already been tracked here:
[https://github.com/delight-im/HTML-Sheets-of-
Paper/issues/2](https://github.com/delight-im/HTML-Sheets-of-Paper/issues/2)

~~~
stephenr
When i viewed the print preview it seemed broken too - the content in the
first on-screen page (which was too long) became two pages, and then in the
print preview it forced a new page before the next block of content.

------
a_lifters_life
Pretty cool - thanks!

