Jonathan Bischoff at a piano

I'm Jonathan Bischoff, a Full Stack Engineer.


I work in the world of digital advertising, and I love music.

Have you ever wondered what HTML sounds like?

Web Muncher

HTML Source:

google
<body bgcolor="#fff">
  <script nonce="l7v5Pr-wn7f5ADdpXMrnHQ">
   (function(){var src='/images/nav_logo229.png';var iesg=false;document.body.onload = function(){window.n && window.n();if (document.images){new Image().src=src;}
if (!iesg){document.f&&document.f.q.focus();document.gbqf&&document.gbqf.q.focus();}
}
})();
  </script>
  <div style="padding:6px">
   <div class="gb_Ra gb_Nd gb_Jb gb_e gb_cb" id="gb">
    <div class="gb_be gb_Fb gb_2d" data-ogsr-up="">
     <div>
      <div class="gb_R gb_8 gb_1f gb_8f" data-ogbl="">
       <div class="gb_7 gb_8">
        <a aria-label="Gmail " class="gb_6" data-pid="23" href="https://mail.google.com/mail/&amp;ogbl" target="_top">
         Gmail
        </a>
       </div>
       <div class="gb_7 gb_8">
        <a aria-label="Search for Images " class="gb_6" data-pid="2" href="https://www.google.com/imghp?hl=en&amp;ogbl" target="_top">
         Images
        </a>
       </div>
      </div>
     </div>
     <div class="gb_Md">
      <div class="gb_sd">
       <div class="gb_L gb_Ed gb_8" data-ogsr-alt="" id="gbwa">
        <div class="gb_D">
         <a aria-expanded="false" aria-label="Google apps" class="gb_C" href="https://www.google.com/intl/en/about/products" role="button" tabindex="0">
          <svg aria-hidden="true" class="gb_H" focusable="false" viewbox="0 0 24 24">
           <path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
           </path>
           <image alt="" height="24" src="https://ssl.gstatic.com/gb/images/bar/al-icon.png" style="border:none;display:none \9" width="24"/>
          </svg>
         </a>
        </div>
       </div>
      </div>
      <a aria-label="Sign in" class="gb_4a gb_6d gb_Xd gb_Od" href="https://accounts.google.com/ServiceLogin?hl=en&amp;passive=true&amp;continue=https://www.google.com/&amp;ec=GAZAmgQ" target="_top">
       <span class="gb_le">
        Sign in
       </span>
      </a>
     </div>
    </div>
   </div>
  </div>
  <center>
   <br clear="all" id="lgpd"/>
   <div>
    <img alt="Google" height="92" id="hplogo" src="/images/branding/google_wordmark/v1/1x/googlelogo_color_white_background_272x92dp.png" style="padding:28px 0 14px" width="272"/>
    <br/>
    <br/>
   </div>
   <form action="/search" name="f">
    <table cellpadding="0" cellspacing="0">
     <tr valign="top">
      <td width="25%">
      </td>
      <td align="center" nowrap="">
       <input name="ie" type="hidden" value="ISO-8859-1"/>
       <input name="hl" type="hidden" value="en"/>
       <input name="source" type="hidden" value="hp"/>
       <input name="biw" type="hidden"/>
       <input name="bih" type="hidden"/>
       <div class="ds" style="height:32px;margin:4px 0">
        <input autocomplete="off" class="lst" maxlength="2048" name="q" size="57" style="margin:0;padding:5px 8px 0 6px;vertical-align:top;color:#1f1f1f" title="Google Search" value=""/>
       </div>
       <br style="line-height:0"/>
       <span class="ds">
        <span class="lsbb">
         <input class="lsb" name="btnG" type="submit" value="Google Search"/>
        </span>
       </span>
       <span class="ds">
        <span class="lsbb">
         <input class="lsb" id="tsuid_qVSoapfwN8fJ0PEPuM6HoAg_1" name="btnI" type="submit" value="I'm Feeling Lucky"/>
         <script nonce="oPjAJ-CVqn20dk2SIo_ExQ">
          (function(){var id='tsuid_qVSoapfwN8fJ0PEPuM6HoAg_1';document.getElementById(id).onclick = function(){if (this.form.q.value){this.checked = 1;if (this.form.iflsig)this.form.iflsig.disabled = false;}
else top.location='/doodles/';};})();
         </script>
         <input name="iflsig" type="hidden" value="ABILxe8AAAAAaqhiuQAy1dwEtZzsCfILjFK9eBYSpIwN"/>
        </span>
       </span>
      </td>
      <td align="left" class="fl sblc" nowrap="" width="25%">
       <a href="/advanced_search?hl=en&amp;authuser=0">
        Advanced search
       </a>
      </td>
     </tr>
    </table>
    <input id="gbv" name="gbv" type="hidden" value="1"/>
    <script nonce="oPjAJ-CVqn20dk2SIo_ExQ">
     (function(){var a,b="1";if(document&&document.getElementById)if(typeof XMLHttpRequest!="undefined")b="2";else if(typeof ActiveXObject!="undefined"){var c,d,e=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(c=0;d=e[c++];)try{new ActiveXObject(d),b="2"}catch(h){}}a=b;if(a=="2"&&location.search.indexOf("&gbv=2")==-1){var f=google.gbvu,g=document.getElementById("gbv");g&&(g.value=a);f&&window.setTimeout(function(){location.href=f},0)};}).call(this);
    </script>
   </form>
   <div style="font-size:83%;min-height:3.5em">
    <br/>
   </div>
   <span id="footer">
    <div style="font-size:10pt">
     <div id="WqQANb" style="margin:19px auto;text-align:center">
      <a href="/intl/en/ads/">
       Advertising
      </a>
      <a href="/services/">
       Business Solutions
      </a>
      <a href="/intl/en/about.html">
       About Google
      </a>
     </div>
    </div>
    <p style="font-size:8pt;color:#636363">
     © 2026 -
     <a href="/intl/en/policies/privacy/">
      Privacy
     </a>
     -
     <a href="/intl/en/policies/terms/">
      Terms
     </a>
    </p>
   </span>
  </center>

Synth

100
0.35
Speed 40ms
Tonal center A3

Voice

Attack 5ms
Decay 100ms
Sustain 0.10
Release 50ms

Scale

note played →↑ note heard

Huge thank you to Yotam Mann for creating tone.js, the open-source audio package this synth relies on.

Projects

Shipped

  • Design website colorschemes by snapping a picture! 📸

    launched

  • Navigate FreeWheel Adserver in a custom interface, enhanced for your workflow. Built in 5 days using the FreeWheel API.

    launched

  • Monitor your computer's CPU, temperature, and RAM usage in real-time, built with Tauri, Svelte, and Rust.

    launched

  • Upload music and listen to custom playlists, built in vanilla HTML and JS, using an AWS Bucket for storage, and Google Sheets for a database!

    launched

  • A website for my girlfriend's Doula practice, built in vanilla HTML.

    launched

  • Format advertising VAST links for your organization at the click of a button, using a custom ruleset

    launched

  • A fun audiovisual sketch that animates music in the shape of a symmetric flower.

    launched

In-Progress

  • A map showing the waterbodies, rivers, and watersheds of a particular quadrant in Western Washington. Built using Python with GeoPandas, from public WSDOT geodata packages, as part of an ongoing effort to protect Coho Salmon from toxic runoff chemicals.

    last updated

Tools

Languages

  • Markup Language

    Scaffolds the web

  • Language

    Powers the web

  • Language

    Moves JS runtime errors to compile-time errors

  • Language

    Fast for prototyping, good for processing large data

  • Language

    Gets closer to the machine; we studied C++ in my undergrad (Vanderbilt 2017-2021)

  • Language

    Structures data

Frameworks & Libraries

  • Framework

    Matches most team stacks

  • Full-Stack Framework

    Powers React apps

  • Component Framework

    Compiles to vanilla JS and uses clean syntax

  • Full-Stack Framework

    Handles routing, like Next.js for Svelte

  • Library

    Maps geospacial data

Platforms

  • Cloud Platform

    Hosts large files and scales to more users

  • Backend Platform

    Organizes and scales data

Workspace

  • Code Editor

    Works quickly

  • Design Tool

    Creates mockups visually before writing code

  • AI Assistant

    Cuts through monotonous tasks

  • Browser

    Respects privacy and RAM

  • Browser

    Runs in-browser apps the fastest

Ethos

Pacing

I like building workflows that quiet the mind and open up creative possibilities.

The screen should never feel overwhelming.

New features should become available to the user as they venture deeper into a specific component.

This allows the user to take in information at their own pace, solidifying learning.

Modularity

Each component should function along the same design logic.

Learning one component in-depth should inform the user how they can expect future components to work.

This requires a standardizing of visual language, workflows, and keywords.

The result is an application that feels good to use, like MacOS, Ableton Live, and Google Workspace.

Use

The application should put the user in the driver's seat.

Internal state should be remembered and manipulated by the application in order to free up the user's mental load.

Friction should be minimal where possible, except for operations with big consequences like deleting a database or deploying information to the public. Here, friction is introduced to remind the user of the gravity of their actions.

The result is an application that allows the user to enter a flow state so they can move data at the pace of their mind.

Contact Me