Skip to content

Christopher James Willcock

Enjoy Kaizen

Articles

traditional long form content: a post with an explicit title and body

mf2bench – Parse all the things (with all the parsers)

My Microformats2 parser passed all the tests a short while ago. After that milestone, I was wondering if it’s fast. That needs some context because fast compared to what? All the other Microformats2 parsers. Have they been measured? The answer to that one is: not before now as far as I can tell.

I took a little time to make mf2bench, a benchmarking tool that compares the performance of all (is it all?) the Microformats2 parsers out there. My work on the php-extension, mf2, came in second place in terms of speed, behind the Microformats2-parser for Go. I’m pretty happy with this, because I have been concentrated on coding to pass tests, to demonstrate that the parser meets the living specifications at microformats.org. Making it run fast, or as fast as is fun to make it, is still a little bit away.

I’ll next get mf2bench to provide some measure of what the parse from each parser is for the various samples. That will be neat.

 

========== UPDATE ==========

The above screenshot uses the default of three (3) parses per parser. It was captured for the sake of taking a picture, rather than of comparison between parsers, etc. Here is the same thing, with one hundred (100) parses per parser.

Versions of each parser tested:

Parser Version
ruby/microformats-ruby 4.1.0
python/mf2py 1.1.2
php/php-mf2 0.4.6
php/php-mf2 (w/ Masterminds\HTML5) 0.4.6 (2.5.0)
php-ext/mf2 unreleased
node/microformats-parser 2.0.1
go/microformats 0.1.26
perl/microformats2 0.5
elixir/microformats2 0.2.1
haskell/microformats2-parser 1.0.1.9

Quick Fix for Indentation Inconsistency in CSS, Using Chrome Web Browser DevTools

Does your CSS look like this?

@media only screen and (max-width: 720px) {
.planning .grid-wrapper{
  grid-template-columns: 10px 300px 10px;
    justify-content: center;
}
.planning .tuesday {
grid-column: 2;
grid-row: 1;
background-color: #eee;
    border: 5px solid #555;
padding: 70px;

}

Did you notice the media query is still open here? This can lead directly to the swamp of desperation, is time-consuming and ever more disheartening as the number of lines adds up and the mental effort to unwind it becomes greater and greater. More CSS, more problems.

Not to worry! There is a super-simple way to fix this up quickly.

  1. Pre-requisite: using Chrome web browser
  2. Right click anywhere on your website.
  3. Choose ‘inspect’ from the context menu.
  4. In DevTools, select the Sources tab.
  5. On the navigation pane, browse to your CSS source file and click to select.
  6. In the reading pane in the center, look for an icon: {} in the bottom left, just under the line numbers. Click it.

Boom! Your CSS source code has been auto-formatted with proper indentation.

  1. Select all the text of the shiny CSS here in the reading pane (Windows users: CTRL+A).
  2. Copy and paste this into your CSS source file.

With this little process, you can hopefully reduce the number of occasions that CSS causes you grief and stay on top of it!

Gallery Test

Pancakes!

Time to make a new theme for cjwillcock.ca.

I forked my Psymantic theme and made a new theme, Pancakes. I’ll install it here, then make it less ugly. It’s going to break things, but not for long I expect.

Pancakes is also free software, because software wants to be free! Enjoy.

Lastly, a screenshot of what once was, for posterity. Shout out and kudos to David Shanske, the provider of the twentysixteen-indieweb theme I have used until now.

Via Lactea

Like the Milky Way .. sort of?

Meri

Sometimes it gets away from you a little bit, and you need to bring it back. But give it a good chunk of time before you CTRL+Z. You never know where you get to.

 

Super large, finished-for-now: meri.jpg

What Whale?

I like how the digitization and colouring has captured the physicality of the ink on the paper. See how it’s been over-inked?

Full-size sort of thing here: christopherjwillcock-whatwhale.jpg

Tab Quantizer Chrome Extension Beta

I authored and personally use this Tab Quantizer Chrome extension & companion server script, to record my browsing history from Chrome onto my own server. I publish some of the information I gather with this, to my Now page (near the bottom).

  • Keeps a running tab of active Chrome browser tabs across multiple devices and multiple windows.
  • Records a complete history of pageviews with time and URL
  • Records ‘walks’ – the series of pages viewed in a given tab, from the time it first opens, through each pageview until it closes

To make this work you need your own server for the script that records the data. Given that this extension is not coming from the built-in Play store (or whatever it is for Chrome) you’ll need to enable developer mode and load the unpacked extension manually. A consequence of this is after each Chrome update, the extension needs to be manually enabled.

I have been thinking of publishing this to the Play store (or whatever it is for Chrome). I haven’t done that before, so I have much to learn there.

I think all the bugs have been worked out. It works for me. This is my first Chrome extension work. It was made fast and cheap, so there is plenty of room for improvement as far as the code and user-experience goes.

Also there is no documentation whatsoever about using the collected data for some purpose. For now that remains an exercise for the reader.

Enjoy the Beta. Discussion in #indieweb-dev on irc.freenode.net.

an abstract expression in sepia on white

Psymantic – Open Source Theme Precursor for WordPress – First Release

I authored a WordPress theme for my blog. It’s not in use here because it isn’t meant for direct use. It’s over on my wp-theme-dev sub-domain with the WordPress theme test data in there (plus some random junk).

Wait – that looks gross!

— basically everyone

Weird huh? The precursor theme, Psymantic, is concentrated on producing plain old semantic HTML, POSH, and nothing else.

a screen-capture of a brutally simple WordPress blog
It’s brutally simple. Almost no styling at all. WP required stuff and a couple of clearing fixes.

I’m working through a resilient web design approach with this new-theme-for-me. Note the screen-reader-text, which is typically hidden, is used for headings of various sections. Many sections don’t need need a label like that, unless you consider, for example, how you interpret this web page with your eyes closed for the entire duration of your visit. These headings are normally presented only to those who use assistive technologies  while browsing the web. I can hide them all in one shot with the WordPress recommended screen-reader-text CSS rules.

It’s going to be difficult to understand why I have something worth sharing here, if you aren’t directly involved with your own website coding, nor in the business of online publishing in a technical role.

If we were making pancakes instead of WordPress themes, Psymantic would be a box of pancake mix. I still need to make the pancakes to actually eat them (ie: need to mix and cook a theme for my blog). I have a few more goals to cover before I get there, but this is a nice start.

More things to include (maybe in μF Psymantic and Indie Psymantic):

Early testers and constructive dialog/criticism is welcome! Please use GitHub for issues, #indieweb-wordpress on irc.freenode.net for chat.

HTML5 Support in WordPress

WordPress has a feature to enable HTML5 support which doesn’t cover all the places where HTML5 support is needed.

add_theme_support('html5', array(
  'search-form',
  'comment-form',
  'comment-list',
  'gallery',
  'caption',
));

This is everything available ^^^. When adding inline styles to the HTML, which WordPress does automatically, there is no filter hook available to remove the type attribute from the style tags. We end up with this incorrect output:

<style type="text/css">…</style>

Allowing this to stay there won’t break anything, it’s very insignificant overall. However, my practice includes the method of no broken windows. Allowing this to stay, though it’s really out of my hands unless I abandon WordPress entirely, is anathema to me.

It’s important to experience the pain of a program done wrong, before we can appreciate the well-made version of the same. There isn’t time to fix everything and still get the job done. Eventually it’s time to directly address the cause, but not today.