[{"data":1,"prerenderedAt":293},["ShallowReactive",2],{"project-13042445":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":41,"post_text":43,"what":44,"said":72,"maker_in_thread":162,"shape":172,"grid":176,"attempts":256,"same_week":257,"maker_shows":32,"maker_hidden":285,"reader_version":286,"card":287},"13042445","Alter","convert text\u002Fcode to an image","title","Show HN: Alter – convert text\u002Fcode to an image","http:\u002F\u002Falter.cf","alter.cf","kbr",1480147661,2016,76,34,504,2264,23,"notable","dev_tools","code to image converter","web_app",[24,25,26,27],"code to image","text to image","code screenshot","tweet code","mixed",-0.143,{"positive":31,"neutral":32,"mixed":33,"critical":34},2,7,3,5,17,{"execution":37,"idea":39,"design":40},{"positive":38,"critical":33},0,{"positive":38,"critical":31},{"positive":38,"critical":38},[42,38,33,33,38,38,42,38,38,42,38,38,38,33,38,34,38,38,34,38,42,38,33,38,33,33,33,42,38,33,33,38,33,38],1,null,{"problem":45,"audience":43,"pricing":43,"motivation":52,"time_to_build":43,"stack":56,"openness":69,"stage":70,"team_size":71},{"value":46,"source":47,"evidence":48},"Tweeting code snippets that are over 140 characters and need formatting.","maker",[49],{"id":50,"by":11,"text":51},"13044526","Well, I mainly made this after seeing people on Twitter tweet out code perfectly formatted and highlighted, but it's just a screenshot of their text editor. So basically, the…",{"value":53,"source":47,"evidence":54},"Saw people tweeting formatted code screenshots and wanted to make it easier.",[55],{"id":50,"by":11,"text":51},[57,63],{"value":58,"source":47,"evidence":59},"JavaScript (vanilla)",[60],{"id":61,"by":11,"text":62},"13044573","Haha, I agree, it's pretty small. If you look at my other projects, I \u003C3 vanilla js.",{"value":64,"source":47,"evidence":65},"HTML5 canvas",[66],{"id":67,"by":11,"text":68},"13044466","Thank you so much! I'm not the best at HTML5 canvas, more of front end. (I'm also 13). I'll iterate through the array instead. If you have any other suggestions, the repo is at…","open_source","prototype","solo",{"praise":73,"objections":101,"requests":124,"questions":141,"alternatives":150},[74,90],{"value":75,"source":76,"evidence":77},"Clean, simple execution and nice looking output.","commenter",[78,82,86],{"id":79,"by":80,"text":81},"13042702","yorwba","I looked at the code. ``` var lineLengthOrder = lines.slice(0).sort(function(a, b) { return b.length - a.length; }); ctx.canvas.width = ctx.measureText(lineLengthOrder[0]).width…",{"id":83,"by":84,"text":85},"13042647","vog","> What is this useful for? I suspect it may be used to enforce custom fonts in an old-fashioned way, but nowadays you would simply deliver the font with you site, or use a font…",{"id":87,"by":88,"text":89},"13044152","jupiter2","> Either way, it's a nice project with a good execution! I agree. Very quick too. I tried it with some ascii art and it makes the overall image a bit thinner, though:( (not…",{"value":91,"source":76,"evidence":92},"Impressive that the maker is 13 years old.",[93,97],{"id":94,"by":95,"text":96},"13045062","samstave","Dude - you're 13? You're awesome! Keep at it!",{"id":98,"by":99,"text":100},"13045375","ronreiter","The best part about this post is that the author is 13 years old. You are going to have an amazing career. I started programming around your age too. Trust me, it helps :)",[102,113,117],{"value":103,"source":76,"evidence":104},"Width is measured by character count, so wide and CJK characters break the longest-line sizing.",[105,106,110],{"id":79,"by":80,"text":81},{"id":107,"by":108,"text":109},"13043450","luchs","Here's an example where it's broken: https:\u002F\u002Fi.imgur.com\u002FugVBCJL.png",{"id":111,"by":11,"text":112},"13044563","Yes, I'm working on this. The problem is that it finds the longest line, by the number of characters in it. Instead of taking the actual width.",{"value":114,"source":76,"evidence":115},"Spaces and thin ASCII art render poorly.",[116],{"id":87,"by":88,"text":89},{"value":118,"source":76,"evidence":119},"Too small to be a real project; it is a single function.",[120],{"id":121,"by":122,"text":123},"13043399","imafish","Cmon - don't call this a project. It is a single function. However, I like how OP realized that vanilla js was the correct choice for a simple job.",[125,131,137],{"value":126,"source":47,"evidence":127},"Custom fonts and colors.",[128],{"id":129,"by":11,"text":130},"13044490","Thanks, features to change font and color will be added soon, this is just a little concept :)",{"value":132,"source":76,"evidence":133},"Transparent background.",[134],{"id":135,"by":88,"text":136},"13045616","This is great news. I can understand wanting to keep this as simple as possible but... if you decide to add any features: 1. Transparent Background (and) 2. Choice of character…",{"value":138,"source":76,"evidence":139},"Choice of character color.",[140],{"id":135,"by":88,"text":136},[142],{"value":143,"source":76,"evidence":144},"What is it useful for?",[145,149],{"id":146,"by":147,"text":148},"13042582","anewhnaccount","data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAAeCAYAAACIcRPUAAAMLklEQVR4Xu2aB6wVRRSGDx3pRXrnUZUu0juE3jEQgUAghA6KSJGi9N57AKW3ECABJBQFUbDQCR1CFxClg\u002FRivknmZd++ve\u002FuLvf6gMxJCMrdn…",{"id":83,"by":84,"text":85},[151,155],{"value":152,"source":47,"evidence":153},"Screenshots from a text editor.",[154],{"id":50,"by":11,"text":51},{"value":156,"source":76,"evidence":157},"Labelmaker-style image generators.",[158],{"id":159,"by":160,"text":161},"13043459","_paulc","http:\u002F\u002Facme.com\u002Flabelmaker\u002F",{"comments":163,"answered":31,"key":164},8,[165,168,169],{"id":166,"text":167},"13044476","Would it be a bit better if I go through each line and instead of getting the length, get the actual width of it?",{"id":67,"text":68},{"id":170,"text":171},"13045437","Thanks :D",{"commenters":173,"max_depth":34,"maker_replies":163,"first_comment_mins":174,"lifespan_hours":175},22,39,15,[177,179,183,187,190,192,196,200,203,205,206,208,210,213,216,218,219,220,223,224,226,230,232,236,238,240,241,244,245,247,250,252,253,254],[79,38,42,178,80,38],"maker\u002Fcritical\u002Fexecution",[180,38,38,181,182,38],"13042729","commenter\u002Fneutral\u002Fnone","nkkollaw",[184,38,33,185,186,38],"13043054","project\u002Fneutral\u002Fexecution","gumoro",[188,38,33,185,189,38],"13043060","nunull",[191,38,38,181,186,38],"13043079",[193,38,38,194,195,38],"13045275","commenter\u002Fneutral\u002Fexecution","paradite",[197,38,42,198,199,38],"13042995","project\u002Fcritical\u002Fexecution","zo1",[201,38,38,181,202,38],"13043081","sanxiyn",[204,38,38,181,199,38],"13046343",[107,38,42,198,108,38],[166,38,38,207,11,42],"maker\u002Fneutral\u002Fexecution",[209,38,38,194,189,38],"13043057",[211,38,38,194,212,38],"13043397","ola",[214,38,33,185,215,38],"13043424","madflame991",[67,38,38,217,11,42],"maker\u002Fpositive\u002Fnone",[94,38,34,217,95,38],[170,38,38,217,11,42],[221,38,38,194,222,38],"13045888","bbcbasic",[98,42,34,217,99,38],[225,42,38,217,11,42],"13045440",[227,31,42,228,229,38],"13045070","project\u002Fcritical\u002Fidea","tarboreus",[159,33,38,231,160,38],"other\u002Fneutral\u002Fnone",[233,234,33,235,182,38],"13042727",4,"project\u002Fmixed\u002Fidea",[129,234,38,237,11,42],"maker\u002Fneutral\u002Fdesign",[146,34,33,239,147,38],"project\u002Fneutral\u002Fidea",[83,34,33,235,84,38],[242,34,33,239,243,38],"13042815","sliken",[121,34,42,228,122,38],[61,34,38,246,11,42],"maker\u002Fneutral\u002Fnone",[248,34,33,239,249,38],"13043837","tyingq",[87,34,33,251,88,38],"project\u002Fmixed\u002Fexecution",[111,34,38,207,11,42],[135,34,33,237,88,38],[50,34,38,255,11,42],"maker\u002Fneutral\u002Fidea",[],[258,262,267,271,276,281],{"id":259,"name":260,"points":261,"category":20},"13031492","CSS Reference",1117,{"id":263,"name":264,"points":265,"category":266},"13030603","Dply",673,"infrastructure",{"id":268,"name":269,"points":270,"category":20},"13053137","Antd",507,{"id":272,"name":273,"points":274,"category":275},"13056678","React Native Express",496,"learning_science",{"id":277,"name":278,"points":279,"category":280},"13065670","Anycomplete",390,"productivity",{"id":282,"name":283,"points":284,"category":266},"13048334","Migadu",336,false,"v2",{"id":288,"name":5,"line":6,"ai":285,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":289,"top":18,"kw":290,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":291,"url":9,"mix":292,"praise":75,"objection":103,"sub":21},13042445,-0.14,[24,25,26,27],"1033001001000305005010303331033030",[31,32,33,34],1793990950688]