Annotations from a JSON File

[heroheman]

Hi,

i saw your presentation in dusseldorf last may fell in love with patternlab instantly. Right now i am in need for annotations for my modules, found your annotations-pattern.js, but had not really a clue if it was finished, usable, etc...

so i modified your styleguide.js that way, that i can include an external JSON File and compare it to the first element of the module (Element and Class)

Maybe it is useful for somebody - its pretty rough and probably not well written but right now its seems to work. So check this gist for feedback: https://gist.github.com/heroheman/6001251

( i know, this is not really an issue, sorry for that)

[dmolsen]

I built an early implementation of the annotations stuff (the annotations-pattern.js you found and annotations-viewer.js) but we never really settled on the implementation. annotations-pattern.js was meant to be included in view.php. Looks like annotations-viewer.js is still included in index.php. They're supposed to talk between the iFrame and parent window. Unfortunately, for my implementation there was a fair bit of chrome that mimicked Brad's mobile first responsive design demo that's no longer included in the repo.

Your stuff looks cool and useful. Thanks for letting us know about it :) It's really good to hear about real use cases so we can make sure we get things working correctly in the next edition.

[heroheman]

thx for the feedback, one drawback in my approach is, that the classes (if set) can't have more than one class, because i am comparing strings. Just a warning -

I can give by time a short summary about what is working well and what not if you want.....

[dmolsen]

Feedback is always welcome. Thanks :)

[heroheman]

As promised my feedback, based on agency prototyping stuff

• as said, annotations are right now based on my upper linked solution, but i had to make sure that every wrapping element has only one class (or no class)
• The "All" page is very confused. I am building right now a kind of TOC for faster navigating, because we need to quick copy code and see annotations. An overview like the startpage for the atoms, molecules, organisms etc would be more useful
• Also the absolutepath made it difficult to use it in a subfolder (on localhost), we changed the '$absolutePath' to $absolutePath = substr(DIR, strlen($_SERVER['DOCUMENT_ROOT']), strlen(DIR)).'/';
• i am currently looking forward to the flat-build release candidate (as mentionend in another ticket), so i cant stop using php. ;)
• sometimes the wrong atom is loading when having similar filenames... eg. 01-picture.phpand 02-picture-withtext.php. I couldnt reproduce it, but my colleage fixed it with using the number of the element.
• some people dislike the atom, molecule, organism namings, so custom namespaces are right now in discussion...

But - in the last weeks i see more and more projects in my company using patternlab. Its really a timesaver. Thanks for this tool - we are in love with it. :+1:

[amclin]

The wrong atom loading is somewhat related to #8. PatternLab matches atom names loosely. When two similar names (like picture.php and picture-with-text.php) are used, a search for "picture" will load whichever it matches first.

Some filesystems will sort picture.php first, and others will sort picture-with-text.php first. As a result, if you are trying to include just "picture", you may have discrepancies as to which version gets loaded.

I assume this is why PatternLab prepends filenames with numeric indicators. This way the load order is controlled, both in the toolbar dropdowns as well as in-file includes.

[dmolsen]

Sorry, I've been traveling so I didn't have a good chance to respond. This has been really valuable feedback for me. I've been focused a lot on individual patterns as opposed to the "view all" view but Brad has put a lot of useful features there too. Your feedback makes me think a pattern search tool would be helpful. Running out of space in the Pattern Lab toolbar though ;)

I think a lot of the issues you brought up are addressed in the next edition but it's still a work in progress.

The numeric indicators are primarily about the placement in the navigation. I've tried to make sure the next edition includes a way to be really explicit about which pattern you're trying to include while still retaining the ability to be loose if someone is used to that.