I had nearly given up hope on Android – however, go to a webpage and in the address bar type in about:debug.  This useful little address will add a small bar to the top of your browser that allows you to see a javascript console!  I believe this trick will only work in the latest Andriod version or so, but try it on your device before you pull your hair out trying to debug you website for Android.

While I’m on the subject, I have found Weinre (pronounced ‘Winery’) to be an extremely useful little tool.  It can take some getting used to and the initial setup, though documented, is still a little on the tricky side, but is well worth the installation effort.

Good luck and happy debugging!

• rbga() support
• border-radius
• box-shadow
• linear-gradient

In addition to a more responsive interface, this dichotomy between server and client offers a lot of advantages. It means your backend is small and focused- defining a single entry point to your application’s data. The web client will interact with this interface but so can mobile and other third-party apps. Since the application and the application’s data are now completely separate entities they can now be distributed across the web as desired. The Unhosted project is doing some awesome work in this regard.

Why Node.js?

For those unfamiliar, Node.js is a small layer around the JavaScript V8 engine (the thing inside Google Chrome) that additionally provides access to the network and filesystem.

In my opinion, data-centric server backends like the ones described above are the sort of thing at which Node.js excels. It’s not uncommon for an application backend to be interacting with data in various places (i.e. databases, third-party APIs, filesystem, client connections, etc.) and this is Node’s strong point. Rather than interact with each resource one after the other (as is typical in most environments), Node.js can perform all these actions simultaneously and return the results asynchronously. This means both faster requests and the ability to handle more concurrent requests.

Perhaps more importantly, using Node means that JavaScript is everywhere. Your client-side application is written entirely in JavaScript, it’s sending JSON (JavaScript objects) back and forth to the server which can now also speak JavaScript. Throw MongoDB or CouchDB in the picture and your entire application stack can be written in JavaScript. This is a big win when you can start reusing code in multiple layers of your application.

So…

Moving your application to the client and/or writing your backend with Node.js is obviously not the right fit for every project, but if you’re a web developer then you’ve inevitably dealt with JavaScript. It’s unavoidable. Embrace it where you can and prosper. It’s a simple language at its core but provides a tremendous amount of flexibility and potential. If nothing else, take some time, put jQuery aside, and learn the ins and outs of JavaScript the language.

Here’s some resources that I’ve found valuable in my quest to re-discover JavaScript:

• JavaScript: The Good Parts
• JavaScript Patterns
• JavaScript Web Applications
• Understanding “Prototypes” in JavaScript
• Understanding JavaScript Function Invocation and “this”
• JavaScript Garden
• Essential JavaScript Design Patterns
• Patterns For Large-Scale JavaScript Application Architecture

Get domain names from godaddy.com for less by starting with a google search.

Instead of just going to godaddy.com to register a domain, google “cheap domains” and then click on the GoDaddy adwords link. Significant discounts will be applied to your domain order at checkout!

Try it!

Pros: Everything in one place, it’s free, highly customizable, multiple-language support, Git integration

Cons: A little clunky getting projects set up, no webdav support

More info: http://www.aptana.com/

Technique #1 – email to Evernote

This method is actually pretty simple, although you have less control than using the second technique described below. Thanks to Tech Critiques for this tip. Here’s the setup:

• Go to the Evernote app on your iPhone / iPad.
• Click on the satellite-dish icon at the bottom right, and a little menu will pop-up.
• Click on “Evernote email address”, and click “Add to Contacts”.
• Tap outside the settings menu to close it, and close Evernote.

Now you’re set to easily email pages from mobile Safari to Evernote. When you’re in Safari, select some text/images on the page you’re viewing and copy them to the clipboard (optional). Then tap the icon next to the address bar to “Mail Link to this Page”. Start typing “Evernote” in the TO field, and it will auto-fill for you. The link to the page you were on is already there in the message body, and if you copied any text to the clipboard you can paste it in now.

This video demonstrates the process:

Technique #2 – the webclipper bookmarklet

This method is a little more difficult to set up, but I think it’s the best solution because it allows you to tag, file and annotate any page with the familiar webclipper interface:

• From Safari on your iPhone / iPad copy the code block below starting with “javascript” and ending with “;”.
• Create a bookmark for this (or any) page, and save it. You’ll overwrite this bookmark in a second with the bookmarklet code.
• Now edit the bookmark you just created, rename it “Send to Evernote” or something descriptive that you’ll remember later. Delete the bookmark URL and in it’s place paste the code that you copied to the clipboard. Save the bookmark.

Here’s the code for the bookmarklet:

javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src='http://ancientwisdom.cc/evernote/evernote.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

Now you can use the new “Send to Evernote” bookmark any time you want to store a page in Evernote. When you click the bookmark it will open up the familiar webclipper box overlaid on top of the page you’re viewing.

You’ll notice the code contains a link to our server. That’s because there’s more javascript happening behind the scenes to make it all happen. Feel free to have a look through the code, and even copy it and put it on your own server if you like. Just make sure to keep the copyright headers intact, and update the bookmarklet to point to your copy of the script instead of ours. Thanks to Philip Constantinou from Evernote for the original JS code, and Pete248 for the mobile browser tweaks.

Technique #3 – save to PDF, then to Evernote

I can’t vouch for this technique used by cdbeckman because I haven’t tried it myself, but this also seems like a reasonable way to get pages from mobile Safari into Evernote, if you don’t mind the whole page being stored as a PDF file.

• Sign up for Joliprint – http://joliprint.com/iPad/ and install their bookmarklet. This will allow you to make a PDF of the page you’re viewing in Safari.
• Go to the page you want to store in Evernote and click the Joliprint bookmark that you installed.
• When the PDF loads, just click “open in evernote”.

If you have any other techniques that work well for you, please leave a comment here and let us know!

A sensual and esoteric art form that can make or break a design.  Similar to pairing wine and food, it almost requires a certain type of sensual genius.  It seems that in my practice as a designer I have developed several of my own rules of thumb that come from my personal (acquired) taste and design sensibility.  Everyone is familiar with simple tricks like the juxtaposition of a serif typeface with a sans-serif, or thick juxtaposed against thin, uppercase versus lowercase, letterspaced versus unletterspaced.

But I think these basic rules aren’t enough (perhaps they are even trite!).  Font-pairing/font-mixing has deeper, sensual, even emotional potential that, when unleashed, can really make a design jive.  Since I saw this months ago, I can’t get this guide to mixing fonts from Hoefler & Frere Jones out of my design brain.   Sure, it’s a crafty marketing tool meant to double or triple the size of a HFJ customer’s shopping cart, but some of the font wisdom in here is particularly rich!  I love embracing and indulging in the subjective qualities of type (levity, gravity, repose, aggression, etc) instead of simply responding to the objective features (serif, x-height, etc).  Maybe I like reading it because it kind of puts into words what I have more or less always intuited in my designs but could never define.

Here I’ve extracted the major rules from the guide:

“A palette with wit: use typefaces with complementary moods to evoke an upbeat, energetic air.”

“A palette with energy: Mix typefaces from the same historical period whose families have different features.”

“A palette with poise: mix typefaces with a similar line quality if they offer different textures.”

“A palette with dignity: mix typefaces with similar proportions and give each a different role”

Bon apetit!

Font preview image from Typedesk. Download LH Line1 Sans here.

As a linux user, I spend a lot of time hunting down the best open-source software on the web. Shifting over to Mac, I’ve had to start searching for non-linux open-source software and I have run across some great little products. I will continue covering open-source goodies in the future, so check back in regularly.

Today I want to introduce you to Jing, a great little gadget for screenshots and video grabs. A pro version is available, however I have only test-driven the free version. After the install, a little yellow ‘sun’ sits up in the corner of your screen. Drag the mouse over, click, and it comes to life with a simple three-tiered menu: Capture, History, More. Using capture, you’re given a cross hair. Click and drag to select any area you want on your screen, or just click once to select the area as an entire active window.

You get a little menu there where you can choose to capture a screenshot or video. Select the screenshot and you can do some basic editing, share it, and/or save it. Simple!

The best thing about this gadget is that it’s always available in the upper right corner – and it’s never in the way. You don’t need to move windows around to get to it or open it (after the initial load – set it to load on boot and you’re set).

Pros:

• Lightweight, fast
• Always available without having to shift around windows / workspaces
• Nice design / interface
• Video and screenshot capability with minimal effort & clutter

Cons:

• Free version has some features turned off (webcam record, for one)
• Occasional click misfires on the initial menu
• Windows / Mac only.  Haven’t tested on Linux with Wine – I’ll repost when tried

Definitely check it out if you’re taking a lot of screenshots or in need of recording your screen in video.  Very handy little tool indeed!