Roll20 Wiki

Latest revision as of 19:42, 24 August 2023

This is a list of common mistakes many do in sheet development when creating or editing custom character sheets. reorganized version of the ones found on BCS#Common_Mistakes.

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub

Other

The section headings are made this way to make it easier to reference individual rules by number, like https://wiki.roll20.net/Sheet_Mistakes#5

Contents

Common (Roll20) Mistakes

1 : Forgetting to start attribute names with attr_
2 : The Preview Panel is not accurate
3 : Check/Uncheck "Legacy Sanitization" when using custom code
4 : (Legacy Sheet)Forgetting to add sheet- to the class names in your .css file
5 : Using an underscore in the name/class of repeating sections
6 : CSS: Not understanding how General Sibling Selector ~ works, and how it applies in making tabs/hideable areas on the sheet
7 : Not using a linter/code validator on your HTML/CSS/Sheetworker/Translation files
8 : Google Fonts
9 : Do not submit a new sheet that uses <table> for layout
10: Forgetting about translation files

General Coding Mistakes

G-1: Not reading the Roll20 documentation
G-2: Not looking at existing code
G-3: Not asking for help when you get stuck

Related Pages

Common Mistakes

A list of common mistakes made by both old and new sheet creators/authors.

[edit] 1

[edit] Forgetting to start attribute names with `attr_`

(Works: <input type="number" name="attr_dexterity"> vs. Doesn't work: <input type="number" name="dexterity">). To store any information on a character sheet, this attr_ prefix is needed in the name. If it is left out, no data being saved in the field after the sheet is closed.

[edit] 2

[edit] The Preview Panel is not accurate

The preview panel does not show an accurate view of how the sheet will look/work in an actual game, and completely ignores sheetworkers. You need to login to the campaign and open a character sheet there, to be sure of sheet visuals/functionality.

Ideally, use the Sheet Sandbox for sheet development.

[edit] 3

[edit] Check/Uncheck "Legacy Sanitization" when using custom code

Depending on if you have sheet code formatted for Legacy sheets or CSE, you need to check the box found in the Sheet Editor, or when using Sheet Sandbox, update the sheet.json-section.

Otherwise the sheet will look like most of the CSS is gone, and the result is often basically unusable.

[edit] 4

[edit] (Legacy Sheet)Forgetting to add `sheet-` to the class names in your `.css` file.

This is not needed in the .html file, Roll20 automatically assumes all classes have that prefix there.(Doesn't apply to CSE sheets) See CSS Styling

[edit] 5

[edit] Using an underscore in the name/class of repeating sections

Each <fieldset> needs to have unique classname, that starts with repeating_, and the rest of the name cannot have underscores, or the section won't save any information. Using - is fine, but might be smarter to write it as one word. Good ex. <fieldset class="repeating_meleeattacks">

[edit] 6

[edit] CSS: Not understanding how General Sibling Selector `~` works, and how it applies in making tabs/hideable areas on the sheet

The CSS Wizardry examples on show/hide areas & creating tabs on your sheet, relies on the correct positioning of elements. If the HTML elements are in a different order, or are inside other elements, the conditions aren't met for making the ~ selector work in CSS.

[edit] 7

[edit] Not using a linter/code validator on your HTML/CSS/Sheetworker/Translation files.

Often with HTML/CSS things can seemingly work fine for a long time even when you have mistakes, and cause trouble way later. Running your Sheetworker's code through a JavaScript validator is a critical step to finding why it might not work. Checking any translation.json or sheet.json files is also important. HTML/CSS code validation

[edit] 8

[edit] Google Fonts

Follow the Roll20 guide to the letter, and don't use urls generated by google, you need the remove the "2" from the url, among things. Google Fonts on Roll20 Sheets

[edit] 9

[edit] Do not submit a new sheet that uses `<table>` for layout.

It's the most common reason for new sheets being rejected/delayed, use better methods for layout instead, such as CSS Grid or Flexbox. There are old sheets in the repo using <table>, but they were created before this rule against <table> was made.

[edit] 10

[edit] Forgetting about translation files

Forgetting to use or update translation files will result in the data-i18n attribute from the html to show as red like

[strength]

to indicate the translation is missing. If the sheet needs the translation file, and you don't copy it to your game, all/most text on it will show red text and the name of the language tag for each section, as seen in the example here.

[edit] General Coding Mistakes

The kinda obvious, general coding mistakes, that aren't related to how Roll20 sheets code works specifically, but are general coding things to keep in mind, regardless of subject.

[edit] G-1

[edit] Not reading the Roll20 documentation.

Roll20 sheet code isn't straight up just regular HTML/CSS/JavaScript, but has a number of differences Much of the quirks & basics related to Character Sheet Creation is documented/linked on Building Character Sheets, and the pages are regularly getting updated. It's always a good idea to check pages again, even if you read them in the past. List of all pages related to "Character Sheet Creation"

Restrictions - general html/css restrictions on how things differ from normal html/css
Sheetworker Restrictions - how JS is restricted, & info on what sheetworkers can or can't do.
Repeating Sections Restrictions - how they differ from regular sheet sections
Roll Templates Restrictions - works very differently from the actual sheet code, and affects how they are written
BCS/Updates Recent updates to how sheets functions
BCS/Bugs known bugs & issues with how sheets functions.

[edit] G-2

[edit] Not looking at existing code.

Seeing how existing sheets have been made and structured can help you avoid reinventing the wheel or making many of the common mistakes as result of knowing HTML/CSS/JavaScript, but not taking time to get familiar with how Roll20 sheet code is slightly different. All sheets in the Character Sheet Repository are under MIT license so are free(and encouraged) to be used as templates for creating your own sheet, instead of making everything from scratch.

Especially older sheet might be worse than newer sheets, as they have been created before later updates to the roll20 sheet framework(CSE), as well as predate newer features of HTML/CSS/JS, such as CSS Grid/Flexbox. If a sheet haven't been updated in several years, there is guaranteed to exist a newer, better made sheet, which would better a better example/template.

[edit] G-3

[edit] Not asking for help when you get stuck

Roll20 has a small, but active, community who works with creating and improving character sheets, and are often eager to help out if you got stuck on some feature you've tried to figure out.

Roll20 Character Sheet & Compendium Forums^(Forum) - best place to ask for advice
Unofficial Roll20 Discord - a number of sheet authors are active there, in the #custom-sheets channel(as well as in their own hub).

[edit] Related Pages

Character Sheet Development/Bugs & Quirks
Character Sheet Development/Feature Updates
Sheet Author Tips - misc. tips not covered by other pages
Sheet Sandbox - the better sheet editor to use when working on char sheets

@@ Line 1: / Line 1: @@
 <noinclude>
-{{NavSheetDoc}}
+{{revdate}}{{BCS}}
-{{main|Building Character Sheets}}
-This is a list of common mistakes many do in sheet developement. reorganized version of the ones found on [[BCS#Common_Mistakes]].
+This is a list of common mistakes many do in sheet development when [[BCS|creating or editing custom character sheets]]. reorganized version of the ones found on [[BCS#Common_Mistakes]].{{NavSheetDoc}}
-'''The section headings are made this way to make it easier to reference individual rules by number, like https://wiki.roll20.net/Common_Mistakes_-_Sheet_Development#5'''
+The section headings are made this way to make it easier to reference individual rules by number, like <code><nowiki>https://wiki.roll20.net/Sheet_Mistakes#5</nowiki></code>'''
+<!---
+The automatic TOC is ugly now(due to the heading structure) so it's hidden, and is replaced with a manually create TOC which is much more readable.
-</noinclude>
+If you edit/add sections on the page, update the TOC accordingly. -->
-A list of common mistakes by old and new sheet creators.
+__NOTOC__
+<div id="toc" class="toc" style="font-size:1em;width:800px;">
+<div style="font-size:1.4em;margin-bottom:0px;" >Contents</div>
+<hr>
+<div style="margin-bottom:5px;">'''[[#Common Mistakes|Common (Roll20) Mistakes]]'''</div>
+<p style="margin-left: 1.6em;margin-bottom:5px;">
+[[#1|1  : Forgetting to start attribute names with <code>attr_</code>]]<br>
+[[#2|2  : The Preview Panel is not accurate]]<br>
+[[#3|3  : Check/Uncheck "Legacy Sanitization" when using custom code]]<br>
+[[#4|4  : (Legacy Sheet)Forgetting to add sheet- to the class names in your .css file]]<br>
+[[#5|5  : Using an underscore in the name/class of repeating sections]]<br>
+[[#6|6  : CSS: Not understanding how General Sibling Selector <code>~</code> works, and how it applies in making tabs/hideable areas on the sheet]]<br>
+[[#7|7  : Not using a linter/code validator on your HTML/CSS/Sheetworker/Translation files]]<br>
+[[#8|8  : Google Fonts]]<br>
+[[#9|9  : Do not submit a new sheet that uses <code><nowiki><table></nowiki></code> for layout]]<br>
+[[#10|10: Forgetting about translation files]]
+</p>
+<div style="margin-bottom:5px;">'''[[#General Coding Mistake|General Coding Mistakes]]'''</div>
+<p style="margin-left: 1.6em;margin-bottom:5px;">
+[[#G-1|G-1: Not reading the Roll20 documentation]]<br>
+[[#G-2|G-2: Not looking at existing code]]<br>
+[[#G-3|G-3: Not asking for help when you get stuck]]
+</p>
+<div style="margin-bottom:5px;">'''[[#Related Pages|Related Pages]]'''</div>
+</div>
+==Common Mistakes==</noinclude>
+A list of common mistakes made by both old and new [[Sheet Author|sheet creators/authors]].
 ===1===
 ====Forgetting to start attribute names with <code>attr_</code>====
-(e.g. <code><input type="number" name="attr_dexterity"></code> vs. <code><input type="number" name="dexterity"></code>). To [[Building_Character_Sheets#Storing_User_Data|store any information]] on a character sheet, this prefix is needed in the name. If it is left out, no data being saved in the field after the sheet is closed.
+(Works: <code><input type="number" name="attr_dexterity"></code> vs. Doesn't work: <code><input type="number" name="dexterity"></code>). To [[Building_Character_Sheets#Storing_User_Data|store any information]] on a character sheet, this <code>attr_</code> prefix is needed in the name. If it is left out, no data being saved in the field after the sheet is closed.
 ===2===
-====Thinking the [[Building_Character_Sheets#Preview_Panel| Preview Panel]] shows all the changes/is accurate.====
+====The [[Sheet_Editor#Preview|Preview Panel]] is not accurate====
-The preview panel does '''not''' show an accurate view of how the sheet will look/work in an actual game, '''and completely ignores sheetworkers'''. You need to login to the campaign and open a character sheet there to be sure of sheet visuals/functionality, or use the [[Sheet Sandbox]].
+The preview panel does '''not''' show an accurate view of how the sheet will look/work in an actual game, '''and completely ignores [[sheetworkers]]'''. You need to login to the campaign and open a character sheet there, to be sure of sheet visuals/functionality.
+'''Ideally, use the [[Sheet Sandbox]] for sheet development.'''
 ===3===
-====Check/Uncheck "[[Legacy Sheet|Legacy Sanitization]]" when using custom code.====
+====Check/Uncheck "[[Legacy Sheet|Legacy Sanitization]]" when using custom code====
-Depending on if you have sheet code formatted for [[LCS]] or [[CSE]], you need to check the box found by the editors.
+Depending on if you have sheet code formatted for [[LCS|Legacy sheets]] or [[CSE]], you need to check the box found in the [[Sheet Editor]], or when using [[Sheet Sandbox]], update the [[Custom_Sheet_Sandbox#Sheet.json_Editor|sheet.json]]-section.
+Otherwise the sheet will look like most of the CSS is gone, and the result is often basically unusable.
 ===4===
 ====([[Legacy Sheet]])Forgetting to add <code>sheet-</code> to the class names in your <code>.css</code> file.====
-This is not need in the <code>.html</code> file, Roll20 automatically assumes all classes have that prefix there.(Doesn't apply to [[CSE]] sheets) See [[Building Character Sheets#CSS Styling|CSS Styling]]
+This is not needed in the <code>.html</code> file, Roll20 automatically assumes all classes have that prefix there.(Doesn't apply to [[CSE]] sheets) See [[Building Character Sheets#CSS Styling|CSS Styling]]
 ===5===
-====Using an underscore in the name/class of [[Building_Character_Sheets#Repeating_Sections|repeating sections]]====
+====Using an underscore in the name/class of [[BCS/Repeating Section|repeating sections]]====
-Each <code><fieldset></code> needs to have unique classname that starts with <code>repeating_</code>, and the rest of the name cannot have underscores, or the section won't save any information. Using <code>-</code> is fine, but might be smarter to write it as one word.
+Each <code><fieldset></code> needs to have unique classname, that starts with <code>repeating_</code>, and the rest of the name cannot have underscores, or the section won't save any information. Using <code>-</code> is fine, but might be smarter to write it as one word. '''Good ex.''' <code><fieldset class="repeating_meleeattacks"></code>
 ===6===
-====CSS: Not understanding how [https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator General Sibling Selector] <code>~</code> works, and how it applies in making tabs/hideable areas on the sheet.====
+====CSS: Not understanding how [https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator General Sibling Selector] <code>~</code> works, and how it applies in making tabs/hideable areas on the sheet====
-The [[CSS_Wizardry#Show.2FHide_Areas|CSS Wizardry]] examples on show/hide areas & creating tabs relies on the correct positioning of elements, and if the html elements are thrown in a different order or withing other elements, the conditions aren't met for things to trigger.
+The [[CSS Wizardry]] examples on [[CSS_Wizardry#Show.2FHide_Areas|show/hide areas]] & creating [[CSS_Wizardry#Tabs|tabs on your sheet]], relies on the correct positioning of elements. If the HTML elements are in a different order, or are inside other elements, the conditions aren't met for making the <code>~</code> selector work in CSS.
 ===7===
 ====Not using a [[Sheet_Author_Tips#Code_Validation|linter/code validator]] on your HTML/CSS/Sheetworker/Translation files.====
-Often with HTML/CSS things can seemingly work fine for a long time even when you have mistakes, and cause trouble way later. Running your Sheetworker's code through a [https://closure-compiler.appspot.com/home JavaScript validator] is a critical step to finding why it might not work. Checking any <code>translation.json</code> or <code>sheet.json</code> files is also important.
+Often with HTML/CSS things can seemingly work fine for a long time even when you have mistakes, and cause trouble way later. Running your Sheetworker's code through a [https://closure-compiler.appspot.com/home JavaScript validator] is a critical step to finding why it might not work. Checking any <code>translation.json</code> or <code>sheet.json</code> files is also important. [[Sheet_Author_Tips#Code_Validation|HTML/CSS code validation]]
 ===8===
 ====Google Fonts====
-Follow the Roll20 guide to the letter, and don't use urls generated by google, you need the remove the "2" from the url, among things. [[#Google_Fonts|Google Fonts on Roll20 Sheets]]
+Follow the Roll20 guide to the letter, and don't use urls generated by google, you need the remove the "2" from the url, among things. [[BCS#Google_Fonts|Google Fonts on Roll20 Sheets]]
 ===9===
 ====Do not submit a new sheet that uses <code><nowiki><table></nowiki></code> for layout.====
-It's the most common reason for new sheets being rejected/delayed, [[Designing Character Sheet Layout|use better methods for layout]] instead. There are old sheets in the repo using them, but they where created before this rule against <code><nowiki><table></nowiki></code> was made.
+It's the most common reason for new sheets being rejected/delayed, use better methods for layout instead, such as [[Designing_Character_Sheet_Layout#CSS_Grid|CSS Grid]] or [[Designing_Character_Sheet_Layout#CSS_Flexbox|Flexbox]]. There are old sheets in the repo using <code><nowiki><table></nowiki></code>, but they were created before this rule against <code><nowiki><table></nowiki></code> was made.
+===10===
+====Forgetting about translation files====
+Forgetting to use or update [[i18n|translation files]] will result in the {{c|data-i18n}} attribute from the html to show as red like {{red|[strength]}} to indicate the translation is missing. If the sheet needs the translation file, and you don't copy it to your game, all/most text on it will show red text and the name of the language tag for each section, as seen in the [[Using_Custom_Character_Sheets#Common_Mistake|example here]].
-==The "Obvious"==
+==General Coding Mistakes==
+The kinda obvious, general coding mistakes, that aren't related to how Roll20 sheets code works specifically, but are general coding things to keep in mind, regardless of subject.
-===O-1===
+===G-1===
 ====Not reading the Roll20 documentation.====
-Much of the quirks & basics related to Character Sheet Creation is documented on this page, or linked to, and the pages are regularly getting updated. So it's always a good idea to check pages again even if you read them in the past. [[:Category:Character Sheet Creation|List of all pages related to "Character Sheet Creation"]]
+Roll20 sheet code isn't straight up just regular HTML/CSS/JavaScript, but has a number of differences Much of the quirks & basics related to Character Sheet Creation is documented/linked on [[Building Character Sheets]], and the pages are regularly getting updated. It's always a good idea to check pages again, even if you read them in the past. List of [[:Category:Character Sheet Creation|all pages related to "Character Sheet Creation"]]
-===O-2===
+* [[Building_Character_Sheets#Restrictions|Restrictions]] - general html/css restrictions on how things differ from normal html/css
-====Not looking at existing sheets.====
+* [[Sheet_Worker_Scripts#JavaScript_Restrictions|Sheetworker Restrictions]] - how JS is restricted, & info on what sheetworkers can or can't do.
-Seeing how existing sheets have been made  and structured can help you avoid reinventing the wheel or making mistakes  as result of knowing HTML/CSS/JavaScript but having little familiarity with how character sheets are created. All sheets in the Character sheet repository are under MIT license so are free(and encouraged) to be used as templates for creating your own sheet, instead of making everything from scratch.
+* [[BCS/Repeating_Section#Definition_.26_Restrictions|Repeating Sections Restrictions]] - how they differ from regular sheet sections
+* [[Building Character Sheets/Roll Templates#Restrictions|Roll Templates Restrictions]] - works very differently from the actual sheet code, and affects how they are written
+* '''[[BCS/Updates]]''' Recent updates to how sheets functions
+* '''[[BCS/Bugs]]''' known bugs & issues with how sheets functions.
-===O-3===
+===G-2===
+====Not looking at existing code.====
+Seeing how {{repo|Roll20/roll20-character-sheets existing sheets}} have been made and structured can help you avoid reinventing the wheel or making many of the common mistakes as result of knowing HTML/CSS/JavaScript, but not taking time to get familiar with how Roll20 sheet code is slightly different. All sheets in the {{repo|Roll20/roll20-character-sheets Character Sheet Repository}} are under MIT license so are free(and encouraged) to be used as templates for creating your own sheet, instead of making everything from scratch.
+* [[Building_Character_Sheets#Complete_Example|Existing Sheets - good examples]]
+* [[Building_Character_Sheets#Sheet_Templates.2FExamples|Sheet Templates]]
+Especially older sheet might be worse than newer sheets, as they have been created before later updates to the roll20 sheet framework([[CSE]]), as well as predate newer features of HTML/CSS/JS, such as [[Designing_Character_Sheet_Layout|CSS Grid/Flexbox]]. If a sheet haven't been updated in several years, there is guaranteed to exist a newer, better made sheet, which would better a better example/template.
+===G-3===
 ====Not asking for help when you get stuck====
-Roll20 has a small but active community who works with creating and improving character sheets, and are often eager to help out if you got stuck on some feature you've tried to figure out. {{forum|category/277980 Roll20 Character Sheet & Compendium Forums}}
+Roll20 has a small, but active, community who works with creating and improving character sheets, and are often eager to help out if you got stuck on some feature you've tried to figure out.
+* {{forum|category/277980 Roll20 Character Sheet & Compendium Forums}} - best place to ask for advice
+* [https://discordapp.com/invite/sMsv5KD Unofficial Roll20 Discord] - a number of [[Sheet Author|sheet authors]] are active there, in the ''#custom-sheets'' channel(as well as in their own hub).
 <noinclude>
 <br>
 ==Related Pages==
-* [[Sheet Author Tips]] - tips not covered on other pages
+* [[Character Sheet Development/Bugs & Quirks]]
+* [[Character Sheet Development/Feature Updates]]
+* [[Sheet Author Tips]] - misc. tips not covered by other pages
 * [[Sheet Sandbox]] - the better sheet editor to use when working on char sheets
-<br>
-<br>
 [[Category:Character Sheet Creation]]
+[[Category:Character Sheet Development]]
 </noinclude>

Roll20 Wiki

Navigation

Personal tools

Toolbox

Difference between revisions of "Character Sheet Development/Common Mistakes"

From Roll20 Wiki

Latest revision as of 19:42, 24 August 2023