Exception tracking

It is very useful to know how to get more information on exceptions when you want it, and how to keep them from killing the server in production.

Object size

Sometimes you have a key / value map of objects stored by id for example. In Node, you get to say

var notes = { 3: { Note: { text: hi, ... } }, 17: { ... } };
log(Object.keys(notes).length);
2

Sweet

Backbone.js

Use Backbone. Just use it, from the very beginning. Try reusing models on the front end and backend. Or just sync the entire application state.

Express

If you’re building any sort of web app, not using Express is probably a waste of time.

Foreman and ReadyJs

These two npm power ups make managing your environments a breeze.

sudo npm install foreman
sudo npm install readyjs
vi Procfile

web: NODE_ENV=production node app.js
localhost: readyjs app/ jslibs/ --nocompiler; readyjs app/ jslibs/ --nocompiler --nojslint; readyjs jslibs/ www/js/ --order "underscore.js, backbone.js, jquery.jeditable.js, jquery.jtml.js, all.js" --nojslint --nocompiler; NODE_ENV=development node --debug app.js

What the localhost line is doing is running ready js once with jslint turned on, on my application files only. It runs it again without jslint, just in case it doesn’t pass, so we’re sure the compiled file is where it should be. Then it concats all the libraries used, in order needed for loading, and we’re good to go. Now all you need to type to launch your app is

forman start localhost

To make this even better, add a Git hook, so when you deploy everything is how you want it for production straight from the repo.

Heroku

Offers free development hosting, and integrates with Foreman, super easy deployment. Lot’s of cool free add-ons as well to add some spice. Definitely worth a look.

Hopefully these tips will save you some time, feel free to comment with any tips you’ve found as well.

Using sprites to develop your CSS based layouts has become the de facto standard. The benefits are many and have been extolled endlessly in blog posts and articles throughout the series of tubes. The problem that I’ve run into when developing a sprites file is this: the right-hand side. If you’ve worked with sprites for any length of time, you know exactly what I’m talking about.

In my experience, a great majority of sprites are simple icons that appear to the left of some bit of text. For example, a pencil icon would appear to the left of ‘Edit’ in all .editBtn divs. The common way to handle this without adding non-semantic markup is to put the icon way on the far-right edge of the sprite file, so that you don’t have to worry about other images within the sprite showing through underneath your text. I’m sure most of your sprites resemble something like this:

This creates ugly, unorganized sprites files that are very difficult to maintain. As icons are added and removed, you basically have three options. The first, and I believe most common option is to stick new icons in wherever they fit, which creates unorganized sprites very quickly. Secondly, you could rearrange the icons as you add and remove them, but this creates a lot of overhead as any icon you move has to be updated all throughout any css that renders it. Finally, you could simply stretch your sprite file vertically, and keep tacking them on at the end. This is also unorganized, not to mention very inefficient in terms of file size (due to unused space in the left side of the sprite).

NOTE: :before and :after are not supported by IE7 and older. Be ready to lose some visuals for older browsers.

Enter :before and :after. Using these two simple selectors, you can create and inject pseudo-elements that can be styled just like any other element, without any non-semantic markup. Instead of setting the background-image of .editBtn, you can create .editBtn:before, give it a height, width and position, and boom. Perfectly constrained icon rendered without any additional markup. The beauty of this technique is that it allows you to place your icon anywhere inside the sprites file, without fear of other icons being rendered where they shouldn’t be.

Now I can do fun stuff like this:

.editBtn {
display: block;
padding: 5px 5px 5px 60px;
border: solid black 1px;
position: relative;
overflow: hidden;
width: 100px;
background-color: #ccc;
cursor: pointer;
color: #000;
}
.editBtn:before {
background-image: url('/img/sprites.png');
background-repeat: no-repeat;
content: "\0020";
display: block;
height: 30px;
width: 28px;
position: absolute;
top: 0px;
left: 10px;
background-position: -5px -80px;
}

And with something as simple as this:

<div class="editBtn">Edit</div>

You can make something like this:

Without having to worry about where you place your icons in your sprite. This will allow you to group icons more logically, and hopefully create a cleaner and easier to maintain sprite.

$ pwd

/mnt/www

Ok, I’m in the right folder.

$ ls -al to_delete/

total 12
drwxr-xr-x 3 ubuntu ubuntu 4096 2010-11-23 09:09 .
drwxr-xr-x 3 root root 4096 2010-07-15 17:31 ..
drwxr-xr-x 5 ubuntu ubuntu 4096 2010-04-09 15:11 source

Ok, that’s what I want to delete. I’m positive I want this thing gone, I’m going to replace it immediately.

$ rm -rf to_delete

Gravy.

(three seconds later)

SHIT! I needed that!

As you’ve probably now realized, in the future, you should do have done something like this instead
$ mv to_delete to_delete.bak
It’s too late now. What’s done is done, it’s 4 in the morning, and you need those files.

Well luckily for us, you might not be entirely screwed, yet. You need to act fast and deliberately or you may lose data due to other data being written over the data you want to recover.

First we need to find out what partition our data is on.

$ mount

/dev/sda1 on / type ext3 (rw)
proc on /proc type proc (rw)
none on /sys type sysfs (rw,noexec,nosuid,nodev)
none on /sys/fs/fuse/connections type fusectl (rw)
none on /sys/kernel/debug type debugfs (rw)
none on /sys/kernel/security type securityfs (rw)
udev on /dev type tmpfs (rw,mode=0755)
none on /dev/pts type devpts (rw,noexec,nosuid,gid=5,mode=0620)
none on /dev/shm type tmpfs (rw,nosuid,nodev)
none on /var/run type tmpfs (rw,nosuid,mode=0755)
none on /var/lock type tmpfs (rw,noexec,nosuid,nodev)
none on /lib/init/rw type tmpfs (rw,nosuid,mode=0755)
/dev/sda2 on /mnt type ext3 (rw)


So /dev/sda2 is holding /mnt. That’s the ticket. So now $ exit and back to our home computer we can simply say

$ ssh ubuntu@server.com "sudo dd if=/dev/sda2" | dd of=/Users/nickabusey/Downloads/backupfile.iso

Now we have a clone of the partition with the data we care about. All that’s left after that is to recover the deleted data. First install Foremost.

OS X:$ sudo port install foremost

*nix:$ sudo apt-get install foremost

Now, recover the data! In my case I wanted to recover all image files, so I just let it run for all supported file types and got as much as I could out of it.

$ foremost -t all -i backupfile.iso

$ ls output/
audit.txt bmp gif htm jpg png

$ tail output/audit.txt
1636 FILES EXTRACTED

jpg:= 1307
gif:= 93
bmp:= 1
htm:= 37
png:= 198
------------------------------------------------------------------

Foremost finished at Tue Nov 23 03:23:53 2010

Huzzah!

This works pretty well. Many of the images I recovered were corrupted, others didn’t get recovered at all. Another annoying gotcha is that the files are named after their position on the partition rather than their original filenames. So you have to match them back up by hand, and if you have a lot of files this could be extremely tedious if not downright impossible.

At this point I’d like to point out the benefits of regular, redundant backups.