Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
19
The second HTMHell special focuses on another highly controversial pattern in front-end development: 🔥 the burger button. 🔥 The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases. After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites. Pattern 1: the unsemantic burger <div class="burger"> <span></span> <span></span> <span></span> </div> .burger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer; } .burger span { height: 1px; display: block; background: #000; } Issues and how to fix them The <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more...
over a year ago

Improve your reading experience

Logged in users get linked directly to articles resulting in a better reading experience. Please login for free, it takes less than 1 minute.

More from HTMHell

datalists are more powerful than you think

by Alexis Degryse I think we all know the <datalist> element (and if you don’t, it’s ok). It holds a list of <option> elements, offering suggested choices for its associated input field. It’s not an alternative for the <select> element. A field associated to a <datalist> can still allow any value that is not listed in the <option> elements. Here is a basic example: Pretty cool, isn't it? But what happens if we combine <datalist> with less common field types, like color and date: <label for="favorite-color">What is your favorite color?</label> <input type="color" list="colors-list" id="favorite-color"> <datalist id="colors-list"> <option>#FF0000</option> <option>#FFA500</option> <option>#FFFF00</option> <option>#008000</option> <option>#0000FF</option> <option>#800080</option> <option>#FFC0CB</option> <option>#FFFFFF</option> <option>#000000</option> </datalist> Colors listed in <datalist> are pre-selectable but the color picker is still usable by users if they need to choose a more specific one. <label for="event-choice" class="form-label col-form-label-lg">Choose a historical date</label> <input type="date" list="events" id="event-choice"> <datalist id="events"> <option label="Fall of the Berlin wall">1989-11-09</option> <option label="Maastricht Treaty">1992-02-07</option> <option label="Brexit Referendum">2016-06-23</option> </datalist> Same here: some dates are pre-selectable and the datepicker is still available. Depending on the context, having pre-defined values can possibly speed up the form filling by users. Please, note that <datalist> should be seen as a progressive enhancement because of some points: For Firefox (tested on 133), the <datalist> element is compatible only with textual field types (think about text, url, tel, email, number). There is no support for color, date and time. For Safari (tested on 15.6), it has support for color, but not for date and time. With some screen reader/browser combinations there are issues. For example, suggestions are not announced in Safari and it's not possible to navigate to the datalist with the down arrow key (until you type something matched with suggestions). Refer to a11ysupport.io for more. Find out more datalist experiment by Eiji Kitamura Documentation on MDN

6 months ago 72 votes
Boost website speed with prefetching and the Speculation Rules API

by Schepp Everybody loves fast websites, and everyone despises slow ones even more. Site speed significantly contributes to the overall user experience (UX), determining whether it feels positive or negative. To ensure the fastest possible page load times, it’s crucial to design with performance in mind. However, performance optimization is an art form in itself. While implementing straightforward techniques like file compression or proper cache headers is relatively easy, achieving deeper optimizations can quickly become complex. But what if, instead of solely trying to accelerate the loading process, we triggered it earlier—without the user noticing? One way to achieve this is by prefetching pages the user might navigate to next using <link rel="prefetch"> tags. These tags are typically embedded in your HTML, but they can also be generated dynamically via JavaScript, based on a heuristic of your choice. Alternatively, you can send them as an HTML Link header if you lack access to the HTML code but can modify the server configuration. Browsers will take note of the prefetch directives and fetch the referenced pages as needed. ⚠︎ Caveat: To benefit from this prefetching technique, you must allow the browser to cache pages temporarily using the Cache-Control HTTP header. For example, Cache-Control: max-age=300 would tell the browser to cache a page for five minutes. Without such a header, the browser will discard the pre-fetched resource and fetch it again upon navigation, rendering the prefetch ineffective. In addition to <link rel="prefetch">, Chromium-based browsers support <link rel="prerender">. This tag is essentially a supercharged version of <link rel="prefetch">. Known as "NoState Prefetch," it not only prefetches an HTML page but also scans it for subresources—stylesheets, JavaScript files, images, and fonts referenced via a <link rel="preload" as="font" crossorigin> — loading them as well. The Speculation Rules API A relatively new addition to Chromium browsers is the Speculation Rules API, which offers enhanced prefetching and enables actual prerendering of webpages. It introduces a JSON-based syntax for precisely defining the conditions under which preprocessing should occur. Here’s a simple example of how to use it: <script type="speculationrules"> { "prerender": [{ "urls": ["next.html", "next2.html"] }] } </script> Alternatively, you can place the JSON file on your server and reference it using an HTTP header: Speculation-Rules: "/speculationrules.json". The above list-rule specifies that the browser should prerender the URLs next.html and next2.html so they are ready for instant navigation. The keyword prerender means more than fetching the HTML and subresources—it instructs the browser to fully render the pages in hidden tabs, ready to replace the current page instantly when needed. This makes navigation to these pages feel seamless. Prerendered pages also typically score excellent Core Web Vital metrics. Layout shifts and image loading occur during the hidden prerendering phase, and JavaScript execution happens upfront, ensuring a smooth experience when the user first sees the page. Instead of listing specific URLs, the API also allows for pattern matching using where and href_matches keys: <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" } }] } </script> For more precise targeting, CSS selectors can be used with the selector_matches key: <script type="speculationrules"> { "prerender": [{ "where": { "selector_matches": ".navigation__link" } }] } </script> These rules, called document-rules, act on link elements as soon as the user triggers a pointerdown or touchstart event, giving the referenced pages a few milliseconds' head start before the actual navigation. If you want the preprocessing to begin even earlier, you can adjust the eagerness setting: <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] } </script> Eagerness values: immediate: Executes immediately. eager: Currently behaves like immediate but may be refined to sit between immediate and moderate. moderate: Executes after a 200ms hover or on pointerdown for mobile devices. conservative (default): Speculates based on pointer or touch interaction. For even greater flexibility, you can combine prerender and prefetch rules with different eagerness settings: <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "conservative" }], "prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] } </script> Limitations and Challenges While the Speculation Rules API is powerful, it comes with some limitations: Browser support: Only Chromium-based browsers support it. Other browsers lack this capability, so treat it as a progressive enhancement. Bandwidth concerns: Over-aggressive settings could waste user bandwidth. Chromium imposes limits to mitigate this: a maximum of 10 prerendered and 50 prefetched pages with immediate or eager eagerness. Server strain: Poorly optimized servers (e.g., no caching, heavy database dependencies) may experience significant load increases due to excessive speculative requests. Compatibility: Prefetching won’t work if a Service Worker is active, though prerendering remains unaffected. Cross-origin prerendering requires explicit opt-in by the target page. Despite these caveats, the Speculation Rules API offers a powerful toolset to significantly enhance perceived performance and improve UX. So go ahead and try them out! I would like to express a big thank you to the Webperf community for always being ready to help with great tips and expertise. For this article, I would like to thank Barry Pollard, Andy Davies, and Noam Rosenthal in particular for providing very valuable background information. ❤️

6 months ago 80 votes
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers

by Alexander Muzenhardt Introduction Imagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, and just before the deadline, you manage to finish it. Everyone loves your work, and the feature is set to go live the next day. <button> <i class="icon">📆</i> </button> The Problem You find some good resources explaining that there are people with disabilities who need to be considered in these cases. This is known as accessibility. For example, some individuals have motor impairments and cannot use a mouse. In this particular case, the user is visually impaired and relies on assistive technology like a screen reader, which reads aloud the content of the website or software. The button you implemented doesn’t have any descriptive text, so only the icon is read aloud. In your case, the screen reader says, “Tear-Off Calendar button”. While it describes the appearance of the icon, it doesn’t convey the purpose of the button. This information is meaningless to the user. A button should always describe what action it will trigger when activated. That’s why we need additional descriptive text. The Challenge Okay, you understand the problem now and agree that it should be fixed. However, you don’t want to add visible text to the button. For design and aesthetic reasons, sighted users should only see the icon. Is there a way to keep the button “icon-only” while still providing a meaningful, descriptive text for users who rely on assistive technologies like screen readers? The Solution First, you need to give the button a descriptive name so that a screen reader can announce it. <button> <span>Open Calendar</span> <i class="icon">📆</i> </button> The problem now is that the button’s name becomes visible, which goes against your design guidelines. To prevent this, additional CSS is required. .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } <button> <span class="sr-only">Open Calendar</span> <i class="icon">📆</i> </button> The CSS ensures that the text inside the span-element is hidden from sighted users but remains readable for screen readers. This approach is so common that well-known CSS libraries like TailwindCSS, Bootstrap, and Material-UI include such a class by default. Although the text of the buttons is not visible anymore, the entire content of the button will be read aloud, including the icon — something you want to avoid. In HTML you are allowed to use specific attributes for accessibility, and in this case, the attribute aria-hidden is what you need. ARIA stands for “Accessible Rich Internet Applications” and is an initiative to make websites and software more accessible to people with disabilities. The attribute aria-hidden hides elements from screen readers so that their content isn’t read. All you need to do is add the attribute aria-hidden with the value “true” to the icon element, which in this case is the “i”-element. <button> <span class="sr-only">Open Calendar</span> <i class="icon" aria-hidden="true">📆</i> </button> Alternative An alternative is the attribute aria-label, which you can assign a descriptive, accessible text to a button without it being visible to sighted users. The purpose of aria-label is to provide a description for interactive elements that lack a visible label or descriptive text. All you need to do is add the attribute aria-label to the button. The attribute aria-hidden and the span-Element can be deleted. <button aria-label="Open Calendar"> <i class="icon">📆</i> </button> With this adjustment, the screen reader will now announce “Open calendar,” completely ignoring the icon. This clearly communicates to the user what the button will do when clicked. Which Option Should You Use? At first glance, the aria-label approach might seem like the smarter choice. It requires less code, reducing the likelihood of errors, and looks cleaner overall, potentially improving code readability. However, the first option is actually the better choice. There are several reasons for this that may not be immediately obvious: Some browsers do not translate aria-label It is difficult to copy aria-label content or otherwise manipulated it as text aria-label content will not show up if styles fail to load These are just a few of the many reasons why you should be cautious when using the aria-label attribute. These points, along with others, are discussed in detail in the excellent article "aria-label is a Code Smell" by Eric Bailey. The First Rule of ARIA Use The “First Rule of ARIA Use” states: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Even though the first approach also uses an ARIA attribute, it is more acceptable because aria-hidden only hides an element from screen readers. In contrast, aria-label overrides the standard HTML behavior for handling descriptive names. For this reason, following this principle, aria-hidden is preferable to aria-label in this case. Browser compatibility Both aria-label and aria-hidden are supported by all modern browsers and can be used without concern. Conclusion Ensuring accessibility in web design is more than just a nice-to-have—it’s a necessity. By implementing simple solutions like combining CSS with aria-hidden, you can create a user experience that is both aesthetically pleasing and accessible for everyone, including those who rely on screen readers. While there may be different approaches to solving accessibility challenges, the key is to be mindful of all users' needs. A few small adjustments can make a world of difference, ensuring that your features are truly usable by everyone. Cheers Resources / Links Unicode Character “Tear-Off Calendar” comport Unicode Website mdn web docs aria-label mdn web docs aria-hidden WAI-ARIA Standard Guidlines Tailwind CSS Screen Readers (sr-only) aria-label is a Code Smell First Rule of ARIA Use

6 months ago 64 votes
The underrated &lt;dl&gt; element

by David Luhr The Description List (<dl>) element is useful for many common visual design patterns, but is unfortunately underutilized. It was originally intended to group terms with their definitions, but it's also a great fit for other content that has a key/value structure, such as product attributes or cards that have several supporting details. Developers often mark up these patterns with overused heading or table semantics, or neglect semantics entirely. With the Description List (<dl>) element and its dedicated Description Term (<dt>) and Description Definition (<dd>) elements, we can improve the semantics and accessibility of these design patterns. The <dl> has a unique content model: A parent <dl> containing one or more groups of <dt> and <dd> elements Each term/definition group can have multiple <dt> (Description Term) elements per <dd> (Description Definition) element, or multiple definitions per term The <dl> can optionally accept a single layer of <div> to wrap the <dt> and <dd> elements, which can be useful for styling Examples An initial example would be a simple list of terms and definitions: <dl> <dt>Compression damping</dt> <dd>Controls the rate a spring compresses when it experiences a force</dd> <dt>Rebound damping</dt> <dd>Controls the rate a spring returns to it's extended length after compressing</dd> </dl> A common design pattern is "stat callouts", which feature mini cards of small label text above large numeric values. The <dl> is a great fit for this content: <dl> <div> <dt>Founded</dt> <dd>1988</dd> </div> <div> <dt>Frames built</dt> <dd>8,678</dd> </div> <div> <dt>Race podiums</dt> <dd>212</dd> </div> </dl> And, a final example of a product listing, which has a list of technical specs: <h2>Downhill MTB</h2> <dl> <div> <dt>Front travel:</dt> <dd>160mm</dd> </div> <div> <dt>Wheel size:</dt> <dd>27.5"</dd> </div> <div> <dt>Weight:</dt> <dd>15.2 kg</dd> </div> </dl> Accessibility With this markup in place, common screen readers will convey important semantic and navigational information. In my testing, NVDA on Windows and VoiceOver on MacOS conveyed a list role, the count of list items, your position in the list, and the boundaries of the list. TalkBack on Android only conveyed the term and definition roles of the <dt> and <dd> elements, respectively. If the design doesn't include visible labels, you can at least include them as visually hidden text for assistive technology users. But, I always advocate to visually display them if possible. Wrapping up The <dl> is a versatile element that unfortunately doesn't get much use. In over a decade of coding, I've almost never encountered it in existing codebases. It also doesn't appear anywhere in the top HTML elements lists in the Web Almanac 2024 or an Advanced Web Ranking study of over 11.3 million pages. The next time you're building out a design, look for opportunities where the underrated Description List is a good fit. To go deeper, be sure to check out this article by Ben Myers on the <dl> element.

6 months ago 65 votes
Preloading fonts for web performance with link rel=”preload”

by Alistair Shepherd Web performance is incredibly important. If you were here for the advent calendar last year you may have already read many of my thoughts on the subject. If not, read Getting started with Web Performance when you’re done here! This year I’m back for more web performance, this time focusing on my favourite HTML snippet for improving the loading performance of web fonts using preloads. This short HTML snippet added to the head of your page, can make a substantial improvement to both perceived and measured performance. <link rel="preload" href="/nova-sans.woff2" as="font" type="font/woff2" crossorigin="anonymous" > Above we have a link element that instructs the browser to preload the /nova-sans.woff2 font. By preloading your critical above-the-fold font we can make a huge impact by reducing potential flashes of unstyled or invisible text and layout shifts caused by font loading, like here in the following video: Recording of a page load illustrating how a font loading late can result in a jarring layout shift How web fonts are loaded To explain how preloading fonts can make such an impact, let’s go through the process of how web fonts are loaded. Font files are downloaded later than you may think, due to a combination of network requests and conservative browser behaviour. In a standard web page, there will be the main HTML document which will include a CSS file using a link element in the head. If you’re using self-hosted custom fonts you’ll have a @font-face rule within your CSS that specifies the font name, the src, and possibly some other font-related properties. In other CSS rules you specify a font-family so elements use your custom font. Once our browser encounters our page it: Starts streaming the HTML document, parsing it as it goes Encounters the link element pointing to our CSS file Starts downloading that CSS file, blocking the render of the page until it’s complete Parses and applies the contents of that file Finds the @font-face rule with our font URL Okay let’s pause here for a moment — It may make sense for step 6 to be “Starts downloading our font file”, however that’s not the case. You see, if a browser downloaded every font within a CSS file when it first encountered them, we could end up loading much more than is needed. We could be specifying fonts for multiple different weights, italics, other character sets/languages, or even multiple different fonts. If we don’t need all these fonts immediately it would be wasteful to download them all, and doing so may slow down higher priority CSS or JS. Instead, the browser is more conservative and simply takes note of the font declaration until it’s explicitly needed. The browser next: Takes a note of our @font-face declarations and their URLs for later Finishes processing CSS and starts rendering the page Discovers a piece of text on the page that needs our font Finally starts downloading our font now it knows it’s needed! So as we can see there’s actually a lot that happens between our HTML file arriving in the browser and our font file being downloaded. This is ideal for lower priority fonts, but for the main or headline font this process can make our custom font appear surprisingly late in the page load. This is what causes the behaviour we saw in the video above, where the page starts rendering but it takes some time before our custom font appears. A waterfall graph showing how our custom ‘lobster.woff2’ font doesn’t start being downloaded until 2 seconds into the page load and isn’t available until after 3 seconds This is an intentional decision by browser makers and spec writers to ensure that pages with lots of fonts aren’t badly impacted by having to load many font files ahead of time. But that doesn’t mean it can’t be optimised! Preloading our font with a link <link rel="preload" href="/nova-sans.woff2" as="font" type="font/woff2" crossorigin="anonymous" > The purpose of my favourite HTML snippet is to inform the browser that this font file will be needed with high priority, before it even has knowledge of it. We’re building our page and know more about how our fonts are used — so we can provide hints to be less conservative! If we start downloading the font as soon as possible then it can be ready ahead of when the browser ‘realises’ it’s needed. Looking back at our list above, by adding a preload we move the start of the font download from step 9 to step 2! Starts streaming the HTML document, parsing it as it goes Encounters our preload and starts downloading our font file in the background Encounters the link element pointing to our CSS file Continues as above Taking a closer look at the snippet, we’re using a link element and rel="preload" to ask the browser to preload a file with the intention of using it early in the page load. Like a CSS file, we provide the URL with the href attribute. We use as="font" and type="font/woff2" to indicate this is a font file in woff2. For modern browsers woff2 is the only format you need as it’s universally supported. Finally there’s crossorigin="anonymous". This comes from the wonderfully transparent and clear world of Cross Origin Resource Sharing. I jest of course, CORS is anything but transparent and clear! For fonts you almost always want crossorigin="anonymous" on your link element, even when the request isn’t cross-origin. Omitting this attribute would mean our preload wouldn’t be used and the file would be requested again. But why? Browser requests can be sent either with or without credentials (cookies, etc), and requests to the same URL with and without credentials are fundamentally different. For a preload to be used by the browser, it needs to match the type of request that the browser would have made normally. By default fonts are always requested without credentials, so we need to add crossorigin="anonymous" to ensure our preload matches a normal font request. By omitting this attribute our preload would not be used and the browser would request the font again. If you’re ever unsure of how your preloads are working, check your browsers’ devtools. In Chrome the Network pane will show a duplicate request, and the Console will log a warning telling you a preload wasn’t used. Screenshot showing the Chrome devtools Console pane, with warnings for an incorrect font preload Result and conclusion By preloading our critical fonts we ensure our browser has the most important fonts available earlier in the page loading process. We can see this by comparing our recording and waterfall charts from earlier: Side-by-side recording of the same page loading in different ways. ‘no-preload’ shows a large layout shift caused by the font switching and finishes loading at 4.4s. ‘preload’ doesn’t have a shift and finishes loading at 3.1s. Side-by-side comparison of two waterfall charts of the same site with font file `lobster.woff2`. For the ‘no-preload’ document the font loads after all other assets and finishes at 3s. The ‘preload’ document shows the font loading much earlier, in parallel with other files and finishing at 2s. As I mentioned in Getting started with Web Performance, it’s best to use preloads sparingly so limit this to your most important font or two. Remember that it’s a balance. By preloading too many resources you run the risk of other high-priority resources such as CSS being slowed down and arriving late. I would recommend preloading just the heading font to start with. With some testing you can see if preloading your main body font is worth it also! With care, font preloads can be a simple and impactful optimisation opportunity and this is why it’s my favourite HTML snippet! This is a great step to improving font loading, and there are plenty of other web font optimisations to try also!

6 months ago 64 votes

More in programming

My first year since coming back to Linux

<![CDATA[It has been a year since I set up my System76 Merkaat with Linux Mint. In July of 2024 I migrated from ChromeOS and the Merkaat has been my daily driver on the desktop. A year later I have nothing major to report, which is the point. Despite the occasional unplanned reinstallation I have been enjoying the stability of Linux and just using the PC. This stability finally enabled me to burn bridges with mainstream operating systems and fully embrace Linux and open systems. I'm ready to handle the worst and get back to work. Just a few years ago the frustration of troubleshooting a broken system would have made me seriously consider the switch to a proprietary solution. But a year of regular use, with an ordinary mix of quiet moments and glitches, gave me the confidence to stop worrying and learn to love Linux. linux a href="https://remark.as/p/journal.paoloamoroso.com/my-first-year-since-coming-back-to-linux"Discuss.../a Email | Reply @amoroso@oldbytes.space !--emailsub--]]>

21 hours ago 4 votes
What can agents actually do?

There’s a lot of excitement about what AI (specifically the latest wave of LLM-anchored AI) can do, and how AI-first companies are different from the prior generations of companies. There are a lot of important and real opportunities at hand, but I find that many of these conversations occur at such an abstract altitude that they’re a bit too abstract. Sort of like saying that your company could be much better if you merely adopted software. That’s certainly true, but it’s not a particularly helpful claim. This post is an attempt to concisely summarize how AI agents work, apply that summary to a handful of real-world use cases for AI, and make the case that the potential of AI agents is equivalent to the potential of this generation of AI. By the end of this writeup, my hope is that you’ll be well-armed to have a concrete discussion about how LLMs and agents could change the shape of your company. How do agents work? At its core, using an LLM is an API call that includes a prompt. For example, you might call Anthropic’s /v1/message with a prompt: How should I adopt LLMs in my company? That prompt is used to fill the LLM’s context window, which conditions the model to generate certain kinds of responses. This is the first important thing that agents can do: use an LLM to evaluate a context window and get a result. Prompt engineering, or context engineering as it’s being called now, is deciding what to put into the context window to best generate the responses you’re looking for. For example, In-Context Learning (ICL) is one form of context engineering, where you supply a bunch of similar examples before asking a question. If I want to determine if a transaction is fraudulent, then I might supply a bunch of prior transactions and whether they were, or were not, fraudulent as ICL examples. Those examples make generating the correct answer more likely. However, composing the perfect context window is very time intensive, benefiting from techniques like metaprompting to improve your context. Indeed, the human (or automation) creating the initial context might not know enough to do a good job of providing relevant context. For example, if you prompt, Who is going to become the next mayor of New York City?, then you are unsuited to include the answer to that question in your prompt. To do that, you would need to already know the answer, which is why you’re asking the question to begin with! This is where we see model chat experiences from OpenAI and Anthropic use web search to pull in context that you likely don’t have. If you ask a question about the new mayor of New York, they use a tool to retrieve web search results, then add the content of those searches to your context window. This is the second important thing that agents can do: use an LLM to suggest tools relevant to the context window, then enrich the context window with the tool’s response. However, it’s important to clarify how “tool usage” actually works. An LLM does not actually call a tool. (You can skim OpenAI’s function calling documentation if you want to see a specific real-world example of this.) Instead there is a five-step process to calling tools that can be a bit counter-intuitive: The program designer that calls the LLM API must also define a set of tools that the LLM is allowed to suggest using. Every API call to the LLM includes that defined set of tools as options that the LLM is allowed to recommend The response from the API call with defined functions is either: Generated text as any other call to an LLM might provide A recommendation to call a specific tool with a specific set of parameters, e.g. an LLM that knows about a get_weather tool, when prompted about the weather in Paris, might return this response: [{ "type": "function_call", "name": "get_weather", "arguments": "{\"location\":\"Paris, France\"}" }] The program that calls the LLM API then decides whether and how to honor that requested tool use. The program might decide to reject the requested tool because it’s been used too frequently recently (e.g. rate limiting), it might check if the associated user has permission to use the tool (e.g. maybe it’s a premium only tool), it might check if the parameters match the user’s role-based permissions as well (e.g. the user can check weather, but only admin users are allowed to check weather in France). If the program does decide to call the tool, it invokes the tool, then calls the LLM API with the output of the tool appended to the prior call’s context window. The important thing about this loop is that the LLM itself can still only do one interesting thing: taking a context window and returning generated text. It is the broader program, which we can start to call an agent at this point, that calls tools and sends the tools’ output to the LLM to generate more context. What’s magical is that LLMs plus tools start to really improve how you can generate context windows. Instead of having to have a very well-defined initial context window, you can use tools to inject relevant context to improve the initial context. This brings us to the third important thing that agents can do: they manage flow control for tool usage. Let’s think about three different scenarios: Flow control via rules has concrete rules about how tools can be used. Some examples: it might only allow a given tool to be used once in a given workflow (or a usage limit of a tool for each user, etc) it might require that a human-in-the-loop approves parameters over a certain value (e.g. refunds more than $100 require human approval) it might run a generated Python program and return the output to analyze a dataset (or provide error messages if it fails) apply a permission system to tool use, restricting who can use which tools and which parameters a given user is able to use (e.g. you can only retrieve your own personal data) a tool to escalate to a human representative can only be called after five back and forths with the LLM agent Flow control via statistics can use statistics to identify and act on abnormal behavior: if the size of a refund is higher than 99% of other refunds for the order size, you might want to escalate to a human if a user has used a tool more than 99% of other users, then you might want to reject usage for the rest of the day it might escalate to a human representative if tool parameters are more similar to prior parameters that required escalation to a human agent LLMs themselves absolutely cannot be trusted. Anytime you rely on an LLM to enforce something important, you will fail. Using agents to manage flow control is the mechanism that makes it possible to build safe, reliable systems with LLMs. Whenever you find yourself dealing with an unreliable LLM-based system, you can always find a way to shift the complexity to a tool to avoid that issue. As an example, if you want to do algebra with an LLM, the solution is not asking the LLM to directly perform algebra, but instead providing a tool capable of algebra to the LLM, and then relying on the LLM to call that tool with the proper parameters. At this point, there is one final important thing that agents do: they are software programs. This means they can do anything software can do to build better context windows to pass on to LLMs for generation. This is an infinite category of tasks, but generally these include: Building general context to add to context window, sometimes thought of as maintaining memory Initiating a workflow based on an incoming ticket in a ticket tracker, customer support system, etc Periodically initiating workflows at a certain time, such as hourly review of incoming tickets Alright, we’ve now summarized what AI agents can do down to four general capabilities. Recapping a bit, those capabilities are: Use an LLM to evaluate a context window and get a result Use an LLM to suggest tools relevant to the context window, then enrich the context window with the tool’s response Manage flow control for tool usage via rules or statistical analysis Agents are software programs, and can do anything other software programs do Armed with these four capabilities, we’ll be able to think about the ways we can, and cannot, apply AI agents to a number of opportunities. Use Case 1: Customer Support Agent One of the first scenarios that people often talk about deploying AI agents is customer support, so let’s start there. A typical customer support process will have multiple tiers of agents who handle increasingly complex customer problems. So let’s set a goal of taking over the easiest tier first, with the goal of moving up tiers over time as we show impact. Our approach might be: Allow tickets (or support chats) to flow into an AI agent Provide a variety of tools to the agent to support: Retrieving information about the user: recent customer support tickets, account history, account state, and so on Escalating to next tier of customer support Refund a purchase (almost certainly implemented as “refund purchase” referencing a specific purchase by the user, rather than “refund amount” to prevent scenarios where the agent can be fooled into refunding too much) Closing the user account on request Include customer support guidelines in the context window, describe customer problems, map those problems to specific tools that should be used to solve the problems Flow control rules that ensure all calls escalate to a human if not resolved within a certain time period, number of back-and-forth exchanges, if they run into an error in the agent, and so on. These rules should be both rules-based and statistics-based, ensuring that gaps in your rules are neither exploitable nor create a terrible customer experience Review agent-customer interactions for quality control, making improvements to the support guidelines provided to AI agents. Initially you would want to review every interaction, then move to interactions that lead to unusual outcomes (e.g. escalations to human) and some degree of random sampling Review hourly, then daily, and then weekly metrics of agent performance Based on your learnings from the metric reviews, you should set baselines for alerts which require more immediate response. For example, if a new topic comes up frequently, it probably means a serious regression in your product or process, and it requires immediate review rather than periodical review. Note that even when you’ve moved “Customer Support to AI agents”, you still have: a tier of human agents dealing with the most complex calls humans reviewing the periodic performance statistics humans performing quality control on AI agent-customer interactions You absolutely can replace each of those downstream steps (reviewing performance statistics, etc) with its own AI agent, but doing that requires going through the development of an AI product for each of those flows. There is a recursive process here, where over time you can eliminate many human components of your business, in exchange for increased fragility as you have more tiers of complexity. The most interesting part of complex systems isn’t how they work, it’s how they fail, and agent-driven systems will fail occasionally, as all systems do, very much including human-driven ones. Applied with care, the above series of actions will work successfully. However, it’s important to recognize that this is building an entire software pipeline, and then learning to operate that software pipeline in production. These are both very doable things, but they are meaningful work, turning customer support leadership into product managers and requiring an engineering team building and operating the customer support agent. Use Case 2: Triaging incoming bug reports When an incident is raised within your company, or when you receive a bug report, the first problem of the day is determining how severe the issue might be. If it’s potentially quite severe, then you want on-call engineers immediately investigating; if it’s certainly not severe, then you want to triage it in a less urgent process of some sort. It’s interesting to think about how an AI agent might support this triaging workflow. The process might work as follows: Pipe all created incidents and all created tickets to this agent for review. Expose these tools to the agent: Open an incident Retrieve current incidents Retrieve recently created tickets Retrieve production metrics Retrieve deployment logs Retrieve feature flag change logs Toggle known-safe feature flags Propose merging an incident with another for human approval Propose merging a ticket with another ticket for human approval Redundant LLM providers for critical workflows. If the LLM provider’s API is unavailable, retry three times over ten seconds, then resort to using a second model provider (e.g. Anthropic first, if unavailable try OpenAI), and then finally create an incident that the triaging mechanism is unavailable. For critical workflows, we can’t simply assume the APIs will be available, because in practice all major providers seem to have monthly availability issues. Merge duplicates. When a ticket comes in, first check ongoing incidents and recently created tickets for potential duplicates. If there is a probable duplicate, suggest merging the ticket or incident with the existing issue and exit the workflow. Assess impact. If production statistics are severely impacted, or if there is a new kind of error in production, then this is likely an issue that merits quick human review. If it’s high priority, open an incident. If it’s low priority, create a ticket. Propose cause. Now that the incident has been sized, switch to analyzing the potential causes of the incident. Look at the code commits in recent deploys and suggest potential issues that might have caused the current error. In some cases this will be obvious (e.g. spiking errors with a traceback of a line of code that changed recently), and in other cases it will only be proximity in time. Apply known-safe feature flags. Establish an allow list of known safe feature flags that the system is allowed to activate itself. For example, if there are expensive features that are safe to disable, it could be allowed to disable them, e.g. restricting paginating through deeper search results when under load might be a reasonable tradeoff between stability and user experience. Defer to humans. At this point, rely on humans to drive incident, or ticket, remediation to completion. Draft initial incident report. If an incident was opened, the agent should draft an initial incident report including the timeline, related changes, and the human activities taken over the course of the incident. This report should then be finalized by the human involved in the incident. Run incident review. Your existing incident review process should take the incident review and determine how to modify your systems, including the triaging agent, to increase reliability over time. Safeguard to reenable feature flags. Since we now have an agent disabling feature flags, we also need to add a periodic check (agent-driven or otherwise) to reenable the “known safe” feature flags if there isn’t an ongoing incident to avoid accidentally disabling them for long periods of time. This is another AI agent that will absolutely work as long as you treat it as a software product. In this case, engineering is likely the product owner, but it will still require thoughtful iteration to improve its behavior over time. Some of the ongoing validation to make this flow work includes: The role of humans in incident response and review will remain significant, merely aided by this agent. This is especially true in the review process, where an agent cannot solve the review process because it’s about actively learning what to change based on the incident. You can make a reasonable argument that an agent could decide what to change and then hand that specification off to another agent to implement it. Even today, you can easily imagine low risk changes (e.g. a copy change) being automatically added to a ticket for human approval. Doing this for more complex, or riskier changes, is possible but requires an extraordinary degree of care and nuance: it is the polar opposite of the idea of “just add agents and things get easy.” Instead, enabling that sort of automation will require immense care in constraining changes to systems that cannot expose unsafe behavior. For example, one startup I know has represented their domain logic in a domain-specific language (DSL) that can be safely generated by an LLM, and are able to represent many customer-specific features solely through that DSL. Expanding the list of known-safe feature flags to make incidents remediable. To do this widely will require enforcing very specific requirements for how software is developed. Even doing this narrowly will require changes to ensure the known-safe feature flags remain safe as software is developed. Periodically reviewing incident statistics over time to ensure mean-time-to-resolution (MTTR) is decreasing. If the agent is truly working, this should decrease. If the agent isn’t driving a reduction in MTTR, then something is rotten in the details of the implementation. Even a very effective agent doesn’t relieve the responsibility of careful system design. Rather, agents are a multiplier on the quality of your system design: done well, agents can make you significantly more effective. Done poorly, they’ll only amplify your problems even more widely. Do AI Agents Represent Entirety of this Generation of AI? If you accept my definition that AI agents are any combination of LLMs and software, then I think it’s true that there’s not much this generation of AI can express that doesn’t fit this definition. I’d readily accept the argument that LLM is too narrow a term, and that perhaps foundational model would be a better term. My sense is that this is a place where frontier definitions and colloquial usage have deviated a bit. Closing thoughts LLMs and agents are powerful mechanisms. I think they will truly change how products are designed and how products work. An entire generation of software makers, and company executives, are in the midst of learning how these tools work. Software isn’t magic, it’s very logical, but what it can accomplish is magical. The same goes for agents and LLMs. The more we can accelerate that learning curve, the better for our industry.

19 hours ago 3 votes
Overanalyzing a minor quirk of Espressif’s reset circuit

The mystery In the previous article, I briefly mentioned a slight difference between the ESP-Prog and the reproduced circuit, when it comes to EN: Focusing on EN, it looks like the voltage level goes back to 3.3V much faster on the ESP-Prog than on the breadboard circuit. The grid is horizontally spaced at 2ms, so … Continue reading Overanalyzing a minor quirk of Espressif’s reset circuit → The post Overanalyzing a minor quirk of Espressif’s reset circuit appeared first on Quentin Santos.

22 hours ago 2 votes
Buying a house in Karuizawa, Japan

After 18 months of living in Karuizawa, a resort town about an hour away from Tokyo via the Shinkansen, I have bought a house here. This article describes my experience of purchasing a house, and contains tips that are useful both if you’re considering buying in Karuizawa specifically, and in Japan more generally. In this article, I’ll cover: My personal journey to Karuizawa Why you might choose to live in Karuizawa My process of buying a house Tips for potential homebuyers in Japan From Tokyo to Karuizawa: my own journey In April 2020 I was living in central Tokyo. Three days after my one-year-old son entered daycare, a state of emergency was declared because of COVID-19. The daycare was closed, so my wife and I took turns looking after him while working remotely from our apartment. The small park next to our apartment was also closed due to the state of emergency, and so my time with my son included such fun activities as walking up and down the stairs, and looking at ants in the parking lot. After a week or two, we’d had enough. We moved in with my in-laws, who were living in a house in a small commuter town in Saitama. Our lives improved dramatically. The nearby parks were not closed. The grandparents could help look after my son. I could enjoy excellent cycling in the nearby mountains. We kept our apartment in Tokyo, as we didn’t know how long we’d stay, but let my brother-in-law use it. It was more spacious than his own, and gave him a better place to work remotely from. Leaving Tokyo for good In June of 2020 the state of emergency was lifted, yet we decided not to move back to Tokyo. Before having a kid, Tokyo had been a wonderful place to live. There was always something new to try, and opportunities to make new professional connections abounded. But as a father, my lifestyle had changed dramatically, even before COVID. No longer was I attending multiple events per week, but at most one per month. I basically stopped drinking alcohol, as maximizing the quality of what little sleep I could get was too important. With a stroller, getting around by train was no longer easy. My life had become much more routine: excitement came from watching my son grow, not my own activities. Though we’d enjoyed living in an area that was suburban bordering on rural, we didn’t want to live with my in-laws indefinitely. Still, seeing how useful it was to have them around with a small child, we decided to look for a house to rent nearby. We found a relatively modern one in the next town over, about a 10-minute drive from my in-laws. The rent was about half of what our Tokyo apartment’s had been, yet this house was twice as big, and even had a small garden. Living there was a wonderful change of pace. When my second child was born a year later, having the in-laws nearby became even more helpful. But as the COVID restrictions began rolling back, we started to think about where we wanted to settle down permanently. Choosing Karuizawa There were some definite downsides to the town we were living in. Practically all our neighbours were retirees. There were few restaurants that were worth going to. The equipment at the playgrounds was falling apart, and there was no sign it would be replaced. The summers were brutally hot, making it unpleasant to be outside. There wasn’t anything for kids to do inside. We’d visited Karuizawa before, and it seemed like it had the access to nature we appreciated, while also offering more options for dining out and other cultural activities. The cooler climate was also a big motivating factor. So in June 2022, we started looking at places. Most of the rental options were incredibly expensive seasonal properties, and so buying a house seemed like the most realistic option. But the market moved extremely quickly, and any property that seemed like a good deal was snatched up before we even had a chance to look at it. After about half a year of searching, we gave up. We then considered buying a house in Gotenba, a town at the base of Mount Fuji. We’d visited there in the past, and though it didn’t seem quite as nice an option as Karuizawa, we were able to find a decent house that was cheap enough that buying it was a relatively small risk. We placed a lowball offer on the property, and were rejected. Frustrated, I took a look at the rental options for Karuizawa again. This time we saw two houses for rent that were good candidates! We heard from the real estate agent that one of the properties already had someone coming to view the next afternoon, and so we went the next morning. Visiting the house, it seemed like exactly what we were looking for. We immediately put in a rental application, and moved in the next month. Why Karuizawa? I’ve already covered some of the reasons why we chose Karuizawa, but I’ll go into more detail about them, along with other unexpected good points. Mild summers According to historical data, the average temperature in Karuizawa in August is 20.8°C. While daytime temperatures get hotter than that, you’re unlikely to risk heat stroke by being active outside, something that isn’t true for much of Japan. That being said, climate change is inescapable, and summers in Karuizawa are getting hotter than historical data would suggest. This is an issue because while it cools down at night, many of the houses are built only with the cold winters in mind. For instance, despite the house I rented being built in 2019, it only had a single AC unit. This meant that many days in July and August were unbearably hot inside, and I had trouble sleeping at night as it wouldn’t cool down until well past midnight. Cold but cheerful winters While summers are cooler, this also means winters are cold. The average temperature in January is -3.3°C. However, much like Tokyo, winters here tend to be quite sunny, and there have only been a few heavy snowfalls per year while I’ve lived here. That’s enough that you can enjoy the snow without having to worry about shovelling it daily. Proximity to Tokyo The Shinkansen makes it quicker for me to get into central Tokyo than when I was living in suburban Saitama. It’s about a 70-minute ride from Karuizawa station to Tokyo station. While this is not something I’d want to do daily, I now typically go into Tokyo only a couple of times per month, which is reasonable. Greenery and nature As a resort community, Karuizawa places a lot of emphasis on greenery. Throughout the town, there are plenty of areas where residential and commercial spaces mingle with forest. Many houses have nice gardens. Shade exists everywhere. Wilder nature is close by, too. While you can do day hikes from Tokyo, they involve an hour plus on the train, followed by a climb where you’re usually surrounded by other people. In Karuizawa, I can walk 15 minutes to a trailhead where I’ll see at most a couple of groups per hour. Cheaper than Tokyo, but not significantly so Money spent on housing goes a lot further in Karuizawa than in Tokyo. For the same price as a used Tokyo apartment, you can get a nice used house on a relatively large plot of land in Karuizawa. However, it’s hard to find truly affordable housing. For starters, Karuizawa’s plots tend to be large by Japanese standards, so even if the per-unit price of the land is cheaper, the overall cost isn’t so cheap. For instance, a centrally located 100 tsubo (330 m²) plot in Nakakaruizawa, which is on the small side of what you can find, will currently sell for at least 30 million yen. It may be possible to get a deal on a more remote piece of land, but true steals are hard to come by. Dining out is another area where it’s easy to spend lots of money. Prices are on par with Tokyo, and there are few cheap options, with Sukiya, McDonald’s, and a couple of ramen shops being practically the only sub-1,000 yen choices. Groceries, at least, are cheaper. While the Tsuruya grocery store does sell a lot of high-end items, the basics like milk, eggs, vegetables, and chicken are significantly cheaper than in Tokyo or even suburban Saitama. All this means that many residents of Karuizawa are wealthy compared to Japan’s overall population. Sometimes that makes them take for granted that others might struggle financially. For instance, when my son graduated from public daycare, the PTA organized a graduation party. We paid 16,000 yen for myself, my wife, and two children to attend. Since that’s equivalent to two eight-hour days at minimum wage, I think it was too expensive. I noticed that some of the children didn’t attend, while others came with just one parent, perhaps because of the prohibitive cost. Liquid housing market While we were living in suburban Saitama, we considered buying a house, and even looked at a couple of places. It was very affordable, with even mansions (in the traditional English usage of the word) being cheaper than Tokyo mansions (in the Japanese sense). But the reason they were so cheap was because there wasn’t a secondary market for them. So even if we could get a good deal, we were worried that should we ever want to sell it again, it might not even be possible to give it away. Karuizawa’s real estate market moves fast. This sucks as a buyer but is great for sellers. Furthermore, because it’s perceived as a place to have a second home by wealthy Tokyoites, houses that are by our standards very nice are nowhere near the top of the market. This reduces the risk of buying a property and not being able to sell it later. Great public facilities If you have young children, Karuizawa offers many free or cheap public facilities. This includes nice playgrounds, children’s halls stocked with toys and activities, a beautiful library with a decent selection of English picture books, and a recreation centre with a gym, training room, pool, indoor and outdoor skating rinks, and a curling rink (built for 1998 Winter Olympics). A welcoming and international community Some areas of Japan have a reputation for being insular and not friendly toward newcomers. Perhaps because much of Karuizawa’s population has moved here from elsewhere, the people I’ve met have been quite welcoming. I’m also always happy to meet new residents, and pass on the helpful tips I’ve picked up. In addition, I’ve discovered that many residents have some sort of international background. While non-Japanese residents are very much the minority, a large percentage of the Japanese parents I’ve spoken with have either studied or worked abroad. There is also an International Association of Karuizawa, whose members include many long-term non-Japanese residents. Their Facebook group makes it easy to ask for advice in English. You can get around without a car Most days I don’t use a car, and get around by walking or bicycling. The lack of heavy snow makes it possible to do this year round (though I’m one of the few people who still uses a bicycle when it is -10°C out). Mostly I’m able to get around without a car because I live in a relatively central area, so it’s not feasible for every resident. It can be quite helpful, though, as traffic becomes absolutely horrible during the peak seasons. For instance, the house I was renting was a kilometer away from the one I bought. It was less than a 5-minute drive normally, but during Golden Week it took 30 minutes. That being said, it’s practically required to use a car sometimes. For instance, there’s a great pediatrician, but they’re only accessible by car. Similarly, I use our car to take my kids to the pool, pick up things from the home centre, and so on. My process for buying a house After a year of renting in Karuizawa, we decided we wanted to continue living there indefinitely. Continuing to rent the same house wasn’t an option: the owners were temporarily abroad and so we had a fixed-term contract. While we could have looked for another place to rent, we figured we’d be settling down, and so wanted to buy a house. Starting the search On September 1st, 2024, we started our search and immediately found our first candidate: a recently-built house near Asama Fureai Park. That park is the nicest one for young children in Karuizawa, as it has a good playground but is never too crowded. The property was listed with Royal Resort, which has the most listings for Karuizawa. Rather than contacting Royal Resort directly, though, we asked Masaru Takeyama of Resort Innovation to do so on our behalf. In Japan, there is a buyer’s agent and seller’s agent. Often the seller’s agent wants to act as the buyer’s agent as well, as it earns them double the commission, despite the obvious conflicts of interest. Of the agents we’d contacted previously, Masaru seemed the most trustworthy. I may have also been a bit biased, as he speaks English, whereas the other agents only spoke Japanese. He set up a viewing for us, but we discovered it wasn’t quite our ideal house. While the house was well built, the layout wasn’t our preference. It also was on a road with many large, noisy trucks, so it was kind of unpleasant to be outside. Making the first offer Over the next three months, we’d look at new listings online practically every day. I set up automated alerts for when the websites of different real estate agents were updated. We considered dozens of properties, and actually visited four plots and three used houses. None of them were a good match. On December 3rd, 2024, I found a great-looking property. It was being advertised as 5.1 km from Nakakaruiza station, which would have made it inconvenient, but it was also listed as 中部小学校近隣戸建 (Chubu Elementary Neighborhood Detached House). As the elementary school isn’t that far from the station, I assumed there was an error. The “house” was more of an old cabin, but it was priced cheaply for just the land itself. I sent Masaru an email asking him to give us the address. Meanwhile, my wife and I had gotten pretty good at identifying the locations of properties based on clues in the listing. The startup of a fellow Karuizawa international resident has a good tool for searching lots. My wife managed to identify this one, and so the following morning we looked at it. It wasn’t perfect, but it was a great location and a good deal, so before Masaru had even responded to us with the address, we sent another email saying we’d like to buy it. Masaru responded later that morning that he had a concern: the access to the house was a private road divided into two parcels, one owned by a real estate company, and the other by a pair of individuals. We’d need to negotiate with those parties about things like usage rights, waterworks, and so on. While he wasn’t worried about dealing with the real estate company, as it should just be a question of compensating them, the individuals owning the other parcel might theoretically be unwilling to negotiate. Based on his analysis, the following day (December 5th) we submitted a non-binding purchase application, with the condition that the road issue be resolved. That evening Masaru told us that he had discovered that the seller was a woman in her nineties. Because things like dementia are common among people that old, he added another condition, which was that a judicial scrivener testify to her mental capacity to enter into a contract. He warned that if we didn’t do that, and later the seller was to be found to be mentally unfit, the sale could be reversed, even if we had already proceeded with the construction of a new house. Given the cost of building a new home, this seemed like a prudent measure to take. A few days later we heard that the seller’s son was discussing the sale with his mother, and that they’d be having a family meeting the following weekend to decide whether to make the sale. To try to encourage them to sell to us, my wife wrote a letter (in Japanese) to them, and attached some photos of our family in Karuizawa. On December 16th, we received word that there was actually another potential buyer for the property who’d made an identical offer. In Japan, once someone submits a purchase application, it is normally handled on a first-come, first-served basis. However I noted that the seller didn’t mark the property as “under negotiation” on their website. I suspect we were the first to make an offer, as we did it literally the day after it was published. Apparently the seller’s son wanted to do business with us, but the daughter preferred the other family. We were not told why the daughter wanted to go with the other potential buyers, but it may have been because of our request to have the seller’s mental capacity tested. Dropping that requirement seemed too risky, though. On December 18th, we were informed that the seller had chosen the other buyer. This was quite a disappointing turn of events. We’d initially thought it was a sure thing because we were so fast to submit the offer and were giving them what they’d asked for. We’d even talked with a couple of home builders already. Furthermore, as winter had arrived, it seemed like the real estate market had also frozen. Whereas we’d previously seen new properties appear almost daily, now we spotted one or two a week at most. Making a successful offer Over the holidays, we looked at a couple more plots. On January 6th, we identified a used house in Nakakaruizawa that seemed to meet our criteria. It was by no means perfect, but close enough to be a candidate, so on January 10th we visited it. The house was pretty much as expected. Our one concern was the heating situation. It had previously had central heating that was based on a kerosene boiler, but that had been replaced with central air conditioning. While visiting the house, we turned it on, but it didn’t seem to make much difference. After some back and forth, we got the seller to run the AC constantly for a couple of days, and then on the morning of January 14th, we visited the house again. It was a grey and cold day, with little sunlight—basically the worst conditions possible for keeping the house warm, which I suppose was a good test. It was about 1°C outside and 10°C inside. We heard that the house had previously been rented out, and that the prior tenants had needed to use extra kerosene heaters to stay warm. This wasn’t ideal, but we also saw that with some renovations, we could improve the insulation. We considered making a lowball offer, but Masaru thought it was unlikely that it would be accepted. Instead, on January 17th, we made an offer at the asking price, conditional on it passing a home inspection and us getting an estimate for renovation costs. We heard that, once again, there was another potential buyer. They were “preparing” to submit an offer, but hadn’t done so yet. This time, the seller followed the standard process of considering our offer first, and accepting it in a non-binding manner. We learned that the seller itself was also a real estate company, whose main business seemed to be developing hotels and golf courses. The sale of this property was a relatively minor deal for them, and their main concern was that everything went smoothly. On January 23rd, we had a housing inspection carried out. The inspector found several issues, but they were all cosmetic or otherwise minor, so we said we’d proceed with the contract. Signing the contract The seller’s agent didn’t appear to be in a hurry to finalize the contract. It took a while for them to present us with the paperwork, and after that there were some minor changes to it, so it wasn’t until March 19th that we finally signed. One reason for the delay was that we’d suggested we sign the contract electronically, something the buyer had never done before. Signing a contract electronically was not only simpler from our perspective, but also avoided the need to affix a revenue stamp on the contract, saving some money. But even though Masaru was experienced with electronic contracts, it seemed to take the seller some time to confirm that everything was okay. When we signed the contract, we agreed to immediately make a 10 percent down payment, with the outstanding amount to be transferred by May 16th. We’d already gotten pre-approval on a housing loan, but needed the extra time for the final approval. Obtaining the loan On January 22nd, we visited Hachijuni Bank, which is headquartered in Nagano and has a branch in Karuizawa, and started the loan pre-approval process. This involved submitting a fair amount of paperwork, especially as I was the director of a company as opposed to a regular employee. The whole process took about two weeks. In parallel, we started the pre-approval process for PayPay Bank. The application involved minimal paperwork, and we were able to quickly get pre-approved by them too. To receive the actual approval for the loan, though, we needed to have already signed the purchase contract, so we couldn’t begin until March 19th. This time, the situation was reversed, and PayPay Bank required much more documentation than Hachijuni Bank. On April 9th, we met again with Hachijuni Bank. There was a problem with our application: my middle names hadn’t been properly entered into the contract, and so we’d have to go through the approval process again. The representative said he’d make sure they reviewed it quickly because it was his fault. That evening, we got the result of our application to PayPay Bank: rejected! No reason was given, but as they offer quite low rates, I’m guessing they only accept the lowest-risk loans. Maybe the reason was the house itself, maybe it was that I was the director of a small private company, maybe it was something else. While the Hachijuni Bank representative seemed positive about our application, I was worried. On April 15th we got the result from Hachijuni Bank: approved! Two days later we signed the paperwork with the bank and scheduled the handover for April 30th. Toilet troubles When the previous tenants had moved out of the house, the seller had decided to drain the water. Karuizawa temperatures are cold enough that if the house isn’t being heated, the pipes can freeze and burst. This meant that when we had the housing inspection performed, the inspector couldn’t confirm anything about the plumbing. Given that by mid-April temperatures were no longer below zero, we asked that the seller put the water back in. They agreed, and on April 23rd we heard that there was a problem with the toilets—some sort of leak. Likely some of the rubber sealing had dried out while the water had been removed. The seller offered to replace the toilets or pay us the cost of replacing them with equivalent ones. My understanding was that because they hadn’t declared any issues with the toilets in the original purchase agreement, they were obligated to do so. My wife and I had already talked about upgrading the toilets, but I wasn’t convinced that it’d be worth it. With the seller offering to pay two-thirds of the cost of the more premium toilets we wanted, though, it seemed like a stroke of luck. Handover On April 30th, the handover went smoothly. A representative from the seller’s company met with myself, the real estate agents, and a judicial scrivener. Technically I didn’t need to be there for it, but as the representative had come from Hiroshima I thought I should be present just in case anything happened. Nothing went awry, however, and they gave me the keys and some omiyage. Renovations We had already decided to do some renovations before moving in. With the toilets not working, that became an immediate necessity. One of the challenges of buying a used house is deciding how extensively to renovate. We settled on doing the minimum: replacing the toilets, putting up a wall to split the kids’ bedroom in two (it already had two separate doors and was designed to be split), switching the lights in the bedroom from fluorescent tubes to LEDs, and adding inner windows (内窓, uchi mado) to improve the insulation. We’d kicked off the process shortly after completing the home inspection, and had already had contractors visit to give estimates in advance. Still, we weren’t able to finalize any plans until we’d decided the exact handover date. After some negotiating, we got an agreement to wrap up the renovations by the beginning of June, and set a move-in date of June 5th. Moving in We managed to move in as scheduled, almost half a year after we first saw the house, and 10 months after we began our initial search. We weren’t exactly in a rush with the whole process, but it did take a lot of our time. Tips for potential homebuyers in Japan Here’s what I’d recommend if you’re looking to buy a house in Japan. Don’t rely on real estate agents to find properties for you My impression of real estate agents in Karuizawa is that they’re quite passive. I think this is a combination of the market being hot, and the fact that many inquiries they get are from people who dream about living here but will never make it a reality. I’d suggest being proactive about the search yourself. All of the best properties we found because we discovered the listings ourselves, not because an agent sent them to us. Find an agent you can trust The main value I got out of using a real estate agent was not because he introduced specific properties, but because he could point out potential issues with them. Checking the ownership of the road leading up to the property, or whether a contract could be reversed if the signer was years later deemed to be mentally incompetent, weren’t issues that had ever even occurred to me. Every property I considered purchasing had some unapparent problems. While there are some legal obligations placed upon the buyer’s agent, my understanding is that those don’t extend to every possible situation. What’s more, real estate seems to attract unscrupulous people, and some agents aren’t averse to behaving unethically or even illegally if it helps them close more deals. Because of this, I think the most important quality in an agent is trustworthiness. That can be hard to evaluate, but go with your gut. You don’t need your company to be profitable three years in a row I’d previously heard that it’s challenging to get a loan as the director of a company, and that the last three years of a business needed to be profitable to receive approval. That made me apprehensive, as TokyoDev was only incorporated in 2022, and 2024 was an unprofitable year for us due to it being the first year we had a decrease in the number of hires. However, when Hachijuni Bank reviewed TokyoDev’s finances, they said it was a great business. I was the sole employee of the business and it was only unprofitable because I had set my director’s compensation too aggressively. We’d had previous profitable years, and the company didn’t have any debts. In other words, one bad year for your company isn’t going to tank your chances of getting a loan. Go through the final approval process with multiple banks Some will advise you not to go through the final approval process of multiple banks at the same time. Since there’s a central database that allows banks to see that you’re doing this, it apparently increases your risk of rejection. If you’re only applying at a few banks, though, the risk remains fairly low. I guess PayPay Bank theoretically could have rejected us for this reason, but I doubt it. If we had initially applied only with them, however, and had waited to be rejected before applying with Hachijuni Bank, we would have risked not having the final approval go through before the payment deadline. Get a housing inspection If you’re buying a used house of any significant value, I highly recommend getting an inspection. We used Sakura Home Inspection, the biggest inspection company in Japan. While the base price for the inspection was only 66,000 yen, we ended up paying about 240,000 yen due to additional options, the size of the house, and transportation fees. While that’s not exactly cheap, it was less than one percent of the total purchase price, and seemed worth it to mitigate the risk of serious issues that might appear after the purchase. Rent locally before buying Our plan of first renting, then buying worked out quite well for us. Not only did it give me confidence that Karuizawa was somewhere I wanted to live for the long haul, it was much easier visiting potential properties when I lived a 10-minute bicycle ride away from them, instead of a 3-hour drive. If you’re considering buying a house in Karuizawa… Please get in touch with me! I’m happy to answer any questions you might have. In my previous article on coworking spaces in Karuizawa, I invited people to get in touch, and already have made several new connections through it. I’d love to continue to grow my community, and help transform Karuizawa from a resort town to one that’s focused on its full-time residents.

an hour ago 2 votes
Can tinygrad win?

This is not going to be a cakewalk like self driving cars. Most of comma’s competition is now out of business, taking billions and billions of dollars with it. Re: Tesla and FSD, we always expected Tesla to have the lead, but it’s not a winner take all market, it will look more like iOS vs Android. comma has been around for 10 years, is profitable, and is now growing rapidly. In self driving, most of the competition wasn’t even playing the right game. This isn’t how it is for ML frameworks. tinygrad’s competition is playing the right game, open source, and run by some quite smart people. But this is my second startup, so hopefully taking a bit more risk is appropriate. For comma to win, all it would take is people in 2016 being wrong about LIDAR, mapping, end to end, and hand coding, which hopefully we all agree now that they were. For tinygrad to win, it requires something much deeper to be wrong about software development in general. As it stands now, tinygrad is 14556 lines. Line count is not a perfect proxy for complexity, but when you have differences of multiple orders of magnitude, it might mean something. I asked ChatGPT to estimate the lines of code in PyTorch, JAX, and MLIR. JAX = 400k MLIR = 950k PyTorch = 3300k They range from one to two orders of magnitude off. And this isn’t even including all the libraries and drivers the other frameworks rely on, CUDA, cuBLAS, Triton, nccl, LLVM, etc…. tinygrad includes every single piece of code needed to drive an AMD RDNA3 GPU except for LLVM, and we plan to remove LLVM in a year or two as well. But so what? What does line count matter? One hypothesis is that tinygrad is only smaller because it’s not speed or feature competitive, and that if and when it becomes competitive, it will also be that many lines. But I just don’t think that’s true. tinygrad is already feature competitive, and for speed, I think the bitter lesson also applies to software. When you look at the machine learning ecosystem, you realize it’s just the same problems over and over again. The problem of multi machine, multi GPU, multi SM, multi ALU, cross machine memory scheduling, DRAM scheduling, SRAM scheduling, register scheduling, it’s all the same underlying problem at different scales. And yet, in all the current ecosystems, there are completely different codebases and libraries at each scale. I don’t think this stands. I suspect there is a simple formulation of the problem underlying all of the scheduling. Of course, this problem will be in NP and hard to optimize, but I’m betting the bitter lesson wins here. The goal of the tinygrad project is to abstract away everything except the absolute core problem in the cleanest way possible. This is why we need to replace everything. A model for the hardware is simple compared to a model for CUDA. If we succeed, tinygrad will not only be the fastest NN framework, but it will be under 25k lines all in, GPT-5 scale training job to MMIO on the PCIe bus! Here are the steps to get there: Expose the underlying search problem spanning several orders of magnitude. Due to the execution of neural networks not being data dependent, this problem is very amenable to search. Make sure your formulation is simple and complete. Fully capture all dimensions of the search space. The optimization goal is simple, run faster. Apply the state of the art in search. Burn compute. Use LLMs to guide. Use SAT solvers. Reinforcement learning. It doesn’t matter, there’s no way to cheat this goal. Just see if it runs faster. If this works, not only do we win with tinygrad, but hopefully people begin to rethink software in general. Of course, it’s a big if, this isn’t like comma where it was hard to lose. But if it wins… The main thing to watch is development speed. Our bet has to be that tinygrad’s development speed is outpacing the others. We have the AMD contract to train LLaMA 405B as fast as NVIDIA due in a year, let’s see if we succeed.

23 hours ago 2 votes