html

Scala.js tutorial: How to start building single-page web applications

Table of Contents1 - Single-page applications2 - 1. Getting started (dependencies)3 - 2. Create hello3.html4 - 3. Create Hello3.scala5 - 4. Run the code!6 - Summary/Discussion7 - Resources8 - More facades9 - Other tutorials in this series10 - Bonus!11 - Source code

In this final, third part of my three-part introductory series on Scala.js I’ll demonstrate a technique that can help you build single-page web applications with Scala.js. That is, the body of your HTML page will look like this:

<body>
    <div id="root"></div>          

    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-jsdeps.js"></script>
    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-fastopt.js"></script>
</body>

After that, your entire application will then be written in Scala/Scala.js, which is converted into JavaScript code in the scala-js-hello-world-fastopt.js file.

A Scala.js tutorial: “Hello, world” with an HTML button click alvin June 17, 2019 - 5:29pm
Table of Contents1 - 1. Create a new HTML page2 - 2. Make updates to use jQuery3 - 3. The new Scala code4 - 4. Setting the main class5 - 5. Running this example6 - Discussion7 - Summary

In my first “Hello, world” Scala.js tutorial I showed how to get started with Scala.js, including some necessary setup/configuration work. That tutorial ended by showing how to get the string “Hello, world” displayed in a browser.

In this tutorial I’ll take this a little further and show how to create an HTML button you can click that results in the string “Hello, world” being displayed in a JavaScript alert window. When the button is clicked, the alert window will be displayed by your Scala/Scala.js code.

A little Scala project to convert AsciiDoc to clean, simple HTML

Table of Contents1 - A shell script solution2 - A JavaFX GUI3 - Summary

I recently started using AsciiDoc to write a new book. A great thing about it is that unlike Markdown, you can use AsciiDoc to write a book and get all of the features you want in a book, including linking between anything, captions for tables and figures, indexes, etc. Because this got me started using AsciiDoc I thought, “Wouldn’t it be nice if I could also use AsciiDoc to write blog posts like this one?”

Sadly, I quickly ran into a problem: I couldn’t find a good way to convert AsciiDoc into HTML, or even Markdown. There are tools to convert AsciiDoc to HTML, but for some reason they take the approach of including a ton of markup in the HTML (divs, spans, and attributes), and as far as I can tell there’s no way to turn off that markup.

Back to top

A shell script solution

An example of JSoup’s OutputSettings class

I ended up not using this code, but if you wanted to see one way to use JSoup’s OutputSettings (Document.OutputSettings) class to set some parameters before calling JSoup.clean, I hope this is helpful:

// tried some things to improve the html output
val settings: OutputSettings = new OutputSettings
settings.prettyPrint(true)  //`true` is default
settings.charset("UTF-8")
settings.outline(true)  //this is close to what i want, but too extreme
settings.indentAmount(4)
val cleanHtml: String = Jsoup.clean(html, "", wl, settings)

I can attest that this code works, it’s just not what I need at the moment.

Also, the code shown is written in Scala, but as you can see, it converts easily to Java.

How to convert asciidoc to markdown

It turns out that converting AsciiDoc to HTML without including a bunch of undesired CSS is a problem, and converting AsciiDoc to Markdown is also a problem. The page I linked to shows the best way I’ve found to convert AsciiDoc to Markdown, which can then be converted to CSS-free HTML. In case that page ever disappears, the basic commands are:

Install pandoc and asciidoc:

sudo apt install pandoc asciidoc

Convert asciidoc to docbook:

asciidoc -b docbook foo.adoc

Convert docbook to markdown:

How to convert HTML to AsciiDoc with Pandoc

If you ever need to convert HTML to AsciiDoc, I just used this Pandoc command and it seems to work well:

pandoc --wrap=none -f html -t asciidoc myfile.html > myfile.adoc

The wrapping part of that command isn’t 100% necessary, but if you don’t use it, Pandoc will wrap the plain paragraph text, which I don’t like because I’ll be editing the resulting AsciiDoc text.

Here’s some of the AsciiDoc text that this command generated:

How to convert Asciidoc to HTML

As a brief note to self, if you need to convert an Asciidoc file named test1.adoc to HTML format, this command works:

asciidoc -o test1.html test1.adoc

Of course a key here is that you need the asciidoc command installed. I installed it on my Mac with Homebrew, something like brew install asciidoc. I don’t like the HTML that this approach generates, so I’ll keep looking for something better.

A Scala “Word of the day” shell script

I have a 19" monitor on the counter between my kitchen and living room, and it’s powered by a Raspberry Pi. I use the Linux Phosphor screen saver to show a scrolling “news and stock ticker” on the display, which I’ve programmed to show news from several different sources (Atom and Rss feeds, along with other news and data sources). An old version of the display looks like this:

My Raspberry Pi news ticker display

Today I added a new “Word of the day” feature to the display, and as with all of the other code, I wrote a Scala shell script to generate the output.