--- layout: post title: Introducing Amphiarao! author: Adrian Cochrane date: 2021-12-23 20:55:52 +1300 --- I've now implemented the core featureset of (save for a [HURL](https://git.adrian.geek.nz/hurl.git/) crash which badly needs addressing) 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 (coming soon)! 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) (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) 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/) (plus [`selectors`](https://hackage.haskell.org/package/selectors) & [`hxt-xpath`](https://hackage.haskell.org/package/hxt-xpath) for searching elements) serverside Rhapsode would use clientside to render the HTML Amphiarao outputs to it. To ensure Amphiarao will sound good in Rhapsode (again, once [forms](https://developer.mozilla.org/en-US/docs/Learn/Forms) are implemented in it) 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 (in other words: syntax highlighting may be useful visually, but it's crucial auditorally) 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 (Something [visual](/tv)?)! 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 ([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/)) 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.