Mark DiMarco: User Interface Algorithms [JSConf2014]

JSConf · 52K views · 2014 · 27:42

Open on YouTube

Web developmentUX & UI designAlgorithms & data structurestalk

Why Hacker News recommends it

HN links it whenever menu hover problems or nearest-to-pointer selection come up, and as proof algorithms matter in front-end work.

What it is

A JSConf 2014 talk visually breaking down algorithms behind everyday UI patterns, such as dropdown menus that vanish when the mouse drifts and picking the nearest target to the cursor. It shows how these are implemented in JavaScript.

Recommended by 4 HN commenters across 4 different months, 2014 to 2018.

What Hacker News said

Recommends scrollaway · 2014-07 · on “How Does One Create A Gtk+ Application?”

Am I correct thinking you are talking about this bug? [LINK] If so, then yes they are aware of it and treating it as critical. Edit: Reading into this bug is so cool. This video was linked from it, fascinating stuff: [this video]

Recommends dkannan · 2014-08 · on “Mapping Migration in the United States”

Mark DiMarco gave a talk at JSConf 2014 called User Interface Algorithms which touches upon this [this video] relevant section starts at 4:13 rest of the talk is good as well

Recommends cipher0 · 2014-12 · on “Show HN: Piste.io”

Great work! It might be cool if you could use voronoi diagrams to select the closest path to the mouse's position like the NYT did [0] because without really zooming in, the lines on some terrains appear to be very thin which makes hovering over a specific one a little harder. There's also a great talk that discusses this from JSconf2014 [1] [0] [LINK] [1] [this video]

Recommends jsteenkamp · 2015-07 · on “Ask HN: The Case for the “Front End Engineer” Role”

I think you make an excellent observation that FE is a system engineering challenge. Algorithms do play an important role as you can see in this great presentation by Marc de Marco ( [this video] ) However I think it's fair to say most FE engineers apply existing solutions and the system design is a bigger part of their role. I differentiate between UI Engineering and Front-End Engineering. The former emphasises design integration (pixels) and performance (rendering). The latter is broader scope and emphasises the systems engineering. Both have to deal with system design. UI is about components and messaging across the components with the front-end application being the "system". FE is about comp

Cites gorhill · 2014-11 · on “Pointer Pointer”

Look beyond the funny app. Think of the challenge of finding an efficient solution to the original problem regardless of its "unseriousness": finding the optimal picture according to pointer position. Same solution is also useful for other more serious applications: [this video] Edit: Sorry, I missed the "me" in your "entertain me".

Cites currysausage · 2018-06 · on “Show HN: Mimicking the Bloomberg menu widget without JavaScript”

The original implementation at bloomberg.com is really well-executed, even solving the famous problem that when you accidentally hover another menu item while moving the cursor to the right, you might activate the adjacent menu item. [1] It took VLC ages to get rid of this issue, but it is solved as of VLC 3.0.3 (relevant Qt bug: [2]). [1] [this video] [2] [LINK]