[{"data":1,"prerenderedAt":502},["ShallowReactive",2],{"project-20094866":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":34,"aspects":35,"strip":45,"post_text":47,"what":48,"said":81,"maker_in_thread":181,"shape":193,"grid":197,"attempts":464,"same_week":465,"maker_shows":195,"maker_hidden":494,"reader_version":495,"card":496},"20094866","html_wysiwyg","This page is a truly naked, brutalist HTML quine","title","Show HN: This page is a truly naked, brutalist HTML quine","https:\u002F\u002Fsecretgeek.github.io\u002Fhtml_wysiwyg\u002Fhtml.html","secretgeek.github.io","LeonB",1559655515,2019,633,94,17,2195,1,"legend","dev_tools","html and css teaching demo","web_app",[24,25,26,27],"html quine","css pseudo elements","html source view","brutalist web","mixed",0.333,{"positive":31,"neutral":16,"mixed":32,"critical":33},20,2,5,44,{"idea":36,"design":38,"performance":40,"execution":42,"docs":43,"privacy":44},{"positive":37,"critical":18},9,{"positive":39,"critical":18},4,{"positive":18,"critical":41},0,{"positive":18,"critical":32},{"positive":41,"critical":41},{"positive":41,"critical":18},[46,41,33,33,33,39,41,46,41,33,46,33,46,46,18,46,33,33,46,41,46,41,33,33,33,46,33,33,39,46,41,41,41,33,41,41,41,41,46,18],3,null,{"problem":49,"audience":61,"pricing":47,"motivation":47,"time_to_build":47,"stack":69,"openness":78,"stage":79,"team_size":80},{"value":50,"source":51,"evidence":52},"Shows the raw structure of an HTML page by rendering all tags visibly, with the page producing its own source","inferred",[53,57],{"id":54,"by":55,"text":56},"20102581","blauditore","Wow, I didn't know this was possible: The main trick lies in ``` * { display: block; } ``` making literally every element visible (including stuff like \u003Chead> or \u003Cscript>). The…",{"id":58,"by":59,"text":60},"20100351","acdw","This stylesheet would be a really great one to write an HTML\u002FCSS primer in, since it exposes everything -- like a \"You, too, can write HTML!\"",{"value":62,"source":51,"evidence":63},"Web developers and people learning HTML and CSS",[64,65],{"id":58,"by":59,"text":60},{"id":66,"by":67,"text":68},"20103929","nkrisc","It's kind of like the invisible man. Here's how everything works. Might be a great way to see that webpages aren't magic interfaces, but built on relatively simple rules.",[70,74],{"value":71,"source":51,"evidence":72},"HTML",[73],{"id":54,"by":55,"text":56},{"value":75,"source":51,"evidence":76},"CSS",[77],{"id":54,"by":55,"text":56},"open_source","launched","unknown",{"praise":82,"objections":109,"requests":132,"questions":144,"alternatives":162},[83,94],{"value":84,"source":85,"evidence":86},"Clever idea that teaches how HTML and CSS work","commenter",[87,88,89,90],{"id":58,"by":59,"text":60},{"id":66,"by":67,"text":68},{"id":54,"by":55,"text":56},{"id":91,"by":92,"text":93},"20103765","JasonFruit","This is the first time I've seen something that calls itself a \"brutalist\" web page actually expose its structure, the way I understand brutalism. It also reminded me of reading…",{"value":95,"source":85,"evidence":96},"Readable and fun to explore",[97,101,105],{"id":98,"by":99,"text":100},"20101539","apatters","This is more readable than many news websites I've come across",{"id":102,"by":103,"text":104},"20102442","p4bl0","This is so cool. Simple and fun. Thanks for sharing!",{"id":106,"by":107,"text":108},"20109590","stefek99","Brutally beautiful.",[110,125],{"value":111,"source":85,"evidence":112},"Tags cannot be selected or found with ctrl+f because they are CSS pseudo-elements",[113,117,121],{"id":114,"by":115,"text":116},"20094919","vectorEQ","even though the source is visible, the tags are unselectable. adding that would make it perfect imho. just heard about quines the other day so pretty cool to see one :D good…",{"id":118,"by":119,"text":120},"20100718","coreymatyas","CSS spec says no, unfortunately. Pseudo-elements aren't part of the DOM and thus can't be selected by any means.",{"id":122,"by":123,"text":124},"20104295","collinmanderson","I also noticed that ctrl+f doesn't find search that text either.",{"value":126,"source":85,"evidence":127},"Not really brutalist in style",[128],{"id":129,"by":130,"text":131},"20102485","krapp","It's nice... but it's kind of the opposite of brutalist style. If you really want to serve a \"brutalist\" HTML page easily, just send it with text headers.",[133,137],{"value":134,"source":85,"evidence":135},"Make the tags selectable",[136],{"id":114,"by":115,"text":116},{"value":138,"source":85,"evidence":139},"Show the actual HTML source link instead of GitHub",[140],{"id":141,"by":142,"text":143},"20098897","BaraBatman","I was hoping that the last link to the source code would open the actual HTML source code (instead of the link to github), just to show how it is exactly the same as the page",[145,155],{"value":146,"source":85,"evidence":147},"Why do empty lines appear in the output",[148,152],{"id":149,"by":150,"text":151},"20101960","no_gravity","Tried to replicate the technique in a minimal example: https:\u002F\u002Fno-gravity.github.io\u002Fhtml-quine\u002Findex.html I am getting some additional empty lines in the output. And the closing…",{"id":153,"by":150,"text":154},"20102014","Then the empty lines that are in the source are missing in the output. Looks like the Show HN avoids this by not having empty lines in text.",{"value":156,"source":85,"evidence":157},"Why does style tag text escape",[158],{"id":159,"by":160,"text":161},"20100480","kccqzy","> The only other style that is special is \"style\" itself, which has to include an escape character to avoid being taken literally. ``` style::before {content:'\u003Cstyle>'}…",[163,170],{"value":164,"source":85,"evidence":165},"Browser Reveal Codes mode in WordPerfect",[166],{"id":167,"by":168,"text":169},"20103002","pavlov","Who else is old enough to remember WordPerfect's \"Reveal Codes\" mode? Same thing.",{"value":171,"source":85,"evidence":172},"Markdown rendered via CSS trick",[173,177],{"id":174,"by":175,"text":176},"20101060","ImJasonH","I once did a very similar thing to render HTML as unrendered Markdown: https:\u002F\u002Fgist.github.com\u002FImJasonH\u002Fc00cdd7aece6945fb8ea",{"id":178,"by":179,"text":180},"20103691","neogodless","Yes, the article actually links to a demo of this technique! https:\u002F\u002Fmrcoles.com\u002Fdemo\u002Fmarkdown-css\u002F",{"comments":182,"answered":18,"key":183},14,[184,187,190],{"id":185,"text":186},"20100317","cheers, i've applied that now",{"id":188,"text":189},"20095064","I can’t think of a way to do that. When content is added via css it’s not selectable. Maybe fork it and see what you can do? https:\u002F\u002Fgithub.com\u002FsecretGeek\u002Fhtml_wysiwyg\u002F",{"id":191,"text":192},"20100715","I had a look into it; user-select doesn't apply to before\u002Fafter content. This process has taught some interesting things about browsers. For example: `\u003Cbr>` and `\u003Cimg \u002F>`…",{"commenters":194,"max_depth":33,"maker_replies":182,"first_comment_mins":195,"lifespan_hours":196},70,6,261,[198,202,205,209,212,215,217,221,223,224,225,226,230,231,233,236,239,242,245,248,251,254,257,262,264,268,271,273,277,280,281,284,285,287,289,292,293,297,300,303,305,308,310,312,316,317,319,322,327,330,333,336,338,341,346,348,351,355,358,362,364,368,371,373,375,377,379,381,386,388,392,394,397,400,403,406,409,412,415,418,421,424,428,431,434,437,439,441,444,447,450,455,458,461],[199,41,46,200,201,41],"20102365","project\u002Fneutral\u002Fidea","lordnacho",[203,41,46,200,204,41],"20104133","ataylor32",[206,41,41,207,208,41],"20107840","other\u002Fneutral\u002Fnone","thefringthing",[210,41,41,207,211,41],"20112182","aggerdom",[213,41,41,214,211,41],"20112186","commenter\u002Fneutral\u002Fnone",[98,18,33,216,99,41],"project\u002Fpositive\u002Fdesign",[218,18,33,219,220,41],"20101946","project\u002Fpositive\u002Fperformance","benj111",[54,32,33,222,55,41],"project\u002Fpositive\u002Fidea",[58,46,33,222,59,41],[66,46,33,222,67,41],[174,39,46,200,175,41],[227,39,33,228,229,41],"20102345","project\u002Fpositive\u002Fnone","kennyadam",[178,39,46,200,179,41],[159,33,46,232,160,41],"project\u002Fneutral\u002Fexecution",[234,33,41,214,235,41],"20100614","sadjad",[237,33,41,214,238,41],"20102696","pluma",[240,33,46,232,241,41],"20100716","throwaway66666",[243,33,46,232,244,41],"20104583","tazard",[246,33,41,214,247,41],"20101196","missblit",[249,33,41,214,250,41],"20102924","ChrisSD",[252,195,41,207,253,41],"20102025","omk",[255,195,41,207,256,41],"20102623","fredley",[258,259,33,260,261,41],"20100232",7,"project\u002Fpositive\u002Fexecution","JoshuaRLi",[185,259,41,263,11,18],"maker\u002Fneutral\u002Fnone",[265,259,46,266,267,41],"20110111","project\u002Fneutral\u002Fdesign","e12e",[269,259,46,270,261,41],"20110936","project\u002Fneutral\u002Fnone",[91,272,33,216,92,41],8,[274,37,41,275,276,41],"20101006","other\u002Fneutral\u002Fidea","kristianp",[114,278,46,279,115,41],10,"project\u002Fmixed\u002Fexecution",[188,278,41,263,11,18],[282,278,46,232,283,41],"20100562","uryga",[191,278,41,232,11,18],[286,278,46,232,179,41],"20103849",[118,278,18,288,119,41],"project\u002Fcritical\u002Fexecution",[290,278,41,291,11,18],"20100759","maker\u002Fneutral\u002Fexecution",[122,278,18,288,123,41],[294,295,33,222,296,41],"20102451",11,"phelm",[298,295,33,222,299,41],"20102514","contravariant",[301,295,41,214,302,41],"20102831","comboy",[304,295,33,222,179,41],"20103901",[306,295,41,307,11,18],"20110211","maker\u002Fpositive\u002Fidea",[309,295,41,291,11,18],"20110275",[149,311,46,232,150,41],12,[313,311,41,314,315,41],"20101983","commenter\u002Fneutral\u002Fexecution","cocochanel",[153,311,41,214,150,41],[318,311,41,214,150,41],"20102519",[320,311,41,321,11,18],"20103703","maker\u002Fneutral\u002Fdesign",[323,324,46,325,326,41],"20099886",13,"project\u002Fneutral\u002Fdocs","gomox",[328,324,41,329,11,18],"20099979","maker\u002Fneutral\u002Fdocs",[331,324,41,207,332,41],"20100340","macintux",[334,324,41,207,335,41],"20103499","crtasm",[337,324,41,207,229,41],"20102350",[339,182,41,207,340,41],"20102843","rawTruthHurts",[342,343,33,344,345,41],"20098502",15,"maker\u002Fpositive\u002Fnone","chrismatheson",[347,343,41,263,11,18],"20098803",[349,343,33,216,350,41],"20100349","owyn",[352,353,33,344,354,41],"20100542",16,"ghettoimp",[356,16,46,270,357,41],"20122741","ests",[359,360,33,228,361,41],"20101356",18,"kissickas",[363,360,41,329,11,18],"20101698",[365,366,18,367,67,41],"20104505",19,"project\u002Fcritical\u002Fprivacy",[369,31,33,222,370,41],"20102996","Theodores",[141,372,46,266,142,41],21,[374,372,41,329,11,18],"20099958",[167,376,33,222,168,41],22,[102,378,33,228,103,41],23,[106,380,33,216,107,41],24,[382,383,18,384,385,41],"20100710",25,"project\u002Fcritical\u002Fdesign","dosy",[387,383,41,329,11,18],"20101714",[389,390,46,270,391,41],"20099985",26,"bt3",[393,390,41,214,11,18],"20100190",[395,390,41,214,396,41],"20100283","so33",[398,390,41,214,399,41],"20100300","aesthetics1",[401,390,41,214,402,41],"20100417","failrate",[404,390,41,214,405,41],"20100469","gridspy",[407,390,41,214,408,41],"20100764","lucasmullens",[410,390,41,214,411,41],"20100278","mpoteat",[413,390,33,222,414,41],"20101188","saalweachter",[416,390,41,214,417,41],"20100288","marcinzm",[419,390,41,214,420,41],"20100304","chente",[422,390,41,423,332,41],"20100549","other\u002Fcritical\u002Fnone",[425,390,41,426,427,41],"20100810","other\u002Fneutral\u002Fperformance","userbinator",[429,390,41,426,430,41],"20102161","aasasd",[432,390,41,214,433,41],"20100720","xeeeeeeeeeeenu",[435,390,41,214,436,41],"20100741","Tarrosion",[438,390,41,214,427,41],"20100798",[440,390,41,214,391,41],"20100788",[442,390,41,214,443,41],"20101885","z3t4",[445,390,41,214,446,41],"20101372","hoolm",[448,390,41,214,449,41],"20104514","hibbelig",[451,452,46,453,454,41],"20102866",27,"project\u002Fmixed\u002Fdesign","drbojingle",[456,452,46,200,457,41],"20189355","alanbernstein",[129,459,18,460,130,41],28,"project\u002Fcritical\u002Fidea",[462,459,41,463,11,18],"20103541","maker\u002Fneutral\u002Fidea",[],[466,471,475,480,485,490],{"id":467,"name":468,"points":469,"category":470},"20105567","Bloom",747,"web_saas",{"id":472,"name":473,"points":474,"category":20},"20060549","medium-to-own-blog",494,{"id":476,"name":477,"points":478,"category":479},"20081488","ZeroHTTPd",472,"learning_science",{"id":481,"name":482,"points":483,"category":484},"20101381","mlsql",209,"ai",{"id":486,"name":487,"points":488,"category":489},"20049075","notational-fzf-vim",171,"productivity",{"id":491,"name":492,"points":493,"category":489},"20077177","Nullboard",145,false,"v2",{"id":497,"name":5,"line":6,"ai":494,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":498,"top":18,"kw":499,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":500,"url":9,"mix":501,"praise":84,"objection":111,"sub":21},20094866,0.33,[24,25,26,27],"3055540305353313553030555355430005000031",[31,16,32,33],1793990990154]