<!DOCTYPE html>
<!-- Welcome traveler.
You may have wandered to my website's source code out of curiosity,
or to learn something new. I've left a few comments here and there
for those who want to learn about HTML and building websites.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Syntax Error #8 - What can we learn from hardware debugging? : Juha-Matti Santala
</title>
<!-- RSS Feed
This link tells RSS readers where to find my feed so you don't have
to manually enter the entire path to the XML file but can jump right
into pasting the main page URL and the readers should find the right
feed for you.
RSS feeds are a great way to give readers the power to subscribe to
a blog with the tooling they want to.
-->
<link
rel="alternate"
type="application/rss+xml"
title="hamatti.org » Feed"
href="https://hamatti.org/feed/feed.xml"
/>
<!-- Metadata
Metadata is used in a few places, most notably when
sharing links in social media or messaging platforms.
-->
<!-- That's my name! -->
<meta name="author" content="Juha-Matti Santala" />
<!-- Description tells what this page is about -->
<meta
name="description"
content="The home of a developer community specialist."
/>
<!-- Open Graph
og stands for Open Graph and it's a specification for
defining social media preview content. It was created by
Facebook but many other platforms use it too.
-->
<meta property="og:site_name" content="Juha-Matti Santala - Community Builder. Dreamer. Adventurer." />
<meta property="og:locale" content="en_US" />
<meta
property="og:title"
content="Syntax Error #8 - What can we learn from hardware debugging?"
/>
<meta
property="og:description"
content="The home of a developer community specialist."
/>
<!--
This URL is important: it's where the preview will lead
when clicked.
If it's incorrect, the reader experience will be degraded.
-->
<meta property="og:url" content="https://hamatti.org/syntax-error/syntax-error-8-what-we-can-learn-from-hardware-debugging" />
<!--
These couple of image definitions help services choose
which images they should show in the preview.
Note that these don't need to even appear on the page.
If these are not defined, many platforms show the first
image they find on a page.
-->
<meta
property="og:image"
content="https://hamatti.org/"
/>
<meta
property="og:image:secure_url"
content="https://hamatti.org/"
/><!-- Fediverse:creator
Similar to Open Graph definitions above, this one
was created by the developers of Mastodon to let
the system know which Mastodon account is behind
this page and can link to it.
-->
<meta name="fediverse:creator" content="@hamatti@mastodon.world" />
<!-- Twitter / X
X (previously Twitter) has their own set of
meta tags they use to define what to show in
a preview.
-->
<meta
name="twitter:card"
content="summary"
/>
<meta
name="twitter:site"
content="@"
/>
<meta
name="twitter:creator"
content="@"
/>
<!-- Canonical URL
If a post is originally published elsewhere and
then shared on my site, I point the canonical URL
to that page to let computers - mainly search engine
scrapers - to know where the original exists.
-->
<link rel="canonical" href="https://hamatti.org/syntax-error/syntax-error-8-what-we-can-learn-from-hardware-debugging" />
<!-- Generator
This site is a statically generated site so I share which
tool I used to generate it.
Since my site is static, it's safe to include this but for
something using a dynamic backend (like WordPress or Django),
it can cause security issues as it lets potentially malicious
user to know what systems and versions you may be running.
-->
<meta name="generator" content="Eleventy v2.0.1" />
<!-- Mastodon verification
These links verify that when I link my website to my
Mastodon accounts, those accounts are really me.
-->
<link rel="me" href="https://mastodontti.fi/@hamatti" />
<link rel="me" href="https://mastodon.world/@hamatti" />
<script type="application/ld+json">
{
"name": "Juha-Matti Santala",
"description": "The home of a developer community specialist.",
"author": {
"@type": "Person",
"name": "Juha-Matti Santala"
},
"@type": "WebSite",
"url": "https://hamatti.org",
"image": "",
"headline": "Juha-Matti Santala - Community Builder. Dreamer. Adventurer.",
"sameAs": [
"",
""
],
"@context": "http://schema.org"
}
</script>
<!-- CSS
It's not usually the best practice to provide many CSS files but
to rather combine them in the build phase into one to avoid HTTP
requests on read time.
I have been lazy to set that up with Eleventy so here are all my
CSS declarations in a human-readable format.
-->
<link href="/assets/fonts/roboto-slab.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/layout.css" />
<link rel="stylesheet" href="/assets/typography.css" />
<link rel="stylesheet" href="/assets/colors.css" />
<link rel="stylesheet" href="/assets/page.css" />
<link rel="stylesheet" href="/assets/blog.css" />
<link rel="stylesheet" href="/assets/header.css" />
<link rel="stylesheet" href="/assets/navigation.css" />
<link rel="stylesheet" href="/assets/links.css" />
<link rel="stylesheet" href="/assets/newsletter.css" />
<link rel="stylesheet" href="/assets/footer.css" />
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/landing.css" />
<link rel="stylesheet" href="/assets/uses.css" />
<link rel="stylesheet" href="/assets/prism.css" />
<link rel="stylesheet" href="/assets/prism-ext-ptcgo.css" />
<link rel="stylesheet" href="/assets/print.css" media="print" />
<link
rel="stylesheet"
href="/assets/prism-vs-code-plus.css"
/>
<link rel="stylesheet" href="/assets/adventofcode.css" />
<link rel="stylesheet" href="/assets/embeds.css" />
<link rel="icon" href="/assets/img/favicon.png" />
<link rel="apple-touch-icon" href="/assets/img/favicon.png" />
<!-- Webmentions
Webmentions are a way for websites to talk to each other.
If you write a blog post that links to any of my pages on
this site, you can send me a Webmention to the URL below
and I will get a notification to know that we're now in
blogosphere discussion.
-->
<link
rel="webmention"
href="https://webmention.io/hamatti.org/webmention"
/>
</head>
<body class="line-numbers">
<div id="layout-top">
<header><div>
<a href='/'>Juha-Matti Santala</a>
<div>Community Builder. Dreamer. Adventurer.</div>
</div>
</header>
<nav aria-label="Main"><ul>
<li><a href="/" >Home</a></li>
<li><a href="/blog" >Blog</a></li>
<li><a href="https://notes.hamatti.org">Notes</a></li>
<li><a href="/weeklies" >Weeklies</a></li>
<li><a href="/snacks" >Snacks</a></li>
<li><a href="/codebase" >codebase</a></li>
<li><a href="/speaking" >Speaking</a></li>
<li><a href="/software" >Software</a></li>
<li><a href="/about" >About me</a></li>
<li><a href="/feed/feed.xml" class="icon"><svg role="img" labelled-by="RSS-SVG-ID" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
<title id="RSS-SVG-ID">RSS</title>
<path fill="currentColor" d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path>
</svg>
</a></li>
<li><a href="/search" class="icon"><?xml version="1.0"?>
<svg class="feather feather-search" fill="none" height="24" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg"
aria-label="search">
<circle cx="11" cy="11" r="8" />
<line x1="21" x2="16.65" y1="21" y2="16.65" />
</svg></a></li>
<li><button aria-label="Toggle light/dark mode" id="toggleTheme"><svg width="32px" height="32px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Toggle dark/light mode</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path
d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z">
</path>
</g>
</g>
</svg></button></li>
</ul></nav>
</div>
<main>
<div id="syntax-error-header">
<img src="/assets/img/syntax-error/banner.png" alt="" />
<a href="/syntax-error/">Back to index</a>
</div>
<div id="page"><h1>Syntax Error #8: What we can learn from hardware debugging?</h1>
<p>This month's Syntax Error takes a look at hardware debugging and what we can learn from that as software developers.</p>
<p>Happy & spooky October everyone! Welcome to the 8th issue of Syntax Error newsletter. This month I wanted to take a tiny detour away from software debugging and talk about hardware debugging and what we can learn from it.</p>
<p>Even if you're not planning to ever take out an oscilloscope and start poking at circuit boards and chips, these learnings can help you become better at your software debugging processes.</p>
<hr>
<h2>Lesson #1: Everything is a suspect</h2>
<p>One of my favorite Youtube channels on retro hardware fixing and debugging is <a href="https://youtube.com/@adriansdigitalbasement?si=0q0LAQNsBXRTOWJo">Adrian's Digital Basement</a>. He has a great catalogue of videos where he fixes retro computers, giving them new life. Fixing those machines requires a lot of debugging to figure out where the problems lie.</p>
<p>One of my key takeaways from watching Adrian find where the issues are is that with old hardware, <strong>everything is a suspect.</strong> That means you cannot rely on assumptions on where the issues are but you need to intentionally and deliberately go through all the possible cases. It could be broken capacitors, malfunctioning chips or disconnected traces and it's not usually visually clear which one is the culprit.</p>
<p>Personally, my aim in becoming better at debugging is to become better at following a process, step by step, with zero assumptions or guesses. Sometimes a guess can lead to success really fast but often it just leads to a wild goose hunt and since you didn't start with a process and checklist, you may end up poking at things semi-randomly. Once you become really good at that, you'll be able to debug nearly anything – even if you don't know the language or have domain knowledge of the software.</p>
<h2>Lesson #2: Proper tooling is a key</h2>
<p>Another takeaway is using <strong>proper tooling</strong>. Oscilloscopes, voltage meters, chip testers and loads of other tools are all used when trying to narrow down where the issue is. In software world we have debuggers, loggers and other tools that help us similarly well, as long as we know how to use them and incorporate the best tools to our daily utility belt.</p>
<p>It's worth the time to dive deep into understanding how these tools work and how to use them effectively in your current project. Sometimes it might even require making changes to the project code and infrastructure to make sure that you can run your debugging tools effectively.</p>
<p>If you work on a team, ask your colleagues how they debug when they run into issues. Host learning sessions regularly where you come together to discuss the tools that you use and share with each other what you've learned. Modern tools are often so complex that we only end up using a small portion of them and might not follow constantly their changelogs for new features. Sometimes it can be as simple as sharing keyboard shortcuts that can increase the productivity and quality of life for developers a lot.</p>
<h2>Lesson #3: Make the smallest changes possible</h2>
<p>When you build something physical, you need materials that cost money. The bigger and more specialized your build is, the more likely it is to rack up the bill.</p>
<p>Because of this, if something doesn't work, it's even more important in hardware than software to make small experiments and narrow down the problem and aim to solve it with the <strong>smallest changes possible</strong>. Once you've found and confirmed the issue and you've found a cheap fix that works, you can then be confident to invest more money and resources to build a more robust solution.</p>
<p>While the direct cost of added lines of codes is essentially zero in software projects, the complexity grows with every change. And once you find <em>a solution,</em> it becomes harder to simplify it down to the essentials because you have more candidates for what actually fixed the problem. So you'll have to do another round or two of figuring out the real problem, this time by removing changes and seeing if the problem reappears.</p>
<p>I find that this requires discipline or at least active conscious thinking. It's easy to go ahead and try a few different things without walking old changes back between them. This becomes more true when the problems themselves become more complex and difficult to figure out.</p>
<h2>Lesson #4: If all else fails</h2>
<p>Like the wonderful <strong><a href="https://www.youtube.com/@MariusHornberger">Marius Hornberger</a></strong> puts it well on <a href="https://www.youtube.com/watch?v=7GUkrfnmVRk">his latest video</a>:</p>
<blockquote>
<p>To summarize it: "Why? Just move." [- -] And when you're sitting on the floor like this, you know it's bad. <strong>Eventually though, you run out of ways to do it wrong.</strong></p>
</blockquote>
<hr>
<h2>Story Time</h2>
<p>Oona Räsänen has <a href="https://www.windytan.com/2023/02/using-hdmi-radio-interference-for-high.html">a great story in her blog</a> that was <a href="https://mastodon.social/@autiomaa/111188661164709740">shared with me by Daniel on Mastodon</a>.</p>
<blockquote>
<p>This story, too, begins with noise. I was browsing the radio waves with a software radio, looking for mysteries to accompany my ginger tea. I had started to notice a wide-band spiky signal on a number of frequencies that only seemed to appear indoors. Some sort of interference from electronic devices, probably.</p>
</blockquote>
<p>In this very interesting and well written exploration, she eventually figures out the display she's using, is leaking the image as radio waves (or something, I'm honestly not an expert or even a beginner on any of that).</p>
<p>I found the exploration, experimentation and eventual results of that story fascinating. When the starting point is essentially noticing random noise and the outcome is transmitting a webcam image through that noise to another computer, it's nothing short of marvelous.</p>
<p>I recommend checking out the full post and <a href="https://www.youtube.com/watch?v=iemOXp6bQXA">the accompanying video</a>.</p>
<hr>
<p>PS. I will be speaking about <strong>Debugging Python</strong> in <a href="https://www.pycon.se/">PyCon Sweden, 9th-10th of November in Stockholm</a>, If you're planning to be around Stockholm then, there are still tickets available for the conference. If you will attend, come say hi - I'll have Syntax Error stickers with me to share with you.</p>
<hr>
<p>_Syntax Error is created with love by <a href="/">_Juhis_</a>. If you liked it, why not share it with a friend? Or if you have any feedback or just want to say hi, hit reply. I'm always happy to hear from my readers and learn about what you do and how you debug your issues._</p>
</div>
<script src="/assets/javascript/prism.js"></script>
</main>
<footer><div>
Digital home of
<a href="https://hamatti.org">Juha-Matti Santala</a> | Built with
<a href="https://www.11ty.dev/" target="_blank">Eleventy</a> |
<a href="/feed/feed.xml">RSS</a> | Layout originally by
<a href="https://html5up.net/">HTML5 UP!</a>
</div>
<nav aria-label="Footer">
<a href="https://slashpages.net">Slashpages</a>
<ul>
<li><a href="/about">/about</a></li>
<li><a href="/uses">/uses</a></li>
<li><a href="/colophon">/colophon</a></li>
<li><a href="/blog/roll">/blogroll</a></li>
<li><a href="/contact">/contact</a></li>
<li><a href="/why">/why</a></li>
<li><a href="/now">/now</a></li>
</ul>
</nav>
<div>
<p style="margin: 1em">Trans rights are human rights.</p>
</div>
</footer>
<!-- Dark Mode
You can define how you want to style my site by defining
a light/dark mode setting in your operating system or
browser settings or by clicking the button at the end of
the main navigation.
This Javascript is what manages the button and storing
custom configuration.
-->
<script src="/assets/javascript/darkmode.js"></script>
</body>
</html>