Mark DiMarco: User Interface Algorithms [JSConf2014]

52K views · 12 years ago · talk · intermediate · evergreen

Mark DiMarco's JSConf 2014 talk on algorithms for user interfaces. It shows how techniques such as Voronoi diagrams can make small or thin hover targets easier to hit, and argues that algorithms matter in front-end work.

HN people cite it for the Voronoi-diagram approach to hover targets and as proof that algorithms play a real role in front-end engineering.

12 comments from Hacker News

j
@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 "programs" what was traditionally the back-end API. I sounds like you have had some unfortunate interview experiences. The interview process should be about uncovering the talent and potential - not one-upmanship. I have an article on Medium that is the foundation of my interviews: link What are you missing? I would not say you are missing anything. Rather a case of pulling together your skills and focussing them on what you really enjoy doing. It sounds like it is UI more than FE. If that's correct then your engineering expertise will lie on componentization, engineering applications ("system") and UI performance. Demonstrate your skills with real examples, projects, code you use to learn and experiment.
RecommendsView on HN
c
@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
a
@agp25722014 · in “Pointer Pointer”
This video explains about Voronoi Diagrams if anyone is interested ▶ this video
RecommendsView on HN
K
@KhalilK2014 · in “User Interface Algorithms [video]”
Submitted the video to Hacker News.
RecommendsView on HN
d
@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
a
@aenean2014 · in “User Interface Algorithms”
Submitted the video to Hacker News.
RecommendsView on HN
s
@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
s
@scrollaway2014 · in “Mark DiMarco: User Interface Algorithms [JSConf2014] [video]”
Submitted the video to Hacker News.
RecommendsView on HN
d
@dgellow2014 · in “User Interface Algorithms [video]”
Submitted the video to Hacker News.
RecommendsView on HN
n
@neurobro2014 · in “User Interface Algorithms”
Submitted the video to Hacker News.
RecommendsView on HN
c
@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
g
@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".