How to Become a Note-Taking Ninja

I take a lot of notes. I’m talking, a lot of notes. I take notes for all sorts of reasons. For years I’ve worked to create a perfect, zen-like note-taking and writing setup and I think I’ve finally hit pay dirt. This system has helped me manage my information flow so much that I thought I would share it with the world. If you want to be a note-taking ninja like me then begin your journey by following the instructions below.

The Weapons

The following is a list of the weapons you will need to begin your ninja training. Each is deadly in its own right; together, however, they form a deadly arsenal of portable, ubiquitous, and eternally synced armaments. Download them now to get started.

On Your Computer

• nvAlt
• Dropbox

On Your Mobile Device

• Plaintext - iOs
• Dropbox Mobile

Got ’em? Good. Let’s begin.

The Text Editor (your katana)

Arguably, the most important and powerful weapon at your disposal is nvAlt. It is a simple and well built text editor that allows for instant search and note creation plus the ability to use Markdown to render all of your notes in HTML goodness. This app is a port of the original and venerable Notational Velocity and is one of those apps that continues to surprise me with both its versatility and its rock solid operation.

Why nvAlt you ask? Just give it a try. The all-in-one search / create bar is one of the more amazing and most used features. Open the app, type in a title for a note, hit enter, and start writing. It autosaves your document as you type so you’ll never lose a word. Head back to your search bar and type a word that exists in one of your notes and you’re instantly provided with a list of notes containing that word. This feature has to be seen to be believed. There are a bunch of additional stuff to discover (full screen writing mode, different layout capabilities, themes, etc.) so make sure you explore what this app can do. I also strongly recommend you memorize the keyboard shortcuts to make you a blazingly fast, notational ninja.

Dropbox: A Ninja’s Utility Belt

If you don’t have a Dropbox account then crawl out from under your rock, go to www.dropbox.com, and sign up for your free account. You are provided with 2GB of storage right away that you can use for any kind of storage you can think of. In order to get the full benefit from the techniques in this article you will need to modify a preference setting in nvAlt by following the steps below:

1. Open nvAlt
2. Open the app’s Preferences
3. Click on the Notes tab
4. Click on the menu item labeled Storage
5. Look for the drop down menu below the words Store and read notes on disk as: and select Plain Text Files
6. Above that look for a drop down menu labeled Read notes from folder: and choose Other…
7. Create a new folder in your Dropbox folder called Notational Data and select it

Now, every note you create in nvAlt will be automagically synced to your Dropbox account, allowing you to access to your notes from anywhere, at anytime. There are several Dropbox enabled apps for iOS that will allow you to access, edit, and create notes from anywhere. This means your notes follow you everywhere you go. You can even access them from within the browser!

Notes On the Move

On your iOS device I recommend Plaintext which is a simple and free writing app from HogBay Software. It is a minimal writing app with an interface similar to nVAlt’s. It is ad-supported but the ads are small and non-obtrusive. I’ll mention some other great (but paid) alternatives at the end of this post (see Advanced Ninja Weapons below). I used this app for well over a year on my iPad as my go-to mobile note-taking solution. The beauty of this setup is the ability to instantly access and edit (or create) notes in your Dropbox account on the go. Did you do some research at your desk for that meeting you’re at now? Pull them up for reference on your iPad. Took some notes during that meeting in Plaintext? They’re available immediately when you return to your desk.

The Techniques

We will all have different techniques when it comes to taking notes. The beauty of this setup is how unrestrictive it is. The methods for organizing and storing your notes can be as varied as our individual personalities. I have developed (and in some cases, borrowed) the following techniques over time to increase my note-taking (and finding) efficiency.

Titling Your Notes to Make Them Easier to Find

Due to nvAlt’s incredible (and breathtakingly fast) search capabilities, it will benefit you greatly if you to take that into consideration when titling your notes. I usually try to use some conventions when creating notes, knowing that I’ll need to find them later. The following are a few ways I do this:

Notes About Clients or Projects

When a note I’m taking refers to a specific client or project, I start the note’s title with the client or project name, then a dash, and then a short but descriptive title. This allows me to locate all related notes just by typing the first part before the dash.

Ideas For Future Writing

Throughout the day, I often come up with ideas for topics I want to write about. I borrowed the “q” trick from Merlin Mann and it works beautifully. You just title any note that is going to eventually become a draft with qqq - (or however many q’s you want) and you have a way to instantly search and view a list of ongoing draft ideas.

This trick can be extended to any abbreviation scheme you can dream up. For instance, when I’m doing research and development on something I try to include R&D in the title so I can locate those notes quickly.

To-do Lists

I title my to-do lists with the following pattern: to-do - [year]-[day]-[month]. This makes it super easy to find my to-do lists just by searching for to-do and looking for the date in the title. I use Textexpander’s incredible date completion feature to make this titling process lightning fast.

Those are just three ways to use the power of nvAlt’s note structure and search capabilities to make writing and searching a quick, painless process.

Write EVERYTHING in Markdown

That’s right, I said it. Everything you type should be in Markdown. I’ll save the nitty gritty for a later post but Markdown is basically your shuriken. It gives your plain text files the power to be so much more. This entire post was written in Markdown and then converted to HTML for posting. All of my notes are written in this format. It allows me to turn any text file I have into a presentation-ready document in just a few keystrokes.

Familiarize yourself with its syntax now. Anyone can learn the basics in a few minutes. Here are some examples of the simplest and most used markdown idioms:

• **bold** turns into bold
• *italic* turns into italic
• [42](http://www.the42.com) turns into 42
• * Unordered List Item turns into the following:
  • Unordered List Item
• 1. Ordered List Item turns into the following:
  1. Ordered List Item

There are a ton more ways to mark up your text files so check it out now. Give your plain text files secret ninja powers!

Armed with the information above you can now exist in the shadows of the note-taking world, secure in the knowledge that your notes are synced, backed up, marked up and ready for service.

You can post to blogs. Slice!

You can send nicely formatted PDFs! Hiya!

You can access and edit your notes from anywhere, anytime. Chop!

Go now, ninja warrior. You are ready.

Advanced Weaponry

In your quest to become a note-taking, ninja warrior, I have provided you with the best free tools and services available in this post. That being said, if you’re willing to shell out some cash there are some great paid apps out there that are worth mentioning here. I won’t go into great detail but you might want to check out each one on your own to see which weapon suits your style best.

Byword

Byword is a beautiful, distraction free text editor for Mac ($9.99) and iOS ($2.99). It is the app I do most of my polishing and editing in. This app is a joy to use and now that its iOS counterparts have seen the light of day, it is available on all of your Apple devices. It’s also Dropbox-enabled!

Writeroom

Writeroom ($9.99) is another popular contender in the distraction-free writing app arena. It’s a beautiful app and really nice to use but since it lacks Markdown preview support, I tend to prefer Byword. Writeroom is made by the same people who make Plaintext and it is also available for iOS ($4.99).

Writing Kit

WritingKit ($4.99) has been my go-to writing app on my iPad and iPhone for some time. With its integrated browser and quick search I don’t have to leave the app to research links, search for images, or get definitions and Wikipedia articles. This is a huge boon to productivity so I keep it around when I’m writing a piece that requires additional research.

Elements

Elements ($4.99) falls into the same category as Byword and Writeroom, but currently, it only exists for iOS. This was the editor I had on my iPad’s dock since it was released. Only recently did I replace it with Byword. Elements is a frictionless writing environment and is a great piece of software so I’m not knocking it in any way. Byword just feels right to me so I’m sticking with it for now.

These are just a few of the options you have when looking for a writing environment. The important thing is to find a tool that suits you and then use it. Learn it inside and out. Then write something. A good set of tools can only take you so far. It’s the creating we do with them that matters most.

Using LESS to make CSS suck less

The days before CSS were bleak days for web programmers. Anyone remember using spacer.gif or the layer tag? So, you ask, what could suck about CSS? It brought us so many wonderful things and made styling and maintaining styles across sites so much easier. Well, it isn’t that CSS itself sucks, per se, it’s that CSS could suck less than it currently does.

For developers who use high-level development languages (expecially object oriented languages) probably cringe at the sheer amount of repeated code in vanilla CSS files. Nesting style rules can be a tediously boring task, particularly when working with a complex document layout. Even worse, major layout changes generally means major re-writing of large chunks of CSS. There has got to be a better way!

LESS to the rescue

LESS is a dynamic stylesheet language. It allows you to work with CSS in a more elegant, programmatic way. It introduces the concepts of variables and functions to CSS in a way that will amaze you. Now, for you non-programmers out there, don’t be deterred. While LESS does use some basic programming concepts to work it’s magic it is by no means a full fledged programming language. In fact, if you already know CSS, you already know how to use LESS. So, are you ready to get your CSS world rocked? Then without further adieu, let’s get into the nitty gritty.

Firstly, go download the LESS javascript library here. You’ll probably want to make a folder to contain any working files you create during this post so do that and drop the LESS library file into it. This file will be included into your HTML file later on.

Second, create two files in the folder you created in step one called index.html and styles.less. You’ll want to use a code editor for this but any text editor that can save HTML and text files will do. Open the index.html file and paste the following code (remember to replace the script tag source to match the file you downloaded as you might be using a different version than the one I’ve used here):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Using LESS to make CSS suck less</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script type="text/javascript" src="less-1.2.2.min.js"></script>
</head>
<body>

</body>
</html>

BOOM! You’re using LESS. Albeit, this isn’t a very exciting example since but it does illustrate how simple using LESS in your projects can be.

Let’s dive right in and look at the one of the more useful aspects of LESS development … variables. We’re going to define a color cheme for this example site. We will have a site background, a headline color, a link color, and some colors for navigation states. We’ll also use a specific, default color for text. Here we go.

First, open up styles.less in your text editor. Let’s enter the following code:

@background:    #556354;
@headline:      #495450;
@links  :       #E58F0D;
@nav_inactive:  #8C948A;
@nav_active:    #42423F;
@text:          #333333;

Now, I know you’re looking at that and saying Wha? What’s with all those @ symbols? Well, I’ll show you. Add the following code below:

body,html {
    background: @background;
    color:          @text;
}

h1, h2, h3, h4, h5, h6 {
    color:  @headline;
}

a {
    color: @links;
}

#nav {
    li {
        a {
            color: @nav_inactive
        }

        a.active {
            color: @nav_active;
        }
    }
}

What this is basically doing is using the color variables we set in the first few lines of code as the color values for each of the style declarations above. This allows you to reuse the color values wherever you see fit. Want to add a border that’s the same color as the headlines? Just use @headline as the border color declaration and you’re all set. Want to change that color? Just change the value that @headline was set to and anywhere that variable is used the color will be changed automagically.

Did you see that weird nested declaration for #nav? I slipped that one in on you. That is an example of what I consider to be the most powerful aspect of working with LESS … nested declarations. The code above will compile as the following CSS:

body, html {
  background: #556354;
  color: #333333;
}
h1,h2,h3,h4,h5,h6 {
  color: #495450;
}
a {
  color: #e58f0d;
}
#nav li a {
  color: #8c948a;
}
#nav li a.active {
  color: #42423f;
}

How cool is that? What LESS’s nested declarations do is allow the developer to model his LESS code after his document’s structure without having to write the tedious and repetitive code of nested style declarations. While it doesn’t seem like it’s saving much in this simple example, imagine the complicated layouts you’ve created before and how frustrating it was to maintain proper cascading when styling items. It also allows the reuse of classes within nested declarations without worrying that you’ve used that same class outside of the current declaration.

Getting back to variables, there is another type of variable you can use in LESS called a mixin. This allows you to include a bunch of properties from one ruleset to another. For example, say we want to have a standardized bottom border for any number of elements. You can do something like this:

.bottom_border {
    border-bottom: 1px solid @links;
    margin-bottom: 3px;
}

Then this can be used anywhere you want. Like so:

h1 {
    .bottom_border;
}

Which will compile as:

h1 {
  border-bottom: 1px solid #e58f0d;
  margin-bottom: 3px;
}

You can even use parametric mixins that can take values. For example, if we wanted to allow for variable width borders within our .bottom_border mixin we can modify it like so:

/* LESS Parametric Mixin */
.bottom_border(@width: 1px) {
    border-bottom: @width solid @links;
    margin-bottom: 3px;
}

/* H1 Tag Passing new Border Width */
h1 {
    .bottom_border(3px);
}

This essentially says that I want my h1 tag to render with a 3 pixel bottom border instead of the default 1 pixel width. Amazing! There’s plenty more things you can do with variables and mixins and, if they were all that LESS did, it would be worth learning. There are many more things you can do with LESS but they are a bit more programmy (I just made that up) and will be covered in later posts.

There’s one last thing I want to cover before signing off. I know some of you developers out there are saying to yourselves Oh great, another Javascript library that I need to include or Wait a minute. This guy wants me to have my CSS depend on Javascript? No graceful degradation! No WAY!!. Well, not to worry, LESS has you covered. LESS was originally developed using the Ruby language and can be used on the command line (UNIX geeks unite!) to compile LESS to CSS manually. The current implementation was rewritten in Javascript for two reasons:

1. It’s approximately 10x faster than the Ruby version.
2. It can be used more easily in a development environment.

I know, I know. Manual compilation just begs for mistakes and human error. That’s where the wonderful LESS tool makes this process a breeze. This tool was developed by Bryan Jones and it is a slick one. Here’s what to do.

1. Download the app
2. Drop it in your Applications folder.
3. Launch the app.
4. Click the plus button to add your .less file to the compiler.
5. Right click on your .less file and click on Set CSS Output Path. For our example project this can be the root directory or, for more complex projects, your CSS directory, wherever that may be.

Now, when you save your .less file it will be automatically converted to a CSS file. This means you don’t have to include the LESS Javascript library and can instead reference the styles.css file (or whatever your file might have been named) that was generated by the compiler. This means no more depending on Javascript to parse your LESS on the fly which makes it great for production environments.

Hopefully you’ve been able to see the power, speed and efficiency that LESS development can bring to your CSS life. Trust me, use it on your next project and tell me if it doesn’t make CSS suck less. If it doesn’t, you’re doing it wrong.

Tab Interface Design [Response]

I recently read an article that talked about different behaviors in browsers when it came to closing tabs. You can read the article here. I read this article from start to finish and it is a well written piece.

The article talks about the placement of the close button on the visual tab interface in Google Chrome vs. Apple’s Safari browser. While I can appreciate the points made (and obviously Chrome’s interface is better) I found myself wondering the whole time “Who uses the close button on a tab?”.

This thought kept occurring to me because the gist of the article is about not having to move your mouse to close multiple tabs whether from the right or the left of the tab bar. Turns out, Chrome puts that little circle with an X in it right below your mouse cursor so multiple reptitions of the close action do not require any mouse movement whereas Safari’s close buttons move causing the user to re-position her mouse in order to continue closing multiple tabs.

This entire point can be made moot by the usage of keyboard shortcuts in both browsers. Why move your mouse at all to click that close button when you can just hit ⌘ + W to close a tab? You can hit this shortcut to your heart’s content in both browsers (and also in Firefox, Opera and newer version of Internet Explorer) and never touch your mouse at all. This is one of the reasons I’m a huge advocate of keyboard shortcuts. They save time and reduce mouse usage (or eliminate it completely). They also save your sanity when it comes to interface differences between apps.

SELECT-ing Column Comments in MySQL

I started a project today that required I access a client's existing MySQL tables to add some data and utilize the database for a web app. The client's column names are codified into capitalized, 7 character strings that, as far as I can tell, have almost no discernible way to determine what data the column actually holds. As I was browsing around and getting familiar with the database table I realized that phpMyAdmin was showing full text names for these columns below the coded column name. Upon further investigation I was able to determine these full text names were stored in a field titled "Comments".

My goal was to figure out a way to query these column comments so that I could use the full text comments as display labels for the app I was writing (and also so I wouldn't go crazy trying to memorize the column name codes). The problem: I had no idea where those comments were stored or how to get at them. Google to the rescue!! (or so I thought.) After several fruitless searches I uncovered this blog post describing how to create a table with comments. Armed with the quesries from that post I started hacking SQL statements in phpMyAdmin starting with this one:

select columnname, columncomment from columns where table_name= 'your-table' ;

This query threw some errors so I started breaking it down. Eventually I ended up with this:

SELECT column_comment FROM information_schema.columns WHERE table_name='your-table';


This finally worked and I was able to retrieve the comments for the columns and continue on my way. I'm not sure how many times this sort of thing is done out there in the wild so I figured I'd pass on my experience. Hopefully no one has to waste their time figuring this one out in the future.

Adventures in iOs Provisioning Land

Wow. I just spent the better part of a day chasing down the strangest issue so I figured I'd post what happened and how I fixed it. Hopefully, if you're reading this, it helps you in your plight.

I recently got a new Macbook Pro and have been in the process of getting all the stuff I actually need off of my previous laptop. I had been developing on iOS from this old laptop without issue. I went to build a project last night on my new laptop and was, mysteriously, unable to build. Instead I received the following error in the build results: Command /usr/bin/codesign failed with exit code 1.

After the requisite Google search on this error I had some links to a few possible causes of the issue. Most of them had to do with duplicate or incorrect certificate and provisioning profiles. I removed them all, started from scratch, followed Apple's provisioning instructions to the letter, and still was unable to build my app. I repeated this nonsense a few times and dug deeper.

IThe idea to check the raw build logs occurred to me and I found this odd string tacked onto an error: "CSSMERR_TP_NOT_TRUSTED". Again, I dumped it into Google and started reading. Again, I was pointed in the direction of certificate issues. None of the solutions I found solved my issue though. Now it was time for good ol' experimentation.

Two things led to my eventual release from provisioning purgatory. Firstly, I did not have the "Apple Worldwide Developer Relations Certification Authority" certificate installed in my keychain. This can be downloaded from the provisioning portal after logging into the developer center and installed by double clicking the downloaded file. Just make sure you're using Safari because, for some reason, the certificates cannot be downloaded properly in other browsers. Secondly, I went into Keychain Access and started mucking about. For each certificate you have that has anything to do with iPhone development, get info on the certificate and expand the "Trusted" section. Set the first drop down menu to "Always Allow". Close this window, put in your admin password and continue to the next certificate. Now, go back through each certificate, change the trust back to "Use System Defaults", close and save. At this point, go back into XCode and attempt to build your project again.

The jury is still out on why this worked for me. Other people fixed this problem with different solutions but, if you end up at wit's end like I did, try this and let me know if it works. Anyone else ever have this issue? Anyone else fix it?

Alarms is the reminder app I've been waiting for

If you're like me, you forget stuff. Emails to reply to, files to work on, phone calls to make. We all have stuff we need to do but the human brain isn't the best at reminding us to do our stuff. Alarms is a simple yet powerful way to stop forgetting and start doing.

This app hides away in your menu bar, only showing up when you actually need it to. Drag a file or email to your menu bar and Alarms slides into view. I'm usually not a fan of app animations but this one is so smooth and beautiful that it doesn't detract from using the app at all. Once Alarms has slid into view, drag the item along the timeline and drop it on the time you want to be reminded. (You can also drag over a date in the calendar to schedule a reminder on a different day.) That's it. When the time comes, Alarms indicates this with a menu bar bounce and a short beep. Open up Alarms again, double click the thing you need to do and the file associated with the reminder will open up and you can begin working. Once your done, check the item off and it disappears.

Here's the app in its open state:

I can't begin to describe how useful I've found this app to be. I have tried a ton of todo list apps but nothing is as simple and unobtrusive as Alarms. It's a killer app for email processing. I start my day by going through my emails and dragging any items that need something done into Alarms. This allows me to schedule my mornings and email replies throughout the day and I never forget to get back to a client or research a bug. You can also just double click on the timeline to enter tasks that don't have a file associated with them.

Digging into the preferences you find a nice option set for customizing the way Alarms works. You can change your start and end times for your day (great for those of us who don't work a standard 9-5 job). Changing the alarm sound and snooze time are available here as well. You can even sync Alarms with iCal which, although I haven't played around with this feature too much, seems incredibly useful. Since I use Todo for task management on my iPad (which syncs with iCal), it looks like I can finally be reminded of tasks from my iPad on my laptop and vice versa.

Here's what the preferences look like:

All in all, I've found Alarms to be one of the most useful productivity apps I've used in a long while. Since I'm poor, I have to wait until next payday to purchase a license (my trial ran out today as you can see in the screenshot above) but the app only costs $15 which is a steal in my opinion. Check this application out. You won't be disappointed.

Solving my inability to keep a diary: Chronories

I don't know about you but I've always wanted to keep a daily journal. I just never seem to keep up with one. I've tried Moleskines and journaling software but nothing has ever worked. I write a few days and then forget, or get too busy. I recently found a piece of software that makes a daily journal easy and fun to keep. If you're looking for a diary app for your Mac, look no further than Chronories.

Chronories runs in the background while you use your computer and automatically tracks application usage, people you've contacted, websites you've visited, news feeds you've read and iCal events. The app also allows you to take screenshots directly into your diary and iSight photos also. Plus, you can set and track your moods and type your own journal entries. It even tracks the daily weather for you!

What I especially liked about this software is the menu bar reminders. Every day the menu bar icon shows an unobtrusive number reminding you that your diary needs you. It will prompt you to set your mood, take a photo of yourself, snap a screen capture and write an entry. It makes it super easy to maintain a record of your days with the least amount of effort. I used this app every day of the 10 day trial period.

On top of the app's functionality, you also get a bunch of ways to view and analyze your daily data. You can view computer activity, weather, moods, etc on graphs. You can view your screen shots or iSight photos in cover flow. It makes keeping a diary simple and enjoyable which, until now, I thought was impossible for me.

The only downside to all of this is that now my demo period is over and I can no longer keep my diary!!! Since my budget for software is $0 right now I'll have to wait until I can scratch together the $29.00 before I can start my diary back up but this app is worth every penny.