Saving your surfing on the Mac

I'd wager that most of you spend as much of your time on the web as I do, and that it's one of the first places you look for answers to just about any question. As a web designer, I look there for inspiration, solutions and am constantly learning how to improve my design and my code with the help of the internet community.

It's become important, over time, for me to be able to re-locate the answers I've found, and to archive things that have made a difference for me. I don't just want a folder full of bookmarks, I want to be able to search my local repository in a more abstract way. The tools for doing this are abundant, and many of them free. I thought I'd share part of my current system for saving my tracks across the 'net.

Saving solutions and ideas

Evernote is a very good "surfing" repository for me. I clip the important sections of text using a custom clipper and create new notes from them. My custom clipper (an AppleScript/Javascript System Service) isn't terribly important, the default clippers will give much the same result (mine just handles code and images a little better). What you end up with is a taggable, full-text-searchable bookmark to the original web page. You can save entire PDF's, but I've found that keeping my Evernote notebooks trim and text-based works best in the long run.

As a side note, the previously-mentioned HistoryHound can make it very easy to search in retrospect for pages you might not have realized you wanted to save at the time, and Instapaper is excellent for gathering pages you want to read but don't have time at the moment. The combination keeps my notebooks and local searches from being cluttered with things I haven't even read yet.

Collecting Inspiration

If I need a full-page image of the site, I have a couple of options. If it's just an inspiring design I want to archive, I use LittleSnapper to snap, categorize, tag and annotate the page. If I want to be able to Spotlight search the full text of the page, though, I use the oft-forgotten Paparazzi! to capture a vector PDF, and then tag it as I save it using Default Folder X (or soon after, using Tags). The beta version of Paparazzi! has given me no trouble, despite a lack of updates, and has proven to be a valuable tool.

Bookmarking

In cases where I just need a bookmark/description record of a page (and sometimes even if I've already archived it in another fashion), Delicious and Pinboard are excellent tools for the job. I especially enjoy using them with Delibar, a great app for both storing and searching my bookmarks on either service.

The Tags application from Gravity can also directly tag web pages in Safari and Firefox, making it possible to include them in your Spotlight searches. There are several applications available which can make your Delicious bookmarks show up in your Spotlight index as well.

In Safari, in case you don't know, you can access the first nine non-folder bookmarks with Command-[1-9]. I keep all of my bookmarklets and commonly used links in folders, so the only shortcut-accessible bookmarks in my toolbar are my surfing tools. I also prepend the bookmark name with a number, reminding me what Command-number combination will launch it: 1. Quix, 2. Delibar, 3. Read Later (Instapaper), etc..

Capturing Code

When it comes to code snippets, I'm still looking for the perfect system. I really, really like Snippets, but I'm not completely sold on its integration with my workflow yet. I've found that Evernote -- with my little custom clipper -- works quite well. The basic trick is to strip out any line numbers in code blocks and maintain the pre/code formatting on import. Evernote will then respect indentation, and applies a monospaced font for readability. The other option I've found to work well is to save snippets as plain text files in a "Snippets" folder, add a description in the comments (based on the language of the snippet) and tag them with Tags or Default Folder X.

Taking notes

For keeping notes that aren't directly related to a URL or general search, I keep VoodooPad open pretty much all of the time my computer is running. With some scripts borrowed from Ian Beck and slightly customized, I can grab notes and tag them on the fly. If, while I'm surfing and searching, I come up with an idea for a project or post, I just send it to my VoodooPad scratchpad. I use the tag "blogaboutit" to add it to my collection of post ideas, or "freetime" and "project" to add it to a list of project ideas I might get around to someday. I can include links, notes and attributions in VoodooPad, and can send it straight to my scratchpad from LaunchBar. Some other scripts in my arsenal also allow me to save complete batches of tabs as a markdown list to Evernote or VoodooPad to archive entire search/surfing sessions with a date, time and primary subject.

Tagging

When it comes to the tagging part, I generally tag based on the type of archive it is (snippet, inspiration, reference, etc.), any tags that would help me find that specific archive again, and then some special tags. For example, I use the tag "problemsolved" in combination with a tag specific to the search I made to find this answer. That makes it easy, next time I run into the same problem, to locate the answer using the same query that led me to it originally. This trick can be used on Delicious, in Evernote, on plain text files, and even on PDF's with annotations and tags. By the way, I use Skim for PDF annotations and notes because it makes much easier-to-Spotlight notes than Preview or Acrobat (among a host of other great features).

Admittedly, this is too many tools to keep track of, which is why Spotlight and custom scripts (to automate everything) are so important to me. Spotlight allows me to use the best tool for each situation, and then bring them all together in a seamless search. That's the gist of my toolbox, though, and hopefully it will give you some ideas for expanding your own.