---
layout: post
title: Introducing Amphiarao!
author: Adrian Cochrane
date: 2021-12-23 20:55:52 +1300
---
I've now implemented the core featureset of <span>(save for a [HURL](https://git.adrian.geek.nz/hurl.git/) crash which badly needs addressing)</span> a Rhapsode bug-compatible [webpage debugger](/amphiarao), compatible with [Selenium](https://www.selenium.dev/) & whatever your favourite web browser is. Even [Rhapsode](/), once I've implemented forms for it <span>(coming soon)</span>! All the features Selenium expects are implemented, though where they're not supported by Rhapsode I wrote noops.
Amphiarao is implemented as a [Happstack](http://happstack.com/) locally-run non-persistant webservice exposing a [JSON](https://www.json.org/json-en.html) <span>(using the [`aeson`](https://hackage.haskell.org/package/aeson) module, named for the father of [Jason](http://www.perseus.tufts.edu/hopper/text?doc=Perseus:text:1999.01.0022:text=Library:book=1:chapter=8&highlight=jason) from Jason & The Argonauts)</span> API "[WebDriver](https://www.w3.org/TR/webdriver2/)" expected by Selenium & an [HTML](https://codeberg.org/Weblite/HTMLite/src/branch/master/htmlite.md) UI resembling the [Chrome](https://developer.chrome.com/docs/devtools/), [Firefox](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector), or especially [Safari](https://webkit.org/web-inspector/) WebInspectors you're familiar with. And loosely resembling the [elementary](https://elementary.io/) OS *"[Pantheon](https://github.com/elementary/stylesheet)"* desktop with the [Solarized](https://ethanschoonover.com/solarized/) syntax-highlighting theme, though feel free to contribue alternate [CSS themes](http://www.csszengarden.com/)! It builds upon the exact [same modules](https://git.adrian.geek.nz/) <span>(plus [`selectors`](https://hackage.haskell.org/package/selectors) & [`hxt-xpath`](https://hackage.haskell.org/package/hxt-xpath) for searching elements)</span> serverside Rhapsode would use clientside to render the HTML Amphiarao outputs to it.
To ensure Amphiarao will sound good in Rhapsode <span>(again, once [forms](https://developer.mozilla.org/en-US/docs/Learn/Forms) are implemented in it)</span> Amphiarao takes care to use semantic markup, uses [no JavaScript](https://rhapsode.adrian.geek.nz/2021/01/23/why-html.html), & applies auditory styles to it's [syntax highlighting](https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/). These auditory styles ensure source code doesn't sound monotonous <span>(in other words: syntax highlighting may be useful visually, but it's crucial auditorally)</span> when read aloud. Since I already have the HTML & CSS parsed, I found it easy enough to have the code manually add the additional markup without pulling in a [dedicated syntax highlighter](https://adrian.geek.nz/docs/jekyll.html). Though I probably will utilize [`skylighting`](https://hackage.haskell.org/package/skylighting) later when I expand the UI featureset beyond what's expected by Selenium...
## Why?
I doubt Amphiarao will get much use by web developers wanting to ensure their pages work well in my efforts, though I'd *love* & welcome to be proven wrong!
I do know that *I'd* use it, to aid my own testing of my browser engine stack as I extend it to tackle even more ambitious projects <span>(Something [visual](/tv)?)</span>! And just like existing WebInspectors are implemented in a way which *showcases* their browsers' capabilities, so does Amphiarao. Notably the [**universiality**](https://rhapsode.adrian.geek.nz/2020/10/31/why-auditory.html) where I can target multiple differing mediums with the exact same markup.
## Visual Design
I don't claim to be a strong visual designer, but I know what I like. I find borders to be visual noise I wish to avoid. I prefer communicating via [typography](https://practicaltypography.com/) & (which I largely implemented via [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)) layout, though when not overused differing backgrounds can be nice and useful too.
I copied <span>([rigorously](https://observer.com/2015/02/meet-the-man-behind-solarized-the-most-important-color-scheme-in-computer-history/)-[choosen](https://blog.elementary.io/look-and-feel-changes-elementary-os-6/))</span> colour schemes from elementary & Solarized because:
1. I use them everyday & love them
2. I don't know how to choose my own
**Hey**, if WebKit's WebInspector can look like Mac OS X everywhere, Amphiarao can look like elementary everywhere! And yes, there is a darkmode.
But if you have different visual-design tastes than mine, all it'd take is swapping out the CSS. Which I'll ensure is trivial for readers to do in any of my browser engines.
<style>span {voice-volume: soft}</style>