Dabble Week Three

Last week I said I was going to focus on product design. And I did. For at least a few days.

Monday

I explored ways to work with plots and subplots. Many writers use 3×5″ note cards to help craft and organize their plots. Many writing products give you note card feature to mimic this. Note cards work great. They really help to organize the main plot of a story.

Note cards aren’t as great at organizing and tracking subplots in relation to the main plot. J.K. Rowling used a hand-drawn grid to help her track subplots for at least one of the Harry Potter books. So I spent time thinking through how Dabble might help you track multiple plot lines throughout a story.

I worked out what it might look like if I were to arrange note cards into a grid.

plotsketch1I didn’t like it. This would require a lot of scrolling, up and down, left and right. It might be fine for a macbook pro with that nice trackpad, but not for many other laptops. I continued to mull over the problem.

Tuesday

I considered the different hats we wear as writers. Plotting, writing, and editing are the three main hats you wear when creating you work of art. After the creation is publishing and marketing, but I don’t know if I’ll touch those hats. Dabble will help you focus on the role you are in, without distracting you with the other roles. For example, when plotting, Dabble will focus you on the architecture of your story. When writing, Dabble will focus you on the words. You will be in scene with your characters. When editing Dabble will focus you on eliminating adverbs, or polishing dialog.

Next, I thought through several interface design problems. I considered a tabbed interface (like the browser) to work with multiple documents at once. I thought through how to store the text (as HTML, markdown, plain text). I thought through how undo/redo should work (per document, across the whole manuscript, how it should work in a product where documents can be looked at from scene, chapter, or the book level). I made some good decisions.

Ideally, none of this work will be apparent to you in the end. Dabble should make it easy to do what you need and just work the way you would expect. My job is to make the tool disappear leaving only your novel.

Wednesday

I had a nice brainstorm session with my twin Tyler. A huge shout out to him (thanks Tyler!) because I ended up with some great stuff. We discussed a lot about how he would like Dabble to work. I got some great ideas on how you might work with the manuscript and how you could deal with subplots. I also had affirmation on the direction I was going overall. I will share about what we came up with as the features are implemented.

Thursday

I went back to coding. I should have continued with product design, but hey, I’m a programmer. I added the concept of placeholder text to the navigation. You can name each book, chapter, and scene. But before you  name things you should get helpful placeholder names. This is one from Tyler.

Screen Shot 2015-08-19 at 11.30.28 AM

Your scenes will show the first few words which can help identify a scene before naming it. You may never decide to name scenes if this works good enough.

I also added the ability to edit your scene text. Up until Thursday you couldn’t actually write your book (and have it save). I added a stop-gap implementation for writing the words. It doesn’t support undo/redo the way Dabble will, but it works for now. I typed up the beginning of a popular book and things worked out fine.

Screen Shot 2015-08-20 at 10.48.20 AM

Friday

I added filtering to the navigation. Perhaps this was a bit premature, since there are more important features waiting to be done. But I had the itch to do it, so I did.

Screen Shot 2015-08-24 at 11.14.11 AM

You can find scenes that mention a particular person or thing.

Perhaps this week I’ll prioritize my backlog so I can work on the most important pieces first.

Saturday

I added support for creating new scenes and chapters in-line! When you write, you don’t want to take your hands off the keyboard, even to create a new scene or chapter.

When you hit Cmd+Enter on Mac or Ctrl+Enter on Windows (the standard shortcut for a page break) you will get a new scene. If you hit Cmd+Enter twice you will get a new chapter, as show below. Hopefully the video is the right format for your browser.

Summary

Great progress this week in terms of product design (most of which I have not disclosed) and some features. I may continue doing a bit of both each week.

 

Second Week on Dabble

Apparently one post is a precedence (according to Ryan Tyer). Now I must write another. You can catch up with my first week with Dabble.

This week there was less visibly done. But nonetheless important stuff.

Monday

As a writer, you’ll likely have many projects, completed, in the works, or just placeholders for an idea you have. You don’t want to scroll to the bottom of an alphabetical list to work on your “Zenocide” smash hit. Nor do you want to write down manuscript ideas on paper just because adding them to Dabble ordered by creation date will push your current novel to the bottom.

So Dabble now sorts by last opened date in the manuscripts view. The projects you haven’t touched in forever will be nicely collecting dust at the bottom (I have yet to add the dust effects) and your fresh new novels will sparkle and gleam at the top (yet to add sparkle and gleam effects). A screenshot you may imagine is sorted in order of last opened.

Screen Shot

Tuesday

Nothing. I slacked. I let you down. I failed!

But!

I got to sleep in.

Wednesday

Navigation day. I prettied up the navigation. I wanted the fonts to match in order to make it easier to find what you’re looking for. The book nav is now the same font as the book title. The chapter nav is the same font as chapter headings. Scenes are now the same font as your manuscript.

navigation

I made the nav less “deep”, meaning, your scene is now indented a quarter of the way from the left edge instead of half way, giving you more room to have a meaningful title.

You can also now open and close the sections, because hey, who doesn’t like opening and closing things?

I cleaned up code and added CDN support. That means the files are hosted on a fast server instead of a slow one. Yay!

BY THE WAY! Did I tell you I’ve been building this for and testing this in the browser? Well, I have been. I glossed over it pretty quick last week, but Dabble will have a desktop app for working from the comfort of your own lappy, AND it will have a browser version (pretty much identical) that will allow you to continue writing during your lunch break. Huh-mazing, I know, right? This feature will be part of the paid plans which include cloud storage and syncing between devices.

Thursday

Thursday, the day I put in book-title/author/chapter-title editing. Since these portions didn’t need any great programming genius (in contrast to the scene editing) I was able to get them in easy enough. It was good to be able to rename my book. No more Untitled by Unknown (might be an interesting name for a book, but not for every book).

doc-editFriday

I did a bunch of code and visual cleanup that my week of coding left behind. Gotta keep up on those things or you find yourself going slower and slower as time goes on (and you make more bugs, and you hate your work, and life sucks, and it’s just better to keep up some basic house keeping).

Saturday

A special day. The day I added navigation between documents. Up until this day when you opened a manuscript you would get the full book and when you clicked on the navigational pieces on the left, it would scroll to that location in your book. This is better than Word where you have to scroll and scroll and scroll. And scroll. But I want to focus solely on one chapter. Or even one scene. So now, when you click on a navigation item it opens that one item up solo. All by itself. You can look at the whole book, a complete chapter, or a single scene. You have the choice now. I may add a toggle setting to switch between scroll and select, but I don’t think it will make the cut. Focus is much better this way. Focus is essential to a writer.

I also made the folder arrows hide unless you hover over the nav item. Cleans up the nav IMO. The screenshot below didn’t capture the mouse, but I was hovering over “Characters”. I may change my mind and decide it is nicer to know at a glance what is open/closed. But for now, I like having less visual clutter.

arrows

Summary

The first week was some initial design and getting screens up. The second week was more under-the-hood programming and making stuff work.

This week, I am putting off tackling the hard problem of the text editor (procrastination is one of my best skills), and hitting product design. I find that when wearing my programming hat, I have a hard time keeping the vision of Dabble at the forefront. So I’m getting it planned out and written down. This week I’m wearing my product design hat.

As writers we have several hats. Hats for plotting, writing, and editing. This concept informs my product design and plays a big role in how Dabble will work for you. You generally only where one hat at a time. Whether you are a plotter or a pantser. And Dabble will help you focus on the role you are playing at a given moment. More on this later.

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.