
Luckysheet, an open-source spreadsheet - tzm
https://github.com/mengshukeji/Luckysheet
======
chrismorgan
I will keep saying this every single time some one gets this wrong (which is
at least 49 times out of 50): the _only_ way to handle scrolling properly on
the web is for your scroll events to fall onto a real scrollable area, and to
observe the effect it has (e.g. apply the scroll position to what you’re
rendering with). This can be tricky to achieve well when you have dynamic
content that the mouse needs to be able to interact with within that area, but
it _is_ possible to do well, with careful application of `position: sticky`
and/or `position: fixed`.

As it stands, scrolling is nigh unusable on my Surface Book: vertical
scrolling goes at a million times the speed it should, and horizontal
scrolling goes a million times as fast as it should in the wrong direction.

Don’t do scrolljacking. It’s bad, every single time. With the tools the web
gives you it’s not _possible_ to get it completely right that way.

~~~
robbiejs
Absolutely. In the development process of our product DataGridXL we've also
experimented a lot with "scrollwheel" events and such, for months really. It's
just not possible to get it to feel natural. You might be able to get it
working nicely on one specific OS+browser combo, but that's about it.

Always listen to the native "scroll" event:
[https://www.datagridxl.com/demos/one-million-
cells](https://www.datagridxl.com/demos/one-million-cells)

~~~
chrismorgan
One deficiency of using the native scrollbars _visually_ here is that the
arrows at the end of the scroll bars on some platforms (e.g. Windows, most
Linux) will scroll by a predetermined number of pixels, more or less, whereas
in such an application you would probably prefer it to scroll one column
horizontally or one row (though maybe more than one) vertically. Of course,
placing your own scrollbar visuals is a hazard too, most significantly because
it doesn’t look native and may offer different functionality from the normal
scrollbar. You can’t win, the web doesn’t give you the tools you need to get
the experience _perfect_.

But yeah, your example in DataGridXL is a good example of the right approach
to take for this if you want scrolling to be done in steps as is conventional
in spreadsheets.

~~~
robbiejs
You know your stuff, I can tell! In a pre-release version, we had hidden the
native scrollbar and put our own scrollbar graphic on it that would animate
using CSS transform according to native scroll offsets vs. DGXL viewport
dimensions. The scrollbar size (width/height) and position made more sense,
but at the end we couldn't get it to feel quite right.

We're quite happy with the native scrollbar. It's fine on mobile too.

~~~
chrismorgan
Yep, I think native scrollbars is reasonable for DGXL. Maybe eventually you’ll
sniff whether scrollbars take space and draw your own that match the size if
they do, but it’s definitely a little risky.

These sorts of things are particularly interesting once you support a sparse
spreadsheet; drawing your own scrollbars becomes much more compelling then, so
that you can make them more useful. No idea about Excel, but LibreOffice
Calc—(which amusingly gets scrolling by precise touchpad wrong in just the
same way as Luckysheet, _sans_ the wrong horizontal direction; this stuff is
hard everywhere)—well, LibreOffice Calc’s scrollbars essentially pretend the
whole time that the document is only as large as the extent of the cells with
content or the selection, whichever is larger in each axis, plus a screenful
or so in each axis. So if you’re at A1 of an empty document, the scrollbars
thumbs fill about half of the bar, but if you’re at AMJ1048576 (maximum sheet
dimensions are 2¹⁰×2²⁰), the thumbs are tiny at the bottom and right.

~~~
robbiejs
Sounds like a very strange approach, those LibreOffice Calc scrollbars ;-)
Sometimes it's useful to give a minimal width/height for a scrollbar thumb, so
that it remains visible and selectable. A tiny scrollbar thumb might be
"realistic" when it represent the viewport vs document dimension, but it
always looks a bit stupid.

How come you know so much about scroll bars? Did you make your own spreadsheet
app/component?

~~~
chrismorgan
The spreadsheet approach makes a lot of sense: they’re dealing with what’s
practically a near-infinite document (a million cells is close enough to
infinity in such cases!), but people seldom actually _use_ that many cells.
Thus, the shenanigans they pull are to make the scrollbars useful, so that
they typically give a fair reflection of the actual size of the document the
user is dealing with. I imagine Excel does something similar.

I know so much mostly just because I observe carefully, in both desktop and
web software. I haven’t implemented anything like this, but when I observe
things imperfect on the web and it’s a type of imperfection I’m not familiar
with, I often assess it to figure out whether it’s possible to get right. I
also value getting things right in straight HTML/CSS with no JavaScript.

------
smartmic
I still cannot wrap my head around why so many folks want to use such
applications in a web browser.

For me, web browser applications never reach the responsiveness and ease of
use of well crafted desktop applications written in any decent systems
programming language or even interpreted languages (not speaking of
Javascript). Maybe I am getting old, but having the browser as a platform for
programs is huge setback for many criteria that I personally value.

For example, as a free Excel alternative, I fall back to Gnumeric
([http://www.gnumeric.org/](http://www.gnumeric.org/)) from time to time.

~~~
asah
No installation

Multiple tabs/windows

Don't leave the browser

Works-at-all on multiple platforms incl mobile

Deep linking / sharing / bookmarking

App freezes are less common (on network access) and easier to manage when they
happen - obviously this is anecdotal and not universal.

~~~
alpaca128
Registration/Login required(I'll take the installation over that in many
cases)

No properly working (or even implemented) keyboard shortcuts; I just tried,
Google Sheets tells me to use Ctrl+C etc. but it doesn't do anything, and
what's even worse is that the menu item for "insert" doesn't do anything
either because Google wants to force me to use the dysfunctional
keybinding...thanks I guess

Usually no right click + context menu

Input lag

No offline use possible(remember all the MS/Cloudflare/AWS etc. outages?)

Less control over data, privacy issues

~~~
cjblomqvist
I understand the sentiment, but some of your points are simply not true.
Ctrl+C works fine last time I tested GDocs (inc sheets). It also have offline
support, and supports right clicking? Input lag is very dependant on the
actual application and how it's made AFAIK, albeit it might be more difficult
to do it right using web tech. That leaves two arguments (basically privacy
arguments). That is not it related to web tech. For example, Adobe CC more or
less requires the same login and authentication requirements as other web
applications. Some web applications does not require login (pixlr for
example). Many desktop applications phone home as well and gather even more
information about you and your computer.

Web tech is not the problem in itself - it's how it's used and deployed that
can be a problem (like the ads/data "freemium" business model some use BFF
which a _few_ users dislike).

I thought we were better than arguing with false arguments and pointing
fingers at the wrong problem - well, I guess "hoped" (in a naive sense) is
actually more accurate...

~~~
alpaca128
> Ctrl+C works fine last time I tested GDocs

Well, it didn't work when I wrote my comment, sorry that it seems to be
inconsistent on my setup. Regardless it is still very questionable of Google
to make the "insert" menu item do absolutely nothing but show a popup dialogue
telling you to use Ctrl-V. It is annoying and comes across as a bit
condescending, like some engineer at Google wanted to teach the noobs how it's
done properly.

> It also have offline support, and supports right clicking?

I was talking about web apps in general, not just Google. Many web apps don't
have any context menu or shortcuts, you have to move the mouse back and forth
all the time for the simplest steps.

And what's even worse is that many JS-loaded websites mess with the UI so much
that you can't open links in new tabs anymore. I don't even want to know how
that can be done unintentionally.

> Adobe CC more or less requires the same login and authentication
> requirements as other web applications.

You are right there, maybe I conflated the web app trend with the rising
amount of user-unfriendly software design.

~~~
iudqnolq
The insert menu tells you to use the shortcut because browser restrictions
make accessing/modifying the clipboard without doing so difficult.

------
rwmj
I wish people wouldn't copy Excel (or Google apps for that matter). Those
spreadsheets are _terrible_. It still baffles me that none of them can do
sideways scrolling correctly, they are all incredibly awkward to edit, the
formulae are fundamental to how they work yet hidden and obscure, they do
weird "magical" stuff to strings like turning them into numbers or dates when
you didn't ask, etc.

I'd really like to see people explore new paradigms. Something that has the
functionality of a spreadsheet but looks nothing like current spreadsheets.

~~~
chrispsn
When you say 'has the functionality of a spreadsheet but looks nothing like
current spreadsheets', what do you mean?

I am working on Mesh Spreadsheet. It gives you a spreadsheet UI that writes
code as text. It will likely use k9 as the formula language once it matures,
but:

\- you can try the JavaScript prototype at this link: [http://mesh-
spreadsheet.com](http://mesh-spreadsheet.com)

\- you can see a proof of concept video using k here:
[https://www.youtube.com/watch?v=CEG9pFNYBCI](https://www.youtube.com/watch?v=CEG9pFNYBCI)

~~~
i_don_t_know
That‘s pretty cool.

One reason I prefer Apple Numbers to Excel is that in Numbers you arrange
tables on a canvas. The tables can refer to each other. I think it makes it
easier to work with, for example, an input table and an output table because
they are separate entities and not just different ranges on the same grid.
It’s similar to how some websites enable you to configure a dashboard view of
multiple tables and charts.

Your presentation reminded me of that, specifically the view of how you
implemented the tool in itself. But you’re using one large table rather than a
collection of tables on a canvas.

I’m wondering if the Numbers approach might work better. In particular it
might be more natural for dynamic arrays because they would not “overlay” a
range of cells. They would be their own dynamically resizing table on the
canvas. This might lead to something like Spreadsheet 2000:
[https://en.m.wikipedia.org/wiki/Spreadsheet_2000](https://en.m.wikipedia.org/wiki/Spreadsheet_2000)

~~~
chrispsn
Thanks! I have been considering this!

It might impact the 'flow' of modelling eg using automatic cell names like
'A1'. And it might complicate storing the sheet as text (might need to store
more complex layout info than 'table is at coordinates x,y').

But it could also make layout easier, eg tables underneath each other could
have different column widths. Could use CSS flow layout.

I also hadn't heard of Spreadsheet 2000 - great reference, thanks.

BTW - I think of the Mesh spreadsheet as a canvas, just a 'discrete' one as
opposed to continuous. In theory, if the grain is fine enough (eg 1 character
width of a monospace font), then you might be able to get the best of both
discrete and continuous approaches.

~~~
i_don_t_know
Speaking of automatic cell names ‘A1’, the other thing I prefer about Numbers
is that you can name columns and use the name in formulas. For example, you
might have a table “Sales” with columns “Item”, “Number Sold”, “Item Price”,
and “Total”. The formula for all cells in column “Total” is

=‘Item Price’ * ‘Num Sold’

Instead of =B1 _C1, =B2_ C2, etc. You’re doing something similar with the name
cell, but with separate tables you can designate column headers and row
headers, and use them to reference cells. For example, in another table you
might say: =SUM(‘Sales :: Total’) to sum up column “Total” in table “Sales”.

(I might be getting the syntax wrong here, you don’t type this in, you
“option-click” on the cell you want to reference and it inserts the
reference.)

This is optional, you can still do A1, B4, etc and sometimes that’s what you
get when you use the same name for two columns in order to disambiguate. But
in general it makes it easier validate your spreadsheet, I think.

I believe the approach to naming goes back to Lotus Improv:
[https://en.m.wikipedia.org/wiki/Lotus_Improv](https://en.m.wikipedia.org/wiki/Lotus_Improv)

I think Quantrix Modeler is also based on the ideas of Improv.

Come to think of it, there was Javelin in the 1980, that you might find
interesting. It’s not a spreadsheet but it was used for financial modeling and
time series:
[https://en.m.wikipedia.org/wiki/Javelin_Software](https://en.m.wikipedia.org/wiki/Javelin_Software)

But those are quite far departures and might not be where you want to go. I
just wanted to point them out in case you hadn’t heard of them. (I’ve only
heard of them but I have never used them, so I cannot say how good or bad they
worked in daily life.)

~~~
chrispsn
> you can name columns and use the name in formulas

You can do that in Excel too: whether it's the whole column of a sheet, or a
column of a table - syntax for latter is `someTable[someColumnName]`. Mesh
will have the latter, albeit with different syntax.

Thank you for the links! I will have a look. There's a deep history.

~~~
i_don_t_know
I didn’t know Excel supported that too. Nice. I should have guessed, it does a
lot of things.

------
dvfjsdhgfv
It looks really nice! But...

The main reason I tend to avoid Google Sheets is that they're slow. Slow to
open, slow to update more complex sheets, slow if you have more of them open.
In general, much worse overall experience than a desktop spreadsheet,
especially if you're using Firefox.

So I was really hoping for something with the snappiness of EtherCalc (which
is blazing fast!), just more elegant. I realize it's difficult to have both
functionality and speed, so a maybe a system of plugins could be useful. Most
of online business sheets I saw use just a few arithmetic functions, many
people would be happy with just that.

~~~
fakeyguy
thanks for this! I never knew something like Ether Calc existed!

~~~
mobilio
There is also Etherpad: [https://etherpad.org](https://etherpad.org)

------
tluyben2
Interesting, this suffers from the same issue I have with TeamViewer (and only
with teamviewer; this Luckysheet is the first thing outside teamviewer I see
this) on mac os x: if I scroll up in a document that has a vertical scrollbar,
it will not only scroll up but also to the right. It happens on all the macs
in the house, doesn't happen on Linux/Windows... Well, for Teamviewer; I did
not test this one on all those machines yet.

The problem does not arise with VNC or any other remote tech or program. I
have never figured why it is and it's been there for years across different
macs and different OS X versions.

~~~
sdoering
I have the same behavior here (MB Pro 13'', Catalina). But additionally I also
experience that the scroll direction left to right is inverted. I have to
scroll left so that the spreadsheet scrolls right and vice versa.

Not so top to bottom.

~~~
tluyben2
Yes, indeed I have experienced that as well sometimes...

------
lasermike026
Call me crazy but I would really like a ncurses spreadsheet.

~~~
laktak
[https://github.com/andmarti1424/sc-im](https://github.com/andmarti1424/sc-im)

SC-IM - Spreadsheet Calculator Improvised -- An ncurses spreadsheet program
for terminal

------
motohagiography
Recently I've become addicted to sc-im, a vi (vim) like spreadsheet. Using
this tutorial:
[http://blog.startaylor.net/2016/08/29/sc/](http://blog.startaylor.net/2016/08/29/sc/)

While I don't do very complex things, in terms of note taking using a
spreadsheet, it's excellent.

------
fakeyguy
this is quite impressive. formulas, charts supported out of the box. does it
support importing xlsx and exporting to xlsx or pdf?

------
warxmike
Keep it up it's a step closer to free me from Google

------
pastage
Seems snappy enough on mobile, but translation of functions seems to be
missing, so the formula editor is all in chinese to me. Not sure if that is
plugable in runtime. One needs to at least translate
src/function/functionlist.js maybe more..

This would all be easier if this was not a Vue app, but rather HTML5 but all
in all not that different from how desktop apps are made.

~~~
chvid
This is not a vue app is it? As far as I can see this classic JavaScript with
jquery.

------
supermac
This spreadsheet is currently the most comprehensive in open source projects I
have seen

------
vmsp
I've always been curious about what data structures are used to store
spreadsheet data. Are there any online spreadsheets just creating, dropping
and altering SQL tables as needed?

------
robbiejs
This looks like a really great effort, better than other canvas spreadsheets I
have seen. Great work!

------
acd
Interesting idea with an browser based open source spreadsheet.

------
franga2000
This is really impressive and all, but we already have a pretty good open
source online spreadsheet editor by OnlyOffice and I can't help thinking where
we could be if the (I imagine) pretty significant amount of work that went
into this was put into improving an existing solution...

~~~
nik736
Luckysheet comes with the MIT license.

~~~
bestouff
I can't see why it's an advantage.

~~~
iCarrot
I can't see why more options to choose from is not an advantage.

~~~
brylie
More options is good for rapid evolution of a new domain. Eventually though,
we need collaborative effort to take established ideas to a mature state.

For example, there are a number of fledgling open-source nonlinear video
editors (NLEs) -- to name a few in no particular order Kdenlive, Openshot,
Olive, OpenMovieEditor, Blender Video Sequence Editor, Shotcut, Cinelerra, and
Flowblade. I say this with full respect to the authors and contributors to
those projects, we just need ONE open-source NLE that is on par with Final Cut
or Premiere Pro.

~~~
franga2000
+1 for the NLE example, as it's one of the biggest problematic areas to me.
What even is the difference between Shotcut and OpenShot? Both are 90% of the
way to being the perfect everyday video editor, yet they both get destroyed by
the first shareware result for "free video editor" when it comes to polish.

But we really can't blame the authors - there's no money in open source user
apps and polishing isn't fun to most people. I'd immediately jump on the
opportunity to build an NLE from scratch if given the time and financial
freedom, but I can't see myself digging though someone else's code and sanding
all the rough edges for fun.

------
mebr
A web-based spreadsheet, the code is under the MIT License, seems to have some
(/many?) features of the commercial products.

~~~
jacobolus
Looks similar to every spreadsheet since Visicalc....

~~~
mebr
Fair point, updated my comment to give an idea what this is to someone like me
who doesn't get right away what this.

------
sabellito

      Language                     files          blank        comment           code
      -------------------------------------------------------------------------------
      JavaScript                     142          54627          91825         243672
      CSS                              9            790            238           5908
      HTML                             2             10              1             43
      -------------------------------------------------------------------------------
      SUM:                           153          55427          92064         249623
      -------------------------------------------------------------------------------
    

without the demoData dir. that's nuts

~~~
smt88
This may not be the most concise possible code base, but there's no way to
build something like this with a thin layer of code on top of a browser. I
can't imagine any similar level of functionality with a size that's a lower
order of magnitude than this.

~~~
nabla9
Maybe there is:

1\. Hire Chuck Moore to write a spreadsheet in Forth.

2\. Hire Fabrice Bellard to write tiny Forth interpreter in Javascript.

tada.

