Roll in Metaframe for Annotations

[bradfrost]

We've already been talking about how to display lists of annotations for a particular section, and Metaframe by Geoff Barnes and the folks at elliance looks great: https://github.com/elliance/metaframe

Check out the example: http://metaframe.elliance.com/example/

[dmolsen]

With the caveat that I haven't watched the video. If I need to to understand your interest just let me know...

So what exactly do you like out of Metaframe? Do you see dropping the current annotations implementation for it? I don't have a problem with dropping it I just want to make sure it's thought through.

I actually looked at Metaframe a while back for use with PL. Before I straight up copied and then tweaked what you had from your demo. I really like the UI with the big numbers (tho they should be click-able). It makes it blazingly obvious you're able to look at annotations. From a set-up standpoint though... I'm not sure it'd work well with PL. Basically, the annotations live within the mark-up. For example, you want to add a note about a section the code looks like:

<section class="features notation" note="By default, this section will contain the three most recent featured stories.">

To me that's too ugly for PL. It requires the addition of a class to a pattern as well as the note (which should be a data- attribute). Also, does the tray really offer enough space? I don't do annotations so I don't know if there needs to be space for exposition.

This isn't to say the tray or look of the numbers couldn't be lifted for PL. I just think your implementation of annotations.js is better from a data storage perspective.

[patternlab]

Here's what I like about Metaframe:

1. Like you said "It makes it blazingly obvious you're able to look at annotations."
2. I like the numbering, and the area that shows all the annotations as a list. That's what we were trying to do before, and this is a nice way of doing it. I think we don't need to bake the annotations into the markup. We can do some form of CSS-pseudo-selector (maybe with a bit of JS) stuff to accomplish the numbering.

I don't think we roll in Metaframe as-is, but rather take the stuff we like and expound on our existing foundation. Here's what I'd like:

1. Keep the annotations in a separate document for maximum separation
2. Include a better visual indicator for annotated elements
3. Annotation stays put (bottom part of screen) that displays all the annotations on the page. Clicking an annotated element in the DOM jumps user to the corresponding annotation in the list. Could do some :target stuff to highlight the current annotation.

Does this sound doable?

On Thursday, November 21, 2013, Dave Olsen wrote:

With the caveat that I haven't watched the video. If I need to to understand your interest just let me know...

So what exactly do you like out of Metaframe? Do you see dropping the current annotations implementation for it? I don't have a problem with dropping it I just want to make sure it's thought through.

I actually looked at Metaframe a while back for use with PL. Before I straight up copied and then tweaked what you had from your demo. I really like the UI with the big numbers (tho they should be click-able). It makes it blazingly obvious you're able to look at annotations. From a set-up standpoint though... I'm not sure it'd work well with PL. Basically, the annotations live within the mark-up. For example, you want to add a note about a section the code looks like:

To me that's too ugly for PL. It requires the addition of a class to a pattern as well as the note (which should be a data- attribute). Also, does the tray really offer enough space? I don't do annotations so I don't know if there needs to be space for exposition. This isn't to say the tray or look of the numbers couldn't be lifted for PL. I just think your implementation of annotations.js is better from a data storage perspective. — Reply to this email directly or view it on GitHubhttps://github.com/pattern-lab/patternlab-php/issues/58#issuecomment-29017009 .

[dmolsen]

I'm still a little fuzzy on 3 but it's not a show stopper. I think I just need to see it sketched out. Sounds completely doable.

[bradfrost]

3 is essential what the Metaframe sidebar is, but docked to the bottom

like we currently are doing for annotations and code view. And like long code views, we'll have the annotations as one long scrolling list. When the user clicks an element in the DOM with an annotation, the annotation panel will scroll to the appropriate annotation in the list. It's essentially using anchor tags for local navigation.

---

Brad Frost http://bradfrostweb.com http://twitter.com/brad_frost

On Thu, Nov 21, 2013 at 9:55 PM, Dave Olsen notifications@github.comwrote:

I'm still a little fuzzy on 3 but it's not a show stopper. I think I just need to see it sketched out. Sounds completely doable.

—

Reply to this email directly or view it on GitHubhttps://github.com/pattern-lab/patternlab-php/issues/58#issuecomment-29045468 .

[dmolsen]

got it now :)

[dmolsen]

And I think we add in a configurable note taking feature. Got to be a way to work in Wufoo or some third party storage that can be set-up with a key.

[benedfit]

Next version of metaframe is expected to drop by Thursday this week. Will contain commenting

[bradfrost]

Nice, thanks for the heads-up. Do you know how comments will be stored?

---

Brad Frost http://bradfrostweb.com http://twitter.com/brad_frost

On Tue, Nov 26, 2013 at 7:12 AM, Ben Edwards notifications@github.comwrote:

Next version of metaframe is expected to drop by Thursday this week. Will contain commenting

—

Reply to this email directly or view it on GitHubhttps://github.com/pattern-lab/patternlab-php/issues/58#issuecomment-29287393 .

[benedfit]

I'm in the dark until @texburgher tells me how it works :)

[benedfit]

Following on from your guys discussion about not having the annotations part of the markup; while I agree that separating it is a good idea, and makes it one less thing to not have to strip out during an integration phase in a project I also feel that having one file that contains the annotations is slightly at odd with idea of separating everything out. So to that affect, would it be possible to implement pattern level annotation as well?

[texburgher]

Hi! Wait, what? Sorry, I think I kissed something earlier in the thread. Missed. Not kissed.

Siri, right me away bet or signature.

On Nov 26, 2013, at 11:06 AM, Ben Edwards notifications@github.com wrote:

I'm in the dark until @texburgher tells me how it works :)

— Reply to this email directly or view it on GitHub.

[benedfit]

I was just relaying https://twitter.com/texburgher/statuses/403986315928432640. But relayed it wrong

[benedfit]

... In no official capacity what so ever of course

[dmolsen]

@benedfit -

Unfortunately, annotations aren't related to patterns. Instead they're related to DOM elements. So an annotation gets associated with .logo and not atoms-logo. It seemed to provide a certain amount of flexibility but it does break from the granularity of the mark-up. I guess it could be changed but I'd like to see it breathe a little first.

[texburgher]

@benedfit: No worries! I was delighted to see the idea thrown out! It's a great break from the otherwise painfully stuffed schedule de los deadlines (that's Spanish, no it's not) I'm enduring right now.

On Tue, Nov 26, 2013 at 3:51 PM, Dave Olsen notifications@github.comwrote:

@benedfit https://github.com/benedfit -

Unfortunately, annotations aren't related to patterns. Instead they're related to DOM elements. So an annotation gets associated with .logo and not atoms-logo. It seemed to provide a certain amount of flexibility but it does break from the granularity of the mark-up. I guess it could be changed but I'd like to see it breathe a little first.

— Reply to this email directly or view it on GitHubhttps://github.com/pattern-lab/patternlab-php/issues/58#issuecomment-29332660 .

Geoff Barnes

[benedfit]

Sorry, fell asleep after tweeting last night, so here are my thoughts:

As you said in your tweet a third party plugin could be used, however the biggest issue with things such as Facebook Comments or Disqus is that everything said is publicly accessible if you know where to look. Boo!

So unless anyone can identify a suitable existing private commenting API, what are your thoughts on building one that all pattern labs could use?

[dmolsen]

@benedfit -

While building a service would be nice that's a ton of overhead for one feature. An admittedly useful feature but still a lot of work for a single feature. I couldn't see myself doing it anywhere in the near-term. And by near-term I mean six months. If ever. I'll end up looking hard at some other utility to do this. I don't see any movement on comments being made on this until end of January unless someone drops a PR before then or Brad bumps the priority. Brad is still tweaking a bit on annotations and we're still sort of getting a feel for the feature.

[benedfit]

https://github.com/elliance/metaframe/ has updated with commenting

[dmolsen]

Closing this issue after opening a more appropriate one with #91.