Entries in Category Web Development

An Unordered List Styling Curiosity

Recently I completed work on a website that featured a lot of elements with lines tilted 30 degrees from the vertical. That site is Vaba Design, the new home of my professional portfolio, of which more anon. Seeking fun ways to echo that theme in as many design elements as possible, I hit upon the following method for transforming the bullets from an unordered list into 30 degree parallelograms, without using images.

ul li {
  list-style: none;
}
ul li::before {
  transform: skewX(30deg);
  content: "\25aa";
  display: inline-block;
  width: 1em;
}

The content line above inserts a Unicode character, in this case U+25AA or “Black Small Square” before the rest of the line. That gets skewed into a parallelogram with the transform declaration. Depending on other things like fonts and colors, it could look like this:

This works pretty well except if your list item overflows a single line, in which case the second line won't indent as you might want. It will start at the beginning of the bullet instead of starting where the text of the first line starts. But if that's not a problem for you, give this method a try.

Github and Grabcad

Although I'm not very active on either platform, I have accounts on both Github, for some of my more public software efforts (mostly web development experiments), and on Grabcad, for some parts I've modeled in CAD that are both non-proprietary and potentially useful to other engineers. These models are mostly commercially available products that I have to work with or design something around, and Grabcad has a more appropriate audience for that than, say, Thingiverse. Naturally Grabcad also gets bonus points for having been an Estonian startup!

So if you'd like to be fully aware of my activities on the Internet, now split over at least ten platforms including this blog, visit both sites and follow me there too. Thanks!

Upgrading to Mediatemple VE

This site, and some of my other projects as well, have been hosted for about a year now on Mediatemple's DV (Dedicated Virtual) service. My particular DV installation was somewhat custom since I had ordered it without Plesk and did all my administration tasks on the command line. Mediatemple recently informed me that this product was being end-of-life'd and so I made yet another migration, this time to their VE hosting, which seems like a better fit for my brand of linux geekery. It's quite a bit cheaper per month as well!

Regular guests, please let me know if anything's broken from the move. Thanks for your attention.

Javascript Syntax Highlighting

I occasionally post samples of source code in a handful of languages on this site; to present these in the most readable form I started looking for client-side syntax highlighting scripts, always with an eye towards matching the behavior of emacs and its major modes. I made attempts with the most popular choices in this area, but was disappointed with them for various reasons:

  • google-code-prettify did not highlight C correctly; it marked types (char, for example) as keywords sometimes, and it's not actually hosted on the google CDN, which I would think is one of the major reasons to use a google project for something like this.
  • highlight.js relies on a mysterious process of automatically "detecting" the language used in a particular code block, which failed in my test case when it mismarked C as perl. Despite that, it comes with some nice color themes and, unlike google-code-prettify, is hosted externally, although I would be more comfortable if it was hosted on a major CDN like google's.
  • SyntaxHighlighter has extensive language support and uses an autoloader to load only the scripts necessary for highlighting the languages contained in the current page, a significant point in its favor. However, the html produced by this script is heavy with non-semantic <div>'s (one for each line!) and wraps every highlighted token in its own <code> tags. I prefer client-side scripts not to throw semantics out the window when possible; one <span> with appropriate class names for each token should be sufficient.

But just as I was about to turn away from this project and put syntax highlighting on the shelf for awhile, I found another script: Rainbow, by Craig Campbell. This library makes heavy use of regular expressions, which I'm fond of, and seems to have been designed from the beginning for ease of extensibility. It's also hosted on GitHub, and I've already taken advantage of that to make some small contributions to the project. Rainbow is relatively young and doesn't support very many languages as yet, it's true, but this script is so easy to extend that I don't anticipate that will be much of a problem—I'll probably just write a new mode myself if I need one.

Embedding Videos Elastically

I've meant to make and share more videos for some time now, ever since my first smartphone brought with it a decent video camera, in fact. This has meant diving deeply into technical subjects I had previously neglected, wrestling with various open-source video editors, and, of course, updating my blog theme so that I could properly embed YouTube iframes into posts. This last turned out to be surprisingly difficult.

Archives: