[{"data":1,"prerenderedAt":570},["ShallowReactive",2],{"project-13031492":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":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":77,"maker_in_thread":203,"shape":205,"grid":210,"attempts":533,"same_week":534,"maker_shows":41,"maker_hidden":562,"reader_version":563,"card":564},"13031492","CSS Reference","A visual guide to the most popular CSS properties","title","Show HN: A visual guide to the most popular CSS properties","http:\u002F\u002Fcssreference.io\u002F#hn","cssreference.io","bbx",1480008761,2016,1117,122,3,2264,1,"legend","dev_tools","css reference","web_app",[24,21,25,26],"css properties","flexbox","css examples","debated",0.183,{"positive":30,"neutral":31,"mixed":32,"critical":33},24,21,2,17,64,{"docs":36,"design":38,"idea":39,"performance":40,"execution":42},{"positive":32,"critical":37},0,{"positive":16,"critical":18},{"positive":18,"critical":18},{"positive":16,"critical":41},10,{"positive":37,"critical":43},5,[43,37,45,37,16,16,43,37,43,37,37,18,18,37,16,18,18,37,18,16,16,37,18,37,16,16,18,16,43,16,43,16,43,32,16,43,43,45,45,16],4,null,{"problem":48,"audience":60,"pricing":46,"motivation":46,"time_to_build":46,"stack":75,"openness":76,"stage":76,"team_size":76},{"value":49,"source":50,"evidence":51},"Dry CSS reference docs are hard to use; visual examples help learn properties","commenter",[52,56],{"id":53,"by":54,"text":55},"13032730","edblarney","This is a great little site. A) How has the web been around for this long and nobody has done this before, i.e. there isn't at least some kind of authoritative reference like…",{"id":57,"by":58,"text":59},"13032745","Raphmedia","There are references already but they are often really dry.",{"value":61,"source":50,"evidence":62},"Front-end developers and people learning CSS",[63,67,71],{"id":64,"by":65,"text":66},"13031747","nilliams","I don't get this complaint. This site is aimed at developers. I think it's safe to assume they're either not viewing this on mobile ever, or are going to come back and visit on…",{"id":68,"by":69,"text":70},"13031776","Guyag","Second this. Will be using this in the future, and some kind of categorisation would improve usability.",{"id":72,"by":73,"text":74},"13032255","demoonkevin","It's a really nice app, I'm learning front-end so this will definitely help me.",[],"unknown",{"praise":78,"objections":109,"requests":133,"questions":163,"alternatives":175},[79,94],{"value":80,"source":50,"evidence":81},"Useful visual examples for each CSS property",[82,86,90],{"id":83,"by":84,"text":85},"13032078","ww520","Nicely put together. I like the examples showing the effect of different properties.",{"id":87,"by":88,"text":89},"13043813","huan9huan","The example is very helpful for me, brilliant works!",{"id":91,"by":92,"text":93},"13032217","xufi","Interesting app. Something I'll definitely use in the future for referencing",{"value":95,"source":50,"evidence":96},"Clean, helpful guide for refreshing CSS knowledge",[97,101,105],{"id":98,"by":99,"text":100},"13031969","paradite","I think this is a good guide for brushing up css knowledge before interviews. But for actual coding people would still Google for css-tricks or stackoverflow because Googling is…",{"id":102,"by":103,"text":104},"13033202","dolzenko","As someone who does frontend only occasionally I expect this site to be of great help to refresh my knowledge now and then. PS. Note to everyone - whitelist this in your ad…",{"id":106,"by":107,"text":108},"13032739","parr0t","This is going to be super helpful - thanks!!",[110,125],{"value":111,"source":50,"evidence":112},"Page is slow to load and scroll because all examples render on one page",[113,117,121],{"id":114,"by":115,"text":116},"13034964","d--b","Am I the only one whose computer has trouble running the site? Using a xps 13 from 2015 and it is really sluggish. Breaking it down into sub-pages would help.",{"id":118,"by":119,"text":120},"13031590","rohannair","I would expect a site about CSS properties to also know about the performance impacts of paints... Takes a good 5s for everything to load.",{"id":122,"by":123,"text":124},"13032136","nateberkopec","Scrolling is giving me ~20fps on my MBP...ouch.",{"value":126,"source":50,"evidence":127},"Alphabetical ordering is hard to navigate; suggested grouping by type",[128,132],{"id":129,"by":130,"text":131},"13031750","clement75009","Really nice. I think it would be more helpful if the properties were ordered in a logical order (by \"type\" of properties) instead of alphabetical order.",{"id":68,"by":69,"text":70},[134,141,152],{"value":135,"source":50,"evidence":136},"Link to GitHub repo or edit links for contributions",[137],{"id":138,"by":139,"text":140},"13033335","kojoru","Please include the link to github ( https:\u002F\u002Fgithub.com\u002Fjgthms\u002Fcss-reference ) for everyone to edit and write issues. Would be particularly nice to have a direct link to edit…",{"value":142,"source":50,"evidence":143},"Separate page per property for linking",[144,148],{"id":145,"by":146,"text":147},"13033003","philmander","Very useful. You should consider serving a separate page for each property in addition to one big list. This would be more useful for quick Google lookups.",{"id":149,"by":150,"text":151},"13031955","bryanrasmussen","Well they could have a list of the properties without them all rendered and then render just the property they need when someone clicks on the property name. And why should it…",{"value":153,"source":50,"evidence":154},"Browser compatibility information such as caniuse links",[155,159],{"id":156,"by":157,"text":158},"13032511","NatW","Very nice - wish list items: adding css version numbers and browser compatibility.",{"id":160,"by":161,"text":162},"13039276","aphextron","A link to the relevant caniuse.com page in each section would be fantastic",[164],{"value":165,"source":50,"evidence":166},"Is flexbox now the standard way of doing layout and how well is it supported?",[167,171],{"id":168,"by":169,"text":170},"13033918","archildress","Quick question: this refers heavily to Flexbox, which as someone who has only a tangental interest in CSS, I don't know much about. Is it the standard way of doing positioning…",{"id":172,"by":173,"text":174},"13034500","LargeCompanies","Flexbox is it supported by all major browsers? How does it compare to table HTML vs. div HTML? What are the benefits vs. div HTML & Bootstrap .. is it just the new thing to learn?",[176,183,191,196],{"value":177,"source":50,"evidence":178},"MDN CSS reference",[179],{"id":180,"by":181,"text":182},"13034624","HTeuMeuLeuOnHN","Regarding point A, here are a few sites that come off the top of my head : * Index of CSS Properties by W3C https:\u002F\u002Fwww.w3.org\u002FStyle\u002FCSS\u002Fall-properties.en.html * CSS Reference by…",{"value":184,"source":50,"evidence":185},"CSS-Tricks Almanac",[186,187],{"id":180,"by":181,"text":182},{"id":188,"by":189,"text":190},"13033260","tholman","Great clean guide. Here's a couple more that often offer extra tidbits of certain properties. - https:\u002F\u002Fcss-tricks.com\u002Falmanac\u002F - http:\u002F\u002Ftympanus.net\u002Fcodrops\u002Fcss_reference\u002F",{"value":192,"source":50,"evidence":193},"Codrops CSS reference",[194,195],{"id":180,"by":181,"text":182},{"id":188,"by":189,"text":190},{"value":197,"source":50,"evidence":198},"caniuse.com for browser support",[199],{"id":200,"by":201,"text":202},"13032736","mbrookes","Try http:\u002F\u002Fcaniuse.com\u002F",{"comments":37,"answered":37,"key":204},[],{"commenters":206,"max_depth":207,"maker_replies":37,"first_comment_mins":208,"lifespan_hours":209},82,13,14,103,[211,213,215,216,218,222,225,227,229,231,235,238,241,245,248,251,252,255,259,262,264,267,269,271,273,275,278,281,285,288,291,294,296,298,299,301,305,308,312,314,317,319,321,324,327,329,332,334,338,341,344,346,348,350,352,354,357,359,362,363,365,368,370,371,374,376,378,380,382,384,386,388,390,392,394,397,400,402,405,407,409,411,414,416,417,421,424,426,428,431,434,436,437,440,443,446,449,452,456,459,462,467,470,472,475,477,481,483,485,488,490,494,495,497,501,504,508,512,515,519,524,528],[53,37,43,212,54,37],"project\u002Fpositive\u002Fnone",[57,37,37,214,58,37],"other\u002Fneutral\u002Fdocs",[180,37,37,214,181,37],[217,37,37,214,54,37],"13034974",[219,37,37,220,221,37],"13037743","commenter\u002Fneutral\u002Fnone","91bananas",[223,37,37,214,224,37],"13037103","amichal",[138,18,16,226,139,37],"maker\u002Fneutral\u002Fdocs",[129,32,16,228,130,37],"project\u002Fneutral\u002Fdesign",[68,32,43,230,69,37],"project\u002Fpositive\u002Fdesign",[232,32,37,233,234,37],"13031842","commenter\u002Fneutral\u002Fdesign","usaphp",[236,32,37,233,237,37],"13031961","jamessb",[239,32,37,233,240,37],"13035486","wallace_f",[242,32,16,243,244,37],"13033159","project\u002Fneutral\u002Fidea","olalonde",[246,32,16,243,247,37],"13037004","coding123",[249,32,16,228,250,37],"13041026","superdude",[168,16,16,243,169,37],[253,16,16,243,254,37],"13033939","matthewhall",[256,16,16,257,258,37],"13034053","project\u002Fneutral\u002Fnone","shakna",[260,16,43,212,261,37],"13034663","jrapdx3",[263,16,37,220,258,37],"13034712",[265,16,37,220,266,37],"13035304","majewsky",[268,16,37,220,258,37],"13036757",[270,16,37,220,221,37],"13037767",[272,16,37,220,258,37],"13040411",[274,16,37,220,266,37],"13043286",[276,16,16,228,277,37],"13034158","werdnapk",[279,16,43,230,280,37],"13034266","chrisfosterelli",[282,16,37,283,284,37],"13034289","other\u002Fneutral\u002Fnone","pault",[286,16,37,214,287,37],"13034386","Drdrdrq",[289,16,37,220,290,37],"13034594","wapz",[292,16,37,283,293,37],"13035044","zem",[295,16,37,283,284,37],"13035539",[297,16,37,220,169,37],"13039089",[188,45,37,214,189,37],[114,43,18,300,115,37],"project\u002Fcritical\u002Fperformance",[302,43,37,303,304,37],"13035145","commenter\u002Fneutral\u002Fperformance","faraggi",[306,43,18,300,307,37],"13035473","caspg",[309,43,37,310,311,37],"13048354","other\u002Fneutral\u002Fperformance","SahAssar",[118,313,18,300,119,37],6,[315,313,37,303,316,37],"13031642","Kiro",[318,313,37,303,119,37],"13031657",[320,313,37,233,316,37],"13031836",[322,313,16,323,58,37],"13031682","project\u002Fneutral\u002Fperformance",[325,313,37,303,326,37],"13031808","dom0",[328,313,37,303,58,37],"13032036",[330,313,37,303,331,37],"13032099","mschuster91",[333,313,37,303,58,37],"13032333",[335,313,18,336,337,37],"13033006","project\u002Fcritical\u002Fdesign","scotty79",[339,313,37,233,340,37],"13034728","flukus",[342,313,18,300,343,37],"13031803","jklinger410",[345,313,37,303,316,37],"13031843",[347,313,37,220,343,37],"13032128",[349,313,37,233,316,37],"13032156",[351,313,37,303,343,37],"13034398",[353,313,16,323,337,37],"13033024",[355,313,37,303,356,37],"13033286","CamperBob2",[358,313,18,300,343,37],"13034400",[360,313,16,323,361,37],"13031890","prashnts",[149,313,16,323,150,37],[364,313,37,233,316,37],"13032228",[366,313,37,220,367,37],"13036402","hexasquid",[369,313,37,220,221,37],"13037815",[64,313,16,323,65,37],[372,313,37,303,373,37],"13032670","rhizome",[375,313,37,220,65,37],"13032761",[377,313,37,220,373,37],"13032804",[379,313,37,220,65,37],"13032854",[381,313,18,300,373,37],"13033086",[383,313,37,303,65,37],"13033463",[385,313,18,300,258,37],"13034687",[387,313,37,283,340,37],"13034716",[389,313,37,283,258,37],"13034744",[391,313,37,283,340,37],"13034757",[393,313,37,283,258,37],"13034776",[395,313,43,212,396,37],"13033913","kaishiro",[398,313,18,300,399,37],"13032671","threatofrain",[401,313,37,220,65,37],"13032781",[403,313,16,404,337,37],"13032898","project\u002Fmixed\u002Fperformance",[406,313,37,303,65,37],"13032924",[408,313,18,300,337,37],"13033133",[410,313,37,220,65,37],"13033497",[412,313,37,220,413,37],"13040629","tripzilch",[415,313,37,220,65,37],"13059648",[122,313,18,300,123,37],[418,313,43,419,420,37],"13032401","project\u002Fpositive\u002Fperformance","fractallyte",[422,313,43,419,423,37],"13032843","Angostura",[145,425,43,212,146,37],7,[83,427,43,230,84,37],8,[156,429,16,430,157,37],9,"project\u002Fneutral\u002Fdocs",[432,429,16,430,433,37],"13032625","Ph0X",[435,429,16,430,54,37],"13032717",[200,429,16,430,201,37],[438,429,37,283,439,37],"13033014","yasserkaddour",[441,41,43,212,442,37],"13038492","huherto",[444,41,37,283,445,37],"13040399","dwaltrip",[98,447,16,448,99,37],11,"project\u002Fmixed\u002Fnone",[450,447,37,283,451,37],"13033601","kakarot",[453,454,43,419,455,37],"13038310",12,"ollie",[457,207,43,212,458,37],"13032211","paublyrne",[460,208,43,212,461,37],"13044332","GrinningFool",[463,464,18,465,466,37],"13037993",15,"project\u002Fcritical\u002Fexecution","brute",[468,464,18,465,469,37],"13038992","chei0iaV",[91,471,43,212,92,37],16,[473,33,18,465,474,37],"13033539","austinjp",[102,476,43,212,103,37],18,[478,479,16,257,480,37],"13032258",19,"datamoshr",[172,482,37,283,173,37],20,[484,482,37,283,258,37],"13034669",[486,31,43,212,487,37],"13034171","partycoder",[106,489,43,212,107,37],22,[491,492,43,212,493,37],"13031771",23,"closetheworld",[72,30,43,212,73,37],[160,496,16,430,161,37],25,[498,499,16,430,500,37],"13036973",26,"gshakir",[87,502,43,503,88,37],27,"project\u002Fpositive\u002Fdocs",[505,506,43,212,507,37],"13031983",28,"willemwijnans",[509,510,18,465,511,37],"13039987",29,"ahm786",[513,514,43,212,331,37],"13032091",30,[516,517,18,465,518,37],"13032227",31,"tambourine_man",[520,521,18,522,523,37],"13032882",32,"project\u002Fcritical\u002Fidea","imafish",[525,526,43,503,527,37],"13037310",33,"ehosca",[529,530,43,531,532,37],"13032342",34,"project\u002Fpositive\u002Fidea","namelezz",[],[535,540,544,549,554,558],{"id":536,"name":537,"points":538,"category":539},"13030603","Dply",673,"infrastructure",{"id":541,"name":542,"points":543,"category":20},"13053137","Antd",507,{"id":545,"name":546,"points":547,"category":548},"13056678","React Native Express",496,"learning_science",{"id":550,"name":551,"points":552,"category":553},"13065670","Anycomplete",390,"productivity",{"id":555,"name":556,"points":557,"category":539},"13048334","Migadu",336,{"id":559,"name":560,"points":561,"category":20},"13058445","ICanHazData",257,false,"v2",{"id":565,"name":5,"line":6,"ai":562,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":566,"top":18,"kw":567,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":568,"url":9,"mix":569,"praise":80,"objection":111,"sub":21},13031492,0.18,[24,21,25,26],"5040335050011031101330103313535352355443",[30,31,32,33],1794036549903]