10 ms·
A 220b spreadsheet app in HTML/JS
- HumanDrivenDev 9y agoAwesome Job. Looks like it was an iterative effort https://github.com/xem/ama/issues/14 https://github.com/xem/ama/issues/14
- datpuz 9y agoWhy
- czechdeveloper 9y agoBecause it's cool example how to make something semi-complex and interesting in very short code?
- onion2k 9y agoFun
- KGIII 9y agoIf it is like many other such projects, just to say they did it. Why climb Everest? Why play a video game on the hardest setting? Why learn to write Hello World in the top 100 programming languages? I can't say I wrote a spreadsheet in 220b. They can. Maybe the question is, "Why not?" It is Hacker News, after all.
- weavie 9y agoOur accounts department can save a fortune on MS Office licenses..
- ubersoldat2k7 9y agoDoesn't work with decimals.
- HumanDrivenDev 9y agoYou're right. I'm re-installing Excel and giving this a negative review on the app store!
- adtac 9y agoPlease. It won't even pass Apple's strict standards. Everyone knows your app has to be 50MB in size.
- xem 9y agoIt does work, but you need to use dots, not commas. Ex: A1 => "4.5" A2 => "=A1+2"
- mbertschler 9y agoYet our browsers blow the page up to 100 or 1000 times that.
- lifthrasiir 9y agoProbably you should first consider that our browsers contain a fully capable programming system which this golfed program abuses as an expression evaluator. :-) By comparison, this C program [1] (hints are at [2]) is a stripped down spreadsheet program for X, and it only has an RPN evaluator (probably to make a room for graphing features?). [1] http://www.ioccc.org/2000/jarijyrki.c http://www.ioccc.org/2000/jarijyrki.c [2] http://www.ioccc.org/2000/jarijyrki.hint http://www.ioccc.org/2000/jarijyrki.hint
- vidarh 9y agoHilariously Chrome offers to pass the c code through Google Translate (with predictably useless results)
- dannyw 9y agoLanguage detection works on language trigrams, and are trained on human language. I bet punctuation is stripped during preprocessing. So it's not surprising that code will have false positives.
- vidarh 9y agoNot surprising, but still funny when applied to obfuscated code.
- deleted 9y ago[deleted]
- ajnin 9y agoAmusingly it detects that the code for the RPN calculator is in Polish. Maybe it's smarter than it seems.
- warent 9y agoJudging by some of the comments one can regularly find on HN about the size of apps, this may be considered a pinnacle internet technology to be standardized mainstream Tongue in cheek aside, very creative code. Thank you for sharing
- debacle 9y agoThere's intrinsic value in doing more with less, especially when it comes to the malleability of code.
- MosheZada 9y ago=1;alert("Hi")
- huhtenberg 9y agoWow. You must be a hacker or something.
- blauditore 9y agoYou don't need that, just `=alert('Hi')` is enough.
- quickthrower2 9y ago=alert(A1) is more "useful" though. The cool thing is you could code some extra features or an entire SPA inside the spreadsheet. Better than XL.
- junke 9y agoOr try to put circular references. A1: 0 A2: =A1+5 A1: =A2*3 If you click on other cells, the values keep increasing. Otherwise, it eventually gives NaN. If you change the steps and first initialize A2, then it converges to NaN immediately.
- diminish 9y agoOmnipotent version: press F12, open console and type alert("Hi") and press Enter.
- adamjc 9y agoWell, yes. You can see in the source provided it's just running `eval` on the contents of the cell
- jlebrech 9y agoyes hack yourself. bravo :) I guess you would have to sanitize when you save and/or load the spreadsheet
- 9y ago
- speps 9y agoFits in a tweet!
- kreetx 9y ago.. and hence can be deploy on Twitter :)
- xem 9y agoHello World, I'm xem, author of this mini app, but standing on the shoulders of giants: it's inspired by http://aem1k.com/sheet/ http://aem1k.com/sheet/ which was inspired by http://jsfiddle.net/ondras/hYfN3/ http://jsfiddle.net/ondras/hYfN3/ Cheers to all the JS codegolf team who teached me this noble art and continue to learn new tricks everyday with me! You can find a list of all our mini apps here: https://gist.github.com/xem/206db44adbdd09bac424 https://gist.github.com/xem/206db44adbdd09bac424
- tombh 9y agoThere's a nice comment from the author in an AMA about how this project contained one of his best coding moments: https://github.com/xem/ama/issues/14#issuecomment-123275496 https://github.com/xem/ama/issues/14#issuecomment-123275496
- xem 9y agoThanks for mentioning/enjoying it :)
- patanja 9y agoasdsaa
- zestyping 9y agoInitially, I wa puzzled by how the grid could be showing placeholders (the grey "A1", "A2", etc.) when there's no placeholder attribute defined in the source code. Then I discovered that the code running in the demo is not actually the showcased 220-byte source code at all. The code is still impressively small, but you should fix this — it's misleading as is.
- aidos 9y agoI think that's probably just because it's been revised and the placeholders were added after. To be fair, it only adds an extra 18 chars, taking it up to 238-byte in size. EDIT Here it is once you add the extra property: (o=b=>{for(j in a)for(i in a)y=a[i]+-~j,b?document.write([["<p>"][i]]+"<input onfocus=value=[o[id]] onblur=o[id]=value;o() id="+y+" placeholder="+y+">"):eval(y+(".value"+o[y]).replace(/[A-Z]\d/g," +$&.value"))})(a="ABCD")
- jahnu 9y agoI'm more concerned with the use of the symbol `b` to denote bytes instead of `B` :)
- abainbridge 9y agoYeah. A 220 bit spreadsheet would be impressive. Particularly the achievement of the source length not being a whole number of bytes.
- dheera 9y agoIf you include start and stop bits it works out.
- xem 9y agoYeah, sorry for the confusion. The placeholders and the compact style (no gutters) were added in the homepage for puerly aesthetic purposes, but these things take a lot of bytes without really adding functionnality, so we decided to not count them in the most golfed code. You can see a version with labels and localStorage persistence at the bottom of the page though. But thanks for your edit!
- patanja 9y agowow. thats what I was looking for
- thinbeige 9y agoSuper impressive and I love code-golfing but the title is slighlty misleading since the HTML part of the app, the cells, seem not to be included in the 220b. Still great.
- xem 9y agoI think I see what you're meaning, but this code actually generates all the cells (<input onfocus=... onblur=... id=...>). You can execute it in a JS console and it'll work fine.
- murftown 9y agoIf, like me, you're trying to figure out how this works, I've expanded it here to make it more readable: https://pastebin.com/1c72BYK1 https://pastebin.com/1c72BYK1
- xem 9y agoHey, thanks! Would you like me to write a commented version of that code? A lot of black magic is still hidden in every line :)
- sandGorgon 9y agoThat would be awesome!
- sparaker 9y agoI learned the neat trick of -~ Thanks!
- zichy 9y agoReminds me of the HTML-only MTG life counter I made: http://zichy.de/public/counter.html http://zichy.de/public/counter.html (437b)
- amelius 9y agoDidn't know minimizers were this good today ;) Well done!
- projectant 9y agoI'm concerned about the lack of type annotations. What about XSS prevention? Maintainability? An API? How are people supposed to use this code in future projects? Your variable names don't conform to Code Complete. This code smells funny. Haven't you read clean code? And I don't think it's general enough. What if people want to add columns, but preserve formulas? What made you think you shouldn't use React for this? At least Vue, come on. ah, if only we could all code just what we needed, instead of over-engineering solutions to problems we wished we had
- michaelwu 9y agoAll of the things you mentioned are best practices when building something that you want other people to use in production. The author was trying to build this with the absolute minimum amount of code as an exercise so I don't think any of your comments here apply.
- vidarh 9y agoI think the last line makes it relatively clear that the preceding statements were meant as a joke.
- oddlyaromatic 9y agoThis seems to be code golf, which would answer most of these questions I think. Maybe I'm missing some sarcasm in your comment, it's early!
- xem 9y agoI'll take his comment as a joking sarcasm anyway.
- oddlyaromatic 9y agoYes! It's confusing seeing as it is the top comment but clearly everybody gets it and appreciated the joke. It's perhaps just too chillingly accurate ;).
- spectaclepiece 9y agoYesterday I was blown away by both tetris and snake golfed out to this degree and now this. I feel like this is the modern reincarnation of obfuscated c. Can somebody explain to me how: "a[i]+-~j" is the same as "a[i]+(j+1)" ?
- Arnavion 9y ago>Can somebody explain to me how: "a[i]+-~j" is the same as "a[i]+(j+1)" ? -(~j) = Twos complement of the ones complement of j Twos complement = ones complement + 1 So twos complement of (ones complement of j) = ones complement of (ones complement of j) + 1 = j + 1
- fabxl 9y agoThe bad part of eval: insert `;alert("test")` in a used cell by a formula.
- odensc 9y agoIf we're using ES2015, why not save a byte? <script>(o=b=>{for(j in a)for(i in a)y=a[i]+-~j,b?document.write([["<p>"][i]]+`<input onfocus=value=[o[id]] onblur=o[id]=value;o() id=${y}>`):eval(y+(".value"+o[y]).replace(/[A-Z]\d/g," +$&.value"))})(a="ABCD")</script>
- xem 9y agoof course! Thanks, I'm adding this enhancement on github!
- corruptio 9y agoHere's another char off: (o=b=>{for(j in a)for(i in a)y=a[i]+j,b?document.write(`<${i*j?'input':'p'} onfocus=value=[o[id]] onblur=o[id]=value;o() id=${y}>`):eval(y+(".value"+o[y]).replace(/[A-Z]\d/g," +$&.value"))})(a="_ABCD")
- tcper 9y agoGreat app!
- aaln 9y agoThis is awesome, are you planning to add more features like complex functions that are minimally sized?
- xem 9y agoWell, it's a 3 years old app, and we like it in this "minimal" form. We've made a lot of other mini apps, tools and games though, you can find the link on top of xem.github.io/sheet
- 52-6F-62 9y agoI was wondering and wondering why it wasn't working for me. Colons break the script. I tried to write "TOTAL:" in a cell and none of the equations would resolve. I wanted in on the fun and I didn't get it until I relented and checked the console. :P Pretty fun, though
- leni536 9y agoReminds me of an IOCCC entry. http://www0.us.ioccc.org/years.html#2000_jarijyrki http://www0.us.ioccc.org/years.html#2000_jarijyrki
- darth_mastah 9y agoI hate to say that, but I just seem to have broken it. Here's how: I put 0.1 in A1, 0.2 in A2 and =A1+A2 in B1. Now B1 displays "=A1+A2" instead of the result.
- icantrank 9y agoaint nobody wana write caps tho
- repler 9y agoAnd you didn't need a dozen node.js modules!! Amazing!!