[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"project-22933697":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":46,"what":47,"said":60,"maker_in_thread":177,"shape":179,"grid":183,"attempts":308,"same_week":309,"maker_shows":37,"maker_hidden":338,"reader_version":339,"card":340},"22933697","Pattern.css","CSS-only library to fill empty background with patterns","title","Show HN: Pattern.css – CSS-only library to fill empty background with patterns","https:\u002F\u002Fgithub.com\u002Fbansal-io\u002Fpattern.css","github.com","bansal10",1587465740,2020,332,47,118,3028,4,"legend","dev_tools","css library","library",[24,25,26,27],"css patterns","background patterns","css backgrounds","css only","mixed",-0.053,{"positive":31,"neutral":32,"mixed":33,"critical":32},7,11,3,32,{"execution":36,"idea":39,"design":42,"performance":43,"docs":44},{"positive":37,"critical":38},1,6,{"positive":40,"critical":41},5,0,{"positive":41,"critical":18},{"positive":41,"critical":37},{"positive":37,"critical":41},[40,33,33,41,40,40,33,37,37,33,37,37,37,41,41,41,41,41,41,37,33,37,41,41,41,41,41,41,37,33,33,33,40,33,37,37,40,40,40,33],null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":54,"openness":59,"stage":59,"team_size":59},{"value":49,"source":50,"evidence":51},"Filling empty page backgrounds with decorative patterns without images or JavaScript","maker",[52],{"id":53},"post",[55],{"value":56,"source":50,"evidence":57},"CSS",[58],{"id":53},"unknown",{"praise":61,"objections":82,"requests":124,"questions":140,"alternatives":148},[62],{"value":63,"source":64,"evidence":65},"Neat, small, useful project; CSS-only with no JavaScript","commenter",[66,70,74,78],{"id":67,"by":68,"text":69},"22934454","tiborsaas","Pretty neat project and great presentation, starred! You could reduce the distributed CSS version even more if you used the gradient definition only once, it's always the same.…",{"id":71,"by":72,"text":73},"22934881","Funes-",">>Features >Only CSS. No JavaScript! It is indeed a feature, and one that I wish the vast majority of websites adopted.",{"id":75,"by":76,"text":77},"22935357","queercode","Love it! Site could use some help though. Consider making a repo for the actual website please! Would love to help clean it up a bit.",{"id":79,"by":80,"text":81},"22934521","gorpomon","I always love seeing small, yet very valuable and informative projects on the front-page-- bravo!",[83,98,109],{"value":84,"source":64,"evidence":85},"Demo site renders incorrectly or has overlapping boxes and scrollbar issues",[86,90,94],{"id":87,"by":88,"text":89},"22934732","extro","Example site ( https:\u002F\u002Fbansal.io\u002Fpattern-css ) misrendered in Vivaldi, which brings me back PTSD grade memories about the browser war and css bugs, implementation-diferences,…",{"id":91,"by":92,"text":93},"22934853","onychomys","https:\u002F\u002Fimgur.com\u002Fts3ashk Some of your background boxes overlap with the sidebar.",{"id":95,"by":96,"text":97},"22936572","chrismorgan","The website https:\u002F\u002Fbansal.io\u002Fpattern-css was clearly produced on a platform with overlay scrollbars. There are a number of horizontal scrollbars that shouldn’t be there. ```…",{"value":99,"source":64,"evidence":100},"Diagonal patterns render jagged or inconsistently in Firefox",[101,105],{"id":102,"by":103,"text":104},"22940544","calibas","Works great in Chrome, but many of them aren't smooth in Firefox. It doesn't seem to like diagonal lines, the display is inconsistent. I'm guessing it's a bug in Firefox with…",{"id":106,"by":107,"text":108},"22938986","detaro","Hm, the diagonal lines are rendering quite badly for me (randomly jagged edges). Anyone else seeing this? (I'm on Linux, FF75)",{"value":110,"source":64,"evidence":111},"Demo site has slow smooth scrolling and hijacks the back button",[112,116,120],{"id":113,"by":114,"text":115},"22935326","Accacin","Wonderful! The demo site hijacks my back button, and the animations are incredibly slow. Edit: Rereading made me sound very salty. Nice project and I'm sure I'll use it in the…",{"id":117,"by":118,"text":119},"22934998","zerkten","I really like this, but it would be great if the example site didn't use that scrolling. I wanted to click between examples and I browsed away because it took too long.…",{"id":121,"by":122,"text":123},"22937598","xPaw","Not to mention smooth scroll which takes definitely too much time to scroll for no good reason.",[125,132,136],{"value":126,"source":64,"evidence":127},"Use CSS variables so sizes are not hardcoded",[128],{"id":129,"by":130,"text":131},"22939321","spankalee","It'd be nice if this used CSS variables so that you didn't need hardcoded sm, md, lg, and xl sizes, but could set the size to any length. Looks like from the source that this…",{"value":133,"source":64,"evidence":134},"Add a copy-paste snippet to the landing page",[135],{"id":67,"by":68,"text":69},{"value":137,"source":64,"evidence":138},"Publish the website source as a repo",[139],{"id":75,"by":76,"text":77},[141],{"value":142,"source":64,"evidence":143},"Can the whole pattern collection be downloaded?",[144],{"id":145,"by":146,"text":147},"22944383","urza","This is great! Is it possible to download the whole collection?",[149,156,163,170],{"value":150,"source":64,"evidence":151},"Hero Patterns",[152],{"id":153,"by":154,"text":155},"22934230","nathancahill","Also see Hero Patterns: http:\u002F\u002Fwww.heropatterns.com by Steve Schoger.",{"value":157,"source":64,"evidence":158},"Subtle Patterns",[159],{"id":160,"by":161,"text":162},"22934250","Etheryte","Subtle Patterns [1] has been fairly popular throughout the years as well. [1] https:\u002F\u002Fwww.toptal.com\u002Fdesigners\u002Fsubtlepatterns\u002F",{"value":164,"source":64,"evidence":165},"Transparent Textures",[166],{"id":167,"by":168,"text":169},"22934997","mikehearn","Also Transparent Textures (https:\u002F\u002Fwww.transparenttextures.com\u002F) – disclaimer, I made it — which is basically Subtle Patterns with a colorwheel that allows the backgrounds to be…",{"value":171,"source":64,"evidence":172},"css-doodle",[173],{"id":174,"by":175,"text":176},"22934387","CSSer","This is pretty cool. It’s reminds me of https:\u002F\u002Fcss-doodle.com\u002F, which is a native web component with the same general goal. Iirc, it uses canvas under the hood.",{"comments":41,"answered":41,"key":178},[],{"commenters":180,"max_depth":40,"maker_replies":41,"first_comment_mins":181,"lifespan_hours":182},42,96,27,[184,186,188,189,191,194,197,198,201,204,207,211,213,216,219,222,226,229,233,236,239,241,244,247,251,252,255,257,260,262,265,268,270,272,273,276,278,280,284,288,289,291,293,296,298,300,304],[67,41,40,185,68,41],"project\u002Fpositive\u002Fexecution",[153,37,33,187,154,41],"project\u002Fneutral\u002Fidea",[160,37,33,187,161,41],[167,37,41,190,168,41],"other\u002Fneutral\u002Fidea",[192,37,40,193,146,41],"22944546","project\u002Fpositive\u002Fidea",[195,37,40,193,196,41],"22945081","slig",[145,37,33,187,146,41],[199,37,33,187,200,41],"22936441","swyx",[87,202,37,203,88,41],2,"project\u002Fcritical\u002Fexecution",[205,202,37,203,206,41],"22934779","ahofmann",[208,202,33,209,210,41],"22934804","project\u002Fneutral\u002Fexecution","jedimastert",[91,202,37,212,92,41],"project\u002Fcritical\u002Fdesign",[214,202,37,212,215,41],"22935164","hapidjus",[217,202,37,212,218,41],"22935560","maple3142",[220,202,37,212,221,41],"22935631","chungy",[223,202,41,224,225,41],"22934928","other\u002Fneutral\u002Fnone","candu",[227,202,41,224,228,41],"22935578","searchableguy",[230,202,41,231,232,41],"22937246","commenter\u002Fneutral\u002Fnone","japanoise",[234,202,41,224,235,41],"22938300","wolco",[237,202,41,224,238,41],"22940131","eurasiantiger",[240,202,41,224,225,41],"22945621",[242,202,41,224,243,41],"22939862","forgotmypw23",[245,202,37,203,246,41],"22935137","matharmin",[248,33,33,249,250,41],"22934531","project\u002Fneutral\u002Fperformance","gunn",[95,18,37,203,96,41],[253,18,41,231,254,41],"22936744","tekromancr",[256,18,41,224,96,41],"22936856",[258,18,41,224,259,41],"22938970","JoshTriplett",[261,18,41,224,96,41],"22941685",[263,18,41,224,264,41],"22938690","preommr",[266,18,41,224,267,41],"22939305","coopsmgoops",[269,18,41,231,238,41],"22940143",[121,18,37,271,122,41],"project\u002Fcritical\u002Fperformance",[174,40,33,187,175,41],[274,38,33,187,275,41],"22935573","malydok",[113,31,33,277,114,41],"project\u002Fmixed\u002Fexecution",[117,279,33,277,118,41],8,[281,282,40,193,283,41],"22938717",9,"harrisreynolds",[285,286,33,277,287,41],"22937159",10,"jaquers",[102,32,37,203,103,41],[129,290,33,209,130,41],12,[106,292,37,203,107,41],13,[75,294,40,295,76,41],14,"project\u002Fpositive\u002Fdocs",[71,297,40,193,72,41],15,[79,299,40,193,80,41],16,[301,302,33,187,303,41],"22937503",17,"truesy",[305,306,33,187,307,41],"22935494",18,"greencore",[],[310,315,320,325,330,334],{"id":311,"name":312,"points":313,"category":314},"22898653","A basketball hoop to maximize shots that go in [video]",971,"creative",{"id":316,"name":317,"points":318,"category":319},"22936742","Intention",519,"productivity",{"id":321,"name":322,"points":323,"category":324},"22899654","ZoomerBackgrounds",327,"consumer_social",{"id":326,"name":327,"points":328,"category":329},"22907200","WikiWho",246,"data",{"id":331,"name":332,"points":333,"category":20},"22919843","Tip",242,{"id":335,"name":336,"points":337,"category":324},"22909419","Gentle",236,false,"v2",{"id":341,"name":5,"line":6,"ai":338,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":342,"top":18,"kw":343,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":344,"url":9,"mix":345,"praise":63,"objection":84,"sub":21},22933697,-0.05,[24,25,26,27],"5330553113111000000131000000133353115553",[31,32,33,32],1793991007913]