Difference between revisions of "Character Sheet Development/Common Mistakes"
From Roll20 Wiki
Andreas J. (Talk | contribs) m |
Andreas J. (Talk | contribs) m |
||
| Line 8: | Line 8: | ||
A list of common mistakes by old and new sheet creators. | A list of common mistakes by old and new sheet creators. | ||
| + | ===1=== | ||
'''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. | '''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. | ||
| + | ===2=== | ||
'''2.''' '''Thinking the [[Building_Character_Sheets#Preview_Panel| Preview Panel]] shows all the changes/is 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]]. | '''2.''' '''Thinking the [[Building_Character_Sheets#Preview_Panel| Preview Panel]] shows all the changes/is 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]]. | ||
| + | ===3=== | ||
'''3.''' '''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. | '''3.''' '''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. | ||
| + | ===4=== | ||
'''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]] | '''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]] | ||
| + | ===5=== | ||
'''5.''' '''Using an underscore in the name/class of [[Building_Character_Sheets#Repeating_Sections|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. | '''5.''' '''Using an underscore in the name/class of [[Building_Character_Sheets#Repeating_Sections|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. | ||
| + | ===6=== | ||
'''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.''' 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. | '''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.''' 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. | ||
| + | ===7=== | ||
'''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. | '''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. | ||
| + | ===8=== | ||
'''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]] | '''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]] | ||
| Line 27: | Line 35: | ||
==The "Obvious"== | ==The "Obvious"== | ||
| + | ===O-1=== | ||
'''O-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"]] | '''O-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"]] | ||
| + | ===O-2=== | ||
'''O-2.''' '''Not looking at existing sheets.''' 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. | '''O-2.''' '''Not looking at existing sheets.''' 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. | ||
| + | ===O-3=== | ||
'''O-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}} | '''O-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}} | ||
<noinclude> | <noinclude> | ||
| + | <br> | ||
==Related Pages== | ==Related Pages== | ||
* [[Sheet Author Tips]] - tips not covered on other pages | * [[Sheet Author Tips]] - tips not covered on other pages | ||
Revision as of 10:48, 22 April 2021
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
Git/GitHub 
Other
Main Page: 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.
A list of common mistakes by old and new sheet creators.
Contents |
1
1. Forgetting to start attribute names with attr_ (e.g. <input type="number" name="attr_dexterity"> vs. <input type="number" name="dexterity">). To 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.
2
2. Thinking the Preview Panel shows all the changes/is 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.
3
3. Check/Uncheck "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.
4
4. (Legacy Sheet)Forgetting to add sheet- to the class names in your .css file. This is not need in the .html file, Roll20 automatically assumes all classes have that prefix there.(Doesn't apply to CSE sheets) See CSS Styling
5
5. 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.
6
6. 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 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.
7
7. 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.
8
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 on Roll20 Sheets
The "Obvious"
O-1
O-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. List of all pages related to "Character Sheet Creation"
O-2
O-2. Not looking at existing sheets. 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.
O-3
O-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. Roll20 Character Sheet & Compendium Forums(Forum)
Related Pages
- Sheet Author Tips - tips not covered on other pages
- Sheet Sandbox - the better sheet editor to use when working on char sheets
