[{"data":1,"prerenderedAt":495},["ShallowReactive",2],{"project-19858015":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":46,"post_text":47,"what":48,"said":80,"maker_in_thread":227,"shape":238,"grid":243,"attempts":457,"same_week":458,"maker_shows":18,"maker_hidden":487,"reader_version":488,"card":489},"19858015","CSSFX","Click-to-copy CSS effects","title","Show HN: CSSFX – Click-to-copy CSS effects","https:\u002F\u002Fcssfx.dev\u002F","cssfx.dev","jolaleye",1557317052,2019,595,87,18,2195,1,"legend","dev_tools","css effects library","web_app",[24,25,26,27],"css animations","css effects","copy css","hover effects","mixed",-0.144,{"positive":31,"neutral":32,"mixed":33,"critical":34},11,13,4,20,48,{"design":37,"execution":40,"performance":42,"idea":44},{"positive":38,"critical":39},2,10,{"positive":18,"critical":41},3,{"positive":43,"critical":38},0,{"positive":41,"critical":45},5,[18,45,18,18,18,18,18,18,41,41,45,18,43,43,43,43,43,43,43,45,41,18,18,18,18,41,18,41,18,41,43,43,41,45,45,41,45,18,41,45],null,{"problem":49,"audience":57,"pricing":47,"motivation":47,"time_to_build":47,"stack":65,"openness":77,"stage":78,"team_size":79},{"value":50,"source":51,"evidence":52},"Writing complicated CSS effects by hand is hard","commenter",[53],{"id":54,"by":55,"text":56},"19858738","dinkleberg","If you hadn't posted this comment I wouldn't have realized that even existed. But to OP, thanks for making this. As someone who hates writing complicated CSS but loves good…",{"value":58,"source":51,"evidence":59},"Developers and designers who want CSS effects without writing them",[60,61],{"id":54,"by":55,"text":56},{"id":62,"by":63,"text":64},"19860164","chefandy","As a graphic designer, I see no problem with this sort of thing. I'm guessing the author imagined these gizmos being used by people who are looking to publish something that…",[66,73],{"value":67,"source":51,"evidence":68},"Nuxt",[69],{"id":70,"by":71,"text":72},"19859438","brianzelip","Those inputs and loaders are great! Nice nuxt app w\u002F single file vue components to boot - well organized and clear[0]. The same author made a warm dark VS Code theme[1]. [0]…",{"value":74,"source":51,"evidence":75},"Vue",[76],{"id":70,"by":71,"text":72},"open_source","launched","unknown",{"praise":81,"objections":98,"requests":166,"questions":190,"alternatives":205},[82,90],{"value":83,"source":51,"evidence":84},"Useful resource for developers who struggle with CSS",[85,86],{"id":54,"by":55,"text":56},{"id":87,"by":88,"text":89},"19867283","somada141","As someone who's rather terrible at CSS I absolutely love this! Please make more :)",{"value":91,"source":51,"evidence":92},"Effects look nice and well made",[93,97],{"id":94,"by":95,"text":96},"19862923","huhtenberg","First \"Outline\" is just superb. Unique, interesting and simple at the same time.",{"id":70,"by":71,"text":72},[99,118,133,144,159],{"value":100,"source":51,"evidence":101},"Click-to-copy is not discoverable; code is hard to find",[102,106,110,114],{"id":103,"by":104,"text":105},"19858615","dchest","Took me some time to figure out that I should click slightly outside of the buttons to get the code (highlighting is barely visible on my MBP screen).",{"id":107,"by":108,"text":109},"19862652","andrewstuart","Yeah its really not obvious how to get the code - there should be a \"show css\" link under the button.",{"id":111,"by":112,"text":113},"19859136","cuddlecake","Took me a while to figure out that these CSS effects are not used to copy the content of the buttons. Shame on me.",{"id":115,"by":116,"text":117},"19860444","humblebee","That was my thought. \"Beautifully simple click-to-copy CSS effects \" is a terribly misleading title for this. These are hover effects that you can click-to-copy the css-source…",{"value":119,"source":51,"evidence":120},"Low contrast makes buttons and highlighting hard to see",[121,125,129],{"id":122,"by":123,"text":124},"19862893","deathanatos","The highlighting is barely visible on anything. Without hover: rgb(9, 8, 33) With hover: rgb(13, 11, 38)¹ ¹After blending. The hover actually adds rgba(24, 21, 55, .2) to the box.",{"id":126,"by":127,"text":128},"19858954","SamWhited","Some of the effects are nice, but I couldn't actually tell where to click both for the reasons other people on here have said, and because I can't tell where the buttons are…",{"id":130,"by":131,"text":132},"19860628","cr0sh","In case it hasn't been said yet - the color scheme for the page needs work. On my MBP it looks\u002Ffeels like \"dark on dark\"; that is, the buttons are a dark blue on a darker blue…",{"value":134,"source":51,"evidence":135},"Effects are decoration with little UX value",[136,140],{"id":137,"by":138,"text":139},"19859463","spectramax","Honest question: do they effects do anything in terms of UI\u002FUX principles and helping users for signaling state, evoking an action, etc? As a non-designer, I find this to be…",{"id":141,"by":142,"text":143},"19859506","mrhappyunhappy","As a UX person I really don’t get why people try so hard to ruin a good experience by adding animations. This stuff is great for ego building but terrible in terms of providing…",{"value":145,"source":51,"evidence":146},"Mobile use is broken, modal blocks effects",[147,151,155],{"id":148,"by":149,"text":150},"19864991","underwater","This made it unusable on mobile. It's not possible to preview an effect without tapping, which means the code obscures the preview.",{"id":152,"by":153,"text":154},"19861325","ricardobeat","Mobile issues: - “shine” has a visible slanted block travelling across - impossible to scroll the modal showing the code snippets - no idea how I even opened that as there is…",{"id":156,"by":157,"text":158},"19875106","antman","I am on mobile, the effect is behind the code popup I guess so it is not visible",{"value":160,"source":51,"evidence":161},"Some animations misbehave in Safari",[162],{"id":163,"by":164,"text":165},"19859733","Wowfunhappy","Heads up, a number of these effects don't appear to work correctly in Safari. For instance, the first, second, fourth, and fifth in the top row have a distracting flash in the…",[167,174,178,183],{"value":168,"source":51,"evidence":169},"Clearer indication of which effects are click or hover",[170],{"id":171,"by":172,"text":173},"19859510","_bxg1","Also, a couple of the effects only happen on click, not hover. Would be great to have better messaging about which is which (cursor change, a badge of some kind, or otherwise).…",{"value":175,"source":51,"evidence":176},"Show CSS link under each button",[177],{"id":107,"by":108,"text":109},{"value":179,"source":51,"evidence":180},"Higher contrast or light mode option",[181,182],{"id":126,"by":127,"text":128},{"id":130,"by":131,"text":132},{"value":184,"source":51,"evidence":185},"Allow combining effects with checkboxes",[186],{"id":187,"by":188,"text":189},"19865393","kingludite","it should have check boxes so that one can combine them.",[191,198],{"value":192,"source":51,"evidence":193},"Why pay for a domain and maintain it",[194],{"id":195,"by":196,"text":197},"19859728","karanrajpal","Loved the effects. As a developer, I'm curious as to hear your motivations behind paying out-of-pocket and maintaining a specific domain for it?",{"value":199,"source":51,"evidence":200},"Which color scheme is used for code snippets",[201],{"id":202,"by":203,"text":204},"19858586","skilled","What's the color scheme used for displaying the code snippet? Is it borrowed from an official theme (Sublime maybe?) -- would love to know.",[206,213,220],{"value":207,"source":51,"evidence":208},"animate.css",[209],{"id":210,"by":211,"text":212},"19859077","nestorherre","Something similar that could be useful for you guys: https:\u002F\u002Fdaneden.github.io\u002Fanimate.css\u002F",{"value":214,"source":51,"evidence":215},"Hover (ianlunn)",[216],{"id":217,"by":218,"text":219},"19858668","lixtra","Related: https:\u002F\u002Fianlunn.github.io\u002FHover\u002F",{"value":221,"source":51,"evidence":222},"spark-joy",[223],{"id":224,"by":225,"text":226},"19864100","swyx","here's more, if it helps: https:\u002F\u002Fgithub.com\u002Fsw-yx\u002Fspark-joy\u002F",{"comments":33,"answered":43,"key":228},[229,232,235],{"id":230,"text":231},"19864401","You're right, this was exactly why. It has been fixed now though :) I've also added \"input\" to the input effects to make their function a bit more clear. Thanks for the feedback!",{"id":233,"text":234},"19864391","This was an admittedly lazy design choice. The reason it worked this way was so that input effects could be clicked without opening the modal. The issue has been fixed so that…",{"id":236,"text":237},"19864571","Thanks for the notice. I'm not quite sure what is causing some of these bugs but I'll be sure to continue working on it. The project is fully open source so feel free to make a…",{"commenters":239,"max_depth":240,"maker_replies":33,"first_comment_mins":241,"lifespan_hours":242},65,7,81,84,[244,246,250,252,256,259,263,264,266,267,268,272,273,276,278,279,283,287,291,295,298,302,304,305,309,311,314,316,319,322,324,327,329,332,335,337,339,342,345,348,349,351,353,356,358,361,363,365,367,371,373,375,378,380,382,386,387,390,393,396,399,401,404,406,410,412,415,418,423,425,427,430,432,434,435,438,440,441,442,444,448,449,453],[103,43,18,245,104,43],"project\u002Fcritical\u002Fdesign",[247,43,41,248,249,43],"19858663","project\u002Fneutral\u002Fdesign","_eric",[54,43,45,251,55,43],"maker\u002Fpositive\u002Fnone",[253,43,45,254,255,43],"19862400","project\u002Fpositive\u002Fnone","commandlinefan",[257,43,18,245,258,43],"19859115","ausjke",[260,43,18,261,262,43],"19859169","project\u002Fcritical\u002Fexecution","tylfin",[171,43,18,245,172,43],[230,43,43,265,11,18],"maker\u002Fneutral\u002Fexecution",[187,43,41,248,188,43],[107,43,18,245,108,43],[269,43,41,270,271,43],"19862726","project\u002Fmixed\u002Fperformance","rectangletangle",[122,43,18,245,123,43],[274,43,18,245,275,43],"19862921","Cybernetic",[233,43,43,277,11,18],"maker\u002Fneutral\u002Fdesign",[148,43,18,245,149,43],[280,18,41,281,282,43],"19858569","project\u002Fmixed\u002Fdesign","whytaka",[284,18,18,285,286,43],"19858856","project\u002Fcritical\u002Fperformance","Anonymous4C54D6",[288,18,45,289,290,43],"19859295","project\u002Fpositive\u002Fdesign","knd775",[292,18,43,293,294,43],"19864543","commenter\u002Fneutral\u002Fperformance","Franciscouzo",[296,18,41,248,297,43],"19859959","MrBoomixer",[299,18,43,300,301,43],"19875302","commenter\u002Fneutral\u002Fnone","deftturtle",[62,18,45,303,63,43],"project\u002Fpositive\u002Fidea",[163,38,18,261,164,43],[306,38,43,307,308,43],"19860020","other\u002Fneutral\u002Fnone","slivanes",[310,38,43,307,164,43],"19860133",[312,38,43,307,313,43],"19860976","Epskampie",[315,38,43,307,164,43],"19860998",[317,38,43,300,318,43],"19867262","the_other",[320,38,43,307,321,43],"19861014","dspillett",[323,38,43,300,153,43],"19861316",[325,38,43,300,326,43],"19863264","PetahNZ",[328,38,43,300,153,43],"19866269",[330,38,43,307,331,43],"19863299","neurotrace",[333,38,43,307,334,43],"19864153","TimTheTinker",[336,38,43,307,164,43],"19889292",[338,38,43,300,321,43],"19870288",[340,38,43,307,341,43],"19863367","osrec",[343,38,43,307,344,43],"19864047","caprese",[346,38,43,307,347,43],"19864319","chrischen",[236,38,43,265,11,18],[70,41,45,350,71,43],"project\u002Fpositive\u002Fexecution",[210,33,41,352,211,43],"project\u002Fneutral\u002Fnone",[354,33,43,293,355,43],"19859920","hk__2",[357,33,43,300,211,43],"19860660",[359,33,18,245,360,43],"19861815","dlivingston",[362,45,43,277,11,18],"19864480",[130,364,18,245,131,43],6,[137,240,18,366,138,43],"project\u002Fcritical\u002Fidea",[368,240,41,369,370,43],"19859481","project\u002Fneutral\u002Fidea","ThomPete",[372,240,41,369,138,43],"19860508",[374,240,18,366,142,43],"19859550",[376,240,41,369,377,43],"19862826","TazeTSchnitzel",[126,379,41,281,127,43],8,[152,381,18,245,153,43],9,[383,381,43,384,385,43],"19867475","commenter\u002Fneutral\u002Fdesign","johnday",[141,39,18,366,142,43],[388,39,41,369,389,43],"19862027","raviojha",[391,39,41,369,392,43],"19866465","nullandvoid",[394,31,18,261,395,43],"19863068","Solvitieg",[397,398,41,281,392,43],"19859457",12,[195,32,41,400,196,43],"maker\u002Fneutral\u002Fidea",[402,32,43,300,403,43],"19859934","betenoire",[217,405,43,307,218,43],14,[407,405,43,408,409,43],"19858989","other\u002Fneutral\u002Fprivacy","spzb",[411,405,43,307,218,43],"19859138",[413,405,43,307,414,43],"19864945","dvcrn",[416,405,43,307,417,43],"19872320","Hamuko",[419,420,41,421,422,43],"19860016",15,"project\u002Fneutral\u002Fperformance","surfmike",[424,420,43,293,164,43],"19860192",[87,426,45,303,88,43],16,[428,429,45,254,211,43],"19858700",17,[431,429,43,300,138,43],"19859420",[433,429,43,300,211,43],"19860887",[202,16,41,248,203,43],[436,16,41,248,437,43],"19858688","Offpics",[94,439,45,289,95,43],19,[111,34,18,366,112,43],[115,34,18,366,116,43],[156,443,18,285,157,43],21,[445,446,45,303,447,43],"19859327",22,"AndrewStephens",[224,446,43,307,225,43],[450,451,45,251,452,43],"19858871",23,"barbarbar",[454,455,45,254,456,43],"19862232",24,"86carr",[],[459,464,469,473,477,482],{"id":460,"name":461,"points":462,"category":463},"19827336","zfsp",411,"infrastructure",{"id":465,"name":466,"points":467,"category":468},"19810504","Risp",314,"languages",{"id":470,"name":471,"points":472,"category":468},"19862748","piet-metal",306,{"id":474,"name":475,"points":476,"category":463},"19811093","Faast.js",202,{"id":478,"name":479,"points":480,"category":481},"19847258","Full Help",197,"web_saas",{"id":483,"name":484,"points":485,"category":486},"19856799","RSS Search Engine",192,"data",false,"v2",{"id":490,"name":5,"line":6,"ai":487,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":491,"top":18,"kw":492,"maker":11,"domain":10,"tier":19,"attempts":43,"strip":493,"url":9,"mix":494,"praise":83,"objection":100,"sub":21},19858015,-0.14,[24,25,26,27],"1511111133510000000531111313130035535135",[31,32,33,34],1794036577379]