Frontend newbie here trying to learn by doing :)<p>Feedback is much appreciated; especially around security, since D4pi takes arbitrary user input text, sanitizes it (by removing & < > " '), transforms it, and then renders it as HTML. I will be very happy to learn about anything I missed or some other way to do it better.<p>Thank you.<p>Source code: <a href="https://github.com/d4pi/d4pi.github.io">https://github.com/d4pi/d4pi.github.io</a><p>---<p>Edit: This may be more interesting to D4 players:<p>The D4pi item editor lets you to enter item attributes with few keystrokes; for example, all the following entries are recognized and rendered as<p><pre><code> +2.5% Critical Strike Chance
</code></pre>
The +, %, and space are all optional; abbreviations/acronyms are case-insensitive.<p><pre><code> +2.5% CSC
2.5% CSC
2.5 CSC
2.5CSC
2.5csc
</code></pre>
And an item can be shared as a link like this - no need to find a host for screenshots: <a href="https://d4pi.com/view/#0.2.0.0%26%0AMasked%20Work%0A2%0As%0Ar%0Ah%0A12%0A281%20ip%0A%3D%0A351%20Armor%0A%3D%0A%2B3.3%25%20CSC%0A%2B18%20i%0AWIYPAG%2025%25%20MSf2S%0A%3D%0A5CSD%0A10LRwNDR%0A2.5ta%0A%3D%0ARL%2017%0AS%0A" rel="nofollow">https://d4pi.com/view/#0.2.0.0%26%0AMasked%20Work%0A2%0As%0A...</a>