My last day at RC came and went a while back,
but I finally found a few minutes to tidy up [my whistle project](https://github.com/colbyr/whistle-switch).
Its got some rough edges, but it works a lot better than I expected it to when I started 😅

<div
 className="mb-4"
 style={{
 content: "''",
 paddingBottom: `${(315 / 560) * 100}%`,
 position: "relative",
 width: "100%",
 }}
>
 <iframe
 src="https://player.vimeo.com/video/612888282?h=0b37642f66&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
 frameBorder="0"
 allow="autoplay; fullscreen; picture-in-picture"
 allowFullScreen
 style={{
 position: "absolute",
 top: 0,
 left: 0,
 width: "100%",
 height: "100%",
 }}
 title="Whistle detector on a Raspberry Pi"
 ></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

You can install it from [npm](https://www.npmjs.com/package/whistle-switch).

```sh
$ yarn global add whistle-switch
```

Fire it up on the same network as you homekit setup, and it should work right out of the box.

```sh
$ whistle-switch
🚧 starting listener...
🦾 starting controller!
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | [vite] connecting...
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | [vite] connected.
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | %c * Tone.js v14.7.77 * background: #000; color: #fff
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)
```

If you're trying to run `whistle-switch` on a Raspberry Pi, you need to [tell it where to find chromium](/blog/chrome-ears-only).

```sh
$ WHISTLE_SWITCH_CHROME_EXECUTABLE_PATH=$(which chromium-browser) whistle-switch
```

Then you should be able to [connect the switch to your Homekit setup](https://github.com/colbyr/whistle-switch#connect-with-homekit)!

<img
 alt="Homekit button map"
 className="mb-2"
 src="https://user-images.githubusercontent.com/478109/149678450-8d5a16bf-4433-4f42-8b64-c9c806c71866.jpeg"
 style={{ height: 400 }}
/>

Check it out [on Github](https://github.com/colbyr/whistle-switch) for [more interesting configuration options](https://github.com/colbyr/whistle-switch#advanced-configuration) and [trouble shooting](https://github.com/colbyr/whistle-switch#resetting-the-switch).

My last day at RC came and went a while back,
but I finally found a few minutes to tidy up <a href="https://github.com/colbyr/whistle-switch">my whistle project</a>.
Its got some rough edges, but it works a lot better than I expected it to when I started 😅<div class="mb-4" style="content:&#x27;&#x27;;padding-bottom:56.25%;position:relative;width:100%"><iframe src="https://player.vimeo.com/video/612888282?h=0b37642f66&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%" title="Whistle detector on a Raspberry Pi"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>You can install it from <a href="https://www.npmjs.com/package/whistle-switch">npm</a>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">$ yarn global add whistle-switch</code></div></pre>Fire it up on the same network as you homekit setup, and it should work right out of the box.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">$ whistle-switch
🚧 starting listener...
🦾 starting controller!
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | [vite] connecting...
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | [vite] connected.
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | %c * Tone.js v14.7.77 * background: #000; color: #fff
Sun Jan 16 2022 15:56:42 GMT-0500 (Eastern Standard Time) | The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)</code></div></pre>If you&#x27;re trying to run <code class="bg-gray-200">whistle-switch</code> on a Raspberry Pi, you need to <a href="/blog/chrome-ears-only">tell it where to find chromium</a>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">$ WHISTLE_SWITCH_CHROME_EXECUTABLE_PATH=$(which chromium-browser) whistle-switch</code></div></pre>Then you should be able to <a href="https://github.com/colbyr/whistle-switch#connect-with-homekit">connect the switch to your Homekit setup</a>!<img alt="Homekit button map" class="mb-2" src="https://user-images.githubusercontent.com/478109/149678450-8d5a16bf-4433-4f42-8b64-c9c806c71866.jpeg" style="height:400px"/>Check it out <a href="https://github.com/colbyr/whistle-switch">on Github</a> for <a href="https://github.com/colbyr/whistle-switch#advanced-configuration">more interesting configuration options</a> and <a href="https://github.com/colbyr/whistle-switch#resetting-the-switch">trouble shooting</a>.

Control Homekit by whistling 🎶

My last day at RC came and went a while back,

Whistle Switch


I don't go on Twitter much any more.
Somewhere along the line it just lost its daily appeal for me.
Lately, I've had a bit of an RSS renaissance.
RSS reading these days with [Reeder 5](https://reederapp.com/) on Mac and iOS is a great experience.
I've discovered that much of the content I want to keep up with is available on RSS already.

But alas, there's still some tweeters I wish I could keep up with.
Talking [with a couple friends](https://dontpanic.io) whose tweets I regularly miss,
I found myself wondering if I could get their posts into Reeder.
There are some services that do it already, like [feeder](https://feeder.co/) and [rss.app](https://rss.app/blog/how-to-create-rss-feeds-from-twitter-PMsbbO), but they cost $$$.

Those services seem to work just fine, but since I'm at RC, I figured I'd take a crack a building something like that myself.
I might as well spend a few dollars on a Digital Ocean VM and and learn something along the way.
So here it is...

## Introducing [tweed.systems](https://tweed.systems/)

[![Screenshot of tweed.systems](/images/tweed-systems.jpg)](https://tweed.systems)

It'll give you an RSS feed for a public twitter account to use with your feed reader of choice!

For example, you can find @recursecenter at https://tweed.systems/recursecenter/tweets.rss.

![@recursecenter in Reeder](/images/rc-twitter-in-reeder.jpg)

I'm planning to keep this running in a low-key fashion unless I exhaust my Twitter API rate limit.
You can use it at [tweed.systems](https://tweed.systems/) or [host your own instance](https://github.com/colbyr/rssfollow) if you're feeling DIY.


I don&#x27;t go on Twitter much any more.
Somewhere along the line it just lost its daily appeal for me.
Lately, I&#x27;ve had a bit of an RSS renaissance.
RSS reading these days with <a href="https://reederapp.com/">Reeder 5</a> on Mac and iOS is a great experience.
I&#x27;ve discovered that much of the content I want to keep up with is available on RSS already.But alas, there&#x27;s still some tweeters I wish I could keep up with.
Talking <a href="https://dontpanic.io">with a couple friends</a> whose tweets I regularly miss,
I found myself wondering if I could get their posts into Reeder.
There are some services that do it already, like <a href="https://feeder.co/">feeder</a> and <a href="https://rss.app/blog/how-to-create-rss-feeds-from-twitter-PMsbbO">rss.app</a>, but they cost $$$.Those services seem to work just fine, but since I&#x27;m at RC, I figured I&#x27;d take a crack a building something like that myself.
I might as well spend a few dollars on a Digital Ocean VM and and learn something along the way.
So here it is...<h2 class="mb-4 mt-6 font-semibold text-xl w-full">Introducing <a href="https://tweed.systems/">tweed.systems</a></h2><a href="https://tweed.systems"><img src="/images/tweed-systems.jpg" alt="Screenshot of tweed.systems"/></a>It&#x27;ll give you an RSS feed for a public twitter account to use with your feed reader of choice!For example, you can find @recursecenter at <a href="https://tweed.systems/recursecenter/tweets.rss">https://tweed.systems/recursecenter/tweets.rss</a>.<img src="/images/rc-twitter-in-reeder.jpg" alt="@recursecenter in Reeder"/>I&#x27;m planning to keep this running in a low-key fashion unless I exhaust my Twitter API rate limit.
You can use it at <a href="https://tweed.systems/">tweed.systems</a> or <a href="https://github.com/colbyr/rssfollow">host your own instance</a> if you&#x27;re feeling DIY.

Twitter over RSS

I've been working on a program to turn on my lights when I whistle a tune.
Now that I have a [working prototype](https://rc.colbyr.com/whistlee2/), I wanted to get it running on an old Raspberry Pi and start testing it around the apartment.

So far I've done most of my work with [Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
It was really helpful to work in a familiar language like JS so I could focus on learning about audio.
Alas, Web Audio is really only available in browser.
There's an incomplete [node implementation](https://github.com/audiojs/web-audio-api) and plenty of other audio libraries in JS and languages,
but I didn't really want to rebuild what I have. At least not right now. So I got to thinking, maybe I could run the prototype in a "headless" browser environment.

## Headless Chromium and Puppeteer

Nowadays [Chromium](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) (and [Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) and [Firefox](https://hacks.mozilla.org/2017/12/using-headless-mode-in-firefox/)) can run in "headless" mode.
The browser runs like normal, it just doesn't show any UI on the screen.
Instead, you can interact with the browser programatically through the [DevTools protocol](https://chromedevtools.github.io/devtools-protocol/).

I decided to try using [puppeteer](https://github.com/puppeteer/puppeteer) to automate a headless instance of Chromium with JS.
It's pretty fun.

```js
// puppeteer-test.js
const puppeteer = require("puppeteer")

;(async () => {
 const browser = await puppeteer.launch({
 // If you disable the `headless` option, you can watch your script control the browser.
 headless: false,
 })
 const [page] = await browser.pages()
 await page.goto("https://pptr.dev/")
})()
```

👀 Check it out.

![A Puppeteer script controlling a browser window](/images/puppeteer-test.gif)

I disabled `headless` to create that GIF.
It makes for easier debugging, but beware!
Some APIs behave differently in headless mode.

## Headless recording

My whistle detector uses [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to access the computer's microphone and listen for whistles.

```js
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true })
```

With the UI on, you see a permissions dialog when a new site requests access to your mic.

![Microphone permission dialog](/images/mic-permission.png)

Unforunately you can't interact with those dialogs in headless mode, so `getUserMedia` fails with an error like this.

```sh
Uncaught (in promise) NotSupportedError: Not supported
```

Luckily, we can override those permission dialogs by passing the `--use-fake-ui-for-media-stream` flag to puppeteer's instance of Chromium
([this list](https://peter.sh/experiments/chromium-command-line-switches/) of Chromium flags came in _real_ handy).

```js
const browser = await puppeteer.launch({
 args: ["--use-fake-ui-for-media-stream"],
 headless: true,
})
```

With that flag enabled, microphone access works without user interaction. Probably don't pass that flag to your everyday browser. 🤪

## Running on the Raspberry PI

At that point, everything seemed to be working on my laptop, so it was time to try it out on the PI!
Alas, it failed immediately.

```sh
(node:906) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/home/pi/rc-playground/whistlee-headless/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome: 1: /home/pi/rc-playground/whistlee-headless/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome: Syntax error: ")" unexpected
```

It turns out puppeteer comes with a version of Chromium built for x86 architectures, but the Pi has an ARM processor.
To run puppeteer on the Pi, you need to tell it where to find an ARM compatible version of Chromium.

Nowadays, the [Raspberry Pi OS](https://www.raspberrypi.org/software/) comes bundled with already Chromium installed.
You can find it's path using the `which` command in the Pi's terminal.

```sh
~ ➜ which chromium-browser
/usr/bin/chromium-browser
```

Then pass that path into puppeteer's `executablePath` option.

```js
const browser = await puppeteer.launch({
 args: ["--use-fake-ui-for-media-stream"],
 executablePath: "/usr/bin/chromium-browser",
 headless: true,
})
```

## It's alive!

That's it! With those options, you should be able to run a webpage headlessly on a Raspberry Pi with access to the mic.

<div
 className="mb-4"
 style={{
 content: "''",
 paddingBottom: `${(315 / 560) * 100}%`,
 position: "relative",
 width: "100%",
 }}
>
 <iframe
 src="https://player.vimeo.com/video/612888282?h=0b37642f66&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
 frameBorder="0"
 allow="autoplay; fullscreen; picture-in-picture"
 allowFullScreen
 style={{
 position: "absolute",
 top: 0,
 left: 0,
 width: "100%",
 height: "100%",
 }}
 title="Whistle detector on a Raspberry Pi"
 ></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

If you want to try the whistle detector:

1. clone my [rc-playground](https://github.com/colbyr/rc-playground) project
2. run `yarn` at the root
3. run `yarn` in `whistlee-headless`
 run `./bin/start-headless.sh` from the root

I&#x27;ve been working on a program to turn on my lights when I whistle a tune.
Now that I have a <a href="https://rc.colbyr.com/whistlee2/">working prototype</a>, I wanted to get it running on an old Raspberry Pi and start testing it around the apartment.So far I&#x27;ve done most of my work with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio</a>.
It was really helpful to work in a familiar language like JS so I could focus on learning about audio.
Alas, Web Audio is really only available in browser.
There&#x27;s an incomplete <a href="https://github.com/audiojs/web-audio-api">node implementation</a> and plenty of other audio libraries in JS and languages,
but I didn&#x27;t really want to rebuild what I have. At least not right now. So I got to thinking, maybe I could run the prototype in a &quot;headless&quot; browser environment.<h2 class="mb-4 mt-6 font-semibold text-xl w-full">Headless Chromium and Puppeteer</h2>Nowadays <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">Chromium</a> (and <a href="https://developers.google.com/web/updates/2017/04/headless-chrome">Chrome</a> and <a href="https://hacks.mozilla.org/2017/12/using-headless-mode-in-firefox/">Firefox</a>) can run in &quot;headless&quot; mode.
The browser runs like normal, it just doesn&#x27;t show any UI on the screen.
Instead, you can interact with the browser programatically through the <a href="https://chromedevtools.github.io/devtools-protocol/">DevTools protocol</a>.I decided to try using <a href="https://github.com/puppeteer/puppeteer">puppeteer</a> to automate a headless instance of Chromium with JS.
It&#x27;s pretty fun.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">// puppeteer-test.js
const puppeteer = require(&quot;puppeteer&quot;)

;(async () =&gt; {
 const browser = await puppeteer.launch({
 // If you disable the `headless` option, you can watch your script control the browser.
 headless: false,
 })
 const [page] = await browser.pages()
 await page.goto(&quot;https://pptr.dev/&quot;)
})()
</code></div></pre>👀 Check it out.<img src="/images/puppeteer-test.gif" alt="A Puppeteer script controlling a browser window"/>I disabled <code class="bg-gray-200">headless</code> to create that GIF.
It makes for easier debugging, but beware!
Some APIs behave differently in headless mode.<h2 class="mb-4 mt-6 font-semibold text-xl w-full">Headless recording</h2>My whistle detector uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a> to access the computer&#x27;s microphone and listen for whistles.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const micStream = await navigator.mediaDevices.getUserMedia({ audio: true })</code></div></pre>With the UI on, you see a permissions dialog when a new site requests access to your mic.<img src="/images/mic-permission.png" alt="Microphone permission dialog"/>Unforunately you can&#x27;t interact with those dialogs in headless mode, so <code class="bg-gray-200">getUserMedia</code> fails with an error like this.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">Uncaught (in promise) NotSupportedError: Not supported</code></div></pre>Luckily, we can override those permission dialogs by passing the <code class="bg-gray-200">--use-fake-ui-for-media-stream</code> flag to puppeteer&#x27;s instance of Chromium
(<a href="https://peter.sh/experiments/chromium-command-line-switches/">this list</a> of Chromium flags came in real handy).<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const browser = await puppeteer.launch({
 args: [&quot;--use-fake-ui-for-media-stream&quot;],
 headless: true,
})
</code></div></pre>With that flag enabled, microphone access works without user interaction. Probably don&#x27;t pass that flag to your everyday browser. 🤪<h2 class="mb-4 mt-6 font-semibold text-xl w-full">Running on the Raspberry PI</h2>At that point, everything seemed to be working on my laptop, so it was time to try it out on the PI!
Alas, it failed immediately.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">(node:906) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/home/pi/rc-playground/whistlee-headless/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome: 1: /home/pi/rc-playground/whistlee-headless/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome: Syntax error: &quot;)&quot; unexpected</code></div></pre>It turns out puppeteer comes with a version of Chromium built for x86 architectures, but the Pi has an ARM processor.
To run puppeteer on the Pi, you need to tell it where to find an ARM compatible version of Chromium.Nowadays, the <a href="https://www.raspberrypi.org/software/">Raspberry Pi OS</a> comes bundled with already Chromium installed.
You can find it&#x27;s path using the <code class="bg-gray-200">which</code> command in the Pi&#x27;s terminal.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-sh" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-sh" style="white-space:pre">~ ➜ which chromium-browser
/usr/bin/chromium-browser</code></div></pre>Then pass that path into puppeteer&#x27;s <code class="bg-gray-200">executablePath</code> option.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const browser = await puppeteer.launch({
 args: [&quot;--use-fake-ui-for-media-stream&quot;],
 executablePath: &quot;/usr/bin/chromium-browser&quot;,
 headless: true,
})
</code></div></pre><h2 class="mb-4 mt-6 font-semibold text-xl w-full">It&#x27;s alive!</h2>That&#x27;s it! With those options, you should be able to run a webpage headlessly on a Raspberry Pi with access to the mic.<div class="mb-4" style="content:&#x27;&#x27;;padding-bottom:56.25%;position:relative;width:100%"><iframe src="https://player.vimeo.com/video/612888282?h=0b37642f66&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%" title="Whistle detector on a Raspberry Pi"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>If you want to try the whistle detector:<ul class="list-decimal list-inside mb-4 pl-4 w-full"><li>clone my <a href="https://github.com/colbyr/rc-playground">rc-playground</a> project</li><li>run <code class="bg-gray-200">yarn</code> at the root</li><li>run <code class="bg-gray-200">yarn</code> in <code class="bg-gray-200">whistlee-headless</code>
run <code class="bg-gray-200">./bin/start-headless.sh</code> from the root</li></ul>

Recording audio with a headless browser and a Raspberry PI

I've been working on a program to turn on my lights when I whistle a tune.

Chrome, Ears Only

I've enjoyed working with [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) recently.
A couple weeks ago I was making a demo to create the [RC](https://www.recurse.com/) logo by drawing squares.

<iframe
 width="100%"
 height="400"
 src="https://rc.colbyr.com/rc-logo/"
 className="mb-4"
/>

The first version of the code was a bunch of canvas instructions one after the other.

```js
const ctx = canvasElement.getContext("2d")
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
ctx.fillStyle = "black"
ctx.fillRect(10, 290, 280, 80)
ctx.fillRect(30, 270, 240, 20)
// and so on and so forth...
```

I wanted a simple animation to illustrate the steps of the program.
I split the logic up into an array of functions and called each one in sequence using [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/setInterval).

```js
const instructions = [
 () => {
 ctx.fillStyle = "white"
 ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
 },
 () => {
 ctx.fillStyle = "black"
 ctx.fillRect(10, 290, 280, 80)
 },
 () => {
 ctx.fillRect(30, 270, 240, 20)
 },
 // ...
]

let step = 0
let intervalId = setInterval(() => {
 if (step < instructions.length) {
 instructions[step]()
 step++
 } else {
 clearInterval(intervalId)
 }
}, 500)
```

That worked just fine. I guess I had to type "() => {}," a lot but it did the job.
Then it occured to me: maybe instead of a list of functions I could use a generator.

## Generators

A [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
is a special syntax for creating objects that implement the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol).

```js
function* makeGenerator() {
 yield 1
 yield 2
 yield 3
}
const generator = makeGenerator()
```

The `yield` keyword works like return, but each time we call `generator.next()`
the program starts after the previous `yield`.

```js
generator.next() // {value: 1, done: false}
generator.next() // {value: 2, done: false}
generator.next() // {value: 3, done: false}
```

Onces you've made it through all the `yields`, you can keep calling `generate.next()` but `done` will always `true` and nothing else will happen.

```js
generator.next() // {value: undefined, done: true}
generator.next() // {value: undefined, done: true}
generator.next() // {value: undefined, done: true}
```

## Putting it together

Getting back to the logo animation,
I put my canvas instructions into a generator with a `yield` between each step.

```ts
function* makeLogoGenerator() {
 ctx.fillStyle = "white"
 ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
 yield
 ctx.fillStyle = "black"
 ctx.fillRect(10, 290, 280, 80)
 yield
 ctx.fillRect(30, 270, 240, 20)
 yield
 // ...
}
```

Then I call `logoGen.next()` in `setInterval`, until the generator is `done`.

```js
const logoGen = makeLogoGenerator()
const intervalId = setInterval(() => {
 if (logoGen.next().done) clearInterval(intervalId)
}, 500)
```

Calling `generator.next()` over time creates a simple animation effect on the canvas.
It works pretty well!

The working demo is [here](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) and the source is [on GitHub](https://github.com/colbyr/rc-playground/blob/main/rc-logo/index.html).

I&#x27;ve enjoyed working with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a> recently.
A couple weeks ago I was making a demo to create the <a href="https://www.recurse.com/">RC</a> logo by drawing squares.<iframe width="100%" height="400" src="https://rc.colbyr.com/rc-logo/" class="mb-4"></iframe>The first version of the code was a bunch of canvas instructions one after the other.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const ctx = canvasElement.getContext(&quot;2d&quot;)
ctx.fillStyle = &quot;white&quot;
ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
ctx.fillStyle = &quot;black&quot;
ctx.fillRect(10, 290, 280, 80)
ctx.fillRect(30, 270, 240, 20)
// and so on and so forth...</code></div></pre>I wanted a simple animation to illustrate the steps of the program.
I split the logic up into an array of functions and called each one in sequence using <a href="https://developer.mozilla.org/en-US/docs/Web/API/setInterval">setInterval</a>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const instructions = [
 () =&gt; {
 ctx.fillStyle = &quot;white&quot;
 ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
 },
 () =&gt; {
 ctx.fillStyle = &quot;black&quot;
 ctx.fillRect(10, 290, 280, 80)
 },
 () =&gt; {
 ctx.fillRect(30, 270, 240, 20)
 },
 // ...
]

let step = 0
let intervalId = setInterval(() =&gt; {
 if (step &lt; instructions.length) {
 instructions[step]()
 step++
 } else {
 clearInterval(intervalId)
 }
}, 500)</code></div></pre>That worked just fine. I guess I had to type &quot;() =&gt; {},&quot; a lot but it did the job.
Then it occured to me: maybe instead of a list of functions I could use a generator.<h2 class="mb-4 mt-6 font-semibold text-xl w-full">Generators</h2>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">generator function</a>
is a special syntax for creating objects that implement the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">iterable protocol</a>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">function* makeGenerator() {
 yield 1
 yield 2
 yield 3
}
const generator = makeGenerator()</code></div></pre>The <code class="bg-gray-200">yield</code> keyword works like return, but each time we call <code class="bg-gray-200">generator.next()</code>
the program starts after the previous <code class="bg-gray-200">yield</code>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">generator.next() // {value: 1, done: false}
generator.next() // {value: 2, done: false}
generator.next() // {value: 3, done: false}</code></div></pre>Onces you&#x27;ve made it through all the <code class="bg-gray-200">yields</code>, you can keep calling <code class="bg-gray-200">generate.next()</code> but <code class="bg-gray-200">done</code> will always <code class="bg-gray-200">true</code> and nothing else will happen.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">generator.next() // {value: undefined, done: true}
generator.next() // {value: undefined, done: true}
generator.next() // {value: undefined, done: true}</code></div></pre><h2 class="mb-4 mt-6 font-semibold text-xl w-full">Putting it together</h2>Getting back to the logo animation,
I put my canvas instructions into a generator with a <code class="bg-gray-200">yield</code> between each step.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-ts" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-ts" style="white-space:pre">function* makeLogoGenerator() {
 ctx.fillStyle = &quot;white&quot;
 ctx.fillRect(0, 0, canvasElement.width, canvasElement.height)
 yield
 ctx.fillStyle = &quot;black&quot;
 ctx.fillRect(10, 290, 280, 80)
 yield
 ctx.fillRect(30, 270, 240, 20)
 yield
 // ...
}
</code></div></pre>Then I call <code class="bg-gray-200">logoGen.next()</code> in <code class="bg-gray-200">setInterval</code>, until the generator is <code class="bg-gray-200">done</code>.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-js" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-js" style="white-space:pre">const logoGen = makeLogoGenerator()
const intervalId = setInterval(() =&gt; {
 if (logoGen.next().done) clearInterval(intervalId)
}, 500)</code></div></pre>Calling <code class="bg-gray-200">generator.next()</code> over time creates a simple animation effect on the canvas.
It works pretty well!The working demo is <a href="https://developer.mozilla.org/en-US/docs/Web/API/setInterval">here</a> and the source is <a href="https://github.com/colbyr/rc-playground/blob/main/rc-logo/index.html">on GitHub</a>.

I've enjoyed working with [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) recently.

Animate Canvas with Generators


I'm [learning Erlang](https://learnyousomeerlang.com/). It's been fun! The Erlang shell is a great environment for poking around. You get there by typing `erl` into the terminal.

```erl-repl
Erlang/OTP 24 [erts-12.0.3] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit] [dtrace]

Eshell V12.0.3  (abort with ^G)
1>
```

It might feel familiar if you've used the console in a web browser or a REPL in another language. [Like the browser console](https://css-tricks.com/can-copy-console/), Erlang's shell environment includes handy shortcuts for shell-related activities. These are their stories.

## "b" as in "bindings"

Variables in Erlang are immutable. You can't change 'em. I knew that going in, but it often trips me up in the shell.

```erl-repl
1> One = 1.
1
2> Two = One + One.
2
3> One = 2.
** exception error: no match of right hand side value 2
```

Once you define a variable, you can't set it again. Immutable. Right. But sometimes, in a long shell session, I clear my screen or just forgot what variables I set.

Try `b/0`. It prints out all the variables defined in the current session along with their assigned values.

````erl-repl
4> b().
One = 1
Two = 2
ok```

## "f" as in "forget"

Even better, `f/1` will _unbind_ a variable you want to reuse.

```erl-repl
12> b().
One = 1
Two = 2
ok
13> f(One).
ok
14> One = 2.
2
````

And if you need a clean slate, `f/0` removes _all_ variable bindings in the session.

```erl-repl
16> b().
One = 2
Two = 2
ok
17> f().
ok
18> b().
ok
```

That's all for now. To learn more about the erlang shell, get straight into [the docs](https://erlang.org/doc/man/shell.html#shell-commands).


I&#x27;m <a href="https://learnyousomeerlang.com/">learning Erlang</a>. It&#x27;s been fun! The Erlang shell is a great environment for poking around. You get there by typing <code class="bg-gray-200">erl</code> into the terminal.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-erl-repl" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-erl-repl" style="white-space:pre">Erlang/OTP 24 [erts-12.0.3] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit] [dtrace]

Eshell V12.0.3 (abort with ^G)
1&gt;</code></div></pre>It might feel familiar if you&#x27;ve used the console in a web browser or a REPL in another language. <a href="https://css-tricks.com/can-copy-console/">Like the browser console</a>, Erlang&#x27;s shell environment includes handy shortcuts for shell-related activities. These are their stories.<h2 class="mb-4 mt-6 font-semibold text-xl w-full">&quot;b&quot; as in &quot;bindings&quot;</h2>Variables in Erlang are immutable. You can&#x27;t change &#x27;em. I knew that going in, but it often trips me up in the shell.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-erl-repl" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-erl-repl" style="white-space:pre">1&gt; One = 1.
1
2&gt; Two = One + One.
2
3&gt; One = 2.
** exception error: no match of right hand side value 2</code></div></pre>Once you define a variable, you can&#x27;t set it again. Immutable. Right. But sometimes, in a long shell session, I clear my screen or just forgot what variables I set.Try <code class="bg-gray-200">b/0</code>. It prints out all the variables defined in the current session along with their assigned values.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-erl-repl" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-erl-repl" style="white-space:pre">4&gt; b().
One = 1
Two = 2
ok```

## &quot;f&quot; as in &quot;forget&quot;

Even better, `f/1` will _unbind_ a variable you want to reuse.

```erl-repl
12&gt; b().
One = 1
Two = 2
ok
13&gt; f(One).
ok
14&gt; One = 2.
2</code></div></pre>And if you need a clean slate, <code class="bg-gray-200">f/0</code> removes all variable bindings in the session.<pre class="text-sm overflow-scroll mb-4 bg-gray-200 w-full"><div class="language-erl-repl" style="display:block;overflow-x:auto;padding:0.5em;background:#002b36;color:#839496"><code class="language-erl-repl" style="white-space:pre">16&gt; b().
One = 2
Two = 2
ok
17&gt; f().
ok
18&gt; b().
ok
</code></div></pre>That&#x27;s all for now. To learn more about the erlang shell, get straight into <a href="https://erlang.org/doc/man/shell.html#shell-commands">the docs</a>.

Inspect and remove variable bindings in the Erlang shell

"b" is for "bindings"

I've been brainstorming what I'll work on at [The Recurse Center](https://www.recurse.com/) when I start next week. I plan to spend a good amount of time programming but leave some room for serendipity. For now, my idea is to write a program that turns on the lights when I whistle a particular tune.

It's a concrete idea. I _think_ it's achievable with wiggle room for exploration. Apparently it's been done before [more](https://youtu.be/27HGjE6ucqY?t=67) [than](https://www.wired.com/2017/01/classic-mobius-lamp/) [once](https://www.tindie.com/products/limpkin/the-whistled-a-whistle-detection-device/).

<div
 className="mb-4"
 style={{
 content: '""',
 overflow: "hidden",
 paddingBottom: `${(315 / 560) * 100}%`,
 position: "relative",
 width: "100%",
 }}
>
 <iframe
 src="https://www.youtube.com/embed/QBAujvYJdxw"
 title="YouTube video player"
 frameBorder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 allowFullScreen={true}
 style={{
 position: "absolute",
 top: 0,
 left: 0,
 width: "100%",
 height: "100%",
 border: 0,
 }}
 />
</div>

I can imagine the steps to get there: record things, identify a whistle, make a request to the HomeKit API, turn on the lights. The good news is that I have no idea how to do any of that. It's good news from an "I'm trying to learn things" perspective anyways. I can also imagine plenty of ways to take it further if I finish. Like what if the program whistles back?

I want to give Erlang a try for this project. Last week, I read through some of [Learn You Some Erlang for Great Good!](https://learnyousomeerlang.com/). The syntax is funky, but I feel I've already learned a lot from reading through some of the chapters on concurrency and distribution. I'm not sure it's the most practical choice, but I think it'll be fun. I have a couple of Raspberry Pis gathering dust in my closet, so maybe I can set up a lil cluster.

I'll continue writing about what I'm up to at RC, so you can look forward to updates soon. Keep an eye on my projects at [rc.colbyr.com](https://rc.colbyr.com/).

I&#x27;ve been brainstorming what I&#x27;ll work on at <a href="https://www.recurse.com/">The Recurse Center</a> when I start next week. I plan to spend a good amount of time programming but leave some room for serendipity. For now, my idea is to write a program that turns on the lights when I whistle a particular tune.It&#x27;s a concrete idea. I think it&#x27;s achievable with wiggle room for exploration. Apparently it&#x27;s been done before <a href="https://youtu.be/27HGjE6ucqY?t=67">more</a> <a href="https://www.wired.com/2017/01/classic-mobius-lamp/">than</a> <a href="https://www.tindie.com/products/limpkin/the-whistled-a-whistle-detection-device/">once</a>.<div class="mb-4" style="content:&quot;&quot;;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%"><iframe src="https://www.youtube.com/embed/QBAujvYJdxw" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"></iframe></div>I can imagine the steps to get there: record things, identify a whistle, make a request to the HomeKit API, turn on the lights. The good news is that I have no idea how to do any of that. It&#x27;s good news from an &quot;I&#x27;m trying to learn things&quot; perspective anyways. I can also imagine plenty of ways to take it further if I finish. Like what if the program whistles back?I want to give Erlang a try for this project. Last week, I read through some of <a href="https://learnyousomeerlang.com/">Learn You Some Erlang for Great Good!</a>. The syntax is funky, but I feel I&#x27;ve already learned a lot from reading through some of the chapters on concurrency and distribution. I&#x27;m not sure it&#x27;s the most practical choice, but I think it&#x27;ll be fun. I have a couple of Raspberry Pis gathering dust in my closet, so maybe I can set up a lil cluster.I&#x27;ll continue writing about what I&#x27;m up to at RC, so you can look forward to updates soon. Keep an eye on my projects at <a href="https://rc.colbyr.com/">rc.colbyr.com</a>.

I've been brainstorming what I'll work on at [The Recurse Center](https://www.recurse.com/) when I start next week. I plan to spend a good amount of time programming but leave some room for serendipity. For now, my idea is to write a program that turns on the lights when I whistle a particular tune.