[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-23865900":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":45,"post_text":47,"what":48,"said":87,"maker_in_thread":195,"shape":197,"grid":200,"attempts":306,"same_week":307,"maker_shows":33,"maker_hidden":335,"reader_version":336,"card":337},"23865900","css-media-vars","A completely different way to write responsive, vanilla, CSS","title","Show HN: A completely different way to write responsive, vanilla, CSS","https:\u002F\u002Fpropjockey.github.io\u002Fcss-media-vars\u002F","propjockey.github.io","JaneOri",1594948475,2020,248,45,191,3028,7,"notable","dev_tools","css responsive breakpoints","library",[24,25,26,27],"responsive css","css variables","media queries","css breakpoints","mixed",0.155,{"positive":31,"neutral":32,"mixed":33,"critical":34},11,17,3,6,37,{"idea":37,"design":40,"docs":41,"execution":43},{"positive":38,"critical":39},10,0,{"positive":39,"critical":33},{"positive":42,"critical":42},1,{"positive":39,"critical":44},2,[46,46,46,33,33,39,39,39,39,33,42,39,33,33,39,46,33,33,33,42,33,33,42,42,33,42,42,33,46,46,33,46,46,33,46,46,33,46,39,33],5,null,{"problem":49,"audience":47,"pricing":60,"motivation":64,"time_to_build":47,"stack":68,"openness":84,"stage":85,"team_size":86},{"value":50,"source":51,"evidence":52},"Writing responsive CSS requires repeating properties and @media statements for each breakpoint","commenter",[53,57],{"id":54,"by":55,"text":56},"23865901","James0x57","I know the docs need a little love but I think this has potential to be a game changer for writing responsive CSS. It has named breakpoints, lets you write DRY selectors, doesn't…",{"id":58,"by":55,"text":59},"23870119","Thanks! No direct plans but I'll follow wherever piques my interest. css-media-vars only happened because I recently began work on the new site\u002Fstaticlandingpage for augmented-ui…",{"value":61,"source":51,"evidence":62},"free",[63],{"id":54,"by":55,"text":56},{"value":65,"source":51,"evidence":66},"Avoid copy-pasting @media statements while working on augmented-ui site",[67],{"id":58,"by":55,"text":59},[69,73],{"value":70,"source":51,"evidence":71},"CSS",[72],{"id":54,"by":55,"text":56},{"value":74,"source":51,"evidence":75},"npm package",[76,80],{"id":77,"by":78,"text":79},"23866226","cosmotic","When I clicked to see vanilla CSS, an NPM package was not something I expected to see.",{"id":81,"by":82,"text":83},"23866239","wbobeirne","You're more than welcome to copy the code directly into your project (https:\u002F\u002Funpkg.com\u002Fcss-media-vars@1.0.1\u002Fcss-media-vars.css) or read the code, learn the technique, and…","open_source","launched","unknown",{"praise":88,"objections":107,"requests":137,"questions":160,"alternatives":175},[89,100],{"value":90,"source":51,"evidence":91},"Clever use of custom property spec behavior, no JS needed",[92,93,96],{"id":54,"by":55,"text":56},{"id":94,"by":55,"text":95},"23866861","YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is…",{"id":97,"by":98,"text":99},"23867190","tmpfs","This is really smart, good job. I look forward to taking this for a spin, the point of not adding a build step is critical for some of my current work. I think the time for using…",{"value":101,"source":51,"evidence":102},"Single definition per property is cleaner than per-breakpoint repetition",[103],{"id":104,"by":105,"text":106},"23867984","esperent","What makes this one different is that, for example, if you want to set the width, you just do it once. Other approaches (including bootstrap) you have to type \"width\" once for…",[108,119,129],{"value":109,"source":51,"evidence":110},"Hard to read and maintain; feels like a hack",[111,115],{"id":112,"by":113,"text":114},"23871220","LukeBMM","This a profoundly creative and clever idea which I hope to never see in any actual use, ever. I really appreciate the ingenuity, but I can't help but feel its legibility and…",{"id":116,"by":117,"text":118},"23867447","rkagerer","dear god, how did we get here (Neat trick I'm just weary of web languages that in practice feel like they're working against clarity)",{"value":120,"source":51,"evidence":121},"Browser support excludes IE11 and the docs' support claim is misleading",[122,126],{"id":123,"by":124,"text":125},"23869795","agloeregrets","The upsell on browser support is a little misleading. Sure, it’s 94% worldwide supported..but what isn’t mentioned is that the 6% is entirely IE11 and down and that the browser…",{"id":127,"by":55,"text":128},"23870205","IE11 and down is 1.73%, not all 6%. The rest is mostly old versions of popular browsers but tiny browsers like the Chinese QQ Browser are also included at the link provided.…",{"value":130,"source":51,"evidence":131},"Npm package used for a vanilla CSS project is unexpected",[132,133],{"id":77,"by":78,"text":79},{"id":134,"by":135,"text":136},"23866719","PudgePacket","Seems like it's just being used as a distribution method here.",[138,149],{"value":139,"source":51,"evidence":140},"More documentation and examples",[141,145],{"id":142,"by":143,"text":144},"23867956","9935c101ab17a66","This is really cool. As I was writing some media queries today, I was yearning for a simpler solution. Couple of nice-to-haves: - More examples (though I'm guessing this is…",{"id":146,"by":147,"text":148},"23868925","captn3m0","Suggestion: provide a plain text version of the combined media queries to help the reader understand.",{"value":150,"source":51,"evidence":151},"Simpler syntax for combining conditions such as AND and OR",[152,156],{"id":153,"by":154,"text":155},"23868764","swyx","congrats, i think this is a very good idea. the AND and OR logic syntax a little clunky to me. i'd love something more first class from the CSSWG in accommodating this.",{"id":157,"by":158,"text":159},"23868177","progx","For vanilla css-writer it could be a game changer, but who writes vanilla css in 2020? SASS make it so easy to write complex css simple. css-media-vars would be a game changer…",[161],{"value":162,"source":51,"evidence":163},"Why the keyword initial is used instead of other strings",[164,168,172],{"id":165,"by":166,"text":167},"23880706","tobr","Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?",{"id":169,"by":170,"text":171},"23922475","uxamanda","I was playing around with this here: https:\u002F\u002Fjsbin.com\u002Fzebipenidi\u002F1\u002Fedit and tried editing the keyword to other things. When I tried other strings (my name, \"null\", other CSS…",{"id":173,"by":170,"text":174},"23922519","The OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional \"syntax\" error. [0]…",[176,183,190],{"value":177,"source":51,"evidence":178},"Bootstrap breakpoints",[179],{"id":180,"by":181,"text":182},"23867132","sm4sh","Am I not getting this or is this just a slightly different way of using breakpoints like bootstrap some years ago? I think we've come full circle.",{"value":184,"source":51,"evidence":185},"Utopia fluid type and space scale",[186],{"id":187,"by":188,"text":189},"23867222","deltron3030","This breakpointless approach is interesting: https:\u002F\u002Futopia.fyi\u002F",{"value":191,"source":51,"evidence":192},"Sass preprocessors",[193,194],{"id":157,"by":158,"text":159},{"id":97,"by":98,"text":99},{"comments":39,"answered":39,"key":196},[],{"commenters":198,"max_depth":46,"maker_replies":39,"first_comment_mins":39,"lifespan_hours":199},31,142,[201,203,207,210,212,214,217,220,223,226,228,229,231,232,236,240,242,245,247,249,250,252,255,257,259,261,262,263,264,265,269,272,274,277,279,282,285,287,289,290,293,294,297,300,303],[54,39,46,202,55,39],"maker\u002Fpositive\u002Fidea",[204,39,46,205,206,39],"23866192","project\u002Fpositive\u002Fidea","corporatehobo",[208,39,46,202,209,39],"23867917","JoshTriplett",[58,39,33,211,55,39],"maker\u002Fneutral\u002Fnone",[157,39,33,213,158,39],"project\u002Fmixed\u002Fdesign",[215,39,39,216,135,39],"23868673","commenter\u002Fneutral\u002Fnone",[218,39,39,216,219,39],"23868814","Brajeshwar",[221,39,39,216,222,39],"23869009","SiVal",[224,39,39,216,225,39],"23869673","PetahNZ",[227,39,39,216,222,39],"23870484",[153,39,33,213,154,39],[123,39,42,230,124,39],"project\u002Fcritical\u002Fdocs",[127,39,39,216,55,39],[233,39,33,234,235,39],"23871581","project\u002Fneutral\u002Fnone","frereubu",[237,42,33,238,239,39],"23866822","project\u002Fneutral\u002Fidea","Rotten194",[94,42,39,241,55,39],"commenter\u002Fneutral\u002Fidea",[243,42,46,205,244,39],"23866955","teej",[246,42,33,238,55,39],"23867033",[165,42,33,248,166,39],"project\u002Fneutral\u002Fexecution",[169,42,33,248,170,39],[173,42,33,251,170,39],"project\u002Fneutral\u002Fdocs",[253,42,42,254,55,39],"23866973","project\u002Fcritical\u002Fexecution",[256,42,33,248,239,39],"23866996",[258,42,33,248,55,39],"23867057",[116,42,42,260,117,39],"project\u002Fcritical\u002Fdesign",[77,44,42,254,78,39],[81,44,33,248,82,39],[134,44,33,248,135,39],[112,33,42,260,113,39],[266,267,42,260,268,39],"23866812",4,"delgaudm",[270,267,33,248,271,39],"23869707","CrazyStat",[142,46,46,273,143,39],"project\u002Fpositive\u002Fdocs",[275,34,46,205,276,39],"23874968","russdpale",[278,34,33,248,55,39],"23875256",[280,18,46,205,281,39],"23867569","satvikpendem",[283,18,33,238,284,39],"23868151","onion2k",[97,286,46,205,98,39],8,[180,288,33,238,181,39],9,[104,288,46,205,105,39],[291,38,46,205,292,39],"23866632","ketzo",[146,31,33,251,147,39],[295,296,46,205,135,39],"23866721",12,[187,298,39,299,188,39],13,"other\u002Fneutral\u002Fidea",[301,298,33,302,105,39],"23868009","project\u002Fmixed\u002Fidea",[304,298,33,305,188,39],"23868319","project\u002Fneutral\u002Fdesign",[],[308,312,317,322,327,331],{"id":309,"name":310,"points":311,"category":20},"23896856","3D Book Image CSS Generator",638,{"id":313,"name":314,"points":315,"category":316},"23920987","css-sweeper",390,"games",{"id":318,"name":319,"points":320,"category":321},"23880071","Simple Ops",280,"infrastructure",{"id":323,"name":324,"points":325,"category":326},"23921478","React Guitar",242,"languages",{"id":328,"name":329,"points":330,"category":20},"23895540","uuid-readable",154,{"id":332,"name":333,"points":334,"category":20},"23916842","UI Playbook",145,false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":341,"url":9,"mix":342,"praise":90,"objection":109,"sub":21},23865900,0.16,[24,25,26,27],"5553300003103305333133113113553553553503",[31,32,33,34],1794036593429]