Tag: open source

My paperless(-ish) office with OneNote and NAPS2

Screenshot of NAPS2 application. Two documents have been scanned and are shown side-by-side.
Screenshot of NAPS2, the scan to PDF application I use alongside OneNote

I’ve started using NAPS2 to convert paper documents to PDF to store in Dropbox or Microsoft OneNote as part of my paperless(-ish) office approach to productivity.

Predictions about the paperless office have been circulating for over 40 years now. And yet here I am in 2018 sitting next to a four-drawer filing cabinet containing letters and documents about everything from my house rental and utility bills to health records, university qualifications, and work-related documents.

OneNote

A couple of years ago I decided to try to keep an electronic copy of my most important (or frequently used) documents and after comparing the relative benefits of Dropbox, Google Drive, Evernote and Microsoft OneNote, I finally settled on OneNote (with Dropbox as a backup in some cases) and started scanning.

OneNote stores its files in OneDrive, which I wasn’t using for much else—and given that I subscribe to Microsoft Office 365 I have about 1 TB of cloud space* at my disposal.

[* Disclaimer: There is no such thing as the cloud, it’s just someone else’s computer.]

I like OneNote because:

  • I can view the PDF on the page, I don’t have to wait for it to open in Acrobat Reader.
  • The documents synchronise between my desktop PC, laptop, tablet and mobile phone, so I can access them wherever I am and away from home.
  • I can annotate and highlight the document using the draw functionality of OneNote.
  • I can type notes on the same page, which are searchable.
  • OneNote has built-in OCR (optical character recognition) capabilities which means I can right-click the PDF print-out embedded within OneNote and extract editable text from the document to the clipboard to be used elsewhere—that can save a lot of typing.
Viewing a PDF of a scanned MOT test certificate for my previous car

Scanning

I’m fortunate to have an Epson flatbed scanner on my desk. It came bundled with among other things the Epson Copy Utility which allows me to use the scanner with a printer (or PDF writer) much like a photocopier.

But recently I’ve found the Epson Copy Utility to be increasingly unstable. Often, midway through scanning a document the application will crash and tie up the scanner requiring me to either hunt down the processes to cancel in Task Manager or reboot the PC, which is often quicker. Though, to be fair, the application is over 11 years old and is a 32-bit application running on a 64-bit system.

Hunting around for an alternative, I discovered NAPS2—Not Another PDF Scanner 2, which is also an open source project, which I wholeheartedly support. So far, the results have been superb and I haven’t lost a single document yet

For those who understand this sort of thing, NAPS2 supports both WAI and Twain. It allows you to reorder the scanned pages. It will save to PDF or image (it supports multiple formats including bmp, gif, jpeg, png and tiff). It supports built-in OCR. Or you can simply print the document—including send to OneNote straight from NAPS2.

My experiences so far

Having been trying to live a more paperless office experience for over a year now, I can’t see me wanting to give up my filing cabinet anytime soon (there are still some documents that I would want to keep in paper format) but this has certainly enhanced my productivity.

Before I started scanning, I decided on a document structure within OneNote. I store all my documents within the same notebook but in different groups and sections. I try to keep these as consistent as I can with how I have organised my filing cabinet, which helps me locate the hard copy when I need to. And I adapt and extend the structure when it seems sensible for me to do so.

When I started scanning documents to PDF and embedding them within OneNote, I didn’t simply start at the front of my filing cabinet and work my way through. Instead, I prioritised those documents I thought I might need most often. Whenever I am out and realise that document X or Y would be useful in OneNote, I add a task to Todoist to scan it when I get home.

What I should maybe do next is then use this as the basis for determining which documents to recycle or shred from my filing cabinet.

Having my key documents available wherever I am has been invaluable. Hurray for mobile phones, OneNote for Android and 4G network connections.

Overall, while there is a little overhead in sitting scanning documents as soon as they arrive—although many companies like insurance and utility companies now use PDFs via email as their primary documentation—I have found this approach to be entirely worthwhile. It keeps all my documents together, I can access them whenever and wherever I need them and I feel much more organised as a result.

Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

span-6 append-2 colborder

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

.span-6 {
  width: 460px;
}

.append-2 {
  padding-right: 160px;
}

.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

span-6 append-2

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

/* Border with more whitespace on left hand side
    of a column, spans one column. */
.precolborder {
  padding-left: 24px;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

and so our HTML now looks like this:

span-6 colborder

Lorem ipsum dolor sit amet, …

precolborder span-3 last

Lorem ipsum dolor sit amet, …

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.