[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"project-13874844":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":45,"post_text":48,"what":49,"said":82,"maker_in_thread":170,"shape":181,"grid":184,"attempts":386,"same_week":387,"maker_shows":46,"maker_hidden":416,"reader_version":417,"card":418},"13874844","codepen.io","An HTML\u002FCSS\u002FJS toggle switch with happy and sad emojis","title","Show HN: An HTML\u002FCSS\u002FJS toggle switch with happy and sad emojis","http:\u002F\u002Fcodepen.io\u002Fchrisgannon\u002Fpen\u002FWpjXVr","chrisgannon",1489569770,2017,202,76,159,2242,8,"notable","creative","ui widget","library",[23,24,25,26,27],"toggle switch","css animation","javascript toggle","codepen","emoji switch","debated",0.068,{"positive":31,"neutral":32,"mixed":33,"critical":34},13,4,2,10,29,{"design":37,"execution":39,"idea":42,"performance":44},{"positive":38,"critical":33},7,{"positive":40,"critical":41},1,6,{"positive":32,"critical":43},0,{"positive":43,"critical":33},[46,43,43,43,43,43,43,40,47,43,43,47,43,47,47,43,46,46,43,43,40,40,40,46,40,43,43,47,46,43,43,46,43,43,43,46,46,46,43,40],5,3,null,{"problem":48,"audience":48,"pricing":48,"motivation":50,"time_to_build":48,"stack":57,"openness":80,"stage":81,"team_size":81},{"value":51,"source":52,"evidence":53},"Maker says they put work out to show off skills and help people learn","maker",[54],{"id":55,"by":10,"text":56},"13883045","No I don't grant permission sorry. I put stuff out to show off my skills and to help people learn.",[58,64,68,72],{"value":59,"source":60,"evidence":61},"HTML","inferred",[62],{"id":63},"post",{"value":65,"source":60,"evidence":66},"CSS",[67],{"id":63},{"value":69,"source":60,"evidence":70},"JavaScript",[71],{"id":63},{"value":73,"source":74,"evidence":75},"TimelineMax animation library","commenter",[76],{"id":77,"by":78,"text":79},"13875353","retSava","You can change the line var toggleTl = new TimelineMax({paused:true}).timeScale(2); to read eg var toggleTl = new TimelineMax({paused:true}).timeScale(5); instead. (I'm not the…","open_source","unknown",{"praise":83,"objections":114,"requests":145,"questions":157,"alternatives":165},[84,103],{"value":85,"source":74,"evidence":86},"Cute and fun animation",[87,91,95,99],{"id":88,"by":89,"text":90},"13875122","remy_luisant","That's adorable. I wonder how using such a toggle could change the user behavior. I had a bit of a hard time turning the face into a sad face. I really liked it much better at…",{"id":92,"by":93,"text":94},"13875212","sangupta","Cute!",{"id":96,"by":97,"text":98},"13875235","baby","After flat UI, cute UI? I love this. Btw this is a joke, but how far from reality is it? In Japan there is definitely a cute UI. I could even say that the Nintendo Switch UI is a…",{"id":100,"by":101,"text":102},"13875654","yev","Nice work, looks really great!",{"value":104,"source":74,"evidence":105},"Smooth transitions and blink details",[106,110],{"id":107,"by":108,"text":109},"13875103","itchynosedev","Awesome transitions! One minor annoyance is toggles is meant to respond instantly, and when I click it just accelerates tad slow as to make you think it's a bit lagged. Looks…",{"id":111,"by":112,"text":113},"13876145","neogodless","I think the blinking is actually much more effective this way, too!",[115,123,134],{"value":116,"source":74,"evidence":117},"Click delay makes it feel unresponsive",[118,122],{"id":119,"by":120,"text":121},"13875153","HalfwayToDice","Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.",{"id":107,"by":108,"text":109},{"value":124,"source":74,"evidence":125},"Dragging does not work on touch or mouse",[126,130],{"id":127,"by":128,"text":129},"13875161","clishem","A slider that doesn't slide when swiping on touch devices also is.",{"id":131,"by":132,"text":133},"13875155","gpvos","Nice. Trying to drag the button doesn't work though; I would add that.",{"value":135,"source":74,"evidence":136},"Should be a native checkbox for accessibility",[137,141],{"id":138,"by":139,"text":140},"13876327","graiz","This should really be an \u003Cinput type=\"checkbox\"> with bonus CSS\u002FJS so that it's backward compatible and doesn't break the world of accessibility, tabs, focus, forms, etc. I think…",{"id":142,"by":143,"text":144},"13874896","zichy","Now try to use a valid checkbox input.",[146,150],{"value":147,"source":74,"evidence":148},"Support dragging the switch",[149],{"id":131,"by":132,"text":133},{"value":151,"source":74,"evidence":152},"Use a pointer cursor on clickable elements",[153],{"id":154,"by":155,"text":156},"13875324","kolme","Now that we're at it: clickable things have the \"hand\" cursor. All of the widget is actionable yet the cursor is not always pointy. It's one of my pet peeves. That being said,…",[158],{"value":159,"source":74,"evidence":160},"Can this be used under an open source license?",[161],{"id":162,"by":163,"text":164},"13875216","Klathmon","Can I use this under any kind of OSS license? I'm not the most familiar with codepen so I apologise if it's on there somewhere already.",[166],{"value":167,"source":74,"evidence":168},"Native HTML checkbox input",[169],{"id":138,"by":139,"text":140},{"comments":38,"answered":33,"key":171},[172,175,178],{"id":173,"text":174},"13883026","The first (happy) blink is fractionally slower than the sad blink on purpose. I'm obsessive about details.",{"id":176,"text":177},"13883015","Yes you messed up the transform origin.",{"id":179,"text":180},"13880015","I started learning SVG going through all the jenkov examples - really great resource. The SVGs I create now are designed to be easy to understand because I wanted to pay it…",{"commenters":182,"max_depth":41,"maker_replies":38,"first_comment_mins":34,"lifespan_hours":183},56,183,[185,187,191,194,197,200,203,205,208,211,213,216,219,222,224,225,228,232,236,239,242,244,247,250,252,255,256,259,262,264,266,268,271,275,277,280,282,284,285,286,290,292,294,295,298,302,303,307,310,313,316,319,321,325,328,331,334,337,339,340,343,346,348,350,352,354,356,358,362,364,367,371,373,376,380,382],[88,43,46,186,89,43],"project\u002Fpositive\u002Fdesign",[188,43,43,189,190,43],"13875177","other\u002Fneutral\u002Fnone","Grangar",[192,43,43,189,193,43],"13875226","andai",[195,43,43,189,196,43],"13875433","manuelflara",[198,43,43,189,199,43],"13875974","s_kilk",[201,43,43,189,202,43],"13892207","wattengard",[204,43,43,189,132,43],"13876366",[206,43,43,189,207,43],"13875955","sdrothrock",[209,43,43,189,210,43],"13876090","talmand",[212,43,43,189,132,43],"13876361",[214,43,43,189,215,43],"13878055","skocznymroczny",[217,43,43,189,218,43],"13878582","arthurfm",[220,43,43,189,221,43],"13880516","joshschreuder",[119,40,40,223,120,43],"project\u002Fcritical\u002Fexecution",[127,40,40,223,128,43],[226,40,40,223,227,43],"13875251","jessriedel",[229,40,46,230,231,43],"13875211","project\u002Fpositive\u002Fexecution","Already__Taken",[233,40,43,234,235,43],"13875257","commenter\u002Fneutral\u002Fnone","cpfohl",[237,40,43,234,238,43],"13875270","oneZergArmy",[240,40,43,234,241,43],"13875421","ominous",[154,40,47,243,155,43],"project\u002Fmixed\u002Fdesign",[245,40,43,234,246,43],"13876806","nsgi",[248,40,43,234,249,43],"13877131","splitbrain",[251,40,43,234,155,43],"13936522",[253,40,40,223,254,43],"13875585","redshark1802",[111,40,46,186,112,43],[257,40,47,243,258,43],"13876239","chasingtheflow",[260,40,43,234,261,43],"13876422","tbirrell",[173,40,43,263,10,40],"maker\u002Fneutral\u002Fdesign",[176,40,43,265,10,40],"commenter\u002Fneutral\u002Fexecution",[267,40,43,234,101,43],"13875651",[269,33,46,270,101,43],"13875664","maker\u002Fpositive\u002Fdesign",[272,33,46,273,274,43],"13875836","project\u002Fpositive\u002Fidea","szatkus",[276,33,43,189,210,43],"13876111",[278,33,43,189,279,43],"13878187","1niels",[281,33,43,189,274,43],"13878405",[283,33,43,189,210,43],"13878501",[179,33,43,189,10,40],[138,47,40,223,139,43],[287,47,40,288,289,43],"13876661","project\u002Fcritical\u002Fdesign","ino",[107,32,40,291,108,43],"project\u002Fcritical\u002Fperformance",[77,32,47,293,78,43],"project\u002Fneutral\u002Fperformance",[142,46,40,223,143,43],[296,46,43,234,297,43],"13875005","kuschkufan",[299,41,46,300,301,43],"13876265","maker\u002Fpositive\u002Fnone","iheredia",[131,38,40,288,132,43],[304,38,43,305,306,43],"13875192","commenter\u002Fneutral\u002Fdesign","philliphaydon",[308,38,43,305,309,43],"13875196","falsedan",[311,38,43,305,312,43],"13875278","catshirt",[314,38,43,305,315,43],"13875412","extra88",[317,38,43,305,318,43],"13875415","OJFord",[320,38,43,305,309,43],"13875520",[322,38,47,323,324,43],"13875279","project\u002Fneutral\u002Fdesign","TomMarius",[326,38,46,186,327,43],"13875854","zltm",[329,38,43,305,330,43],"13875579","croon",[332,38,43,305,333,43],"13877078","jimboj",[335,38,43,234,336,43],"13875987","fuzzy2",[338,38,43,263,10,40],"13883038",[96,17,46,273,97,43],[162,341,47,342,163,43],9,"project\u002Fneutral\u002Fnone",[344,341,43,189,345,43],"13876657","ballenf",[55,341,43,347,10,40],"maker\u002Fneutral\u002Fnone",[349,341,43,234,163,43],"13883832",[351,341,43,234,10,40],"13884015",[353,341,43,234,163,43],"13884040",[355,341,43,234,10,40],"13884606",[357,34,46,186,258,43],"13876221",[359,360,46,273,361,43],"13875165",11,"fagnerbrack",[100,363,46,186,101,43],12,[365,31,46,273,366,43],"13875385","jlink",[368,369,47,342,370,43],"13875248",14,"ainiriand",[92,372,46,186,93,43],15,[374,375,43,189,361,43],"13875168",16,[377,378,43,189,379,43],"13875159",17,"laurent123456",[381,378,43,189,193,43],"13875231",[383,384,40,291,385,43],"13875503",18,"dagenleg",[],[388,393,398,402,407,412],{"id":389,"name":390,"points":391,"category":392},"13838659","Sleeping Beauty",319,"games",{"id":394,"name":395,"points":396,"category":397},"13847301","Nomouse",228,"productivity",{"id":399,"name":400,"points":401,"category":19},"13866507","Every Day Is Pi Day",147,{"id":403,"name":404,"points":405,"category":406},"13837804","thisnumber.rocks",134,"infrastructure",{"id":408,"name":409,"points":410,"category":411},"13879475","FaunaDB",131,"data",{"id":413,"name":414,"points":415,"category":19},"13845768","clocks.80limit.com",117,false,"v2",{"id":419,"name":5,"line":6,"ai":416,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":420,"top":17,"kw":421,"maker":10,"domain":5,"tier":18,"attempts":43,"strip":422,"url":9,"mix":423,"praise":85,"objection":116,"sub":20},13874844,0.07,[23,24,25,26,27],"5000000130030330550011151003500500055501",[31,32,33,34],1794036553513]