[{"data":1,"prerenderedAt":453},["ShallowReactive",2],{"project-6415822":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":49,"post_text":50,"what":51,"said":87,"maker_in_thread":203,"shape":213,"grid":217,"attempts":416,"same_week":417,"maker_shows":18,"maker_hidden":445,"reader_version":446,"card":447},"6415822","UI Concept","Focus Transition","title","Show HN: UI Concept – Focus Transition","http:\u002F\u002Fn12v.com\u002Ffocus-transition\u002F","n12v.com","NVI",1379649136,2013,388,72,17,1739,1,"legend","dev_tools","ui focus animation","library",[24,25,26,27,28],"focus animation","keyboard navigation","tab order","web ui","javascript","debated",0.051,{"positive":32,"neutral":33,"mixed":34,"critical":35},16,9,6,13,44,{"idea":38,"design":41,"docs":43,"execution":46,"performance":48},{"positive":39,"critical":40},7,4,{"positive":42,"critical":34},5,{"positive":44,"critical":45},0,2,{"positive":47,"critical":44},3,{"positive":44,"critical":18},[42,47,44,42,42,44,42,42,42,18,44,47,18,44,18,44,18,44,42,18,44,47,47,18,44,18,47,18,47,47,42,42,42,47,18,44,18,42,42,18],null,{"problem":52,"audience":64,"pricing":50,"motivation":50,"time_to_build":50,"stack":73,"openness":85,"stage":86,"team_size":85},{"value":53,"source":54,"evidence":55},"Users lose track of where keyboard focus is after tabbing","commenter",[56,60],{"id":57,"by":58,"text":59},"6416570","mistercow","This is a really great idea. It drives me nuts how pressing tab (or even more commonly, shift-tab) can sometimes lead to focus being \"lost\". And not in the usual sense…",{"id":61,"by":62,"text":63},"6416331","rjurney","Still can't figure out what it is. Hitting tab in a form to switch fields? That exists.",{"value":65,"source":66,"evidence":67},"Web developers and users navigating forms with the keyboard","inferred",[68,72],{"id":69,"by":70,"text":71},"6415997","SwellJoe","Subtle change is often underrated...visual feedback that makes it clear what has changed is a pretty cool improvement. Some of the mildly frustrating elements of using websites…",{"id":57,"by":58,"text":59},[74,81],{"value":75,"source":76,"evidence":77},"JavaScript","maker",[78],{"id":79,"by":11,"text":80},"6415923","A couple of years ago I saw http:\u002F\u002Fosteele.com\u002Ftools\u002Freanimator\u002F, OpenLaszlo based RegExp tester. The animation on tabbing between text fields was unusual and interesting. I…",{"value":82,"source":76,"evidence":83},"CSS",[84],{"id":79,"by":11,"text":80},"unknown","launched",{"praise":88,"objections":116,"requests":152,"questions":177,"alternatives":186},[89,104],{"value":90,"source":54,"evidence":91},"Clean, neat solution that adds useful visual feedback",[92,96,100],{"id":93,"by":94,"text":95},"6416931","batiste","I was expecting some messy JavaScript. This is nice an clean solution.",{"id":97,"by":98,"text":99},"6416042","bliti","This is one of those neat little things that make a big difference in how a program is used and perceived. Very nice work.",{"id":101,"by":102,"text":103},"6416771","nXqd","Like this ! I think this is so simple and neat :)",{"value":105,"source":54,"evidence":106},"Helpful for keyboard users",[107,111,112],{"id":108,"by":109,"text":110},"6416672","harrytuttle","Really like this when using the keyboard. When using the mouse, the transition is implied so it's annoying. Great work though!",{"id":57,"by":58,"text":59},{"id":113,"by":114,"text":115},"6416656","yesbabyyes","Works for me - Ubuntu 13.04, Chromium 28, Firefox 24. It looks way better in Chromium, since it's got the correct focus color and the animation looks more smooth. Firefox is way…",[117,129,140],{"value":118,"source":54,"evidence":119},"Animation is distracting when using the mouse",[120,124,125],{"id":121,"by":122,"text":123},"6416494","noptic","Great idea. Possible improvement: Only show the effect if the user uses the tab key. IMHO the effect is distracting if you use the mouse and are already looking at the focused…",{"id":108,"by":109,"text":110},{"id":126,"by":127,"text":128},"6416029","antidaily","Feels off if you _dont_ use keys. But I guess thats not the point.",{"value":130,"source":54,"evidence":131},"Transition is too fast or subtle to follow",[132,136],{"id":133,"by":134,"text":135},"6421915","SimHacker","OpenLaszlo has had this for years. It's a great idea that works well, but it's not original. The OpenLaszlo implementation animates four shadowed corner chevrons that interpolate…",{"id":137,"by":138,"text":139},"6416319","agumonkey","Interesting but I think it's a bit too subtle or quick.",{"value":141,"source":54,"evidence":142},"Not original; OpenLaszlo and other products had similar effects",[143,144,148],{"id":133,"by":134,"text":135},{"id":145,"by":146,"text":147},"6416130","markbao","This reminds me of the moving brackets between form elements in OpenLaszlo—anyone remember that from circa 2008? (Can't find a live demo, but looks like this:…",{"id":149,"by":150,"text":151},"6421260","aagha","The Opera browser has had this capability for years.",[153,160,170],{"value":154,"source":54,"evidence":155},"Only animate when the keyboard is used",[156,157],{"id":121,"by":122,"text":123},{"id":158,"by":11,"text":159},"6416109","Yes, I’m thinking of a way to turn it on only when the keyboard is used.",{"value":161,"source":54,"evidence":162},"Support for OS-native focus colors",[163,167],{"id":164,"by":165,"text":166},"6416087","Skalman","Such a simple idea - but it does make it easier to follow. The only problem I have is that it's very mac-centric. On my system the focus color is orange and it looks a bit off.…",{"id":168,"by":11,"text":169},"6416104","Unfortunately, this will make colors look off on OS X. \"highlight\" color is different from the focus color on OS X. Hardcoding colors for different OS-s might be more reliable.",{"value":171,"source":54,"evidence":172},"Add to Chromium and Firefox",[173],{"id":174,"by":175,"text":176},"6416047","hayksaakian","Could someone with the appropriate clout contribute this to chromium and Firefox? It seems like in a perfect open source world, a change like this should be simple to at least…",[178],{"value":179,"source":54,"evidence":180},"Why it doesn't work in some browsers or Ubuntu",[181,182],{"id":57,"by":58,"text":59},{"id":183,"by":184,"text":185},"6416015","johnx123-up","Looking good. But, demo doesn't work in Chrome 30.0.1599.47 beta-m",[187,192,196],{"value":188,"source":54,"evidence":189},"OpenLaszlo form field bracket animation",[190,191],{"id":133,"by":134,"text":135},{"id":145,"by":146,"text":147},{"value":193,"source":76,"evidence":194},"Reanimator RegExp tester tab animation",[195],{"id":79,"by":11,"text":80},{"value":197,"source":54,"evidence":198},"Excel web cell focus sliding",[199],{"id":200,"by":201,"text":202},"6417042","dspillett","I have seen this (well, something very similar) done before: newer versions of MS Excel (or at least the web based version) slide the cell focus indicator around instead of just…",{"comments":204,"answered":18,"key":205},14,[206,207,210],{"id":79,"text":80},{"id":208,"text":209},"6442891","I just released Flying Focus 1.2 that doesn’t do anything on mouse interactions.",{"id":211,"text":212},"6415981","Maybe I should make an animated GIF next time.",{"commenters":214,"max_depth":42,"maker_replies":204,"first_comment_mins":215,"lifespan_hours":216},55,39,122,[218,222,226,230,233,237,239,243,246,248,249,252,255,256,259,261,262,266,268,271,274,278,282,285,288,291,295,296,298,301,304,307,309,310,313,318,321,324,327,329,331,335,337,339,340,342,343,344,347,349,351,354,355,358,359,363,367,371,374,378,382,386,389,391,393,397,400,402,404,406,411,413],[219,44,42,220,221,44],"6416098","project\u002Fpositive\u002Fidea","nostromo",[223,44,44,224,225,44],"6416128","commenter\u002Fneutral\u002Fnone","mtdewcmu",[227,44,47,228,229,44],"6416325","project\u002Fneutral\u002Fidea","gcb1",[231,44,44,224,232,44],"6417636","taternuts",[234,44,44,235,236,44],"6417028","other\u002Fneutral\u002Fidea","edwinyzh",[238,44,42,220,225,44],"6418705",[240,44,44,241,242,44],"6421669","other\u002Fneutral\u002Fdesign","deathanatos",[244,44,44,224,245,44],"6422154","fyolnish",[200,44,42,247,201,44],"project\u002Fpositive\u002Fdesign",[79,18,44,228,11,18],[250,45,42,220,251,44],"6415966","cmdli",[253,45,42,247,254,44],"6416014","rurounijones",[121,47,42,247,122,44],[257,47,44,224,258,44],"6416816","vanderZwan",[208,47,44,260,11,18],"project\u002Fneutral\u002Fdesign",[69,40,42,220,70,44],[263,42,18,264,265,44],"6415948","project\u002Fcritical\u002Fdesign","ecubed",[211,42,44,267,11,18],"maker\u002Fneutral\u002Fnone",[269,42,44,224,270,44],"6416016","joeblau",[272,42,47,260,273,44],"6416176","fletchowns",[275,42,47,276,277,44],"6416641","project\u002Fneutral\u002Fnone","egeozcan",[279,42,18,280,281,44],"6416032","project\u002Fcritical\u002Fdocs","mischanix",[283,42,18,280,284,44],"6416059","erichurkman",[286,42,44,287,11,18],"6416078","maker\u002Fneutral\u002Fdocs",[289,42,44,224,290,44],"6416107","SCdF",[292,42,47,293,294,44],"6416679","project\u002Fmixed\u002Fdesign","tripzilch",[164,34,18,264,165,44],[168,34,44,297,11,18],"maker\u002Fneutral\u002Fdesign",[299,34,44,300,165,44],"6416260","commenter\u002Fneutral\u002Fdesign",[302,34,18,264,303,44],"6416552","thomasahle",[305,34,44,224,306,44],"6416670","rorrr2",[308,34,44,224,165,44],"6416792",[174,39,42,220,175,44],[311,39,42,220,312,44],"6416156","ygra",[314,315,18,316,317,44],"6416755",8,"project\u002Fcritical\u002Fidea","jeffmess",[319,33,47,260,320,44],"6416506","ohazi",[322,33,44,224,323,44],"6416510","anigbrowl",[325,33,44,326,11,18],"6416532","project\u002Fneutral\u002Fexecution",[108,328,47,293,109,44],10,[330,328,44,267,11,18],"6422041",[332,333,47,228,334,44],"6416304",11,"PhasmaFelis",[133,336,18,316,134,44],12,[338,336,44,297,11,18],"6421990",[145,35,44,224,146,44],[341,35,44,224,312,44],"6416154",[126,204,18,264,127,44],[158,204,44,297,11,18],[345,204,47,260,346,44],"6416939","onli",[348,204,44,267,11,18],"6422039",[137,350,18,264,138,44],15,[352,32,18,264,353,44],"6422381","rndstr",[97,16,42,247,98,44],[57,356,47,357,58,44],18,"project\u002Fmixed\u002Fexecution",[113,356,47,357,114,44],[360,356,42,361,362,44],"6416777","project\u002Fpositive\u002Fexecution","icebraining",[364,365,47,293,366,44],"6417829",19,"romaniv",[368,369,42,361,370,44],"6415967",20,"DrewAllyn",[372,369,44,373,11,18],"6415976","maker\u002Fneutral\u002Fexecution",[375,376,42,220,377,44],"6416706",21,"smickie",[379,380,47,293,381,44],"6417512",22,"nfoz",[383,384,47,228,385,44],"6421799",23,"notdan",[387,384,44,388,11,18],"6422028","commenter\u002Fneutral\u002Fidea",[149,390,18,316,150,44],24,[392,390,44,388,11,18],"6422613",[394,395,47,228,396,44],"6422383",25,"BHSPitMonkey",[183,398,18,399,184,44],26,"project\u002Fcritical\u002Fperformance",[401,398,44,267,11,18],"6416091",[93,403,42,361,94,44],27,[101,405,42,247,102,44],28,[407,408,42,409,410,44],"6416053",29,"project\u002Fpositive\u002Fnone","divya_v",[61,412,18,316,62,44],30,[414,412,47,260,415,44],"6417132","pests",[],[418,423,428,432,437,441],{"id":419,"name":420,"points":421,"category":422},"6444027","Drawingboard.js",233,"languages",{"id":424,"name":425,"points":426,"category":427},"6427031","tweet-secret",128,"security_privacy",{"id":429,"name":430,"points":431,"category":20},"6445675","OpenTokRTC",93,{"id":433,"name":434,"points":435,"category":436},"6438925","Clever Routines",88,"productivity",{"id":438,"name":439,"points":440,"category":20},"6444413","Nightcode",68,{"id":442,"name":443,"points":444,"category":422},"6427498","Solid",63,false,"v2",{"id":448,"name":5,"line":6,"ai":445,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":449,"top":18,"kw":450,"maker":11,"domain":10,"tier":19,"attempts":44,"strip":451,"url":9,"mix":452,"praise":90,"objection":118,"sub":21},6415822,0.05,[24,25,26,27,28],"5305505551031010105103310131335553101551",[32,33,34,35],1793990897868]