top>Speakers>Tearing down the game 'Brick-Break-Anywhere': Journey into the Uncharted Territories of DOM Scripting

canalun (Kanaru Sato)kanarun(he)

Canalun is a software engineer with a deep love for browsers and DOM!
At Techtouch, Inc., he focuses on exploring and embedding elements on web pages, while diving deeper into the fascinating details of browsers, HTML, CSS, and JS😊

Track C

16:00-16:30(30 min)

Tearing down the game 'Brick-Break-Anywhere': Journey into the Uncharted Territories of DOM Scripting

Spoken Language: Japanese
Slides Language: English

Although often perceived as a technology in good old days, DOM scripting (directly manipulating the DOM using browser APIs) is an active and vital technology that underpins modern front-end stacks such as Playwright and React.

In this session, we will dive into practical and advanced DOM scripting through an explanation of the implementation of the game 'Brick-Break-Anywhere' (demo), in which elements on a web page are eliminated by hitting them with a ball, much like a game of brick-breaker.

In particular, we will shine a spotlight on technical details such as the method of element exploration adopted by Playwright, relatively recent APIs, and more.

Also the followings will be highlighted!

Implementation of collision detection for elements in Shadow DOM and iframes
Determining whether an element is visible to the user, a task that cannot be accomplished only with visibility or opacity
A method to eliminate elements from the outermost layer while keep the page layout as much as possible

Let's embark on a journey into the vast world of DOM!