Code Archives - Page 2 of 6

Com.Google

I made a dumb bookmarklet on April 1 and forgot to publish it.

Better late than never, he lied.

Intuition is ?

Complaining about WordPress 4.2’s inline Emoji script is to complain about the biggest front end performance gain of the feature.

You see, that tiny script does two things:

check if your visitors browser supports Emoji, and,
asynchronously load the JavaScript to polyfill Emoji if the visitor’s browser requires it.

Body Class Control in WordPress

I like a much reduced set of body classes when coding up a WordPress theme. Two template types, two main classes.

Oh, and I put it on the HTML element too. To call my coding opinionated is somewhat of an understatement.

As I work on patterns for my site redesign, I generated two templates without consideration for microformats. The two templates I created were for a WordPress archive template and an article/page template.

Microformats add structured data to a web site. Using microformats allow machines reading a site to know find information such as the:

page title,
content,
author,
date of publication, and,
post categories and tags.

Working out the basic HTML before adding structured markup is the right thing to do. It ensures content is the focus of your basic HTML structure. If at all possible, this is the ideal structure for your web page.

Adding the structured markup

When it came time to add the structured data to my page, I added both microformats2 and microformats1.

Big Search (Google, Bing, etc) use version one of microformats when reading structured data for your site, so I consider it must have.

Webmentions use microformats2 to determine the type of mention sent, the title of the post sending it, and a bunch of other stuff. I accept webmentions, so this becomes a must have.

I’d added structured data to the page, posts, comments, comment authors, and taxonomy data and was happy with the way things were looking good. Aaron Parecki’s mf2 parser was showing decent results.

Google’s structured data testing tool on the other hand, was less than optimal. Google was crediting my posts to my first commenter.

As a single author blog, I hadn’t included any author information. The author is inferred, an inference that needs to be reflected in the structured data.

Credit where credit’s due

To get Google’s structured data reader to parse the author data correctly, I had to add an h-card as a child of the post’s h-entry.

Within the meta information, I added to following markup:

<span style="util-Display-None" aria-hidden="true">
  <span class="EntryMeta_Detail vcard h-card">
    <a href="#" class="fn url u-url p-name">Peter Wilson</a>
  </span>
</span>

I hide the content, both visually and from screen readers as the data serves no purpose for visitors to the site.

My initial attempt to mark up the logo with an h-card failed, as it sits outside the post, so Google parsed it a separate structured markup, unrelated to the post’s h-entry.

Font Loading Revisited with Font Events

The Filament Group continues to do great work: Font Loading Revisited with Font Events

Media queries and calc

calc isn’t a new feature, but at the time of writing MDN describes it as experimental:

this technology’s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers

– MDN

According to caniuse.com, it’s a little safer than MDN suggests.

IE friendly console.log

Internet Explorer makes me sad every time I open it to cross-browser test during development and it crashes on console.log. A simple check OR define option can kill console in the IE developer toolbar, so I decided to write a more robust cross-browser compatible console.log.

Vendor prefixes, polyfills and former clients

Jeremy Keith’s recent post Polyfills and products asked an interesting question about handing polyfilled code to clients:

[Short term client projects] makes it very tricky to include a polyfill in our deliverables. We’d need to figure out a way of also including a timeline for revisiting that polyfill and evaluating when it’s time to drop it.

Sass Media Query Mixins

There are a few Sass media query mixins going around for dealing with old versions of IE. Often they include predefined break points, whereas I like the simplicity of passing a numeric value.

Capable browsers wrap the content in a media query, incapable browsers get the unwrapped content.

Open site redesign using a pattern library

As I’ve mentioned previously, I’m in the process of redesigning this web site. It’s very much a work in progress.

Pattern Library

As a first step I’m building a pattern library and I’ve decided to open source the repo during the build process. I’m using Pattern Lab for the purpose.

Category: Code