Ben Kamens

A classic article about a no-delay solution to this problem, not mentioned in the linked thread: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

They haven't been open to the public (yet), but at Khan Academy all ours have been "healthy hackathons." Have personally loved it. Eating and sleeping well required. We even bring in healthier snacks than normal and force people out at midnight. More here if interested: http://hackweek.khanacademy.org http://bjk5.com/post/56123354891/how-we-ran-the-second-khan-academy-he…

We have a tool that does Canvas drawing from React too. Currently some pieces are cached in retained mode but it's just an implementation detail for certain performance characteristics. https://github.com/facebook/react-art Canvas APIs are currently not as fast as the DOM renderer. There's also a lot of added complexity with regards to layout, text flows and text input. The code you'd have to ship down to solve all that with pure Canvas isn't worth it for a lot of applications. For things that has it's own layout and no text input (like charts/data visualizations) or complex editors like Khan Academy's math content editor (http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-techno… it definitely makes sense.

SnapChat uses App Engine: http://gigaom.com/2013/05/07/snapchats-act-of-faith-in-building-on-goo… So does Khan Academy. Ben Kamens, their lead developers, writes a lot of great App Engine tips on his blog: http://bjk5.com/post/54202245691/the-app-engine-way

Whether or not you use it, it's all about understanding the tradeoffs you're making. It's worked out for us :) If you want more from us about GAE, our lead developer Ben Kamens' blog is full of good stuff: http://bjk5.com

Great work so far! I would suggest that when you have enough lessons, you create a knowledge tree instead of just a list, similar to what Khan Academy does (http://bjk5.com/post/1664635835/constellation-knowledge).

>So what exactly did we lose? It's quite simple: by moving software into the cloud and turning them into web-based SaaS offerings, many of the basic affordances that used to be standard have gotten watered down or removed entirely. Here are some examples: >Menus let you cross over empty space and other menu items, instead of strictly enforcing hover rectangles. I know the guy, Frank Leahy, who implemented that feature invented by Bruce "Tog" Tognazzini. When he was at Apple, he rewrote the Menu Manager for Mac SE and Mac II. We were working together on a project at Current TV, and reminiscing about how great the original Apple Human Interface guidelines were, and how Apple had totally lost their original devotion to excellent user interface design, and I mentioned how the original edition of the Apple HIG book I had actually illustrated, documented, and justified that subtle feature. Frank proudly told me he was the one who implemented it for the Menu Manager, and that he was touched that somebody actually noticed and appreciated it as much as I did. https://news.ycombinator.com/item?id=17404401 https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown >Breaking down Amazon’s mega dropdown [...] >DonHopkins on June 26, 2018 [–] >The comments are actually great -- even Tog weighs in! It also mentions Frank Lehey, who rewrote the Menu Manager for Mac SE and Mac II. >Jake Smith • 5 years ago This was first implemented by Apple's HID team back in the 80s,…

Mountain View, CA (we also love interns, and remote is a possibility for the right candidate) --- At Khan Academy, we're a small, 52-person non-profit tech startup. We're trying hard to do good for the world. Here's a testimonial we received just two days ago: January 29, 2014 I am an adult returning to school for a midlife career change. I have always disliked math and thought I was bad at it -- and my last math class was over 20 years ago! But I just passed my Accuplacer placement test, thanks to Khan Academy. Thank you so much for making it fun and easy to refresh my skills. I also purchased the Accuplacer test prep app, but I found myself coming back to Khan Academy more often because I liked it more. Now I am learning coding at school, so I'll definitely be back for more! Lisa This letter is one story, but every month we hear about hundreds of lives like this that we've transformed. -- Most of you reading this are familiar with Sal's videos, but we also have hundreds of videos by other teachers, partnerships with organizations like MoMA and the California Academy of Sciences, and a huge library of interactive exercises. Over 20 million math problems are done every week on our site. That's a lot. With this huge scale, we're able to study learning in a way that wasn't previously possible. We've run tests and found that students learn more when they're given harder problems based on an intelligent machine-learning algorithm [1]. Right now we have dozens of A/B…

An interesting semi-related follow up from the former Fog Creek VP of Eng (now at Khan Academy): http://bjk5.com/post/3340326040/in-any-language-you-want-khan-academy-… Not understanding the underlying fundamentals when programming in high level languages can be really dangerous, but generally it's not. I kind of view the ongoing development of Compilers, VMs, JITs, etc. as being somewhat parallel to that of processors. At one point, optimizing with machine code was crucial to obtain performant code, but with crazy-ridiculous superscalar processors and all of the things that come with it, all you can really do is code C, compile with -O2, and then guess and check on optimizations. I wouldn't be surprised if this was the case in most high-level languages before long. Don't get me wrong, I first read this in High School and this was the essay that made me love C, and made me want to try to get an internship at Fog Creek. I just think it's starting to show its age.

See here for how Amazon's mega menu was designed around this problem: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

In the web sphere, I recall Amazon having done something like this in the very early days when there was a sidebar with categories that you could kinda drill into. Mouseover one, and there was an invisible triangle off to the right that if you kept inside of, it wouldn't switch the current category. https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc ... 1: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown 2: https://xxyxyz.org/line-breaking/

Github's site is really fast. Many of the pages it displays are dense with information and I think it displays everything well, for example viewing diffs in Github is very good, it smartly wraps all the text so you can view everything on the screen and everything loads fast. Try comparing it to Bitbucket's diff view, which can't wrap text amongst other things. It's light years better in comparison. It looks good at any window width with little wasted whitespace. Amazon's site works pretty well. Their product range is quite a mess to navigate but I've never been annoyed much by their front end. It seems pretty well engineered, eg. [1] [1] https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Here's an article that reverse engineers Amazon's implementation; http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown - not the first implementation by a long shot, as pointed out elsewhere in this thread, but perhaps the first implementation for the web.

Well done! Moving the mouse to a child resets the position though. You may need some JS to do some fancy stuff like here: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Or to keep it JS free there might be a way to structure the HTML similar to: <Nav1><ChildNav1.../></Nav1>. Hover a :hover pseudo on <Nav1> will also fire when hovering over <ChildNav1 />.

There's a good article about Amazon implementing this feature for their mega menu. Blew me away when I first read it, it's very obvious and simple in hindsight. http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

A/Bingo, a Rails A/B testing plugin that I wrote in a part-time week and used for a few years. The main reason I'm proud of it is Ben Kamens and company ported it to run on Google App Engine for Khan Academy, where it formed the core of their experimentation platform for a while. http://bjk5.com/post/10171483254/abingo-split-testing-now-on-app-engin…

I think this post summarizes it really well: http://bjk5.com/post/12829339471/ab-testing-still-works-sarcastic-phew If you have any sort of decent dashboarding the cost of a wrong decision is really not all that bad compared to the cost of being a purist.

The drag-and-drop is done from scratch. Quirk just listens to browser events like mousedown/mousemove/mouseup and turns that into manipulations of the circuit. Getting it to work well across all the browsers, and modes of interactions, is quite finicky. For example, mobile browsers refused to not scroll even if `event.preventDefault()` was called, so I had to overlay the drag targets with transparent divs that have `touch-action: none`. Quirk doesn't have menus.. you might be thinking of the recording of Davy's simulator? Those menus also look custom-made. I actually wouldn't call them "nice", because they lack important polish. Read this: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown I'm sure there are libraries for menus and things like that, but I generally prefer to try to do it myself unless those libraries have a really good interface.

Trying to be clever is the main thing that has led to progress and eventual better design. Amazon's drop down menu comes to mind - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

We're serious about intern mentorship: http://bjk5.com/post/23266999170/how-intern-mentorship-works-at-khan-a… If you're an iOS dev who wants to be mentored for a few months by a former UIKit author, hit me up. :) [email protected]

Read this: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown for another useful example of this technique.

Amazon have done this to improve the performance of dropdown menu. http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

For those who are phallus measuring, here's the biggest i've ever seen: http://bjk5.com/post/30813320623/what-traffic-from-60-minutes-looks-li… Yep, that's per second.

They seem to have a similar design, but the functionality isn't as good; it seems to just be a delay, rather than checking the trajectory of the mouse. See http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

I like it! A usability annoyance: when I hover over "Blog", and then move my mouse to click the first blog article's headline, the menu changes to "success stories". At [1] they discuss how Amazon fixed that (HN discussion at [2]). [1] http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown [2] https://news.ycombinator.com/item?id=5330998

When they don't implement the magical amazon triangle, yes http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown (discussed on HN several times previously)

Amazon | AmazonUI (AUI) | Seattle; San Francisco | Onsite | Full-Time AUI is the Front-end platform being adopted on Amazon.com. We are modernizing the company's front end code base, while diving deep on latency, performance, API design, user experience, and cross browser/device compatibility. Basically, we need people who can build libraries, not just use them. Our team is incredibly customer-centric. For any given situation, we have to make the right choice on behalf of the folks using our platform -- and we have to do it at scale. That may sound cliche, but within the next hour AUI will be used to generate tens of millions of page views. And that's just in the US. Worldwide, we're used on more than 90% of requests across all device categories. It's a lot of responsibility, but also a lot of opportunity. For example, we can run experiments that change almost every page on Amazon.com. We can also impact the page load time for the entire site. Have you ever tried to figure out why your site is 6ms slower? We have. We use these tools (but don't expect you to know all of them): HTML, CSS, JavaScript, Ruby, Java, Perl, Git And to give you an idea of who you will be working with, the folks responsible for this articles are on our team: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown If you're interested in senior engineering or technical program manager roles, drop us an email: aui-hn (@) amazon (.) com