HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Mark DiMarco: User Interface Algorithms [JSConf2014]

JSConf4 HN recommenders · recommended in 4 months, 2014-2018
YouTube
52K views · 12 years ago · talk · evergreen

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.

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

Web developmentUX & UI designAlgorithms & data structures#uialgorithms#dropdownmenus#mouseinteraction#javascript#front-end

6 comments from Hacker News

@currysausage2018 · in “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

CitesView on HN
@jsteenkamp2015 · in “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 components that integrate the front-end application with what have traditionally been back-end APIs and services. In many cases when people say FE they mean both FE and UI. I would not get hung up on these but they help to clarify what you are talking about and who you are trying to hire. In the case of design and pixels there are specific challenges around dealing with layout and CSS and achieving 60fps. Creating UI components is an exciting area. For example see Pure UI ( link ) by @rauchg. Mess in Web Components ( link ). Challenge of style encapsulation... So there are a lot of unique challenges and skills and experience required in UI engineering. There are also exciting developments that start to push more overlap between UI and FE. For example GraphQL - the UI is "language" that "pr

RecommendsView on HN
@cipher02014 · in “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

RecommendsView on HN
@gorhill2014 · in “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".

CitesView on HN
@dkannan2014 · in “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

RecommendsView on HN
@scrollaway2014 · in “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

RecommendsView on HN
Sebastian Markbage: Minimal API Surface Area | JSConf EU 201424:28

Sebastian Markbage: Minimal API Surface Area | JSConf EU 2014

JSConf
71K views • 12 years ago
Nicholas Zakas: Scalable JavaScript Application Architecture52:23

Nicholas Zakas: Scalable JavaScript Application Architecture

YUI Library
68K views • 15 years ago
[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook18:55

[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook

JSConf
45K views • 13 years ago
Cheng Lou - On the Spectrum of Abstraction at react-europe 201635:32

Cheng Lou - On the Spectrum of Abstraction at react-europe 2016

ReactEurope
63K views • 10 years ago
"Building a Toolkit for Design" by Matthew Griffith32:25

"Building a Toolkit for Design" by Matthew Griffith

elm-conf
25K views • 8 years ago
Hey Underscore, You're Doing It Wrong!36:31

Hey Underscore, You're Doing It Wrong!

InfoQ
141K views • 13 years ago
Pete Hunt: React: Rethinking best practices -- JSConf EU29:32

Pete Hunt: React: Rethinking best practices -- JSConf EU

JSConf
548K views • 13 years ago
Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...35:12

Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...

JSConf
808K views • 8 years ago
[JSConfUS 2013] Steven Wittens: Making WebGL Dance30:55

[JSConfUS 2013] Steven Wittens: Making WebGL Dance

JSConf
56K views • 13 years ago
Don't Make Me Click1:04:47

Don't Make Me Click

Google TechTalks
73K views • 18 years ago
Hacker Way: Rethinking Web App Development at Facebook44:36

Hacker Way: Rethinking Web App Development at Facebook

Meta Developers
900K views • 12 years ago
Building a Better Web Browser - James Mickens - Harvard CS Colloquium 20151:07:46

Building a Better Web Browser - James Mickens - Harvard CS Colloquium 2015

Paul Irish
29K views • 10 years ago
Crockford on JavaScript - Section 8: Programming Style & Your Brain1:06:46

Crockford on JavaScript - Section 8: Programming Style & Your Brain

YUI Library
111K views • 14 years ago
Google I/O 2011: Java Puzzlers - Scraping the Bottom of the Barrel54:15

Google I/O 2011: Java Puzzlers - Scraping the Bottom of the Barrel

Google for Developers
60K views • 15 years ago
React.js Conf 2016 - Ben Alpert - What Lies Ahead27:45

React.js Conf 2016 - Ben Alpert - What Lies Ahead

Meta Developers
50K views • 10 years ago
Daniel Henry Holmes Ingalls Jr.: The Live Web. Drag 'n drop in the cloud27:21

Daniel Henry Holmes Ingalls Jr.: The Live Web. Drag 'n drop in the cloud

JSConf
8K views • 13 years ago
Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 201340:58

Pete Hunt: React - Rethinking Best Practices (updated) - JSConf.Asia 2013

JSConf
58K views • 12 years ago
17. Succinct Structures I1:20:11

17. Succinct Structures I

MIT OpenCourseWare
17K views • 12 years ago
"Controlling Time and Space: understanding the many formulations of FRP" by Evan Czaplicki40:55

"Controlling Time and Space: understanding the many formulations of FRP" by Evan Czaplicki

Strange Loop Conference
69K views • 12 years ago
Keynote - JSON Graph: Reactive REST at Netflix54:58

Keynote - JSON Graph: Reactive REST at Netflix

Association for Computing Machinery (ACM)
41K views • 11 years ago