Barnabas

AngularJS Payback Time

At my new job I’ve been working on a huge project for almost eight months: rewriting the company’s web application UI from the ground up. That is a great opportunity (I could feel it when I interviewed) and it has been very rewarding. The old app was a nightmare jQuery mess. There’s nothing wrong with jQuery itself; it’s a fine DOM manipulation and cross-browser library for lots of things, but a JavaScript application framework it ain’t.

After some prototypes, I strongly recommended that we build the new app on AngularJS, and I’m so glad we went that direction. AngularJS is a sophisticated, elegant, and powerful JavaScript application framework and I have grown to have deep appreciation for how it works and the community around it. While learning its nuances, it’s been a great help to have online resources and practical, real-world examples. I thought I would do my part to give back by sharing some insights on what works. The thing about AngularJS is that you can ignore it completely and force it to do what you want, but if you work with it, you’ll often be pleasantly surprised at what you can accomplish with very little. In my company’s case, the new version is much more sophisticated, easier to maintain, less bug-prone, and about a third of the code.

Read More

1 note

“Isn’t Enough Space?” What?

Summary: if your Mac complains there isn’t enough space on an external disk, it’s because there’s a limit on files in the root folder. Copy the files to a subfolder instead.

Today I was trying to copy many files to an SD card from my Mac, and it gave me the error “There isn’t enough space to copy the file” or something. However, there was tons of space, 2 GB in fact, but I was only trying to copy 100 MB. The error showed whether I was exporting files from iPhoto or copying them in the Finder.

It turns out that the error “there isn’t enough space” is a lie. This is a generic error when OS X has an error on a copy operation, but the reason it gives in this case not entirely true. This is not a capacity problem. Rather, the target disk, the SD card in this case, was formatted as MS-DOS (FAT). It appears that this format can only store a limited number of files in the root folder. This is not true for subfolders though, so the workaround was to copy the files to a subfolder.

I’m leaving this as a note for the Googles to find. Don’t feel dumb, be glad that you know how to find answers.

1 note

I made a game

I just pushed live a demo multi-player game I wrote to learn Node.js. Tic-tac-toe is about the simplest game I could think of and still make a multi-player version of it. I guess paper-rock-scissors is next.

The about page sums up how it was made, the tech and so forth. Beyond those details, I was surprised by:

1. What an absolute joy it is to write a web app with Node/Express/Jade/Zepto
2. The large amount of details that have to align just right to make any kind of multi-player game possible
3. The numerous talented shoulders I can stand on to make something like this

I feel like eventful web apps like this are going to be more common than the dumb forms we’ve been pushing around for years and that this is the way to write them. Yes, I know there are some libraries and frameworks to make real-time apps a piece of cake, but I wanted to try this myself. I can now report: it’s hard.

I borrowed a bunch of things to make this look halfway decent, but I’m sure a person with an eye for game design could do much better. This was a technical exercise for a non-artist programmer. Though I am generally satisfied with how it turned out, a little art help would be most welcome. TL;DR: I know it looks bad, oh well.

I’d also like to improve it by adding sounds, but good game sounds are hard to find, and I’m already using about 400 libraries to load the game. It would also be nice to clean up and share my server-side code, but I’m tired now and ready for bed.

1 note

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