Peter Wilson

Category: Blog

  • PageSpeed scores for Apple Watch reviews

    Both the Verge and Mashable have published reviews of the Apple Watch.

    The Verge review is 8.2Mb with a tad under 500 requests; Mashable’s review is 40Mb with 700 requests. To be fair, they mitigate the effect through lazy loading. (more…)

  • CSSConf Australia ’15 – Day two summary

    The second day of CSSConf Australia ’15 took place last Friday.

    The day started with Sara encouraging developers to switch to SVG rather than unsemantic CSS hacks, and finished with a call for the open-source community to welcome designers by Una.

    Here are my notes from day two. (more…)

  • CSSConf Australia ’15 – Day one summary

    CSSConf Australia ’15 is on at the moment.

    The first day started with Matt reminding us to consider the human element of design, and finished with Ben showing how animation can be used to cheat time and add delight.

    Here are my notes from day one. (more…)

  • Web Directions Respond ’15 Summary

    I had the pleasure of speaking at Web Directions Respond yesterday. It was a great opportunity to listen to designers and developers from both Australia and internationally.

    I took notes throughout the day, some of which you will have seen if you follow me on Twitter. The full set are in bullet point form below.

    A disclaimer upfront, this is the first conference I’ve spoken at where tickets cost more than $50. Attendees invested a substantial chunk of their PD budget to be there. The quality of my notes waver as a I get various waves of nerves & adrenaline crashes. Chris Wright has published his notes too. (more…)

  • Noter Live

    Over the next couple of weeks I’m looking forward to using Noter Live to live tweet a couple of conferences.

    I’ll be running it locally while at Respond and CSSConfAU to minimise network connections over conference wifi or 4G.

    I’m using Noter Live as it will make it a cinch to convert the tweet stream to a blog post after the talk.

  • 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. (more…)

  • Getting Microformats right

    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.

  • nth-child tester

    A very nice page for testing nth-child selectors by Paul Maloney

  • Font Loading Revisited with Font Events

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

  • One click indieweb for WordPress

    I was discussing one click indieweb for WordPress with David Shanske on the IRC channel. The aim is to make it as easy as possible for a WordPress user – not a developer – to implement an indieweb site.

    I’ve decided to put it up as a brain dump.

    There are two aspects to consider: features and data attributes. (more…)