├── .gitattributes
├── .gitignore
├── LICENSE.md
├── README.md
├── full-commented.html
├── full.html
├── headers.html
├── index.html
├── mini-commented.html
└── mini.html


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | *.sln    merge=union
 7 | *.csproj merge=union
 8 | *.vbproj merge=union
 9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 | 
12 | # Standard to msysgit
13 | *.doc	 diff=astextplain
14 | *.DOC	 diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot  diff=astextplain
18 | *.DOT  diff=astextplain
19 | *.pdf  diff=astextplain
20 | *.PDF	 diff=astextplain
21 | *.rtf	 diff=astextplain
22 | *.RTF	 diff=astextplain
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | #################
  2 | ## Eclipse
  3 | #################
  4 | 
  5 | *.pydevproject
  6 | .project
  7 | .metadata
  8 | bin/
  9 | tmp/
 10 | *.tmp
 11 | *.bak
 12 | *.swp
 13 | *~.nib
 14 | local.properties
 15 | .classpath
 16 | .settings/
 17 | .loadpath
 18 | 
 19 | # External tool builders
 20 | .externalToolBuilders/
 21 | 
 22 | # Locally stored "Eclipse launch configurations"
 23 | *.launch
 24 | 
 25 | # CDT-specific
 26 | .cproject
 27 | 
 28 | # PDT-specific
 29 | .buildpath
 30 | 
 31 | 
 32 | #################
 33 | ## Visual Studio
 34 | #################
 35 | 
 36 | ## Ignore Visual Studio temporary files, build results, and
 37 | ## files generated by popular Visual Studio add-ons.
 38 | 
 39 | # User-specific files
 40 | *.suo
 41 | *.user
 42 | *.sln.docstates
 43 | 
 44 | # Build results
 45 | 
 46 | [Dd]ebug/
 47 | [Rr]elease/
 48 | x64/
 49 | build/
 50 | [Bb]in/
 51 | [Oo]bj/
 52 | 
 53 | # MSTest test Results
 54 | [Tt]est[Rr]esult*/
 55 | [Bb]uild[Ll]og.*
 56 | 
 57 | *_i.c
 58 | *_p.c
 59 | *.ilk
 60 | *.meta
 61 | *.obj
 62 | *.pch
 63 | *.pdb
 64 | *.pgc
 65 | *.pgd
 66 | *.rsp
 67 | *.sbr
 68 | *.tlb
 69 | *.tli
 70 | *.tlh
 71 | *.tmp
 72 | *.tmp_proj
 73 | *.log
 74 | *.vspscc
 75 | *.vssscc
 76 | .builds
 77 | *.pidb
 78 | *.log
 79 | *.scc
 80 | 
 81 | # Visual C++ cache files
 82 | ipch/
 83 | *.aps
 84 | *.ncb
 85 | *.opensdf
 86 | *.sdf
 87 | *.cachefile
 88 | 
 89 | # Visual Studio profiler
 90 | *.psess
 91 | *.vsp
 92 | *.vspx
 93 | 
 94 | # Guidance Automation Toolkit
 95 | *.gpState
 96 | 
 97 | # ReSharper is a .NET coding add-in
 98 | _ReSharper*/
 99 | *.[Rr]e[Ss]harper
100 | 
101 | # TeamCity is a build add-in
102 | _TeamCity*
103 | 
104 | # DotCover is a Code Coverage Tool
105 | *.dotCover
106 | 
107 | # NCrunch
108 | *.ncrunch*
109 | .*crunch*.local.xml
110 | 
111 | # Installshield output folder
112 | [Ee]xpress/
113 | 
114 | # DocProject is a documentation generator add-in
115 | DocProject/buildhelp/
116 | DocProject/Help/*.HxT
117 | DocProject/Help/*.HxC
118 | DocProject/Help/*.hhc
119 | DocProject/Help/*.hhk
120 | DocProject/Help/*.hhp
121 | DocProject/Help/Html2
122 | DocProject/Help/html
123 | 
124 | # Click-Once directory
125 | publish/
126 | 
127 | # Publish Web Output
128 | *.Publish.xml
129 | *.pubxml
130 | 
131 | # NuGet Packages Directory
132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line
133 | #packages/
134 | 
135 | # Windows Azure Build Output
136 | csx
137 | *.build.csdef
138 | 
139 | # Windows Store app package directory
140 | AppPackages/
141 | 
142 | # Others
143 | sql/
144 | *.Cache
145 | ClientBin/
146 | [Ss]tyle[Cc]op.*
147 | ~$*
148 | *~
149 | *.dbmdl
150 | *.[Pp]ublish.xml
151 | *.pfx
152 | *.publishsettings
153 | 
154 | # RIA/Silverlight projects
155 | Generated_Code/
156 | 
157 | # Backup & report files from converting an old project file to a newer
158 | # Visual Studio version. Backup files are not needed, because we have git ;-)
159 | _UpgradeReport_Files/
160 | Backup*/
161 | UpgradeLog*.XML
162 | UpgradeLog*.htm
163 | 
164 | # SQL Server files
165 | App_Data/*.mdf
166 | App_Data/*.ldf
167 | 
168 | #############
169 | ## Windows detritus
170 | #############
171 | 
172 | # Windows image file caches
173 | Thumbs.db
174 | ehthumbs.db
175 | 
176 | # Folder config file
177 | Desktop.ini
178 | 
179 | # Recycle Bin used on file shares
180 | $RECYCLE.BIN/
181 | 
182 | # Mac crap
183 | .DS_Store
184 | 
185 | 
186 | #############
187 | ## Python
188 | #############
189 | 
190 | *.py[co]
191 | 
192 | # Packages
193 | *.egg
194 | *.egg-info
195 | dist/
196 | build/
197 | eggs/
198 | parts/
199 | var/
200 | sdist/
201 | develop-eggs/
202 | .installed.cfg
203 | 
204 | # Installer logs
205 | pip-log.txt
206 | 
207 | # Unit test / coverage reports
208 | .coverage
209 | .tox
210 | 
211 | #Translations
212 | *.mo
213 | 
214 | #Mr Developer
215 | .mr.developer.cfg
216 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | public domain


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | http://xem.github.io/sheet


--------------------------------------------------------------------------------
/full-commented.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 
  3 | // Sheet! 
  4 | // ======
  5 | 
  6 | // a sub-256b full-featured JS spreadsheet
  7 | // =======================================
  8 | 
  9 | // This app creates a spreadsheet of 4 x 6 cells supporting:
 10 | // - any value: text, number or float (ex: `Hi!` or `8` or `1.234`).
 11 | // - formulae (ex: `=A1+8`), visible when a cell is focused and executed on blur.
 12 | // - implicit `Math` in formulae (ex: `=sqrt(A1)`).
 13 | // - updates all the grid in cascade when a cell value changes.
 14 | // - protection against auto or circular references.
 15 | // - localStorage persistence.
 16 | 
 17 | // We start by declaring the function `o`. This function has two uses:
 18 | // - If it's called with an argument `b`, it will initialize and draw all the spreadsheet in HTML.
 19 | // - It it's called with no argument, it will evaluate all the cells and update their values.
 20 | o = b => {
 21 |   
 22 |   // This weird `for` statement is used to make a loop that iterates a lot of times, by using very few characters.
 23 |   // `{} + o` generates a 245-chars string containing the String value of `{}` ("[object Object]"),
 24 |   // followed by all the source code of `o`. ("b=>{for(i in{}+o) ... x-~x?+x:x)}").
 25 |   // Minified, `for(i in{}+o)` is 5 chars shorter than the equivalent `for(i=0;i<245;i++)`.
 26 |   // `i` is the loop var going from 0 to 245.
 27 |   for(i in {} + o){
 28 |   
 29 |     // All the following code is executed with `Math` implied.
 30 |     // This allows to call Math functions in formulae, without writing "Math.",
 31 |     // but the Math object (`M`) will also be used to store all the cells values before they're evaluated (especially the formulae).
 32 |     with(M = Math){
 33 |     
 34 |       // The string `y` represents the current cell's name.
 35 |       // It is built by concatenating the (i%5)'th char of 'ABCD',
 36 |       // and `-~(i/5%6)`, which is equivalent to `1 + Math.floor(((i / 5) % 6))` (this is needed to name the first line "1" instead of "0").
 37 |       // So in each loop, `y` gets a value from this list: "A1", "B1", "C1", "D1", NaN, "A2", "B2", ..., "C6", "D6", NaN, then it gets back to "A1" , "A2", ...
 38 |       // We then store data in `M[y]`, according to the value of `b`:
 39 |       M[y = 'ABCD'[i % 5] + -~(i / 5 % 6)] =
 40 |       
 41 |       // If `b` is set:
 42 |       b ?
 43 |       
 44 |       // We use the first 30 values of `y` to render the grid in HTML:
 45 |       document.write(
 46 |         
 47 |         (
 48 |         
 49 |           // If `y` is truthy and lower than 30:
 50 |           // (the limit of 30 ensures that the grid keeps a 24 cells + 6 line breaks)
 51 |           y && i < 30
 52 |         
 53 |           // write the beginning of an <input> tag, with the attributes "placeholder" and "id" equal to `y`.
 54 |           ? `<input placeholder=${y} id=` + y
 55 |           
 56 |           // if `y` is NaN, write the beginning of a <br> tag instead, to pass on a new line.
 57 |           : '<br'
 58 |         ),
 59 |         
 60 |         // then write the end of the current tag, including two event listeners:
 61 |         //
 62 |         //  `onblur=l[id]=value;o()`:
 63 |         //  as soon as a cell loses focus,
 64 |         //  this event will store the value of the cell (`this.value`) in `l[this.id]` (`l` represents `localStorage`, and the  two `this` are implicit),
 65 |         //  then it will call the function `o()` with no argument to evaluate all the cells.
 66 |         //
 67 |         //  `onfocus=value=[l[id]]`:
 68 |         //  as soon as the cell is focused,
 69 |         //  this event will put the stored cell value (`l[this.id]`) in `this.value` (so the user can see his original formula).
 70 |         //  `l[this.id]` is surrounded by an array (`[]`) to avoid writing "undefined" when we focus an empty cell.
 71 |         //  indeed, the array `[undefined]` coerces into an empty string, which is what we want here (keep the empty cells empty on focus).
 72 |         ` onfocus=value=[l[id]] onblur=l[id]=value,o()>`
 73 |         
 74 |         // You may notice that the <br>'s also get an id, a placeholder and two event listeners, but they don't have any use.
 75 |         // It just saves a few chars to use the same ending for both <br> and <input> tags.
 76 |         // The result of `document.write` (i.e. undefined) is stored in `M[y]`, which also has no effect.
 77 |         // It just saves a few chars to use the same assignment `M[y]=` whether `b` is set or not.
 78 |       )
 79 |       
 80 |       // If `b` is not set:
 81 |       :
 82 |       
 83 |       // the loop is not limited to 30 iterations anymore, so the following code is executed 8 to 9 times for each cell of the spreadsheet.
 84 |       // These passes allow to execute deeply nested formulae and avoid browser-freezing, infinite circular references,
 85 |       // which could occur if we had executed each formula as soon as its cell's value changes.
 86 |       (
 87 |         // `top[y]` is the input tag with the id `y`. We're updating its content according to the following rules:
 88 |         top[y].value = [
 89 |         
 90 |           // If the stored value of the cell (called `z`) starts with a "=", then it's a formula.
 91 |           // We use `/^=/.test(z)` here instead of `z[0]=="="` to avoid breaking when `l[y]` is undefined.
 92 |           /^=/.test(z = l[y]) ?
 93 |           
 94 |           // We eval the string `'x'+z`.
 95 |           // Ex: if the stored formula of A1 is "=A2+2", then we eval the string 'x=A2+2".
 96 |           // here, `A2` represents the value of the cell A2 which has been previously stored in `M`.
 97 |           // Indeed, if we consider the surrounding `with(M=Math)`, the string we execute is equivalent to 'x=M.A2+2'.
 98 |           // So, `x` contains the the saved value of `A2`, plus 2.
 99 |           // If A2 contains a number, it'll work instantly.
100 |           // But if A2 contains a formula (for example "=A3+8", and A3 contains "5"), A1's `x` will not get its value instantly.
101 |           // For the cell A1, the computed value of `x` will get a garbage value, but for A2, it will get computed fine as 5+8 = 13.
102 |           // By chance, there are many "eval" passes on the grid's cells, and at the second pass, A1 will be evaluated correctly:
103 |           // This time, 'x=M.A2+2' will now equal 'x=13+2' and `x` will contain the number 15.
104 |           eval('x' + z)
105 |           :
106 |           
107 |           // If `z` is not a formula (i.e. number or text), it's put it directly in x, as a string.
108 |           x = z
109 |         ],
110 |         
111 |         // Now it's time to decide what to store in `M[y]`:
112 |         // if (x-~x) is not truthy, it means that x is a string representing an integer or a float.
113 |         // We use this formula instead of "+x" to also support the number "0" (because "0"-~"0" == 1)
114 |         x - ~x ?
115 |         
116 |         // In this case, we store `+x` (similar to `parseFloat(x)`) in `M[y]`.
117 |         +x
118 |         
119 |         // Else, if `x` contains text:
120 |         :
121 |         
122 |         // We store that text in `M[y]`.
123 |         x
124 |       )
125 |       
126 |       // When a parenthesis contains many statements like here, all are executed, but only the last one is returned,
127 |       // That's why `M[y]=(..., x-~x?+x:x)` successfully stores `+x` or `x` in `M[y]`
128 |       
129 |     };
130 |   }
131 | }
132 | 
133 | // Finally, let's declare `l` as a shortcut for `localStorage`,
134 | // then call `o()` a first time with `l` as argument. `localStorage` is truthy, so `o` will draw the grid.
135 | // Then call `o()` a second time with the return of the first call as argument.
136 | // But `o()` returns `undefined`, so this time, all the cells are filled with the values stored in localStorage and all the formulae are evaluated.
137 | o(
138 |   o(
139 |     l = localStorage
140 |   )
141 | )
142 | 
143 | // The End
144 | 
145 | </script>


--------------------------------------------------------------------------------
/full.html:
--------------------------------------------------------------------------------
1 | <script>
2 | o=b=>{for(i in{}+o)with(M=Math)M[y='ABCD'[i%5]+-~(i/5%6)]=b?document.write(y&&i<30?`<input placeholder=${y} id=`+y:'<br',` onfocus=value=[l[id]] onblur=l[id]=value,o()>`):(self[y].value=[/^=/.test(z=l[y])?eval('x'+z):x=z],x-~x?+x:x)};o(o(l=localStorage))
3 | </script>
4 | 
5 | <style>
6 | html,body { overflow: hidden }
7 | </style>


--------------------------------------------------------------------------------
/headers.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /* Sheet */
 3 | with(M=Math)o=b=>{for(i in{}+o)(self[y=(C='-ABCD'[r=i%6])+(R=~~(i%35/6))]||o).value=[x=/^=/.test(z=i<35?b&&document.write(y?'<input id='+y:'<p',R&&r?` onfocus=value=[l[id]] onblur=l[id]=value,o()>`:' disabled>'):l[y])?eval('x'+z):R?r?z:R:C],M[y]=x-~x?+x:x};o(o(l=localStorage))
 4 | </script>
 5 | 
 6 | <style>
 7 | /* Optional styles */
 8 | input{border: 1px solid #999;padding: .5em;}
 9 | input[disabled]{text-align: center;background-color:#eee;}
10 | input:first-child[disabled]{text-align: right;}
11 | p{margin:0;}
12 | </style>
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <meta charset=utf-8>
 2 | <center style=font-family:arial>
 3 | <mark style="background:#fe5;padding: 3px;">Hello <b>Hacker News</b> and <b>r/Javascript!</b> Discover 100+ more golfed apps & games <a href="https://gist.github.com/xem/206db44adbdd09bac424">here!</a></mark>
 4 | <a href=//github.com/xem/sheet><img style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
 5 | <br>
 6 | <h1>Sheet</h1>
 7 | <h3>A 188b/253b spreadsheet app in HTML/JS</h3>
 8 | <br>
 9 | Inspired by <a href="http://aem1k.com/sheet/">aem1k.com/sheet</a> and <a href="http://jsfiddle.net/ondras/hYfN3/">this 30-line app</a>
10 | <br>
11 | Golfed by <a href=//xem.github.io>xem</a>, subzey, <a href=//p01.org>p01</a>, rlauck, <a href=//aem1k.com>aemkei</a>, odensc, mmastrac, <a href=//blog.jay.vg>corruptio</a>
12 | <br>
13 | More <a href="https://github.com/xem/ama/issues/14">backstory</a> (2015)
14 | <br>
15 | <br>
16 | <hr>
17 | <h2>Full (253b)</h2>
18 | <b>Features:</b>
19 | <br>
20 | <br>
21 | supports any value: texts, numbers, floats, and formulae. Ex: "=A1+8"
22 | <br>
23 | cells update in cascade, circular reference protection
24 | <br>
25 | implicit Math object. Ex: "=sqrt(A1)"
26 | <br>
27 | localStorage persistence
28 | <br>
29 | <br>
30 | <b>Source code:</b>
31 | <br>
32 | (<a href="https://github.com/xem/sheet/blob/gh-pages/full-commented.html">commented source code</a>)
33 | <br>
34 | <br>
35 | <pre style=text-align:left;font-family:courier;width:780px;margin:auto;background:#def;padding:15px;border-radius:10px>
36 | o=b=>{for(i in{}+o)with(M=Math)M[y='ABCD'[i%5]+-~(i/5%6)]=b?document.write(y&&
37 | i&lt;30?`&lt;input placeholder=${y} id=`+y:'&lt;br',` onfocus=value=[l[id]] onblur=l[id
38 | ]=value,o()>`):(top[y].value=[/^=/.test(z=l[y])?eval('x'+z):x=z],x-~x?+x:x)};o
39 | (o(l=localStorage))
40 | </pre>
41 | <br>
42 | <b>Demo:</b>
43 | <br>
44 | <br>
45 | <iframe style=transform:translateX(100px) src=full.html frameborder=0 width=800 height=200></iframe>
46 | <br>
47 | <br>
48 | <hr>
49 | <br>
50 | 
51 | 
52 | <h2>Minimal (188b)</h2>
53 | Supports numbers and formulae.
54 | <br>
55 | updates in cascade and prevents circular references.
56 | <br>
57 | <br>
58 | <b>Source code:</b>
59 | <br>
60 | (<a href="https://github.com/xem/sheet/blob/gh-pages/mini-commented.html">commented source code</a>)
61 | <br>
62 | <br>
63 | <pre style=text-align:left;font-family:courier;width:650px;margin:auto;background:#def;padding:15px;border-radius:10px>
64 | (o=v=>{for(i in z='&lt;input onblur=o[id]=value;o`.value` id=')y="
65 | ABCD"[i%5]+-~(i/5),v?eval(y+(v+o[y]).replace(/[A-Z]\d/g," +$&"+
66 | v)):document.write(y||'&lt;p ',z,y,' onfocus=value=[o[id]]>')})()
67 | </pre>
68 | <br>
69 | <b>Demo:</b>
70 | <br>
71 | <br>
72 | <iframe style=transform:translateX(50px) src=mini.html frameborder=0 width=800 height=350></iframe>
73 | 
74 | <br>
75 | <br>
76 | <hr>
77 | <br>
78 | <h2>Full with headers (277b)</h2>
79 | <br>
80 | <pre style=text-align:left;font-family:courier;width:720px;margin:auto;background:#def;padding:15px;border-radius:10px>
81 | with(M=Math)o=b=>{for(i in{}+o)(top[y=(C='-ABCD'[r=i%6])+(R=~~(i%35/6))]||
82 | o).value=[x=/^=/.test(z=i&lt;35?b&&document.write(y?'&lt;input id='+y:'&lt;p',R&&r?
83 | ` onfocus=value=[l[id]] onblur=l[id]=value,o()>`:' disabled>'):l[y])?eval(
84 | 'x'+z):R?r?z:R:C],M[y]=x-~x?+x:x};o(o(l=localStorage))
85 | </pre>
86 | <br>
87 | <iframe style=transform:translateX(0px) src=headers.html frameborder=0 width=800 height=350></iframe>
88 | 
89 | 
90 | <br>
91 | <br>
92 | © 2014-2017 <a href=//register.jsgolf.club>The Codegolf Team</a>
93 | <br>
94 | <br>
95 | <style>
96 | a { color: #000; }
97 | hr { width: 500px }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/mini-commented.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | // 188b JS spreadsheet
 4 | // ===================
 5 | 
 6 | // The function `o` has three different uses:
 7 | // - If it's called without any argument, it will draw a grid of 4 x 8 labels and cells.
 8 | // - If it's called with an argument, it will evaluate all the cells' raw values and update their content with the result of this evaluation.
 9 | // - It's also used as an object, where we store all the cells' raw values.
10 | // Each cell has two values: the raw value (a number of formula typed by the user) and the evaluated value (computed by the function `o`).
11 | // This script declares the function `o` and calls it immediately with no argument.
12 | (
13 |   o = v => {
14 |     
15 |     // The function `o` declares a string `z` with a length of 39 chars, and loops on all its characters using a loop var called `i`.
16 |     for(i in z = '<input onblur=o[id]=value;o`.value` id='){
17 |       
18 |       // In the loop, it declares a variable `y` representing the current cell's name ("A1", "B1", ..., "C8", "D8").
19 |       // The first char ("A", "B", "C" or "D") is picked from the string "ABCD", at the position `i % 5` (i modulo 5).
20 |       // The second char (the digit) is concatenated to the letter with the operaotr `+`. Its value is `-~(i / 5)`.
21 |       // `-~(i / 5)` is the opposite of the one's complement of `i / 5`, floored, which equals `Math.ceil(i / 5)` in our case.
22 |       // It helps us number our cells from 1 to 8, and not from 0 to 7, and ceils the decimal part of `i / 5` in the meantime.
23 |       // The 39-chars-long string `z` generates "only" 4 x 8 cells because after each group of 4 cells, an extra `y` is generated with the value `NaN`.
24 |       // Each input also has an `id` attribute equal to `y`, so we can easily get or set the value of A1 (for example) using `A1.value`.
25 |       y = "ABCD"[i % 5] + -~(i / 5),
26 |       
27 |       // Let's test if the argument `v` is set (as we will see later, when `v` is set, it contains the string ".value")...
28 |       v
29 |       
30 |       // If v is set, the following expression will be evaluated for each cell: `y + (v + o[y]).replace(/[A-Z]\d/g, " +$&" + v)`
31 |       // For example, let's evaluate the cell `A1`. (i.e. `y` equals "A1" and `o["A1"]` contains the cell's raw value):
32 |       //
33 |       // - if the cell is empty, the raw value `o["A1"]` is either "" (if the cell has already been emptied manually) or `undefined` (if it hasn't been visited yet).
34 |       //   So we will evaluate `A1 + (".value" + undefined).replace(/[A-Z]\d/g, " +$&" + ".value")`,
35 |       //   which will do nothing ("A1.valueundefined" fails silently, so the cell keeps its empty value).
36 |       //
37 |       // - if the cell contains a number (ex: 2), the raw value `o["A1"] is 2.
38 |       //   So we will evaluate `A1 + (".value" + 2).replace(/[A-Z]\d/g, " +$&" + ".value")`,
39 |       //   which will do nothing ("A1.value2" fails silently, so the cell keeps its raw value: 2).
40 |       //
41 |       // - if the cell contains a formula (ex: "=B1+2"), the raw value of `o["A1"] is "=B1+2".
42 |       //   So we will evaluate `A1 + (".value" + "=B1+2").replace(/[A-Z]\d/g, " +$&" + ".value")`,
43 |       //   which is the same as "A1.value= +B1.value+2",
44 |       //   which will compute the formula "+B1.value+2" and put the result in the cell A1. (nice: that's how we want the formulae to work).
45 |       //   The regex is used to replace each cell's id (capital letter + digit) found in the formula with the same value plus the string ".value".
46 |       //   The "+" ensures that B1's value is transformed into an integer.
47 |       //   The space ensures that the values of two cells can be added without JS bugs.
48 |       //   ex: "=B1+C1" becomes "= +B1.value+ +C1.value".If we removed the spaces, it wouldn't work anymore.
49 |       //
50 |       // Finally, when `y` is `NaN`,
51 |       // we will evaluate `NaN + (".value" + o[NaN]).replace(/[A-Z]\d/g, " +$&" + ".value")`,
52 |       // which will do nothing ("NaN.valueundefined" fails silently).
53 |       ?
54 |       eval(
55 |         y + (v + o[y]).replace(/[A-Z]\d/g, " +$&" + v)
56 |       )
57 |       
58 |       // If v is not set, we initialize the page, one cell at the time, based on the value of `y`:
59 |       // - if `y` is set (ex: 'A1'), we write `y, z, y, ' onfocus=value=[o[id]]>'`
60 |       //   which, after the concatenation of each part, becomes: "A1<input onblur=o[id]=value;o`.value` id=A1 onfocus=value=[o[id]]>"
61 |       //   as you can see, this string represents the cell's label followed by an input that has the id "A1" and two events:
62 |       //
63 |       //   * onblur=o[id]=value;o`.value` :
64 |       //     as soon as the cell loses focus,
65 |       //     this event will store the raw value of the cell (`this.value`) in `o[this.id]` (the two `this` can be omitted),
66 |       //     then call the function `o` with the argument `.value` (the parenthesis aren't required around template literal arguments)
67 |       //
68 |       //   * onfocus=value=[o[id]]
69 |       //     as soon as the cell is focused,
70 |       //     this event will put the raw value of the cell (`[o[this.id]]`) in `this.value` (to let the user see his original formula).
71 |       //     `o[this.id]` is surrounded by an array (`[]`) to avoid putting the string "undefined" in a focused empty cell.
72 |       //     the array `[undefined]` coerces into an empty string, which is what we want here (keep the empty cells empty).
73 |       //
74 |       // - if `y` is NaN, it will prepend "<p" instead of the label (thanks to the test `y || '<p '`)
75 |       //   This <p> tag will have garbage attributes (one called "<input", another `id="NaN"`, plus onblur and onfocus event listeners,
76 |       //   but none of these attributes will have any use whatsoever. The <p> tag is only used to start a new line.
77 |       :
78 |       document.write(
79 |         y || '<p ', z, y, ' onfocus=value=[o[id]]>'
80 |       )
81 |     }
82 |   }
83 | )()
84 | 
85 | </script>


--------------------------------------------------------------------------------
/mini.html:
--------------------------------------------------------------------------------
1 | <script>
2 | (o=v=>{for(i in z='<input onblur=o[id]=value;o`.value` id=')y="ABCD"[i%5]+-~(i/5),v?eval(y+(v+o[y]).replace(/[A-Z]\d/g," +$&"+v)):document.write(y||'<p ',z,y,' onfocus=value=[o[id]]>')})()
3 | </script>


--------------------------------------------------------------------------------