- ID scansione:
- 8c0c9952-8e84-427a-82f7-37b7c8a149a5Fatto
- URL inviato:
- https://lanparty.house/
- Report terminato:
Link · 24 trovati
I link in uscita identificati dalla pagina
| Link | Testo |
|---|---|
| https://workers.cloudflare.com | Cloudflare Workers |
| https://sandstorm.io | Sandstorm.io |
| https://capnproto.org | Cap'n Proto |
| https://protobuf.dev/ | Google's Protocol Buffers |
| https://github.com/kentonv | @kentonv |
| https://news.ycombinator.com/user?id=kentonv | kentonv |
| https://bsky.app/profile/kentonvarda.com | @kentonvarda.com |
| https://x.com/KentonVarda | @KentonVarda |
| https://www.nytimes.com/2012/07/06/technology/at-hacker-hostels-living-on-the-cheap-and-dreaming-of-digital-glory.html | the Chez JJ hacker house network |
| https://cloudflare.com | Cloudflare |
Variabili JavaScript · 3 trovate
Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente
| Nome | Tipo |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
Messaggi di log della console · 1 trovati
Messaggi registrati nella console Web
| Tipo | Categoria | Log |
|---|---|---|
| error | network |
|
HTML
Il corpo HTML non elaborato della pagina
<!DOCTYPE html><html><head>
<title>LAN Party House</title>
<meta charset="utf-8">
<meta name="viewport" content="width=800">
<link rel="stylesheet" type="text/css" href="/style.css">
<meta property="og:title" content="LAN Party House">
<meta property="og:type" content="website">
<meta property="og:image" content="https://lanparty.house/images/og-image.jpg">
<meta property="og:url" content="https://lanparty.house/">
<meta property="og:description" content="We built a(nother) house optimized for LAN Parties.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="lanparty.house">
<meta name="twitter:url" content="https://lanparty.house/">
<meta name="twitter:title" content="LAN Party House">
<meta name="twitter:description" content="We built a(nother) house optimized for LAN Parties.">
<meta name="twitter:image" content="https://lanparty.house/images/og-image.jpg">
<meta name="twitter:creator" content="@KentonVarda">
</head>
<body>
<!--=============================================================================-->
<section>
<div class="heading" style="left: 5%; top: 5%;">
<h1>We built our house for LAN parties</h1>
<p>This is our basement game room.</p>
</div>
<img class="bg" src="/images/game-room-action.jpg" alt="A photo depicts the game room, 18 feet wide and 24 feet long, full of people playing video games. The room is a finished basement room; it is carpeted with beige walls and no windows. On the far wall is a 98-inch TV. Along both side walls are rows of computer screens, six on each side. Each screen sits inside wood panel cabinetry which folds out to provide a desk in front of it. People are sitting at all the desks, playing video games. In the middle of the room, facing the TV are two recliner loveseats. Someone is sitting at one of them, holding a controller and playing a video game on the TV.">
<div class="note" style="left: calc(84% - 125px); top: 62%; width: 250px;">
<p>12 PCs are built into the walls.</p></div>
<div class="line V light" style="top: 45%; left: 84%; bottom: 38%;"></div>
<div class="line point" style="top: 45%; left: 84%;"></div>
</section>
<!--=============================================================================-->
<section id="gamestation">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Game Stations</h1>
<p>These fold up nicely when not in use.</p>
</div>
<img class="bg" src="/images/gamestation.jpg" alt="A photo shows an up-close view of the game stations that lined the left wall in the previous photo. In this photo, one station is open, while the others are all closed. The closed stations merely look like wood paneling on the wall; the monitors are entirely hidden. The open station shows that a panel in front of the monitor folds outwards and down to become the desk on which the keyboard sits. Two panels below this one swing outwards to form supports for the left and right sides of the desk. The monitor is on a retractable mount such that it can be pulled away from the wall, closer to the user. There is a power outlet behind the monitor, suitable for charging a phone while sitting at the station.">
<div class="note" style="left: 72%; top: calc(27% - 30px);">
<p>Closed station</p></div>
<div class="line H" style="left: 63%; top: 27%; right: 28%;"></div>
<div class="line point" style="left: 63%; top: 27%;"></div>
<div class="note" style="left: 72%; top: calc(37% - 30px);">
<p>Open station</p></div>
<div class="line H" style="left: 41%; top: 37%; right: 28%;"></div>
<div class="line point" style="left: 41%; top: 37%;"></div>
</section>
<!--=============================================================================-->
<section id="ddr">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Dance Dance Revolution</h1>
<p>There are DDR pads in the floor.</p></div>
<img class="bg" src="/images/ddr-hatch.jpg" alt="A photo shows the floor of the game room. The floor has a row of four removable panels. The panels are aluminum with carpeting on top matching the rest of the floor and retractable handles at either end. One of the panels has been lifed and placed to the side, revealing a Dance Dance Revolution game pad underneath.">
</section>
<!--=============================================================================-->
<section id="office">
<div class="heading" style="left: 5%; top: 5%;">
<h1>The Upstairs Office</h1>
<p>We can game here too.</p>
</div>
<img loading="lazy" class="bg" src="/images/office-boardgames.jpg" alt="A photo depicts the office room, 16 feet wide and 20 feet long. Large windows on the far side show it is night time, with distant lights lining the horizon. In the middle of a room is a large wood conference table, aronud which several people are gathered, playing a board game. The table surface appears to be made up of several wood panels with cracks in between.">
<div class="note" style="left: calc(46% - 100px); top: 57%; width: 200px;">
<p>Board games are games, right?</p></div>
<div class="line V" style="top: 48%; left: 46%; bottom: 43%;"></div>
<div class="line point" style="top: 48%; left: 46%;"></div>
</section>
<!--=============================================================================-->
<section id="office-computers">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Computer Mode</h1>
<p>The table also transforms to reveal six more game stations.</p>
</div>
<img loading="lazy" class="bg" src="/images/office-action-overhead.jpg" alt="This photo depicts the same room as before, but now the conference table has transformed into six computer stations. The panels that formed the table surface before flip up, revealing a monitor mounted underneath. A second layed below them becomes the surface on which the keyboards sit. People are sitting at all the computers, playing video games. At the back of each station there is a slot where the keyboard and mouse are stored while not in use. Extending from the back side of the conference table is a normal-looking desk surface that does not fold up. Instead, a large curved monitor sits on top.">
<div class="note" style="left: calc(16% - 125px); top: 59%; width: 250px;">
<p>Two sit-stand desks in the back are our personal workstations.</p>
<p>(But that's not me in the seat. That's Lester.)</p>
</div>
<div class="line V light" style="left: 16%; top: 39%; bottom: 41%;"></div>
<div class="line point" style="left: 16%; top: 39%"></div>
</section>
<!--=============================================================================-->
<section id="conduits">
<div class="heading" style="left: 5%; top: 5%;"><h1>Cable Management</h1></div>
<img loading="lazy" class="bg" src="/images/conduits.jpg" alt="Four photos reveal how cables are managed. The top-left photo shows a trough in the center of the office table containing a mass of cables from the six computers. This trough is only visible when the stations are open, and only if you look from the side to see between the rows of monitors. The top-right photo shows the space under the office table. Wires come out of the middle of the table and enter holes in the floor. The lower-left photo shows where these cables eventually endup, coming out of cable conduits in the wall of another room. The lower-right photo shows another set of cables entering this room through a hole in the wall; these cables come from the game room.">
<div class="note" style="top: 40%; left: calc(50% - 125px); width: 250px;">
<p>Video and USB cables pass into conduits...</p>
</div>
<div class="note" style="top: 85%; left: calc(50% - 125px); width: 250px;">
<p>Which eventually lead to...</p>
</div>
</section>
<!--=============================================================================-->
<section id="engine-room">
<div class="heading" style="left: 5%; top: 5%;">
<h1>The Engine Room</h1>
</div>
<img loading="lazy" class="bg" src="/images/engine-room.jpg" alt="The photo depicts a room with three computer racks side-by-side. The center and right racks each hold ten computers; these are the game machines hooked up to the monitors seen in previous photos. The right rack is mostly unpopulated, but contains two computers that are our personal desktops, and a server machine, and one chassis that is currently empty. All of the machines except the server are in 4U rackmount chasis; the server is 2U. The racks are embedded in the wall. To their right is a closed door which leads to their back side. Above the racks is an air vent which provides cold air from a dedicated air conditioner; the intake is on the other side of the machines.">
<div class="note" style="left: 58%; top: calc(53% - 30px); width: 250px; min-height: calc(2% + 60px)">
<p>20 identical game machines.</p>
</div>
<div class="line H light" style="left: 34%; top: 53%; right: 42%"></div>
<div class="line H light" style="left: 49%; top: 55%; right: 42%"></div>
<div class="line V light" style="left: 34%; top: 23%; bottom: 12%"></div>
<div class="line V light" style="left: 49%; top: 23%; bottom: 8%"></div>
<div class="line point" style="left: 34%; top: 23%"></div>
<div class="line point" style="left: 34%; top: 31%"></div>
<div class="line point" style="left: 34%; top: 39%"></div>
<div class="line point" style="left: 34%; top: 46%"></div>
<div class="line point" style="left: 34%; top: 53%"></div>
<div class="line point" style="left: 34%; top: 62%"></div>
<div class="line point" style="left: 34%; top: 69%"></div>
<div class="line point" style="left: 34%; top: 75%"></div>
<div class="line point" style="left: 34%; top: 82%"></div>
<div class="line point" style="left: 34%; top: 88%"></div>
<div class="line point" style="left: 49%; top: 23%"></div>
<div class="line point" style="left: 49%; top: 31%"></div>
<div class="line point" style="left: 49%; top: 39%"></div>
<div class="line point" style="left: 49%; top: 47%"></div>
<div class="line point" style="left: 49%; top: 55%"></div>
<div class="line point" style="left: 49%; top: 64%"></div>
<div class="line point" style="left: 49%; top: 71%"></div>
<div class="line point" style="left: 49%; top: 78%"></div>
<div class="line point" style="left: 49%; top: 85%"></div>
<div class="line point" style="left: 49%; top: 92%"></div>
<div class="note" style="right: max(68%, calc(80% - 125px)); bottom: 55%; width: 250px;">
<p>All game machines netboot from a shared disk image on this server.</p>
</div>
<div class="line V light" style="left: 20%; top: 45%; bottom: 45%;"></div>
<div class="line point" style="left: 20%; top: 55%;"></div>
<div class="note" style="right: max(68%, calc(83% - 125px)); top: 76%; width: 250px;">
<p>Our personal desktops</p>
</div>
<div class="line TL light" style="left: 17%; top: 60%; right: 80%; bottom: 24%;"></div>
<div class="line H light" style="left: 17%; top: 72%; right: 80%;"></div>
<div class="line point" style="left: 20%; top: 60%;"></div>
<div class="line point" style="left: 20%; top: 72%"></div>
<div class="note" style="left: 65%; top: calc(8% - 30px); width: 250px">
<p>Dedicated A/C intakes from behind the machines and supplies cold air here.</p>
</div>
<div class="line H light" style="left: 50%; top: 8%; right: 35%;"></div>
<div class="line point" style="left: 50%; top: 8%;"></div>
<div class="note" style="left: calc(74% - 125px); top: 74%; width: 250px">
<p>Door leads to the "hot side".</p>
</div>
<div class="line V" style="left: 74%; top: 69%; bottom: 26%"></div>
<div class="line point" style="left: 74%; top: 69%;"></div>
</section>
<!--=============================================================================-->
<section id="hot-side">
<div class="heading" style="left: 5%; top: 5%;">
<h1>The "Hot Side"</h1>
<p>It's actually not that hot.</p>
</div>
<img loading="lazy" class="bg" src="/images/hot-side.jpg" alt="A photo depicts the back side of the computer racks. To their left is the door, now open, leading to the front side. Many wires are visible in the photo, some organized in a cable track hanging from the ceiling, others strewn haphazardly on the floor. Directly behind the server racks there is a column full of power outlets which many of the machines are plugged into. Also visible in the picture is various HVAC equipment, inculding an air handler and a HEPA filtration unit. These actually don't serve this room but were placed here because they are ugly.">
</section>
<!--=============================================================================-->
<section id="cat6">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Networking</h1>
</div>
<img loading="lazy" class="bg" src="/images/cat6.jpg" alt="A photo shows an up-close view of a stack of five network switches mounted at the top of the rack furthest from the door. An enormous bundle of category 6 network cables comes out of a hole in the ceiling and connects to the network switches. A Google Fiber box is mounted on the wall nearby.">
<div class="note" style="left: 5%; bottom: 2%; max-width: 45%;">
<p>Lots of cat6:</p>
<ul>
<li>35 wall boxes with 4 ports each
</li><li>7 PoE WAPs
</li><li>8 PoE security cameras
</li><li>3 PoE intercoms
</li></ul>
<p>All network equipment and cameras are UniFi.</p>
</div>
<div class="note" style="left: 70%; top: 84%;">
<p>2 Gbps fiber internet</p>
</div>
<div class="line H" style="left: 62%; top: 86%; right: 30%;"></div>
<div class="line point" style="left: 62%; top: 86%;"></div>
</section>
<!--=============================================================================-->
<section id="components">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Components</h1>
<p>This is the hardware before it went into the machines.</p>
</div>
<img loading="lazy" class="bg" src="/images/components.jpg" alt="A photo shows shelving in the engine room full of computer components still in their boxes. This was taken before the machines were built. 20 or so of each component are present, including CPUs, GPUs, motherboards, heat sink fans, power supplies, RAM, NVMe drives, and sound bars. There are also a large number of unmarked cardboard boxes; these contain spooled DisplayPort and USB cables of lengths varying from 35 to 100 feet.">
<div class="note" style="left: 56%; top: calc(43% - 30px);">
<p>Intel Core i5-13600</p>
</div>
<div class="line TL light" style="left: 45%; top: 43%; bottom: 33%; right: 44%;"></div>
<div class="line point" style="left: 45%; top: 67%;"></div>
<div class="note" style="right: 67%; top: calc(41% - 30px);">
<p>32GB RAM</p>
</div>
<div class="line TR light" style="left: 33%; top: 41%; right: 60%; bottom: 35%;"></div>
<div class="line point" style="left: 40%; top: 65%;"></div>
<div class="note" style="left: calc(64% - 125px); bottom: 35%;">
<p>GeForce RTX 4070</p>
</div>
<div class="line V" style="left: 64%; top: 65%; bottom: 30%;"></div>
<div class="line point" style="left: 64%; top: 70%;"></div>
<div class="note" style="right: 62%; bottom: max(2%, calc(16% - 108px)); width: 250px;">
<p>An insanely unstable motherboard with 10G ethernet on-board.</p>
<p>Don't buy this. :(</p>
</div>
<div class="line H light" style="left: 38%; top: 86%; right: 45%;"></div>
<div class="line point" style="left: 55%; top: 86%;"></div>
</section>
<!--=============================================================================-->
<section id="assembly">
<div class="heading" style="left: 5%; top: 5%; width: 400px;">
<h1>Assembly</h1>
<p>My (Kenton's) friends from junior high helped assemble the machines and pull the cables.</p>
</div>
<img loading="lazy" class="bg" src="/images/assembly.jpg" alt="A photo depicts the game room from earlier. Four guys are standing around two folding tables set up in the middle of the room, where they are assembling the computers. Each person has an open chassis in front of him with components and boxes strewn about.">
<div class="note" style="left: 5%; bottom: 5%; width: 400px;">
<p>We've been doing LAN parties together for nearly 30 years.</p>
</div>
<div class="note" style="left: calc(23% - 50px); top: 60%; width: 100px;">
<p>Lester</p>
</div>
<div class="line V light" style="left: 23%; top: 50%; bottom: 40%;"></div>
<div class="line point" style="left: 23%; top: 50%;"></div>
<div class="note" style="left: calc(34% - 50px); top: 70%; width: 100px;">
<p>Jesse</p>
</div>
<div class="line V light" style="left: 34%; top: 38%; bottom: 30%;"></div>
<div class="line point" style="left: 34%; top: 38%;"></div>
<div class="note" style="left: calc(61% - 50px); top: 70%; width: 100px;">
<p>Peter</p>
</div>
<div class="line V light" style="left: 61%; top: 52%; bottom: 30%;"></div>
<div class="line point" style="left: 61%; top: 52%;"></div>
<div class="note" style="left: 70%; top: calc(35% - 30px);">
<p>Kenton</p>
</div>
<div class="line H light" style="left: 61%; top: 35%; right: 30%"></div>
<div class="line point" style="left: 61%; top: 35%;"></div>
</section>
<!--=============================================================================-->
<section id="living-room">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Living Room</h1>
<p>This house has normal parts, too!</p>
</div>
<img loading="lazy" class="bg" src="/images/living-room.jpg" alt="A photo depicts a large room, 40 feet long and 30 feet wide, which contains couches, a dining table, a full kitchen, and hardwood flooring. The ceiling is 14 feet high, held up by huge glulam beams. The far wall is mostly glass, composed of a row of sliding glass doors and transom windows above them. Beyond the glass is a distant view with lots of trees and hints of houses nestled between them. There is also a swimming pool, though it is barely visible. The kitchen features an island counter with an induction stovetop embedded within it. The vent hood above descends all the way from the ceiling. Wooden beams extend horizontally from the hood with pots and pans hanging from the beams. A series of bar stools on the opposite side allow people to sit at the island and chat with Jade while she cooks. The sink is along the back wall, making it difficult to keep Kenton company while he washes dishes.">
</section>
<!--=============================================================================-->
<section id="catwalk">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Catwalk</h1>
<p>(Same room as above, after rotating right.)</p>
</div>
<img loading="lazy" class="bg" src="/images/catwalk.jpg" alt="A photo depicts the living room again, showing a wall that wasn't visible before. The wall features at 85 inch TV displaying artwork. To the right of the TV is a hallway entrance. Above both of these, a long wood shelf extends across the length of the wall. To the right of the hallway entrace is more wall space, where more wood shelves are arranged such that a cat could hop up from shelf to shelf to get to the top. At either end of the long top shelf are two cat doors through the wall.">
<div class="note" style="left: calc(81% - 125px); top: 70%; width: 250px;">
<p>These shelves are designed for cats to climb.</p>
</div>
<div class="line V light" style="left: 81%; top: 49%; bottom: 30%;"></div>
<div class="line point" style="left: 81%; top: 49%;"></div>
<div class="note" style="left: 63%; bottom: 72%; width: 250px">
<p>Cat doors lead into kids' bedrooms.</p>
</div>
<div class="line TL" style="left: 66%; bottom: 65%; right: 83%; top: 28%;"></div>
<div class="line point" style="left: 66%; top: 35%;"></div>
</section>
<!--=============================================================================-->
<section id="kids-room">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Kids' Rooms</h1>
<p>Beds are lofted.</p>
</div>
<img loading="lazy" class="bg" src="/images/kids-room.jpg" alt="A photo depicts a kid's bedroom. The room features 14-foot ceilings similar to the living room. The right side of the room has two levels, a 6-foot-tall walk-in closet and a loft above it. A black metal ladder provides access to the loft. The loft is about the size of a queen mattress, but currently features a twin bed. To the right of the bed is a small bookshelf with children's books. To the left of the bed is a narrow ledge along the wall. At the back of this ledge is the other side one of the cat doors leading to the living room. Also above the ledge, a door leads to a kid-sized hallway which leads to the other kid's loft. On the opposite side of the room from the loft, a wall box provides access to a cable conduit leading to the engine room, but nothing is currently connected through it. A computer desk could be placed here when the child is old enough to have one.">
<div class="note" style="bottom: 73%; left: 55%;">
<p>Hallway to other kid's loft.</p>
<p>(With lockable door.)</p>
</div>
<div class="line H light" style="left: 49%; top: 25%; right: 45%;"></div>
<div class="line point" style="left: 49%; top: 25%;"></div>
<div class="note" style="bottom: calc(62% - 30px); right: 55%;">
<p>Cat door from living room.</p>
</div>
<div class="line H" style="left: 45%; top: 38%; right: 45.5%;"></div>
<div class="line point" style="left: 54.5%; top: 38%;"></div>
<div class="note" style="right: 57%; top: calc(65% - 30px); width: 250px;">
<p>6' closet below loft.</p>
</div>
<div class="line H" style="left: 43%; top: 65%; right: 43%;"></div>
<div class="line point" style="left: 57%; top: 65%;"></div>
<div class="note" style="left: 8%; bottom: max(5%, 10% - 58px); width: 320px;">
<p>Cable conduit to engine room.</p>
<p>(For future computer desks, when they're older.)</p>
</div>
<div class="line TL" style="left: 1%; bottom: 5%; top: 90%; right: 92%;"></div>
<div class="line point" style="left: 1%; top: 95%;"></div>
<div class="note" style="left: min(50%, calc(95% - 250px)); bottom: 5%; width: 250px;">
<p>The other kid's room is a mirror image of this.</p>
</div>
</section>
<!--=============================================================================-->
<section id="call-rooms" class="side-by-side">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Call Rooms</h1>
<p>Two call rooms allow taking meetings without bothering other people.</p>
<p>Of course, they are also game stations.</p>
</div>
<img loading="lazy" class="bg" src="/images/call-rooms.jpg" alt="Two side-by-side photos depict two small rooms, each featuring a desk with a monitor and keyboard on it. The room on the left features windows showing a view of the yard. It also has a small tread mill, appropriate for taking a meeting while walking. The room on the right has no windows and looks drearier. A closed door in the back of the room leads to a mechanical closet.">
</section>
<!--=============================================================================-->
<section id="cat-restrooms" class="side-by-side">
<div class="heading" style="left: 5%; top: 5%; z-index: 2;">
<h1>Cat Restrooms</h1>
</div>
<img loading="lazy" class="bg" src="/images/cat-restrooms.jpg" alt="Two side-by-side photos depict rooms with slanted ceilings located under staircases. Each room has a cat litter box situated on a litter rug on top of a tiled floor, and an exhaust fan in the wall. Each room features two cat doors with plastic flaps leading to adjacent rooms, as well as a human-sized door.">
<div class="note" style="left: 70%; bottom: 80%; min-height: 3%; min-width: 5%;">
<p>Exhaust fans</p>
</div>
<div class="line H" style="left: 31%; top: 18%; right: 30%;"></div>
<div class="line point" style="left: 31%; top: 18%;"></div>
<div class="line V" style="top: 20%; right: 26%; bottom: 62%;"></div>
<div class="line point" style="left: 74%; top: 38%;"></div>
<div class="note" style="right: max(5%, 13% - 100px); top: 70%; width: 200px;">
<p>Cat doors allow cats access to bedrooms when human doors are closed.</p>
</div>
<div class="line V light" style="left: 87%; top: 61%; bottom: 30%;"></div>
<div class="line point" style="left: 87%; top: 61%;"></div>
<div class="note" style="left: 15%; bottom: 5%; width: 300px;">
<p>Space under stairwells is dedicated to cat litter boxes.</p>
</div>
</section>
<!--=============================================================================-->
<section id="guest-rooms" class="side-by-side">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Guest Rooms</h1>
<p>We have two guest rooms for out-of-town visitors.</p>
</div>
<img loading="lazy" class="bg" src="/images/guest-rooms.jpg" alt="Two side-by-side photos depict two guest bedrooms. One room features a king-sized bed. The other features a bunk bed with a trundle beneath, which could sleep three to four people.">
</section>
<!--=============================================================================-->
<section id="roof-deck">
<div class="heading" style="left: 5%; top: 5%;">
<h1>The Roof Deck</h1>
<p>My favorite part of the house.</p>
</div>
<img loading="lazy" class="bg" src="/images/roof-deck.jpg" alt="A photo depicts a roof deck with an epic view of trees, houses, and city lights in the distance. The deck hosts four swivel chairs and a large L-shaped sectional sofa. A covered trellis above the deck provides shade. Thirteen adults and four children are present, chatting and enjoying the view. Although not visible in the photo, the deck always experiences a pleasant breeze.">
<div class="note" style="bottom: 64%; left: calc(23% - 50px);">
<p>30-mile view</p>
</div>
<div class="line V light" style="left: 23%; top: 36%; bottom: 60%;"></div>
<div class="line point" style="left: 23%; top: 40%;"></div>
<div class="note" style="bottom: 76%; left: calc(65% - 125px); width: 250px;">
<p>Misting fan, great in the heat!</p>
</div>
<div class="line V light" style="left: 65%; top: 24%; bottom: 66%;"></div>
<div class="line point" style="left: 65%; top: 34%;"></div>
</section>
<!--=============================================================================-->
<section id="cat">
<div class="heading" style="left: 5%; top: 5%;">
<h1>Cat</h1>
</div>
<img loading="lazy" class="bg" src="/images/cat.jpg" alt="A photo of the cat, Garply, perched majestically on top of the cat shelf.">
<div class="note" style="top: 75%; left: calc(51% - 34px);">
<p>Cat</p>
</div>
<div class="line V" style="left: 51%; top: 56%; bottom: 25%"></div>
<div class="line point" style="left: 51%; top: 56%;"></div>
</section>
<!--=============================================================================-->
<section id="q-and-a">
<h1>Q&A</h1>
<h2 id="about-us">About Us</h2>
<!--=============================================================================-->
<h3 id="whose-house-is-this">Whose house is this?</h3>
<p>We are <b>Kenton Varda</b> and <b>Jade Wang</b>. We've been married since 2014. This is our house, where we live with our two kids, in Austin, Texas.</p>
<p>Kenton is a software engineer. He:</p>
<ul>
<li>Started and is tech lead of the <a href="https://workers.cloudflare.com">Cloudflare Workers</a> serverless compute platform.</li>
<li>Co-founded <a href="https://sandstorm.io">Sandstorm.io</a> (with Jade)</li>
<li>Created <a href="https://capnproto.org">Cap'n Proto</a></li>
<li>Long ago, led the original open source release of <a href="https://protobuf.dev/">Google's Protocol Buffers</a>.</li>
<li>Is:<ul>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><b>GitHub:</b> <a href="https://github.com/kentonv">@kentonv</a></li>
<li><b>Hacker News:</b> <a href="https://news.ycombinator.com/user?id=kentonv">kentonv</a></li>
<li><b>Bluesky:</b> <a href="https://bsky.app/profile/kentonvarda.com">@kentonvarda.com</a></li>
<li><b>Twitter:</b> <a href="https://x.com/KentonVarda">@KentonVarda</a></li>
<li><b>Discord:</b> kentonv</li>
</ul></li>
</ul>
<p>Jade is an entrepreneur. She:</p>
<ul>
<li>Holds a PhD in neuroscience and did research at NASA</li>
<li>Co-founded <a href="https://www.nytimes.com/2012/07/06/technology/at-hacker-hostels-living-on-the-cheap-and-dreaming-of-digital-glory.html">the Chez JJ hacker house network</a></li>
<li>Co-founded <a href="https://sandstorm.io">Sandstorm.io</a> (with Kenton)</li>
<li>Was Head of Startups at <a href="https://cloudflare.com">Cloudflare</a></li>
<li>Advises and invests in startups, particularly in Austin</li>
<li>Was once a concert pianist</li>
<li>Is:<ul>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><b>GitHub:</b> <a href="https://github.com/jadeqwang">@jadeqwang</a></li>
<li><b>Hacker News:</b> <a href="https://news.ycombinator.com/user?id=qiqing">qiqing</a></li>
<li><b>Bluesky:</b> <a href="https://bsky.app/profile/jadewang.me">@jadewang.me</a></li>
<li><b>Twitter:</b> <a href="https://x.com/qiqing">@qiqing</a></li>
<li><b>Discord:</b> qiqing</li>
</ul></li>
</ul>
<!--=============================================================================-->
<h3 id="who-designed-it">Who designed and built it?</h3>
<p>The lead architect was <b>Richard Varda</b>, Kenton's father. Rich is an accomplished architect who has designed everything from houses to skyscrapers. Among other things, he designed <a href="https://en.wikipedia.org/wiki/Kingdom_Centre">The Kingdom Centre</a> in Riyadh, Saudi Arabia, and <a href="https://www.archdaily.com/181955/musical-instrument-museum-rsp-architects">The Musical Instrument Museum</a> in Phoenix, Arizona. Rich was also VP of Architecture at Target for many years.</p>
<p>Many features of the house were designed directly by Kenton and Jade. For example, Kenton designed the game station cabinetry, office conference table, cat shelves, conduit routing, and most technical features of the house.</p>
<p>Additionally, we worked with Thom Lasley and others at <a href="https://rsparch.com/">RSP Architects</a>. RSP normally does commercial buildings, not houses, but Rich was working with RSP on other projects at the time and had known Thom for decades, so it made sense.</p>
<p><a href="https://www.bluehorse.build/">Blue Horse Building & Design</a> was our general contractor who built the house.</p>
<!--=============================================================================-->
<h3 id="when-was-it-built">When was it built?</h3>
<p>The house was completed in late 2023. We originally bought the property in 2019, and began construction in mid-2021. Yeah, it took a while.</p>
<!--=============================================================================-->
<h3 id="who-made-this-site">Who made this site?</h3>
<p>This site was designed and coded by Kenton with photos taken by Kenton, Jade, and Rich. We are neither web designers nor photographers. That's why the design is weird and the photos are kinda meh. Nothing on this site is sponsored.</p>
<!--=============================================================================-->
<h3 id="didnt-someone-do-this-already">Didn't someone else do this already? Like a decade ago?</h3>
<p>Yes, someone did. Specifically, me (Kenton)! In 2011 I completed <a href="https://kentonshouse.com/">a LAN-party optimized house in Palo Alto, California</a>, and it went viral. It, too, was in collaboration with my father (but I had not yet met Jade).</p>
<p>But contrary to what most people think upon seeing the pictures, the original LAN house was not very big: 1400 sqft. This made for a pretty awesome bachelor pad, but would have been a bit cramped for raising a family. The new house is much, much better.</p>
<p>I've never heard of anyone else having done anything like this. This surprises me! But, surely, if someone else did it, someone would have told me about it? If you know of another, please let me know!</p>
<!--=============================================================================-->
<h3 id="why-austin">Why did you move to Austin?</h3>
<p>In 2019, my team at Cloudflare was growing. But, most of the hiring was happening in the Austin office, while I worked from San Francisco. Meanwhile, with our first child on the way, Jade and I needed a bigger house, but we really could not afford to buy (much less build) anything bigger in Palo Alto.</p>
<p>I suggested to Jade: Should we move to Austin? Jade initially said no, because she wanted our kids to benefit from Palo Alto's school district. At the time, it was rated #12 in the nation. But, looking closer at the rankings revealed a surprise: The Eanes school district in Austin was #8. When I showed this to Jade, she changed her mind.</p>
<p>Ironically, just after we moved, covid hit, and Cloudflare became 100% remote. The original reason for the move—being closer to my team—became moot. In retrospect, we could have gone anywhere! Not that there's anywhere in particular that I think would have been better. It's just funny.</p>
<!--=============================================================================-->
<h3 id="cost">How much did this cost?</h3>
<p>The 22 game machines (including monitors, cables, and peripherals) cost about $75,000 in total. The house overall was a 7-digit number. Sorry, I'm not comfortable being any more specific than that.</p>
<p>I actually find it funny how cheap computers are. The cabinetry around the game stations cost a similar amount to the computers powering them. Think about that! The cabinetry is just a bunch of wood, cut into fairly large pieces. Maybe a few screws and hinges. Whereas the computers in total contain <i>more than a trillion transistors</i>, each of which had to be carefully etched in the right spot connected correctly to all the others. A trillion! That's 1,000,000,000,000!</p>
<p>Of course, the point is, GPUs are mass-produced. Cabinets for game stations in LAN-party-optimized houses are, um, not.</p>
<!--=============================================================================-->
<h3 id="where-did-you-get-the-money">Where did you get the money?</h3>
<p>This question also makes me uncomfortable, but I know from last time that people will ask it, and if I don't answer, people will make things up. So, OK, I will tell you.</p>
<p>I (Kenton) started my career at Google in 2005, which was a pretty good time to be there, even as a junior engineer. They gave me stock, and that stock went up. With no family and no hobbies aside from video games, money piled up in my bank account. After 4-5 years of saving, I was able to make a $200k down payment on a $1M construction loan (later converted into a mortgage). In many places that could have bought a mansion, but in Palo Alto it got me a tiny sliver of land and a 1400 sqft house. Still, I considered myself rich.</p>
<p>Then things got weird. The success of Google, Facebook, and others in Silicon Valley had produced a large number of people in the area with a lot of money, ready to buy houses and start families. Meanwhile, NIMBY policies were blocking all new development. As a result, Palo Alto housing prices, already high, went bonkers over the course of the 2010's. My house, which had cost me $1M, became worth over $2M.</p>
<p>This is absolutely unfair! I built the house so that I could throw parties and play video games with my friends. These do not seem like activities that are supposed to make money. But it made me <i>a million dollars</i> in profit. What?</p>
<p>So basically, we were able to parlay that into a bigger house in Austin. And just in time! While Austin housing prices had been growing for a while, they really exploded after 2020. We bought our property in late 2019. (Aside: Today, in 2024, Austin housing prices are now actually declining rapidly, due to an enormous amount of new housing having been built over the last few years. Yes, it can be done! Now is a great time to move to Austin!)</p>
<p>For completeness, I'll mention two other not-insignificant sources of money. First, Jade and I joined Cloudflare in 2017, a couple years before its IPO. This was a good time to join. The stock has done very well, even hitting a high point just as we started construction. Second, Jade has long been an active (albeit small-scale) seed-stage investor in startups. Before she met me, she invested in Matterport, in their very first funding round. They went on to become a public company. We were already in the process of moving to Austin before either Cloudflare or Matterport went public, so we didn't have any idea at the time how much they'd pay off. But they did, and this allowed us to expand scope.</p>
<p>Yes, we are very lucky!</p>
<!--=============================================================================-->
<h2 id="about-lan-parties">About LAN Parties</h2>
<!--=============================================================================-->
<h3 id="whats-a-lan-party">What's a LAN party?</h3>
<p>It's where everyone goes to one place and plays multiplayer videogames with each player having their own computer, connected over a Local Area Network.</p>
<p>In the 90's, when internet connections were bad, LAN parties were popular among PC gamers. But when broadband got decent in the early 2000's, LAN parties largely died off, as people could now play multiplayer games without leaving the house.</p>
<p>But I think that sucks. For me, LAN parties were never just about the game. LAN parties are a social event, and the game is merely a catalyst. LAN parties serve very much the same purpose as normal parties serve for normal people, but the game makes it easier and more fun for introverts to be social. Indeed, LAN parties are so fun that they traditionally go all night long—much longer than your normie parties—because no one wants to stop.</p>
<p>My (Kenton's) first LAN party was for my 14th birthday, in 1996. We had four computers: a 486sx 25Mhz, a 486dx 33Mhz, a 486dx2 50Mhz, and a Pentium 120Mhz. We played Doom 2 all night long. It was the most fun I'd ever had.</p>
<p>That same year, I had another LAN party on New Year's Eve, which I have done every year since. At least two out of three (and usually all three) of my junior high friends from Minneapolis have attended every single time.</p>
<p>In total, I have hosted or attended probably over 100 LAN parties. All of them were at someone's house, typically with 8-16 people. I have never been interested in big commercial LAN parties with hundreds of attendees—at that point it feels no different than playing with randos on the internet.</p>
<!--=============================================================================-->
<h3 id="but-games-dont-support-lan">How can you have LAN parties when no games support LAN anymore?</h3>
<p>We have an internet connection.</p>
<!--=============================================================================-->
<h3 id="why-build-in">Dragging over your own computers is part of the fun of LAN parties. Why build them in?</h3>
<p>I originally thought this too. In fact, my first LAN party house was designed to let people bring their own box and quickly connect it to a station. But nobody ever did. Not once. Some people brought laptops, but they only ever used them if the game stations were all in use already.</p>
<p>I do feel a lot of nostalgia for the days of trying to pack four people, four computers, and four monitors into one car on the way to a friends' LAN party, setting up machines on haphazardly arranged card tables with questionable seating arrangements, daisy-chaining power strips and network hubs. I'm a little less nostalgic for the experience of trying to copy game files over the network to get everyone on the same version, or pitying the one friend who inevitably has to reinstall Windows and doesn't manage to get in-game until after midnight.</p>
<p>The fact is that, while these things were fun, they were <a href="https://www.rei.com/blog/climb/fun-scale">Type II fun</a>. And they made LAN parties inaccessible. Even the most enthusiastic of us didn't really want to do all that more than, like, 3-4 times a year, and a lot of people—even those who like games—really don't care to do it at all. I'm not even sure if I could do it anymore, as a 40-something with two kids!</p>
<p>With computers built-in and set up in advance, we can commence gaming essentially immediately upon enough people arriving. We can get a lot more people to participate. If someone can only drop by for an hour or two, they can still play. And we can do it all much more often: at one point I was hosting LAN parties every other weekend.</p>
<!--=============================================================================-->
<h3 id="what-games">What games do you play?</h3>
<p>Lots of things. We are trying new games all the time.</p>
<p>In general, we prefer cooperative games, or at least team games. Most attendees are not actually hardcore gamers, so skill levels vary widely. In a free-for-all competitive game, one or two people tend to dominate while several can't get anywhere—that's not fun. Cooperative games allow everyone to participate according to their ability. Team competitive games allow us to carefully balance the teams, though this can be tricky.</p>
<p>Our favorite LAN game of the past five years is probably Deep Rock Galactic, in which the players are a team of space dwarves mining an alien planet for resources. Prior to Deep Rock, Left 4 Dead 2 served the same purpose, or TF2 Mann vs. Machine mode.</p>
<p>We have also played quite a few survivalcraft basebuilder games, such as Ark or Factorio.</p>
<p>We played a lot of Overwatch, back when it was good, often with us on a team against internet randos, and occasionally team-vs-team entirely within the house.</p>
<p>We still play Unreal Tournament 2004 regularly, usually in Assault or Onslaught mode.</p>
<!--=============================================================================-->
<h3 id="are-they-public">Are your parties open to the public?</h3>
<p>No. Sorry, you must be invited. I'm sure you understand: For security reasons, we can't just let random people on the internet into our house.</p>
<p>If you want to get invited, you need to figure out some way to get to know one of us, or one of our friends who can vouch for you.</p>
<p>One straightforward (albeit not easy) way to get an invite is to <a href="https://www.cloudflare.com/careers/jobs/">get hired at Cloudflare</a>. ;)</p>
<!--=============================================================================-->
<h3 id="buying-games">Do you buy the games for every computer?</h3>
<p>No. Everyone logs into their own Steam/Epic/etc. accounts, and must buy the game we are playing. We do, however, try to preinstall everything people might play. Fortunately, Steam and similar game launchers are able to use the same copy of the game for all users.</p>
<!--=============================================================================-->
<h2 id="about-the-tech">About the tech</h2>
<!--=============================================================================-->
<h3 id="keeping-them-updated">How do you keep 20 computers up-to-date? That sounds tedious!</h3>
<p>I don't! I maintain a single disk image for all the machines. Before the party starts, I will install all needed games and updates on that single disk image. The machines all boot off of a network drive based on this image. Each machine gets a copy-on-write overlay on top of the main image, so that guests can make changes to their machine which won't be seen by any other, and will be deleted at the end of the party.</p>
<p><a href="https://github.com/kentonv/lanparty">I have put all the scripts I use for this up on GitHub.</a></p>
<!--=============================================================================-->
<h3 id="hardware-loadout">What exact hardware is in the game machines?</h3>
<p>For the game machines, I mostly targeted the <a href="https://www.logicalincrements.com/">Logical Increments</a> "Outstanding" level, which aims to stay just under the inflection point where high-end price gouging sets in. To that end:</p>
<ul>
<li><b>CPU:</b> Intel Core i5-13600KF — <i>Games care much more about GPU than CPU.</i></li>
<li><b>CPU heat sink:</b> Scythe Fuma 3 — <i>Mostly chosen because it fits in a 4U chassis while the Noctua fans do not.</i></li>
<li><b>GPU:</b> Gigabyte Windforce RTX 4070 — <i>Not super, not Ti, just 4070</i></li>
<li><b>Motherboard:</b> Gigabyte Z790 Aorus Master — <i>I do not recommend the motherboard! I was aiming to get the cheapest board that had 10G network on-board. The only reason I needed 10G network was because of the netboot setup: these machines access their primary storage entirely over the network. Otherwise, you absolutely do not need 10G for gaming. In general, I think expensive motherboards are a scam: they often provide no real benefit, but are marked up just because some suckers will buy them. Moreover, this particular motherboard is horribly unstable, frequently blue-screening shortly after boot. (Luckily, it seems to settle down after a minute or two and rarely disrupts actual games.)</i></li>
<li><b>RAM:</b> Corsair Vengeance 32GB (2x16GB) DDR5 5600 — <i>Every time I see "Corsair Vengeance" I can't help but chuckle. Vengeance??? It's just computer memory, dude.</i></li>
<li><b>PSU:</b> Corsair SF750 — <i>Platinum efficiency rating actually kinda matters when you're running 20 of them.</i></li>
<li><b>Storage:</b> Corsair MP700 Gen5 1TB NVMe — <i>The storage is not actually used due to the netboot setup, but my hope is eventually to improve the design such that the copy-on-write overlay can be on local disk instead of server-side, using this storage.</i></li>
<li><b>Chassis:</b> Rosewill RSV-L4500U 4U — <i>Realistically if you're rack-mounting consumer-grade hardware you have to go with a 4U chassis. I really tried to make 2U or even 3U work. It doesn't work.</i></li>
<li><b>RGB:</b> None</li>
<li><b>Incredibly long DisplayPort & USB cables:</b> Monoprice SlimRun</li>
<li><b>Monitor:</b> Corsair Xeneon 32UHD144 (32" 4k 144Hz)</li>
<li><b>Keyboard:</b> Logitech K120 Wired — <i>The world's cheapest keyboard at $13 a pop. Works perfectly fine for all gaming needs.</i></li>
<li><b>Mouse:</b> Logitech M500s Wired — <i>A cheap 5-button mouse. Unfortunately I've found the middle button is difficult to use without accidentally scrolling. I miss the old MX518.</i></li>
<li><b>Sound bar:</b> Soulion R30 Wired — <i>This is just some crap I found on Amazon without doing a lot of research, but they seem to work fine. Unfortunately the monitors don't have built-in speakers, but this sound bar is probably better than a typical built-in speaker, so in the end I'm happy with it.</i></li>
</ul>
<p>Also, in case you are wondering:</p>
<ul>
<li><b>Game room TV:</b> Samsung 98" QLED 4K Q80C</li>
<li><b>Living room TV:</b> Samsung 85" "The Frame" QLED 4K LS03B</li>
<li><b>Workstation monitor:</b> Samsung 57" Odyssey Neo G9 Dual 4K — <i>Ironically, I use this for work, not games. It's great for coding. Playing games on it gives me vertigo.</i></li>
<li><b>Dance Pads:</b> L-TEK Ex Pro X</li>
</ul>
<!--=============================================================================-->
<h3 id="cable-latency">How long are the cables? Do they add latency?</h3>
<p>The long DisplayPort and USB cables range from 35 to 100 feet, depending on the specific location. All cables are Monoprice SlimRun, which are fiber optic. The speed of a signal in fiber optic cable is about 2/3 the speed of light, and light travels at about 1 foot per nanosecond, so 100 feet of fiber would add about 150ns of latency. Thats 0.00015ms. Wheras at 144Hz, you see one frame per 7ms. In other words, no, the cable length does not add any meaningful latency. (For what it's worth, signal propagation in copper cables is similarly fast, but high-bandwidth signals in copper tend to degrade more quickly over long distance.)</p>
<!--=============================================================================-->
<h3 id="why-not-vms">Why not use thin clients and one beefy machine running a lot of VMs?</h3>
<p>Frankly, it would cost more, perform worse, and I'm not even sure how to set it up. Games are resource-intensive. A high-end game will fully utilize the machine's GPU, CPU, and RAM, so there's no real efficiency to be gained by packing more players onto fewer machines. If you wanted to put four players on one machine—if the software even exists to make it work—you'd need a machine with 4x the cores, 4x the RAM, and probably four separate GPUs. To do that you have to dive into "enterprise" hardware that gets extremely expensive. Building four separate machines is actually cheaper, and doesn't require any special virtualization layer.</p>
<!--=============================================================================-->
<h3 id="other-home-automation">What home automation tech do you use?</h3>
<p>Generally, I try to avoid any cloud-dependent home automation.</p>
<p>For security cameras, we use UniFi Protect. I am very happy with these. They will reliably wake me up if a human approaches my house in the middle of the night, with very few false positives.</p>
<p><a href="https://github.com/kentonv/kvmonitor">I wrote my own baby monitor</a> that simply combines the audio from two UniFi cameras placed near my kids' beds and makes the stream available via a web page. I like it much better than the off-the-shelf monitors we were using before!</p>
<p>I intend to set up Home Assistant eventually, but haven't gotten around to it yet.</p>
<!--=============================================================================-->
<h3 id="electric-bill">Is your electric bill enormous?</h3>
<p>Yes, but not because of the computers. The computers are off most of the time; I only turn them on for parties. Most of our energy usage goes to heating and cooling. We have efficient heat pumps and solar panels, but it's still a disturbing amount of energy usage and something I'm trying to debug. Perhaps we have too many windows letting in too much sunlight...</p>
<!--=============================================================================-->
<h2 id="misc-qa">Miscellaneous other questions</h2>
<!--=============================================================================-->
<h3 id="skeptical-hvac-contractor">Any funny contractor reactions?</h3>
<p>We had a subcontractor designing the HVAC system. I told him that there needed to be a dedicated air conditioner for the server rack. He sort of rolled his eyes and said sure.</p>
<p>Later, when I got the design, there was no AC for the server rack. We had a conversation:</p>
<p class="dialog"><b>Me:</b> Where's the AC for the server rack? We really do need AC in there.</p>
<p class="dialog"><b>Him:</b> I mean, how many servers do you have?</p>
<p class="dialog"><b>Me:</b> Well, if all the machines are running at full power playing a high-fidelity game, they could be consuming 15kW of power and turning it all into heat.</p>
<p class="dialog"><b>Him:</b> (skeptical) That would be by far the largest server rack we've ever seen in a residential setting.</p>
<p class="dialog"><b>Me:</b> I would expect so, yes.</p>
<!--=============================================================================-->
<h3 id="cat-doors">Tell me more about cat doors.</h3>
<p>Our philosophy with the cat doors is that we want to be able to close our bedroom doors while still allowing cats to enter. If we locked our cat out of our bedroom, he would meow all night long, and worse, we wouldn't get cuddles. But, leaving the bedroom door open sacrifices privacy. Solution: Cats get their own doors.</p>
<!--=============================================================================-->
<h3 id="how-often-do-you-ddr">Just how often do you play Dance Dance Revolution that it justifies built-in pads?</h3>
<p>Pretty often! I try to exercise most days and alternate between DDR, biking, and swimming. Of these, DDR really has the best fun/work and work/time ratios. Jade plays, too. I've been playing for over 20 years but my skill plateaued a while ago at "not quite competitive" levels...</p>
<video controls="" style="width: 100%" poster="/images/ddr-video-poster.jpg" preload="none">
<source src="https://video.lanparty.house/ddr.webm" type="video/webm">
<source src="https://video.lanparty.house/ddr.mp4" type="video/mp4">
</video>
<!--=============================================================================-->
<h3 id="ddr-4player">Wait you have four DDR pads? Is that supported?</h3>
<p>There are some obscure versions of DDR, and an old unofficial build of Stepmania, that supports four pads. I haven't actually gotten around to trying them yet, but I intend to at some point, and if I end up having to make my own Stepmania fork, so be it. I've been thinking about an algorithm to convert "doubles" step charts into "quads", where one person uses all four pads.</p>
<!--=============================================================================-->
</section>
<footer>
<p>All content is copyright ©2024 Kenton Varda and Jade Wang. All Rights Reserved.</p>
<p>Questions? Press inquiries? E-mail <a href="mailto:[email protected]">Kenton</a> or <a href="mailto:[email protected]">Jade</a></p>
</footer>
<script type="text/javascript">
// Automatically update the hash in the URL to match the scroll location, to make deep-linking
// easier.
document.addEventListener("scroll", event => {
let threshold = window.innerHeight / 2;
let chosen = null;
if (window.scrollY > 0) {
for (let elem of document.querySelectorAll("section,[id]").values()) {
let rect = elem.getBoundingClientRect();
if (rect.top > threshold) {
// On the previous loop iteration we decided the chosen element had scrolled
// off-screen, so continued the loop. However, we have now discovered that the next
// viable heading is more than half-way down the screen. So it actually makes more
// sense to consider ourselves to still be looking at the previous section.
break;
}
chosen = elem.id ? '#' + elem.id : null;
// Decide if this element has already scrolled off-screen. If it has NOT scrolled off,
// then this is the first element to be on-screen, and so we should choose it by
// breaking the loop here.
if (elem.id === "q-and-a") {
// This is the Q&A section. We consider it to have scrolled away when the <h1> has
// scrolled off-screen.
if (elem.firstElementChild.getBoundingClientRect().bottom > 0) break;
} else if (elem.tagName === "SECTION") {
// This is a photo section. We consider it to have scrolled away if more than half the
// photo has scrolled off-screen.
if ((rect.top + rect.bottom) / 2 >= 0) break;
} else {
// This is a Q&A subheading. We consider it to have scrolled away when the heading
// itself has scrolled off-screen.
if (rect.bottom >= 0) break;
}
}
}
if (document.location.hash !== chosen) {
history.replaceState(null, "", chosen || document.location.pathname);
}
});
// Make headings clickable to scroll that heading to the top -- convenient for making sure
// the URL points to that heading.
document.querySelectorAll("section>div.heading,h1[id],h2[id],h3[id],h4[id],h5[id]")
.forEach(elem => {
let target = elem;
while (!target.id) {
target = target.parentElement;
if (!target) return;
}
elem.addEventListener("click", event => {
if (!window.getSelection().toString()) {
window.scrollTo({
top: window.scrollY + target.getBoundingClientRect().top,
behavior: "smooth"
});
}
});
});
if (document.location.hostname == "localhost") {
document.querySelectorAll("section").forEach(node => {
if (node.id !== "q-and-a") {
node.addEventListener("click", event => {
let target = event.currentTarget;
let x = Math.round(event.offsetX / target.clientWidth * 100);
let y = Math.round(event.offsetY / target.clientHeight * 100);
let text = `left: ${x}%; top: ${y}%; right: ${100-x}%; bottom: ${100-y}%;`;
navigator.clipboard.writeText(text);
console.log(text);
})
}
});
}
</script>
</body></html>