The Task

An old (ie 10+ years old) desktop application needed to be converted to a web application for modernization purposes. The program was a simple display of textbook-style information with links to audio content. We decided to build this with as simple a technology as possible, with hopes for longevity to exceed what it has had before: raw HTML and CSS, with as little Javascript as possible, optimizing compatibility¹, longevity, and load time.

The Tools

In the course of this project a number of useful tools were found for fundamental web work. Emacs is pretty good at editing text, meaning it is a strong choice for a raw html project. What I found was a gobsmacking affirmation of this.

Skewer

I knew the Skewer plugin² previously and tried it briefly. Skewer gives you instant feedback during javascript development, hotloading your browser as you make javascript changes. However, it was not quite a fit for HTML work.

Impatient mode

Impatient Mode³, which I was lead to from Skewer, is indeed the solution for HTML. Not only a Clojure-style “save it and watch your changes,” but Impatient (alarmingly!) makes the changes as you type. Well, since failing gracefully is sort of HTML’s #1 thing, that works out!

Emmet

As this project quickly reminded me, writing HTML is a verbose pain. It’s just not a very concise language (Java, you must be siblings). Emmet⁴ allows you to shortcut your HTML and CSS writing with just a few characters that expand into whole lines of your desired code. This is especially useful when using CSS frameworks, which can have involved structural requirements to apply their styles.

Bulma CSS framework

Using a CSS framework instead of home-written CSS is generally a good idea because the good frameworks have taken the responsibility of checking compatibilty and responsiveness: you want your site to work as well as possible on mobile, desktop, Edge, Safari, Chrome, and Firefox (we’ll just not mention the internet’s Evil Child, IE).

FontAwesome

Font Awesome⁵, as well as several others, offers a way of including icons in the fontification of your site. In particular, I just needed it for a good audio icon to click on to play the audio snippets. Given a little more time to work on this project I would actually just snip down to that single icon in order to limit resource sizes.

Begrudingly including a tiny bit of Javascript

As someone who has spent lots of time writing Clojurescript/Javascript/React projects, I was intrigued by the challenge of avoiding Javascript to make this site work. As time constraints curbed my development, though, and as some of the awful limitations of raw HTML became apparent, I had to include a single Javascript file to smooth out the audio playing. The purpose of the file was to read a list of items with a data_audioname attribute, and to generate a player to a predefined audio location based on that name. HTML audio players, if left naked, require a display of an entire “controls” with tracking bar, audio, play, pause, etc. I just wanted a single play button, so I wrote a little script to read all my li items and construct the audio element for them, insert the button, and onclick the button to play the audio.

Writing raw Javascript instead of Clojurescript brought me back to painful awareness of Javascript’s limitations – mainly with inconsistencies⁶.

Conclusion

The final product is online and available.⁷ On the plus side, it is fast, technically simple, and secure. On the other hand, the writing was full of redundancies and took far more code than would a more expressive language.

Footnotes

¹ Functional compatability, anyway. The drawback to leveraging raw HTML elements is that you are at the mercy of little-known browser-specific implementation details, so you’ll find out how browsers render dropdowns, scrollbars, and event hooks in different ways.

² Plugin available here. https://github.com/skeeto/skewer-mode . It emphasizes JavaScript re-rendering, so wasn’t quite on spec with this project.

³ In the down-and-dirty world of raw HTML work, https://github.com/skeeto/impatient-mode is quite a nice solution for seeing as-you-type changes to the HTML (with JavaScript updaters it is a safer as-you-save or on-demand updating). Fortunately, HTML is the most forgiving of codes, so as-you-type won’t cause any irredeemable issues.

⁴ Emmet mode is a stenography-style abbreviation-expander that allows you to sidestep the verbosity of HTML with a DSL that expands to html. A cool idea, again optimized for the down-and-dirty mechanical process of writing HTML. https://github.com/smihica/emmet-mode

⁵ if you have been doing any webdev at all, you probably know all about solutions like Font Awesome, which became the Next Big Thing after Glyph Icon went primarily paid. https://fontawesome.com/. These tools give you icons encoded as characters in your fonts.

⁶ a good review of JavaScript inconsistencies https://softwareengineering.stackexchange.com/a/138188

⁷ The site, in all its simplicity, is here: https://vityamaleev.byu.edu