Tips: Getting Your Markdown in Scrivener to Display Quicker in Marked…

Hey everyone! Just a quick and easy tip for all of you folks who use Marked as your Markdown previewer when writing in Scrivener.

One of the microscopic issues I have with using Marked in conjunction with Scrivener is the lag between when you write your Markdown (or any text) in Scrivener, it autosaves, and a few seconds later it shows up in Marked. This isn’t a bug in either programs – Marked shows what your document looks like after it is saved, and Scrivener autosaves after a preset amount of time after you stop typing (usually a matter of seconds).

I know, I know, not a big deal. But did you know that you can change the amount of time it takes for Scrivener to autosave? You can! It’s in the preference pane. Open up Scrivener, head to into the preferences menu and click the general tab, you’ll find in there.

ScrivPrefPaneShot

You can go as low as 1 second (I tried 0.5 seconds, no dice) in this field. Set it to that and close out of preferences. You should see a bit of an improvement to when Marked displays your Markdown now. It doesn’t get rid of the lag completely, but it does make it much less noticeable, creating a more seamless experience between apps.

So if it’s been distracting you or worse, keeping you from pairing these two juggernaut apps, try tweaking this auto-save time increment lower and see if that makes the experience any better for you. I know it did for me.

Tips: Planning a New Website With Scapple and Scrivener

Planning the content layout of a new website is a daunting task to say the least. You always want your content to be easy to find, logically laid out, and as clean as possible navigation-wise. A new site (or a redesign of an old one) is a great opportunity for you finally to wrangle your site’s content and make it more accessible for your readership.

To do this, you need a plan of course and, for me anyways, I tend to go the visual route.  Luckily, you don’t get much more visual than Literature and Latte’s mind-mapping software: Scapple.

It’s All in the Bubbles

There are a ton of different ways to visualize a site’s content layout in Scapple. I decided to keep mine as simple as possible, but you can certainly tweak it to fit your tastes.

For the title of the document, I simply put the name of the site. Below that, I put a bubble where the top banner is going to be, labeling it as such. Then directly below that, I place individual bubbles for each horizontal navigation tab, labeling them individually for what each tab was going to point to (“Home”, “About Me”, “Contact”, etc… ).

Next, I create a vertical line of square bubbles going down the right side of the content area, roughing out where a right column full of widgets would be. If you know what the widgets are going to be, feel free to label those as well. Otherwise, I just labeled mine “Widget 1, Widget 2, Widget 3…” – you get the idea.

After this, I place a big bubble in the middle of the layout that represents the main area where my content will be displayed.

Last but not least, I frame it all out with a bubble at the bottom that runs the width of the design for the site’s footer or colophon.

Here’s what I ended up with:

finished layout

KISS: Keep It Simple. Seriously.

Use your first draft of this document to quickly get your ideas out and in front of you. Once it’s roughed out, you can tweak it to be cleaner visually 1 or label everything differently so that it translates better for you at a glance. Above all though, the goal of this document should always be simplicity.

By keeping the document intentionally simple, it affords you the luxury to drag and drop these blocks around, resizing them to accommodate new ideas and layouts. I guarantee that once you get the basics fleshed out in this document – the core bits of content that you must have on your site – the process of manipulating the layout becomes WAY less of a chore and might even become a little fun (gasp)! So yeah, simple, simple, simple.

Now that you’ve got your layout nailed down, it’s time to fill out the content that is going to go in these bubbles.

This is where Scrivener comes in!

Old Hacks That Still Work

The approach I used in my post, blogging with Scrivener, can also work like a charm here! Now that you have your content blocks set up in Scapple, all you need to do is assign content to the sections that need it. Luckily, Scapple and Scrivener play so nice together!

I start with a blank project (or choose whatever template you like) in Scrivener, again, using the name of my site as its title. Then I immediately drag and drop my Scapple file into the “Research” folder in the left column in Scrivener renaming that folder “New Site Layout”. This way it’s always easy to reference moving forward.

With that all in place it’s time to wrangle your content.

folder-structure

Every Folder is a Section of Your Site Layout

sectionequalfolders

In my case, I had a “Header/Banner Area” section, a “Horizontal Navigation” section, a “Right Column” filled with widgets, a “Main Content Area” section for my content, and “Footer/Colophon” area for any information I wanted at the bottom of my site.

Since these are all definable areas of my site that will have content in them, I go ahead and create the following folders in my Scrivener project:

  • Banner
  • Horizontal Navigation
  • Right Column
  • Main Content Area
  • Footer/Colophon

These folders don’t need to be in any particular order at all, but I like starting from the top of my site and listing these sections out in the order of where my eyes naturally navigate across the site layout itself.

Now that’s in order, it’s time to fill those folders!

Every Page is a Block of Content

pageequalscontentblockFor my content I only use the text/Markdown that I want for each of these sections of my site. But you should feel free to drag whatever you want into these pages – pictures, PDF’s, etc… whatever you’d like. Just don’t make it confusing or cluttered. Again, keep it simple.

So for the “Banner” section I add the text and byline that will go in front of the banner image. If you don’t want text? Drag the top banner image into the page for reference.

For the “Horizontal Navigation” section, I add a page for each tab in my layout. In each of those pages I put in the text that I want the page to display. So the “About Me” page contains all of the text that I want to display on my “About Me” page. If the tab is a link to somewhere (as with the “Home” tab), I make sure that, that that information is written plainly in that page. If a tab links to something more form-like (as with the “Contact” tab), I list that info there as well, giving the fields that I’d like in the form along with what is required info when the visitor clicks the “Send” button.

I use the same methodology above for my “Right Column” section as well, giving each widget its own respective page. In those pages are descriptions of what each widget does along with formatting needs.

The “Main Content Area” section is more than likely going to be dynamic so there’s not much to add to this page other than its description. However, if your site is going to be filled with predominantly static content that rarely changes, than feel free to add whatever this page will contain. Tweak all of this to fit your site’s needs. It is important to remember that this is merely a guide/example of what you could do. Not what you should do. Do what makes sense for you and your project.

For the “Footer/Colophon” section I just add the blurb of text that I want showing up statically at the bottom of my site, regardless of where I navigate to.

Lastly, Don’t forget to save! Scrivener does a bang up job of backing up your work automatically, but when the thought flits across your brain – save your project.

corkboard

Why I Like This Approach

I’ve built a ton of sites for clients and myself over the years and I can’t tell you how many times I have finished a design, handed the client the keys, and the site laid dormant for months 2 while they gathered up the strength, time, and patience to tackle their own content.

Do you need Scapple and Scrivener to pull something like this off? Of course not. There are a lot of alternatives out there to choose from. I just chose them because they are powerful, intuitive, easy to use, and play well together. That and the idea of this nebulous task being collected, organized and bundled up into a single .scriv project file is tidy and easy to keep track of.

It also gives you a HUGE headstart on your new site design and since it is separate from your site’s file system, it is a very effective back up of the structure and content of where your site started. This is a huge win if you ever have a catastrophic failure and somehow loose your site and all of its content. With this, you’ll always have a copy of that gigantic “step one” to fall back on.

It’s also something you could easily hand to a designer who you’ve hired to build your site. Instead of saying “I think I would like this…” you’ve already taken the time to create the site that you need so you can say “I really appreciate your help. Here’s what I’d like you to build…”. 3

Trust me on this one. That developer you’ve hired? He/She just might openly weep tears of joy if you handed them something organized and fully realized like this.

I know I would.

  1. Quick Scapple tip: to align your bubbles in any way, highlight the bubbles you want to align, then right click them and go into the “align” menu.
  2. Even years in some cases!
  3. If you go this route, put in a bit of time to format the Scrivener file so that it lays out intuitively for the export to PDF or whatever format you choose.

The Web: Easy Popover Footnotes in WordPress

I am an avid reader of The Magazine 1, and one of the first things you will notice when reading any issue is the clever handling of footnotes in their pieces. Commonly you will find these links to footnotes either inline or in the form of a tappable button with a symbol in it (in their case, a star) embedded throughout The Magazine’s thought-provoking paragraphs. Whenever you tapped one of these links, something kind of unique happened. Instead of being whisked away to the bottom of the page, the content of these footnotes would pop up instantly over the text in a modal window.

Read its contents. Tap anywhere outside of the modal. Done.

The popover disappears and you continue on with the article you were enjoying without having to tap a “scroll up” link or, worse, having to literally scroll back up to where you were previously.

I got used to this delightful bit of UI/UX rather quickly and instantly started searching for a way to implement the same effect into my own online prose.

Problem was, I couldn’t find anyone that was doing it. At least not at the time.

Fast Forward Six Months

Ironically where I ended up finding my answer was on the personal site of the original developer of The Magazine: Marco Arment’s Marco.org. He put up a post back in December stating how he too was searching for a way to implement these types footnotes into his site without having to develop his own javascript solution. Luckily, someone had already done it for him (and us).

Bigfoot.js site screenshot

Believing in Bigfoot

A fella by the name of Chris Sauve went ahead and created Bigfoot and that opened the door to exactly what Arment and a handful of us were looking for: more useful and powerful footnotes on our sites!

Still, after implementing it on thaddeushunt.com, I immediately thought that its implementation wasn’t terribly approachable for everyday users. Surely someone must have created a WordPress plugin for this.  Maybe with some sort of shortcode for ease of use?

Well, it turns out that someone did that too.

Enter WP-Bigfoot…

A dramatic slow clap is due for Roger Stringer who took the time to create the WordPress plugin “WP-Bigfoot”. Not only is it a breeze to install and activate, but it’s also super easy to add to your posts and pages in WordPress via some short code.

Screen Shot 2014-06-23 at 7.48.12 PM

And it doesn’t stop there either. Out of the box it looks pretty great, but if you have some chops with CSS you can even tweak the baked in style sheet to taste so that it better matches the aesthetic of your site! It’s also responsive, so it changes dynamically depending on what size screen it’s rendering on.2

Great Solutions Rarely Come Easy…

There’s almost always something that needs to be tweaked or edited to fit your site and its needs. This is one of those rare occasions though where something works perfectly out of the box. Once I found what I was looking for, I was up and running in under 5 minutes. Seriously.

So if you’ve been looking for a better, more elegant and helpful way to add footnotes to your web-based content, I hope this post saves you some searching.

  1. And a very proud contributor!
  2. Allowing your readership to enjoy these footnotes on the couch and on the go!

Tips: An Alfred Workflow for Launching .scriv Files in Marked and Scrivener Simultaneously

(UPDATE Jan. 2017: A kind visitor recently let me know that the original workflow I created years ago, had stopped functioning properly. I’ve since fixed it and wrote a follow up post here).

A heads up: As the title implies, this post assumes (or, in a way, suggests) that you have purchased Scrivener, Marked and the Powerpack option in Alfred 2.

One of Scrivener’s shortcomings (yes, they do exist) as far as Markdown support is concerned, is its inability to give an HTML preview of your Markdown syntax while you write in it. There is no workflow for accomplishing this other than exporting your MD or MMD, opening it in another editor that reads MD (or the converted html) and checking it there before cutting and pasting the code into your blog’s editor.

In all fairness, that’s not what Scrivener was created to do and just because I’ve found some slightly unconventional uses for it, I can’t expect the good folks at Literature and Latte to change their software to accommodate lil ole me. We all know Scrivener is much, much bigger than blogging and writing in MD and MMD.

The good news is that even though Scrivener doesn’t have an in-app html preview function for your markdown, there is one program that you can use in tandem with it that can.

That Program is Marked.

You can read about Brett Terpstra’s “Marked” in a slew of different places (including its recommendation in the comments on this site ) so I won’t write a review of it here (maybe another time). In a nutshell though, Marked is a realtime markdown converter that works with any text editor you throw at it. Open a text file in its respective editor, open Marked, then drag the same file into Marked and go back to the text editor to continue writing/editing. As you save your markdown document, you’ll see it update in Marked, displaying the converted HTML instantly.

Cool right? It’s also a game-changer.

Marked and Scrivener

Integrating Marked has made my blogging workflow in Scrivener much more streamlined because of Marked’s handling of MD/MMD as well as its plethora of options and amazing tools for authors. But, that all said, getting a file into each application is clunky at best and almost immediately after doing that a couple of times, I wanted/needed to automate that initial step so that it was smoother.

Enter Alfred

Alfred is another popular tool out there whose sole function is to streamline everyday tasks like launching multiple apps at once, finding files quickly on your computer, searching the web, quitting apps, shutting down or restarting your computer… you get the idea. It does all of this from your keyboard and once you get used to its commands, you’ll get addicted to not touching a mouse or track pad. In truth, it’s one of the first apps I install when I get a new computer.

But aside from these baked-in options that you get for free, you can also pay for the Powerpack option and unlock a slew of very powerful tools that give you immense control over your Mac. One of these tools is the ability to easily create custom workflows. Once I encountered the dilemma above, I dove in and immediately came up with a solution.

Now, one caveat. I am not much of a programmer, so I made my workflow out of the built-in modules that Alfred gives you out of the box. I am sure that with some custom scripting this workflow could be made even nicer (if you have suggestions for improvements leave them in the comments below please). That all said, I was really happy with how this workflow came out. To save you (and I) some time I’ve included a link to the workflow below, so that you can download it and add it to your own personal workflows in Alfred. Just download it, double-click and add it to Alfred. Easy.

The way the workflow works is you bring up your Alfred prompt. Type in the keyword, which in my case is “scrivmarked”, that then allows you to browse your “Documents” directory right in Alfred. Once you find the .scriv file you want to open, arrow down to highlight it and hit the right arrow key where you’ll find a file action to open the file in both Scrivener and Marked, arrow down to that action and hit enter.

AlfredFileAction

Make it Your Own

One of the best things about workflows In Alfred is that you can tweak them to suit your needs relatively easily. Hate my keyword? Choose a different one. Have your Scrivener project files in a different location outside of the Documents directory in OS X? No problem, tweak the search scope. These, and many other aspects of workflows, can be tweaked easily in Alfred without knowing a single line of code.

But, again, if you do know a way to make this better, I’d love it if you posted your modifications in the comments below! I am sure there are many ways to make this workflow even more useful to us all!

Useful links:

Writing and Tips: Creating a Custom Project Template in Scrivener

One of the most requested posts I’ve seen in the comments section of this site has been for me to do a write-up on how to create a custom project template in Scrivener. It’s something I honestly had never thought of doing until I started blogging in Scrivener using Markdown and MultiMarkdown. After using that system for a bit, I realized quickly that I’d want the exact same setup for the next year (and the year after that). Without a template, I’d have to recreate everything in that project layout from scratch.

It was the first time I’d encountered a situation in Scrivener where I needed the initial layout of a project (folders, metadata, doc templates, etc…), to be a repeatable affair. Sure it’s easy enough to start a new project and recreate everything (easy, yet time-consuming), but wouldn’t it be great if I had a boilerplate starting point that did it all for me?

Luckily, as always, Scrivener makes creating such a setup quite easy.

One and done.

At first, I thought I’d use a previous project that was ideal for my needs and create a template from that. Good idea right? But then I realized that when you create project template in Scrivener, it takes literally everything in that project and adds it to the template.

In short, I’d get the bits I needed, but I’d spend even more time deleting the stuff I didn’t.

So, to avoid that situation, you need to to start a new project with zero content in it (I used Scrivener’s blank template). From here, you need to recreate only the skeletal structure of the elements that you are going to reuse moving forward. In the case of my blogging system, I only wanted the basic structural elements that I knew I’d need year after year. So that meant the folders for the months, useful, but generic meta-data, a doc template with pre-filled Markdown in it that I use in every post, and anything else that I’d recreate next year.

Once you have all of that set up, it’s time to create your template!

File > Save As Template… not File > Save As…

I remember striking out initially, while looking for this option under the “Save As…” and “Export” sub-menus under “File”. But I quickly saw the magical “Save As Template…” option and all was well.

Save As Template

Once you have your template structure in order. Head up to “File” and then look four options up from the bottom to find “Save As Template…”. Go ahead and click that.

This brings up a “Template Information” window where you can name your template, give it a description, assign an existing Scrivener category to it and even give it fancy custom icon so that it stands out the next time you create a new project.

Choosing A Custom Icon

Once that’s all sorted, click the “Ok” button and you’re done. Easy peasy.

Now you can either save the boilerplate project to add to it later or, if you feel confident that you nailed it on the first try, you can delete it. Don’t worry. You won’t lose your work. The template is safe and sound in Scrivener’s “Application Support” folder on your hard drive.

Let’s Take It For a Spin!

New Template

Now all you have to do to use your new template is start a new project in Scrivener. Select the category you assigned to it and choose your custom template. Once the new project comes up, you’ll see all of that beautiful time you just saved!

Prefilled Layout

Now go have a tall libation. You’ve earned it! :)