Pimp your VNC (Screen Share) shortcuts with OS X system icons

I use VNC (aka Screen Share) a lot, so I keep a folder of frequently accessed machines on my Dock.

The default VNC location file icon for OS X is a bit dull. Fortunately, OS X has a folder of system icons we can use instead. Even better, this folder contains icons for all recent Macbook, iMac and Mac Pro models.

Screen Shot 2014-02-05 at 13.14.50

The folder can be located here; hit ⌘⇧G in Finder and paste to jump right to it:

/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources

Creating a VNC shortcut file

In order to access VNC locations from the Dock, we can create a .vncloc file. Use a text editor to paste the following into a file and save it with a name ending in .vncloc, e.g. (user-hostname.vncloc):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
    <key>URL</key>
    <string>vnc://user@hostname.lan</string>
    </dict>
</plist>

Note: you’ll need to change the vnc://user@hostname.lan to the remote host’s details.

You can save this file wherever you like. I, for instance, keep all my VNC location shortcuts in a VNC Locations folder in Documents.

Changing the icon

First choose an icon from the folder above. These are .icns files, a wrapper format that contains the same icon in multiple image sizes. They should open in Preview by default; on the largest size hit ⌘A to select the image and ⌘C to copy it.

Next, with the .vncloc file we created above, right click and choose “Get info”. There is a small icon preview top-left; click to select it and hit ⌘V and it should paste the new icon. You can drag the location file to the right of your Dock for quick access.

A small bookmarklet for resolution testing

Here’s a quick bookmarklet I just cooked up.

Say you want to quickly see how the page you’re currently on looks at a certain resolution. You could fire up DevTools, click the “Emulation” tab, click the “Screen” tab, check “Emulate screen” and choose a resolution… Or you could drag this bookmarklet to your bookmarks toolbar:

Here’s a the indented source for those who want to see how it works:

(function(s) {
    open(location, null, 'width=' + s[0] + ', height=' + s[1])
})(
    prompt('Please enter a resolution in the form WWWWxYYYY', '1024x768').split('x')
)

Simple, eh? Even though window.open normally triggers a blocked popup warning, this isn’t the case for bookmarklets. Tested so far on OS X with Chrome, Firefox and Safari.

Start unique and drop the “the” – my thoughts on URLs

A few weeks ago, the Guardian newspaper switched from guardian.co.uk to theguardian.com as part of the paper re–branding itself as a global media outlet.

Of course, there’s nothing wrong with them changing their TLD. As a user of their site it doesn’t make much difference to me how the URL ends – address autocompletion in Chrome means I don’t have to remember. The problem is they also added a “the”.

How unique the beginning of your URL is matters because it means less characters to type. Consider the webcomic xkcd – thanks to my browsing history, my Chrome omnibox automatically suggests it after only typing “x”. I don’t think I visit another site beginning with x. At the very worst, if I were to start frequenting another site beginning with x, I might have to type “xk”, which is almost guaranteed to be unique – a good choice by Randall Munroe.

If the website in question has a more generic name, a good mitigation technique is to have multiple entry points. Going back to the Guardian for example, the old guardian.co.uk URL still works, meaning I can type “gu” to access the site, rather than compete with other websites beginning with “the”. On it’s own “g” for me returns gmail.com – despite the canonical URL is mail.google.com. Typing “gmail” is habit for me, but it also helps against collisions with URLs beginning with “mail”.

I find myself using non-canonical URLs like that a lot, particularly for google services. I use music.google.com (“mu”), calendar.google.com (“ca”) and analytics.google.com (“an”) instead of play.google.com/music, google.com/calendar and google.com/analytics, respectively.

Out of interest, I went through my keyboard to see which site is suggested for each single character. I only had two sites bound to number keys – 127.0.0.1 and 24ways.org. I also had nothing in my browser for q – I guess if you want to be smart about your startup’s omnibox URL autocompletion, you should register a domain beginning with 0, 3—9 or q.

127.0.0.1
24ways.org
arstechnica.com
bbc.co.uk
chanel4.com
data:text/html,<body contenteditable>
ebay.co.uk
fitocracy.com
gmail.com
html5test.com
itunesconnect.apple.com
jsbin.com
klout.com
liamnewmarch.co.uk
maps.google.com
news.ycombinator.com
open.spotify.com
plus.google.com
reddit.com
stackoverflow.com
theverge.com
ubuntu.com
vimeo.com
wpa-pinfold.co.uk
xkcd.com
youtube.com
zoopla.com

Edit: There’s some great discussion of this article going on over at Hacker News.

Benchmark and Fiddle: two web tools for testing ideas

Over the years I’ve made a couple of tools that I find useful for quickly testing web ideas. I thought it would be a good idea to share some of these with the world, in case anyone else finds them useful.

A small disclaimer: these aren’t professional, enterprise-ready tools – just experiments I’ve built to help me understand things. Also, don’t rely on these things being around forever or always working. Having said all that I really do hope someone finds them useful – get in touch with me on twitter if you do.

I have two things I want to share with you now – some of my other tools need a bit of polish before I push them out to the world.

Benchmark

The first of these is called Benchmark and is a JavaScript A/B benchmarking tool. You can supply two small scripts and run them consecutively to find out how they compare.

For example you could supply these two snippets to find out which snippet runs more quickly:

A: var a = {} and
B: var b = new Object()

I get A: 13046 runs/ms, B: 9099 runs/ms for that test. More runs means faster execution, so {} is the winner here.

By no means is this going to be a scientific result, but I do find it useful to quickly check my refactoring if I’m not sure of the most efficient way to write something.

Fiddle

The next tool I built is called Fiddle and a is a super-simple JavaScript idea scratchpad.

The setup might seem familiar, clicking the tabs allows you to write HTML, CSS and JavaScript. Clicking the “run” tab will run the code together, but (magically) does so without sending a request to the server. I’ve bundled it all up using the HTML5 Application Cache so if you access the URL once, that’ll be enough to use it offline whenever you please.

I built this after getting frustrated with the slow server performance of JSFiddle and thinking “why does this need to touch the server anyway?”. Nowadays I use JS Bin a lot (hi @rem) but in those rare occasions where I don’t have internet access or only have my phone on me I use Fiddle.

Why I no longer have a LinkedIn

“Are they having sex or aren’t they?” That was (according to The Social Network) the motivation behind Facebook; the question they thought they could help their users answer. Lately I’ve been trying to boil LinkedIn down and I’ve got to ask – what purpose does it serve?

I suppose the elevator pitch for LinkedIn could be something like: “an online directory of everyone’s current employment status, their connections and their CV/resumé.” On paper that sounds promising, useful even. In practice though, there are a few things I don’t like about the professional social network.

Endorsements are broken

Anyone can endorse anyone else’s skills, which is a fundamental flaw. The first person to endorse me for one of my skills was my dad, then a friend I went to University with, then a guy I hadn’t talked to in years and so on. If anyone can endorse anyone else for anything then what this becomes is not a system of identifying people’s strengths, but a game of who can play LinkedIn the best. The winner in all this is LinkedIn, not recruiters, and certainly not the users.

Voluntary spam

Recruiters are rife on LinkedIn. Don’t get me wrong, I think recruiters are very useful in helping you find work that you might not have time to look for yourself, but that is a process that works when you approach the recruiter. For LinkedIn, recruiters can contact you whether you want them to or not. This is a problem that plagues a lot of the online job database type services but LinkedIn (in my experience) is by far the worst.

Breaking the multiple notification rule

No social network should ever notify you twice about the same event; that is a rule I’ve come up with specifically because of how LinkedIn handles connections. Sending me an email about something I didn’t do the week before and telling me that so-and-so are “waiting” is… well, obnoxious.

Duplicate CVs

When I was trying to decide whether to keep my account or not, I weighed up turning off all notifications (which were really starting to irritate me) to see what functionality was left. It dawned on me that without the connections and endorsements and messaging, LinkedIn is most useful as an online CV.

For a lot of people it is useful to have an easily-updatable online CV, but I am a web developer. I already have an online CV – here it is. All things considered then, do I really need a LinkedIn account as well? I decided no.

Website Daydream – over 1,000 downloads

My Android app Website Daydream recently passed a landmark 1,000 downloads!

In celebration of this milestone I’ve started planning out version 2.0. There are some new features I’d like to add, as well as giving the projected a bit of a visual overhaul. All-in-all I hope to make the app more useful for custom dock-screens without sacrificing simplicity.

What I’d like to know is – are there any features you’d like to see added to Website Daydream? Let me know in the comments.

Carbon date for jQuery

Occasionally when I’m browsing the web I want to know how old a website is.

Maybe it does something awesome and innovative. Maybe it’s terrible and due a redesign. Whatever the reason, it’d be useful to know how old the site is. The trouble is unless the author explicitly puts a date on the site, there often isn’t a good way to age it.

Unless they use jQuery.

See, web developers generally grab the latest jQuery version and don’t update it. By looking at the version number (specifically in jQuery.fn.jquery) we can approximate the date of the last build / redesign.

Carbon date is a tiny tool that does just that.

Get the bookmarklet

Carbon date is a bookmarklet – to use it drag the following link to your bookmark toolbar:

If you’d like to see the (tiny) unminified source or would like to report have a bug, you can find the project on GitHub.

Happy dating!

Dean Reeve Photography

This month I completed a website for a friend of mine. Dean Reeve is an excellent photographer and cyclist from the North East of England, so when he asked if I could build him a website I was happy to oblige.

Dean was keen to establish an online presence with a portfolio and blog. It was clear from early on that the ability to update the site on the move would be essential to staying ahead of his competition. With this in mind I designed and built him a site using WordPress. Dean is an iPhone user so I was able to recommended the excellent WordPress app that allows composing blog posts on the go.

Dean was already uploading his photos to a Flickr account. By using the Flickr API I was able to build a portfolio that pulls the latest photos and sets through so he doesn’t need to upload his photos to two websites. Hopefully, this means Dean can keep his website up-to-date without changing his workflow.

Anyway, website details aside, you should really check out him out – I’m no photographer, but his work is amazing.

Website Daydream

This is a bit of a late annoucement, but I have an app on Google Play. Website Daydream is a simple app that allows a chosen website to be displayed when your device is docked or charging.

Building on the Android 4.2 “Daydream” mode, Website Daydream offers a couple of options:

  • Address – the address of the web page to load.
  • Interactivity – choose whether touching interacts with the page like a normal browser, or exits the Daydream for a screensaver-like experience.
  • Refresh – optionally refresh the page at a certain interval.

I created the app because I was surprised no one else had; the ability to load a custom page when docking my phone seemed like a great idea. You could load Twitter, your favourite news site, a custom HTML5 canvas screensaver – anything.

The app has been available for download (for free!) since December and has already seen installation on over 800 devices. If you own an Android 4.2+ device you should check it out!

Website Daydream on Google Play