Enumerating the fonts and their sizes

Arial (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Courier (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Georgia (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Helvetica (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Times (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Trebuchet (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Verdana (smallest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Arial (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Courier (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Georgia (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Helvetica (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Times (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Trebuchet (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Verdana (small)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Arial (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Courier (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Georgia (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Helvetica (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Times (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Trebuchet (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Verdana (normal)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Arial (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Courier (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Georgia (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Helvetica (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Times (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Trebuchet (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Verdana (large)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Arial (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Courier (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Georgia (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Helvetica (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Times (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Trebuchet (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

Verdana (largest)

!"#$%&'()*+,-./0123456789:;<=>@

ABCDEFGHIJKLMNOPQRSTUVWXYZ

[\]^_`

abcdefghijklmnopqrstuvwxyz

{|}~

How to embed source code snippets in Blogger

I will be embedding source code snippets in some of my Blogger posts. Suppose we have a Go code snippet, the famous "hello world" example program:

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

Note: replace tabs with multiple spaces when dealing with material that is sensitive to precise layout. In the HTML world with its many flaws, tabs are often replaced by single spaces, behind your back! Most code editors can be set up to use spaces instead of tabs for indentation.

Sadly there is no standard tool in the Blogger editor to mark text as source code and get special formatting, but there are several ways to achieve that nonetheless. Let's have a look at some approaches.

The above code snippet is displayed using the Courier font that was manually applied to the selected text. This might suffice. It is perhaps the simplest solution. 

HTML has a <code>...</code> tag to use when displaying source code. Let's switch to the HTML view in the Blogger editor and try it out:

// hello.go, jpad 2018 package main import ( "fmt" ) func main() { fmt.Println("Hello, World!") }

That's obviously no good. The code block uses a monospace font, but tabs and line breaks aren't honoured. It works better when using <pre><code>...</code></pre> as follows:

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

There are some online code formatters available. You paste your code snippet in an input field on their site, push a button and your formatted code appears, usually both as rendered HTML and raw HTML. You can copy the raw HTML code and past that in the Blogger HTML view. Try out a few of them.

http://codeformatter.blogspot.com/ generates this:

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

Simple and straightforward. The tab width can be set when doing the formatting, and it is stable, also after saving the blog and re-opening it. 

http://hilite.me/ generates this:

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

The hilite formatter understands Go source and does proper syntax highlighting. 

https://pinetools.com/syntax-highlighter generates this:

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

The pinetools formatter also understands Go source and offers many highlighting styles. 

All the online source code formatters do their job quite well, but they have a fundamental flaw. If the code changes, you need to visit the website again to update the formatting. 

Some people embed a 'Github gist' (https://gist.github.com/) into their blog, like this:

While it looks good it is cumbersome to use because the code is not in the same place as the rest of the blog. Plus: code can be edited and the embedded snippet will be updated automatically. Minus: the embedded snippet is invisible when in Blogger edit mode.


Many coders integrate a syntax highlighting script into their Blogger theme template. Once that is done correctly, all you need to do is switch to the HTML view, and use 

<pre><code class="language-whatever">...</code></pre> 

tags around your code snippet. Let's modify my own Blogger template in this way. PrismJS is a modern lightweight syntax highlighter written in javascript. Follow the instructions at https://prismjs.com/ to integrate it. Easy: open the theme html, and add the following two lines between <head> and </head> :

<link href='http://prismjs.com/themes/prism.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'/>

// hello.go, jpad 2018

package main 

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, World!")
}

When you use the links to prism.js and prism.css on prismjs.com, you get the default version that only supports css, javascript and 'c-like' languages. For a version that supports other languages you have to download a specific version. I opted for additional go, python and opencl support. The prism.js and prism.css files have to be in a place where the browser can access them. Google drive is said to be such a place, but i couldn't get that to work. www.xs4all.nl/~notnot/ worked on the first try, as follows :

<link href='https://www.xs4all.nl/~notnot/prism.css' rel='stylesheet'/>
<script src='https://www.xs4all.nl/~notnot/prism.js' type='text/javascript'/>

The Ideal Blog

When there is a need to get to know a subject better, googling is usually the first step one takes. Few things can be more satisfying than finding a well-written, informal and accessible blog or tutorial amongst loads of links to dry and formal scientific or technical papers. I am visually oriented and learn best by doing, so for me personally a web page with figures and snippets of code is almost a prerequisite to wet my appetite. If the plot unfolds in several stages, by iteratively refining an idea or implementation, testing and comparing various possible approaches, i'm usually all ears. 


I wonder about the possible effects that writing a blog about something might have. It might be even more illuminating to write one than to read one? When i am developing ideas, when i am implementing, i have always kept a work log and made sketches. It is like talking to myself, in a way, establishing a feedback loop. Seeing the thoughts and ideas in front of me seems to make them clearer, more neutral and manageable. However, my log files tend to be quite chaotic, because they are written as i go along, like a diary, while i wander and wonder, fight a battle here and there, doing the occasional discovery, or stand perplexed, struggling with some unexpected issues. Such is life as i know it... I never go back to older log entries to edit or clean them up. They remain raw impressions, a fragmented timeline of notes. Very useful to search through however! The older one gets, the more likely it is that one has encountered a similar problem before, and can't recall the solution exactly, if at all. Log files to the rescue.

So the plan is to write and publish some blog posts here, and in doing so, discover how that is different from keeping a work log. Of course it is also a gesture to give something back to the community, no longer being the eternal lurker who only takes.

To be continued...