[{"data":1,"prerenderedAt":540},["ShallowReactive",2],{"project-20923792":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":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":46,"post_text":50,"what":51,"said":98,"maker_in_thread":214,"shape":216,"grid":221,"attempts":501,"same_week":502,"maker_shows":47,"maker_hidden":532,"reader_version":533,"card":534},"20923792","augmented-ui","Cyberpunk web design made easy, really easy","title","Show HN: Cyberpunk web design made easy, really easy","http:\u002F\u002Faugmented-ui.com\u002F","augmented-ui.com","JaneOri",1568073101,2019,775,108,8,2195,1,"legend","dev_tools","css library","library",[24,25,26,27,28],"css","clip-path","cyberpunk design","ui borders","web design","loved",0.502,{"positive":32,"neutral":33,"mixed":34,"critical":35},38,33,5,6,82,{"design":38,"idea":41,"docs":43,"execution":44,"performance":45},{"positive":39,"critical":40},12,0,{"positive":42,"critical":40},9,{"positive":18,"critical":40},{"positive":18,"critical":34},{"positive":40,"critical":18},[34,34,34,34,47,48,18,47,34,34,34,48,34,34,34,40,40,40,40,40,34,47,48,18,47,18,47,47,34,48,34,49,34,34,47,34,47,34,34,34],3,4,2,null,{"problem":52,"audience":60,"pricing":69,"motivation":73,"time_to_build":50,"stack":77,"openness":95,"stage":96,"team_size":97},{"value":53,"source":54,"evidence":55},"Making angled clipped corners and borders in web design is tedious with plain DOM and CSS","commenter",[56],{"id":57,"by":58,"text":59},"20925223","James0x57","Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it…",{"value":61,"source":62,"evidence":63},"Front-end developers and web designers building futuristic UIs","inferred",[64,65],{"id":57,"by":58,"text":59},{"id":66,"by":67,"text":68},"20927851","throwawaytoday5","Are there any resources or articles you'd recommend to get a more in-depth view of CSS? I'm a frontend developer but I always struggle with CSS beyond the basics. Understanding…",{"value":70,"source":54,"evidence":71},"Free to use in any project",[72],{"id":57,"by":58,"text":59},{"value":74,"source":54,"evidence":75},"Make cyberpunk-style border designs easy in CSS",[76],{"id":57,"by":58,"text":59},[78,85,91],{"value":79,"source":54,"evidence":80},"CSS",[81,82],{"id":57,"by":58,"text":59},{"id":83,"by":58,"text":84},"20927214","Sure. Each aug is a clip-path partial. That is, a series of points meant to be put inside a clip-path: polygon(...here...); stored in custom properties. All augs, by position,…",{"value":25,"source":54,"evidence":86},[87,88],{"id":83,"by":58,"text":84},{"id":89,"by":58,"text":90},"20928062","Border image property with svg was one of the first approaches I tried and tried. It got about half way to about half the options and required more setup than just a single CSS…",{"value":92,"source":54,"evidence":93},"npm package",[94],{"id":57,"by":58,"text":59},"open_source","launched","unknown",{"praise":99,"objections":130,"requests":164,"questions":186,"alternatives":201},[100,119],{"value":101,"source":54,"evidence":102},"Looks great and easy to use",[103,107,111,115],{"id":104,"by":105,"text":106},"20925756","atemerev","“high tech, low effort” — brilliant!",{"id":108,"by":109,"text":110},"20926055","bastih","That is great. Love how smooth it looks.",{"id":112,"by":113,"text":114},"20927947","johnsnowtho","Yup this is a nice take - sometimes these libraries can be a bit cumbersome, but the syntax is simple - similar to bootstrap. I think the big thing is the design - this looks…",{"id":116,"by":117,"text":118},"20926011","HackerBacker","This looks nice!",{"value":120,"source":54,"evidence":121},"Clever use of CSS as a programming model",[122,126],{"id":123,"by":124,"text":125},"20927362","soulofmischief","I started getting ready to write a response saying, no, why the hell would you clip and make shapes in the DOM and not regular CSS, till I finished reading the rest of your post.…",{"id":127,"by":128,"text":129},"20927797","waylandsmithers","This is fantastic. Thank you for sharing and teaching me something I didn't know you could do with CSS.",[131,146,153],{"value":132,"source":54,"evidence":133},"High CPU usage in browsers",[134,138,142],{"id":135,"by":136,"text":137},"20928979","paxswill","It looks really cool, but it spikes my browser's (Firefox and Chromium on Ubuntu 19.04) CPU usage whenever it's active. Not even scrolling, just visible. Reiterating though, this…",{"id":139,"by":140,"text":141},"20929235","peternicky","Awesome project, I want to build something to try it out! A few comments: - very high resource usage (animation meter and my system monitor confirms high CPU usage) - hovering…",{"id":143,"by":144,"text":145},"20928634","your-nanny","on ff mobile site\"s scroll seriously lagged. nice visual appeal though",{"value":147,"source":54,"evidence":148},"Uses invalid HTML attributes instead of data- attributes",[149],{"id":150,"by":151,"text":152},"20935111","err4nt","Looks fun, happy to see a great usage of CSS custom properties, but a little baffled and let down that it seems to use invalid HTML attributes :\u002F When writing HTML you can invent…",{"value":154,"source":54,"evidence":155},"Text overflows panels on some browsers",[156,160],{"id":157,"by":158,"text":159},"20926064","hanniabu","Great work! One bug I noticed is that text runs out of the panels as seen on your page. I suggest making them overflow: auto to make it scroll when necessary, also with the…",{"id":161,"by":162,"text":163},"20926991","teknopaul","Ditto in firefox mobile. Parts of text not readable",[165,172,179],{"value":166,"source":54,"evidence":167},"Add TLS redirect to the site",[168],{"id":169,"by":170,"text":171},"20926037","d6e","Looks awesome! Could you add TLS redirect though?",{"value":173,"source":54,"evidence":174},"Support multiple clips per border position",[175],{"id":176,"by":177,"text":178},"20927744","rtcoms","Is it possible to have multiple clips on single side of border ?",{"value":180,"source":54,"evidence":181},"Templates for dashboards built with it",[182],{"id":183,"by":184,"text":185},"20926000","scoobyyabbadoo","This is really cool! I am actually more of a backend engineer though, and I use dashboard templates like you would find with bootstrap and then just tweak the template a bit to…",[187,194],{"value":188,"source":54,"evidence":189},"How does it use custom properties without JavaScript",[190],{"id":191,"by":192,"text":193},"20934288","gitgud","Amazing, I've always loved the design but have been a little intimidated by how intricate it can be to implement, so this looks awesomely easy!! Also, wondering; how does this…",{"value":195,"source":54,"evidence":196},"Can it be defined in CSS without inline attributes",[197],{"id":198,"by":199,"text":200},"20933153","bkyan","Does the augmented-ui property have to live inline on the html tag, itself? ... or is there are way to define the whole exe process within the CSS class without having to inline…",[202,209],{"value":203,"source":54,"evidence":204},"border-image with SVG",[205],{"id":206,"by":207,"text":208},"20927840","hiccuphippo","Would it be better to use the css border-image property? If you don't want to use images I guess you could embed svg in it. That should give you around 98% of all browser users…",{"value":210,"source":54,"evidence":211},"Bootstrap",[212,213],{"id":183,"by":184,"text":185},{"id":112,"by":113,"text":114},{"comments":40,"answered":40,"key":215},[],{"commenters":217,"max_depth":218,"maker_replies":40,"first_comment_mins":219,"lifespan_hours":220},63,7,326,88,[222,224,226,229,233,236,240,243,244,246,248,251,253,254,256,259,261,263,264,267,270,272,276,279,282,283,285,287,290,291,292,293,294,296,299,301,303,306,309,313,315,318,321,324,327,330,332,334,336,339,342,345,347,350,352,355,357,360,362,366,369,372,374,378,381,383,387,390,393,395,398,399,400,402,403,405,409,411,413,416,421,422,424,426,428,430,432,434,436,440,444,448,451,453,456,460,464,466,469,471,475,479,481,485,487,489,493,497],[57,40,47,223,58,40],"project\u002Fneutral\u002Fdesign",[104,40,34,225,105,40],"project\u002Fpositive\u002Fdesign",[227,40,47,228,58,40],"20925862","maker\u002Fneutral\u002Fnone",[230,40,34,231,232,40],"20925851","project\u002Fpositive\u002Fidea","tgirod",[234,40,34,235,58,40],"20925860","maker\u002Fpositive\u002Fnone",[237,40,40,238,239,40],"20937748","other\u002Fneutral\u002Fnone","lsiebert",[241,40,34,225,242,40],"20925979","bonnow",[183,40,47,223,184,40],[245,40,34,231,58,40],"20926030",[247,40,34,231,184,40],"20926559",[249,40,47,250,177,40],"20926012","project\u002Fmixed\u002Fdocs",[252,40,47,228,58,40],"20926061",[176,40,47,223,177,40],[255,40,47,223,58,40],"20927810",[257,40,34,235,258,40],"20926029","liopleurodon",[169,40,47,260,170,40],"project\u002Fneutral\u002Fexecution",[157,40,18,262,158,40],"project\u002Fcritical\u002Fexecution",[161,40,18,262,162,40],[265,40,47,266,58,40],"20927110","maker\u002Fneutral\u002Fexecution",[268,40,40,269,158,40],"20929611","commenter\u002Fneutral\u002Fexecution",[271,40,47,260,58,40],"20932095",[273,40,34,274,275,40],"20926201","project\u002Fpositive\u002Fnone","vanderZwan",[277,40,34,231,278,40],"20926522","t0astbread",[280,40,47,260,281,40],"20927000","maaaats",[83,40,47,260,58,40],[66,40,34,284,67,40],"project\u002Fpositive\u002Fexecution",[286,40,40,238,58,40],"20928150",[288,40,40,238,289,40],"20930354","carti",[123,40,34,225,124,40],[127,40,34,231,128,40],[206,40,47,260,207,40],[89,40,47,260,58,40],[295,40,34,235,207,40],"20931536",[297,18,34,231,298,40],"20927380","_squared_",[300,18,34,225,58,40],"20927514",[302,18,34,235,298,40],"20927890",[304,18,34,235,305,40],"20927997","alltalk10000",[307,18,34,231,308,40],"20927562","swalsh",[310,49,47,311,312,40],"20926060","maker\u002Fneutral\u002Fdesign","ehnto",[314,49,40,238,58,40],"20926130",[316,49,40,238,317,40],"20926194","yakshaving_jgt",[319,49,40,238,320,40],"20927176","IggleSniggle",[322,49,40,238,323,40],"20927258","asutekku",[325,49,40,326,317,40],"20927315","commenter\u002Fneutral\u002Fnone",[328,49,40,238,329,40],"20927479","pbhjpbhj",[331,49,40,238,317,40],"20927266",[333,49,40,326,320,40],"20927484",[335,49,40,326,312,40],"20963069",[337,49,40,238,338,40],"20927617","NikolaNovak",[340,49,40,326,341,40],"20940190","homonculus1",[343,49,40,238,344,40],"20927414","willis936",[346,49,40,238,317,40],"20945688",[348,49,40,238,349,40],"20929912","jimmychangas",[351,49,40,238,312,40],"20926440",[353,47,34,225,354,40],"20926398","fimdomeio",[356,47,47,311,58,40],"20926428",[358,47,47,223,359,40],"20927420","theandrewbailey",[361,47,40,238,298,40],"20927968",[363,47,40,364,365,40],"20928689","other\u002Fneutral\u002Fpricing","latexr",[367,47,47,223,368,40],"20932309","WorldMaker",[370,47,34,225,371,40],"20927996","Hitton",[135,48,47,373,136,40],"project\u002Fmixed\u002Fperformance",[375,48,18,376,377,40],"20929061","project\u002Fcritical\u002Fperformance","jtreminio",[379,48,47,380,58,40],"20929359","maker\u002Fneutral\u002Fperformance",[382,48,47,380,58,40],"20929141",[384,34,47,385,386,40],"20928597","project\u002Fmixed\u002Fidea","PhasmaFelis",[388,34,47,389,58,40],"20928901","maker\u002Fneutral\u002Fidea",[391,35,40,238,392,40],"20927544","Dirlewanger",[394,35,40,238,386,40],"20928660",[396,35,18,262,397,40],"20930673","ebg13",[112,218,34,225,113,40],[150,16,18,262,151,40],[401,16,47,266,58,40],"20937138",[139,42,47,373,140,40],[404,42,47,380,58,40],"20929311",[406,407,34,225,408,40],"20929777",10,"Litmus2336",[410,407,47,228,58,40],"20929918",[412,407,40,238,408,40],"20930100",[414,407,47,228,415,40],"20930869","mhd",[417,418,34,419,420,40],"20928208",11,"project\u002Fpositive\u002Fdocs","rgovostes",[198,39,47,260,199,40],[423,39,47,266,58,40],"20933337",[425,39,34,274,199,40],"20933998",[427,39,18,262,199,40],"20934303",[429,39,47,266,199,40],"20934447",[431,39,47,266,58,40],"20936864",[191,433,34,274,192,40],13,[435,433,40,326,151,40],"20935099",[437,438,47,260,439,40],"20927665",14,"cyberpunk",[441,442,34,231,443,40],"20934703",15,"mcv",[445,446,34,231,447,40],"20926159",16,"tommica",[449,450,47,223,281,40],"20926990",17,[452,450,47,223,58,40],"20927435",[454,450,40,455,281,40],"20929639","commenter\u002Fpositive\u002Fdesign",[457,458,34,274,459,40],"20927575",18,"foxhop",[461,462,34,274,463,40],"20929441",19,"MrLeap",[465,462,34,235,58,40],"20929468",[467,468,47,228,397,40],"20930692",20,[470,468,47,228,58,40],"20930846",[472,473,34,225,474,40],"20927853",21,"TRossi",[476,477,34,274,478,40],"20926218",22,"darepublic",[108,480,34,225,109,40],23,[482,483,34,274,484,40],"20927499",24,"s_kunk",[143,486,47,373,144,40],25,[116,488,34,225,117,40],26,[490,491,34,225,492,40],"20927194",27,"buboard",[494,495,34,235,496,40],"20930908",28,"forgotmypw",[498,499,34,274,500,40],"20927632",29,"fergie",[],[503,508,513,518,523,527],{"id":504,"name":505,"points":506,"category":507},"20929801","3dforreddit",720,"consumer_social",{"id":509,"name":510,"points":511,"category":512},"20914236","Senior Engineer's CheckList",662,"learning_science",{"id":514,"name":515,"points":516,"category":517},"20903558","Soso",233,"infrastructure",{"id":519,"name":520,"points":521,"category":522},"20927585","tweetjobs",189,"productivity",{"id":524,"name":525,"points":526,"category":512},"20929774","The Whole Code Catalog",156,{"id":528,"name":529,"points":530,"category":531},"20921962","SecAlerts",144,"security_privacy",false,"v2",{"id":535,"name":5,"line":6,"ai":532,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":536,"top":18,"kw":537,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":538,"url":9,"mix":539,"praise":101,"objection":132,"sub":21},20923792,0.5,[24,25,26,27,28],"5555341355545550000053413133545255353555",[32,33,34,35],1794036580723]