BTrem articles

Adding Microformats to SVG

Using SVG in web pages offers many advantages:

  • SVG file sizes are usually small compared to bitmapped graphics
  • it adapts well to different screen resolutions and display dimensions
  • it can be styled with CSS
  • it can be scripted
  • SVG <text> elements can be indexed by search engines

To that list, we can add one more: the ability to add microformats to embedded SVG elements.

NPR Pays Homage to Bunny Wailer, but Shortchanges His Early Career

NPR's afternoon news program All Things Considered aired a remembrance of Neville Livingston, known to reggae fans as Bunny Wailer, who passed away

Bunny was one of the founding members of The Wailers, whence came his adopted last name. He wasn't as well known as his bandmates Bob Marley and Peter Tosh, but NPR nevertheless felt he deserved recognition for his contributions to the group. Yet the piece largely passed over those contributions, making it seem like he was only a backup singer until he went solo.

That is a misconception that I'd like to correct.

“Wake the Town”

A couple of days ago, I chided NPR's “Here and Now” program for choosing a less-than-stellar record to excerpt in their U-Roy obituary. After hearing the piece, I compiled a short list of U-Roy recordings from my collection that, in my humble opionion, would have been better examples of his work. And certainly worth listening to even if you're not producing an on-air tribute to the deejay originator.

U-Roy Obituaries Fact Check

First, a note of gratitude to NPR for devoting (at least) two on-air segments and one website story to Jamaican deejay U-Roy, who passed away .

U-Roy got his start in the Kingston dancehall scene in the early 1960s. At the time, sound system deejays typically worked with just one turntable, so the music stopped whenever they changed records. To fill the gap, deejays chatted and rhymed, exhorting patrons to join the dance or telling them what record they were about to play. They began to add their patter in the middle of songs, cleverly interacting with the recording as if the singers and players were with the deejay, performing live. Then came dub music, where sound engineers created remixes with most of the vocals removed. Dub provided almost unlimited space to rhyme, or toast, over the record. It wasn't long before deejays were making their own records, commiting their witty boasts and rhymes to vinyl.

“extensionless” urls with 11ty

Lots of web software is configured to create and serve web files/pages with an .html extension/suffix. That includes 11ty, which by default creates an index.html for each content template. It includes Browsersync — the hot-reload server invoked when you run npx @11ty/eleventy --serve — which determines the Content-Type response header based on the output file's extension. And it includes Apache HTTP server, which, like Browsersync, uses the extension to map a file to a Content-Type header.

And yet, even if your software defaults to .html, it is not mandatory for the web. There is no requirement that certain characters be attached to your web page urls. In this article, I'll explain how to make clean urls with Apache, Browsersync, and 11ty.

microformats food menu idea

This is a rough sketch for a food menu microformat that I first suggested on the microformats irc channel in late . Following that suggestion, I added several ideas to a newly created wiki page devoted to menu brainstorming. I then decided to try out some of those ideas by marking up web pages with food menus, which meant I had to come with names for the root menu and its properties. The proposal in this article is a result of that effort.

clash of the id attributes in svg

CSS-Tricks has an article about duplicate titles and id attributes in svg. The article discusses the problems that might arise when an author is relying on title elements and id attributes for ARIA accessibility. But there's another, more fundamental problem if you insert svg code directly in an html document and end up with with duplicate id attributes. A problem that could bork how the browser renders the svg.

add syndication microformat with 11ty

add the microformats u-syndication property to your list of articles using 11ty and nunjucks

If you publish an article in more than place — for example on your website and on a community blog ‐ you may want to inform readers and search engines about the other copy. One way to do that is by adding a rel=syndication link element in the article's head. Another is with the u-syndication property from the microformats h-entry vocabulary.

Building off of "add syndication links with 11ty", this article shows how you can add syndication anchor links to pages and article/post lists using 11ty and nunjucks.

add syndication links with 11ty

Suppose you publish an article in more than place — for example on medium and on your own website. If you want to alert readers about the other copy, you can do so with a rel=syndication link element. Here's how you can add syndication links to your pages using 11ty and nunjucks.

11ty nunjucks front matter parsing

11ty lets web authors add a tag to a page in the front matter:

tags: cat

Or several tags:

- cat
- dog

Either way, 11ty will include that page in a collection of articles tagged 'cat'.

I wanted to be able to process my own front matter variables the same way, using either format.

microblog with eleventy

I use 11ty to publish articles like this one, but I also want to be able publish status updates, sort of like my own Twitter feed. Like a Twitter feed, I want each update to include a date and time when I wrote it. Unlike a twitter feed, I don't want each post to have a permanent url. Instead, I want to show the most recent updates on my home page, and I want to bump off the oldest status update every time I add a new one. This article explains how I did it.

svg photo

, I added a picture of me to the site:

microformats include pattern idea

The current microformats include pattern offers two methods — using <object> or <a> — to include in a microformat element parts of a document that are outside of that microformats element's DOM tree. Both patterns have problems, and have not been widely adopted. Also, the include pattern has not been updated for microformats 2.