<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[techygrrrl's blog]]></title><description><![CDATA[[Twitch streamer](https://twitch.tv/techygrrrl) from Canada. 
If I'm not playing video games 🕹 I'm probably coding and developing websites or apps 👩🏻‍💻]]></description><link>https://blog.techygrrrl.stream</link><generator>RSS for Node</generator><lastBuildDate>Wed, 15 Apr 2026 18:32:19 GMT</lastBuildDate><atom:link href="https://blog.techygrrrl.stream/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Multi-language Text-to-Speech (TTS) app built with web technologies]]></title><description><![CDATA[If you’ve been reading my blog or watching my Twitch streams you may have already seen me talk about text-to-speech apps. If not, a quick overview:

I built a text-to-speech app for Windows using C# and Windows Presentation Framework. You can read ab...]]></description><link>https://blog.techygrrrl.stream/twitch-multi-language-text-to-speech-tts-pwa</link><guid isPermaLink="true">https://blog.techygrrrl.stream/twitch-multi-language-text-to-speech-tts-pwa</guid><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Wed, 15 Oct 2025 16:38:30 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1760545845269/171c018f-044c-4b52-a7fc-043091ce8201.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>If you’ve been reading my blog or watching my <a target="_blank" href="https://twitch.tv/techygrrrl">Twitch streams</a> you may have already seen me talk about text-to-speech apps. If not, a quick overview:</p>
<ul>
<li><p>I built a text-to-speech app for Windows using C# and Windows Presentation Framework. You can read about that app in <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch">this blog post</a></p>
</li>
<li><p>I built a text-to-speech app for macOS using Swift and Swift UI. You can read about that macOS app in <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch-macos">this blog post</a>, which also links to the streams where I built it on stream</p>
</li>
</ul>
<p>Both of the apps have the following features:</p>
<ul>
<li><p>Support for multiple languages: I also speak French and Spanish. Each has varying degrees of language support</p>
</li>
<li><p>No login required: Some text-to-speech apps require you to login and grant lots of unnecessary permissions. This is not actually a requirement by Twitch and more so seems like a way for these apps to collect your data. My apps do not need you to login since Twitch supports anonymous connections for read-only chat.</p>
</li>
</ul>
<h2 id="heading-introducing-yet-another-text-to-speech-app">Introducing… Yet another text-to-speech app!</h2>
<p>I built another one! This time, I chose to use web technologies. The reasons I chose to do this:</p>
<ul>
<li><p>Multi-platform: Runs in the browser</p>
</li>
<li><p>Can still feel like an app: Browsers allow you to ship your app as a Progressive Web App that can be installed. I’ve enabled this capability so it can have its own icon and still feel like its own app, even though it’s just a web app</p>
</li>
<li><p>I didn’t enjoy working in C# or Windows Presentation Framework: This technology feels really clunky. If you’re familiar with Microsoft’s developer experience, you’ll probably know what I’m talking about. As someone who’s had exposure to a variety of different technologies, this is low on my list for things I enjoy working with, so I have decided to no longer support my Windows app because it does not spark joy.</p>
</li>
</ul>
<h3 id="heading-features">Features</h3>
<ul>
<li><p><strong>Supports all languages</strong>: Supports all of the languages your browser supports, which can include natural language models if supported in your browser (e.g. Edge)</p>
</li>
<li><p><strong>Language detection</strong> (only in supported browsers including Chrome. Not currently supported in Safari or Edge)</p>
</li>
<li><p><strong>Speak any message</strong>: Speak a message to test the language detection or to help you communicate verbally</p>
</li>
<li><p><strong>Configure preferred languages</strong>: While your computer may support a wide variety of languages, you may not want to have TTS read out all supported languages, e.g. I have German and Japanese on my computer but I don’t understand German or Japanese so I wouldn’t include these in my preferred languages, which I’ve limited to English, French and Spanish</p>
</li>
<li><p><strong>Configure your preferred voice based on the language</strong>: You can choose which voice you want to use for which language</p>
</li>
<li><p><strong>Voice Customization</strong>: Configure the pitch (higher tones or lower tones), the volume, and the speed within the app.</p>
</li>
<li><p><strong>Ignore list</strong>: Ignore specific usernames, e.g. your bots that send periodic messages.</p>
</li>
<li><p><strong>Word replacement</strong>: Replace words so that they sound more natural, e.g. techygrrrl → techy girl to avoid mispronunciations like (teh-chey-gar-gar-gar-el)</p>
</li>
<li><p><strong>Language and message testing and debugging</strong>: A debugging section has been added to help you test messages in different languages so you can see how your Preferred Languages, Voice Customization, and Preferred Voices configurations are applied to messages, e.g. is French being detected correctly? If not, maybe enable French in the Preferred Languages section and choose a French voice you prefer in the Preferred Voices section under French. You can also download the logs to share if there’s an issue.</p>
</li>
</ul>
<h2 id="heading-download-and-install">Download and Install</h2>
<p><strong>TTS Twitch Multi-Lang</strong> is a web-based text-to-speech app and can be installed as a standalone Progressive Web App (PWA) from your favourite browser.</p>
<ol>
<li><p>Visit the URL: <a target="_blank" href="https://tts-multilang-twitch.vercel.app/">https://tts-multilang-twitch.vercel.app</a></p>
</li>
<li><p>Install the Progressive Web App to have a dedicated icon (or don’t, you don’t need to)</p>
</li>
</ol>
<h3 id="heading-choosing-a-browser">Choosing a Browser</h3>
<p>Each browser has its own pros and cons. Try all the browsers out that you like and see what works for you. Here’s what I recommend:</p>
<ul>
<li><p>If you have a multi-language stream, choose a Chromium-based browser like Chrome or Opera. The browser-based <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/LanguageDetector/detect">LanguageDetector APIs</a> are currently experimental and are not widely supported so other browsers do not yet have support for language detection using these APIs.</p>
</li>
<li><p>If you are on Windows and care about the quality of the voice but don’t need language detection because your stream is only in one language, choose Microsoft Edge. Edge gives you access to the Copilot natural language models so that the TTS messages sound more natural. Make sure you <a target="_blank" href="https://support.microsoft.com/en-us/topic/download-languages-and-voices-for-immersive-reader-read-mode-and-read-aloud-4c83a8d8-7486-42f7-8e46-2b0fdf753130">install them</a> if you need them as they aren’t installed by default.</p>
</li>
<li><p>If none of the above apply, you can use any browser that supports text-to-speech. Chrome comes with its own voices pre-installed, while Safari on macOS uses the ones installed on macOS.</p>
<ul>
<li>You can use it in multiple browsers and “install” multiple web apps (<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps">PWAs</a>). The settings you configure are stored locally in each browser so if you need to maintain separate configurations, you can use separate web browsers.</li>
</ul>
</li>
</ul>
<h3 id="heading-install-as-a-safari-app-macos">Install as a Safari app (macOS)</h3>
<p>To install as a Safari web app:</p>
<ol>
<li><p>Visit <a target="_blank" href="https://tts-multilang-twitch.vercel.app">https://tts-multilang-twitch.vercel.app</a></p>
</li>
<li><p>Open the File menu from the menu bar</p>
</li>
<li><p>Click "Add to Dock"</p>
</li>
<li><p>Customize the name of the app if you want then click Add</p>
</li>
</ol>
<p>More info about <a target="_blank" href="https://support.apple.com/en-asia/104996">Safari web apps from Apple</a>.</p>
<h3 id="heading-install-as-a-chrome-app-macos-windows-linux">Install as a Chrome app (macOS, Windows, Linux)</h3>
<p>To install as a Chrome app:</p>
<ol>
<li><p>Visit <a target="_blank" href="https://tts-multilang-twitch.vercel.app">https://tts-multilang-twitch.vercel.app</a></p>
</li>
<li><p>Click the Install button in the address bar</p>
</li>
</ol>
<p>More info about <a target="_blank" href="https://support.google.com/chrome/answer/9658361?hl=en&amp;co=GENIE.Platform%3DDesktop">Chrome apps from Google</a>.</p>
<h3 id="heading-install-on-microsoft-edge-windows">Install on Microsoft Edge (Windows)</h3>
<p>To install as an Edge web app:</p>
<ol>
<li><p>Visit <a target="_blank" href="https://tts-multilang-twitch.vercel.app">https://tts-multilang-twitch.vercel.app</a></p>
</li>
<li><p>Click the "App available" icon in the menu bar</p>
</li>
<li><p>Click "Install"</p>
</li>
</ol>
<p>More info about <a target="_blank" href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps/ux">PWAs in Microsoft Edge</a>.</p>
<h2 id="heading-troubleshooting">Troubleshooting</h2>
<p>The text-to-speech app depends on the voices you have installed on your computer. You can use the debugging section to test how the app will behave with your current configuration.</p>
<p>It’s a website, even when installed as a progressive web app, so first try refreshing to see if the problem goes away.</p>
<p>If you want to reset the app’s settings to the default settings, do the following:</p>
<ol>
<li><p>Open the developer tools in your chosen browser at <a target="_blank" href="https://tts-multilang-twitch.vercel.app/">https://tts-multilang-twitch.vercel.app</a></p>
</li>
<li><p>Open the Application tab</p>
</li>
<li><p>Navigate to Storage → Local Storage in the sidebar</p>
</li>
<li><p>Clear all values by clicking the symbol 🚫</p>
</li>
<li><p>Refresh the page</p>
</li>
</ol>
<p>If the app still continues to experience issues, export the logs and share them with me.</p>
<h2 id="heading-uninstalling">Uninstalling</h2>
<p>It’s a Progressive Web App so you uninstall it based on the instructions of your browser.</p>
<h2 id="heading-sound-configuration-for-muting-text-to-speech-on-stream">Sound configuration for muting text-to-speech on stream</h2>
<p>If you want to use text-to-speech for yourself and aren’t trying to share the audio with your stream, this may be relevant for you.</p>
<ul>
<li><p><strong>Recommended</strong>: For OBS version 28 and later, it’s recommended to use <a target="_blank" href="https://obsproject.com/kb/application-audio-capture-guide">application audio sources</a> to selectively include audio sources on Windows</p>
</li>
<li><p>For OBS version 27 or earlier on Windows, see the blog post about the Windows app <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch#heading-sound-setup">here</a>. It’s strongly recommended you upgrade OBS but if you can’t, you can use StereoMix but it’s a bit complicated to configure</p>
</li>
<li><p>For any version of OBS on macOS, you may have some luck with <a target="_blank" href="https://github.com/ExistentialAudio/BlackHole">BlackHole</a> but it can be a bit complicated to configure</p>
</li>
</ul>
<p>I recommend <a target="_blank" href="https://obsproject.com/">OBS</a> for streaming because it’s open-source and has a great community of developers behind it.</p>
<h2 id="heading-screenshots">Screenshots</h2>
<p>Progressive Web App installed for Chrome</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1760545509856/89885ff3-4d94-4c9a-8245-b664a676b48c.png" alt class="image--center mx-auto" /></p>
<p>Progressive Web App installed for Safari</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1760545554629/21284d80-d728-495c-9e64-e0b1ba84c983.png" alt class="image--center mx-auto" /></p>
<p>Progressive Web App installed for Edge</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1760552690287/d9b69775-b01e-4004-98b9-4e38dc1bcbff.png" alt class="image--center mx-auto" /></p>
]]></content:encoded></item><item><title><![CDATA[sf6vid: a CLI tool to hide usernames in game play, written in Go]]></title><description><![CDATA[sf6vid is a command line tool that allows you to censor player data in a Street Fighter 6 game play video.
How it works
sf6vid is a command line tool. In order to use it you need to install it and execute the file from your terminal.
In the future th...]]></description><link>https://blog.techygrrrl.stream/sf6vid-street-fighter-6-censor-player-name-go-lang-cli-app-tool</link><guid isPermaLink="true">https://blog.techygrrrl.stream/sf6vid-street-fighter-6-censor-player-name-go-lang-cli-app-tool</guid><category><![CDATA[cli]]></category><category><![CDATA[Go Language]]></category><category><![CDATA[FFmpeg]]></category><category><![CDATA[streaming]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Sat, 16 Sep 2023 12:41:15 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1694842845464/8cc88f33-a604-413a-ab71-6eef95bb3eac.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><strong>sf6vid</strong> is a command line tool that allows you to censor player data in a Street Fighter 6 game play video.</p>
<h2 id="heading-how-it-works">How it works</h2>
<p><strong>sf6vid</strong> is a command line tool. In order to use it you need to install it and execute the file from your terminal.</p>
<p>In the future there may be a graphical user interface tool to make it easier for everyone to use, but for now it's offered as a CLI tool.</p>
<h2 id="heading-sample-video-output">Sample video output</h2>
<h3 id="heading-pixelize-blur-effect">Pixelize blur effect</h3>
<p>Pixelize is a new blur filter, supported in ffmpeg 6+. This is the default.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/PpGd867VBXc">https://youtu.be/PpGd867VBXc</a></div>
<p> </p>
<h3 id="heading-box-blur">Box Blur</h3>
<p>Box blur is the original blur effect, supported in ffmpeg 4+. This can be enabled and customized with extra flags.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/WCcxhzJKuRQ?si=cXKLPnY5x8Rx5Lzy">https://youtu.be/WCcxhzJKuRQ?si=cXKLPnY5x8Rx5Lzy</a></div>
<p> </p>
<h2 id="heading-download">Download</h2>
<p>You can download the latest release from the <a target="_blank" href="https://github.com/techygrrrl/sf6vid/releases">releases page</a> and put it somewhere on your path, or, if you have <a target="_blank" href="https://go.dev/doc/install">Go tooling</a> installed, run the following:</p>
<pre><code class="lang-bash">go install github.com/techygrrrl/sf6vid@latest
</code></pre>
<p>To install a specific version, you can do the following:</p>
<pre><code class="lang-bash">go install github.com/techygrrrl/sf6vid@0.2.1
</code></pre>
<p>You can <a target="_blank" href="https://github.com/techygrrrl/sf6vid/wiki">read the documentation here</a>.</p>
<p>You can also watch a video walkthrough about this tool.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://youtu.be/81e67BZdpec">https://youtu.be/81e67BZdpec</a></div>
<p> </p>
<h2 id="heading-why-i-built-sf6vid">Why I built sf6vid</h2>
<p>I built sf6vid so I can share videos of my game play without exposing the other player of the footage, for the following reasons:</p>
<ol>
<li><p>I do something pretty cool and want to share a video on <a target="_blank" href="https://www.tiktok.com/@techygrrrl">TikTok</a> or Discord and I don't want to share the player information. Often it is superfluous information, and sometimes, depending on the game play, it could be embarrassing to them, so I wouldn't want to make someone feel bad who was just doing their best to play an honest game</p>
</li>
<li><p>In order to comply with a certain online forum's rules for hiding opponent data, should I ever post there, though their moderation team enforces this quite selectively and poorly currently</p>
</li>
</ol>
<p>I found myself doing this manually and not really enjoying the video software I tried using:</p>
<ul>
<li><p>iMovie, which is installed on macOS by default and is only available for macOS, doesn't have this functionality. I would have to overlay a static image over sections I'd want to hide, and they only have the ability to overlay one image at a time. If I wanted 3 boxes I'd have to process the video 3 times, applying a new image each time.</p>
</li>
<li><p><a target="_blank" href="https://www.openshot.org/">OpenShot</a> is a free, open-source, cross-platform video editor. It has the functionality built in that I wanted to do, including a nice pixel block effect. Unfortunately, I find this software cumbersome to use. There are some tool panel layout issues I did not like, and I found that my output had unexpected transitions that I did not intend to add (where it would animate from a giant box, slowly for several seconds into a small box). I had no idea how to remove this transition after adding the effect without deleting the effect and starting over. It was quite a lot of trial and error but I eventually learned the quirks of how this worked.</p>
</li>
</ul>
<h2 id="heading-how-i-built-sf6vid">How I built sf6vid</h2>
<h3 id="heading-tools-i-used">Tools I used</h3>
<p>sf6vid was built using the following tools:</p>
<ul>
<li><p><a target="_blank" href="https://go.dev/">Go programming language</a> (version 1.20)</p>
</li>
<li><p><a target="_blank" href="https://www.figma.com/">Figma</a>, to help calculate the size and positioning of the censor boxes</p>
</li>
<li><p><a target="_blank" href="https://ffmpeg.org/">ffmpeg</a>, which does all of the heavy lifting</p>
</li>
<li><p><a target="_blank" href="https://github.com/spf13/cobra">cobra</a>, for building command line utilities (e.g. bootstrapping commands, parsing flags and arguments, etc.)</p>
</li>
<li><p><a target="_blank" href="https://github.com/stretchr/testify">testify</a>, an assertions library that makes unit testing more enjoyable in Go</p>
</li>
</ul>
<h3 id="heading-calculating-the-censor-boxes">Calculating the censor boxes</h3>
<p>There are 3 censor boxes for each side:</p>
<ol>
<li><p>Username, e.g. techygrrrl</p>
</li>
<li><p>Title (above the health bar), e.g. "Mission complete"</p>
</li>
<li><p>Rank and club name, e.g. Platinum 1 and SF6Grrrls</p>
</li>
</ol>
<p>In order to calculate the censor boxes, I took a screenshot of some game play and drew each of these rectangles on it.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1694843065275/2bf522dd-36ca-4327-995c-0812d5bd0fb3.png" alt class="image--center mx-auto" /></p>
<p>Figma has some great tools for being able to see width, height and x/y positioning of an element. This tool makes front-end development much easier than the olden days of looking at a rasterized image or a PDF, but it can also help with video editing.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1694843155234/ff26a6d7-a48f-4cbc-93d9-812640832bfb.png" alt class="image--center mx-auto" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1694846206902/ce9cdeff-845b-41c5-af9d-150215154081.png" alt class="image--center mx-auto" /></p>
<p>I used this information to help create the data structures I'd end up using, and making sure my calculations for the boxes on each side were correct. Given that a user could have a large video or a small video, it was important that this was handled correctly, and so being able to see it visually really helped confirm that the math was correct for videos of various sizes—I designed for 1920x1080 and 960x540.</p>
<p>If you're curious about the math behind it, you can check out the <a target="_blank" href="https://github.com/techygrrrl/sf6vid/blob/main/video_utils/video_math.go">video_math.go</a> file.</p>
<p>This video math was also a very good candidate for test-driven development (where you write your unit tests first, including expected output given specific input). I did test-driven development in Go to gain confidence in my box sizing and positioning before even trying to pass any values to ffmpeg. See the <a target="_blank" href="https://github.com/techygrrrl/sf6vid/blob/main/video_utils/video_math_test.go">video_math_test.go</a> file to see the tests.</p>
<h3 id="heading-using-ffmpeg">Using ffmpeg</h3>
<p>Using ffmpeg was definitely the hardest part of this task. Working with their filter API is not easy or welcoming to newcomers. I did get some help from several smart people in my <a target="_blank" href="https://twitch.tv/techygrrrl">Twitch streaming community</a>.</p>
<p>If you wanted to learn more about the code for the ffmpeg commands, check the following files in the project: <a target="_blank" href="https://github.com/techygrrrl/sf6vid/blob/main/video_utils/ffmpeg.go">ffmpeg.go</a>, <a target="_blank" href="https://github.com/techygrrrl/sf6vid/blob/main/video_utils/ffmpeg_test.go">ffmpeg_test.go</a>.</p>
<h3 id="heading-using-cobra">Using cobra</h3>
<p>The cobra CLI is the tool I used to bootstrap the sf6vid CLI tool. The code for that can be found in the <a target="_blank" href="https://github.com/techygrrrl/sf6vid/tree/main/cmd">cmd directory</a> of the project but the important code is the <a target="_blank" href="https://github.com/techygrrrl/sf6vid/blob/main/cmd/censor.go">censor.go</a> file which is the entry point for the <code>sf6vid censor</code> command, the main (and currently only) command the tool has.</p>
<h2 id="heading-read-the-code-or-contribute">Read the code or contribute</h2>
<p>If you are looking for a project to contribute to, and working with ffmpeg is interesting to you, this one might appeal to you. Here are some things we could use help with:</p>
<ul>
<li><p>Support for Windows</p>
<ul>
<li><p>Documentation for installing on Windows manually</p>
</li>
<li><p>Adding support for opening the video file after processing on Windows</p>
</li>
</ul>
</li>
<li><p>Support for Linux</p>
<ul>
<li>Adding support for opening the video file after processing on Linux</li>
</ul>
</li>
</ul>
<p>You can see the <a target="_blank" href="https://github.com/techygrrrl/sf6vid">sf6vid repository on Github</a>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1694842875676/af443a10-9573-488f-a8a8-9b7a3d2c8c3a.png" alt class="image--center mx-auto" /></p>
<p><img src="https://user-images.githubusercontent.com/88961088/268443733-e89956ec-3707-44af-8666-8d667779bdf0.png" alt="Screen Shot 2023-09-16 at 2 46 49 AM" /></p>
]]></content:encoded></item><item><title><![CDATA[Dark mode for the Twitch Dev docs]]></title><description><![CDATA[I made a user script as a gist for making the Twitch Dev site use dark mode.
It should work on all dev.twitch.tv and dev.twitch.com pages at the /docs path.
If you find a bug, let me know in the blog or gist comments.
https://gist.github.com/techygrr...]]></description><link>https://blog.techygrrrl.stream/dark-mode-twitch-dev-docs</link><guid isPermaLink="true">https://blog.techygrrrl.stream/dark-mode-twitch-dev-docs</guid><category><![CDATA[UserScript]]></category><category><![CDATA[JavaScript]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Wed, 01 Feb 2023 04:44:09 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1675226495554/4609361d-2bb5-4502-8f4b-77481fa91606.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I made a user script as a gist for making the Twitch Dev site use dark mode.</p>
<p>It should work on all <code>dev.twitch.tv</code> and <code>dev.twitch.com</code> pages at the <code>/docs</code> path.</p>
<p>If you find a bug, let me know in the blog or gist comments.</p>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="d62f05669bd8cea660cf80b344579d64"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/techygrrrl/d62f05669bd8cea660cf80b344579d64" class="embed-card">https://gist.github.com/techygrrrl/d62f05669bd8cea660cf80b344579d64</a></div>]]></content:encoded></item><item><title><![CDATA[Use light mode chat in Twitch Theatre Mode]]></title><description><![CDATA[Problem
Currently, Twitch has both dark and light modes for the UI, but when you go into Theatre Mode, your preference for light mode is ignored and you're forced to use dark mode.
Many users find it easier to read in light mode, but the option to vi...]]></description><link>https://blog.techygrrrl.stream/light-mode-twitch-chat-theatre-mode</link><guid isPermaLink="true">https://blog.techygrrrl.stream/light-mode-twitch-chat-theatre-mode</guid><category><![CDATA[JavaScript]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Sun, 04 Dec 2022 04:36:45 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1670127779013/cDFj91yyM.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="heading-problem">Problem</h2>
<p>Currently, Twitch has both dark and light modes for the UI, but when you go into Theatre Mode, your preference for light mode is ignored and you're forced to use dark mode.</p>
<p>Many users find it easier to read in light mode, but the option to view chat in light mode while in theatre mode is not currently available natively.</p>
<h2 id="heading-solution">Solution</h2>
<p>Given that this has been an <a target="_blank" href="https://twitch.uservoice.com/forums/923368-video-features/suggestions/17931598-allow-white-chat-in-theater-mode">open issue on Twitch's UserVoice since 2017</a>, and given that, unfortunately, Twitch hasn't addressed this accessibility concern yet, I decided to write a script to solve this problem. I was browsing through the Accessibility topic in Twitch's UserVoice and found this issue and thought "this is relatively easy to fix" and decided to write a fix.</p>
<p>I wrote a <a target="_blank" href="https://en.wikipedia.org/wiki/Userscript">user script</a>, which can be installed via any <a target="_blank" href="https://en.wikipedia.org/wiki/Userscript_manager">user script manager</a> that listens for presses of Alt + T and assigns your preferred theme.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670127637536/gpIR8w18Q.png" alt="theatre mode light chat.png" /></p>
<p>Here's a preview of it working in action.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670126730799/XGgNQfb5S.gif" alt="trigger white chat for light mode Alt+T.gif" /></p>
<p>In order to toggle it, you must <strong>press Alt+T outside of the chat input box</strong>. It doesn't currently work when clicking the icon in the video frame.</p>
<h3 id="heading-how-does-it-work">How does it work?</h3>
<p>It works by toggling the global theme on the <code>html</code> element.</p>
<p>Normally, with light mode enabled, the classes on the <code>html</code> element are <code>tw-root--hover js-focus-visible tw-root--theme-light</code>, the important one being <code>tw-root--theme-light</code>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670129541846/-OKwoThnu.png" alt="image.png" /></p>
<p>For some reason, when you toggle into theatre mode, this class changes to <code>tw-root--theme-dark</code> even if your desired theme is light. This is probably because Twitch makes the assumption that you will want it to be dark for theatre mode.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670129622667/LfRLA3Jr0.png" alt="image.png" /></p>
<p>My script changes it to <code>tw-root--theme-light</code> if the page loaded with the light theme as the preference.</p>
<h3 id="heading-limitations">Limitations</h3>
<p>Currently, there are a couple of limitations.</p>
<ol>
<li><strong>You must use Alt+T to trigger Theatre Mode</strong> -&gt; It does not work when clicking the toggle in the video frame. If I have more time, I can try to troubleshoot the implementation issues I had with this, but at this time, it only works with Alt+T.</li>
<li><strong>You must refresh the tab after changing your global theme</strong> -&gt; If you change your theme using the user menu toggle on Twitch, you will need to refresh the tab. This is because the desired theme is registered with the user script on page load. So, if you want light mode chat in Theatre Mode and you're currently in dark mode, you'll need to toggle to light mode and then refresh the tab, then go into theatre mode by pressing Alt+T</li>
<li><strong>You may experience contrast issues with light-coloured usernames</strong> -&gt; Twitch adjusts username colours for contrast issues against the background. For example, my username is a bright pink, but is darkened when in light mode. With my user script in theatre mode, this doesn't happen, which means that some users may find the contrast insufficient for my username while in theatre mode with light chat using this fix. If you want light mode chat in Theatre Mode and you're ok with losing the chat colours, then you <a target="_blank" href="https://gist.github.com/techygrrrl/d0bf087d13e0fa4534a533ffdb690a1a">can install this user script</a> also.</li>
</ol>
<p>If you're comfortable with these limitations, you might find this helpful.</p>
<p>Tested in a Chromium browser on both Windows and macOS with external and built-in keyboards.</p>
<h2 id="heading-install-the-code">Install the code</h2>
<p>If you have a user script manager installed, you can install the script into it by clicking on the "Raw" button on the Github gist.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670126475344/ZKm-xzszB.png" alt="image.png" /></p>
<p>After you press the "Raw" button, your user script manager should open on the installation screen. In the below screenshot it says "Confirm re-installation" but if you've never installed it, it should show "Install" or similar. I'm using ViolentMonkey but you can use any user script manager you like (there are lots to choose from).</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670126546132/KU7F2zNV6.png" alt="image.png" /></p>
<p>Visit the below embed to View and install the user script.</p>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="aa770cb85ff858ee7f675ffdf3bd06aa"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/techygrrrl/aa770cb85ff858ee7f675ffdf3bd06aa" class="embed-card">https://gist.github.com/techygrrrl/aa770cb85ff858ee7f675ffdf3bd06aa</a></div>]]></content:encoded></item><item><title><![CDATA[Developing my first Twitch extension]]></title><description><![CDATA[About
I developed a simple panel extension that displays the commands available in my channel.
It uses an API endpoint to fetch a list of commands and displays it in the panel.
I built it using Svelte.
Desktop
This is what it looks like on desktop.

...]]></description><link>https://blog.techygrrrl.stream/developing-twitch-extension-panel</link><guid isPermaLink="true">https://blog.techygrrrl.stream/developing-twitch-extension-panel</guid><category><![CDATA[Svelte]]></category><category><![CDATA[Twitch]]></category><category><![CDATA[JavaScript]]></category><category><![CDATA[TypeScript]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Tue, 12 Jul 2022 19:19:08 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1657651836227/xX5L7QgTn.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="heading-about">About</h2>
<p>I developed a simple panel extension that displays the commands available in my channel.</p>
<p>It uses an API endpoint to fetch a list of commands and displays it in the panel.</p>
<p>I built it using Svelte.</p>
<h2 id="heading-desktop">Desktop</h2>
<p>This is what it looks like on desktop.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1657651326527/B5uVsP3u-.png" alt="image.png" /></p>
<h2 id="heading-mobile">Mobile</h2>
<p>This is what it looks like on mobile. You'll see the pink exclamation icon in the top right. Once clicked, it'll show the commands.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1657653327866/B8rt0xKew.png" alt="command-showcaserrr mobile preview@2x.png" /></p>
<h2 id="heading-testing">Testing</h2>
<p>When testing, you will see a warning on both Android and web that the extension has not been evaluated. This message only shows for users added to the testers list. This will show before the extension loads.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1657653313746/-9y84b459.png" alt="command-showcaserrr testing preview.png" /></p>
<h2 id="heading-approval-process">Approval Process</h2>
<p>I've submitted my extension for approval. I'll see how it goes. The email said it'd take 3 days to review but I learned that Twitch is currently on holiday. Some have experienced up to 11 days of waiting time. My thoughts are it will be about 2 weeks before it gets approved, which is quite a slow feedback cycle, but it is their summer holidays.</p>
<h2 id="heading-watch-now">Watch Now</h2>
<p>You can watch me learn how to build a Twitch panel extension from scratch <a target="_blank" href="https://www.twitch.tv/collections/HcwAusYcABeh2w?filter=collections">here</a>.</p>
]]></content:encoded></item><item><title><![CDATA[Multilingual Text-to-Speech (TTS) app for Twitch on macOS]]></title><description><![CDATA[Previously, I had built a text-to-speech app on Windows to help me listen to my Twitch chat while streaming. You can read about the project, why I built it, and download it here. This post is about the macOS version which I built on stream. If you're...]]></description><link>https://blog.techygrrrl.stream/multilingual-tts-twitch-macos</link><guid isPermaLink="true">https://blog.techygrrrl.stream/multilingual-tts-twitch-macos</guid><category><![CDATA[macOS]]></category><category><![CDATA[SwiftUI]]></category><category><![CDATA[Swift]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Tue, 07 Jun 2022 04:51:01 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1654576677605/BNuI_rwfV.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Previously, I had built a text-to-speech app on Windows to help me listen to my Twitch chat while streaming. You can read about the project, why I built it, and download it <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch">here</a>. This post is about the macOS version which I built on stream. If you're curious about my streams, follow me on <a target="_blank" href="https://twitch.tv/techygrrrl">Twitch @techygrrrl</a>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654575418310/HTQn1lDVx.png" alt="Screen Shot 2022-06-06 at 8.41.02 PM.png" /></p>
<h2 id="heading-features">Features</h2>
<h3 id="heading-multilingual">Multilingual</h3>
<p>This text-to-speech app supports all languages that Apple supports by default.</p>
<p>Here's a snippet of code that shows which languages are supported:</p>
<pre><code class="lang-swift">.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Arabic"</span>, languageKey: <span class="hljs-string">"ar"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Chinese"</span>, languageKey: <span class="hljs-string">"zh"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Czech"</span>, languageKey: <span class="hljs-string">"cs"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Danish"</span>, languageKey: <span class="hljs-string">"da"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Dutch"</span>, languageKey: <span class="hljs-string">"nl"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"English"</span>, languageKey: <span class="hljs-string">"en"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Finnish"</span>, languageKey: <span class="hljs-string">"fi"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"French"</span>, languageKey: <span class="hljs-string">"fr"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"German"</span>, languageKey: <span class="hljs-string">"de"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Greek"</span>, languageKey: <span class="hljs-string">"el"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Hebrew"</span>, languageKey: <span class="hljs-string">"he"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Hindi"</span>, languageKey: <span class="hljs-string">"hi"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Hungarian"</span>, languageKey: <span class="hljs-string">"hu"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Indonesian"</span>, languageKey: <span class="hljs-string">"id"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Italian"</span>, languageKey: <span class="hljs-string">"it"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Japanese"</span>, languageKey: <span class="hljs-string">"ja"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Korean"</span>, languageKey: <span class="hljs-string">"ko"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Norwegian"</span>, languageKey: <span class="hljs-string">"nb"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Polish"</span>, languageKey: <span class="hljs-string">"pl"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Portuguese"</span>, languageKey: <span class="hljs-string">"pt"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Romanian"</span>, languageKey: <span class="hljs-string">"ro"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Russian"</span>, languageKey: <span class="hljs-string">"ru"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Slovak"</span>, languageKey: <span class="hljs-string">"sk"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Spanish"</span>, languageKey: <span class="hljs-string">"es"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Swedish"</span>, languageKey: <span class="hljs-string">"sv"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Thai"</span>, languageKey: <span class="hljs-string">"th"</span>),
.<span class="hljs-keyword">init</span>(name: <span class="hljs-string">"Turkish"</span>, languageKey: <span class="hljs-string">"tr"</span>)
</code></pre>
<p>Support depends on the macOS version and installed voices. At time of development, on macOS 11, the above languages are supported. Please note that not all of them have been tested.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654574516788/VVJgfGD5N.png" alt="Screen Shot 2022-06-06 at 8.39.52 PM.png" /></p>
<h3 id="heading-speed-volume-and-stop-controls">Speed, Volume and Stop Controls</h3>
<p>You are able to configure the speed and volume controls on the Listen screen. The recommended speed is 0.5.</p>
<p>You can also stop the app from speaking if it's in the middle of speaking. Note that any already-queued up messages will not be spoken. Once another person sends a message after it's been stopped, they will continue to be read aloud. To stop it entirely, quit the app or lower the volume to 0%.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654574900380/9lbayodr4.png" alt="Screen Shot 2022-06-06 at 8.38.58 PM.png" /></p>
<h3 id="heading-noise-reduction-features">Noise reduction features</h3>
<p>The app includes features to reduce noise from official Twitch emotes. BTTV emotes and unicode emojis not currently supported so they will be read aloud.</p>
<h3 id="heading-word-replacements">Word Replacements</h3>
<p>This app has the ability to replace words in text, just like the Windows version I built. It runs on the message text and the username.</p>
<p>This can be useful for the following reasons:</p>
<ul>
<li><p>expand internet slang / short forms</p>
</li>
<li><p>override username pronunciation</p>
</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654575367278/HbAYw8KVe.png" alt="Screen Shot 2022-06-06 at 8.39.07 PM.png" /></p>
<h3 id="heading-ignore-list">Ignore List</h3>
<p>This app adds the ability to ignore usernames. This is useful if you do not want to hear your bots' messages being read aloud.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654575389142/C5Y9djrQU.png" alt="Screen Shot 2022-06-06 at 8.39.31 PM.png" /></p>
<h2 id="heading-download-and-install-soon">Download and Install (soon 🤞)</h2>
<p>Once I pay for an Apple developer account ($100/yr) to sign and distribute the app, it will become available. Unfortunately, Apple does not allow developers to distribute an app without paying the annual fee. If you need access to a text-to-speech app and have a Windows computer, you can <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch#heading-download-and-install">download and install the Windows version</a>. It's available now and is free.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654575077554/zmAH_xf3r.png" alt="image.png" /></p>
<h2 id="heading-watch-me-build-it">Watch me build it</h2>
<p>I built this in 7 streams. Streams ranged from 5 to 9 hours long. It was an epic journey learning SwiftUI and the text-to-speech API's on macOS.</p>
<p>You can watch my journey learning SwiftUI and macOS development on Twitch in the following video collection: https://www.twitch.tv/collections/-9v-a8uO8RbfCA</p>
<p>You can also see individual videos:</p>
<ul>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1491304760?collection=-9v-a8uO8RbfCA">Day 1</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1310316654?collection=-9v-a8uO8RbfCA">Day 2</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1310316951?collection=-9v-a8uO8RbfCA">Day 3</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1312986918?collection=-9v-a8uO8RbfCA">Day 4</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1316166272?collection=-9v-a8uO8RbfCA">Day 5</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1494132517?collection=-9v-a8uO8RbfCA">Day 6</a></p>
</li>
<li><p><a target="_blank" href="https://www.twitch.tv/videos/1496118634?collection=-9v-a8uO8RbfCA">Day 7</a></p>
</li>
</ul>
<p>This is what it looked like on day 1 before the stream started:</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1654576249910/ImEOITu67.png" alt="image.png" /></p>
]]></content:encoded></item><item><title><![CDATA[CMYK colourrrs :: A colour theme/scheme for editors and terminals]]></title><description><![CDATA[Yesterday, I made cmyk colourrrs, a colour theme for editors and terminals.
Currently, there's support for the following:

Visual Studio Code

Jetbrains

Xcode

iTerm 2

Neovim


Visual Studio Code theme
You can install the theme from the Visual Stud...]]></description><link>https://blog.techygrrrl.stream/cmyk</link><guid isPermaLink="true">https://blog.techygrrrl.stream/cmyk</guid><category><![CDATA[Visual Studio Code]]></category><category><![CDATA[theme]]></category><category><![CDATA[Design]]></category><category><![CDATA[color]]></category><category><![CDATA[Jetbrains]]></category><category><![CDATA[intellij]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Sun, 01 May 2022 03:08:53 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1651373509562/7fQudBs7g.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Yesterday, I made <strong>cmyk colourrrs</strong>, a colour theme for editors and terminals.</p>
<p>Currently, there's support for the following:</p>
<ul>
<li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=techygrrrl.techygrrrl-cmyk-colourrrs">Visual Studio Code</a></p>
</li>
<li><p><a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-jetbrains">Jetbrains</a></p>
</li>
<li><p><a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-xcode">Xcode</a></p>
</li>
<li><p><a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-iterm">iTerm 2</a></p>
</li>
<li><p><a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-neovim">Neovim</a></p>
</li>
</ul>
<h2 id="heading-visual-studio-code-theme">Visual Studio Code theme</h2>
<p>You can install the theme from the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=techygrrrl.techygrrrl-cmyk-colourrrs">Visual Studio Code marketplace</a> or <a target="_blank" href="https://open-vsx.org/extension/techygrrrl/techygrrrl-cmyk-colourrrs">Open VSX</a></p>
<h3 id="heading-dark">Dark</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651373658518/D3WQn-HZo.png" alt="web-project-dark.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651373672422/1e5wsyFTg.png" alt="terminal-dark.png" /></p>
<h3 id="heading-light">Light</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651373684412/APXzwHKX3.png" alt="web-project-light.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651373697527/21JdNCyfV.png" alt="terminal-light.png" /></p>
<h2 id="heading-jetbrains-ides-gt-colour-scheme-and-ui-theme">Jetbrains IDE's -&gt; Colour scheme and UI theme</h2>
<p>You can get the UI theme and colour scheme for Jetbrain's IDE's from the <a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-jetbrains">Github repository</a>.</p>
<p><img src="https://github.com/techygrrrl/techygrrrl-cmyk-jetbrains-ui-theme/raw/main/screenshot.png" alt /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651465207002/GE-dxZ-Eh.png" alt="kotlin-01.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651465195340/49saOJQ5c.png" alt="git-gutter-01.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651465258010/YB78x4kP8.png" alt="xml-01.png" /></p>
<h2 id="heading-xcode-theme">Xcode theme</h2>
<p>You can get the theme for Xcode from the <a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-xcode">CMYK colourrrs Xcode</a> Github repository.</p>
<p>Just download, close Xcode, and put in the following directory before relaunching:</p>
<pre><code class="lang-kotlin">~/Library/Developer/Xcode/UserData/FontAndColorThemes
</code></pre>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653278347639/HLKDCxmPI.png" alt="xcode-swift-01.png" /></p>
<h2 id="heading-iterm-2-theme">iTerm 2 theme</h2>
<p>You can install the iTerm 2 theme off Github: https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-iterm</p>
<p>At this time, there is only a dark theme for iTerm 2.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651374387642/MmM01-6mo.png" alt="sample-tig.png" /></p>
<h2 id="heading-neovim">Neovim</h2>
<p><a target="_blank" href="https://github.com/fadiinho">Fadiinho</a> made a version of CMYK for Neovim.</p>
<p>You can get the <a target="_blank" href="https://github.com/techygrrrl/techygrrrl-cmyk-colourrrs-neovim">CMYK theme for Neovim on Github</a>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1662972819149/R-8PlzVyC.png" alt="unknown.png" /></p>
<h2 id="heading-colour-picker-gt-build-the-thing-to-help-build-the-thing">Colour picker -&gt; build the thing to help build the thing</h2>
<p>If you're a developer, you may be able to relate to building a tool to help you do something faster. Well, I did that! In order to help me be more productive in building the theme, I built a tool to help me pick colours faster. You can see the colour picker tool here: https://u1tlwy.csb.app</p>
<p>It's built in React with TypeScript and Sass and has the following features:</p>
<ul>
<li><p>theme toggle to switch between light and dark backgrounds</p>
</li>
<li><p>animated random colour picking to change the button and line accent colour</p>
</li>
<li><p>click to copy to clipboard to make it easier to paste the colour into the JSON file</p>
</li>
<li><p>animated random active line number selecting</p>
</li>
</ul>
<p>You can see a preview of light and dark modes below.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651372621156/TEYexZmwA.png" alt="image.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1651372640097/by3BYm7uT.png" alt="image.png" /></p>
<h2 id="heading-interested-in-making-your-own-theme">Interested in making your own theme?</h2>
<p>If you are interested in making a theme and you think it'll help you, you're welcome to use the above colour picker if you provide a link back. Click the "Open Sandbox" button at the bottom right of <a target="_blank" href="https://u1tlwy.csb.app">this page</a>. Please provide attribution with a link back to either my website, this blog post, or the original sandbox. Please also change stuff up so it doesn't look exactly like the original.</p>
]]></content:encoded></item><item><title><![CDATA[Multilingual Text-to-Speech (TTS) app for Twitch on Windows]]></title><description><![CDATA[I recently bought a Windows computer for streaming and PC gaming. Some games require my full, undivided attention, which means I can't use my eyeballs to read chat. Text-to-speech is a great solution to that problem, allowing me to stay on top of cha...]]></description><link>https://blog.techygrrrl.stream/multilingual-tts-twitch</link><guid isPermaLink="true">https://blog.techygrrrl.stream/multilingual-tts-twitch</guid><category><![CDATA[C#]]></category><category><![CDATA[Windows]]></category><category><![CDATA[Accessibility]]></category><dc:creator><![CDATA[techygrrrl]]></dc:creator><pubDate>Mon, 10 Jan 2022 00:32:28 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1641764768553/cZoChz1vL.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I recently bought a Windows computer for streaming and PC gaming. Some games require my full, undivided attention, which means I can't use my eyeballs to read chat. Text-to-speech is a great solution to that problem, allowing me to stay on top of chat while being able to pay attention to the game I'm playing.</p>
<p>This post will go into detail about the Windows app. As of June, I've also built a Mac one—you can read about that <a target="_blank" href="https://blog.techygrrrl.stream/multilingual-tts-twitch-macos">in this blog post</a>.</p>
<p>This post will talk about the features of the app, include a demo, I'll talk about why I built it, and finally link to the download.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1641768526287/6stgcXpqy4.png" alt="image.png" /></p>
<h2 id="heading-features">Features</h2>
<h3 id="heading-multilingual">Multilingual</h3>
<p>Automatically supports English, French and Spanish. Username reading is in English, e.g. "techygrrrl says" while the message that follows will have its language autodetected and use a pre-installed voice for English, French or Spanish. If an unsupported language is detected, it falls back to English. </p>
<p>For this to work, you will need to install voices in these languages on <a target="_blank" href="https://support.microsoft.com/en-us/topic/download-voices-for-immersive-reader-4e1bb019-3069-4bef-b1ad-92da2a1f2922">Windows 10 or 11</a>. You may also find this list of <a target="_blank" href="https://support.microsoft.com/en-us/topic/how-to-download-text-to-speech-languages-for-windows-10-d5a6b612-b3ae-423f-afa5-4f6caf1ec5d3">all available voices</a> useful. While my app doesn't currently support more than these 3 languages, it's relatively low effort to add new languages, so I plan on adding more languages in the future.</p>
<h3 id="heading-speed-controls">Speed controls</h3>
<p>The app allows you to choose between 3 read speeds (slow, medium, fast) to hear your messages at a speed that works best for you.</p>
<h3 id="heading-word-replacements">Word Replacements</h3>
<p>A basic implementation of word replacement is added. Replaces words in both chat messages and usernames. This is useful in the event that default pronunciations are either inaccurate or too verbose. For example, my username sounds terrible in TTS, and this is probably the main driver for me developing this feature.</p>
<h3 id="heading-synchronous-reading">Synchronous reading</h3>
<p>Chats are read synchronously rather than asynchronously, meaning that in order for a message to begin being read aloud, the previous message is finished being read. This prevents messages from being read on top of each other.</p>
<h3 id="heading-ignore-list">Ignore List</h3>
<p>As of February 21, 2022, there is now a feature to add usernames to an ignore list so that all messages from that username are ignored. This feature can be used to ignore your chat bots to avoid noise. So, for example, if I add the username StreamElements, all messages from the StreamElements bot will be skipped and not read aloud by the TTS app.</p>
<h2 id="heading-watch-the-demo">Watch the Demo</h2>
<p>Here's a demo video of the <strong>Multilingual TTS for Twitch</strong> app I built. In this video I install it from the zip file that's available for download, and use all the features available at the time of launch.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://vimeo.com/663549807">https://vimeo.com/663549807</a></div>
<h2 id="heading-why-did-i-build-my-own-instead-of-using-an-existing-app">Why did I build my own instead of using an existing app?</h2>
<p>There are some existing solutions already out there like <strong>Twitch TTS</strong> on the Microsoft Store and <strong>Speech Chat</strong>, a website, but these didn't work for me for a number of reasons. </p>
<p>There may be other apps out there but these are the only ones I considered. If you have other app suggestions, feel free to link them in the comments below.</p>
<p>This section will touch on each concern I had with the 2 apps I tried. Feel free to skip this whole section if you don't care about that.</p>
<h3 id="heading-security-and-privacy">Security and Privacy</h3>
<p>My main concern was with Speech Chat's request for permissions, and unfortunately Twitch permissions are all or nothing.</p>
<p>This is what it looks like when it requests Twitch authorization when you sign up. A bit excessive, in my opinion.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1641765918912/OVO_2IXK3.png" alt="Screen Shot 2022-01-09 at 13.47.17 PM.png" /></p>
<p>The only permission that's actually needed is the ability to read channel messages, and this can be done anonymously without authentication.</p>
<p>The <strong>Multilingual TTS for Twitch</strong> app that I built does not ask you to authenticate with Twitch, you just provide any username for the chat you want to listen to. </p>
<p><a target="_blank" href="https://tmijs.com">The official <code>tmi.js</code> library by Twitch</a>  allows you to connect anonymously to a channel's chat if all you're doing is reading messages. It's even on the first page of the documentation. Even though the <strong>Multilingual TTS for Twitch</strong> app that I built is not written in JavaScript, the connection approach my TTS app uses is similar. I had no privacy or security concerns with the <strong>Twitch TTS</strong> app on the Microsoft store as it uses the <code>tmi.js</code> library with this anonymous connection approach.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1641766942066/m6TgOWcDv.png" alt="image.png" /></p>
<h3 id="heading-language-support">Language Support</h3>
<p>Support for other languages is lacking or non-existent. If you look up the term "languages" in the Speech Chat forums, you can see there's some chatter around that any responses don't inspire any amount of confidence that this functionality is working. They appear to have support for voice commands users can do but support does not appear to be automated in any way.</p>
<p>The above-mentioned Twitch TTS app in the Microsoft Store has even less support for languages, and actually appears to make the assumption that all your installed languages would be in the same language as your stream. It cycles through all of the installed languages randomly assigning a new language to a new message. This means that your messages will be read in the language of the randomly-selected voice, likely resulting in the wrong language being used for the message.</p>
<p>My <strong>Multilingual TTS for Twitch</strong> app automatically detects the language of the message and uses a voice in that language if it exists. Right now it has been fully tested to work with English, French and Spanish with the goal to add more languages. </p>
<h3 id="heading-chat-message-overlapping">Chat message overlapping</h3>
<p>The Twitch TTS app available in the Microsoft store has an issue that if multiple users send messages, the app begins to read them when they are received, rather than when the previous message has been completed. This causes messages to be read on top of each other, which means you may miss what is said. I'm not a big streamer and I don't have that many chatters at the same time, but I found it hard to follow even 2 messages being read on top of each other. This app would be unusable for people with more active chats than mine.</p>
<p>While I didn't test Speech Chat, I have been to streams where the streamer is using it and it's broadcasting, and I have not noticed these concerns, so I'd say that this concern does not exist with Speech Chat.</p>
<h2 id="heading-tech-stack">Tech Stack</h2>
<p>This app is built using Visual Studio 2017 and  <a target="_blank" href="https://docs.microsoft.com/en-us/dotnet/desktop/wpf/?view=netdesktop-6.0">Windows Presentation Foundation (WPF)</a>, an XML-based framework for building UI.</p>
<p>It uses the Speech API's <code>System.Speech.Synthesis</code>'s <code>SpeechSynthesizer</code> for the bulk of its functionality.</p>
<p>Language detection uses <a target="_blank" href="https://github.com/ivanakcheurov/ntextcat">ntextcat</a>.</p>
<h2 id="heading-download-and-install">Download and Install</h2>
<p>Download the latest release and see all releases here: https://github.com/techygrrrl/multilang-twitch-tts/releases</p>
<ol>
<li>Download the <code>TwitchTTSMultilang-techygrrrl.stream.zip</code> file from the link above</li>
<li>Open the <code>.zip</code> file you just downloaded</li>
<li>Double click the <code>setup.exe</code> file to launch the installer</li>
</ol>
<p>The demo video linked above demonstrates how to install it.</p>
<p>I am not registered as a developer on Microsoft's platform so if you have trouble installing this app, you may need to change your permissions and either allow installing apps from unknown publishers, or specifically unblock this app. </p>
<h3 id="heading-sound-setup">Sound setup</h3>
<p>By default, when you use any TTS app it will be part of your desktop audio, so if you're playing a PC game, you may be streaming your desktop audio, causing you to stream your TTS output. If you don't want to stream your TTS output, you'll need to configure your sound on Windows to multiple output devices and only stream one of them. </p>
<p>These instructions should work for any TTS app, not just mine.</p>
<p>Configuring Windows sound settings for this is fairly complex, here are some articles:</p>
<ul>
<li><a target="_blank" href="https://www.minitool.com/news/play-sound-multiple-output-devices-windows-10.html">for Windows 10</a></li>
<li><a target="_blank" href="https://winbuzzer.com/2021/12/31/how-to-play-sound-through-both-speakers-and-headphones-in-windows-11-xcxwbt/">for Windows 11</a> </li>
</ul>
<p>TL;DR:</p>
<ul>
<li>Enable <strong>StereoMix</strong> in Windows (or re-enable)</li>
<li>Add StereoMix as an <strong>audio input</strong> in  <a target="_blank" href="https://obsproject.com/">OBS</a> </li>
<li>In Windows Sound settings, route the audio that you plan on streaming to desktop audio (and not headphones), e.g. if I'm playing a PC game, that game audio should be routed to desktop audio.</li>
<li>Route audio I don't want to stream directly to my headphones, e.g. any TTS app</li>
<li>Go into Sound -&gt; More Sound settings<ul>
<li>Under Playback, make headphones the default audio (if not already)</li>
<li>Under Recording, go into StreeoMix properties and click the checkbox <code>Listen to this device</code>. Choose <code>Playback through this device</code> (e.g. laptop speakers)</li>
</ul>
</li>
</ul>
<p>After streaming:</p>
<ul>
<li>Go into Sound settings -&gt; Input, and assuming StereoMix is selected, click the <code>Mute microphone</code> icon button (to disable StereoMix input)</li>
</ul>
<p>Before your text stream:</p>
<ul>
<li>Go into Sound settings -&gt; Input -&gt; choose StereoMix (if not selected already) -&gt; Unmute microphone</li>
<li>Ensure desktop audio is disabled in OBS and only StereoMix is enabled in OBS so you don't get TTS audio output to your stream.</li>
</ul>
<h3 id="heading-uninstalling">Uninstalling</h3>
<p>If you decide this isn't for you, you can uninstall the app by going into Add or Remove programs in your Settings, which can be easily accessed by hitting the Windows key and typing "remove" and selecting the right option.</p>
<h2 id="heading-request-features">Request Features</h2>
<p>To request new features or vote on other requested features, create a new issue in the issue queue or comment on an existing issue. </p>
<p>Request new features or show your support for existing request at the following link: https://github.com/techygrrrl/multilang-twitch-tts/issues</p>
]]></content:encoded></item></channel></rss>