CodePen Examples

[lolaodelola]

Using Codepen is a great way to show the example code, however, the code is currently being posted to Codepen in a form, instead of being created and hosted on Codepen. This means that you can't actually share the Codepen example code. For example, in the Treegrid example, the APG Codepen code looks something like this (I've simplified it so it's easier to read and understand.

<form action="https://codepen.io/pen/define" method="POST" target="_blank">
   <input id="codepen-data-ex-0" type="hidden" name="data" value=
       "{
            <table id=\&quot;treegrid\&quot; role=\&quot;treegrid\&quot; aria-label=\&quot;Inbox\&quot;>\n  
              <colgroup>\n
                <col id=\&quot;treegrid-col1\&quot;>\n    
                <col id=\&quot;treegrid-col2\&quot;>\n    
                <col id=\&quot;treegrid-col3\&quot;>\n
              </colgroup>\n
            </table>
         }">
  <button id="ex_label-codepenbutton" style="">Open In CodePen</button>
</form>

This posts the data to CodePen but doesn't seem to generate a share link. Would APG be able to have a codepen account to host and easily share example code?

[mcking65]

@lolaodelola I don't know if the APG TF could have an APG account on codepen.

What would be the advantage?

It seems to me that there would be a risk of people not having direct access to important information about an example if its code is shared on codepen outside the context of the APG.

[lolaodelola]

@mcking65 So I came up against this when I was trying to help the person who had the question about tabbing through the treegrid. I wanted to share a link to the codepen so that they could see all the code working together, the HTML, CSS & JS, and play with it if they need to. The examples on the page separate the CSS and JS into individual files then have the HTML displayed on the page, this is a confusing workflow for when you just want to share the code like I did.

Having a CodePen would just make it easier to share the code and have the HTML, CSS and JS be in context of each other.