Barnabas

jQuery Mouse Angle Plugin

At work I’ve been working on a cool new project that will be released later this week. Part of the project involved writing a new jQuery plugin to detect the angle of a mouse drag. This is helpful when you’re dragging something in a circle, perhaps a dial or something. It’s functional for our purposes, but I may have missed something subtle or performance-related. In fact there’s a strange bug that I can’t quite resolve.

But first, here’s the demo, and here’s the source (also at the end of this post)

Check out the demo page for usage. Essentially what happens is that as you drag, a custom event is raised “mouseAngle.update” which contains data about the degrees, radians, percentage, and direction of the mouse in relation to the center point of the element. For demo purposes, I also rotate the target itself, but you could really do whatever you want with that data. I would submit this to the jQuery plugin repository if it was online, but this post will have to do.

The current bug is small: direction is accurate except when crossing the 9 o’clock threshold. While I’m comparing the delta of radians between events to calculate direction, I’m not exactly sure what the range of valid values is to know that you’ve crossed that line. My geometry is rusty. If you fork the gist and fix it or clean up my math, please let me know.

Migrating to WebFaction with wget

I am in the midst of moving some sites from MediaTemple over to WebFaction hosting. For a small site with relatively few media assets, it would be fairly normal to upload the code directly from my laptop, since I have the latest and greatest. However, I have a private family Wordpress blog that has about 500 MB of pictures, and downloading and re-uploading that would be a drag. Wouldn’t it be better to transfer the data between servers?

I was a little rusty on FTP and spent some time searching to see if it’s possible to recursively download files and directories. Short answer: it’s not. Command-line FTP downloads one file at a time, even though FTP client GUIs will fake it for you behind the scenes. One potential workaround is to log in to a MediaTemple bash prompt via SSH and compress the whole site into a single archive, then log in to the WebFaction machine and FTP the file over, then uncompress it. I found a better way, though, using the wget command. This is what I did:

1. Create the empty web application that will be the destination.
2. Log in to the destination server with SSH and change directories to the root of the new application.
3. Use something like the following command to mirror all of the data files over (explanation to follow):
   wget -m -nH --cut-dirs=3 ftp://user:password@s12345.gridserver.com/domains/something.com/html/
4. While the above command runs, create a new destination database at WebFaction, dump the old MySQL database to a file using the phpMyAdmin tool, and re-import it to the new database
5. Once the files are done transferring, change the wp-config.php file to point to the new database, delete or rename index.html (it overrides index.php otherwise), and make sure that there are no special directives in the .htaccess file, such as one I had explicitly enabling PHP5.
6. After testing the new site with a fake hosts file, log in to the domain manager control panel and switch the name servers over to the new host.

This is what the wget command parameters above mean:

• -m: Mirror files, a shortcut to say, among other things, download recursively to an infinite level. The default recursive option doesn’t go more than a few levels.
• -nH: No host directory. Without this, wget would create a new subdirectory called, in this case, s12345.gridserver.com, which we don’t want.
• —cut-dirs=3: without this, wget could further create several directories called, in this case, domains/something.com/html. We don’t want that; we just want everything below HTML to be the same, so cut-dirs tells how many directory levels to ignore. The directory level after 3 will be used, however, which is what I wanted.
• The rest was the source URL including my FTP user and password, as well as the server path to the directory I wanted. The example above is an approximation of what MediaTemple uses for their web file directory structure.

Hosted CMS: Go Make Your Own Website

Will you please make a website for my business?

You can and should make it yourself. In 2010, 95% of websites probably should use an online hosted content management system (CMS) rather than hand-coding static HTML because most websites for small businesses and individuals are rarely-changing static content. In the past 3 years, the competition in this space has really improved the usability and graphic design. While I can help you set up your static website using one of these systems for a fee if you really need help, generally I prefer make web applications that are in the remaining 5%, like online learning or casual games or web/telephone messaging or something like that.

Below I have collected several links to several prominent hosted CMS providers in response to this question. My criteria was that it had to be relatively mainstream and possible to host your own domain. If I’ve missed one that you think belongs on this list, please let me know.

Read More

1 note

View Source on Chrome = GOOD

There are some people on the intartubes that complain when you do a view-source in Chrome, the page is re-fetched from the server and displayed in another tab, with “view-source:” prepended. If this is a complaint, then maybe you actually want the “Inspect Element” screen instead.

I have accidently stumbled upon what I consider golden debugging behavior, at least if you’re doing GETs or playing around with a REST API that is cool with GETs. Follow along with me in Chrome, and we’ll use Digg’s API as an example:

1. First, get this link in Chrome: http://services.digg.com/1.0/endpoint?method=search.stories&domain=tumblr.com. This is searching for all stories on Tumblr that have been Dugg, by the way. Note how the text makes no sense and you can’t see the underlying XML.
2. View source on that page, which will open a new tab like this: view-source:http://services.digg.com[…]. Ahh, that’s much better. Syntax highlighting is all there. 
3. But wait, what if I want to change some parameters and see the result? Do I have to do it on the original tab? No! You can append them to the URL on the view-source tab, hit enter, and you’re still in view-source mode! To test, add &sort=promote_date-desc to the end of the URL to change the sort. Syntax highlighting: check.

You may have already known about this, but I just tried it today and thought it was mighty cool.

2 notes

Ditch Vonage with Twilio

(Man, I’ve been sitting on this draft a long time…) After 6 years with Vonage, I finally crossed the point where it’s no longer worth $25, or even $10 a month to me. I wanted to forward my old phone number to my wife’s and my mobile phones simultaneously without spending a bundle.

The solution? Twilio. You can do it too without any coding at all. Here’s what I did:

1. Have a Twilio account first. Sign up here, they give you $30 credit to try it out, which for these purposes will be extremely generous.
2. Ported your Vonage number to Twilio. You fill out this form (you need to be signed in to see this link), and a few days later it just happens. You’ll probably get a day and time for the switch, so it won’t be too bad.
3. Change the main URL from the demo to point at what Twilio calls a Twimlet, sort of a library of pre-built functions. You can see many examples here, even chain them together. I just use the Simulring one to forward incoming calls to our cell phones. The caller ID stays intact from the original caller. Whoever picks up first answers the call.

Total cost? $1/month + 3¢/minute. If your call volume to your home phone number is anything like mine, the $30 credit will last at least two years. When I stop feeling lazy, maybe I’ll code up a simple menu for callers to choose who they want to talk to.

UPDATE: I’ll probably switch my Twimlet powered solution over to the newly-released OpenVBX.