Lazy-Loading Disqus Comments

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.

(more…)

Prerender on hover?

InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body></body> and <title></title> and changes the URL.

I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy.

It got me thinking though... isn't there a newfangled prerendering thing? (more…)

EOL Firebug

The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.

Looks like the end of an over 2 year process.

Firebug was probably the single most important tooling advancement in front-end developments short life. A glimpse of the future, indeed.

CSS-Tricks Chronicle XXIX

A round up of goings-on related to me, this site, and related projects, as we are wont to do once in a while. I've had the good fortune of being a guest on a number of podcasts lately, so I'll link up those. I'll share some upcoming conferences I'll be at and news from CodePen and ShopTalk Show.

(more…)

CSS Grid!

Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea

The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media

This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on social media. But what about creating the links to let users share these web pages? Facebook, Twitter, and LinkedIn offer numerous ways to do this, some involving button generators and others that require external JavaScript. To avoid all of that, though, you can create your own links to share web pages. And the best part is that it’s simple to do yourself. Here’s how.

(more…)

An SVG That Isn’t All… SVG

SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG 2, it'll be even more multimedia with the inclusion of audio, video, canvas, and more.

If you'd like to make SVG more of a part of you day-do-day workflow, and I suggest you do, pick up a copy of Practical SVG.

We have a pretty good* newsletter.