Detailed console logging

This is an update to the console.log wrapper; see this blog post for background and a more detailed discussion of the problems with console logging.

While logging the console can be useful during development, some browser consoles do not display logged data in a readable, useful format. These primitive consoles do not expand arrays, do not link DOM elements to the source code, print objects as [object Object] rather than listing their properties, etc.

Continue reading

Matching UI Behavior with User Behavior

The viewport is a direct window into what the user sees, and a lot can be learned by watching it. In my previous post I introduced Within Viewport and I want to discuss how, particularly through my Twitter app Signal~Noise, I’ve found it useful in making interfaces respond sensibly to user behavior.

A common solution for developers looking to increase their site’s performance is to load data on demand, for example using Infinite Scroll. But sometimes the scroll position isn’t enough — you need to know about the content on screen.

Continue reading

Within Viewport: JavaScript and jQuery Plugin

Within Viewport indicates whether an element is entirely within the viewport. It also allows you to specify your site’s effective viewport (eg, to account for fixed header and navigation bars) and provides a few handy shortcut notations.

It’s quite simply to use:

var elem = document.getElementById("myElem");

// Returns true if it's completely visible

// Same as above, but using the jQuery plugin

// Run some function on all visible divs

Live Demo • Source Code at Github

Continue reading

Complete cross-browser console.log()

Update: I’ve made a significant update to this project which is targeted at primitive consoles (IE, Opera 11 and older, iOS 5 and older, and more). A separate blog post has more details or you can jump right to the updated Github repo. The original post below still applies.

Many front-end web developers make use of the wonderful browser consoles that have matured in the past few years. While the tried-and-true console.log() often does the trick, its lack of support (particularly in IE) has led to the use of proxy functions, such as Paul Irish’s console.log wrapper and Ben Alman’s Debug() which prevent unsupportive browsers from throwing errors.

I had a need for logging data in every browser, not just ones that natively support console.log(). So I forked Paul’s function and expanded it to work with every browser I could test — IE6-9, Firefox 3.6 & 4+, Chrome 10+, Safari 5+, and Opera 11+.

This will be exhaustive, so you may want to jump directly to:

Live Demo • Github Repo • Source Code • Minified Source Code

Continue reading

My wish: that Google would preload its CDN libraries

The idea behind using a common CDN such as Google’s, as opposed to your own CDN (or none at all), is that by the time a person reaches your site there’s a chance they already have your JavaScript libraries cached. While it’s likely that an übergeek with fifty opened tabs will have jQuery cached before hitting one of your pages, the same isn’t so true for every Joe Facebook.

But what if a very popular site, one that nearly everyone would hit before reaching your site, loaded those libraries? I imagine the number of users running cached libraries would increase dramatically.

Continue reading

How to Use Your iPhone Overseas

If you’re preparing to travel overseas and you’ve had an iPhone for any amount of time you’re probably excited about its usefulness as a travel aid. In particular, you’ll be keen to make use of its always-on Internet connection.

But you’ve probably heard the horror stories of arriving home to a thousand-dollar cell phone bill littered with roaming charges. Fortunately, you have some options to make use of your iPhone’s capabilities outside of the United States.

Continue reading

How to Keep Sites from Spying on Your Copy and Paste

Many news sites, from Wired to my local newspaper, have taken to adding a ‘feature’ to their articles — any text you copy and paste is silently broadcast to another site. That other site, Tynt, keeps track of what you copy and paste to your friends in an effort to track demographics.

Text copied and pasted from a news article into an IM window

While some find it useful that Tynt also appends the URL of the article you’re viewing, many find the behavior obtrusive and a violation of their privacy. Want to share a snippet of a story with a friend? Go ahead, Tynt (and presumably the news site) are watching.

Here’s how to get rid of it, depending on your browser of choice.

Continue reading

Mobile Twitter bookmarklet displays the new, updated Twitter on your smartphone

Twitter recently unveiled a new interface for their mobile site located at loaded with the features you’re accustomed to having on the desktop version of the site. However, when you browse to Twitter or follow a link from an email on your mobile phone you’re still shown the older, far less useful interface by default.

To automatically view any page in the new interface, just use the bookmarklet below. If you’re currently on a Twitter page you’ll be redirected to the same page on; or, if you’re anywhere else at all, you’ll simply go to the mobile home page.

The bookmarklet: Mobile Twitter

Or, to install it on an iPhone, follow these steps.

  1. Click here, and bookmark the resulting page once it loads by clicking the + icon at the bottom of Mobile Safari. (It will look just like the page you’re on.) Call it something like “Mobile Safari”.
  2. Tap the bookmarks icon to open your bookmarks, then click Edit
  3. Tap on the bookmark you just made. Then tap on the second line, containing the URL, to edit it.
  4. Hold your finger down on the URL until the magnifying glass appears. Slide your finger to the left until you see “#__javascript”. Put the cursor just before “javascript”, then hit Backspace to clear out everything that comes before it.
  5. Click Done. The URL should now be a bunch of code beginning with “javascript”Edit bookmark dialog, complete

And that’s it. To use it, just open your bookmarks and tap on your new Mobile Twitter bookmarklet while you’re viewing any page.

Why Google Voice’s "keep my number" feature isn’t a good idea

Google Voice, the service that gives you a universal phone number, free SMS, and text transcripts of your voicemail, is now letting new users keep their current phone number when signing up. On the surface this sounds like a great new addition that will entice users who were scared off by the idea of giving up their current number. But in reality, this is actually a stripped down version of the service that not only removes functionality but actually restricts how users can use their phones. (This new option is not the same as porting your number, something Google expects to roll out in the future.) Google Voice

When a new user receives and accepts their Google Voice (GV) invite, they’re presented with two options:

  1. to keep their current number, or
  2. the ‘classic’ option of getting a new GV number, then associating their phones with that

Choose wisely, because if you pick Option #1, there’s no going back. In other words, you can’t get a new GV number and all the features and options that go with it. Even worse, you’ll be stuck using Google’s voicemail system (and not your carrier’s) whether you like it or not.

That sounds harsh, but fortunately you can get all the features and keep your current number by choosing Option #2.

If you choose Option #2, you simply select a new GV number,  then add your cell phone to your account. You can then optionally activate the voicemail features on your cell phone — the same ones trumpeted under the banner of Option #1 on GV’s sign up page.

Basically, “keep my number” is a lite version of the service with fewer features. There is no good reason to choose it — if you think it’s a hassle to get a new phone number — and it’s really not — just don’t give it out to anyone. No one you call or text will know the difference.

Update: Nearly two months later, Google finally added the option to get your own Google Voice number even if you didn’t choose one initially.