Even as browsers progress and add more support for CSS-based animation, we still find ourselves relying on JavaScript to get the job done. But that doesn’t mean we need to define our styles in our scripts.

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.

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.

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
withinviewport(elem);
// Same as above, but using the jQuery plugin
$(elem).is(":within-viewport");
// Run some function on all visible divs
$("div").withinviewport().myFunction();

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+.

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.

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.

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.

Twitter recently unveiled a new interface for their mobile site located at mobile.twitter.com 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 mobile.twitter.com; or, if you’re anywhere else at all, you’ll simply go to the mobile home page.

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”.

Tap the bookmarks icon to open your bookmarks, then click Edit

Tap on the bookmark you just made. Then tap on the second line, containing the URL, to edit it.

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.

Click Done. The URL should now be a bunch of code beginning with “javascript”

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.

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.)

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

to keep their current number, or

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.