Yesterday, I opened up perfwork.com—a job board targeted at web performance enthusiasts—to the public. I get a fair amount of folks asking me if I know of any companies hiring for roles that involve web performance work. I also get a fair amount of companies who contact me asking me if I know of anyone they can bring on board for roles that require some level of performance knowledge.So, I figured, why not make it a bit easier for those companies and people to connect.In the spirit of “what is the least bit you can do to validate there’s a need” (while also holding myself accountable), I shared on LinkedIn in April that I was going to build it, and then launched a one-page form for folks to sign up with early interest.I wasn’t expecting a ton of attention it yet, but that one share turned into ~600 early-bird signups and a lot more initial (self-inflicted) pressure than I had anticipated!On the one hand, launching a job board focused on a niche like performance at a time when the headl

There’s a single panel comic, made in 2016, that tends to resurface every once in a while. The comic shows an iPhone that is overloaded with ridiculous features: a flip-out keyboard, extendable radio antenna, handstrap, AA battery compartment, kickstand and more. The title of the strip is simply “If Apple was a democracy…”. I saw it again the other day as someone shared it, with a cautionary reminder that decisions about technological products cannot be a democracy. The image is comical, and I think all of us can think of products that have gone a little too far in this direction.But the thing that bothers me each time I see the comic is that it pushes the problematic “single visionary” narrative.At best, it’s a dangerous and risky mindset. At worst, it can be quite toxic.The genius mythWe have a tendency to want to look for the single genius—the one individual who is a visionary, who knows what users need better than they do themselves, who knows what a product should or shouldn’t do.

I’m helping out a client who has really solid Core Web Vitals.Their Time to First Byte, First Contentful Paint and Largest Contentful Paint are all overwhelmingly in the green. Their Cumulative Layout Shift and Interaction to Next Paint have a little room for improvement, but even those are really solid. All the usual suspects look great.Looking at the metrics alone, you would think their performance was rock-solid and there wasn’t much to do. But in reality, they get frequent user complaints about it.When we rolled up our sleeves and dug into those complaints a bit, a theme emerged.These pages have a lot of content. As you scroll down into the page, that content often contains images and other forms of media and those are very large and unoptimized, resulting in them loading very slowly. (There’s a little more involved, but that’s the basic gist.)Last week, at Smashing Conference, Carie Fisher gave a wonderful talk about accessibility. There was one phrase I that she repeated a few ti

You may know, if you’ve been following along, that Chrome shipped some changes to how they define “contentful” for Largest Contentful Paint—they now look at the level of entropy for an image (measured in bits per pixel) to see if it’s above a certain threshold.What you might not realize, is that the same logic doesn’t apply yet to First Contentful Paint.I put together a super simple demo based on a real-world approach to lazy-loading images, but with a couple small changes to make it easier to see what’s happening.The page first loads a placeholder image—in the real-world, I’ve usually seen this as plain white, but to make it more obvious, it’s an unmissable bright pink. Then the actual image is loaded to replace it (I added a 1 second delay to make it more obvious).In this test result, the First Contentful Paint (FCP) fires at 99ms, and the Largest Contentful Paint (LCP) fires at 1.2s. In Chrome DevTools, we can see the FCP metric (triggered by the placeholder image) firing much earli

There was a comment on Twitter today from Rafael Gonzaga expressing disappointment in what he sees as a tendency to focus on the frontend solely in performance discussions, while neglecting the server-side aspect.In the discussion that followed, the Golden Rule of Performance (popularized by Steve Souders) was brought up:80-90% of the end-user response time is spent on the frontend.In the thread, Steve Souders suggested that someone should revisit the Golden Rule to see if it still holds for today.I was curious, so I figured I would oblige.Revisiting the golden ruleWay back in 2006, Tenni Theurer first wrote about the 80 / 20 rule as it applied web performance. The Yahoo! team did some digging on 8 popular sites (remember MySpace?) to see what percentage of the time it took for a page to load was comprised of backend work (Time to First Byte) versus frontend work (pretty much everything else).What they found was that the vast majority of the time was spent on the frontend for all 8 sit

After 2.5 incredible years of working on WebPageTest (I’ll reflect on that properly in a couple of days), I’m excited to return to web performance consulting starting next week (April 10th).There have been a ton of interesting changes in the performance industry the past few years—new metrics, new challenges, new opportunities. It’s been fun to work on them from a tooling perspective, and I’m eager to start helping folks make sense of them.I enjoy working with organizations who want to not just make their sites faster, but who want to build up the internal culture, knowledge, tooling and processes that will help them stay that way. Regressing on performance is a situation that many companies are all too familar with. Combatting that regression requires a more holistic look at the culture of performance in an organization—the processes, the tools, the knowledge and more.I recently heard from a past client who told me that the work I did with them a few years back “…literally changed the

There are increasingly loud rumblings that Apple will be allowing other browser engines to be used on iOS, and all I can say is it’s about time.It’s not always obvious to folks, but the versions of Chrome or Firefox or any other browser you can download on iOS today still uses WebKit, Safari’s underlying engine, under the hood. So you’re not actually getting browser choice at all. It’s more than a little surprising they’ve been able to make that a requirement as long as they have.Opening it up so that you can use actual Firefox or actual Chrome or actual Edge? That’s a huge win for browser diversity and the web at large.I’ve seen a few arguments that this potentially only further cements Chrome’s position as the dominant browser engine, but I think that’s only true if Apple decides to let it happen.Apple’s got some supremely talented folks working on Safari and WebKit—talent has never been the problem. The problem is prioritization and resources. Safari/WebKit are understaffed in compa

One of the first jobs I had gave me the opportunity to work with James King, and one of the great habits I picked up from him was making sure to set aside time to learn from others. He would set aside an hour or so a day, sometimes less, sometimes more, to read through the RSS feeds he had subscribed to in Google Reader (RIP), and he encouraged me to always do the same.So I would. I would grab a coffee, sit down, and start reading. Often we’d share posts back and forth, or chat about some of the more interesting ones we had read. It was something we did that was never on accident…it was intentional, deliberate. It was a way, I think, of investing in ourselves while also acknowledging how much we still could learn from others.Nowadays, of course, a few things have changed.Obviously, I’m no longer using Google Reader—I’m a big fan of Feedbin and the annual payment I make is perhaps the easiest payment to justify all year.I don’t subscribe to as many tech news outlets as I used to. In fac

I was helping someone recently who had an issue where their Largest Contentful Paint oscillated between very different results. Most of the time, it was ~6 seconds, but every once in a while (maybe 2 out of 9 tests or so), it would be 11 seconds or more.Their initial reaction was to get frustrated at the measurement process and tool in question—why was it messing up so frequently?But in reality, when we looked closer, what we found was that they were doing some server pre-rendering and then reloading a bunch of content using client-side JavaScript.Turns out, they had a race conditionIf a certain chunk of CSS was applied before a particular JavaScript resource arrived, then for a brief moment, their hero element was larger, causing their Largest Contentful Paint to fire much earlier. When things loaded as they intended, the hero element was a bit smaller and the Largest Contentful Paint didn’t fire until a later image was loaded.The tests weren’t flawed—they were exposing a very real is

At #SmashingConf San Francisco, Robin Marx gave a presentation about HTTP/3. Here are my notes.HTTP/3 work started in 2012 with Google working on QUIC, adopted by IETF in 2017, RFC’s published in June 2022All major browsers support thanks to iOS starting with version 16What and Why?HTTP/3 builds on top of UDP, not TCPUDP often blocked as it is frequently used in attacksThe TLS + QUIC layer makes UDP safer to use, but a lot of networks will likely still block for awhileHTTP/3 brings faster connection setup, better header compression, stream prioritization, packet loss handlnig, tunable congestion control, connection migrationEstablishing a connection in HTTP/2 requires 3 RTT (round-trip times)Establishing a connection in HTTP/3 only requires 2 RTTHTTP/3 introduces 0 RTT mode which can reduce the total round trip to 1In general, HTTP/3 is 1 to 2 RTTs faster than HTTP/2Adapting pages to HTTP/3Fewer domains: consolidate on 1-3 conenctionsLess bundling: 10-40 files is sufficientHelp the bro

One thing that jumped out while working on the JavaScript chapter of the Web Almanac was the incredibly high amount of time spent processing JavaScript on the median mobile page where Ember.js was detected. (The story was the same when I wrote The Cost of JS Frameworks.)What we found was that the median site using Ember.js spent 21.9s dealing with JavaScript when loaded on an emulated mobile device. That’s a whopping 14.4s longer than the next closest detected library or framework.It would be one thing to see a number like that late in the long-tail; if, for example, we saw that at the 99th percentile it would represent an anomaly where something probably went very wrong. But to see it at the median is really startling.I wanted to follow-up, to satisfy my own curiosity, but honestly forgot about it during all the holiday season shuffling until someone asked about it on Twitter.So, let’s dig in and see what the heck is going on.First things first, I ran a query against BigQuery to retur

Client-side A/B testing has been a performance loving developer’s worst friend for years.The way it works is you load in some JavaScript (typically from a third-party domain), and that JavaScript runs, applying the experiments you’re running for any given situation. Since those experiments usually involve changing the display of the page in some way, these scripts are typically either loaded as blocking JavaScript (meaning nothing happens until the JavaScript arrives and gets executed) or they’re loaded asynchronously. If they are loaded asynchronously, they’re usually with some sort of anti-flicker functionality (hiding the page until the experiments run by setting the opacity to 0, for example).With either approach, you’re putting a pause button in the middle of your page load process. They can wreak havoc on a site’s performance.People use them, though, partly because of convenience and partly because of cost.From a convenience perspective, running client-side tests is significantly

My site (and several other side projects) is hosted on Netlify, so I had been eagerly awaiting access to Netlify Edge. I’ve been pretty vocal about my excitement for edge computing solutions, and having access to one right within Netlify would be very handy. One of the first things I planned to do once I had access was switch my images to be housed on Cloudinary, and then use Netlify Edge to proxy the requests through my own domain.I hand-optimize my images (ok fine my computer does it but whatever) before I add them to my site, so they’re usually pretty small already, but there are limitations to how far I can take it myself without making things incredibly complex. I can try to automate things like generating the right sizes, creating several formats, serving those formats up to different browsers, as well as the actual optimization itself. That’s all fine, but that’s a lot to manage.Cloudinary can handle that for me. Their service is capable of automatically compressing images to th

When I first stumbled on the idea of skeleton screens, thanks to Luke Wroblewski talking about them back in 2013, I latched onto them pretty quickly. I have never been a fan of progress bars and spinners, and skeleton screens seemed like a smart step in the right direction.For those unfamiliar, a skeleton screen is a method of displaying the outline (skeleton) of the content to come, typically using gray boxes and lines instead of a progress bar while content is loading. It’s a pretty creative approach to handling wait—undoubtedly more creative and helpful than a perpetually spinning circle.But even good ideas can become bad ones if we stray too much from the original intent.The other day on Twitter, Jeremy Wagner lamented the use of skeleton screens:Am I the only person who thinks skeleton UIs are incredibly bad UX? “Here comes some client-rendered content—oops, wait you get rectangles for now!”It got me thinking about how we’ve taken a carefully applied optimization and started apply

I was analyzing a sites’ performance and I stumbled upon a particularly nefarious third-party widget.I ran a profile on my MacBook Pro (a maxed out 2018 model) in Chrome Developer Tools to see how much work it was doing on the main thread.It wasn’t pretty.It turns out, the widget triggers four long running tasks, one right after the other. The first task came in 887ms, followed by a 1.34s task, followed by another 92ms and, finally, a 151 ms task. That’s around 2.5 seconds where the main thread of the browser is so occupied with trying to get this widget up and running that it has no breathing room for anything else: painting, handling user interaction, etc.2.5 seconds of consecutive long tasks is bad by any measure, but especially on such a high end desktop machine. If a souped up laptop is struggling with this code, how much worse is the experience on something with less power?I decided to find out, so I fired up my Alcatel 1x. It’s one of my favorite Android testing devices—it’s a g

A while back, I wrote about using Netlify and SpeedCurve to A/B test performance changes. The one I specifically mentioned was testing out Instant.Page on my site.While the bulk of the post is about the A/B testing setup (which I am very happy with), I did note at the end that I was seeing some small improvements from Instant.Page, though the results were far from conclusive yet.Alexandre, the creator of Instant.Page, suggested on Twitter that the gains I was seeing were small because Netlify passes an Age header that messes with prefetching.Tim, Netlify sends a Age header that conflicts with prefetching. A prefetched page will get fetched again on navigation if its Age header is over 300. The small gain you are seeing are due to the navigation request being a 304 and not a 200.This lead down an interesting little rabbit hole and, eventually, a bug. I learned a few new things as I dug in, so I figured it was worth sharing for others as well (and for me to come back to when I inevitably

This post ended up leading to the discovery of a bug in the way Chrome handles prefetched resources. I’ve written a follow-up post about it, and how it impacted the results of this test.instant.page a proper try out on my site for a while now. It’s a pretty clever approach. The script watches for when someone hovers over a link and then, when they do, uses the prefetch resource hint to get started fetching that page before the click event even occurs. I like the idea, in theory, quite a bit. I also like the implementation. The script is tiny (1.1kb with Brotli) and not overly aggressive by default—you can tell it to prefetch all visible links in the viewport, but that’s not the default behavior.I wanted to know the actual impact, though. How well would the approach work when put out there in the real-world?It was a great excuse for running a split test. By serving one version of the site with instant.page in place to some traffic, and a site without it to another, I could compare the p

There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript.The thing about JavaScript is you end up paying a performance tax no less than four times:The cost of downloading the file on the networkThe cost of parsing and compiling the uncompressed file once downloadedThe cost of executing the JavaScriptThe memory costThe combination is very expensive.And we are shipping an increasingly high amount. We’re making the core functionality of our sites increasingly dependant on JavaScript as organizations move towards sites driven by frameworks like React, Vue.js, and friends.I see a lot of very heavy sites using them, but then, my perspective is very biased as the companies that I work with work with me precisely because they are facing performance challenges. I was curious just how common the situation is and just how much of a penalty we’re paying when we make these frameworks the default starting point.Thanks to HTTP Archive, we can figure that out.The dat

The other day I tweeted about how much I love snippets in developer tools. If you’re not familiar, snippets allow you to save little bits of code that you can then quickly run in the console.In Chrome, for example, once a snippet is saved, you can quickly execute it within developer tools by hitting Command + P (Control + P on Windows). This brings up a list of all the sources (files requested by the page). If you then type the exclamation mark (!), it will only show you the snippets you have saved. Hitting Command + P followed by ! brings up a list of any custom snippets you’ve defined in Chrome Developer Tools.From there, it’s a matter of selecting the one you want and pressing Enter. That will open up the console and execute the snippet.I use this for quite a few tasks, but the example I tweeted was a little snippet that grabs all the script elements on a page and then outputs their src, async and defer values to the console using console.table. It’s a pretty handy way to quickly ze

I’m always happy when tooling catches up to the problems we have to solve. Sure, you can figure things out through trial and error (and to be honest, a lot of debugging is still very much that, and I don’t think that’s likely to change), but quality tools can help eliminate the guesswork and provide a shortcut of sorts.Here’s an example.A couple of months ago, I was helping one company boost its performance online. We addressed plenty of front-end optimizations, but one of the most troubling issues was their Time to First Byte (TTFB).The cache hit was very low (a topic for another day), and whenever the server had to provide a fresh version of the page, it was taking an unacceptably long time more often than not. This particular company was using Shopify, so it wasn’t a matter of tuning servers or CDN settings somewhere but figuring out what was taking so long for Shopify to render the Liquid templates necessary to serve the page.Interestingly, the synthetic data was pretty much smooth

I recently wrote about how important it is to make the right thing easy. The opposite is also true: it’s important to make the wrong things difficult. I did allude to it in that post a little bit, but I thought it was worth calling out explicitly. It’s important to introduce some friction in our workflow to help prevent the wrong actions.Continuing on the health-related analogies, friction is a big part of how I manage my sweet tooth. I work by myself in a small office. Nothing is preventing me from constantly snacking on a bunch of sweets, and wow would I ever love to. I’m a sucker for just about anything with sugar.But I discovered something else about myself: I’m also kinda lazy. So I take a two-part approach. The first is to make the right thing easy. I have apples, oranges, almonds, dried cranberries, and all sorts of healthier snacking options right next to my desk. If I’m hungry, I don’t even have to move. I reach out my arm, and there they are.But the second part of that proces

One of the absolute best things you can do to help keep performance in check is to provide a series of visible, well-placed checks and balances in your development workflow to always keep performance front-of-mind. One thing I’m very excited about in this context is feature policies.Feature-Policy is a relatively new feature that lets you opt-in or out of certain browser features on your site.For example, you could tell the browser not to allow the use of the Geolocation API by providing the following header:Feature-Policy: geolocation 'none'There are a lot of benefits from a security and performance standpoint to Feature-Policy, but what I’m excited about at the moment are the ways you can use Feature-Policy to help make easy-to-overlook performance issues more visible. It essentially provides in-browser performance linting.Oversized-imagesBy default, if you provide the browser an image in a format it supports, it will display it. It even helpful scales those images so they look great

The other day I was auditing a site and ran into a pattern that I’ve seen with a few different clients now. The pattern itself is no longer recommended, but it’s a helpful illustration of why it’s important to be careful about how you use preload as well as a useful, real-world demonstration of how the order of your document can have a significant impact on performance (something Harry Roberts has done an outstanding job of detailing).I’m a big fan of the Filament Group—they churn out an absurd amount of high-quality work, and they are constantly creating invaluable resources and giving them away for the betterment of the web. One of those great resources is their loadCSS project, which for the longest time, was the way I recommended folks load their non-critical CSS.While that’s changed (and Filament Group wrote up a great post about what they prefer to do nowadays), I still find it often used in production on sites I audit.One particular pattern I’ve seen is the preload/polyfill patt

Everyone has their vices. One of mine is an unhealthy obsession with other people’s daily routines. I find them genuinely interesting and have probably taken a thing or ten away from a few of them to try to bring into my own routine.But, wow, do they always sound so….neat and tidy. Like:Get up at 4amMeditate for an hourDrink coffee and plan out my dayWorkoutEtc, etc, etcI realized I, too, have a routine. A messy one. So here’s how my daily routine stacks up.Somewhere between 5:00am-6:00am (basically, way too early)My two-year-old wakes up and calls for me from his room, so I begrudgingly oblige. He hands me his pillow, his blankets (each one by one) and his book (the kid insists on sleeping with his 100 Animal Pictures board book right now), and then I pick him up and put him and all his gear into the recliner and turn on a Big Comfy Couch or Winnie The Pooh.I don’t like putting him in front of a show to start the day, but he’s a bit grumpy until he eats, and I’m a bit groggy until I’v

Welp.For the second year in a row, my reading trended down. In fact, this year marks the fewest books I’ve read since 2012! There are several reasons for that, I suppose. Partly, my brain felt pretty overloaded and distracted much of the year for various reasons and I found it harder to enjoy what I was reading.I took a look and I started and put down 13 books this year. I don’t keep track of that, but it’s gotta be close to a record. My guess is that if I were to pick up those books sometime in the future, when I’ve got my mojo back a bit, I’d likely enjoy most of them.I also got behind on writing reviews, again. I’m gonna cut myself a little slack there, but I’m still aimin to do a better job of it this year.As always, there were some stand-outs.For fiction, I loved The Winter of the Witch, Katherine Arden’s conclusion to her fantastic Winternight Trilogy. I’ll miss that world—those books have been some of my absolute favorites in recent years. I could also pick all of the Fredrik Ba

Over the past 14 months or so, I’ve gotten serious about taking better care of myself. I work out Monday through Friday, with rare exceptions. While I’m not super strict on what I eat, I have gotten much healthier there as well—replacing most of my usual sugary snacks with fruits and vegetables and ditching fast-food lunches in favor of salads or other healthier alternatives. I used to drink very little water, opting for, well, pretty much anything else. Now, most days, I’m drinking somewhere between 80 and 100 ounces of the stuff.This comes after years of saying I wanted to do these things but never sticking with it for very long.One of the biggest reasons it has stuck is also one of the simplest and least revolutionary: I made it easy to do the healthy thing.I bought a water bottle that I like and carry it with me pretty much wherever I go. When I’m at the office, I set it right on my desk, next to the computer, so that it’s never more than an arm’s length away.For the snacks, I went

The closer you look at something, the more interesting it gets. That’s probably why I love it when I’m able to pore through large amounts of data related to a topic that interests me. You keep twisting and turning it enough, and you’ll eventually start to uncover fascinating trends and insights that weren’t apparent on the surface.Hence, why I’m a big fan of BigQuery.You can use it for your own private data, and I’ve worked at or with organizations that did, but there is also a wealth of public datasets available for you to dig into. I spend 90% of my time querying either the HTTP Archive or the Chrome User Experience Report (CrUX) data. Typically, I’m looking for performance trends, doing some level of competitive comparison, or digging through data for a company that doesn’t yet have a proper real-user monitoring (RUM) solution in place. But I’ve also dug into data from Libraries.io, GitHub, Stack Overflow, and World Bank, for example. There are more than enough public datasets to ke

The other day I was listening to the latest Shop Talk Show podcast while out for my morning run. They had Jen Simmons on the show, talking about (among other things) the standards process. It’s a great conversation, as you would expect—Jen’s super smart and has been doing great, meaningful work for a long time.Among the things that she discussed is the care that has to go into new browser features because once shipped, it’s there for good. Most of us don’t have to worry about things to that same level because:…you can always delete all your code later. You can always say, ‘Oh, this thing I shipped quickly for my project, that was a bad idea. Let’s obliterate it and re-do it better later.’ But with the web, there’s two things. One, we don’t get to change it and ship it again later, almost ever. If we hurry up and we ship subgrid, and subgrid is crappy, there’s no, like, fixing it. We’re stuck with it.This permanence to the web has always been one of the web’s characteristics that astoun

Netlify hosted their JAMStack Conf in San Francisco this past Wednesday. Quibbles with the JAMStack name aside, there were some great talks in the schedule and they’ve started to fill up my watch later list.One thing that Netlify announced during the event was their new build plugins functionality. Netlify’s build process now exposes different events during the build and deploy lifecycle that you can use as hooks to attach certain functionality to. The simplest way to do that at any sort of scale is to create a build plugin that you can then install for any site you may want to use it.It’s not all that different from any other sort of build process, I suppose, but it does give Netlify some continuous integration functionality which is nice.I really like Netlify, and I really like SpeedCurve so I thought building a SpeedCurve plugin for Netlify would be a fun way to play around with the new feature.Getting setupThe first step was signing up for the private beta and getting access to bui

After yesterday’s post, someone on Twitter expressed concern about providing a “degraded experience” to users who have Save-Data enabled.It’s far from the first time I’ve heard this concern expressed. A user sees “Save Data” as an option and says, “Yeah, of course!” but they may not want a lesser experience as a result.It’s a fair concern, I think. We make a lot of decisions on people’s behalf online and certainly deciding to provide a degraded experience in this situation would be a questionable one.But it’s also an avoidable one. One of the things I think is so great about the Save-Data feature is that it gives companies some sort of control over how their brand is experienced in data-constrained environments. They’re not relying on a proxy service to do a bunch of manipulation on their behalf, hoping it turns out alright. Instead, they have an opportunity to be proactive and careful consider how they can provide a low-data experience that still reflects their brand in a positive lig

Yesterday someone at Shopify let me know on Twitter that they started reducing page weight if the Save-Data header is on.@tkadlec http://shopify.com is now Save-Data aware. About a 13% reduction in page weight, https://webpagetest.org/video/compare.php?tests=190828_NC_2480ff19108ef9d64a3cbb0a3061b15c,190828_1B_bd8a98e3b3ed3758c5586c4bc371e004Early data shows 20% of Indian/Brazilian requests contain this header so happy days #webperf 🎉I love seeing companies paying attention to the Save-Data header. I’m not one to get super excited about headers normally (I leave that to Andrew Betts), but I’m pretty excited about this one.The Save-Data is a header that gets passed along by a browser when the user has turned on some sort of data saving feature in that browser. Companies spend millions of dollars on surveys and research every year trying to figure out what their customers want. The Save-Data header is one of those rare times when the customers are explicitly telling us what they want: t...

I’m lucky to be able to work with a wide variety of organizations and teams, with different architectures and workflows. I like it. It keeps things fresh.I sometimes find it’s nice to have a version of their site running locally to make it easier for me to dig deeper and test different optimizations.I see a lot of similar tech-stacks between my clients nowadays. The most common from the last year and a half has involved React/Vue.js.js, Node.js and webpack (with random tools sprinkled in of course). Despite the similar stacks, the process for getting things running locally ranges quite a bit. Usually, it involves a bit of back and forth with the team as we get access to the right repo’s and navigate the various different build tools and containers and configurations to get things all set. We get there in the end, but it’s rarely a quick process.Our tools are more powerful than ever, and I’m grateful that they are! Particularly as someone who cares a lot about performance, accessibility

There are two basic ways to respond when someone expresses frustration about not understanding a tool or technique that we do.The first is to blame them.I mean, you understand it. It’s not that hard. They should be able to figure it out too. Maybe they don’t want to put in the work. Or they’re slow on the uptake. It would be great if they would put a little time and effort into actually understanding it instead of complaining.The other response is to consider it as feedback.Is there documentation or other information that is unclear or misleading? Does the documentation assume a certain level of pre-existing knowledge? Is there something that you could communicate differently to make it click for them?Maybe their context isn’t the same as you—there could be situations where maybe this tool or technique doesn’t make sense. Or perhaps there are downsides you haven’t considered. It would be great to take some time to understand better where they’re coming from.Blaming them is easy. It’s a

During Katie and Addy’s Google I/O talk, they referred to an internal study that found that 40% of large brands regress on web performance within 6 months.That’s a large, discouraging number, but it’s not entirely surprising. In my experience, teams want to build fast sites. When given the opportunity, like a large organizational push, they relish it and can make tremendous progress.However, these concerted efforts often fix the symptoms without dealing with the underlying cause. A detailed, prioritized audit of a site’s performance provides clear direction on which optimizations to tackle, but unless you also deal with the organizational constraints that caused the site to perform slowly in the first place, those seconds will keep coming back over time.That’s why so many folks over the years have stressed the importance of fostering a culture of performance inside of organizations. I think few organizations would argue against doing just that, but the path forward isn’t always clear,

I remember reading articles about how 3G connectivity was going to transform performance and, more generally, the way we used the internet altogether.I remember how, later on, a common question I would get in after giving performance-focused presentations was: “Is any of this going to matter when 4G is available?”The fallacy of networks, or new devices for that matter, fixing our performance woes is old and repetitive.To be fair, each new generation of network connectivity does bring some level of change and transformation to how we interact with the internet. But it does so slowly, unevenly, and in ways that maybe aren’t what we originally envisioned.It takes time, money and significant other resources to roll out support for a new network. We’re not talking months in most places, but years. Inevitably that means it’s going to hit some of the big market areas first and slowly trickle down to everyone else. I don’t even get to pretend that I’m in a particularly remote area and yet even

Google formally announced Lite Pages the other day and the response has been….let’s say mixed. Understandably so.The announcement post was a fairly typical product announcement post which is to say it was light (no pun intended) on the technical details and leaves a lot of open questions. Sometimes that’s fine. But in this case, the announcement has to deal with Google making changes to HTTPS content which, as you would expect, makes folks a little more nervous. Some more detail would have been nice.What We KnowDespite the vague announcement, between conversations with Chrome folks over the years, digging around and some general knowledge of how proxy services work, we can put together a decent chunk of the puzzle.Lite pages aren’t new. Well, not exactly.Chrome has offered a proxy service through its browser for several years now. In that time it’s undergone a few different rebrands.The first name I’m familiar with was Flywheel. That’s what it was called back in 2015 when the team work

Occasionally I hear some chatter about performance budgets “not working.” And, to be fair, I have seen companies who adopt a budget and then are unable to make meaningful improvements towards that goal. Over time those ineffective budgets get pushed to the sideline where they accumulate dust before being forgotten about altogether.It’s not really about the performance budget, though. Or rather, it’s not the idea of performance budgets that doesn’t work in those cases—it’s the execution and reinforcement around the budget.My definition of a performance budget has evolved over the years, but here’s my current working draft:A performance budget is a clearly defined limit on one or more performance metrics that the team agrees not to exceed, and that is used to guide design and development.It’s a bit lengthy, I know, but I think the specifics are important. If it’s not clearly defined, if the team doesn’t all agree not to exceed the limits, and if it doesn’t get used to guide your work, th

Yesterday there was a bit of a heated discussion around a WebKit issue that suggested putting a limit on the amount of JavaScript a website can load. In the issue, Craig Hockenberry makes the case that enforcing a limit on the amount of JavaScript would provide a sort of “meet me in the middle” solution for users currently using content blockers.Content blockers have been a great addition to WebKit-based browsers like Safari. They prevent abuse by ad networks and many people are realizing the benefits of that with increased performance and better battery life.But there’s a downside to this content blocking: it’s hurting many smaller sites that rely on advertising to keep the lights on…..The situation I’m envisioning is that a site can show me any advertising they want as long as they keep the overall size under a fixed amount, say one megabyte per page. If they work hard to make their site efficient, I’m happy to provide my eyeballs.If Webkit pursues the idea further, they wouldn’t be

One question I’ve seen posed a few times in the past several months is whether performance really is a moral or ethical concern, or if that’s all heavy-handed exaggeration.It’s a fair question, I suppose. Advocates of any technique or technology can be a bit heavy-handed when it suits them if they’re not being careful–myself included. But I’m not sure if that’s the case here. When you stop to consider all the implications of poor performance, it’s hard not to come to the conclusion that poor performance is an ethical issue.Performance as exclusionPoor performance can, and does, lead to exclusion. This point is extremely well documented by now, but warrants repeating. Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out.There is a growing gap between what a high-end device can handle and what a middle to low-end device can handle. When we build sites and applications that include a lo

I had the best of intentions last year. I was going to make it the fourth year in a row of reading more than I did the prior year. More than that, I was going to write detailed reviews of everything I read.Neither of those things really panned out.I started the year strong, but the reading slowed down as did the review writing. I could make up some excuses, but the reality is I just didn’t give myself as much time to read as I had been the past few years. I spent too much time checking email and sipping news through a firehose. I’ll fix that for 2019, starting with curbing my email and Twitter issues (I’ve made good progress on that already and will likely write about that soon).Still, what I did read was really high-quality stuff. There were a lot of great books I enjoyed this past year and very few duds that I had to put down. For fiction, I’d say my three favorites were Lonesome Dove, Beartown and A Man Called Ove (though The Body Library was really close). For non-fiction, I’d have

By now, I have to be on record at least a few thousand times in saying that WebPageTest.org is an absurdly valuable tool. Pat gave the performance community an incredible gift by building it and making it available to the broader community for free.I spend a lot of time in WebPageTest. A lot of time. A while back, I made myself a little Alfred (like Spotlight but significantly more powerful and useful) workflow to make it easy for me to fire off a test quickly. It’s nothing fancy, but it does make it very convenient.When I want to run a test on WebPageTest for any URL, I can open Alfred (I use CMD + Space for the hotkey) and then start typing wpt. When I do, a few options come up: A screenshot of the options (listed below) for the WebPageTest Alfred workflowwptwpt:firefoxwpt:chromewpt:safariwpt:iphoneFor each option, I type in the URL I want to test, press “Enter” and my default browser opens and fires up a test. Of course, I still need to go to WebPageTest.org directly for a lot of te

Last week I had the opportunity to present at a technical SEO conference about performance. At the speakers dinner, I was enjoying a really good conversation with a few folks I met. At one point, I brought up quokkas because they’re amazing and I desperately want to hang out with one.Or a few.Anyway.It turns out, the other folks at the table were not familar. I couldn’t let this injustice continue, so I told them to “Google for quokka selfies”. Christi, who works on Bing, commented with a smile: “Or you could look it up on Bing.”It was a small thing, all with good humor. But it kind of stuck in my head. Without really ever thinking about it, Google has risen to that status (for me at least, though I doubt I’m the only one) where, like Kleenex, it has become the product itself, not just the brand. Their influence on online search is nothing short of dominant.Their influence on the broader web is not at that same level, yet, but it’s not all that far off. I’ve mentioned in the past the m

There was a great article over on The Conversation the other day about how poor scientific research is at considering people with different viewpoints and backgrounds.Specifically, the vast majority of what we know about human psychology and behavior comes from studies conducted with a narrow slice of humanity – college students, middle-class respondents living near universities and highly educated residents of wealthy, industrialized and democratic nations.To illustrate the extent of this bias, consider that more than 90 percent of studies recently published in psychological science’s flagship journal come from countries representing less than 15 percent of the world’s population….Given that these typical participants are often outliers, many scholars now describe them and the findings associated with them using the acronym WEIRD, for Western, educated, industrialized, rich and democratic.First, I love the WEIRD acronym, and I’m a little surprised I haven’t heard it before, or, if I h

My neck and shoulders have bothered me since high school. Nothing debilitating, but a constant soreness and dull ache. I’m not 100% sure why but certainly my work environment is a very likely candidate. My posture can be questionable and for the longest time, I didn’t give even the slightest thought to the ergonomics of my setup. I did grab a standing desk a couple of years back in the hopes it would help my back in some way. I love it. It didn’t make a significant impact on my back (the most notable effect was helping me to avoid the post-lunch sleepiness), but I honestly don’t think I could work for an extended period of time at a sitting desk anymore.Recently, I decided to invest in myself a bit more by grabbing a new mouse and keyboard in an attempt to make my work environment a bit more ergonomic. The mouse didn’t make a huge difference (at least, I didn’t notice one) but I loved it immediately. The keyboard, on the other hand, had more of an impact on my comfort than any other pu

There was a poll posted the other day by Max on Twitter and it has lead to some fairly heated follow-up discussion (Developers being angry on Twitter? Shocking, I know.)Max posted the following question:Given these classes:.red { color: red;}.blue { color: blue;}Which color would these divs be?<div class="red blue"><div class="blue red">The correct answer is that they’re both blue. The order of class names in HTML has no bearing on the styles. In this case, both selectors have the same specificity (they’re both class selectors) so there’s a tie there. Since .blue comes later in the stylesheet, it overrides the .red selector. Both div’s will have text with the color blue.Over 14,000 people have responded as of the time I’m writing this. 43% got the answer correct. Most folks got tripped up by the order of the HTML attributes.It doesn’t bother me too much that people are getting the question wrong. Everyone is at different stages in their career and everyone has different problems they’r

The other week, there were a few articles that came out about Chrome’s NOSCRIPT intervention: an intervention that would disable JavaScript altogether on slow networks. Chrome intervening on behalf of the user when it feels the network is iffy isn’t exactly new. Chrome has several interventions including one that can replace images with placeholders and one that bypasses web fonts on slow connections. The NOSCRIPT intervention itself isn’t even new. From the looks of it, it’s been around since January (just disabled by default until now).But disabling JavaScript is a much more controversial move, it appears. Web fonts fallback very easily to system fonts so disabling web fonts is not a huge deal to most. JavaScript, however, isn’t always treated as progressive enhancement (as much as I feel it should be) and so when it goes missing, the consequences can be a bit more significant.As you would expect, then, there’s been a lot of ensuing conversation. However, all the articles I had read

Eric Meyer was recently in Uganda, where he experienced first-hand a very undesirable side effect of HTTPS. The area he was in was served by satellite internet access, and experienced significant latency (a floor of 506 milliseconds) and packet loss (between 50-80% was typical). In addition, there is a cap on the data that an account can use in any given month. Go over the cap, and you either pay overages or lose data access entirely until the next billing cycle.To counter this, the school he was visiting sets up their own local caching server. But, as he explains, this approach falls apart when HTTPS gets involved.A local caching server, meant to speed up commonly-requested sites and reduce bandwidth usage, is a “man in the middle”. HTTPS, which by design prevents man-in-the-middle attacks, utterly breaks local caching servers. So I kept waiting and waiting for remote resources, eating into that month’s data cap with every request.Eric acknowledged that HTTPS is a good idea (I agree)

When I work with companies on improving their performance, we focus more and more on their long-tail of performance data.We look at histograms instead of any single slice of the pie to get a good composite picture of what the current state of affairs is. And for specific goals and budgets, we turn to the 90th or 95th percentile.For a long time, the average or median metrics were the default ones our industry zeroed in on, but they provide a distorted view of reality.Here’s a simplified example (for something in more depth, Ilya did a fantastic job of breaking down this down).Let’s say we’re looking at five different page load times:2.3 seconds4.5 seconds3.1 seconds2.9 seconds5.4 secondsTo find the average, we add them all up and divide by the length of the data set (in this case, five). So our average load time is 3.64 seconds. You’ll notice that there isn’t a single page load time that matches our average exactly. It’s a representation of the data, but not an exact sample. The average

I didn’t tune in for the WWDC stuff this year. I can remember being excited for that each year, eagerly anticipating what cool thing was coming next. However, for the past few years, I’ve found the announcements to be mostly mundane. This year, unless they were going to announce new and better laptops, I wasn’t overly excited.But when reading the recaps and tweets that followed the event, I was pretty intrigued to see the Apple Watch is now going to be able to support web content. The initial details were a bit scant, but Erik Runyon took the time to jot down some information he found in a video from WWDC.It looks like WebKit on the watch is optimized for reading, as most probably thought it would. Some features are turned off (video, service workers, fonts, etc) and text-heavy pages automatically activate Reader Mode.However, the watch also supports, from the sounds of it, a mostly full web experience.If you don’t do anything to optimize your content, the watch will attempt to adapt a

Remy just posted about his Kindle breaking, and how he felt oddly affected by this:Somehow, I felt weird about throwing away a bit of consumer technology. Except, the Kindle to me, wasn’t that at all. I hold a great fondness to this little device, and that’s an odd concept for me to grasp.I can relate. I have had many conversations over the years where I’ve told people that out of all the devices and gadgets I own, my Kindle—one of the least powerful and cheapest devices—is the one that I am most protective of. I’ve never been entirely able to explain why that is.For Remy, his affection for his Kindle is pretty personal:I’d struggled reading books in the past for a number of reasons: I used to use glasses to help my focus when reading (when I was 18), the size of the books were daunting to me (it took me 6 solid months to read Frankenstein on paperback), and all of this cumulative to a very slow and painful reading process, which put me off the entire experience.The Kindle changed a fe

At #PerfMatters, Katie Sylor-Miller gave a presentation entitled “Raiders of the Fast Start” (best title ever). Here are my notes.Performance archaeology uncovers insights into your development and performance culture.Start with a hypothesis and do a comprehensive survey and additional resource. When you understand the context, start excavating and finally interpret your discoveries.HypothesisFocused on improving the mobiler performance of the Etsy listing page.Code for mobile listing page started in 2013 with multiple teams, so lots of legacy code baggage.RUM DOM Content Loaded times tied most closely to the user experience of Etsy users, so focused on that. 90% of visits were under 5 seconds. 52% of visitors were 2 seconds or less.Looking at conversion rate versus DOMContentLoaded they discovered that conversions steadily declined for every second added to DOMContentLoaded time.Their ultimate hypothesis was that improving the performance of the listing page would increase conversions

When I wrote about beginning to work for myself again, I mentioned that there were a few things in the works that I was particularly excited about. Today, I get to spill the beans on one of them: I’m partnering with SpeedCurve to provide performance consulting services to SpeedCurve customers!The SpeedCurve team is ridiculous. I mean that in the kindest way possible. Between Mark, Tammy, Steve, and Joseph there’s an absurd abundance of top-notch people working on the product. I’ve personally worked with Tammy, Mark, and Steve on things in the past, so there’s already a high-level of familiarity between us all.Partnering with them means I have an excuse to work with each of them a bit more, and that in itself would be enough to make me excited.I’m still handling projects on my own as well, but for SpeedCurve customers specifically, this pairing makes so much sense.The SpeedCurve gang and I will be sitting on a large amount of data giving us intimate knowledge of the state of performance

At #PerfMatters, Jessica Chan, Sarah Dapul-Weberman, and Michelle Vu gave a presentation about building Pinterest’s first dedicated performance team and the challenges involved. Here are my notes.First Dedicated Performance teamPinterest serves over 200 million global monthly active users and an infrastructure that serves over 1 millions request per second.Around 2016, Pinterest migrated from Backbone to React. They saw a 20% improvement in performance and 10-20% improvement in engagement.For unauthorized pages, the same migration saw a 30% improvement in performance and a 15% increase in signups, 10% increase in SEO traffic and a 5-7% increase in logins.Questions came out of these improvements: Were there bug’s in their performance tracking? Were they still performing this well? They realized they needed a dedicated performance team to better understand what was happening.Data ConfidencePinterest chose a custom metric called Pinner Wait Time (PWT) which looks at the slowest load time

2012 was a dark time for responsive images. Standards work had begun, but there was no consensus and many angry people (myself included). Some remained unconvinced that responsive images were even a problem that needed to be solved.But there was still a glimmer of hope in these dark days. In July of that year, Daan Jobsis discovered a technique that the Filament Group would later dub “compressive images”. The technique became pretty popular and worked quite well in lieu of an actual standard.Now, fast forward to today. We have a set of standards for responsive images, browsers have improved image loading—does the compressive images technique still have a place in our workflow? I’ve been threatening to write this post for a long time, but just kept putting it off. But when Dave Shea offers you a like, you take it (there…happy Dave?).What are compressive images?The compressive images technique relies on you sizing a JPG image to be larger than the size it ultimately is displayed at and t

AMP has caused quite the stir from a philosophical perspective, but the technology hasn’t received as close of a look. A few weeks ago, Ferdy Christant wrote about the unfair advantage being given to AMP content through preloading. This got me wondering: how well does AMP really perform. I’ve seen folks, like Ferdy, analyze one or two pages, but I hadn’t seen anything looking at the broader picture…yet.Evaluating the effectiveness of AMP from a performance standpoint is actually a little less straightforward than it sounds. You have to consider at least four different contexts:How well does AMP perform in the context of Google search?How well does the AMP library perform when used as a standalone framework?How well does AMP perform when the library is served using the AMP cache?How well does AMP perform compared to the canonical article?How well does AMP perform in the context of Google search?As Ferdy pointed out, when you click through to an AMP article from Google Search, it loads i

I recently got back from London where I was presenting at QCon. Typically I enjoy single-track events more than multi-track events, but QCon did an impressive job of curating the talks.Each track is curated by the track hosts and speakers are all given the opportunity to take advantage of mentoring. They even had a process in place so that speakers could give a preview of their talk to other speakers and conference staff for feedback in the weeks before the event. It’s a level of care in the talk process that you don’t typically expect from larger events.I had the privilege of closing QCon’s first ever ethics track. The whole day was full of fantastically passionate talks around the ethics of technology. Even more encouraging was that while the room was small, every single talk was packed.Towards the end of the day all the speakers, the track hosts, and a couple of guests got on stage for a panel discussion. The discussion was lively and spirited. I was struck by how much we all agreed

March 14th will be my last day at Snyk. Snyk (pronounced “sneak” no matter what Anna says) is full of amazing and talented people. I’ve learned a ton, and had a lot of fun. I’m going to miss working with them.You know that saying about abandoning a sinking ship? This is more like abandoning a rocket that is taking flight at an incredible speed. Snyk gets better and better at securing open-source every single day. If you’re working with any of the ecosystems Snyk supports, setting up Snyk on that project should just be a given. I’m proud of how far the company has come already in such a short amount of time.But I’ve been feeling myself pulled in a different direction for awhile now.On March 15th, I’m very excited to start working as an independent performance consultant and developer. I’ll be providing training, consulting and hands-on development.I want to work with companies who want to build something everyone can use—something performant and accessible no matter the context. It’s go

In one of the Slack groups I’m in, someone asked a question about running workshops and what folks found that has or hasn’t worked. I dumped my thoughts there but thought I should share them openly as well in case they’re useful to anyone.An important caveat: this is what works for me. As in everything, I think the most important thing is to find a style that suits you. Being authentic is one of the most important things you can do whether you’re giving a workshop, giving a talk or writing.I didn’t do all these things at the first workshops I presented. Through trial and error, these are the things I learned seem to resonate with the folks I train.Your mileage may vary.Start with the attendeesEvery workshop I run, I start with a blank slide and ask the folks in the room what they want to get out of the day. They signed up (or their company did) to spend a whole day on this topic, so just about everyone in the room already has a few topics in mind; a few questions that they really want

The day after AMP was launched, I published a post with a bunch of concerns I had—most notably, that of the incentives being put around building AMP content.This promise of improved distribution for pages using AMP HTML shifts the incentive. AMP isn’t encouraging better performance on the web; AMP is encouraging the use of their specific tool to build a version of a web page. It doesn’t feel like something helping the open web so much as it feels like something bringing a little bit of the walled garden mentality of native development onto the web.It’s a concern that has been stated over and over again in the two-plus years of AMP’s existence, by numerous developers. It finally boiled over recently, resulting in the publication of the AMP letter which at the time I’m writing this has been signed by 640 people and seven organizations (and also, to my knowledge, has not been formally addressed by the AMP team).The letter calls on the AMP team to make two primary changes:Instead of granti

I started using my site to post bookmarks late in 2016, but I didn’t do it often. I never sat down and took the time to create a nice publishing workflow for bookmarks, so the process was clunky and cumbersome. Anytime I needed to save a bookmark I had to:Copy/paste any selected text I wanted to quoteCreate a new markdown file for JekyllSetup any metdata I neededManually deployThis wasn’t a limitation of Jekyll or anything, just a matter of me never taking the time to make the process more seamless.What I wanted was a bookmarklet to fast-track that whole process and make it automatic. With a static-site generator, that’s not quite as simple as it would be otherwise.But then I remembered that the Github API allows you to create and commit a file to a given repository. I did a little looking around. It turns out someone had already taken the time to build a bookmarklet for Jekyll that used the GitHub API to do exactly what I wanted to accomplish.Modifying it for Hugo didn’t take long. Mo

I’ve made a few changes here, but hopefully, most of them went unnoticed. As I mentioned before, I’ve been wanting to invest more in my own site and content again. With so much I want to tackle—implementing WebMentions, syndicating book reviews to Goodreads, building a bookmarklet to make it easier for me to save links here—naturally I had to prioritize and put first things first.So I changed the static site generator I was using as well as the hosting provider.It’s actually not as off-track as it sounds. I had been running Jekyll for a long time now, loving the fast loading times. But there were a few issues. The most notable is my own fault: over the years, I had done a poor job of keeping things neat and tidy. The whole setup was pretty unwieldy and messy. It was to the point where I was either going to need to refactor my code anyway or switch it up altogether.The second issue was that while the site was fast to load, it was pretty slow to generate. It was enough of an annoyance th

I produced a decent amount of content in 2017. In fact, I wrote more blog posts than I have since 2013. Just not here.I wrote 17 posts for the Snyk blog and a handful of posts for other sites as well. I posted 889 tweets to Twitter. I reviewed 47 books on Goodreads. I’m probably forgetting some other things.But here, on my own site? Four. I wrote four posts. For someone who loves to talk about how important it is to own your own content and to write for yourself, I’ve done precious little of that as of late.Goals can be fickle things, but I’m going to set myself a goal for 2018: I want to walk the game I talk. I want to get back to owning my own content. That doesn’t mean cutting back on posts for Snyk—that’s part of my job and I’m happy to do it. But it does mean writing more frequently here as well. It means treating my own site as the hub for the content I post elsewhere instead of letting it accumulate cobwebs.There are a few obvious steps. I want to replace Disqus with web mention

I spent a lot less time this year on social media. Mostly this was a conscious decision—the firehose that social media provides wasn’t doing my brain (or mood) any favors. So I dialed it back. At first, I had to trick myself, hiding my Twitter icon several pages deep on my phone so it was very inconvenient while making sure my Kindle app was up front and center.As time went on I didn’t have to do that anymore. Like a dog learning that he gets a treat when he does a trick, I started to recognize that, at least for me, ten minutes reading left me in a much better state than ten minutes on Twitter. I can’t say I don’t occasionally dip in more than I probably should, but there’s a better balance now. It’s not much of a surprise, then, that I read more books in 2017 than I have since I started keeping track back in 2009.There were fewer standouts this year though, at least for non-fiction. I loved The Lightless Sky—it’s easily my favorite non-fiction book of the year and one I would unequiv

Recently I taught my daughters some extremely basic cryptography, and it was a great reminder of how critical it is for security to be usable.There are some great ciphers I could have taught them, but they’re still little, so I started simple. I them the rail fence cipher (some may know it as a zigzag cipher which is probably a better description). With a rail fence cipher, you write the message you want to communicate in a zigzag pattern, letter by letter.For example, let’s say we want to use this cipher on the message “hello world”. We would do this by placing the letter “H” on the first line, then the letter “e” on the second line. Then we’d move back up and put the “l” on the first line, followed by another “l” on the second line. The result would be something like this:Now that we have the message in two lines, we place the second row of characters after the first row, and we have our encrypted message:HLOORELWLDThe rail fence cipher can involve as many “rails” as we would like. F

The first day of the first ever Google AMP conference was today in New York. I would have loved to have been able to participate, but I had to settle for listening to bits and pieces from afar (thanks to Google for always doing such a good job of live streaming all of their events).The only session I circled back to watch in its entirety so far was the panel about “AMP & The Web Platform.” Unsurprisingly to anyone who has read anything I’ve written in the past about AMP, this was the session that looked the most interesting to me. I’m not typically a fan of panels—panels are so hard to do well—but this was a good one.Now first off, hats off to the AMP team for assembling the panelists that they did. They could’ve gone the easy route and pulled in a bunch of AMP diehards, but they didn’t. They assembled a smart group of panelists who weren’t afraid to ask some important and hard-hitting questions: Gina Trapani, Nicole Sullivan, Sarah Meyer, Jeremy Keith and Mike Adler.That was not accid

I’ve been thinking a lot lately about our biases and their influence on what we build and how. We’re all biased in some way—it’s an inevitable side-effect of living. We experience certain things, we live in a certain environment, we have certain interactions and over time all of these experiences and factors add up to impact the way we view ourselves and the way we view others.These biases come into play over and over again in our work, and can have devastating consequences.There was an interesting post on The Coral Project about anonymity and its impact—or rather, non-impact—on online behavior. A frequent refrain heard when we try to understand why online behavior is so frequently so poor is that the ability to be anonymous is one of the primary reasons for the problem. J. Nathan Matias argues differently, though:Not only would removing anonymity fail to consistently improve online community behavior – forcing real names in online communities could also increase discrimination and wor

Ah, the end of the year. A time where my waistline expands as I feast on mountains of holiday sweets and the list of books I want to the read expands just as quickly as everyone shares their favorite reads from 2016.As always, I enjoyed every book on this list at least a little—I don’t have the patience or desire to get through books that I’m not finding interesting in some way.If I had to choose, I’d say my three favorite fiction reads of the year were: A Constellation of Vital Phenomena, A Monster Calls, and The Book Thief. For non-fiction, they would be The Road of Lost Innocence, Console Wars, and Evicted. Just to warn you, the only book out of those six that you should expect to finish without having lost any tears along the way is Console Wars. Apparently, I was really into emotionally-charged books this year.Creative Schools: The Grassroots Revolution That’s Transforming Education by Ken Robinson 4⁄5 Ken, as you would expect if you’ve read his prior books or watched his fantasti

It starts with a voice. Your voice. Your ideas. Your opinions. Your thoughts. Your learnings.You have something you’re interested in, something you want to communicate to others. So you write. Or you give a presentation. Or you record a screencast. You do these things more and more, sharing what you learn and what you think.Over time, as you get more comfortable, you learn how to improve. You learn how to write more effectively. You learn how to make your presentation resonate more deeply with an audience. One day, years later, you look up and you find out that you’re not the best—in fact you still have a lot of room for improvement, but you’re much better than you used to be.This is the way you improve. This is way it’s supposed to work.Except that often, it doesn’t. There’s a lot of advice out there, mostly well-intentioned, about how to be better. Don’t use passive voice in your writing. Make your movements deliberate on stage. Avoid filler words.It’s great that people share these t

One of the very first projects I ever worked on as a professional was a relatively large site with tons of legacy code. Legacy code brings many headaches. My favorite example was opening a few pages to find that these pages used not one, not two, but three different JavaScript frameworks!The developers were overworked and the site had never gotten enough budget to give it the rebuild it needed. Granted, they could have stuck with the original framework included but the problem was that as each of the frameworks faded and gave way to the next one, the ecosystem and community around them online dried up and shriveled.There’s a happy ending to this story. Eventually, jQuery was used and all the other frameworks were removed (talk about a big performance win!). jQuery never suffered from the same fate as the other frameworks the team had tried to use—its ecosystem only continued to grow and flourish as time went on.Of course, the snarky side of me would be happy to point out that had they

I remember sitting around with a few friends at Chrome Dev Summit last year. The conversation eventually turned to security. We all agreed about how massively important it was, but we also each acknowledged that it’s not trivial to do correctly. It’s not the most accessible topic and the tooling and standards can be a bit unwieldy.Since that time, Let’s Encrypt came out of beta and did a lot to really simplify the process of moving sites to HTTPS. I’m a big fan, as I’ve mentioned before.But moving to HTTPS, while important, is just one tiny step in what it really takes to make sure that the people using our sites and applications are safe. If the web is really going to be secure by default, then we need many more tools and standards along a similar vein. We need security to be demystified.Maybe that’s why when Guy was showing me the first incarnation of Snyk I was so impressed. He and his team had created a tool that focused on one part of the security equation—how to make sure you’re

I head out of the airport in San Francisco and grab a taxi. I consider myself an outgoing and social person, but I’ve just spent six hours or so crammed next to a bunch of strangers in a combination of airports and planes. All I want to do right now is hang in the back seat of this taxi, enjoying 45 minutes of quiet.You never know with taxis though. Sometimes, the driver will ask where I’m headed and then stay quiet the rest of the way—the two of us physically in the same car but mentally somewhere else entirely. Other times the driver will want to make small talk. We’ll talk about where we’re each from, what the weather is like back home, how many kids we have and how long I’ll be in town for.Today, it turns out, is not going to be quiet ride.The driver—a middle aged man—and I take turns talking about where we live, the weather, all the standard fare.He asks if we play football where I’m from. Soccer. He corrects himself remembering I’m an American and we made up our sort of football

It’s no secret that I have reservations about Google’s AMP project in its current form. I do want to make it clear, though, that what bothers me has never been the technical side of things—AMP as a performance framework. The community working on AMP is doing good work to make a performant baseline. As with any framework, there are decisions I agree with and some I don’t, but that doesn’t mean the work isn’t solid—it just means we have different ways of approaching building for the web.But that’s the beauty of the web, isn’t it? It’s not just that anyone, anywhere can consume the information on the web—that’s fantastic and amazing, but it’s not the complete picture. What makes the web all the more incredible is that anyone, anywhere can contribute to it.You don’t need to go through some developer enrollment process. You don’t need to use a specific application to build and bundle your apps. At its simplest, you need a text editor and a place to host your site.That’s it. The rest is up t

I recently gave the Let’s Encrypt client a try and wrote up how that went. One of the follow-up questions that popped up was about HTTP Strict Transport Security (HSTS) and whether Let’s Encrypt’s helps with it. Since the question came up several times, I thought it would be worth writing up.What is HSTS?While the SSL certificate is a big boost for security in its own right, there is still a potential hole if you are redirecting HTTP content to HTTPS content.Let’s say someone tries to request wpostats.com (diagrammed below). They may type it into the URL bar without the protocol (defaulting the request to HTTP) or they have it bookmarked from before it used HTTPS. In this case, the browser first makes the request to the server using a non-secure link (step 1). Then the server responds by redirecting the browser to the HTTPS version instead (step 2). The browser then repeats the request, this time using a secure URL (step 3). Finally, the browser responds with the secure version of the

It’s that time of year again. The time when readers everywhere post their “best books of whatever-year” and “my favorite books of the year” lists making my pile of books to read grow rapidly. As usual, I’m happy to return the favor.As I did in the past, I’ve included a rating and short review of each book I’ve read to give both you and I some idea of why I enjoyed each book. You’ll notice that no book has a rating below three stars out of five—that’s because if I am not enjoying a book on some level, I discard it. Life is too short to spend reading books that aren’t interesting.If you forced me to choose, I’d have to say my three favorite fiction books were: All the Light We Cannot See, Crime and Punishment and Leviathan Wakes. My three favorite non-fiction books were: They Poured Fire on Us From the Sky, How Music Got Free and So You’ve Been Publicly Shamed.The End of Absence by Michael Harris 4⁄5 I found myself nodding my head in agreement quite frequently while reading this meditati

The five most read posts of 2015, in order.Apple’s WebI’m good for a heat of the moment rant about either standards or Apple (often both) every couple years. This year, it was about Apple’s influence over the standardization process after some fallout around the Pointer Events specification.Client-side MVC’s Major BugIf your client-side MVC framework does not support server-side rendering, that is a bug. It cripples performance, limits reach and reduces stability.Choosing PerformanceIn light of Facebook’s Instant Articles feature and FlipKart’s announcement about leaving the web (something they’ve since reversed their stance on), I wrote a post about why the issue with poor performing sites has nothing to do with technical limitations. Performance is a decision. We actively choose whether to devote our time and energy to improving it, or to ignore it and leave it up to chance.Taking Let’s Encrypt for a SpinA lot of folks have been very vocally pushing for “HTTPS Everywhere”, and for go

A lot of folks have been very vocally pushing for “HTTPS Everywhere”, and for good reason. The fact that the lack of HTTPS makes you miss out on shiny new things like HTTP/2 and Service Workers adds even more incentive for those a little less inspired by the security arguments.Unfortunately, moving to HTTPS can be kind of painful as you can see from Jeremy Keith’s excellent post detailing exactly how he got adactio.com onto HTTPS. He pinpoints the major obstacle with HTTPS adoption at the end of his post:The issue with https is not that web developers don’t care or understand the importance of security. We care! We understand!The issue with https is that it’s really bloody hard.Let’s Encrypt—a new certificate authority from the Internet Security Research Group (ISRG)—has been promising to help with this, pledging to be “free, automated and open”.They just announced public beta today, so I decided to give the beta version of their system a try on wpostats.com. Like Jeremy’s blog, WPO St

I enjoy reading and one of the rules of all well-behaved reading enthusiasts—much like vegans, cross fitters and people who eat gluten free—is to never stop telling everyone we know (and even some people we don’t know) about it.I hadn’t read very many industry books this year, but the second half of the year was absolutely bursting with great options and I couldn’t resist. Here are a list of the ones that I’ve found time to read and highly recommend.Adaptive Web Design, 2nd Edition by Aaron Gustafson Sometimes second editions are relatively minor updates to a prior version of a book. In the case of Adaptive Web Design, I wouldn’t have been upset if that was the case. After all, the first edition was exceptionally well written and provided as clear an explanation of progressive enhancement as you could possibly hope for.But the second edition of Adaptive Web Design isn’t just a minor update—it’s a completely new take on the topic. While I would have been hard pressed to imagine it happe

Incentives are fascinating. Dangle the right carrot in front of people and you can subtly influence their behavior. But it has to be the right carrot. It has to matter to the people you’re trying to influence. Just as importantly, it has to influence the correct changes.A few years ago there was a story of incentives gone wrong that was making the rounds. The story was about a fast food chain that determined customer service was an important metric that they needed to track in some way. After discussion, they determined that the time it took to complete an order in the drive thru seemed to be a reasonable proxy.So they set a goal: all drive thru orders needed to be completed within 90 seconds of the cars arrival at the window. They had a timer visible to both the customer and the server. If the timer went over 90 seconds, the time would be recorded and then reported back to corporate headquarters.There were some rather silly and unintended side effects. One of the most absurd happened

The web has always evolved fairly quickly but as of late it sure feels like the pace has picked up substantially. There are a plethora of new standards and techniques emerging that range from incremental improvements to potentially giant leaps forward.We have the mass migration to HTTPS. There’s HTTP/2 which provides the first major update to HTTP in over 15 years. Alongside of that we have Google’s QUIC which could provide significant reduction in latency. Service workers brings a programmable proxy to the browser. We have more focus than ever on motion design on the web. Improved performance metrics have shifted the discussion to more experience-based optimizations such as optimizing for the critical path. We have the shift to ECMAScript 6. The list goes on and on.It’s very exciting. But it can also be stressful.The other day I tweeted about my excitement about some of these new standards. Shane Hudson was the first reply:Quite worryingly, some of those words are gobbledegook to me.

I did a bunch of research on proxy-browsers for a few projects I worked on. Rather than sitting on it all, I figured I’d write a series of posts sharing what I learned in case it’s helpful to anyone else. This first post looks at the general architecture of proxy browsers with a performance focus.In the original story of the Wizard of Oz, the Emerald City isn’t actually green nor made entirely of emeralds. All of that came later. In the original story, before entering the city each person had to put on a pair of glasses. These glasses, they were told, would protect them from the bright glow of all the emeralds that would surely damage their sight. These glasses were attached and never removed. You wore them while eating, while going to the bathroom, while walking outside—you wore them everywhere and all the time.This was all a ruse. The glow of the city wouldn’t damage anybody’s sight because there was no glow. That all came from the glasses which just happened to be tinted green. Thro

Getting a website successfully delivered to a visitor depends on a series of actions. My server must spit something out. That something must be passed over some network. That something must then be consumed by another something: some client (often a browser) on some device. Finally, the visitor views that something in whatever context they happen to be in.There are a lot of unpredictable layers here.I have no control over the network. It could be fast, it could be slow, it could be down entirely.I have no control over the end device. It could be a phone, a laptop, an e-reader, a watch, a tv. It could be top-of-the line or it could be budget device with low specs. It could be a device released the other day, or a device released 5 years ago.I have no control over the client running on that device. It could be the latest and greatest of modern browsers. It could be one of those browsers we developers love to hate. It could be a proxy browser. It could be an in-app browser.I have no contr

Facebook just announced a new feature they’re calling “Instant Articles”. Facebook is positioning this as a way for publishers to have their stories displayed, within Facebook, “instantly”:Mobile web articles can take an average of eight seconds to load, by far one of the slowest parts of the Facebook app. Instant Articles provides a faster and richer reading experience for people in News Feed.Now before we wring our hands too much over this, it’s worth noting that the articles themselves still start on the web. Facebook just becomes a distribution platform. Here’s the exact statement from their FAQ’s (emphasis my own):Instant Articles is simply a faster, mobile-optimized way to publish and distribute stories on Facebook, and it supports automated content syndication using standards like HTML and RSS. Content published as Instant Articles will also be published on the publishers’ websites.From Facebook’s perspective this is a no-brainer. It keeps the content within Facebook’s environme

On May 11th, I’ll be joining Akamai. I would be lying if I said it was an easy decision. I waffled a lot (For the sports enthusiasts out there, it’s not entirely unlike Favre and retirement. For the rest of you, insert some clever Waffle House pun here.). The past few years of working for myself have been amazing! I’ve gotten to work on some great projects with some great people and have had a ton of fun doing it.But if you’ve followed along you know that I am extremely passionate about improving performance on the web. Getting a chance push for better performance from within a company that handles 20% of the web’s traffic and is full of people who are after the same goal was too good an opportunity to pass up.It’s a big change, but an exciting one. Akamai constantly talks about “building a faster, stronger web”. Sometimes a company has a snappy line that they use, but there is little evidence that they believe in it. That’s certainly not the case here. They’ve been very active in inve

As our understanding of performance on the web improves, we are starting to shift from the traditional metrics we’ve focused on. Things like load time and page weight are rightfully being given less focus as we move to more mature metrics like SpeedIndex that provide a better understanding of perceived performance.But that doesn’t mean we can dismiss page weight altogether. The web is not free. Data has a cost and that cost varies around the world. We’ve always sort of guessed that sites could be a little expensive in some areas, but other than a few helpful people tweeting how much certain sites cost while roaming, there wasn’t much in the way of hard data. So, I built What Does My Site Cost?.The ITU has data about the cost of mobile data in various countires and World Bank provides some great information about the economic situation around the world. Pairing the two together, we can get an idea of how much things might cost—and what that means in relation to the overall economy in th

The Pointer Events specification just became a W3C Recommendation. For those unfamiliar, it’s an intriguing attempt to unify pointer events regardless of the input device in use.The jQuery team threw their weight behind it this morning.…we love Pointer Events because they support all of the common input devices today – mouse, pen/stylus, and fingers – but they’re also designed in such a way that future devices can easily be added, and existing code will automatically support the new device.Unfortunately, as they went on to point out, there are some hurdles to jump yet. While Microsoft has a full implementation in IE11 and Mozilla is working on it, Apple has shown no interest and Google seems ready to follow their lead.I was willing to give the Blink folks the benefit of the doubt, because I do remember they had specific and legitimate concerns about the spec awhile back. But after reading through notes from a Pointer Events Meeting in August, I’m forced to reconsider. The Chrome repres

I remember going as a kid with my parents when they would pick out a new car. My parents didn’t want to spend a ton so we usually looked for something basic that would work.The car, of course, had to have certain features. A way to steer. Brakes. An engine. Doors. These were things all cars had and all cars had to have if anyone was going to ever consider purchasing them.From there you decided on the bells and whistles. Did you want power windows and power locks? Did you want a built-in CD player or would a cassette player and radio work just as well? Did you want a sunroof?We often did without most of those add-ons. They were the extras. They were what drove the cost of a car higher and higher. They were nice to have, but a car would work without these things.I worry that we have it backwards on the web. We ask questions like: How much does accessibility cost? How much does progressive enhancement cost? Meanwhile we’re shipping sites that support only the most “modern browsers”. We sh

Over the past year I conducted performance audits on a handful of sites that all used client-side MVC’s, typically Angular but not always. Each site had their own optimizations that needed to take place to improve performance. Yet a pattern emerged: client-side MVC’s were the major bottleneck for each. It slowed down the initial rendering of the page (particularly on mobile) and it limited our ability to optimize the critical path.So I get a great deal of happiness from reading posts from much smarter folks than I who are rallying against this all-to-common mistake.Back in December, The Filament Group analyzed a bunch of client -side MVC frameworks to see their impact on the initial load time of a page. The results to render a simple To-Do app were disappointing:Ember: 5s on a Nexus 5, 3G connectionAngular: 4s on a Nexus 5, 3G connectionBackbone: 1s on a Nexus 5, 3G connectionOnly Backbone scores in a way that is at all acceptable, particularly in a world where people are trying to bre

Time for my annual look back at what I read in the past year. Keeping in the same format as last year, each book has a rating (on a simple 5-star scale) as well as a very short review to give you (and me when I look back at this in a year or so) some idea of why I enjoyed each book.My top three choices for fiction are: The Martian, Ancillary Justice and Genesis. For non-fiction: Chuck Amuck, Stuff Matters and The Noble Approach. For web-specific titles: Responsible Responsive Design, Designing for Performance and The Manual (I’m just going to cheat and say read all the issues).I saw a tweet the other day from Austin Kleon where he shared that he had read 70 books this past year. He also shared a brief “How to read more” list. I only hit 39 books this year so I’m not as qualified as he is to provide advice on this, but my advice would be very similar. In particular tip #4 is important:If you aren’t enjoying a book or learning from it, stop reading it immediately. (Flinging it across the

That time of year again! Here are the five most popular posts of 2014, in order.Fast EnoughHow fast is fast enough? Page weights and load times vary so much from site to site and industry to industry. While it’s easy to spot the obviously bad examples, it can be much more difficult to find the line between is “fast enough” and what is slow.“RWD Is Bad for Performance” Is Good for PerformanceMyths are powerful things. Put the right spin on a myth and you can use it to build up; to create something new and better. I’ve found the “responsive design is bad for performance” myth to be really good for performance.JS Parse and Execution TimeToo often we focus merely on size and request count when discussing the use of JavaScript from a performance perspective. Using a tool built by Daniel Espeset, I tried to put some numbers to the parse and execution times of scripts as well.Performance Budget MetricsWhich metric(s) should you use for a performance budget? I tried to sort the basic performan

Yesterday, Chris Coyier pondered aloud the best metric to use for a performance budget:Re: performance budgets. I wonder if measuring times is smart or not. So many variables, seems like requests/sizes/blockers easier to track.It’s an interesting question, and one that I touched on at the beginning of the year. I think it’s worth elaborating on a little.The purpose of a performance budget is to make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.One of these goals (prioritizing performance) is an internal one impacting the people who are creating the site. The other goal (building a site that feels fast) is an external one impacting people who visit your site. It’s not surprising that I’ve found the most effective metrics to differ for each.For the purposes of this post, I’m breaking those metrics down into four categories:Milestone timingsSpeedInde

Yesterday Guy Podjarny published his analysis of the use of responsive design among the top 10,000 websites. He found that adoption jumped from 10.8% to 18.7% over the last year. Another recent survey showed that a hefty 90% of publishers are looking at implementing responsive design. However you want to slice it, responsive design is an increasingly popular technique.But there are tricky issues to navigate along the way: tables, performance, and input modes—oh my! That’s where Scott Jehl’s new book Responsible Responsive Design comes in.It’s almost like two books in one. The first two chapters blow through many of the common hurdles people come across when implementing responsive design. How to handle tables, different input methods, accessibility, feature detection, testing—it’s all there. Scott deftly moves from topic to topic, explaining the issues and how to address them.The next two chapters focus on performance (a favorite topic of mine). Chapter 3, “Planning Performance”, is a

Those smart and clever folks at The Filament Group formally announced yet another useful tool yesterday: a “lightweight, simple DOM utility” they call Shoestring.I’ve been using Shoestring for awhile now, and I’m a huge fan. In fact it has become my go-to solution when I need such a tool. It’s small, powerful, and very, very smart.It’s very rare that I write about a specific tool. Tools come and go. However after talking so much about the importance of reducing JavaScript bloat, I figured I should take the time to explain a little about how I’m doing that myself. Shoestring has played a large role in that. In addition, Shoestring has made some really smart decisions that are worth noting regardless of whether the tool is a fit for you or not:Iterating on the wheelAllowing smart defaultsIterating on the wheeljQuery is massively popular. In fact, it’s far easier to find information about how to solve a problem with jQuery than it is to find information about how to solve that same proble

I work in a room in my basement. It works well enough, but it’s small and quite dark. The only source of external light is a small window that looks out underneath our front porch.Contrary to what Hollywood may have you believe about the “developer in a basement”, I actually do enjoy light. So I have spent a decent chunk of time researching how to properly light small, windowless rooms.It turns out the one of the most important pieces is finding a nice balance of different light sources. Mix a desk lamp with an overhead lamp and a floor lamp or two. Better yet, make sure those floor lamps are different heights. You need variety to produce quality lighting.The results are rewarding. Working in a poorly lit environment feels depressing and lonely. It’s energizing to step out of the shadows.But sometimes working in the light doesn’t go so well, as has been the case for Kathy Sierra:Life for women in tech, today, is often better the less visible they are.Damn.This sort of thing has happene

At Velocity NY, Daniel Espeset of Etsy gave a great talk about how Etsy profiles their JavaScript parse and execution time. Even better, after the talk, they released the tool on GitHub.Daniel shared a few examples in his deck, but I couldn’t wait to take Daniel’s tool and fire it up on a bunch of random browsers and devices that I have sitting around.For this test, I decided to profile just jQuery 2.1.1, which weighs in at 88kb when minimized. jQuery was selected for its popularity, not because it’s the worst offender. There are many libraries much worse (hey there Angular and your 120kb payload). The results above are based on the median times taken from 20 tests per browser/device combination.The list of tested devices isn’t exhaustive by any means—I just took some of the ones I have sitting around to try and get a picture of how much parse and execution time would vary.Parse and execution times of minimized jQuery 2.1.1 Device Browser Median Parse Median Execution Median Total Blac

Myths are powerful things. They certainly have the ability to destroy—we’ve seen that many times. But put the right spin on a myth and you can use it to build up; to create something new and better.Responsive design just can’t seem to shake the rumor that it’s bad for performance. It’s very frequently spouted as a downside of the technique—a reason why you may not want to pursue responsive design for a project.Just to be clear where I stand on this: I don’t agree. I don’t agree because I’ve built responsive sites that performed well and because I’ve seen many others who have done the same. I don’t agree because I’ve looked at heavy and slow responsive sites and seen how fixable those issues are. I don’t agree because I’ve seen many non-responsive sites that are just as heavy and slow.Bad performance stems from a lack of attention and commitment performance within an organization—not from whether or not the site is responsive. Saying responsive design is bad for performance is the same

At Google I/O 2014, Lara Swanson and Paul Lewis discussed performance culture. Since it’s one of my favorite topics, I decided to share my notes:34% of US adults use a smartphone as their primary means of internet access.Mobile networks add a tremendous amount of latency.We are not our end users. The new devices and fast networks we use are not necessarily what our users are using.40% of people abandon a site that takes longer than 2-3 seconds to load.Performance cops (developers or designers who enforce performance) is not sustainable. We need to build a performance culture.There is no “I” in performance. Performance culture is a team sport.The first step is to gather data. Look at your traffic stats, load stats and render stats to better understand the shape of your site and how visitors are using it.Conduct performance experiments on your site to see the impact of performance on user behavior.Test across devices to experience what your users are experiencing. Not testing on multiple

Before I gave my first ever talk at a conference, I read any post I could find from other speakers about their process for preparing. Some of the steps I incorporated into my own process, others I decided probably didn’t really fit. But they were all helpful and gave me a little more confidence.It’s for that reason that I have decided to write this: for anyone who is about to give their first presentation, or is considering doing so. Not as a set of rules, but as a set of ideas that you may or may not find work for you.So, in all its glory, here are the same (rough) steps I find myself going through for every new talk.Consider the conference and attendees. How many people will be there? What is their experience like? Why are they there? I often do a little research to see what I can find out about past versions of the conference from folks I know who attended/spoke, or from reviews people wrote on their blog somewhere.From there, I start thinking about a topic I really think should be

It seems like the idea of performance budgeting has been gaining quite a bit of traction over the past year. This is awesome! The best way to improve web performance is to prioritize it from the get-go, and that’s exactly what a performance budget helps you do.But having the budget set in a document somewhere doesn’t accomplish much. It needs to be enforced to really matter.I’m a big fan of Grunt.js and use it on pretty much every project at this point. I did a lot of digging and while there are some plugins that come close, nothing quite fit what I wanted: different connection speeds, various metrics to budget, and the ability to fail a build if those thresholds aren’t met.I’m also a big fan of WebPageTest, which has a slick Node API courtesy of Marcel Duran. So, armed with the API and Jeff Lembeck’s helpful guide to creating a grunt plugin, I decided to throw together a simple little task for performance budgeting.Introducing grunt-perfbudgetgrunt-perfbudget is a task for Grunt.js th

At long last, it appears we have our much-needed markup solution for responsive images thanks to srcset, sizes and picture. Implementation is already happening in Chrome & Opera (Blink) and Firefox (Gecko). Soon, the Blink implementation will be ported to WebKit. This is fantastic news—we’ve needed this for so long!Yet some are still not happy. Honestly, that’s to be expected. The responsive images debate was incredibly heated and had much in common with an episode of Game of Thrones—minus the nudity. Some folks are still unsettled by the potential verbosity of picture & friends and would prefer a server-side solution or a new image format.The thing is—they’re not wrong. The markup solution was absolutely needed, but a server-side solution (Hello, client-hints!) would be amazing, as would a new image format. And in some cases, such solutions might even be better than what we currently have to play with.Yet dismissing one of these three options as less than ideal misses the point. There

A lot has been written about the web’s superpower—its reach. Take any device, give it an internet connection and a browser of some kind and it transforms into a gateway into the largest repository of cat pictures, funny videos and human knowledge ever assembled. It’s rare to find a company whose goals are a more perfect fit for this superpower than Radio Free Europe/Radio Liberty.Their purpose is to bring information to the people who need it—to reach everyone they can. This information is valuable. So valuable that many countries try to block access to their sites, causing people to resort to all sorts of workarounds. In some countries, people are risking their lives simply by trying to access this content.And to be quite frank, they face an uphill battle even in the best of circumstances. RFE/RL serves more than 150 news sites in over 60 languages. In some of these areas network connectivity is intermittent and slow. Many of these countries don’t have 3G, let alone 4G, networks avail

This morning, Mark Boulton wondered aloud on Twitter about why responsive design “looks” like responsive design:I wonder if #RWD looks the way it does because so many projects aren’t being run by designers, but by front-end dev teams.This certainly isn’t the first time that someone has suggested that responsive sites have a “look” to them. In fact, it seems that particular topic has been quite popular over the last few years. And to be fair, a pretty large number of responsive sites do tend to share similar aesthetics.Before I dig into that, let me state my usual “blame the implementation, not the technique” just in case anyone was considering insinuating that responsive design dictates a specific sort of visual appearance. (To be clear: I don’t think that’s what Mark was doing at all—I’m just preemptively dismissing that line of commentary because it’s almost certainly going to come up.)There are a few reasons why I think we’re seeing this commonality at the moment.The web can be tren

Yesterday Twitter went nuts over a little site called “You Might Not Need jQuery”. The site’s seemingly innocent claim was that many things that you think you need jQuery for are actually not so bad in plain old JavaScript, depending on what browsers you are supporting.jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement.It then proceeded to provide example code—what a line of jQuery was compared to the vanilla JavaScript alternative. Not all of these snippets were exactly identical to the jQuery code in terms of what they accomplished, but they were pretty close.The site itself didn’t seem particularly exciting or controversial. We’ve seen these sorts of comparison before, and frankly claiming that you “might” not need jQuery i

How fast is fast enough?I’m asked this question a lot. Page weights and load times vary so much from site to site and industry to industry. While it’s easy to spot the obviously bad examples, it can be much more difficult to find the line between is “fast enough” and what is slow.My usual answer of “make it as fast as possible” doesn’t seem to make people very happy, so let’s try to get at least a little more concrete.CompareOne method of attempting to arrive at a measure for “fast enough” on a new site is by seeing how you stack up against the competition. Do some analysis on a few of your key pages. Then do the same for key pages for 10 competitors or so. If you’re doing a redesign, analyze your existing site as well. Then, rank yourself to see where you stack up.In his book, “Designing and Engineering Time”, Steven Seow talks about the 20% rule. The basic idea is that people perceive tasks as faster or slower than other tasks when the difference in time is at least 20% slower or fas

Jason Grigsby just wrote an excellent post talking about how he’s wrestled with trying to define “responsiveness”.When a client comes to us to help them make their existing site or app responsive, we know that we’re going to be using fluid grids, flexible images and media queries.But we also know we’re going to be using much more than just those three techniques. The best responsive web designs are doing much more. And when we teach workshops or help clients, much of what we’re discussing are the things that you do after you’ve got the three techniques down.Which led me to the idea that there is a difference between “being responsive” and responsive web design. That responsiveness was something larger.Jason’s post hits on a lot of the same points I’ve been struggling with myself. In my comment on his post, I suggested that maybe the term for this larger concept has already been created.I’ve been down this path too. In fact, I still go down it sometimes. I like the idea of “responsivene

This is a tough year for me to list my top three non-fiction and fiction books because there were a lot of really good ones—particularly in fiction. The fact that there were so many great books probably contributes to why I was able to reverse the downward trend in my book count the past few years.That being said, for fiction I’d have probably have to rank Lexicon, Dust and Ocean at the End of the Lane as my top three. For non-fiction: The Reading Promise, Jim Henson: The Biography and Designing and Engineering Time. For web-specific titles: Content Everywhere, Responsive Design Workflow and The Mobile Book.Each year that I post the list I hear from someone who wanted a little more information about the books. So part way through the year I started jotting down short reviews of each one. The reviews are nothing earth-shattering, but hopefully they provide at least a little extra glimpse into why I enjoyed a book.As is always the case, if a book is on the list then I enjoyed it on some

Time for the long-running (since way back in 2012!) annual tradition of listing the top five most popular posts on this site of the past year. Here are 2013’s favorites, in order of popularity.Why We Need Responsive ImagesThe responsive image discussion is the Never Ending Story of web technology. Some people were, understandably, getting frustrated and questioning whether it was worth the fuss so I decided to see how much page weight could be saved by serving appropriately sized images to small screens.Windows Phone 8 and Device-WidthBuilding off of last year’s post on snap mode and responsive design in IE10, it turned out the mystery was not yet completely solved as Windows Phone 8 has some odd behavior when it comes to what to return for device-width.Setting a Performance BudgetGetting people invested in performance has to happen from the start of a project. Setting a performance budget is a great way to help with that.Why We Need Responsive Images: Part DeuxReturning to the topic o

I’ve been talking a lot over the past year or so about the importance of moving performance beyond something that is seen as a “developer task”. I was really happy that Stoyan Stefanov let me expand on that for this year’s (excellent!) edition of the Performance Calendar:Bad performance online is not a technological problem; it’s a cultural one. Tools are increasing in number and improving in quality. Posts and books are written explaining the tricks and techniques to use to make your site weigh less, load faster and scroll more smoothly. Yet for all this attention, performance online is getting worse, not better…If we want to reverse the troubling trend of increasingly bloated and slow sites, we need to attack the cultural and procedural issues with the same fervor that we attack the technical ones. Only by thinking about performance throughout the process can we reverse the trend and start making experiences that delight our users, not frustrate them.If you’re interested in more abou

Everyone knows the dream. You go to school/work/some other public setting and everyone starts laughing at you. Horrified, you realize you’ve forgotten to put on your pants that day. Then the therapy sessions start.It’s a common dream because it plays off a very common fear: that of being exposed. Of having nothing to hide (both metaphorically, and in the dream, anatomically).When I wrote my book, I started off writing in a vacuum. The first several months, I quietly put words on a page sharing with very few people outside of my publisher. I was hungry for feedback, but my discomfort outweighed that hunger. I have an incredibly active inner critic (a grumpy little fellow) and he was letting me know rather loudly that sharing what I was writing and thinking was going to expose me too much to people I respected.Surely if I did this, they would discover that I don’t know what I’m doing. That I’m making this up as I go. They’d read what I had written, eyes glued in horror as they realized I

I tried to resist writing this post. I really, really did. I’ve ranted once about the standards process as it related to responsive images. I had no interest in going there again. I’d prefer not to be known as “that ranty Wisconsin dude who sounds slightly Canadian when he talks”.Besides, I hesitated to post a condemnation of the current state of affairs when I didn’t have a solution to offer up.But then I read Jeremy Keith’s beautifully written post “A map to build by” discussing the web and our ability to impact what it becomes. In it, Jeremy said:Perhaps we need our own acts of resistance if we want to change the map of the web. I don’t know what those acts of resistance are. Perhaps publishing on your own website is an act of resistance—one that’s more threatening to the big players than they’d like to admit. Perhaps engaging in civil discourse online is an act of resistance.Jeremy was discussing other issues, but I think those words make sense in many contexts.So let’s consider th

*Big fat disclaimer: The stats below come from tests on Chrome and IE11, because their developer tools expose this sort of information. The impact on other browsers may be less…or more.*Way back in June, I wrote a post about the need for responsive images. The post discussed the topic from the typical point of view: the impact on page weight. But serving large images and then relying on the browser to scale them has other downsides as well.MemoryShortly after the first post, I chatted with Ilya Grigorik a little and he brought up the toll inappropriately sized images can have on memory.Once the browser decodes an image, each pixel is stored in memory as an RGBA value:255 values for red255 values for green255 values for blue255 values for alphaThis means that for every pixel of an image, it’s taking up 4 bytes of memory. It’s pretty easy to see the impact that this can have when you serve large images to the browser. Here’s an example: let’s say we provide a 300px by 300px image and the

On touch devices, a click event has a 300ms delay before firing. The reason for this the delay is that browsers need that buffer to make sure you aren’t going to double-tap on anything. The result is that if you use click events blindly, that delay creates a noticeable lag as users interact with elements on your page.There has been a Google + post by Rick Byers floating around the last few days claiming the best way to deal with the delay was to eliminate the double-tap zoom altogether. With no double-tap gesture to worry about, browsers no longer need that 300ms buffer and can now fire click events immediately.One of the recommendations made was to kill the double-tap gesture on Chrome and Firefox for Android. To do this, you have to kill scaling:On Chrome Android and Firefox this involves using the “viewport” meta tag to disable zooming (with user-scalable=no or initial-scale=1,maximum-scale=1)The popularity of the post concerned me because while the comments discussed it a bit, the

My meager, less-awesome-than-Luke attempt to take notes on Luke Wroblewski’s presentation as I assume it would be unreasonable to expect him to produce notes on his presentation as he does for other talks. Here are my notes on his presentation, “It’s a Write/Read Mobile Web” presented at Smashing Conference in 2013. For more notes from the conference, see Luke’s excellent collection.Top five sites in terms of monthly use in the US are all write/read experiences—they don’t work unless people write content to them.Tim Berners-Lee’s original view of the web—”a place where we can all meet and read & write.”In the United States, 78% of Facebook monthly users are mobile. 60% mobile on Twitter, 40% mobile on YouTube.“The Mobile Moment”—when your mobile traffic crosses your desktop traffic and becomes your majority experience.127% growth of mobile only Facebook users in the last year.40% of all tweets created on mobile in 2011. 3 hours of vide uploaded per second on Youtube mobile. $13 billion

There are many books, articles and presentations that have influenced the way I approach the web today. Its always been one of my favorite parts of this community: a willingness and eagerness to share what we learn with each other. So many blog posts, online publications, and presentations continually challenged me to move forward by presenting new techniques and ways of thinking about the technology I used on a daily basis.One of the ones that stands out is Nate Koechley’s “Professional Frontend Engineering” presentation (transcript and video). When he first gave the presentation in 2008, he was working at this massive company called Yahoo! and was preaching about the importance of progressive enhancement, graded browser support, and the massive scope of knowledge a professional front-end engineer needed to know.I mean, just listen to some of the wisdom that is just as relevant, if not more so, today.On the first of Yahoo’s guiding principles:First is availability — this is the bedroc

Back in 2011, Brad Frost wrote a post on Support vs. Optimization. One of the (many) smart things he said was:The power of the web is its ubiquity. It is the web’s superpower, and its omnipresence is what sets it apart from native platforms.This is what excites me about the web and it’s why web technology tends to be my focus. That ubiquity, that ability to get your information to anyone with a device connected to the web, is incredibly inspiring. This is why I tend to get so frustrated when we do things that eliminate that superpower.When we don’t consider what an experience is like without JS, we’re crippling that super power.When we use techniques that work only on top-of-the-line modern browsers, but don’t consider what happens in other browsers, we’re crippling that super power.When we build fat sites that are incredibly slow to load on older devices or slower networks, if they can even load at all, we’re crippling that super power.When we neglect to consider people with accessibi

When we write about technology online, things can sound a bit black and white. Always do this, never do that.But blog posts and articles can’t cover every scenario. The author knows nothing about your team, your site, your business goals, your deadlines, the behavior of the people who visit your site or the technology they use to visit with. There are characteristics of projects that may make a prescribed solution inappropriate.A great example comes from an email conversation I had with Ilya Grigorik (who is wicked smart, by the way) in response to my last post on responsive image weight. One of the things he mentioned was the gray area of whether or not it was fair to count the entire cost of an undisplayed image as wasted or not.The example he cited was Breaking News. On a small viewport the site uses tabs for latest and most popular posts. By default, the latest posts are displayed. These are a series of tweets with no images other than the Twitter avatars.The popular tab—not displa

The topic of responsive images has been one of the most hotly debated topics amongst web developers for what feels like forever. I think Jason Grigsby was perhaps the first to publicly point out that simply setting a percentage width on images was not enough, you needed to resize these images as well. He showed that if you served appropriately sized images on the original responsive demo site, you could shave 78% off the weight of those images (about 162kB) on small screens.The discussion has evolved since then with debates over what sort of solution we need (server-side, client-side), new markup (srcset vs picture) and even, in some cases, wondering whether we really needed to worry about it at all.It’s a messy issue for sure. The current solutions for responsive images do come with some complexity and overhead. If you’re using a client-side solution and don’t want to make more than one request per image, then you end up breaking the preloader. As Steve Souders explained rather well,

A week from now I’ll be on a plane heading to Amsterdam for the excellent Mobilism conference. This is year three for them, and you only need to take one look at this year’s program to see just how incredible the event is going to be. The lineup is full of great speakers with fantastic topics to discuss! Just as impressive is the list of attendees—there’s sure to be some great discussions with a group like this all in one place.This will be my first time hanging out at Mobilism and I couldn’t be more excited. When I was involved with BDConf, we always saw Mobilism as being very similar: a conference that aimed to push the envelope on the discussion of the web on mobile and other emerging devices.I’ll be playing the role of MC this year. They’re going to use a different style of Q&A where instead of trying to run a mic back and forth across the room, attendees can post their questions to Twitter (using a hashtag that will be mentioned frequently at the conference) throughout the talk. W

Responsive design has many challenges. Performance. Tables. Images. Content. Testing. Each of these, and so much more, must be carefully considered. Most of the solutions are still coming together. We are, as some have been apt to say, making this up as we go.One of the biggest challenges for many is the workflow: how do you find a process that works for building and designing something intended for such a wide range of devices, input types and contexts? It’s not an easy discussion, particularly for people and companies who are used to a very rigid waterfall method. That’s why I was thrilled when I first heard that Stephen Hay was going to write Responsive Design Workflow.Stephen walks you through his workflow for designing and developing responsive sites. There’s a lot to love about it. Each step in his workflow seamlessly builds upon the step before it. Documentation and deliverables are generated automatically as the site is built so there isn’t a need to manually update them. This

On June 14th, I’m going to teach a one-day Implementing Responsive Design workshop at the McNamara Alumni Center in Minneapolis. The workshop will run the full day and will go from the core tenants of responsive design through to more advanced topics such as performance optimization, feature detection, RESS and more. We’ll cover topics from the book, as well as a loads of new stuff.I want to keep it relatively small, so attendance is going to be limited to 30 people. That way everyone should have ample opportunity to ask questions and contribute to the discussion. The workshop is intended to be a bit flexible and include topics that you want to see covered.Registration for the complete day is $350 and opens, well, now. Parking will be covered, and breakfast, lunch and coffee will be provided. In addition, thanks to Peachpit, everyone who attends will get a copy of Implementing Responsive Design to read, sell, or use as a doorstop—your choice.To see more details or to register, please h

There has been a lot of interesting chatter regarding SVG as of late, including thorough posts by David Bushell and Chris Coyier. One aspect in particular that is getting quite a bit of attention is the ability to embed media queries within SVG files. Even more amazing is the fact that this was first talked about by Andreas Bovens of Opera all the way back in 2009!The renewed interest in the technique makes a lot of sense. In 2009 using SVG wasn’t a very viable option, but the landscape has improved quite a bit since then. This has lead to some very interesting ideas such as Estelle Weyl’s experiment using SVG to display different raster images.There are simpler applications as well. Say you have a logo that includes a slogan. When the logo is displayed at a small size the slogan can become illegible. At those sizes it may make the most sense to simply hide the slogan allowing the rest of the logo to display. With embedded media queries you could apply an id or class to the portion of

Jason Grigsby once quipped that “We’ve remade the Internet in our image….obese.” He was right, of course. Average page weight and number of connections has been increasing at a rather alarming rate.This is why I’ve been so happy to see the recent rash of posts discussing performance as a fundamental component of design. The latest comes from Mr. Brad Frost. He makes the case that performance is not just something developers need to worry about, but that it is an “essential design feature.”One of the things he suggests doing is mentioning performance in project documents.Statements of work, project proposals and design briefs should explicitly and repeatedly call out performance as a primary goal. “The goal of this project is to create a stunning, flexible, lightning-fast experience…”It’s an excellent point. Performance should be brought up early and often to emphasize its importance. Not considering it from the earliest stages of a project is a surefire way to end up with slow and bloa

When I wrote about IE10 and the new snap mode back in October I advised using width: device-width to fix responsive design in snap mode instead of Microsoft’s recommendation, which was to use width: 320px. Using device-width is a far more future friendly approach and testing I had done on a tablet running Windows 8 showed this worked just as well.However, the other week Matt Stow discovered that device-width wasn’t getting the job done on a Lumia 920. Apparently the Lumia 920 (which boasts a 4.5” screen) reports a viewport width of 768px for device-width, which is much larger than what you would expect for a device its size.Tomomi Imura, who has done a lot of testing around viewports, apparently discovered this behavior awhile back:So it is correct <meta name=viewport content=width=device-width> gives 320px width, while @-ms-viewport {width:device-width} 768 on Lumia 920” (Source)Here’s where things get interesting. When you use device-width inside the meta tag on Windows Phone 8, it r

For the third year in a row, my book count is trending in the wrong direction. In 2009, it was 38. In 2010, it was 33. In 2011, that number fell to 29 and this past year, that number plummeted to 21.Not only do I think reading is important, but it’s also something I enjoy a bunch and probably the closest thing I have to a hobby. However this year the reality is that I just didn’t set aside much time for it. Whereas I used to read at least 30 minutes each night before bed, this past year I spent that time writing my own book and doing a large number of side projects in preparation for starting to work independantly.There was a point while writing my book that I just didn’t feel like I had the energy to read anything substantial, which is why there is a pretty heavy increase in the number of fiction books this year. I also read a very unusually small number of non-industry related non-fiction, something I plan on remedying next year.Also of interest, at least to me, was that this was my

On December 10th, I officially started working independently. I keep meaning to get this posted, but the past three weeks have been a bit of a whirlwind with the holidays and a few training sessions mixed in.To say I’m leaving an excellent job behind is an understatement. The position was flexible. The people I worked with were smart, talented and fun. The people I worked for were flexible and willing to let me experiment with different ideas.I got to help organize a conference, 4 of them in fact. I got to watch as the conference grew, watch the community that built up around it, and learn from all the people who came to hang out and talk mobile for a few days.Yet I left. So very clearly I’m slighty insane.I was getting an itch though to shake things up though. Some incredibly exciting opportunities were coming my way, and I felt I couldn’t pass on them. It was a tough decision, to say the least.I’m excited though. Excited about some of the projects coming up and excited about some of

It’s the end of the year which means that “Best of 2012” articles are all the craze. Far be it from I too abstain from such memes. Here, then, are the five most popular posts on this site from 2012.##WTFWGWhere-in I get unusually riled up and rant about the picture vs. srcset situation and how it was handled. The conversation has evolved, but I still have concerns about how parts of the process were handled.##Media Query & Asset Downloading ResultsA look at the results from the tests I ran to see how images (both background and content-based) are downloaded when media queries are involved.##IE10 Snap Mode and Responsive DesignIE10 is generally a huge step forward, but when in the new “snap” mode, it ignores the meta viewport element. Here’s the fix and some of the reasons for why the move was made (it was a concious choice, not a bug).##Blame the Implementation, Not the TechniqueThere is a disturbing trend in our industry to blame the technique when we should be blaming the way it was

Back in October, I talked about the problem we have of blaming the technique instead of the implementation. I mentioned several examples, but the one that really prompted the post was the myth of responsive design equaling bad performance.The folks over at 24 Ways were kind enough to let me dig a little deeper into the issue. It’s sort of an extension of what I was driving at back in October (as well as what I was whining about in January), but with some concrete suggestions.To whet your appetite a bit:We love to tout the web’s universality when discussing the need for responsive design. But that universality is not limited simply to screen size. Networks and hardware capabilities must factor in as well.The web is an incredibly dynamic and interactive medium, and designing for it demands that we consider more than just visual aesthetics. Let’s not forget to give those other qualities the attention they deserve.While you’re at it, dig through the rest of the articles from this year’s ca

Maximiliano Firtman has done an excellent job providing an overview of what to expect from IE10 in Windows 8, but I wanted to dig just a little deeper on one feature in particular.In Windows 8, there are two “modes” of use: Metro mode and classic mode. Metro mode sports the spiffy new UI while classic is the same old boring Windows of yore. When you run Internet Explorer 10 in Metro mode (the default) there’s a cool new feature that lets you “snap” a window to the side so you can use two simultaneously. This window, of course, is made to be far more narrow.Here’s the wrinkle: when snapped, IE10 ignores the meta viewport tag for any viewport smaller than 400 pixels in width (which it is, when in snap mode). This in turn messes up your beautifully set responsive plans and results in the same kind of smart scaling you see on non-optimized sites on an iPhone or Android device.To get IE10 in snap mode to play nicely you have to use CSS Device Adaptation. For the unfamilar, CSS Device Adapta

Stop me if you’ve heard this one before.“Responsive design is bad for performance.”“User agent detection is bad. Don’t segment the web.”“Hybrid apps don’t work as well as native apps.”“CSS preprocessors shouldn’t be used because they create bloated CSS.”If you create for the web you’ve no doubt heard at least a couple ofthese statements. They’re flung around with alarming frequency.There is a fundamental problem with this line of thinking: it places theblame on the technique instead of the way the technique was implemented.Generalizing in this way discredits the validity of an approach based onpoor execution, and that’s a very harmful way of thinking.With any of the examples above, the technology itself wasn’t theproblem. CSS preprocessors, PhoneGap, user agent detection, responsivedesign—these are tools. They are neither inherently bad or good. Theirquality depends on the way you wield them.I’m not a carpenter. If you asked me to build a table you would end upwith a lopsided, three-le

Nancy Ruenzel over at Peachpit was kind enough to have me on her “Author Talk” podcast. We chatted a bit about the book, responsive design in general, and Breaking Development.Go ahead and give it a listen.

It wasn’t what I was expecting, but it ended up being just what I needed.When one of the people who attended Breaking Development in Dallas, told me that on the last day of the event, I couldn’t help but smile. Single-track events are awesome, but they’re always a little nerve-wrecking as well. How do you balance code and design, pragmatic and conceptual? Each of those discussions has to happen to move the discussion forward, but balancing can be a challenge.Sometimes the single track thing can scare people off. If you’re a designer, do you really want to sit through a bunch of talks about code? If you’re a developer working at a large corporation, do you really care about conceptual looks at what mobile could become? On paper these discussions sometimes feel like they’re going to be something that might not apply.It’s often said that one of the great things about single-track events is you avoid the feeling of “missing out” which often comes with multi-track events. That’s certainly t

Jeremy Keith just wrote a post about mobile navigation icons wherein he talks about the “three lines” icon that Andy Clarke also advocated when he explored the topic earlier.Theoretically, it would be easy to create the icon using Unicode symbols. For instance, you could create the icon by using the following HTML:Unfortunately, as Jeremy points out, many mobile devices fail to handle it correctly. Android and Blackberry devices, for example, don’t display the icon as intended.I recently wanted to use the icon, and ran into this same issue. Inspired by Nicolas Gallagher’s post on pure CSS generated icons, I was able to get the icon to render nicely in about 10 minutes of CSS wrangling. So, if you’re dead set on rendering the icon without using an image, here’s how you can render it in CSS:></li>li { list-style-type: none;}#menu{ position: relative;}#menu a{ padding-left: 20px;}#menu a:before { content: ""; position: absolute; top: 30%; left:0px; width:12px; height:2px; border-top: 6px

Yesterday we released the very first episode of the Breaking Development Podcast. I’m super excited about this! Much like the conference, the podcast will focus on web design and development for mobile and beyond. It’s primarily going to be interview based, but we’ll probably also shake it up every once and awhile and do something a little different.A podcast seemed like a really fun idea. It’s an awesome time to be working on the web, and there are so many fascinating discussions to be had. The way I see it, the best case scenario is that people will like the show, listen, and keep coming back for more. The worst case scenario is people won’t like it, but I’ll be able to use it as an excuse to talk to super smart people on a regular basis about topics that interest me. I really don’t see a downside here.The first episode features two guests: Erik Runyon from the University of Notre Dame and Dave Olsen from West Virgina University. They’ve both been doing some awesome responsive work f

As of today, I no longer have to say “I’m working on a book…”. Implementing Responsive Design: Building sites for an anywhere, everywhere web is officially in-stock on Amazon as well as at Peachpit (Barnes & Noble is a hair behind, it would seem).This all means that there are already people reading the ebook, and others will have the paperback within the next couple of days. This is both terrifying and exciting.As I stated back in January, the book is an exploration of how a responsive approach applies to your entire workflow. It starts with a few chapters laying down the groundwork: media queries, fluid layouts and fluid images. Then it builds from there and talks about how responsive design affects planning, design workflow, content, and how to build introduce feature detection and server-side enhancements.I’m very happy with the result. Proud even. The early reception has been great, and the fact that so many people who I admire and respect have had such nice things to say means a t

This morning, Ian Hickson emailed the WHATWG mailing list mentioning that a attribute that was currently being discussed on the list (srcset) is now added to the draft of the spec. To understand why this sucks, a little background is needed.Responsive images are a difficult beast to tame: there really isn’t a good solution for them today. As a result, some discussion started on the WHATWG mailing list months ago about what to do. The WHATWG pointed out that the list was for standardizing and suggested it would be better if the discussion were moved into a community group.So, obediently, a community group chaired by Mat Marquis was started (in February). A lot of discussion took place about the appropriate way to handle responsive images and one solution, the new picture element, garnered the majority of support.On May 10th, the previously mentioned srcset attribute was presented on the WHATWG mailing list by someone from Apple.That same day it was recommended to the list that they take

If you’ve gone to a BDConf (more on the recent Orlando event very soon!), you know we keep the focus pretty tight: web design and development for beyond the desktop. No native discussion, just web. We thought it would be fun to get even more focused. So on June 4th in Minneapolis, we’ll host the first ever BDConf:focus on event and do a deep dive into responsive design: all day, all responsive.The lineup is amazing. Seriously.Dave Rupert, lead developer at Paravel, co-host of the ShopTalk podcast, and creator of awesome tools like FitVids and FitText, will get the day kicked off with a four hour workshop.After lunch, Mat Marquis will get the afternoon started with his presentation, “Next Steps for Responsive Design”. Mat worked on the Boston Globe project and heads up the Responsive Images Community Group for the W3C, so he’s got some hard-earned experience to pull from. He’s also a seriously funny guy.Then, Kristofer Layon will present “The Minimal Viable Web”. Kristofer is the author

A little while back, I mentioned I was doing some research for the book about how images are downloaded when media queries are involved. To help with that, I wrote up some automated tests where Javascript could determine whether or not the image was requested and the results could be collected by Browserscope for review. I posted some initial findings, but I think I’ve got enough data now to be able to go into a bit more detail.First, any credit has to go to the awesome team at Cloud Four. Most of the tests were created by them for some testing they were doing. I just added some Javascript to automate them.On to the results!Test One: Image TagRun the testThis page tried to hide an image contained within a div by using display: none. The HTML and CSS are below:The resultsIf there is one method of hiding images that I can say with 100% certainty should be avoided, it’s using display:none. It’s completely useless. It appears that Opera Mobile and Opera Mini don’t download the image (see t

Whether or not to design in the browser is an often debated subject. The latest discussion seems to be prompted, in part, because of the recent Responsive Summit (by the way, if you haven’t done so already, be sure to check out a few recaps of the day).Mark Boulton just put his thoughts to screen with a post entitled “Responsive Summit: The One Tool”. In it, he makes the case that knowing your materials is more important than using a specific tool. He makes an excellent point when he discusses why he feels comfortable in Photoshop:Since 1997, I’ve been working almost exclusively on the web. Throughout all of that time, the realisation of what the projects would look like are done in Photoshop. That means, yes, I’ve been using Photoshop in a production environment for fifteen years. Malcolm Gladwell said it takes 10,000 hours, or 10 years of repetitive use, to become an expert in something. I guess that means I’m an expert in creating pictures of websites. Photoshop is like an extension

When you’re building a responsive site, there will undoubtedly be times when you need to change a background image, or when you need to hide an image for a specific resolution range. Unfortunately if you’re not careful, this can lead to multiple images being downloaded even when they aren’t being used. A few people—including Jason Grigsby, Greg Rewis and Aaron Mentele—have done some excellent testing about how images are downloaded when media queries are involved. So far, the tests have been conducted using manual methods. There is absolutely nothing wrong with that, but I wanted to find a way to make the testing more automated so that a wider group of people could contribute to the test results.To that end, I’ve hacked together a few tests (using Jason’s tests as a starting point) that store their results in Browsercope. The test is fairly simple. For each test case, I check to see if the background image (or content image) has been loaded by checking the image.complete property. The

There is no shortage of information floating around today. There are a multitude of books, magazines, newspapers, blog posts, articles, videos and podcasts just clamoring for our attention. It’s an incredible thing, this wealth of information we have at our fingertips. Never before has so much knowledge been so easily accessible.We’ve responded by creating a lot of tools that help us collect this information. We can easily store quotes, snippets or even full articles in any one of a hundred different sites and services. We can save links to the videos and recordings that moved us on some level. RSS feeds make it incredibly easy to consume massive quantities of online articles and blog posts. Tools like the incredible Ifttt help make our many online services interact with each other, further easing the process of collecting information.But what happens to that information after it has been carefully tagged and stored away? The more new information we collect, the more old information ge

Smashing Magazine just launched their newly redesigned site. Personally, I think it looks pretty great. The ads are a little distracting perhaps, but other than that, the side content mostly gets out of the way leading to a pleasant reading experience.And of course, it’s responsive. That adds another level of loveliness. The navigation adjustments in particular are kind of interesting to watch. My favorite layout is the last one to kick in before you hit 1020px. It’s clean, easy to read, and the ads are not yet there.But….There’s a catch here. For as lovely as the site looks, there’s a lot going wrong from a technical perspective.PerformanceFor starters, the size. Even on my phone, the site weighs in at a massive 1.4MB. A large part of the issue is that those ads, the same ones that don’t display below 1020px, are still being requested and loaded on smaller resolutions. They’re just being hidden with a little touch of ‘display:none’.When I tested, the site also made about 90 requests.

So, I’m writing a book on responsive enhancement for New Riders.To say I’m excited is a bit of an understatement. I love sharing what I know, and writing a book has been something I’ve wanted to do for a long time. I’m not sure of the exact publication date yet, but it looks like the book should be out sometime in the second half of the year.Uh…there’s already an awesome book on responsive web designWhy yes, there is, and I wholeheartedly recommend buying a copy. Like, now. Ethan’s book is a brilliant read. I even wrote a glowing review shortly after finishing it. In that review, I said I was pining for a sequel—something that would build on the core principles Ethan discussed. When Michael Nolan of New Riders got in touch a few months ago and asked if I was interested in writing a book, I saw it as an opportunity to get that book written.More info, please!The book will be an exploration of how a responsive approach can be integrated into the workflow—from planning and early mockups th

A new year has begun. That means that it’s once again time to take a look back at what books I read over the past year. Unfortunately, it appears I’m trending entirely in the wrong direction. While I managed to read 38 books in 2009 and 33 in 2010, I only made it through 29 this past year. Hopefully I can reverse that trend in 2012.One interesting trend—at least to me—is that I returned to reading a lot more web related books (10!) this year. This is in no small part related to the A Book Apart series. If they keep churning out quality books like this, that count is likely to stay very high.As always, if the book made this list, then I enjoyed it on some level. There are far too many good books out there to suffer through one that doesn’t interest me. If I’m not enjoying it I set it aside.If you’re looking for specific recommendations, “The Invisible Man” (which I had read before and will read again) and “The Demolished Man” top my (short) list of fiction. “Obliquity”, “Marshall McLuha

I always look forward to the December return of the all the lovely advent blogs that are full of web goodness. Sites like 24ways, PHPAdvent and the Performance Calendar mean that I’ll have something to look forward to reading each day. So I was very excited when Stoyan asked if I would like to write another post for the Performance Calendar this year.This year’s post is an overview of how inconsistent mobile networks are, as well as a plea for more communication between carriers, manufacturers and developers. If you’re interested in mobile performance, please give it a read.Be sure to check out the rest of the articles there as well. As usual, there’s lots of good content already posted with more sure to come. In particular, I recommend Stoyan’s post on asynchronous snippets, Guy’s look at when you should and shouldn’t inline resources, and a post on localStorage performance by Nicholas.

According to a recent report, by 2015 more people in the US will be accessing the Internet using mobile devices than through PCs. If this was the only thing mobile had going for it, it would be enough to justify the need for Luke’s new book ‘Mobile First’.Luke argues that you should design, and build, your mobile experience first. He hits you (gently) over the head with data point after data point making it increasingly obvious that this mobile first technique not only makes sense, but should in fact be the de facto standard for creating sites on today’s web. He makes his case carefully, succinctly and convincingly.After he has you sold on the importance of this approach, he spends the rest of the book arming you with the information you’ll need to start creating better mobile experiences. He walks you through how to organize your content, develop appropriately sized touch targets, embrace new touch gestures, simplify the process of input on mobile devices and more. Amazingly, he manag

Well that was a blast.After months of planning, the second ever Breaking Development conference came to an end the other week. To say that it was fun and inspiring would be selling it short. To some extent, I am still recuperating but I thought I should post my thoughts while things are still fresh in my mind.The SpeakersThe speakers did an absolutely incredible job! There was plenty of pragmatic information to take back and apply right away, but there was also a lot of talk about the future: where we need to be and what we can do to get there. We’ll get video posted of all the talks at some point in the future, but for now, be sure to check out all the decks at Lanyrd. Scott Jenson recorded his presentation off his laptop, so his deck includes accompanying audio. I can’t recommend his presentation enough. It was a call to arms: a forward-thinking and inspiring talk to conclude the first day of the conference.Every once in awhile I hear a question or two about the timing of the release

Ethan Marcotte’s Responsive Web Design is an example of what can happen when an incredibly intelligent person is allowed to write in their own voice about a technique that they not only firmly believe in–but that they are using every day. It’s a compact book but Ethan manages to fill it full of plenty of information and he does so in a conversational, often humorous tone that will make you laugh at one sentence and then force you to thoughtfully ponder the implications of the next.Ethan doesn’t present RWD as an end-all-be-all approach. He simply presents it as a potential solution (a good one). In his own words:…more than anything, web design is about asking the right questions. And really, that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility.He does discuss the three main ingredients he laid down in his original article (flexible images, media queries and fluid grids) but he goes beyond that and acknowledges some of

For the last few months, I’ve been wondering if the term ‘mobile’ might be causing more trouble than it’s worth. Judging from this morning’s tweet from Mark Boulton, I’m not alone:Thinking ‘mobile’ web is a big, fat red herring. Just like ‘apps’ was a few years ago. Next year, it’ll be something else.While I’m not willing to go quite as far as that, I do think the term has become loaded with historical assumptions that are no longer true.Originally, it worked out alright. ‘Mobile’ came to encompass both the device and the context of use in one fell swoop. It could do that, because their wasn’t a lot of diversity in the kinds of devices you could call ‘mobile’. In addition, those devices lacked the capability of offering a full-web experience. ‘Mobile’ use was pretty clearly defined because to be quite honest - the devices weren’t capable of offering much more.{% fig The word ‘mobile’ is loaded full of historical assumptions. banner %} An old phoneFast-forward to today. Now, using the h

I enjoy sharing what I learn with other people (though by the frequency of my blog posts lately, you might not be able to tell that). I also enjoy a good conference. They’re a great way to keep up in this fast moving industry, and to learn from the speakers and attendees alike. I’ve been lucky enough to be able to put the two together and present at a couple upcoming events this month.On May 25th, I’ll be giving a talk on Mobile Web Performance Optimization for the Web Performance Summit. It’s an online event, and the lineup looks fantastic! Considering the low cost of attendance (not just the ticket price - but no travel costs!) I’m not sure how you could afford to pass on it if you’re at all interested in performance.Then, on the 27th, I’ll be giving a shorter presentation at WebVisions in Portland entitled “Can Media Queries Save Us All?”. In case you’re wondering—it won’t be a full-out cheerleading session for media queries (or RWD). There are some very real issues with the techniq

Yesterday the last of the topics for Breaking Development was announced. I couldn’t be happier with how it all turned out! I think there’s an awesome mix of talks that are going to really challenge people to reconsider how they approach mobile development.Also, since last I wrote about the event, we added a special half hour talk by Brian Alvey. Brian has a ton of experience managing the content for some major mobile applications and I think his talk on mobile and the cloud is going to be a great addition to the lineup.In addition to the topic selections, we’ve been spending a lot of time lately figuring out how to handle the food (I think we’ve got something both unique and cool lined up for that!) as well as the bevy of other little details that go into getting a conference up and running.There are still tickets available and we’ll be selling them right up to, and at, the door. As a reminder, the pass includes attendance for both days (13 talks) as well as admittance to the opening n

There is an active, and very interesting, debate taking place right now in the web community about the merits of responsive web design—particularly how it applies to mobile. On one side of the fence you have the “one web” group who believe that you should be delivering the same content to both mobile and desktop users, typically anchored by a responsive approach. On the other side of the fence are people who believe that mobile requires much more than responsive design is capable of and therefore write the technique off as little more than a band-aid on a gunshot wound.The primary issue that those opposed to the one web approach tend to mention is that responsive web design ignores the mobile context. This, of course, broaches the question: What exactly is the mobile context? The answer is not particularly clear.It used to be. The mobile user used to be always on the go; trying to consume location related and task-oriented content very quickly. The problem is that this is not necessari

Mandy Brown very recently posted a thoughtful and well articulated look at the importance of digital preservation. Her post was sparked by a flurry of sites that have recently been either dissolved (Cork’d), “sunsetted” (Delicious) or simply completely removed from existence (Geocities). She also mentions the infamous data loss of Ma.gnolia where many people (me included) lost the bookmarks we had been carefully collecting and curating.Her post, along with recent posts by Stephen Hay and Alistair Croll have got me thinking quite extensively about hosting my own data—everything from bookmarks to tweets. Tantek Celik is already utilizing his own home-brewed solution to do this, and he recently posted about his stance on hosting your own data.This is what I mean by “own your data”. Your site should be the source and hub for everything you post online. This doesn’t exist yet, it’s a forward looking vision, and I and others are hard at work building it. It’s the future of the indie web.Righ

Yet again, the debate over whether or not HTML5 should be used as a buzzword is rearing it’s head. This time, the instigator is a seemingly unlikely group–the W3C itself!The W3C just released an official HTML5 logo that would look quite appropriate on any superhero costume with a cape (see SuperHTML5Bruce as evidence). The issue, as I see it at least, is not really with the logo itself. Sure, it’s kind of an odd idea, but it’s pretty well designed and could theoretically be a good way to market the new standard.I say theoretically because in it’s current form it fails, at least if we are measuring by accuracy and clarity. To take a quote directly from the site:The logo is a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.In case you didn’t catch the blunder, the W3C is basically lumping a variety of technologies under the HTML5 buzzword that has become so popular. There’s been great discussion online about whether th

It seems I stirred the pot a little more than expected with my post calling for the death to captchas. If you haven’t read the post, it was basically a rant detailing all the issues with captcha systems—accessibility and usability concerns primarily. My goal was to identify the problem, but quite a few people called me out for not taking the time to highlight alternatives (I actually did mention Akismet, but only in passing). The criticism was fair enough and since there appears to be interest, I thought a follow-up post pointing out three alternative solutions that don’t interrupt the user would be a good idea.Just a warning ahead of time because I know people are going to mention it—none of these solutions are 100% foolproof, just as captchas are not 100% foolproof. I acknowledge that, but that’s beside the point. While it would be nice to use a system that detects and eliminates 100% of the spam without any false positives, I don’t think that’s a realistic expectation at this point

A brief exchange on Twitter led me to think about one of the things I most definitely do not love about the internet—captchas. While I won’t go quite as far as to say captchas are the spawn of Satan (let’s wait for the DNA tests before we go that far) I will say that I believe they are not only the wrong solution, but an arrogant and inconsiderate one.Firstly, it is worth pointing out that captchas are nowhere near as secure as you’d like to believe. Back in 2005, the W3C pointed out that third party services had demonstrated that most captcha services could be defeated with 88%-100% accuracy by using some simple OCR. I suspect that since then captchas have probably gotten a bit better, but spam bots probably have as well.Then of course there are the accessibility issues. In particular, visitors who suffer from blindness, dyslexia or low vision will struggle greatly with a captcha system. You can aid them slightly by offering an audio alternative, but the audio used in captcha systems

Continuing what I started last year, here’s the list of books I managed to read this year. I read slightly fewer books this year than last (33 compared to 38). I didn’t exactly aim high (in last year’s post I said I wanted to read at a “similar pace”) so I guess I didn’t fail that miserably. I’m slowly reducing the amount of movies and TV I watch, so hopefully that will provide a little more room to read a bit more in 2011.As I stated last year, I don’t finish books that I am not enjoying, so each book in the list below I’d recommend to varying degrees. If I’m picking favorites, I’d have to go with Ender’s Game, The Gun Seller and Daemon for my favorite fiction reads. My top three non-fiction books this year (excluding the web-related ones) would be Amusing Ourselves to Death, Flow and Better Off.Brave New World by Aldous HuxleyAmusing Ourselves to Death by Neil PostmanWhat the Dog Saw by Malcolm GladwellI, Robot by Isaac AsimovFlow by Mihaly CsikszentmihalyiDirk Gently’s Holistic Dete

A bit late to the game, but I was honored to write an article for this years Performance Calendar earlier this month. The article was a gentle introduction to using Phing to automating performance tasks. Fitting right in with the “Performance Toolbelt” posts I started adding to the site this year, it introduces yet another freely available tool that can greatly simplify the process of optimizing performance.Be sure to check it out. While you’re at it, have a look through the rest of the articles. There’s some great stuff in there about mobile performance, new tools, the state of WPO in general, response and request headers, etc. Definitely worth browsing through.

Jeremy Keith recently wrote a post about some of the false dichotomies in web development. When faced with two options, we are often presented with a solution that paints one option black and one white as if there was no middle ground. I’ve attempted to write a post along a similar lines many times, though to be perfectly honest, none of my drafts painted the scene quite as well as Jeremy did:In the world of web development, there are many choices that are commonly presented as true or false, black and white, Boolean, binary values, when in fact they exist in a grey goo of quantum uncertainty.What prompted my thoughts on the subject (at least recently) was a post on Simply Accessible entitled Speed vs. Accessibility. In the post, Derek Featherstone tells a story of someone who went so far as to change their markup, in a manner that made it significantly less semantic, in order to save a few bytes in file size and therefore improve performance. The result? They saved about 50 bytes, but

So technically the site has been live for a month or so now, but since we just finalized our speaker lineup, I thought now would be a good time to “announce” Breaking Development 2011—a conference I’m helping to organize in Dallas, TX on April 11-12th.Breaking Development is a two day conference dedicated to mobile web design and development. I’m incredibly proud of the speakers we were able bring on board—with presenters like Peter-Paul Koch, Luke Wroblewski, Jonathan Snook, Nate Koechley and Jason Grigsby (just to name a few—the full list of speakers is available on the site) I think we’ve created an event chockfull of quality content.I am also pretty excited about the format of the event. Often, the most valuable experience of a conference is the informal conversations and friendships that are formed in between sessions. We really wanted to encourage that type of discussion among the speakers and attendees so we molded the event around that idea: attendance is small (there will only

Three seconds does not always equal three seconds. Our perception of time is greatly skewed by a variety of seemingly unrelated factors, making it easy for us to perceive 3 seconds as 5 seconds, or as 1 second. Since ultimately it is how fast the user thinks our site is that matters, regardless what the stats say, we need to be very aware of these extraneous factors that influence their perception.One such factor is color. Different hues, values and saturation levels can all influence how a person perceives time. Typically, this can be linked to how “relaxed” or “stressed” a user feels during the wait. The more relaxed they feel, the shorter the wait will feel. It’s entirely possible that a stressed user may feel as though a site is very slow, while a relaxed user may feel that same site is very responsive.So how do we induce a feeling of relaxation using color? For starters, we can choose blue hues as they elicit the most relaxed feeling state. In sharp contrast, yellow and red hues g

I was reading an excellent post by Jonathan Harris entitled “Our Digital Crisis” and one section in particular jumped out at me. Harris was talking about how our online tools are better for breadth than depth and generally increase noise.We trade self-reflection for busyness, gorging ourselves on it and drowning in it, without recognizing the violence of that busyness, which we perpetrate against ourselves and at our peril.Of course this isn’t exactly a new issue. Henry David Thoreau was lamenting our propensity to clutter our lives way back in 1854 when he wrote in Walden that “Our life is frittered away by detail.” It’s just that now it’s become easier for us to clutter our lives.In fact, it would seem that our busyness is one of the greatest personal challenges that we face in the digital age. Our always connected lifestyle means that while we always have quick access to our email, Facebook messages and tweets, we rarely have moments of quiet, uninterrupted reflection and relaxation

Performance optimization is the Rodney Dangerfield of web development–it “don’t get no respect”. In spite of its great importance in the overall user experience, it is all too often pushed aside and treated as an afterthought. In my conversations with designers and developers who don’t optimize, a few of the same myths are constantly brought up.Performance optimization isn’t that necessary. This misconception doesn’t stem from a lack of caring–most of the people I talk to truly care about crafting a good user experience for their visitors. I think this myth stems more from a lack of awareness. Most of us work on connections that are typically quite a bit faster than that of the average internet user. As a result, we experience the web differently than our users. In addition, most of the people I talk to just haven’t heard about the studies that have come out regarding the effect of performance on the user experience.Performance optimization is too difficult and takes too much time. The

In an interesting post on the Harvard Business Review, Tony Schwartz argues that happiness is overrated:…when we seek happiness as the ultimate state, we’re destined to be disappointed. Absent unhappiness, how would we even recognize it? If we’re fortunate, happiness is a place we visit from time to time rather than inhabit permanently. As a steady state, it has the limits of any steady state: it’s not especially interesting or dynamic.He goes on to talk about how our desire for happiness is derived from our impulses to avoid pain and to seek gratification, and the problem with taking those impulses too far:But it also turns out that pain and discomfort are critical to growth, and that achieving excellence depends on the capacity to delay gratification.When we’re living fully, what we feel is engaged and immersed, challenged and focused, curious and passionate. Happiness — or more specifically, satisfaction — is something we mostly feel retrospectively, as a payoff on our investment. A

In an old, but still relevant, article from Wired, Brian Eno talks about the value of designing with limited options:Designers struggle endlessly with a problem that is almost nonexistent for users: “How do we pack the maximum number of options into the minimum space and price?” In my experience, the instruments and tools that endure (because they are loved by their users) have limited options.He further elaborates, explaining our desire for intimacy with our tools:With tools, we crave intimacy. This appetite for emotional resonance explains why users - when given a choice - prefer deep rapport over endless options. You can’t have a relationship with a device whose limits are unknown to you, because without limits it keeps becoming something else.It’s not a revolutionary concept, designing and building only what is necessary, but it’s a good one to keep in mind. With tools, it’s often better to be the master of few than the jack of all trades.

Twitter is abuzz (and not in a good way) over an article that was posted yesterday at econsultancy.com on HTML5. The issue is that the article is passing around inaccurate information about what HTML5 actually is. Like this little tidbit:Those cool bouncing Google homepage balls everyone was talking about last week were an example of HTML5, but if you want to see an example of what the format can really do, take a look at this.When the first couple of commentors questioned the accuracy of the information, she responded by stating that:According to numerous sources, the balls were indeed in HTML5, specifically CSS3, part of the standard.Now as most developers will tell you, CSS3 is most certainly not a part of the HTML5 spec. They’ll also be quick to tell you that Google didn’t actually use HTML5 for that logo—it was in fact just a series of divs (a poor structural decision).Here’s the thing though—she’s right. There were articles that said that Google was using HTML5 for the logo. Ther

Far too many projects and marketing campaigns today start by answering the question “What value does this have for our company?” The question shouldn’t center around the company, the question should center around the users. What we should be asking is “What value does this have for our users?”It’s a very simple concept, but it is one that, if adhered to, would fundamentally alter the priorities of a project. If the user comes first, SEO takes a backseat to content strategy. Accessibility and performance cease being afterthoughts and become crucial components of a site. More time is given to user research to determine what users expect to find on your site, and where they expect to find it.The irony is that by putting the users first, the success of the project would greatly be improved. Build something that users care about and want to use and they’ll reward you with their loyalty.Imagine if every company took the time to ask, and more importantly to answer, this question before launch

I was recently working on a site whose code I was inheriting and the pages took much longer to process than I would’ve liked. Caching helped, but I wanted to get to the underlying issue so I fired up Webgrind to see if I could trace the problem.Webgrind is a freely available PHP profiling frontend that sits on top of XDebug. Using it, you can see how many times different functions are called and find what functions called them. You can also quickly see the inclusive cost (time spent inside a function plus calls to other functions) and self cost of each function.Viewing the logs for the last page load, I could see that mysql_query was called a whopping 52 times and accounted for 84.93% of the processing time (which was at an unacceptable ~3.1ms).Using the Webgrind frontend, I was able to trace back 23 of those calls to one function. In turn, this function was called by one other function 17 times. I decided to focus there first.Again, with the help of Webgrind, I could see that this fun

The SXSW panel picking madness started last Wednesday. After attending the conference twice, I finally got around to submitting a talk this time around. If you’re interested in web performance, neuroscience, and in particular how those two areas intersect, feel free to give it the old thumbs up. Either way I’ll be attending (already registered and got the flight and hotel booked) but I’d love to get the opportunity to hear myself talk share some information while I’m there as well.Enough self promotion. After having taken a look through the options, here’s a few more talks that I’m really hoping make the cut. Again, if they sound interesting to you, please give them a thumbs up in the PanelPicker.PHP Performance on a BudgetMaking the New Yahoo! Homepage Fast!“Performance Enhancing Drugs”… for the web!Nothing is True, Everything is Permitted. Not!Understanding Humans: New Psychology and the Social WebSeductive Design: Creating Sites Your Users LoveAll Our Yesterdays: Digital Cultural Pr

One of the biggest keys to improving the load time of your site is minimizing the number of HTTP requests. There’s a lot of overhead involved with each request, and many requests can very quickly slow down your site. One great way to eliminate extra requests is to use data URIs instead of images. If you want the nitty-gritty on what data URIs are, and how to use them, there are a few excellent posts by Stoyan Stefanov and Nicholas Zakas that walk you through the details.Data URIs can be tricky to implement efficiently however. Since they are a Base64-encoded representation of an image, there is a built-in level of obfuscation that can make manual maintenance tedious. Thankfully, Nicholas put together a command line tool called CSSEmbed which takes the pain out of using them.CSSEmbed is a very straightforward tool that parses a stylesheet and converts all references of images to their data URI equivalents. Installation is as simple as downloading the .jar file and placing it where you’d

A short week ago (June 30th), my wife and I were lucky enough to welcome our second healthy baby girl into the world. Just like her big sister, Jessica Claire weighed in at a healthy 8 lbs 15 oz.Her big sister, thankfully, thinks Jessica is at least somewhat interesting so far and likes to come and “talk” to her. Both girls, as well as their mother, are doing well (if not a bit tired).I’m sure there’s going to be plenty of barbies and tea parties in the future (heck, there’s already some “Ring Around the Rosie”) but I’m sure I won’t mind. I’m just a happy dad whose two little girls have him firmly wrapped around their fingers.

Andy Rutledge wrote a post that is frighteningly on target. He argues that the “quality of your client experiences is directly proportional to the quality of your professionalism”. He goes on to state that if your clients are “stupid” you may want to take a step back and consider who may truly be responsible for these failed interactions. He starts by pointing out how you can set yourself up for failure before you even start on a project:If you don’t research and vet your potential client before asking them to sign your contract, stop being stupid. If you bid on projects even though the potential client doesn’t know much about you or why you’d be a good (or bad) choice for them (they “just need a web designer”), stop being stupid.He continues by analyzing how web designers can continue to lay the groundwork for “stupid” clients by failing to have a proper workflow in place:If you aren’t the one defining the project process, stop being stupid. If you don’t define, police, and unfailingl

For the second time this year, I’m launching a redesign of this site. Shortly after putting the last redesign live, I started wishing I’d have allowed for a little more flexibility in the types of content I produced. While I still enjoy writing full, detailed posts at times, there are a lot of times I just want to share a quick thought, or pass along a quote from an article I found particularly good.I gave Tumblr a try for a little bit, and I loved the freedom it gave me to post content I found important, regardless of how much detail I felt it warranted at the moment. Really, the only thing I didn’t like was the fact that I was now blogging in two different places - this site and my Tumblr blog. Since Tumblr had no easy way to import all my old posts from Wordpress, I decided to make use of the custom post type capabilities in Wordpress to build my own version of a tumblelog.Since the frequency of posts will undoubtedly be picking up with the additions of these shorter post types, let

According to an article on Information Week, Google classifies mobile users into three behavior groups:The “repetitive now” user is someone checking for the same piece of information over and over again, like checking the same stock quotes or weather. Google uses cookies to help cater to mobile users who check and recheck the same data points.The “bored now” are users who have time on their hands. People on trains or waiting in airports or sitting in cafes. Mobile users in this behavior group look a lot more like casual Web surfers, but mobile phones don’t offer the robust user input of a desktop, so the applications have to be tailored.The “urgent now” is a request to find something specific fast, like the location of a bakery or directions to the airport. Since a lot of these questions are location-aware, Google tries to build location into the mobile versions of these queries.I think it’s a pretty accurate categorization, and a good thing to keep in mind when you’re building your mo

Derek Powazek shares his thoughts on turning off comments:I turned off comments in the last redesign of powazek.com because I needed a place online that was just for me. With comments on, when I sat down to write, I’d preemptively hear the comments I’d inevitably get. It made writing a chore, and eventually I stopped writing altogether. Turning comments off was like taking a weight off my shoulders. It freed me to write again.I too have been trying to decide whether to continue using comments on my main blog. On the one hand, I can sympathize with Derek. I often “hear” the comments I’ll get, or won’t get, and ultimately allow that to either adjust the content in a post, or don’t publish the post at all.On the other hand, I truly do enjoy the good discussion that can sometimes takeplace, and I don’t want to lose that. Perhaps a reply by Twitter option (as Jon Hicks is considering) is a decent option to generate that discussion without the feeling of obligation?

Nick Carr makes a very interesting and compelling argument for “delinkification”:Links are wonderful conveniences, as we all know (from clicking on them compulsively day in and day out). But they’re also distractions. Sometimes, they’re big distractions - we click on a link, then another, then another, and pretty soon we’ve forgotten what we’d started out to do or to read. Other times, they’re tiny distractions, little textual gnats buzzing around your head. Even if you don’t click on a link, your eyes notice it, and your frontal cortex has to fire up a bunch of neurons to decide whether to click or not. You may not notice the little extra cognitive load placed on your brain, but it’s there and it matters. People who read hypertext comprehend and learn less, studies show, than those who read the same material in printed form. The more links in a piece of writing, the bigger the hit on comprehension.I like the approach taken by Readability. They generate a list of footnotes from the lin

There’s been an ongoing debate in the world of mobile development as to how mobile apps should be distributed, via an open system or a closed system, and consequently, how one should approach mobile development. We could probably also call this debate “Apple versus everyone else”.The issue has been brought up many times, usually right after Apple announces some change in the way they accept applications into their store. With each change, invariably some apps, and some companies who have built a living off of those apps, get the short end of the stick and are no longer deemed acceptable for Apples’ standards (whatever they may be at that particular minute).Disclaimer first - I’m generally an Apple fan. I don’t care what you say - they know how to package an awesome user experience in their devices, and they do it better than anyone else I’ve seen. Honestly, I don’t even fault them for being so dictatorial in the policing of their app store. There are benefits in a controlled system, am

Like it’s older brother YSlow, Page Speed, released by Google in in mid-2009, is primarily a tool to audit and analyze the performance of your site. However a closer looks shows that there is in fact a lot more that Page Speed can do.What Does It TestPage Speed analyzes the performance of a page based on a set of 26 rules (as of version 1.7) that Google has documented. Each rule is given a priority code based on how great the potential impact would be on the page load time. Once Page Speed has determined which rules are broken, it gives the page a score between 0 and 100, which can be exported in JSON format, or sent straight to ShowSlow.com - a tool for recording YSlow and Page Speed scores over time.The rules range from common rules like optimize your images, to lesser known techniques like defining a character set early. A complete list of the rules Page Speed checks for is below:Combine external CSSMinimize DNS lookupsLeverage browser cachingRemove unused CSSLeverage proxy cachingM

Most likely you’ve heard by now about Steve Job’s open letter about why their mobile devices do not support Flash, and why they don’t intend on changing that. Everyone and their mother has an opinion about it, but I still couldn’t resist posting a few quick thoughts I had while reading it.The Pot Calling the Kettle BlackI generally really like Apple products. They really know how to polish up a beautiful user experience, probably better than any other company I know of. So while I wouldn’t go so far as to call myself a fanboi, I will say that I drool heavily over most of their devices. Yet despite my generally positive view towards Apple, even I have to admit I found it funny when Jobs was calling out Flash for being “100% proprietary”. It’s true of course, but Apple has little room to talk.What made the point even funnier was how he said in one paragraph that Apple believes “that all standards pertaining to the web should be open”, and two paragraphs later, talks about Apple’s support

By now I’m sure that most of you have heard about the recent announcement by Google that speed is officially a factor in their rankings. This seems to have caused a little bit of panic amongst some people in the web community.One web guru who you may have heard of, Jeffrey Zeldman, posted an article on Sunday wherein he describes the choice he feels designers are now faced with:So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank.It’s a fair enough point to make - sometimes a designer will need to make a decision between additional aesthetic effects and improved performance (but not that often). What followed in the comments was disturbing though - many people were actually viewing Google’s move as a negative thing and seemed to be very worried about it’s effects. Some felt Google was simply abusing their power, others believed they’d have to sa

As I mentioned in a prior post, there are a lot of really good tools available to developers to aid in making performance optimization quick and easy. I’ve decided to highlight some of my favorite tools that I’ve come across and thought I’d kick things off with Steve Souders excellent SpriteMe bookmarklet.Having a lot of images in a page can be very costly. Each image requires an HTTP request, and each HTTP request comes with plenty of overhead. I’ve seen pages with 20+ icons, each requiring their own request - that’s a serious hinderance to performance.A way of combatting the issue is to use sprites. For the uninitiated, an image sprite is simply one big image that includes many smaller images. This allows you to make one HTTP request, and using CSS, still make use of a variety of different images. If you plan ahead and do this while initially building the site, it’s rather simple to do. How do you quickly implement this strategy in an existing site though?That’s where SpriteMe comes

For 2009, I decided to start actively reading again (something I had done very little of since high school). I managed to get through 38 books and while I’m not exactly setting a goal, I’d like to at least maintain a similar pace this year.If you just want the highlights, I’d say that Neverwhere, Replay and The Road are at the top of my list as far as fiction is concerned. For non-fiction, Brain Rules, Blink and Trade-Off probably top the list.Not to say the other books aren’t good - I typically only finish books I enjoy on some level. With as many books as I’d like to read, I don’t see the point in wasting time on a book that doesn’t manage to hold my interest on some level.Shadows Linger by Glen CookThe White Rose by Glen CookThe Dad in the Mirror by Pat MorleyThe Rosetta Key by William DietrichThe Road by Cormac McCarthyThe Tipping Point by Malcolm GladwellWikinomics by Don TapscottBlink by Malcolm GladwellMade to Stick by Chip and Dan HeathOutliers by Malcolm GladwellConvergence Cu

Optimizing your site’s performance doesn’t have to be very difficult. Take this site for example. Typically, I take care of optimization as part of the build process. However, for the sake of demonstration, I thought this time around I’d take care of each step by itself, using freely available tools where applicable.First off was setting expires tags and turning gzipping on. Since I’ve done this in too many .htaccess files to count, this was simply a copy/paste job with very little tweaking necessary.Then, I decided to optimize the images (what few there are). I ran Smush.It from the YSlow tool in Firefox. That compressed the images which I then downloaded to my computer and then promptly pushed right back up to the server. It took me 5, maybe 10 minutes and it cut the image size by about 33% total.The icons for the RSS, Twitter and LinkedIn links in the footer were separate images - each requiring its own HTTP request. By using the SpriteMe bookmarklet, I was able to generate a new sp

After a very long, drawn out design/build process, I finally decided to just get it over with and push the new design live (as anyone not reading this in their RSS reader can see). There’s a few bits of code and a little bit of styling I’ve not quite fine-tuned yet, but if I keep waiting, the design would never get put up. As it is, it’s been sitting on my computer in virtually the same state it appears now for the last month or so without being touched.In addition to a new look, the underlying code has changed. I used to blog on a home-brewed VBScript based system. This incarnation of the blog, however, is built on Wordpress. It’s also built using HTML5 and makes use of some CSS3 selectors for presentation. The idea was to simplify the publishing process to encourage more writing, and as part of that, I also wanted to simplify the look a little bit. Using HTML5 and CSS3 just give me an excuse to play around with those technologies a bit.Finally, with a new design, comes slightly diffe

People tend to associate with people most like them. We hang out with people with similar hobbies, career paths, social circles and viewpoints. There’s a certain level of comfort in surrounding yourself with people like yourself.Comfort, however, is not often equal to progress. When it comes to expanding your mind to new possibilities and advancing your knowledge and skills, a little dissonance goes a long way.One popular phrase you hear thrown around is the “wisdom of crowds” - the many are smarter than the few. However, it is important to note that the wisdom of crowds does not equal crowd psychology (the power of people acting collectively). Instead, the wisdom of crowds is only true when the crowd consists of a variety of people with different viewpoints, opinions and backgrounds.Why is it that we need this diversity to excel and grow? It’s because as we become certain that something is true, our mind locks onto that idea. We have a tendency to filter out any information that may c

While browsing YouTube diligently working, I stumbled upon a video showing how to open a banana like a monkey. I like bananas, and who doesn’t like monkeys, so I gave it a watch. Turns out, I’ve been opening bananas the wrong way my entire life.Basically, for those of you who haven’t seen it, it shows how a typical person opens a banana using the stem. As we all know sometimes this method works just fine and sometimes the stem is tough and we have to struggle a bit to peel it, smashing the top of our banana in the meantime.A monkey, meanwhile, simply pinches the other end of the banana, which causes a split in the banana peel, and then smoothly peels the banana. It works amazingly well.What’s the point? The point is, this morning I thought I knew all there was to know about peeling bananas. I would never have expected that there was a better, more efficient technique I could be using. I was very confident that my method was the best one out there.How many times do we take that approach

Microsoft made great leaps forward with IE8, and just when I start thinking they deserve a nice pat on the back for embracing standards, they give me another reason to lose faith in them.The recent announcement is that Outlook 2010, like Outlook 2007, will use Microsoft Word for it’s rendering engine. No…you read that right…Word’s rendering engine. A rendering engine that doesn’t support simple CSS statements like float, width or height. Here’s their stance on why they’re opting to use the Word rendering engine again:We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around, with rich tools that our Word customers have enjoyed for over 25 years. Our customers enjoy using a familiar and powerful tool for creating e-mail, just as they do for creating documents. Word enables Outlook customers to write professional-looking and visually stunning e-mail messages.William KennedyCorporate Vice President, Off

Progressive enhancement is not only a smart idea, but it’s the right idea for anyone looking to produce cost-effective websites. It is alright if your site doesn’t look exactly the same in every browser. In fact, because of factors like font rendering, it’s impossible to maintain the exact same appearance across all browsers. Getting clients to accept that fact is important because it can save them both time and money (not to mention save you a few headaches).Let’s take an example. Let’s say that our client, Great Sprockets Inc., wants a design with a few rounded corners and semi-transparent backgrounds sprinkled in. We decide not to use progressive enhancement. Everybody should get these rounded corners and semi-transparent backgrounds.So, we oblige. We create some 24-bit PNGs for the backgrounds. IE6 doesn’t support PNG24 transparency natively, so we add in a call to a script to fix that. We create a few images for the rounded corners, add a couple of extra element to our markup to p

Today was a big day for Microformats - very big. First, they announced that the new value-class-pattern is ready for implementation. The value-class-pattern is a great step forward, as it provides needed accessiblity improvements, and in my opinion, gives the developer a bit more flexibility over how to structure their markup.That was a pretty big announcement in its own right, and I was very pleased to see the new pattern approved and garnering a bit of buzz. That announcement, however, was trumped by Google announcing that they will be starting to index Microformats and RDFa and using that data to enrich their search results.Microformats has been around since 2003, but the adoption has been a bit sluggish. While overall quite easy to implement, it can been difficult to demonstrate the value of using Microformats at times due to a lack of major support, and therefore, major incentive. That shouldn’t be a problem anymore, because Google is definitely providing that major incentive.How

In Nate Koechley’s excellent talk on Frontend Engineering, he talks about the importance of building a “stronger DOM”. By marking up your site with meaningful elements and attributes, you give your markup more value and provide a richer experience for both users and machines.In addition, a strong DOM provides you with numerous attributes and elements that you can make use of to style the content to your hearts desire. This gives you much more power and control with your CSS, and helps to greatly decrease your usage of extraneous divs and classesA very quick way to improve your markup skills, and therefore the value of your content, is to expand your knowledge of HTML elements, and start making use of a few you might not have been aware of.andThe fieldset element is used to group related controls and labels within a form. They are a great way to help make your form easier to understand, and more accessible for speech-navigated user agents.It should be used in conjunction with the legend

Ideas and alibis are very much alike. Everyone has plenty of both. Some are good, and some are bad. The big difference is that while no one has a problem using alibis, very few are willing to consistently act on their ideas (me included).Excuses, ExcusesThere are several reasons why people tend to pass on acting on their own ideas. Some of the major ones are fear of criticism, fear of failure, self-doubt, or the feeling that there is not enough time. Based on these reasons, we can come up with a multitude of alibis for not pursuing these ideas.One that I commonly use is that the “time is not right”. I often tell myself that I should wait on acting on my ideas until sometime where the circumstances are better aligned for it. Sometime in the future when I have more of the knowledge necessary or where I have more time available to me; that’s when I’ll move forward on my ideas.The fact though, is that postponing ideas quickly becomes a habit. The truth is, there will always be more researc

Who Wrote It?Object-Oriented Javascript is written by Stoyan Stefanov, a web developer at Yahoo. Stoyan’s thoughts on all things web can be found at phpied.com. He also runs a blog on iPhone development, and a site dedicated to Javascript design patterns at JSPatterns.com (it’s been quiet for quite awhile now, but I’m hoping to see it brought out of retirement).What’s Covered?Exactly what you’d expect given the title….object-oriented Javascript! Actually, the book covers a lot of information, starting with the basics (variables, loops, functions, etc.) all the way through to a few basic, albeit useful, design patterns.The book is very well written and its discussions precise. Stoyan doesn’t take a lot of time going through complex examples. Instead, he gives bite-size chunks for you to play with and expand upon. If you’re someone who prefers playing with concepts yourself over going through expanded examples in books, this book is right up your alley.While the book has chapters on the

It’s April. The weather is starting to get nicer, Easter is around the corner…and hundreds of people are going streaking! No, you don’t have to be nervous about heading outside today. This kind of streaking is completely un-offensive (hopefully). Once again it’s time for the annual CSS Naked Day.CSS Naked Day is a way of promoting web standards by stripping off all the CSS on a site to show that by structuring your HTML in a way that is semantic and makes sense, your content is still useful even without all the pretty design. If you want more information, you can check out the official CSS Naked Day site, and the almost 400 participants.Don’t worry, this site will return to its regular design and layout on the 10th.

I started working on a recap post of this year’s SXSW, and every time I did, it turned into a short novel. There’s a lot of exciting stuff that goes on there. Since few people, other than say…my mother, want to read about my trip in that much detail, I thought I should trim it down. So here is my recap, in 350 words or less:SXSW 2009If you’re going to talk about SXSW, the discussion will inevitably revolve around three topics: presentations, parties and people.PresentationsThis year, whether due to incredible content or the broadening of my interests, there were multiple presentations I wanted to see each session. Thankfully I feel like I chose wisely, as I can honestly say I enjoyed every presentation. Not equally necessarily, but each presentation had value that I could glean from it, and each held my attention.Parties EventsAs always, the parties were a fantastic opportunity to let loose and mingle with fellow web developers and designers. I always hesitate to call them parties thou

As you may remember, secondary education for web development and design is something that interests me greatly. I’ve mentioned before that the curriculum taught in most colleges tends to be dated and in need of definite help. Opera published their Web Standards Curriculum, and that was a great step in the right direction, but The Web Standards Project (WaSP) has taken it to an all new level with their recently launched InterAct Curriculum.WaSP’s InterAct Curriculum was specifically developed to help take some of the pressure off current educators in creating and maintaining a curriculum based on current industry standards. Thanks to the work of numerous educators and industry professionals, the InterAct Curriculum accomplishes that. The current, and initial, release contains 11 courses that fall into one of six general tracks:FoundationsFront-end DevelopmentDesignUser ScienceServer-side DevelopmentProfessional PracticesA Complete PackageThere’s a lot of work that went into the developm

One of the highlights of SXSW this year for me personally, was being able to see a panel with Andy Budd of Clearleft, a person and company for whom I have the utmost respect. The panel was about usability testing and the tools you can use to better know your users, but one of the major takeaways I got had more to do with how to approach your job in general.The discussion that led to Budd’s little slice of wisdom revolved around how to get a company’s designers and developers together and interested in usability testing. One response was to entice a team with pizza and soda and make a day out of it. Budd’s response was that if you have to bribe your developers for them to take an interest in improving their products, then “hire better people”. As Budd said, “It’s everyones job to build better ****!” (Profanity excluded but I think it still makes the point!)Budd’s passion on the topic was inspiring, and the point he raised was an excellent one. Continually improving your skills, and ther

Things have been a bit silent around here lately, but I feel for a pretty good reason.As many of you who are on Facebook or Twitter no doubt already know, on February 7th my wife and I had our first child, a little baby girl. Little is a bit relative here…Naomi Adalyn was an ounce shy of 9 lbs and was 21” long. I wanted to get this post up a bit earlier, but as you can probably guess, she’s kept us quite busy.She’s very healthy, and both my wife and I are very happy (and a little tired!). Hopefully as we continue to get accustomed to our new schedules, I can get back to fairly regular postings.

Last year I attended SXSW for the first time. I had said that I would try to recap the conference, but never really did that. Best laid plans of mice and men and all that. I haven’t really attended any other major conferences, so I don’t have much to compare it with, but the experience was fantastic.So fantastic, in fact, that thanks to the generosity of my employer and a little good luck, I am going to be attending again this year. There were a few lessons I learned while attending last years conference that I’m going to keep in mind this year, to hopefully glean even more value from SXSW.Plan LooselyLast year, I made the attempt to plot out, hour by hour, every panel that I was going to attend. The truth is, of all the panels I attended, maybe 50% were those that I had planned on. The rest of the time, whether due to how I was feeling at that particular instant, recommendations of people I met, or interests kindled by earlier conversations, I attended panels that in some cases, didn’

Who Wrote It?SocialCorp is written by Joel Postman, currently the Chief Enterprise Social Business Strategist at Intridea, a social app development company. Joel frequently blogs on social media marketing and other related topics at www.socializedpr.com.What’s Covered?In today’s web, a company’s online presence extends far beyond their website. Thanks to the rise of social communities like Facebook and Twitter, and the incredible reach a simple blog post can have, consumers are discussing company products and services, both positively and negatively, all over the web. This presents an incredible opportunity for companies to interact with their customers in ways that can feel a bit foreign to people accustomed to traditional marketing.That’s where SocialCorp comes in. Joel has written a fantastic book to give to anyone looking to get started in, or relatively new to using social media for marketing for corporate companies. Joel writes in a very engaging, conversational tone, and covers

One of the new features that HTML5 offers web developers is a way to send information between documents on different sites via Javascript. Currently for security and privacy reasons, browsers prevent cross site scripting but with HTML5’s Cross Document Messaging, the intention is to allow documents to communicate with each other without sacrificing security.To experiment with these methods and events, you’ll need to be running either IE8, Firefox 3 or the WebKit Nightlies. Opera 9+ provides support as well, but they use an older version of the spec which required the postMessage method to be called from the document object instead of the window object.There are two key steps involved with HTML5 Cross Document Messaging. The first is posting the message. You do this by calling the window’s postMessage() function. The postMessage function takes two arguments: the message to be sent, and the target origin.Then, to receive the message in the other window, you need to watch for the window’s

I’ve been very interested in finding better ways to create CSS stylesheets that are easy to navigate, understand and maintain. After leaving a stylesheet alone for awhile, if you didn’t take the time to organize the stylesheet originally, it’s really easy to forget why certain rules are being used, or where you defined styles for an area. One way of managing your stylesheets that’s got my attention is CSSDOC.CSSDOC was an idea apparently conceived sometime in 2007, and the Second Public Draft of the spec was just released on November 16th. The intent behind CSSDOC is to provide a standardized way of commenting CSS making use of the very well known DocBlock way of commenting source-code.DocBlock is a very common form of documenting source code in programming that has proven to be very popular for both PHP and Javascript. The beauty of the method is that it’s so simple to use DocBlock to organize your code and since it’s a standardized format, other developers will be familiar with it an

Historically, it hasn’t been very often that I’ve been able to tip my hat to Microsoft for open web innovation. Today though is one of those times that I get to do so. John Allsopp, one of Microformats’s biggest supporters, mentioned today that Microsoft’s designer/developer community, Mix Online, has developed a IE toolbar called Oomph.Oomph, much like Operator in Firefox, pulls microformatted information from a page and allows the user to make use of this data by offering options like being able to export contact information, map addresses, and add events to your calendar.That would be enough in itself to get my attention…Microsoft has not typically been the most open of companies, and despite Gates’ declaration that the web needs Microformats, they really hadn’t done much to advance its’ use. Seeing their developer community get behind Microformats with the toolbar and a couple of nice Microformats articles is very encouraging.However, there’s more to this story. In addition to the

One of the areas that web design is lacking in, is a way to reliably provide beautiful fonts for our designs. There’s a very limited amount of fonts that are actually safe to use on the web, because not everyone is a designer with lots of nice fonts installed on their machine. Sure, with font stacking we can help ease the pain a bit, but it’s still a small amount of people that will see the fonts we intend, with everyone else getting boring alternates.There are a few solutions currently being utilized across the web. The simplest, and also probably the worst option of them, is to use background images to display our custom fonts. This is not very ideal at all…every time we want to change the text on the site, we have to edit the appropriate background image. A couple less “needy” options are sIFR and FLIR. In both cases, Javascript is utilized to deliver the text in our desired font. sIFR uses Flash to make this happen and FLIR uses PHP. But we are still relying on Javascript to load t

Who Wrote It?Mobile Web Development is written by Nirav Mehta, the head of Magnet Technologies a software development firm in India. He blogs about a variety of business and tech topics at www.mehtanirav.com.What’s Covered?Mobile Web Development covers a wide variety of topics related to…guess what….mobile web development. Nirav does a fantastic job of introducing a wide variety of technologies needed to begin mobile web development including sending and receiving SMS and MMS messages, optimizing your site for mobile devices and using AJAX on the mobile web.The book, from Packt Publishing, takes a very solution-based approach. Each chapter, with the exception of the first and last, has a very specific task that it is concerned with accomplishing. Usually, I’m not too awful fond of the format. It often feels like such books aren’t teaching me a topic so much as giving me snippets of code I am comfortable with manipulating.This book, however, is an exception to that rule. Each chapter, i

Last time around, we took a general look at the canvas element and how it is supported (or not) in various browsers. This time, we’ll start to go into the element in a bit more detail and start to look at some the things we can do with it.A Quick Look at AttributesWe’ve already seen how to set up the canvas element in HTML:You’ve probably noticed that we’ve included an id attribute on our canvas element to make it easier for us to access the element in our Javascript. You can also apply other standard attributes like class, title or tabindex. Two other attributes, height and width, will also be used fairly regularly.You can define the height and width as attributes in the canvas element, or you can use CSS to define the dimensions of your element. If you use CSS, however, your canvas will scale to meet the dimensions you define instead of simply resizing the area. Neither height nor width are necessary, however. If you choose to not define the size of the canvas element, then it defaul

There’s a lot of really exciting and interesting features arriving just around the corner in the world of web development. One of the new features that is receiving a lot of attention, and for good reason, is the new canvas element. The canvas element offers a lot of power to web developers, but can take a bit for some people to get comfortable with. So, I’m going to run a series of posts introducing this powerful new feature, and showing some of the ways it can be utilized.What Is It, and Who Supports It?The canvas element was originally implemented in Safari, and then became standardized in the HTML5 specification. The element allows developers to dynamically draw onto a blank ‘canvas’ in a website. Thankfully, you don’t have to wait to play around with this element. Currently, you can find support for it in Firefox (version 1.5 and newer), Safari, or Opera (version 9 and newer). In addition, you can twist IE’s arm a bit thanks to Google and Mozilla. Google has created ExplorerCanvas

The big news in the Javascript community for the last week has been the announcement of ECMAScript Harmony. A lot of news is really just overblown, but this is a big development, and one that any Javascript developer should be following.Some BackgroundThere’s been a lot of talk in the Javascript community over the past 9 years or so about the development of ECMAScript 4, what was to be the foundation for what was being called Javascript 2. It was a controversial and fairly dramatic change from ECMAScript 3 (Javascript). There was going to be support for classes, inheritance, type annotations, namespaces…the whole flavor of the language was going to dramatically change.ECMAScript 4 was being developed primarily by Adobe, Mozilla, Opera and Google and was primarily based on the features those organizations wished to implement. Others, including Microsoft and Yahoo, found the proposed changes in ES4 to be to dramatic, and instead wanted to implement minor changes and bug fixes to ES3, lab

It’s no secret that the web design industry is often not given the respect it deserves. People treat it as if it’s a much simpler task than it really is. Forgive me if I come off sounding a bit arrogant, but it seems like people seriously underestimate the work involved in creating a quality web site.One issue, for example, is people expecting to see comps of work without payment. It happens quite a bit, but it’s a ridiculous request. Do people ask mechanics to make the first couple of repairs on their car for free so they can get a feel for how they like working with them and then, based on that, decide whether or not to go with that mechanic and pay them? So why ask a web design company to create a few mock-ups first before deciding to actually pay them for their work?Then there’s beautiful journalism like the article posted yesterday in the Wall Street Journal telling companies how to build their own site with 8 hours of work and $10. Brilliant…because that’s all that goes into a qu

There’s a lot of interesting new features being suggested for HTML5 and XHTML2. Some of them are extremely useful, some of them seem to be more questionable additions. One feature being implemented in HTML5 that I do like is the addition of custom data attributes to HTML elements.Manage Your DataA custom data attribute is simply any attribute starting with the string “data-”. They can be used to store data that you want kept private to the page (not viewable by the user) in cases where there is no appropriate attribute available. Every element can have any number of custom data attributes.For example, consider a form validation script. The script needs to know what form of validation is required for each field. Currently, many of these scripts will use the class attribute to signal that.Making use of the new HTML5 custom data attributes, we might choose to store the information like this instead:To gain access to the value of the data-validation attribute, there are two options. First,

I did what I said I told myself I would never do…I only posted one item the entire month. I always told myself that if I was going to have a blog going, I was going to commit to it and ensure that the blog never went stale…there would always be fresh content on my site. I think I may have underestimated the wonderful curves that life throws out there!I do have what I feel are a few fairly good excuses for being quiet lately. I just recently purchased my first home, which my wife and I are quite excited by. It has kept us both busy moving and making some quick touch-ups and improvements. Even more exciting, we found out that my wife is pregnant with what will be our first child. Again…extremely excited, but I am finding that I am spending a fair amount of time ensuring that things are in place for when the little one arrives.Finally…I started a new job in June. It’s much more development heavy than my prior position and I’m enjoying it greatly. That being said, there was some time spent

One topic that I have been interested in for quite some time now is secondary education when it comes to web development and design. It is a very unfortunate truth that when it comes to web development, the curriculum is in serious need of some help.As a recently graduated student, I can reflect on both my training and the training of other people my age who attended other colleges for web development that I interacted with. Unfortunately, the majority of the people I’ve communicated with stated the same thing: standards based development was not presented as a priority. CSS was glossed over and there was little to no mention of the DOM and unobtrusive scripting techniques in the Javascript courses.Why Colleges Can’t Keep UpA large part of this is due to the fact that our industry moves so quickly. Progress is made at such an incredible pace and new technologies soon emerge while old ones fade away. In contrast, changing the curriculum at a college usually takes awhile, making it very

Test Driven DevelopmentThere was a nice article at Sitepoint about Test Driven Development. The author, Chris Corbyn, walks through the TDD process using PHP examples, and describes some of the benefits he has discovered in the TDD process.Firefox 3 Memory Benchmarks and ComparisonWith both Firefox 3 and Opera 9.5 being freshly released, here’s a nice memory performance comparison of those browsers, as well as the IE Beta version 1 and Flock. The memory tests are computed by a custom built .NET application, and provide a good look at how these browsers compare in memory management on the Windows operating system.Sketching in Code: the Magic of PrototypingThe folks over at A List Apart offer us yet another excellent write-up. David Verba, Technology Advisor for Adaptive Path, takes a look at using prototypes in the web application development process, and what prototyping can offer that wireframes cannot.Same DOM Errors, Different Browser InterpretationsHallvord R. M. Steen of Opera off

Lately I’ve been working quite a bit with some PHP code that made heavy use of global variables. It made the code quite rigid to work with…when changes were made in one function it had a ripple effect on many other key functions and more than once, made me curse global scope.But sometimes it’s necessary to share information between different functions, so what’s a programmer to do? Global variables certainly make that possible, but they also create some problems. Heavy reliance on global variables makes it difficult to reuse code. Rarely can we uproot functions with a large dependency on global variables and insert them into different contexts or scripts without problem.Debugging code also becomes difficult. When a variable is global in scope, it could be being instantiated virtually anywhere making it tough to track down. What’s even worse is coming back to that code after a year, or as it was in my case, trying for the first time to decipher code that relies on global variables.Lucki

Who Wrote It?When I first heard Douglas Crockford was writing Javascript: The Good Parts (let’s just call it JTGP from here on out) I was anxiously awaiting the release. Crockford has been responsible for many highly regarded articles and presentations, as well as for his incredible work with JSON, JSLint and much more. While Brendan Eich may be the father of Javascript, Crockford is probably the Godfather. Even Eich himself called Crockford “the Yoda of Lambda JavaScript programming.”What’s Covered?JTGP does as promised…it brings to attention the best parts of the Javascript language. Topics like Objects, Inheritance, Arrays, Functions and Regular expressions are discussed throughout the book. While focusing on the “good parts” of Javascript, Crockford also points out the not-so good parts and explains why these other parts don’t fall into the good category by pointing out caveats and pitfalls.I’ve seen it mentioned before that people complained about the book being a bit short. It we

A question I get asked often through emails and other discussions is how I feel about frameworks and libraries, both for scripting and for CSS. I’ve been meaning to share my thoughts on it for awhile, and now that I see NetTuts.com has posted an article about choosing a CSS framework, I figured now is as good a time as any.Any of you who have been reading my site since the beginning might remember I wrote a post about the importance of forcing yourself to reinvent the wheel. I still stand by that, but that doesn’t mean I am entirely against all frameworks. In fact, in the case of scripting libraries, I can definitely see the value in using them. The key point is to be able to tell when to use a library and when not to.Why Should You?One nod for using libraries and frameworks is that reusable code is a good thing. It saves you time and money, and I think most developers have at least some amount of code that they reuse on various projects. I am all for that. We programmers are lazy…errr

I’ve spent some time lately playing around with the WebKit Nightly Build. In addition to having advanced CSS support, the nightly build also introduces a few new proprietary CSS properties (though the plan is to eventually get W3C to implement them in the CSS specification). There are some really cool features being implemented, including CSS gradients, masks and transforms. One new feature, CSS transitions, has me a little on the fence though.CSS transitions are definitely a cool idea. Using one simple line of CSS, we can specify how we want a particular style to change. For example, a very common thing to do with CSS is change a link’s color when hovered over. To do so, you just use the :hover pseudo-class like so:a{ color: blue;}a:hover { color: red;}Browsers make the color change immediately when a user hovers over the link. Using WebKit’s transition property, we can tell the browser to instead make a smooth transition. For example, to make the color slowly change from blue to red

line-height: abnormalEric Meyer has a great write-up about how diverse the rendering of line-height: normal is across browsers. Complete with a test page that allows you to see what happens to the value of line-height normal as different fonts and font-sizes are selected.What’s Next in jQuery and JavaScriptJohn Resig of jQuery fame posted a nice 11 minute video where he talks about what is coming up for jQuery, Javascript, and some changes that are being made in browsers. Nice overview of what we have to look forward to on all counts.Initial Impressions of SilverbackA nice review of Silverback, the new user testing development tool created by the geniuses over at Clearleft. Personally, I haven’t had a chance to play with it yet, as it is only available for Macs and I am still laboring away on a PC. From everything I’ve heard though, looks like a fantastic tool.Content InventoryJust a bit more Clearleft love here. Andy Budd continues his series of posts looking at design artifacts with

One of the many things CSS lets us control is the opacity of elements, starting in CSS3. The opacity property is in fact one of the earliest and most widely implemented CSS3 properties. It has its problems though, but CSS3 also defines a more powerful way to control an element’s transparency: RGBA values.The Opacity PropertyTo change the opacity of an element using the opacity property, you simply give it a value between 0 and 1 to determine the elements’ opacity. For example, if I want a div to be 50% transparent, I would give it the following style:`div {opacity: .5;color: #fff;background-color: #000;}This works fine in Safari, Opera, and Firefox. Internet Explorer, however, doesn't yet support the opacity property. Instead, we have to use their proprietary property Alpha Filter. It's really not any more difficult than the opacity selector. One key thing to note hear though is that the Alpha Filter requires you specify the opacity on a scale of 0 to 100. There's even a catch to that

In our first look at the new features of Javascript 2.0, we will focus on the new typing system. We are just going to highlight some of the major changes and potential uses. For a more detailed look, take a look at the ECMAScript 4.0 Language Overview.Traditionally, Javascript is a loosely-typed language, meaning that variables are declared without a type. For example:`var a = 42; // Number declarationvar b = “forty-two”; // String declaration`Since Javascript is loosely typed, we can get away with simple ‘var’ declarations…the language will determine which data type should be used. In contrast, Javascript 2.0 will be strongly typed, meaning that type declarations will be enforced. The syntax for applying a given type will be a colon (:) followed by the type expression. Type annotation can be added to properties, function parameters, functions (and by doing so declaring the return value type), variables, or object or array initializers. For example:`var a:int = 42; //variable a has a t

At the heart of CSS, of course, are its selectors. They are after all what allow us to apply styles to a given element in our (X)HTML. Sometimes though, there is a desire to apply a style based on an elements state. That is where pseudo-classes come into play. You’ve probably all used them at some point…but there may be more there than you realize. Their value makes it worth taking a closer look.Static Pseudo-ClassesPseudo-classes allow us to apply an invisible, or “phantom”, class to an element in order to style it. For example, let’s look at the element most often styled using pseudo-classes: the anchor tag (). Some anchor tags point to locations a user has already viewed, and some point to locations the user has not yet visited. Looking at the document structure, we can’t tell this. No matter if the link is viewed or not, it looks the same in (X)HTML. However, behind the scenes, a “phantom” class is applied to the link to differentiate between the two. We can access this “phantom” c

There has been no shortage of debate over Javascript 2.0, based on ECMAScript 4.0. Some people are extremely excited about some of the new features being discussed, and some feel that Javascript 2.0 is shaping up to look a bit too much like Java or even C++ for their tastes.Whether you like the new features being proposed, think they’re silly and unnecessary, or have no idea what the heck I am talking about, I think it’s important to have a firm grasp on some of the changes being proposed. Doing so will help you to better understand both sides of the debate, and also help to prepare you for when Javascript 2.0 becomes available for use.There’s far too many changes and fixes to discuss them in one post, so this will be an ongoing serious of posts. I’ll be taking a look at what the new language provides us and why. Hopefully by taking a closer look at all the changes, we can get a better feel for how those changes affect both web developers and javascript in general. First though, we sho

Overall, I’ve been quite happy with the feedback gotten about the site so far. It’s still quite young however, and therefore, there are a few changes that I thought needed to be made to help it continue to grow, and hopefully make it easier for readers to find and use the content here. For anyone interested, I thought I would highlight the changes.First off, I’ve increased the focus on past posts. I decided to add a listing of the latest posts to each page, as well as a listing of the most popular posts on the site in terms of views. The idea here is to hopefully make it easier for you to find earlier posts that you may have missed that may still be worth a look.I also decided to add full RSS feeds. I have heard a lot about the debate between partial and full feeds and wasn’t sure at first how to proceed with them. Up to now, I had just been offering partial feeds. I am still keeping those, for any of you who do prefer them but I am also offering an RSS feed with the full posts in them

Being wrong is a good thing. I know…I know…we’ve been told our entire lives that it’s better to be right than wrong. I think, though, that in the design/development industry, it’s good to be wrong sometimes.Always being right means we’re not challenging ourselves enough. It means that either we’ve become comfortable and content with where we are at with our skills, or that there is no one challenging us to improve those skills. In either case, we’re not progressing.If we’re wrong, it means we’re pushing ourselves to explore our limits, to continue to expand our skill set. Being wrong opens the door for constructive criticism, which in turn leads to opportunities to learn. People who are willing to tell us when we’re wrong are the kind of people we should be surrounding ourselves with…they’re the kind of people who challenge us to become better designers and developers.One quote, that I believe sums it up pretty well, is by Bill Buxton a Principal Researcher at Microsoft. In his book “S

NOTE: This is the first book review to be featured here. The idea is that I will frequently review web-related books to hopefully help give you an idea of whether or not a book is right for you. The books reviewed will all be somehow related to web development or design so you will never hear me tell you how much I enjoyed Stephen King’s Dark Tower series or Napoleon’s Pyramids by William Dietrich….except for right now of course.Who Wrote It?Pro JavaScript Design Patterns is written by Ross Harmes and Dustin Diaz. Ross is a front-end engineer from Yahoo! and blogs (albeit not for awhile) about random tech topics at techfoolery.com. Dustin works for Google as a user interface engineer. You can find Dustin’s musings about web development topics at dustindiaz.com. This is the first book by either author.What’s covered?Pro Javascript Design Patterns is about…well, applying design patterns in Javascript of course. Design patterns are reusable solutions to specific, common problems that occu

Sometimes code turns ugly. We add quick fixes or enhancements and our code starts to become a big tangle of functions that aren’t laid out in any sort of organized fashion. Over time, our code becomes bloated, difficult to maintain and what should be simple little fixes can quickly turn into long walks through messy syntax. One way of combating this is by implementing the 5S System.The 5S System is actually a Japanese improvement process originally developed for the manufacturing industry. Each of the five words when translated to English began with ’S’ hence we call it the 5S System. Like many good philosophies however, the 5S System can apply to a variety of topics. For example, the 5S System has been applied by the Hewlett-Packard Support Center in a business context and has resulted in improvements like reduced training time for employees and reduced call-times for customers. By using the system applied to coding, we can make our code more efficient and much easier to maintain.Seir

Well that didn’t take long. It was just announced today that Opera’s developers have received the first 100⁄100 test score on the new Acid 3 test. There is apparently a small rendering glitch they still need to take care of, but this is really incredible progress considering the test was just formally announced on March 3rd.The Acid test, for those unaware, is a test page set up by the Web Standards Project (WASP) to allow browsers to test for compliance with various standards. The test runs 100 little mini-tests, and to score 100, you need to obviously pass all 100 of the tests. The first Acid test was set up in 1998 and checked for some basic CSS 1.0 compliance. Acid 2 came around in April of 2005 and tested for support for things like HTML, CSS2.x and transparent PNG support. The new Acid 3 test checks for support for CSS3 selectors and properties, DOM2 features and Scalable Vector Graphics (SVG) among other things.It should come as no surprise that Opera was one of the first to suc

Finding purely static websites today is becoming harder and harder. The line between website and web application blurs more and more as clients want more interactivity and real-time interaction on their site. This rich experience raises accessibility concerns though.To create a lot of these dynamic interfaces, we often have to use (X)HTML elements outside of their semantic meaning. For example, navigation is marked up using list-items. That is all fine and well for a sighted visitor…we can see that the list is meant to be navigation. However, to a non-sighted user who is relying on a screen reader to determine the usage of elements on a site, it is difficult at best to determine that the list is used as a navigation structure.That is where Accessible Rich Internet Applications (ARIA) come into play. ARIA offers attributes that we can use to add semantic meaning to elements. One of those is the role attribute.Add Some InformationRoles provide information on what an object in the page is

While at SXSW, I had the privilege of attending a panel called Respect! During the panel, Jason Santa Maria made a comment that really struck me. He said that it’s “difficult to respect what I don’t understand”.How very true. Respecting what we don’t understand is if not impossible then extremely hard to do. Without some sort of knowledge of the process and steps involved in arriving at the solution, how can we really respect the work required to make the solution? I think this comes into play when working with both clients and co-workers.As far as clients go, the solution involves making sure good communication takes place between you and the client. I think involving the client early and often helps to build respect and knowledge of what you do. If we meet with the client about a project, then hand them a design some time later, they are not going to have any idea of the process involved. To them, it’s like delayed magic…they ask us to come up with a design, and viola, we come up wit

After looking at XPath and how it can be used to quickly traverse the document tree, I also thought I’d take a look at the W3C Selectors API as it kind of falls in that same line. At this point, it none of the major browsers support it. However, any WebKit build (Safari’s engine) since February 7th supports it, and it looks like IE8 will be supporting it as well. I’d be eager to hear if anyone knows where Opera and Firefox stand on getting it going here in the future.The Selectors API allows us to utilize CSS (1-3) selectors to collect nodes from the DOM. This is actually quite a common enhancement in a lot of Javascript libraries….CSS selectors are a very efficient and powerful way to quickly look up nodes, and since most people are familiar with CSS syntax, it is very user friendly. The Selectors API offers native browser support for CSS selectors using the querySelector and querySelectorAll methods.The querySelector method as defined by the W3C returns the first element matching the

After having been signed up to attend since early October, it just dawned on me yesterday that I only have one full “work week” left until SXSW. This will be my first major web conference, and to say I am excited about going is a vast understatement. I believe my wife is probably looking forward to it as much as I am, if only for the fact that once it is over she no longer has to hear every little update from me about panel programming and new social events.I can only imagine that being surrounded by that many people who are passionate about the web for 5 days will be quite inspiring and reinvigorating. While this is the first conference I will be attending, I hope that there will be many more.In fact, ideally I’d like to go to several each year. Listening to the presentations and having the chance to mingle with other web-minded folk seems to me an incredible way to keep in tune with the trends of the industry, and an effective way to find new techniques or skills to pursue.After havi

Welcome to the second part of my look at XPath and how it can be used in Javascript. Part one served as a real basic introduction to what XPath is, how it can traverse the document tree, and an introduction to using XPath expressions in Javascript using the evaluate method. So far what we have seen is really basic. There is some value in it, but we can build much more robust expressions with a bit more knowledge.Getting More Detailed with CompoundsSo far, we haven’t dealt with any compound location paths…each of our expressions has just gotten nodes that are direct children of the context node. However, we can continue to move up and down the document tree by combining single location paths. One of the ways we can do this (and this should look quite familiar to anyone who has moved through directories elsewhere) is by using the forward slash ‘/’. The forward slash continues to move us one step down in the tree, relative to the preceding step.For example, consider the following:myXPath

As reported by John Resig, Prototype, Dojo, and Mootools have all switched their CSS Selector engines to be using XPath expressions instead of traditional DOM methods. With the attention being placed on XPath expressions, now is a good time to get familiarized with them and what they can accomplish.This is going to be a multi-post series, as there is just so much you can accomplish by using XPath expressions that if I tried putting it into one post, no one would have the time to sit and read the whole thing.What is XPath?Any of you out there who are familiar with XSLT will no doubt be familiar with the XPath language. For the rest of you, XPATH is used to identify different parts of XML documents by indicating nodes by position, relative position, type, content, etc.Similar to the DOM, XPath allows us to pick nodes and sets of nodes out of our XML tree. As far as the language is concerned, there are seven different node types XPath has access to (for most Javascript purposes the first

Originally, it was never going to get this complex. The internet was never meant to be this popular. However, as time has gone by and this wonderful beast of resource has evolved, it is becoming important to be able to provide our content to a wide variety of devices. In addition to simply viewing a site on a computer screen, or printing it, our information may be accessed by Braille feedback devices, speech synthesizers, handheld devices, etc. More often than not, one set of styles will not be adequate to provide our content optimally to each of these devices. That is where media types come into play.Media types can be extremely useful. For example, there is very little reason to display a site’s navigation on a print-out. Using the print media type, we can then set up a style that hides our navigation section. Handheld devices which have very small screens and often low-bandwidth, may benefit from not displaying a bunch of images.CSS 2 offered us 10 media types as a way to designate

When coding and designing there are a lot of steps and techniques that may seem trivial and appear to have little importance in the grand scheme of things. Does it really matter if we are using meaningful names for our variables in our code, or for our CSS id’s and classes? Who really cares if we use deprecated elements in our X/HTML so long as browser recognize them? So what if I am not consistently formatting my code the same way?I am a huge fan of basketball, and find the history of the game particularly enjoyable. One of the basketball figures from the past that I have always admired the most was John Wooden, who coached the UCLA basketball team to 10 NCAA national titles, including 7 in a row at one point. He had four 30-0 seasons, and at one point his team won 88 consecutive games. Point being…the man was quite good at his job.Each year, Wooden started out his season by having all of his players come into the locker room for his first lesson. He’d sit them all down, then pull out

Using the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination.Most of the time, stacking order just kind of works behind the scenes and we don’t really pay any attention to it. However, once we use relative or absolute positioning to move an object around the screen, we will end up with several elements occupying the same space. Which element is displayed on top is determined by the elements stacking order. We can adjust an elements stacking order by using the z-index property.The z-index is so named because it affects an elements position along the z-axis. The z-axis is the axis that goes from front to back from the user. If we think of the x-axis and y-axis as height and width, then z-axis would be the depth. The higher the z-index of an element, the closer it becomes to the user, and the lower the z-

All developers at one point or another will have to work with code that they didn’t develop. Whether we are replacing the person who created the application, or simply trying to work on a project developed by someone else in house, this is always a bit of an interesting experience. It becomes necessary to familiarize ourselves with the existing coding techniques used on the project so that we can quickly edit and maintain it for our purposes.Unfortunately, this is often a total mess of a job. The code we have to work with is often quite long, poorly documented, looks like ancient Greek, and leaves us angrily spewing silent (perhaps in some cases not so silent) insults at whoever the poor person was who created this mess. Not only does this leave us frustrated, but it also can frustrate our employers, as projects that should’ve been easily taken care of now require much more time and effort.Here then, are a few practices you can start using now to ensure that the next guy working on you

There has been an awful lot of talk around the web community about Microsoft’s new feature in IE8 - version targeting. Initially, I hated the idea. However, instead of jumping in blindly, I thought it deserved a more detailed look on my part.What Is It?Version targeting, as proposed by Microsoft, will use a X-UA-Compatible declaration, either via a META tag or as a HTTP header on the server, to determine which rendering engine the page will be displayed in. For example, the META tag below will tell IE to use the IE8 rendering engine to display the page:If IE8 comes across a site that doesn’t have this declaration either in a META tag or as a HTTP header, than it will render the page using IE7’s rendering engine. This idea is not entirely new. DOCTYPE declarations have been switching IE browsers from ‘quirks mode’ to Web Standards mode since, I believe, IE6. There were some limitations with this. While using a DOCTYPE ensured standards mode, there is a definite difference in what standa

Using print stylesheets are a nice way to enhance a user’s experience of a site. Our screen stylesheets don’t necessarily turn out that nicely when printed out, so using a few different CSS rules on our print stylesheet we can increase readability and usability.One of those nice features we can add is to display a link’s href directly after the link on our print-outs. This will allow someone who has printed out the page to still be able to know where the links on the page are pointing to. We can do this with CSS by using the :after psuedo-class and some generated content. a[href]:after{ content: " [" attr(href) "] ";}There are really four important parts of the statement above:a[href]: Here, we use an attribute selector to select all links in our page with an href attribute.:after: The :after pseudo-class allows us to insert some content after the links and style it if necessary.content: This is what actually generates the content. We could just insert, for example, the letter “a” with

Utilizing branching in Javascript can allow us to create more efficient code. Branching essentially allows us to create “conditional” functions at run-time so we don’t have to keep running the same verifications each time a function is called. That last sentence is probably as clear as mud, so let’s take a look at an example.A very common check to perform is whether a browser supports the getElementById() method, like so: if (!document.getElementById) return;var myContainer = document.getElementById('container');That is just a very simple verification. We check to see if the browser recognizes the getElementById() method. If it doesn’t, we quit what we are doing and don’t go any further. If it does, we continue on with our code. It can be quite annoying to have to type out document.getElementById each time you have to use it, so let’s create a shorter helper function. var id = function(attr){ if (!document.getElementById) return undefined; return document.getElementById(attr);}var myCo

I came across a post the other day by Guy Davis about 3 Levels of Programmers. In it, he stated that programmers fall into one of 3 Levels, the Good, the Lazy, and the Bad. According to his post, the bad are those that say “I can do that myself!”, and then create a solution that is rather messy. The lazy are those that don’t build from scratch and instead find existing solutions. The good are those who are the ones creating the frameworks and libraries.While he admits in his comments that he was mainly venting against as he calls them “weak build-it-yourselfers” I thought it brought up an unfortunate opinion that at times seems to rise up in this industry. Now please note, I am not trying to pick on Guy Davis at all. There are some very valid points raised in his post, and as I stated before, he does admit he was mainly venting. I am sure all of us have vented about such things before.Developers sometimes give a cold shoulder to developers whose code is not up to par. This is an unfair

One very fundamental and integral part of CSS is understanding specificity. Understanding this basic concept can help to make your CSS development, and more specifically (no pun intended) your troubleshooting go more smoothly.Every rule in CSS has a specificity value that is calculated by the user agent (the web browser for most web development purposes), and assigned to the declaration. The user agent uses this value to determine which styles should be assigned to an element when there are more than one rule for that particular element.This is a basic concept most of us have at least a general understanding of. For example, most developers can tell you that the second declaration below carries more weight than the first: h1{color: blue;}h1#title{color: red;}If both styles are defined in the same stylesheet, any h1 with an id of ‘title’ will of course be red. But just how is this determined?Calculating SpecificitySpecificity in CSS is determined by using four number parts. Each type of

As mentioned in my previous post, I think using prototypes is powerful enough to deserve a more detailed explanation. To start off, let me say we are talking about the prototype method here, not the JavaScript library.Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it. Let’s use the Pet object that we created in the previous post. In case you don’t remember it or didn’t read the article (please do) here is the object again: function Pet(name, species){ this.name = name; this.species = species;}function view(){ return this.name + " is a " + this.species + "!";}Pet.prototype.view = view;var pet1 = new Pet('Gabriella', 'Dog');alert(pet1.view()); //Outputs "Gabriella is a Dog!"As you can see, by using simply using prototype when we attached the view method, we have ensured that all Pet objects have access t

Let me first tell you the why and then I will explain the what. By using classes in Javascript, you will notice a couple immediate benefits:Custom classes make your code more reusable. If many of your applications use a similar functionality, you can define a class to help and facilitate that functionality. Now you can just use your new class in multiple projects to provide the common functionality. For example, let’s say you create a custom accordion effect. If you use classes to define the effect you can use the same code to provide the same effect on another page simply by utilizing the class you created.Using classes helps to organize your code. If you are using classes, you will see that instead of just one really long piece of code, your code will become broken into smaller pieces of related methods and properties. This will make your coding easier to maintain and troubleshoot.So what is this terrific sounding little tool and how do we use them? A class is used to define a common

CSS can be a tricky little fellow. It’s easy to learn, but difficult to master. There are, after all, 122 CSS Level 2 Properties. Add to that pseudo-classes, selectors, inheritance, and specificity, and you have yourselves quite a bit of information to try and remember. Here are a few things that have made CSS development a little smoother for me, and hopefully they can do the same for you.Know the common bugsDifferent browsers will handle CSS differently. This is something every CSS developer learns early on, sometimes painfully. Make sure when you come across a bug you force yourself to take a few minutes to look into it and gain an understanding of what is causing the problem. You will be surprised by how few fancy CSS hacks you will have to resort to if you know how to dodge the problems in the first place.Check your work oftenAfter every couple rules you put into your stylesheet, you should be checking each browser you have access to so you can see what effect the rule had on the

Just in time for the holiday season, Microsoft has let it be known that IE8 (due out sometime in 2008) passes the Acid 2 test in standards mode. This is excellent news for web developers, and quite refreshing to hear coming from the same people who said passing the Acid 2 test simply wasn’t a priority for IE7.For those of you who may be unaware, Acid 2 is a test page for web browser vendors set up by the Web Standards Project (WASP). The intention was for the Acid 2 test to be a tool for browser vendors to use to make sure their browsers could handle some features that we as web developers would love to use. It’s a pretty intense little test. If your curious, the WASP walks you through each of the items that Acid 2 tests for.The timing for Microsoft couldn’t have been any better. This announcement comes right after Opera announced they were filing a complaint against Microsoft for their lack of standards compliance.Now just because a browser actually passes the test doesn’t guarantee i

A lot of people will tell you not to try and reinvent the wheel. If a script has been written, or a styling effect developed that accomplishes what you want, why spend time trying to create the effect yourself?I can see their point, and in some situations, I agree. If you are on a tight deadline for a project, you often don’t have time to develop that functionality from scratch, and it therefore makes more sense to adapt the structure already developed by someone else.I do feel, however, that web developers do need to try and create an effect from scratch when they have the opportunity. There are a couple reasons why I feel this is the case.First off, by forcing yourself to create that layout using CSS, or that form validation script in Javascript from scratch, you force yourself to analyze and learn the intricacies of the language you are dealing with. This knowledge will help to increase your understanding of both the concepts and techniques involved in arriving at a solution for the

One really common situation for web developers to run into is how to properly clear their floats. There are numerous approaches that have been discussed and used, but only recently have I come across a method that I believe is superior to the rest of the ones I had used up to now. In this post, we will first take a look at the problem caused by floats, and then we will look at some of the ways of fixing that problem.There are some simple styles that will stay consistent throughout the examples:The problem is that when you float an item, you are taking it out of the normal flow of the document, so other elements on the page act as if the floated element is not there. You can see this below (I am using white on black in my examples so they stand out more):As you can see, #wrap doesn’t see .main or .side because they are floated, so our border doesn’t extend down. There are numerous proposed solutions to this problem.Extra MarkupOne method that is tried and true, is to add another element

Most of us who are just starting in Javascript and more specifically working with the DOM, can probably write some simple scripts using event handlers. However, there is a more memory efficient method that someone relatively new to Javascript (heck, even some people who have been doing this awhile) might not be aware of - event delegation.Lucky for us, event delegation is not overly complex, and the jump from using event handlers to using event delegation can be made relatively easily.Let’s start by creating a simple script using event handlers, and then recreate it using event delegation. What we want from our simple script, is that whenever a link is clicked on inside of a specified list, we will get the ‘href’ of the link alerted for us.First, we will set up the markup. Nothing fancy to see here, just a list with an id of ‘links’ which will serve as our hook.Now we can write a simple script that will go through and add an onclick event handler to each of the links in the list. (Note

Congratulations! You have managed to stumble across my first attempt at having a personal site. While the site is admittedly a bit short on content right now, my goal is for this to eventually turn into a fairly interesting place to visit on a regular basis. Be patient, Rome as they say, was not built in a day.What can you expect…well, there will be many conversations about what I have learned or come across in the world of web development. In particular, you should eventually see information on things like CSS, XHTML, Javascript, and so on.There will be some personal updates mixed in I am sure, but I think it is fair to say that the vast majority of posts will be informative and educational in nature.This is a custom built blog system, so if anything is quirky, or some feature that you feel is seriously important is not here (other than pretty permalinks, they’ll be coming soon), please feel free to let me know.So stay tuned and hopefully I will have something a little more interestin