Categories
Quick Notes

Twenty Seventeen Supports

The new WordPress default theme includes a block of CSS to fix layout of the headers in browsers supporting the object-fit property.

The CSS makes use of feature queries. It’s the first time a WordPress default theme has used @supports and I’m really pleased to see it.

Despite wide browser support, feature queries are rarely seen in the wild. Feature detection started as a JavaScript technique and it’s easy to ignore a method that comes along later.

I was reminded about feature queries earlier this year when I saw Jen Simmons speak. I’ll be keeping them in mind more often.

Categories
Quick Notes

Debugging

I just spent an hour or so debugging some JavaScript.

The code was simple, concatenate a string to form a selector: '#in-category-' . termId. Undefined. Always undefined.

I started dumping all sorts of things in the console to debug. termId was defined. The code was passing through conditional statements correctly.

I was just about to send the diff to my work mate Dzikri with the note “this is the general idea but I’ve made a silly mistake” when I saw it.

I was using PHP style concatenation in JavaScript.

I’ve noticed this immediately in people’s code. I’m sure you did too.

Categories
Quick Notes

Armed Guards

I’m not sure what bothers me the most. How quickly I got used to them, or their presence.

The them I am referring to are the armed guards at the Nasdaq headquarters in Times Square. They’re armed with assault riffles.

This freaked me out when I first passed the building. We have armed guards in Australia, never have I seen anything more than a revolver. On my second or third passing, it just became part of the background.

The question I’ve been asking since is: Times Square is famously crowded day and night, how does this go well? It can’t.

Categories
Talks

Respond 16: Performance – HTTP2 in a 1.5 World

As we transition from HTTP 1.1 to HTTP 2, developers need to consider how the visitor’s protocol affects the performance of our sites. Code that improves performance over one protocol, can hinder performance over the other.

HTTP2 is the first major update to the HTTP protocol in around 20 years, taking into account the way we use the web today. Even front-end developers can benefit from an understanding of the protocols.

Earlier this year I spoke about HTTP2 and performance at Web Directions Respond in both Melbourne and Sydney. If you were unable to attend, here’s the video of the Melbourne event followed by the slides.

Categories
Work

Back to the client services game

Friday, work published the post announcing I’ve joined Human Made.

In a relatively short time at the new gig, I’ve started feeling quite at home, in no small part helped by the fact I already knew the Australian humans from within the Australian WordPress community. A lot of the Human Made staff globally contribute back to the WordPress, many of them I had met through Slack channels, at WordCamps or otherwise.

Two years ago I wrote about moving from client services into product development at Exari. I’m incredibly proud of the work I did at Exari, working with the team there helped produce some of the best code I’ve written over the course of my career.

Categories
Quick Notes

Is it necessary to label the hamburger icon?

There has been some discussion as to the usability of the hamburger symbol. Jeremy Keith has a brief summary in his journal.

The question becomes, is it necessary to label the hamburger icon. I bought a new PVR recently, I think the remote control answers this question nicely.

PVR remote with all buttons labelled, including well known symbols.

Categories
General

2015 in review

2015 was a good year, a lot of things going on professionally and personally.

In crib note form, here are some of the highlights:

Categories
Code

A fitVids vanilla JavaScript do-over

FitVids.js is a jQuery plugin used to create fluid videos. It helps makes video embeds from YouTube, Vimeo and a number of other sources display nicely on responsive sites.

FitVids calculates the ratio of a video, wraps it in a div and sets the padding to enforce a ratio. A typical 4:3 YouTube embed starts as:

<iframe 
  width="420" height="315" 
  src="//www.youtube.com/embed/btPJPFnesV4" 
  frameborder="0" allowfullscreen></iframe>
Categories
Code

Five common WordPress patterns I avoid

I write quite opinionated front-end code. It’s one of the advantages of working in the industry for around twenty years, I know what does and doesn’t work. Working in a rapidly developing industry long term has taught me to be open-minded too, to listen to new ideas and to be prepared to adapt them. I’ve learnt the only constant is change.

That said, despite my opinions I dislike declaring something an anti-pattern or is considered harmful. If there was one function in WordPress I could rename, it would be doing_it_wrong.

The five common WordPress patterns that follow are five patterns I avoid when developing themes and plugins. Below I explain why I avoid them, I’d love to know which of these ideas work for others.

Categories
Talks

WordPress Melbourne: Contributing code to core

Last night I spoke at WordPress Melbourne about contributing code to the WordPress core. The slide deck is below.