Create demo of cards

[zmon]

• [x] Flip card - http://callmenick.com/_development/transitions-transforms-animations/1-flipping-card/

[dazzaji]

Thanks for showing this aesthetic for cards, Paul. Getting provisions into a pre-packaged common format (JSON at minimum) that translates to cards is major. But I want to highlight the purpose and value of using cards in the context of contracts: it is really about content interoperability and common reusable design patterns. Cards are part of materials design and Google's materials design is (broadly) part of the web-wide push toward "Web Components". The "paper" components are good examples of this. Google's Web Components are hand-in-hand fits with materials design and moreover are totally interoperable. At this point, the real trick is to use basic interoperable "elements" and not necessarily focus overmuch on very fancy scripting.

Getting contract content from UMKC and MIT and other web pages (eg in GitHub pages) into a single contract template using paper elements would be a very solid start. This is totally consistent with CommonAccord and best of the approach also allows for use and reuse of contract clauses (or any content) to be just as interoperable.

Basic Tutorial Example

I'd suggest implementing this tutorial starter app from Google instead: https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html

Note how Step 3 of the tutorial shows how easy it is to pull from other locations the content to be displayed in cards. The tutorial focuses on using the most elemental functionality of Web Components with Polymer, and keeps us in the middle or the widest available interoperability approach across browsers, servers and everything in between (languages, frameworks, etc). Here is the tutorial step that ties in exactly what we're trying to do with reusable data sharing agreements provisions from external locations:

"Step 3: Using data binding: One post is nice, but the app looks a little empty. In this step, you’ll pull data from a web service and use Polymer’s data binding to render it as a series of cards. To get the data, you’ll use the element provided as part of the starter app..."

Potentially Relevant Capabilities

The starter app was designed for Polymer 0.5. The version 1.0 documentation includes some tools in the API we may want to use. Check out: http://polymer.github.io/polymer and note especially these:

splice(path, start, deleteCount) ➙ Array

"Starting from the start index specified, removes 0 or more items from the array and inserts 0 or more new itms in their place. The arguments after path and return value match that of Array.prototype.splice. This method notifies other paths to the same array that a splice occurred to the array." This is an important way to allow finer grained controls over what sets of distributed terms or other content are included in a given record.

importHref(href, onload, onerror) ➙ HTMLLinkElement

"Convenience method for importing an HTML document imperatively. This method creates a new element with the provided URL and appends it to the document to start loading. In the onload callback, the import property of the link element will contain the imported document contents." This is could be a great way to include full distributed html content. It could apply to attachments to contracts or even to exhibits or clauses within contracts. Using JSON objects for individual provisions in a common manner is vastly preferred but it is always handy (and frequently required) to be capable of importing html "as is". This enables such import in a fine tuned manner (not like iframes, etc).

instanceTemplate(template) ➙ DocumentFragment

"Calls importNode on the content of the template specified and returns a document fragment containing the imported content." This could be a great way to move contract and other relevant templates around.

Automatic transforms on stuff

• serialize(value) ➙ string
• set(path, value, root)
• resolveUrl(url) ➙ string
• reflectPropertyToAttribute(name) linkPaths(to, from)

The above could be applied to keep key-value pairs when content is distributed and templates are distributed, such as is the intended case for CommonAccord.

toggleAttribute(name, bool, node)

"Toggles an HTML attribute on or off." This would be useful if/when a law firm, city or other user wants to select among meaningful attributes of certain terms (eg to ensure "labels" or meaningful hooks for filtering, sorting, adding annotations, etc can be applied in an expected, stable manner). Attributes in normal globally accepted HTML format for signature, headings, paragraph, image and other common contractual content are a key way for workflow, retrieval and other processing systems to address, compute and manage records. This is an "out of the box" and standard way to enable html attributes in a custom way that still enables clear common approaches.

toggleClass(name, bool, node)

"Toggles a CSS class on or off." This would be useful if/when a law firm, city of other user wants to automatically apply a particular style attribute from a common selection to all or some of the content. It enables certain primitive styles to be common without forcing full CSS uniformity (eg it could enable some but not all users to display certain some words or phrases in a "conspicuous" manner if they are intended for a field of law such as a consumer protection context or in a particular geographic jurisdictional context for example).

Highly Relevant

The above represent some of the basic relevant capabilities but there are other opportunities that could make use of Web Components with Polymer a very valuable path to follow. In particular, the Catalogs of Elements (we plan to launch a catalog for elements related to the law this month) and automation capabilities. Regarding the latter, consider these API capabilities:

behaviors

"Array of objects to extend this prototype with. Each entry in the array may specify either a behavior object or array of behaviors. Each behavior object may define lifecycle callbacks, properties, hostAttributes, observers and listeners. Lifecycle callbacks will be called for each behavior in the order given in the behaviors array, followed by the callback on the prototype. Additionally, any non-lifecycle functions on the behavior object are mixed into the base prototype, such that same-named functions on the prototype take precedence, followed by later behaviors over earlier behaviors."

This may be the most important capability. It will enable composable chains of operations in defined sequences to enable lifecycle content and process management. It's pretty amazing what Google is making available as a lingua fanca of the web!

Listen

"Object containing entries specifying event listeners to create on each instance of this element, where keys specify the event name and values specify the name of the handler method to call on this prototype."

listen(node, eventName, methodName)

"Convenience method to add an event listener on a given element, late bound to a named method on this element."

fire(type, detail, options) ➙ CustomEvent

"Dispatches a custom event with an optional detail object."

notifyPath(path, value, fromAbove)

"Returns true if notification actually took place, based on a dirty check of whether the new value was already known"

unlisten(node, eventName, methodName)

"Convenience method to remove an event listener from a given element, late bound to a named method on this element."

[bryangw1]

After meeting with the Chief Data Officer from KCMO last week and reading through the different comments made in this repo and in the CommonAccord/Site-DataShare repo,the image of this project that continues to form seems like it is going in a similar organizational direction as this project management site called trello.com

I believe their structure as a project management tool is something we can draw from because designing a system that allows operators to create contracts/data sharing agreements/licenses involves a lot of project management.

I have been playing around with the website this morning and the way they handle boards and cards seems to be something we could draw from. Their site is set up so users can create boards, drag and drop different cards underneath the boards, annotate the boards and cards in a variety of manners, and it has also been recognized by the ABA as a useful tool for solo/small firm types: http://www.americanbar.org/publications/gp_solo/2012/may_june/being_solo_trello_manages_your_client_matters_free.html

Some of the more advanced things their site can do can be found here: https://trello.com/b/nPNSBZjB/trello-resources but to summarize a bit, their site supports some markdown, but users don't seem to be too thrilled with the way it supports APIs.

[HazardJ]

Thanks. I’ve heard a lot of good things about Trello. Where do you have in mind that it would fit in?

As an alternative to the Slack room or the discussions on GitHub - i.e., be about the project to create standard documents. OR As a vehicle for transacting? I.e., make your deal in Trello.

I am reluctant to say no to anything and I am confident that all paths lead to shared text files in repositories that are or can be hosted in git and in other decentralized databases.

But here’s a thought to consider - in my view the central value of CommonAccord is the legal text. Yes, you can do your whole deal in it (Be-Bound does). Yes, it’s a lot easier than batting word processing docs back and forth. Yes, you get a compact picture of all of your relationships. Paul and I are making progress on one implementation and Dazza has suggested another.

Still, there are lots of ways to do the transacting part and many systems are converging on this task - including the e-payment systems of Apple, PayPal, Bitcoin, Ethereum, etc. But none of them are codifying legal documents efficiently. None are making Wikipedias of everything legal. Docracy 3.0 in Jonathan Askin’s phrase, or Civil Code 3.0.

If we make a few good outlines of data sharing agreements, hang good legal text on the outlines, and get some traction, codification will have begun and I doubt it will stop until everything legal is codified.

On Jul 6, 2015, at 4:55 PM, bryangw1 notifications@github.com wrote:

After meeting with the Chief Data Officer from KCMO last week and reading through the different comments made in this repo and in the CommonAccord/Site-DataShare repo,the image of this project that continues to form seems like it is going in a similar organizational direction as this project management site called trello.com

I believe their structure as a project management tool is something we can draw from because designing a system that allows operators to create contracts/data sharing agreements/licenses involves a lot of project management.

I have been playing around with the website this morning and the way they handle boards and cards seems to be something we could draw from. Their site is set up so users can create boards, drag and drop different cards underneath the boards, annotate the boards and cards in a variety of manners, and it has also been recognized by the ABA as a useful tool for solo/small firm types: http://www.americanbar.org/publications/gp_solo/2012/may_june/being_solo_trello_manages_your_client_matters_free.html http://www.americanbar.org/publications/gp_solo/2012/may_june/being_solo_trello_manages_your_client_matters_free.html Some of the more advanced things their site can do can be found here: https://trello.com/b/nPNSBZjB/trello-resources https://trello.com/b/nPNSBZjB/trello-resources but to summarize a bit, their site supports some markdown, but users don't seem to be too thrilled with the way it supports APIs.

— Reply to this email directly or view it on GitHub https://github.com/UMKC-Law/DataSharingAgreement/issues/12#issuecomment-118879968.

[dazzaji]

Trello is a great kanban system and pretty good for knowledge mgmt and project mgmt in general. I've used it for years myself (before moving to pivotal tracker to keep in step with a big partner) and then finally settling on plain open free widely used GitHub. I'm happy to use Trello to work with UMKC law summer class for this project of it makes it easier for law students to participate and to just express s set of clauses individually and in combinations suitable for common needs like data sharing of HIPAA or FERPA protected information. It would be antithetical to to an open distributed clause bank architecture if the idea was to force anybody else to go to the UMKC trello account data in order to share clauses. The final agreed clauses for all participating collaborators should be in a common form in listed GitHub repositories. That way the clauses can be programstidag accessible and versionable and forkable etc and useable with tools like CommonAccord in any open web based user environment with solutions like web components or any open or proprietary solution desired and replaced from time to time by the end user law firm or city or whomever it is.

[dazzaji]

I should just ask a clarifying querry - What do you want to use trello for? Also, do you have the HIPAA and FERPA templates yet? Thanks.

[bryangw1]

I wasn't intending to suggest using Trello for managing this project -- I think what we've got going with GitHub and Slack is good.

Maybe the post I made earlier today was actually a question, but I didn't know it. So I like the way Trello is set up to allow for the use of cards. And with regard to the cards, I don't think I'd ever seen some sort of website that actually allows for the cards to be used in a way more than just existing in a sort of stagnant state. Trello allows for people to go in, create cards and then move the cards underneath different boards as they see fit. In my head, I saw potential here for a structure that we could use for 1) housing a board that would function as a clause bank, and 2) another board that would function as a template bank, and then a final board where the user selects that clauses from 1) that he wants to fit in the structure he identifies in 2). So my question: Is there some form that we will be using to manage the clause/template cards once they are created?

[bryangw1]

We are going to get the FERPA and HIPPA templates finalized tomorrow

[HazardJ]

Cool. Yes, that makes a lot of sense. That’s a good fit with the modularity of CommonAccord. More or less interface.

E.g. - a drag and drop version of something like this: http://my.commonaccord.org/index.php?action=source&file=Service/Form/MasterServices_Form.md http://my.commonaccord.org/index.php?action=source&file=Service/Form/MasterServices_Form.md

On Jul 6, 2015, at 7:00 PM, bryangw1 notifications@github.com wrote:

I wasn't intending to suggest using Trello for managing this project -- I think what we've got going with GitHub and Slack is good.

Maybe the post I made earlier today was actually a question, but I didn't know it. So I like the way Trello is set up to allow for the use of cards. And with regard to the cards, I don't think I'd ever seen some sort of website that actually allows for the cards to be used in a way more than just existing in a sort of stagnant state. Trello allows for people to go in, create cards and then move the cards underneath different boards as they see fit. In my head, I saw potential here for a structure that we could use for 1) housing a board that would function as a clause bank, and 2) another board that would function as a template bank, and then a final board where the user selects that clauses from 1) that he wants to fit in the structure he identifies in 2). So my question: Is there some form that we will be using to manage the clause/template cards once they are created?

— Reply to this email directly or view it on GitHub https://github.com/UMKC-Law/DataSharingAgreement/issues/12#issuecomment-118924886.

[zmon]

This is a interesting technology https://github.com/MaxHorstmann/jekyll-angular-firebase have not looked at it closely.

[dazzaji]

Trello - Sure

Using Trello if it makes life easier to author, organize and refine individual working clauses (via working Trello cards) and a small cluster of working templates (also via Trello cards) is a good idea and better than most collaboration environments for this task.

Integrate Trello With GitHub Project

Trello has a strong suit with helping developers and managers of developers keep the team and the code priorities organized. Many Trello boards are focused on GitHub projects. I think the idea should be to integrate a Data Sharing Agreement Trello board with the authoritative source data in GitHub. If somebody wants to find or build an connector between Trello to GitHub that keeps the data in sync that would be ideal. Or if somebody wants to just copy the data from Trello to GitHub from time to time, that would also work. The language of the provisions - when updated from time to time should definitely happen only in the file and URL for each provision in your clause bank.

Use Trello for Easy Object Representation

Trello Perhaps the trello boards would be used to have a simple accessible representation of each clause and template and also to provide an easy way for anybody/everybody to add their questions/comments/annotations/etc to each clause or template. But the trick is really to have that show up in the GitHub issues or wiki if it is important so that other people can have a hope of seeing it and being able to work with or help solve the topics that come up and to understand a good history of the topics that have already been addressed or decided or otherwise form the basis of the then current content. The best use of Trello is as a Kanban with a name of a result needed in a GitHub project (like "merge 07.liability and 04.indemnity clauses for use in 02.FERPA but not 03.HIPAA templates". That way people are working and focused on a Kanban board related to an agile product in exactly the way Trello technology, process, method and mechanisms were designed to perform at highest caliber.

[dazzaji]

Also - there may be some confusion about "cards" - Trello uses a sort of card interface but only at the most superficial level. The purpose of componentizing content so they are suitable for display as cards is primarily about interoperability and reusability of the chunked data comprising each clause and each cluster of clauses. The way I am looking at this for the upcoming legal elements categlog is for each card to be an instances of a "clause" element type which include the content (title, body) and key metadata (eg labels, source URLs, cites, authors, links to where the clause has been used, annotations, notes, etc) and key actions (two actions per card in the ordinary case, depending on context). The actions when the card is for a clause in a card bank for possible use in a agreement type that is not yet known might be 1. Add Values and 2. Select Template. Add values would be to input the parties, their addresses etc (if not already integrated to an identity directory or other autofill source) and such customization info as the date for start/end of term, the values of payments, the data being shared, the product/service being transacted, etc. The "Select Template" action would just invoke the agreement template and chuck the provision into the right section of that "document". With a template selection, clusters of other provisions would also be auto populated as initial suggestions (hence the template-nature of the document). By contrast, the actions on a card for a given contract provision that is already agreed and in place might be 1) Ask A Question and 2) Select: Plain Language, Legal Language, JSON/XML Format. The "Ask a Lawyer" action could rout to the FAQ of the company with whom a consumer has the agreement in place where if the questionis not answered it can be posed with a new issue # for tracking and so future consumers can see the answer too. The action could be routed to a clinic or other free legal or consumer advice, such as the Boston Bar Association Volunteer Consumer Lawyers Panel. The query could easily be routed to the law office of an attorney representing the user. The point is, the cards are live and are composed of "Web Components" which make them very interoperable as data and also as working code. This is fundamentally different from Trello despite the similar card shape on the display screen and the fact that trello has functions or actions inside it's own system that relate to info displayed in a card shape.

[zmon]

The following are some very simple and incomplete mockups I did today, but puts some ideas down on paper.

It does bring up some issues:

• How do we get from the format the clauses are stored into what CommonAccord needs?
• How to handle cards that reference other cards or is this just a flat layout?
• Can we edit a card? If so are we making our own copy of the card or changing the existing card, which might be used by other documents?

This image shows a list of templates, allowing a user to use by making a copy.

This next image shows a page where we can drag and drop clause to and from the agreement that is being worked on.

The card for now is one sided. To have a two sided card we would need a summary field to display on the front side.