[{"data":1,"prerenderedAt":540},["ShallowReactive",2],{"project-4933608":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":47,"post_text":48,"what":49,"said":99,"maker_in_thread":272,"shape":275,"grid":279,"attempts":503,"same_week":504,"maker_shows":44,"maker_hidden":532,"reader_version":533,"card":534},"4933608","Scratchpad.io","a real-time HTML and CSS editor","title","Show HN: Scratchpad.io - a real-time HTML and CSS editor","http:\u002F\u002Fscratchpad.io","scratchpad.io","brycecolquitt",1355769752,2012,298,82,38,1677,3,"legend","dev_tools","web code playground","web_app",[24,25,26,27],"html editor","css playground","live preview","collaborative editor","mixed",0.165,{"positive":31,"neutral":32,"mixed":33,"critical":34},24,25,6,11,66,{"design":37,"docs":40,"execution":42,"performance":43,"idea":45},{"positive":38,"critical":39},5,4,{"positive":41,"critical":41},0,{"positive":33,"critical":18},{"positive":44,"critical":44},1,{"positive":46,"critical":18},9,[38,38,38,18,18,18,41,18,38,38,38,18,18,18,38,18,38,38,18,38,18,18,18,18,38,18,44,44,44,38,44,38,38,18,44,38,38,38,38,18],null,{"problem":50,"audience":58,"pricing":48,"motivation":72,"time_to_build":48,"stack":76,"openness":96,"stage":97,"team_size":98},{"value":51,"source":52,"evidence":53},"Seeing HTML and CSS changes live without switching between editor and browser","commenter",[54],{"id":55,"by":56,"text":57},"4934111","nbashaw","I wanted to reduce this: 1. Create a file 2. Open it in your text editor 3. Edit code 4. Switch to browser 5. Open up the file 6. Switch back to editor 7. Edit code 8. Hit save…",{"value":59,"source":52,"evidence":60},"Beginners learning HTML\u002FCSS and front-end developers prototyping or debugging",[61,65,69],{"id":62,"by":63,"text":64},"4933749","rjvir","For a first time coder, being able to see your page change live is very helpful in getting to learn HTML and CSS. This is an amazing complement to the book you are writing - nice…",{"id":66,"by":67,"text":68},"4934152","mixmastamyk","Great work. (love things that are \"clean\") ``` Press ⌘ + i to toggle fullscreen view ``` I don't have this key and suspect a lot of others don't either. ;)",{"id":70,"by":11,"text":71},"4933999","Thanks, but this was actually made by my friend Nathan Bashaw (nbashaw). I just submitted it because I think it's awesome :) I think the tool is great for a certain group of…",{"value":73,"source":52,"evidence":74},"Reduce the edit-save-refresh loop of local HTML files",[75],{"id":55,"by":56,"text":57},[77,83,90],{"value":78,"source":52,"evidence":79},"Ace editor",[80],{"id":81,"by":56,"text":82},"4933724","Thanks! It was actually really simple to make with two tools: http:\u002F\u002Face.ajax.org and http:\u002F\u002Fwww.firebase.com If you want to chat about building it I'd love to give you any tips…",{"value":84,"source":52,"evidence":85},"Firebase",[86,87],{"id":81,"by":56,"text":82},{"id":88,"by":56,"text":89},"4933800","Basically on keyup I ship the whole contents of the editor and the cursor position to firebase. I'm also keeping track of all the active connections to a scratchpad document so I…",{"value":91,"source":52,"evidence":92},"Sinatra",[93],{"id":94,"by":56,"text":95},"4933931","Thanks! I'll have to read up on OT. Our backend is totally hosted by Firebase, other than a simple Sinatra app that generates the unique IDs. When you say synchronizing cursors,…","unknown","launched","team",{"praise":100,"objections":133,"requests":172,"questions":226,"alternatives":241},[101,111,126],{"value":102,"source":52,"evidence":103},"No-click save and creation; custom URL paths are intuitive",[104,108],{"id":105,"by":106,"text":107},"4934054","arscan","Its a little thing, but i like how you literally don't need to click on any buttons to save \u002F create a new one \u002F etc. I also like how you can create your own customized path to…",{"id":109,"by":56,"text":110},"4934076","Thanks!! I really appreciate that. I also like the unique URL feature :)",{"value":112,"source":52,"evidence":113},"Clean, simple, dark-theme interface",[114,118,122],{"id":115,"by":116,"text":117},"4933735","geuis","Ok, this editor rocks. Nice use of Ace.js. One of my biggest frustrations with jsfiddle is the crappy coding area (not to mention the default selection of Mootools among others).",{"id":119,"by":120,"text":121},"4934781","zapt02","Very impressive. Love the dark color scheme. LESS\u002FSASS possible? :)",{"id":123,"by":124,"text":125},"4933684","danielfriedman","This is awesome! I constantly look for live editors but haven't found a good one for front-end. I tried Adobe Brackets, Firebug (for in-window editing) but all had their…",{"value":127,"source":52,"evidence":128},"Tab key inserts spaces without losing focus",[129],{"id":130,"by":131,"text":132},"4933709","bluetidepro","The first thing that I loved about this, that drives me crazy on other real-time online editors, is that pressing \"tab\" actually creates a tabbed space, and doesn't change the…",[134,149,161],{"value":135,"source":52,"evidence":136},"Too many similar tools already exist (JSFiddle, CodePen, Plunker, CSSDeck)",[137,141,145],{"id":138,"by":139,"text":140},"4933804","overshard","I don't wanna down a nice looking project, very well done on the interface but, another one? There are already like 7+ of these I don't really see the need to produce another one…",{"id":142,"by":143,"text":144},"4933941","quarterto","Not to detract from what is a pretty cool project, and I hope OP had fun making it, but: http:\u002F\u002Fcodepen.io is this and quite a bit more. It supports HTML+JS+CSS as well as e.g.…",{"id":146,"by":147,"text":148},"4936468","camus","plunker does have that : http:\u002F\u002Fplnkr.co",{"value":150,"source":52,"evidence":151},"Keyboard shortcut tip is Mac-specific",[152,153,157],{"id":66,"by":67,"text":68},{"id":154,"by":155,"text":156},"4933654","gailees","It'd be great if the command tip wasn't only for Mac btw",{"id":158,"by":159,"text":160},"4936975","Aardwolf","\"Press ⌘ + i to toggle fullscreen view\" What is this thing, I don't have such a key on my computer?",{"value":162,"source":52,"evidence":163},"Bugs in preview panel and editor line-height after navigation",[164,168],{"id":165,"by":166,"text":167},"4934695","mattlong","Very nice. Love the responsiveness and good use of (OS-aware?) keyboard shortcuts. Bug: (Chrome Version 23.0.1271.97 on OSX) Expand the side panel and select a document from the…",{"id":169,"by":170,"text":171},"4933934","sachleen","Pretty nice, I'll probably be using this for debugging and examples. Bug: Open the about panel by clicking the icon in top left (three horizontal bars). Close the panel by…",[173,185,196,207,215],{"value":174,"source":52,"evidence":175},"Open source the code",[176,177,181],{"id":130,"by":131,"text":132},{"id":178,"by":179,"text":180},"4933803","gbadman","Nicely done on Scratchpad. The interface seems to be the right combination of simple and intuitive. It would be great to see the source code as many others have said. I'm…",{"id":182,"by":183,"text":184},"4935503","dergachev","Thats awesome. Also looking at the source, I discovered it's using keymaster.js and firebase.js, which are new to me. And the implementation of scratchpad.io is very simple and…",{"value":186,"source":52,"evidence":187},"Support JavaScript",[188,192],{"id":189,"by":190,"text":191},"4935483","ewolfe","What would it take to implement javascript? Is it merely trivial, or was it left out for security?",{"id":193,"by":194,"text":195},"4933683","jakozaur","Have the realtime plus: http:\u002F\u002Fjsfiddle.net\u002F And you will rock! Right now, you are just awesome ;).",{"value":197,"source":52,"evidence":198},"Real-time collaboration with multiple cursors",[199,203],{"id":200,"by":201,"text":202},"4933843","anant","I think the key extra feature is that you can share what you're working on with someone else and have both people collaborate in real-time (i.e. changes on either end show up…",{"id":204,"by":205,"text":206},"4936054","dmor","I would love to be able to work in realtime (a la Etherpad) with someone else - would take pairing to a whole new level. Also, style management could quickly get messy - I know…",{"value":208,"source":52,"evidence":209},"LESS\u002FSASS support",[210,211],{"id":119,"by":120,"text":121},{"id":212,"by":213,"text":214},"4934454","ianstormtaylor","Yeah but it's nowhere near as nice to edit with. The textarea's are short, the content frame is short... I think this is a case where simplicity wins out. SASS would be a cool…",{"value":216,"source":52,"evidence":217},"Resizable editor panes",[218,222],{"id":219,"by":220,"text":221},"4934749","hybrid11","Really cool, kinda like brackets.io, but online! Is there anyway to make the text editor pane resizeable?",{"id":223,"by":224,"text":225},"4935053","pjrvs","i wish i could adjust the width of the code section. otherwise it's pretty neat.",[227,234],{"value":228,"source":52,"evidence":229},"How real-time syncing is implemented",[230,233],{"id":231,"by":179,"text":232},"4933739","How did you accomplish the real-time text editing? Is there any OT engine that you hacked into Firebase?",{"id":178,"by":179,"text":180},{"value":235,"source":52,"evidence":236},"Whether private projects will be supported",[237],{"id":238,"by":239,"text":240},"4935171","iamhenry","Will you be able to make new projects and make them private?",[242,247,251,258,265],{"value":243,"source":52,"evidence":244},"JSFiddle",[245,246],{"id":138,"by":139,"text":140},{"id":193,"by":194,"text":195},{"value":248,"source":52,"evidence":249},"CodePen",[250],{"id":142,"by":143,"text":144},{"value":252,"source":52,"evidence":253},"Plunker",[254,257],{"id":255,"by":179,"text":256},"4933745","Just so happen to have a solution for you: http:\u002F\u002Fplnkr.co\u002Fedit\u002F?p=streamer DEMO: http:\u002F\u002Fplnkr.co\u002Fedit\u002F?p=preview&s=HN4933608",{"id":146,"by":147,"text":148},{"value":259,"source":52,"evidence":260},"CodeKit",[261],{"id":262,"by":263,"text":264},"4933796","pxlpshr","This is really great, especially as a compliment to the learning tools coming to market. For front-end designers looking for a similar effect within your own text editor and…",{"value":266,"source":52,"evidence":267},"CodeMirror preview",[268],{"id":269,"by":270,"text":271},"4935318","ph0rcyas","How is this different from codemirror? Codemirror's preview utility easily handles this (and much more versatile in other ways): ``` http:\u002F\u002Fcodemirror.net\u002F…",{"comments":44,"answered":41,"key":273},[274],{"id":70,"text":71},{"commenters":276,"max_depth":277,"maker_replies":44,"first_comment_mins":33,"lifespan_hours":278},58,7,46,[280,282,284,286,290,292,294,295,296,298,299,303,306,310,314,316,321,325,326,328,330,333,334,337,338,342,344,346,347,349,352,355,356,359,362,366,369,372,374,376,378,380,382,383,386,389,394,396,398,400,404,406,408,412,416,419,421,424,426,430,431,436,441,446,449,453,457,459,462,464,466,468,470,472,474,478,481,485,489,493,495,499],[105,41,38,281,106,41],"project\u002Fpositive\u002Fdesign",[109,41,41,283,56,41],"commenter\u002Fpositive\u002Fnone",[285,41,38,281,106,41],"4934144",[287,41,18,288,289,41],"4935673","project\u002Fneutral\u002Fdocs","chacham15",[130,44,38,291,131,41],"project\u002Fpositive\u002Fexecution",[81,44,18,293,56,41],"maker\u002Fneutral\u002Fexecution",[231,44,18,293,179,41],[88,44,18,293,56,41],[297,44,18,293,179,41],"4933844",[94,44,18,293,56,41],[300,44,18,301,302,41],"4933881","maker\u002Fneutral\u002Fperformance","michaelbuckbee",[304,44,41,305,56,41],"4933904","commenter\u002Fneutral\u002Fperformance",[307,44,41,308,309,41],"4933956","other\u002Fneutral\u002Fperformance","gsoltis",[311,44,41,312,313,41],"4936361","other\u002Fneutral\u002Fnone","daemon13",[315,44,18,293,179,41],"4933960",[317,318,18,319,320,41],"4935940",2,"project\u002Fneutral\u002Fexecution","meric",[322,318,41,323,324,41],"4936380","commenter\u002Fneutral\u002Fnone","laughinghan",[182,18,38,291,183,41],[62,39,38,327,63,41],"project\u002Fpositive\u002Fidea",[329,38,38,327,155,41],"4933647",[331,38,18,332,56,41],"4933662","maker\u002Fneutral\u002Fnone",[115,33,38,281,116,41],[335,33,18,336,56,41],"4933747","maker\u002Fneutral\u002Fdesign",[262,277,41,312,263,41],[339,340,41,323,341,41],"4934011",8,"robot",[343,340,18,332,56,41],"4934020",[138,46,44,345,139,41],"project\u002Fcritical\u002Fidea",[200,46,38,327,201,41],[146,46,41,348,147,41],"other\u002Fneutral\u002Fidea",[350,46,38,327,351,41],"4933950","mnicole",[193,353,18,354,194,41],10,"project\u002Fmixed\u002Fidea",[255,353,41,312,179,41],[357,34,38,327,358,41],"4933665","randylubin",[360,34,41,361,155,41],"4933694","commenter\u002Fpositive\u002Fidea",[363,364,38,327,365,41],"4933864",12,"mahmoudimus",[367,364,41,348,368,41],"4934311","martinced",[66,370,18,371,67,41],13,"project\u002Fmixed\u002Fdesign",[373,370,18,336,56,41],"4934167",[123,375,38,327,124,41],14,[377,375,41,312,179,41],"4933755",[142,379,18,354,143,41],15,[70,379,41,381,11,44],"maker\u002Fneutral\u002Fidea",[212,379,18,371,213,41],[165,384,44,385,166,41],16,"project\u002Fcritical\u002Fexecution",[387,384,38,388,56,41],"4934725","maker\u002Fpositive\u002Fexecution",[390,391,18,392,393,41],"4935577",17,"project\u002Fmixed\u002Fexecution","scott_karana",[395,391,18,293,56,41],"4935726",[169,397,44,385,170,41],18,[399,397,38,388,56,41],"4933939",[401,402,38,327,403,41],"4933779",19,"kurtfunai",[204,405,18,354,205,41],20,[178,407,18,319,179,41],21,[409,410,41,348,411,41],"4934143",22,"mrmirz",[413,414,44,385,415,41],"4933716",23,"tomasien",[417,31,41,348,418,41],"4936956","edwinyzh",[158,32,44,420,159,41],"project\u002Fcritical\u002Fdesign",[422,32,44,420,423,41],"4937079","Ecio78",[269,425,44,345,270,41],26,[427,428,44,345,429,41],"4934084",27,"ams6110",[55,428,38,327,56,41],[432,433,38,434,435,41],"4934090",28,"project\u002Fpositive\u002Fperformance","JimmaDaRustla",[437,438,44,439,440,41],"4937357",29,"project\u002Fcritical\u002Fperformance","stuaxo",[442,443,18,444,445,41],"4935849",30,"project\u002Fneutral\u002Fidea","aleem",[447,443,41,312,448,41],"4936311","jameswyse",[450,451,38,291,452,41],"4935430",31,"chaselee",[454,455,38,281,456,41],"4936646",32,"joebeetee",[189,458,18,444,190,41],33,[219,460,18,461,220,41],34,"project\u002Fneutral\u002Fdesign",[463,460,18,336,56,41],"4934764",[238,465,18,444,239,41],35,[154,467,44,420,155,41],36,[469,467,18,336,56,41],"4933668",[119,471,38,281,120,41],37,[473,471,18,381,56,41],"4934804",[475,16,38,476,477,41],"4934191","project\u002Fpositive\u002Fnone","schpet",[479,16,38,480,56,41],"4934209","maker\u002Fpositive\u002Fnone",[482,483,18,444,484,41],"4935119",39,"path411",[486,487,18,444,488,41],"4936689",40,"anuaitt",[490,491,38,388,492,41],"4933691",41,"kine",[223,494,44,420,224,41],42,[496,497,18,444,498,41],"4933945",43,"matt_",[500,501,38,476,502,41],"4943418",44,"orlandob",[],[505,509,514,519,523,528],{"id":506,"name":507,"points":508,"category":20},"4916266","roots",195,{"id":510,"name":511,"points":512,"category":513},"4916929","Coding for Interviews",117,"learning_science",{"id":515,"name":516,"points":517,"category":518},"4932829","Wifis.org",103,"web_saas",{"id":520,"name":521,"points":522,"category":518},"4934106","Teelaunch",83,{"id":524,"name":525,"points":526,"category":527},"4945189","Firefeed",81,"languages",{"id":529,"name":530,"points":531,"category":513},"4943589","CourseCraft",62,false,"v2",{"id":535,"name":5,"line":6,"ai":532,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":536,"top":18,"kw":537,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":538,"url":9,"mix":539,"praise":102,"objection":135,"sub":21},4933608,0.17,[24,25,26,27],"5553330355533353553533335311151553155553",[31,32,33,34],1793990888877]