https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&feed=atom&action=historySheet Author Tips - Revision history2024-03-28T11:50:03ZRevision history for this page on the wikiMediaWiki 1.20.3https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31832&oldid=prev1223200: /* Statblock Importer */ list more sheets with importers2022-06-18T11:47:53Z<p><span dir="auto"><span class="autocomment">Statblock Importer: </span> list more sheets with importers</span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 11:47, 18 June 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 110:</td>
<td colspan="2" class="diff-lineno">Line 110:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Some sheets have integrated options to import sheets to Roll20, such as for plaintext or <code>.json</code> statblocks.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Some sheets have integrated options to import sheets to Roll20, such as for plaintext or <code>.json</code> statblocks.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Existing Sheets with integrated import functions:</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Existing Sheets with integrated import functions<ins class="diffchange diffchange-inline">, by format</ins>:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* [[Mutants & Masterminds 3E Official#Hero_Labs_Importer|Mutants & Masterminds 3E Official]] -herolab importer</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* '''json'''</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* [[Pathfinder Community Sheet#HeroLab Character import|Pathfinder Community Sheet]] - herolab importer</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** [[Official_Savage_Worlds#JSON_Importer|Official Savage Worlds]] - json importer</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* [[<del class="diffchange diffchange-inline">Official_Savage_Worlds#JSON_Importer|Official Savage Worlds]</del>] - <del class="diffchange diffchange-inline">json </del>importer  </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** [https://github.com/Roll20/roll20-character-sheets/tree/master/Fate Fate by Evil Hat] json import/export for character stats </ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* {{sheet-gh|Shadowrun5thEdition Shadowrun5thEdition}} & {{sheet-gh|Shadowrun5th Shadowrun5th}} both have Chummer importers</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** {{sheet-gh|Mythras/src/scripts/import.js Mythras}} json importer</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* [[GeneFunk2090]] statblock importer</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** [https://github.com/Roll20/roll20-character-sheets/tree/master/Rolemaster-Standard-System Rolemaster Standard System] - Json importer for NPC statblocks, with example JSON import included.</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>* <del class="diffchange diffchange-inline">{{sheet</del>-<del class="diffchange diffchange-inline">gh|Mythras</del>/<del class="diffchange diffchange-inline">src</del>/<del class="diffchange diffchange-inline">scripts</del>/<del class="diffchange diffchange-inline">import.js Mythras}} json </del>importer</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** [https://github.com/Roll20/roll20-character-sheets/tree/master/RolemasterUnified RolemasterUnified] json importer</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* '''herolabs'''</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">*</ins>* [[Mutants & Masterminds 3E Official#Hero_Labs_Importer|Mutants & Masterminds 3E Official]] - herolab importer</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">*</ins>* [[Pathfinder Community Sheet#HeroLab Character import|Pathfinder Community Sheet]] - herolab importer</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">* '''plaintext/other'''</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">*</ins>* [<ins class="diffchange diffchange-inline">https://github.com/Roll20/roll20-character-sheets/tree/master/ChroniquesOublieesContemporain ChroniquesOublieesContemporain] import statblocks by copying text from pdfs. More info </ins>[<ins class="diffchange diffchange-inline">https://stephaned68.github.io/ChroniquesContemporaines/import-statblock here</ins>]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">** [https://github.com/Roll20/roll20</ins>-<ins class="diffchange diffchange-inline">character-sheets/tree/master/Naheulbeuk Naheulbeuk] </ins>importer</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">*</ins>* {{sheet-gh|Shadowrun5thEdition Shadowrun5thEdition}} & {{sheet-gh|Shadowrun5th Shadowrun5th}} both have Chummer importers  </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">*</ins>* [[GeneFunk2090]] statblock importer</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>*<ins class="diffchange diffchange-inline">* [https://github.com/Roll20/roll20</ins>-<ins class="diffchange diffchange-inline">character-sheets</ins>/<ins class="diffchange diffchange-inline">tree</ins>/<ins class="diffchange diffchange-inline">master</ins>/<ins class="diffchange diffchange-inline">Only-War-Enhanced Only-War-Enhanced] sourcecode has unfinished </ins>importer</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Some sheets have instead a separate [[API]] for this purpose.  </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Some sheets have instead a separate [[API]] for this purpose<ins class="diffchange diffchange-inline">, such as [https://github</ins>.<ins class="diffchange diffchange-inline">com/Roll20/roll20-api-scripts/tree/master/Earthdawn%20(FASA%20Official)%20character%20sheet%20companion Earthdawn by FASA character sheet companion], [[Script:HL-Import]] and </ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">[[Script:HeroLabImporter]].</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">See also: [[Character Sheets/Import]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>===GM Screen===</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>===GM Screen===</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31739&oldid=prev1223200 at 13:05, 26 May 20222022-05-26T13:05:48Z<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 13:05, 26 May 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>{{revdate}}{{BCS}}</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>{{revdate}}{{BCS}} <ins class="diffchange diffchange-inline">{{NavSheetDoc}}</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>This is a collection of more advanced [[Sheet Author]] Tips that currently doesn't fit on the [[:Category:Character_Sheet_Creation|other pages relating to character sheet creation & editing]]. Most of the suggestions & ideas are taken from the Roll20 forums, or discussions among Sheet Authors.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>This is a collection of more advanced [[Sheet Author]] Tips that currently doesn't fit on the [[:Category:Character_Sheet_Creation|other pages relating to character sheet creation & editing]]. Most of the suggestions & ideas are taken from the Roll20 forums, or discussions among Sheet Authors.</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31738&oldid=prev1223200: move Tools-sections to "Character Sheet Development/Tools"2022-05-26T13:05:11Z<p>move Tools-sections to "Character Sheet Development/Tools"</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 13:05, 26 May 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 13:</td>
<td colspan="2" class="diff-lineno">Line 13:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Some Highlights:</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Some Highlights:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* '''[[Character Sheet Development/Tools]]''' - community recommendations</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* [[Character Sheet Development/Common Mistakes|Common Mistakes]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* [[Character Sheet Development/Common Mistakes|Common Mistakes]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* [[Building_Character_Sheets#Best_Practices|Best Practices]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* [[Building_Character_Sheets#Best_Practices|Best Practices]]</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 20:</td>
<td colspan="2" class="diff-lineno">Line 21:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Using the [[Custom Sheet Sandbox|Sheet Sandbox]] while editing/developing character sheets is much more effective and quicker than the normal [[Building_Character_Sheets#The_Sheet_Editor|Sheet Editor]].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Using the [[Custom Sheet Sandbox|Sheet Sandbox]] while editing/developing character sheets is much more effective and quicker than the normal [[Building_Character_Sheets#The_Sheet_Editor|Sheet Editor]].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [<del class="diffchange diffchange-inline">https://code.visualstudio.com/ VSCode] or </del>[<del class="diffchange diffchange-inline">https://www.sublimetext.com/ Sublime Text</del>].</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [[<ins class="diffchange diffchange-inline">VS Code]</ins>].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">===</del>[[<del class="diffchange diffchange-inline">Sheet Autouploader|</del>Autouploader]]<del class="diffchange diffchange-inline">===</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">'''Recommended Plugin: </ins>[[<ins class="diffchange diffchange-inline">Roll20 </ins>Autouploader]]<ins class="diffchange diffchange-inline">''' </ins>-<ins class="diffchange diffchange-inline">- [[Browser#Plugins|browser plugin]] that can autoupload & update your sheet </ins>code <ins class="diffchange diffchange-inline">in the </ins>sheet <ins class="diffchange diffchange-inline">sandbox</ins>, <ins class="diffchange diffchange-inline">so you don't </ins>have <ins class="diffchange diffchange-inline">to do it manually each time. Can also do same for API scripts</ins>.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">{{:Roll20 Autouploader}}</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">{{clear}}</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">==Code with a Proper Text Editor==</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Rather than using the built</del>-<del class="diffchange diffchange-inline">in </del>code <del class="diffchange diffchange-inline">editor, all </del>sheet <del class="diffchange diffchange-inline">authors who do sheets with any regularity use a separate text editor meant for coding</del>, <del class="diffchange diffchange-inline">as they makes things much easier, and </del>have <del class="diffchange diffchange-inline">tons of features  & extensions that are useful</del>.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Some use an [[wikipedia:Integrated_development_environment|IDE]], but due to Roll20 having a bunch of unique stuff, it</del>'<del class="diffchange diffchange-inline">s not really practical to test code locally. It</del>'<del class="diffchange diffchange-inline">s best to test the code live in a </del>[[Sheet <del class="diffchange diffchange-inline">Sandbox]], or the [[Sheet Editor</del>]].</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">==Tools==</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">See '</ins>''[[<ins class="diffchange diffchange-inline">Character </ins>Sheet <ins class="diffchange diffchange-inline">Development/Tools</ins>]]<ins class="diffchange diffchange-inline">''' for community recommendations on sheet dev tools</ins>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">It's quicker to edit & save code on your computer, then upload the new sheet version to the [[Sheet Sandbox]] through the menu, than editing & using the [[Sheet Editor]].</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">Popular Text Editors(among [[Sheet Author|sheet authors]]):</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">* [[VS Code]](Windows, Mac, Linux) ([https://code.visualstudio.com/ dl])</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">* [https://www.sublimetext.com/ Sublime Text] (Windows, Mac, Linux)</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">** {{repo|Anduh/SublimeSettings SublimeSettings}} - Roll20-specific HTML Syntax highlight that also does [[sheetworker]] highlight in html sheets. Created by [[Andreas J.]], based on [[Cassie]]'s  original HTML+JS combo highlighter</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">* [https://notepad-plus-plus.org/ Notepad++] (Windows Only)</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">===VS Code===</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">{{:VS Code}}</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">==Web Developer Tools==</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">{{main|Character Sheet Development/Debugging}}</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">{{NavSheetDoc}}</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <code><button type="roll"></button></code>.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <code><button type="roll"></button></code>.</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 52:</td>
<td colspan="2" class="diff-lineno">Line 35:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''CSS''': [https://jigsaw.w3.org/css-validator/ W3C's CSS Validator]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''CSS''': [https://jigsaw.w3.org/css-validator/ W3C's CSS Validator]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/<del class="diffchange diffchange-inline">Learn</del>/CSS/Building_blocks/Debugging_CSS Debugging CSS]</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/<ins class="diffchange diffchange-inline">Lear==Roll20 Autouploader==</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">{{main|Roll20 Autouploader}}</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">{{:Roll20 Autouploader}}n</ins>/CSS/Building_blocks/Debugging_CSS Debugging CSS]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JavaScript'''(for sheetworkers & API): [https://closure-compiler.appspot.com/home Closure Compiler for JS]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JavaScript'''(for sheetworkers & API): [https://closure-compiler.appspot.com/home Closure Compiler for JS]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31707&oldid=prev1223200 at 10:52, 21 May 20222022-05-21T10:52:18Z<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 10:52, 21 May 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 2:</td>
<td colspan="2" class="diff-lineno">Line 2:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">{{NavSheetDoc}}</del>This is a collection of more advanced [[Sheet Author]] Tips that currently doesn't fit on the [[:Category:Character_Sheet_Creation|other pages relating to character sheet creation & editing]]. Most of the suggestions & ideas are taken from the Roll20 forums, or discussions among Sheet Authors.</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>This is a collection of more advanced [[Sheet Author]] Tips that currently doesn't fit on the [[:Category:Character_Sheet_Creation|other pages relating to character sheet creation & editing]]. Most of the suggestions & ideas are taken from the Roll20 forums, or discussions among Sheet Authors.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>'''[[Sheet Author]]''' is a badge people who have created & submitted [[CS|character sheets]] to Roll20 get.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>'''[[Sheet Author]]''' is a badge people who have created & submitted [[CS|character sheets]] to Roll20 get.</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 24:</td>
<td colspan="2" class="diff-lineno">Line 24:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>===[[Sheet Autouploader|Autouploader]]===</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>===[[Sheet Autouploader|Autouploader]]===</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>{{:Roll20 Autouploader}}</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>{{:Roll20 Autouploader}}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">{{clear}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Rather than using the built-in code editor, all sheet authors who do sheets with any regularity use a separate text editor meant for coding, as they makes things much easier, and have tons of features  & extensions that are useful.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Rather than using the built-in code editor, all sheet authors who do sheets with any regularity use a separate text editor meant for coding, as they makes things much easier, and have tons of features  & extensions that are useful.</div></td></tr>
<tr><td colspan="2" class="diff-lineno">Line 44:</td>
<td colspan="2" class="diff-lineno">Line 44:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Web Developer Tools==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Web Developer Tools==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>{{main|Character Sheet Development/Debugging}}</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>{{main|Character Sheet Development/Debugging}}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">{{NavSheetDoc}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <code><button type="roll"></button></code>.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <code><button type="roll"></button></code>.</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31706&oldid=prev1223200: /* Sheet Sandbox */ transclude Sheet Autouploader2022-05-21T10:50:23Z<p><span dir="auto"><span class="autocomment">Sheet Sandbox: </span> transclude Sheet Autouploader</span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 10:50, 21 May 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 22:</td>
<td colspan="2" class="diff-lineno">Line 22:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [https://code.visualstudio.com/ VSCode] or [https://www.sublimetext.com/ Sublime Text].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [https://code.visualstudio.com/ VSCode] or [https://www.sublimetext.com/ Sublime Text].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">'''Browser Extension: </del>[[<del class="diffchange diffchange-inline">R20AutoCode</del>]]<del class="diffchange diffchange-inline">''' - automates sheet code upload to Sheet Sandbox, streamlining development.</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">===</ins>[[<ins class="diffchange diffchange-inline">Sheet Autouploader|Autouploader</ins>]]<ins class="diffchange diffchange-inline">===</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins class="diffchange diffchange-inline">{{:Roll20 Autouploader}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=31668&oldid=prev1223200 at 06:11, 16 May 20222022-05-16T06:11:29Z<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 06:11, 16 May 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 21:</td>
<td colspan="2" class="diff-lineno">Line 21:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [https://code.visualstudio.com/ VSCode] or [https://www.sublimetext.com/ Sublime Text].</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Alongside it, most authors use a text editor such as [https://code.visualstudio.com/ VSCode] or [https://www.sublimetext.com/ Sublime Text].</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">'''Browser Extension: [[R20AutoCode]]''' - automates sheet code upload to Sheet Sandbox, streamlining development.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code with a Proper Text Editor==</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=30688&oldid=prev1223200: /* Changelog and Update Notification inside Sheet */2022-03-05T01:04:30Z<p><span dir="auto"><span class="autocomment">Changelog and Update Notification inside Sheet</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 01:04, 5 March 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 145:</td>
<td colspan="2" class="diff-lineno">Line 145:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>The team behind the [[GURPS]] character sheet is a great example of incorporating a comprehensive changelog into the sheet, with a collapsible notice of the latest update/message from the sheet authors, and is non-obstructive even when not dismissed.</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>The team behind the [[GURPS]] character sheet is a great example of incorporating a comprehensive changelog into the sheet, with a collapsible notice of the latest update/message from the sheet authors, and is non-obstructive even when not dismissed.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* {{repo|Roll20/roll20-character-sheets/tree/master/GURPS GURPS 4E sourcecode}}</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* {{repo|Roll20/roll20-character-sheets/tree/master/GURPS GURPS 4E sourcecode}}</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* https://app.roll20.net/forum/post/10732652/notifying-users-of-changes-to-sheet</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><br clear="right"></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><br clear="right"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=30671&oldid=prev1223200: /* Web Developer Tools */2022-03-04T18:55:35Z<p><span dir="auto"><span class="autocomment">Web Developer Tools</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 18:55, 4 March 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 40:</td>
<td colspan="2" class="diff-lineno">Line 40:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Web Developer Tools==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Web Developer Tools==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">[[File:Firefox-Webtools-inspector.gif|right|thumbnail|500px|Uisng the Firefox dev tools to inspect live sheet code]]</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>{{<ins class="diffchange diffchange-inline">main</ins>|<ins class="diffchange diffchange-inline">Character Sheet Development/Debugging</ins>}}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">Using the built in Web Dev tools in your [[browser]] helps a lot with figuring things out. Both [[Browser#Firefox|Firefox]] & [[Browser#Chrome|Chrome]] have their own versions, which both are accessed by pressing </del>{{<del class="diffchange diffchange-inline">button</del>|<del class="diffchange diffchange-inline">F12</del>}} <del class="diffchange diffchange-inline">at any time.</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">* [https://developer.mozilla.org/en-US/docs/Tools Firefox Web Developer Tools]</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">* [https://developer.chrome.com/docs/devtools/ Chrome DevTools]</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div> </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">'''User Cases'''</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">* make live edits on you sheet and see how things change(like adjusting the width of a [[Building_Character_Sheets#type.3D.22number.22|number input]] to look good)</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">* figure out why something works or doesn't work in your code, to narrow down the problem source (like why a css class is not working)</del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline">* reading the webdev console to figure out what's going on with your [[sheetworkers]]. (If you add <code>console.log("set strength mod to" + strmod)</code> to specific places in your code, you can see what steps are taken and what is left out) </del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del class="diffchange diffchange-inline"><br></del></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Code Validation==</div></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=30639&oldid=prev1223200: /* Frameworks */2022-03-04T14:52:36Z<p><span dir="auto"><span class="autocomment">Frameworks</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 14:52, 4 March 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 66:</td>
<td colspan="2" class="diff-lineno">Line 66:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Frameworks==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==Frameworks==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Beyond just using HTML/CSS directly, you could use some pre-processors, language extensions, or frameworks that can speed up the sheet development, instead of directly writing HTML/CSS. Here are a few suggestions, used by <del class="diffchange diffchange-inline">some </del>sheet authors, including Roll20 <del class="diffchange diffchange-inline">themselves</del>.   </div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Beyond just using HTML/CSS directly, you could use some pre-processors, language extensions, or frameworks that can speed up the sheet development, instead of directly writing HTML/CSS. Here are a few suggestions, used by <ins class="diffchange diffchange-inline">a good number of </ins>sheet authors, including Roll20<ins class="diffchange diffchange-inline">'s teams working on the official sheets</ins>.   </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">[[Cassie]]'s Suggestion:</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>:''Use PUG & SASS/SCSS & JavaScript to make sheets. PUG & SCSS are the two most useful things I've ever learned for sheet development. Character sheets which use to take hundred+ hours takes now 20-40 thanks to PUG which is a JavaScript based language to write HTML. You'll save yourself a lot of redundant work by just using the power of loops & variables if nothing else.''</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>:''Use PUG & SASS/SCSS & JavaScript to make sheets. PUG & SCSS are the two most useful things I've ever learned for sheet development. Character sheets which use to take hundred+ hours takes now 20-40 thanks to PUG which is a JavaScript based language to write HTML. You'll save yourself a lot of redundant work by just using the power of loops & variables if nothing else.''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>1223200https://wiki.roll20.net/index.php?title=Sheet_Author_Tips&diff=30638&oldid=prev1223200: /* Code Validation */2022-03-04T14:51:00Z<p><span dir="auto"><span class="autocomment">Code Validation</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black;">Revision as of 14:51, 4 March 2022</td>
</tr><tr><td colspan="2" class="diff-lineno">Line 58:</td>
<td colspan="2" class="diff-lineno">Line 58:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''HTML''': [https://validator.w3.org/ W3C's HTML Validator]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''HTML''': [https://validator.w3.org/ W3C's HTML Validator]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>** initially give many <del class="diffchange diffchange-inline">varnings </del>and errors on roll20-specific things, but you can filter away things that aren't wrong, and the list of error is quickly reduced to a manageable amount</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>** initially give many <ins class="diffchange diffchange-inline">warnings </ins>and errors on roll20-specific things, but you can filter away things that aren't wrong, and the list of error is quickly reduced to a manageable amount</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>** [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div><del style="color: red; font-weight: bold; text-decoration: none;">* '''JavaScript'''(for sheetworkers & API): [https://closure-compiler.appspot.com/home Closure Compiler for JS]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''CSS''': [https://jigsaw.w3.org/css-validator/ W3C's CSS Validator]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''CSS''': [https://jigsaw.w3.org/css-validator/ W3C's CSS Validator]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">** [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS Debugging CSS]</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* '''JavaScript'''(for sheetworkers & API): [https://closure-compiler.appspot.com/home Closure Compiler for JS]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
</table>1223200