Author Archives: Robin Osborne

London Web Performance Group meetup

London Web Performance Group Meetup

I’ll be speaking with my cohort, Dean Hume, at the next London Web Performance meetup on Oct 14th at the Financial Times offices!

We’re presenting an extended (director’s cut?) version of our Velocity NY 2014 session, The Good, the Bad, and the Ugly of the HTTP Archive where we investigate a selection of websites exposed by the HTTP Archive as well as talk about how to use Google’s Big Query and dig into some awesome example queries to explore what’s happening in the interwebs.

The LWPG is where you can “meet with other web site system administrators, developers, designers and business people who’re interested in making their sites work fast to get better user experience, lower abandonment rates and make more money.

If you’ve read Steve Souder’s books and you use ySlow & PageSpeed and you want learn more or share your knowledge please please sign up!”

Go on – you know you want to!

XML RPC Vulnerability

Looks like this poor little blog was victim of a recent spate of WordPress hack attacks, using the xmlrpc.php file (used for implementing access to the wordpress functionality from remote clients). My Apache logs are freakin stuffed with tens of thousands of POSTs to this url, which apparently can cause the server to bork.

.htaccess updated to block it, plus the feature is now disabled. And WordPress updated. Let’s see how we go now..

My face is in a video! Velocity Conference Interview

As part of my appearance at this year’s Velocity Conference NYC, I have been interviewed for the O’Reilly youtube channel and also the podcast.

In it I’m covering the contents of the upcoming talk that I’m doing with Dean, such as the HTTP Archive and Google’s Big Query and how people should approach these in order to get the most out of it.

I also mention some of the common pitfalls that poorly performing sites are doing, as well as what the good and the great are doing – some of their sneaky tricks.

If you’re attending Velocity Conf in NYC right now, then why not have a little look and get a sneak peak before attending the full session on Wednesday at 5pm

nuget: cannot prompt for input in non-interactive mode

If you’ve ever seen this annoying error in your various build server logs, or even when running msbuild locally from the command line, you’re probably getting annoyed.

There are a few solutions (such as including the user credentials in plain text in a config file – eep!) but this is one which I’ve used when I really get stuck.

Ensure you’re logged in as the user which will be running the builds (if not yourself), and update the nuget source reference (which will be in a user-specific appdata config file) with the password:

nuget sources update -Name <whatever you called it> -source http://your.nuget.repo/authed/feed/ -User <your username> -pass <your pwd>

This will save an encrypted password in a user-specific config file on that computer, and should mean you don’t get prompted for that source anymore.

Several more options are detailed over here: http://www.xavierdecoster.com/nuget-package-restore-from-a-secured-feed

Android browsers, keyboards, and media queries

If you have a site that is intended to be mobile friendly, is reasonably responsive (in a media-query-stylee) and has user input areas, you may find this issue on Android due to how the keyboard interacts with the screen:

Nice text input area

portrait_text_entry

Oh noes! Screen gone wrong!

confused_orientation_text_entry

It turns out that on Android devices the keyboard doesn’t overlay the screen, but actually resizes the screen; this can cause your media queries to kick in, especially if you use “orientation”:

[css]
(orientation : landscape)
[/css]

[css]
(orientation : portrait)
[/css]

To fix this, try changing your orientation checks to aspect ratio checks instead:

swap
[css](orientation : landscape)[/css]
for
[css] (min-aspect-ratio: 13/9) [/css]

and
[css](orientation : portrait)[/css]
for
[css](max-aspect-ratio: 13/9)[/css]

Ahhh – success!

corrected_text_entry

Reference http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

What I’m looking forwards to at VelocityConf NYC 2014

There’s a good mixture of Performance and Mobile sessions in my list, and a couple of Operations and Culture ones too. However, there are so many conflicting sessions that are awesome, so please let me know your thoughts to help me decide!

Day One

I saw Tammy Everts‘ vconf session last year, Understanding the neurological impact of poor performance, which was fascinating. Her tweets are great resources for web performance.

As such, I’ll start the conference with Everything You Wanted to Know About Web Performance (But Were Afraid to Ask)

Then I’ve got to decide between Colin Bendell’s (Akamai) Responsive & Fast: Iterating Live on Modern RWD Sites and Patrick Meenan’s (Google) Deploying and Using WebPagetest Private Instances

Unfortunately, then my ability to make a decision completely fails! I can’t decide between these three:

Finding Signal in the Monitoring Noise with Flapjack, RUM: Getting Beyond Page Level Metrics, and an Etsy-powered mobile session – Building a Device Lab. Help!

I’m planning to finish day 1 with W3C Web Performance APIs in Practice

Day Two

Following the ever-impressive opening sessions, I’ll head over to see a Twitter session: Mitigating User Experience from ‘Breaking Bad’: The Twitter Approach, then it’s decision time again: either The Surprising Path to a Faster NYTimes.com or A Practical Guide to Systems Testing.

Following that, how could I miss Yoav Weiss talking about how Responsive Images are Coming to a Browser Near You?!

Then I’m deciding between another Etsy session – It’s 3AM, Do You Know Why You Got Paged? – and another Tammy Everts (and Kent Alstad, also of Radware) session – Progressive Image Rendering: Good or Evil?.

I’ll finish the day with another session from Yoav – Who’s Afraid of the Big Bad Preloader? – and Etsy’s Journey to Building a Continuous Integration Infrastructure for Mobile Apps, probably.

Day Three

After some more kickass sessions opening the day, I’ll head over to see Signal Through the Noise: Best Practices for Alerting from David Josephsen (Librato).

After that will be Handling The Rush, then another descision between How The Huffington Post Stays Just Fast Enough and Creating a Culture of Quality: How to Sell Web Performance to Your Organization

During the break there will be a couple of jokers talking about the Http Archive, Big Query, and Performance using .Net and Azure! I’ll not miss that for the world! They’re amazing! And ridiculously handsome. kof
Office Hour with Dean Hume (hirespace.com) and Robin Osborne (Mailcloud)

The afternoon will be made up of Test Driven Mobile Development with Appium, Just Like Selenium, Making HTTP/2 Operable and Performant, AND THE AMAZING LOOKING HTTPARCHIVE+BIGQUERY SESSION The Good, the Bad, and the Ugly of the HTTP Archive (which is going to be AMAZINGLY EPIC)

DONE!

Then beers, chatting with other like-minded nerds, and a spare day to wander around NYC before an overnight (I believe the term is “red eye”) return flight.

My schedule

You can check my full schedule here, should you want to be creepy and stalk me.

Mobile website input box outlines: DESTROY!

Something that took me a while to figure out:

chrome_input_focus_border

The orange border around this input box only appears on focus, on mobile devices. It took a while longer to notice that it’s only on mobile Chrome too.

I understand that it’s a valuable inclusion for small screens where you’d like to know where your cursor or other input is actually being passed to, but if you wanted something other than the orange border, or to remove it entirely, trawling through your css for any reference to “border” or orange-y hex values can be a pain.

All you need to do is – for the element in question:

[css]
:focus {outline:none;}
[/css]

Annnnnd relax.

HTML5 input type “email” validation

The HTML5 “email” input type is great for short-cutting the usual email validation javascript mess. Just by defining your input box as “type=’email'” you get validation for free (in modern browsers).

html5_email_type_validation

But how do you hook into this? Perhaps change the message or do some other actions at the same time? Check out the “invalid” event:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
// do stuff
});

[/javascript]

Or if you’re old school

[javascript]
document.getElementById(’email-input’).addEventListener(‘invalid’, function(e){
// do stuff
});
[/javascript]

This returns a ValidtyState object on which you have the following properties:

  • badInput
  • customError
  • patternMismatch
  • rangeOverflow
  • rangeUnderflow
  • stepMismatch
  • tooLong
  • typeMismatch
  • valid
  • valueMissing

So you can work with it like so:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
if (e.target.validity.typeMismatch) {
alert("enter a valid email address!");
}
});
[/javascript]

Or you could even override the default message that appears in the tooltip:

[javascript]
$("#email-input").on(‘invalid’, function (e) {
if (e.target.validity.typeMismatch) {
e.target.setCustomValidity("enter a valid email address!");
}
});
[/javascript]

Clever stuff, eh?

I’ll be speaking at Velocity Conference New York 2014!


Velocity New York 2014

For the second year running I’ve been invited to speak at the fantastic web performance, optimisation, dev ops, web ops, and culture conference VelocityConf; in fact, it has become the essential training event and source of information for web professionals over the years it has been running.

Last year was the Europe leg of the conference, in London. This year I’ll be jetting off (via the cheapest possible flights known to google..) to New York City!

The Good, the Bad, and the Ugly of the HTTP Archive

I’ll be speaking once again with Dean Hume (who has literally written the book on website performancee) about The Good, The Bad, and the Ugly of the HTTP Archive; we’ll be talking about technologies like the HTTP Archive and Google’s Big Query, but mainly about the secrets learned from some of the great sites and their dev teams, as well as some of the traps from some of the not so great sites. In most cases we’ll look at one small change which could help those no so great sites become a bit more great!

Where? When?

  • 09/17/2014 5:00pm
  • Room: Sutton South

Come and see us!

Venue

New York Hilton Midtown
1335 Avenue of the Americas
New York, NY 10019
map

Office hours

Dean and I will also be hosting an Office Hours session where you’re invited to come and say hello, and talk to us about your Windows, .Net, Azure, EC2, web performance concerns or ideas; we’d love to have the opportunity to meet and speak with you, so please come and say hi!

Where? When?

  • 09/17/2014 2:45pm
  • Table 1 (Sponsor Pavilion)

DISCOUNTS!

There’s never been a better year to attend Velocity Conference; the line up is amazing, the contents are incredible, and the opportunity to talk with experts and passionate developers is priceless.

If you’re not sure how to convince your manager to send you – try the official Convince your Manager steps!

Once you’ve sorted that out, register and use the code given to you by your speaker friend (me!), for a whopping 20% discount: SPKRFRIEND.

You want more?


Velocity New York 2014