Frontend engineer domain knowledge interview questions

As asked

Cloudflare Turnstile is a CAPTCHA replacement that validates users are human without showing puzzles. What signals does a system like Turnstile collect to distinguish bots from humans, and what are the privacy and evasion trade-offs compared to reCAPTCHA?

Sample answer outline

Turnstile collects passive signals: browser fingerprint (Canvas, WebGL, font metrics), JavaScript environment consistency checks (VM artifacts, headless browser indicators), network characteristics, interaction patterns (mouse movement, timing), and PoW challenges. It does not collect cross-site behavioral data, unlike Google's reCAPTCHA which leverages Google's browsing history tracking. Evasion trade-offs: sophisticated bots can fake mouse movements and use real browsers via Playwright, so Turnstile combines multiple signals and rotating challenge types. The privacy advantage is that Cloudflare does not build a cross-site profile of the user.

Expect these follow-ups

• How would an adversary using a real browser controlled by Selenium evade Turnstile, and how does Turnstile try to detect that?
• What is a cryptographic Proof-of-Work challenge and how does it add friction for bots at scale?

As asked

Traditional vector tools like Illustrator model paths as closed or open Bezier curves where each point connects to exactly two neighbors. Figma introduced vector networks where a point can connect to any number of other points in any direction. As an engineer, what data structure would you use to represent a vector network and what algorithms does this complicate compared to a simple path?

Sample answer outline

A strong answer models the vector network as a directed or undirected graph where vertices are anchor points with Bezier handles and edges are cubic Bezier curves. This immediately complicates fill computation: deciding which regions are 'inside' requires a planar graph algorithm, and hit testing for fill regions requires computing faces of the planar subdivision rather than a simple winding number check. The candidate should mention that self-intersecting edges make fill computation more complex than with simple paths, and that the stroke rendering must handle junctions where more than two edges meet at a vertex. A great answer references computational geometry concepts like the DCEL (doubly connected edge list) for planar subdivisions.

Expect these follow-ups

• How would you compute which closed regions in a vector network should receive a fill color?
• How would you implement boolean operations (union, intersect, subtract) on vector networks?