This Site: Adding JSON Feed support…

Quick site update for you all!

Last week ushered in a new feed format called JSON Feed. Similar to RSS or Atom syndication, JSON Feed simply creates a way for you to syndicate content from your site to a feed reader of your choice.

What is different though, is that rather than churning out XML (which developers tend to avoid), the end result creates a feed written entirely in JSON, which is way easier to read and write.

Getting into the weeds.

If you want to get into the nitty gritty, you can read all about the full V.1 spec here: https://jsonfeed.org/version/1

If your site runs on WordPress, there’s a plugin for easily implementing a JSON Feed. Click here to download it.

Lastly, if you are curious how your feed will look in a reader that supports JSON Feeds, you can check that out here: http://json-feed-viewer.herokuapp.com (spoiler alert: it looks really great)

Still on the fence?

I certainly don’t blame you. It’s still very early days, and many would posit that releasing a new feed spec alternative to the now widely adopted RSS spec, is a complete waste of time at this point in the game.

I think it is worth your time because:

  • Over all, it’s a much nicer reading experience for your feed-consuming visitors.
  • The pedigree of its active development is very high (Manton Reece and Brent Simmons).
  • It takes very little time and effort to add it to your site.
  • More and more main stream feed readers are starting to support it.

If you would like to add my JSON Feed to your feed reader, you can find it here: http://thaddeushunt.com/feed/json… or in the left nav (click the nav button in upper right on mobile.

Leverage Your AT&T Unlimited Plus Account to Get HBO Free Without Paying for Their Video Services.

So this week, AT&T announced that they were giving their “Unlimited Plus” accounts access to free HBO streaming. At first I thought the offer existed for only folks who had Unlimited Plus in addition to a subscription to any of their video services (Uverse, Direct TV, Dish Network) – simply additive, and not separate. But then I saw multiple news outlets stating plainly that you could have free HBO with just the Unlimited Plus account. No additional video subscription required.

Being an Unlimited Plus account holder that doesn’t pay an additional dime to AT&T for video services, this was welcome news!

There was still the elephant in the room though – how do you get a login account for a video service without paying for another subscription?

The good news is that you can, but it sure as hell isn’t obvious.

Here are the steps…

  1. Head to directvnow.com.
  2. Click the “Sign In” link.
  3. Below the login fields you’ll see a “Don’t have DIRECTV NOW?” link. Click that.
  4. This will take you to an account sign up page. Before you fill anything out, click the “Verify Number” link.
  5. Type the phone number on your Unlimited Plus account and click “Check My Number”.
  6. The site will then text you at your number. Follow their instructions and reply to the text with a simple “Yes”. The site will then refresh – pronouncing that you are eligible for free HBO – taking you back to the account set up page.
  7. Fill out the account fields and click through to the next step.
  8. On this next screen you will be given the option to just stream HBO, or sign up for a DIRECTV Now package at an additional cost. Choose the HBO-only option and you are done!

Yes, you get pressured into purchasing an additional monthly subscription to DIRECTV (of course you do, starting price $10 a month) but other than that, you are never asked for a credit card or anything.

It truly is a free service as advertised!

Register Those Devices!

Now that you have your free DIRECTV Now account, you can use it to register your streaming devices accordingly. In the interest of simplicity, I just downloaded the HBO GO apps (NOT the HBO Now apps) on my iOS and tvOS devices and did the usual activation dance via hbogo.com/activate.

Taking a bullet.

I always get overly irritated when companies aren’t straight forward with their highly publicized offerings. I won’t go into the hours I put in simply finding out how to make this work. Or the 30 minute chat session where an AT&T rep bold-faced lied to me, stating that I had to have a monthly subscription to an AT&T video service in order to receive the free HBO access that was being offered.

I’m sure the info is out there but, honestly, it should’ve taken me under 10 minutes to figure this out. Hopefully, by boosting this signal, I can give you back some of the day that I missed! Enjoy!

“I will see you again in 25 years…”

Twin Peaks was by far the most formative TV show I have ever watched. So damn much of my young imagination was nurtured and grown in that beautifully dark and bizarre world. For me it was a gift, and now another mini series? Written by Frost and Lynch with all episodes directed by Lynch himself?

I honestly can’t wait for June, 2016. Can’t. Wait.

Non-techie post, I know, but I was so tickled to see this news today.

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!