diff options
| author | Sadeep Madurange <sadeep@asciimx.com> | 2025-12-18 22:22:54 +0800 |
|---|---|---|
| committer | Sadeep Madurange <sadeep@asciimx.com> | 2025-12-18 22:22:54 +0800 |
| commit | 4edf733b7bf460d1c27c9e6529b8d39cf5bb5e56 (patch) | |
| tree | 1f7bd09dbd1ae913d92a8f4eed75efae395dc7f0 /_site/projects | |
| parent | 8f96339b62d54479e0e712975276c05e907979fd (diff) | |
| download | www-4edf733b7bf460d1c27c9e6529b8d39cf5bb5e56.tar.gz | |
Bumblebee post.
Diffstat (limited to '_site/projects')
| -rw-r--r-- | _site/projects/bumblebee/index.html | 30 | ||||
| -rw-r--r-- | _site/projects/matrix-digital-rain/index.html | 47 |
2 files changed, 37 insertions, 40 deletions
diff --git a/_site/projects/bumblebee/index.html b/_site/projects/bumblebee/index.html index d414b1a..a07dd5f 100644 --- a/_site/projects/bumblebee/index.html +++ b/_site/projects/bumblebee/index.html @@ -55,36 +55,34 @@ of web scraping scripts.</p> including scraping data from authorized websites for traders’ use.</p> <p>Manual authoring of such scripts took time. The scripts were often brittle due -to the complex nature of modern websites, and they lacked optimizations such as +to the complexity of the modern web, and they lacked optimizations such as bypassing the UI and retrieving the data files directly when possible, which would have significantly reduced our compute costs.</p> <p>To alleviate these challenges, I, with the help of a colleague, Andy Zhang, -built Bumblebee: a C# Windows Forms desktop application that uses Microsoft -Edge <a src="https://developer.microsoft.com/en-us/microsoft-edge/webview2" class="external" target="_blank" rel="noopener noreferrer">WebView2</a> for -rendering web content.</p> +built Bumblebee: a web browser powered by C# Windows Forms, Microsoft Edge <a src="https://developer.microsoft.com/en-us/microsoft-edge/webview2" class="external" target="_blank" rel="noopener noreferrer">WebView2</a>, and +the <a src="https://github.com/desjarlais/Scintilla.NET" class="external" toarget="_blank" rel="noopener noreferrer">Scintilla.NET</a> text editor.</p> <p>Bumblebee works by injecting a custom JavaScript program that intercepts client-side events and sends them to Bumblebee for analysis. In addition to front-end events, Bumblebee also captures internal browser events, which it then interprets to generate code in real time. Note that we developed Bumblebee -before the advent of now-popular LLMs. Bumblebee reliably handles dynamic -websites and pop-ups. The user can access developer tools, override any part of -the script at any point during the session (using the embedded <a src="https://github.com/desjarlais/Scintilla.NET" class="external" target="_blank" rel="noopener noreferrer">Scintilla.NET</a> editor), debounce -events, and block hidden elements and scripts.</p> +before the advent of now-popular LLMs. Bumblebee supports dynamic websites, +pop-ups, developer tools, live manual override, event debouncing, and filtering +hidden elements and scripts.</p> <p>Before settling on a desktop application, we contemplated designing Bumblebee as a browser extension. We chose the desktop app because extensions don’t offer the deep, event-based control we needed. Besides, the company’s security policy, which prohibited browser extensions, would have complicated the -deployment of an extension-based solution. The initial prototype used a C# -wrapper of the Chromium project instead of WebView. WebView’s more intuitive -API and its seamless integration with Windows Forms led us to choose it over -the Chromium wrapper.</p> - -<p>Bumblebee predictably reduced the time we spent on authoring scripts from hours -to a few minutes. Since the code generation rules were written and optimized by -experts in web technologies, the quality of the scripts improved as well.</p> +deployment of an extension-based solution. My first prototype used a C# binding +of the Chromium project. WebView’s more intuitive API and its seamless +integration with Windows Forms led us to choose it over the Chromium wrapper.</p> + +<p>What began as a personal side project to improve my own workflow enabled us to +collectively improve the quality of our web scripts at a much larger scale. +Bumblebee predictably reduced the time we spent on authoring scripts from hours +to a few minutes.</p> </div> <p class="post-author right">by W. D. Sadeep Madurange</p> diff --git a/_site/projects/matrix-digital-rain/index.html b/_site/projects/matrix-digital-rain/index.html index 3c441d4..5218c10 100644 --- a/_site/projects/matrix-digital-rain/index.html +++ b/_site/projects/matrix-digital-rain/index.html @@ -53,15 +53,15 @@ Matrix in C, with zero dependencies—not even ncurses.</p> <h2 id="overview">Overview</h2> -<p>This is my fork of Domsson’s beautiful <a href="https://github.com/domsson/fakesteak" class="external" target="_blank" rel="noopener noreferrer">Fakesteak</a>. While studying the code, I wondered -what it would take to faithfully recreate the original Matrix from the first -movie without sacrificing the program’s minimalism and elegance.</p> +<p>This is my fork of Domsson’s beautiful <a href="https://github.com/domsson/fakesteak" class="external" target="_blank" rel="noopener noreferrer">Fakesteak</a>. While going through his code, I +wondered what it would take to faithfully recreate the original Matrix from the +first movie without sacrificing its minimalism.</p> -<p>My version adds:</p> +<p>My implementation supports:</p> <ul> - <li>Unicode character support.</li> - <li>Fully customizable 24-bit RGB (truecolor) colors.</li> + <li>Unicode characters.</li> + <li>24-bit RGB colors (truecolor).</li> <li>Glitches in the matrix.</li> <li>Ghosting effect of old monochrome CRT displays.</li> <li>Closely resembles the Matrix seen in the background during Neo and Cypher’s @@ -76,10 +76,10 @@ $ ./matrix <h2 id="how-does-it-work">How does it work?</h2> -<p>The program tracks the state of the terminal - characters, background and -foreground colors, shading levels, cursor position - using multiple internal -data buffers. On each frame, it updates these buffers and repaints the screen -using ANSI escape codes:</p> +<p>The program tracks the state of the terminal, such as code points, background +and foreground colors, and cursor position, using multiple internal data +buffers. On each frame, it updates these buffers and repaints the screen using +ANSI escape codes:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>static void term_print(const matrix *mat, size_t row, size_t col) { @@ -94,8 +94,8 @@ using ANSI escape codes:</p> } </code></pre></div></div> -<p>The ghosting effect, the signature feature of this implementation, works by -scaling and mixing the RGB channels:</p> +<p>The ghosting effect is achieved by carefully scaling the RGB +channels before mixing them:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>static void mat_shade(matrix *mat, size_t row, size_t col) { @@ -107,25 +107,24 @@ scaling and mixing the RGB channels:</p> } </code></pre></div></div> -<p>The ghosting function emulates the screen decay by gradually transitioning each -raindrop’s color towards the background color. This approach provides two key -benefits: straightforward color configuration that integrates naturally with -Unix ricing (desktop customization) and high-fidelity recreation of the Matrix -aesthetic.</p> +<p>The ghosting function emulates the dim after glow by gradually transitioning +each raindrop’s color towards the background color. This approach provides two +key benefits: straightforward color configuration that integrates naturally +with (Unix) ricing and high-fidelity recreation of the Matrix aesthetic.</p> <h2 id="customization">Customization</h2> -<p>While you can adjust almost every aspect, including its speed, glitch -frequency, and rain density, the most useful settings for customization are the -color scheme and character set.</p> +<p>While you can alter almost every aspect, including speed, glitch frequency, and +rain density, the most common customizations are the color scheme and character +set.</p> <p>There are three color settings: head, tail, and background. You can configure -them by setting the <code class="language-plaintext highlighter-rouge">COLOR_*_RED</code>, <code class="language-plaintext highlighter-rouge">COLOR_*_GRN</code>, and <code class="language-plaintext highlighter-rouge">COLOR_*_BLU</code> definitions -in main.c.</p> +them using <code class="language-plaintext highlighter-rouge">COLOR_*_RED</code>, <code class="language-plaintext highlighter-rouge">COLOR_*_GRN</code>, and <code class="language-plaintext highlighter-rouge">COLOR_*_BLU</code> definitions found in +main.c.</p> <p>The <code class="language-plaintext highlighter-rouge">UNICODE_MIN</code> and <code class="language-plaintext highlighter-rouge">UNICODE_MAX</code> values control the Unicode block used. For -example, setting them to <code class="language-plaintext highlighter-rouge">0x30A1</code> and <code class="language-plaintext highlighter-rouge">0x30F6</code> rains Katakana (if a font that -supports Katakana is present on the system):</p> +example, setting them to <code class="language-plaintext highlighter-rouge">0x30A1</code> and <code class="language-plaintext highlighter-rouge">0x30F6</code> rains Katakana, if a font that +supports Katakana is present on the system:</p> <p><img style="width: 100%;" src="katakana.png" /></p> |
