First Week on Dabble

Last week I began work in earnest on Dabble, a writing app for novelists. This is my week at a glance.

Monday

I started creating a logo, because hey, it’s got to look gooood. I want to this product to be fun to use, to have personality. I’m taking inspiration from Slack.

I looked through a bunch of fonts on Google Fonts typing in “Dabble” to the preview and picked my 3 favorites. Then after consulting with my lovely assistant/wife, Brittany, I chose Comfortaa.

dabble-comfortaa

I didn’t like the ligature on the L so rounded that off, tilted the E because I thought it looked nice, and gave it some coloring that makes it more fun, less utilitarian. Between the font, the color, and the E, I thought this conveyed a good sense of mischief.

dabble-logo1

I also threw up some files into an Amazon S3 bucket for a website, www.dabblewriter.com, so I could show off my logo to Tyler, the twin. And I posted to my friends and family on Facebook about the new company and product. I’m that excited about it.

Tuesday

Unfortunately I discovered my subconscious must have been working hard on Monday. Because when double checking I wasn’t stepping on any copyright toes for writing tools with the name Dabble, I saw I very well may be stepping on toes with my logo design. Hello dabble.co! I must have seen you earlier when vetting the name.

dabble-co-logo

The fonts were too similar, and even the E was slanted. Back to the drawing board. The runner up fonts were Baumans and Megrim. I ended up with the latter because Brittany liked the A and Baumans was still similar-ish to Comfortaa. I present you the Dabble logo.

I also put together a quick attempt at marketing and an email capture so people could sign up for updates. Facebook friends were interested in the progress, and I wanted to be sure to get emails for those who want to be part of a beta.

Wednesday

I spent some time doing product design.

FullSizeRender

Thursday

I made the Project List view, which I changed names to Manuscripts view. These are not just projects after all, they are manuscripts.

I started off wanting to make a single novel look like a book and with series looking like a boxed set. I followed http://srobbin.com/blog/3d-css-book-covers/ and had something ok looking, but it didn’t feel right.

I ditched the book idea and went with a simple pile-of-papers approach, since these are unfinished/unpublished works. I think it turned out nicely.

Screen Shot

The piles of paper are different from each other, and when you mouse over them they straighten out a bit and raise off the page, like you’re picking it up. I love making little UI interactions delightful. This was very fulfilling.

Friday

The day I made it a web app instead of just HTML. I brought in Chip for keeping the HTML in-sync with the data and PouchDB to store the database in the browser (also supports syncing with a server when online). This was just beginning work.

I also added loading messages, again inspired from Slack. Unlike Slack, I leave the message up long enough to read it, allowing a click anywhere to close it immediately. I always want to read those slack messages but too often they disappear before I can. Thank you Writer’s Digest for a compilation of quotes from famous authors.

Screen Shot2

Saturday

I set up my base model classes and the loading/saving mechanisms so when a manuscript (actually all manuscripts currently) gets loaded all the objects get linked together by id, and when an object is saved those links turn into ids. Because I want to save sort-order in my manuscripts, I’m storing the data like this:

{
  "_id": "abc",
  "type": "book",
  "title": "Escape from Waterfall",
  "chapters": [
    { "_id": "def" },
    { "_id": "ghi" }
  ]
}

I got Manuscript creation/deleting working. I added saving of lastOpened date so old manuscripts naturally sort to the bottom (useful if you have a lot of manuscripts).

I also hooked up my manuscript editor page (the one thing I had coming into this week) to display manuscript data.

I imported a 10k word script into the tool to test out a bunch of chapters. Then I did the same 99 more times to test load. It took 8 seconds for the page to load all that data in (in the future I’ll only load the manuscripts when they’re opened) and it still worked like a charm. Page scroll was fast. Everything was snappy.

Google ChromeI’m not including a shot of the full script I imported since I haven’t had permission from the author to do so.

Lastly I added scrolling to the book/chapter/scene you click on so you can jump to that place in your script.

Summary

I feel really good about what I was able to do in just one week. I’ve only been spending a few hours a day on this outside of my day job. Today I wasted my few hours writing this blog post (ok ok, you’re not a waste), but I’m too excited about this project and my progress to keep it to myself. I feel really good about the product I have envisioned and the direction I’m going.

If you’re interested in beta-testing Dabble, or just want to keep up on its progress, sign up for the newsletter on dabblewriter.com. I have much more on its way.

2 Responses to “First Week on Dabble”

  1. Sean Says:

    This is great, Jake! I’m excited to see your progress.

  2. Lynn Says:

    This is weird, I was just looking at screenplay and novel writing software (scrivener, adobe story, etc) to manage my blog posts. Nothing really fit the bill (and weren’t geared towards tracking blog posts anyway) and then I see you working on this. It’s a seriously cool idea and having a decent web based tool (there’s a few, but they already seem dated) out there will be awesome for writers. Best of luck, I can’t wait to see where it goes!