<story><title>A minimalistic site to vent and see others doing the same in realtime</title><url>https://www.ventscape.life/</url></story><parent_chain><item><author>VentScape</author><text>Hey, creator of the site here, thank you so much for the tip!&lt;p&gt;Unfortunately I&amp;#x27;m quite new to full stack. ~1.5 months ago I didn&amp;#x27;t know a lick of HTML (let alone CSS, JS, any backend framework, AWS, etc), and I&amp;#x27;m making lots of mistakes along the way. Currently trying to figure out how to improve my DB performance as Spring&amp;#x27;s default pagination seems to be quite slow and my site is getting hugged to death at the moment. If anyone has any tips for that especially I&amp;#x27;m all ears.&lt;p&gt;At any rate, your suggestion seems easy enough to put in, so I&amp;#x27;ll put it in ASAP! Thanks again</text></item><item><author>szhu</author><text>The safe, proper way to do this is both shorter and more readable!&lt;p&gt;Both with jQuery:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const $newdiv = $(&amp;#x27;&amp;lt;div&amp;gt;&amp;#x27;)
      .addClass(messageDivClass)
      .text(inputTextBox.value)
      .css({&amp;#x27;opacity&amp;#x27;: &amp;#x27;0.95&amp;#x27;});

&lt;/code&gt;&lt;/pre&gt;
and without:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const newdiv = document.createElement(&amp;#x27;div&amp;#x27;);
    newdiv.classList.add(messageDivClass);
    newdiv.innerText = inputTextBox.value;
    newdiv.style.opacity = &amp;#x27;0.95&amp;#x27;;&lt;/code&gt;&lt;/pre&gt;</text></item><item><author>raggi</author><text>You&amp;#x27;re warned:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const messageText = inputTextBox.value.replace(&amp;#x2F;&amp;lt;\&amp;#x2F;?[^&amp;gt;]+(&amp;gt;|$)&amp;#x2F;g, &amp;quot;&amp;quot;);

    var $newdiv = $(&amp;#x27;&amp;lt;div class=&amp;quot;&amp;#x27; + messageDivClass + &amp;#x27;&amp;quot;&amp;gt;&amp;lt;p&amp;gt;&amp;#x27; + messageText + &amp;#x27;&amp;lt;p&amp;#x2F;&amp;gt;&amp;lt;div&amp;#x2F;&amp;gt;&amp;#x27;).css({
        &amp;#x27;opacity&amp;#x27;: &amp;#x27;0.95&amp;#x27;
    });&lt;/code&gt;&lt;/pre&gt;</text></item></parent_chain><comment><author>jlis</author><text>You could also benefit from using websockets instead of sending the message to a DB and fetching it from there. This way, you&amp;#x27;d have instant communication between the users and there&amp;#x27;s no need to store anything.</text></comment>
<story><title>A minimalistic site to vent and see others doing the same in realtime</title><url>https://www.ventscape.life/</url></story><parent_chain><item><author>VentScape</author><text>Hey, creator of the site here, thank you so much for the tip!&lt;p&gt;Unfortunately I&amp;#x27;m quite new to full stack. ~1.5 months ago I didn&amp;#x27;t know a lick of HTML (let alone CSS, JS, any backend framework, AWS, etc), and I&amp;#x27;m making lots of mistakes along the way. Currently trying to figure out how to improve my DB performance as Spring&amp;#x27;s default pagination seems to be quite slow and my site is getting hugged to death at the moment. If anyone has any tips for that especially I&amp;#x27;m all ears.&lt;p&gt;At any rate, your suggestion seems easy enough to put in, so I&amp;#x27;ll put it in ASAP! Thanks again</text></item><item><author>szhu</author><text>The safe, proper way to do this is both shorter and more readable!&lt;p&gt;Both with jQuery:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const $newdiv = $(&amp;#x27;&amp;lt;div&amp;gt;&amp;#x27;)
      .addClass(messageDivClass)
      .text(inputTextBox.value)
      .css({&amp;#x27;opacity&amp;#x27;: &amp;#x27;0.95&amp;#x27;});

&lt;/code&gt;&lt;/pre&gt;
and without:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const newdiv = document.createElement(&amp;#x27;div&amp;#x27;);
    newdiv.classList.add(messageDivClass);
    newdiv.innerText = inputTextBox.value;
    newdiv.style.opacity = &amp;#x27;0.95&amp;#x27;;&lt;/code&gt;&lt;/pre&gt;</text></item><item><author>raggi</author><text>You&amp;#x27;re warned:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    const messageText = inputTextBox.value.replace(&amp;#x2F;&amp;lt;\&amp;#x2F;?[^&amp;gt;]+(&amp;gt;|$)&amp;#x2F;g, &amp;quot;&amp;quot;);

    var $newdiv = $(&amp;#x27;&amp;lt;div class=&amp;quot;&amp;#x27; + messageDivClass + &amp;#x27;&amp;quot;&amp;gt;&amp;lt;p&amp;gt;&amp;#x27; + messageText + &amp;#x27;&amp;lt;p&amp;#x2F;&amp;gt;&amp;lt;div&amp;#x2F;&amp;gt;&amp;#x27;).css({
        &amp;#x27;opacity&amp;#x27;: &amp;#x27;0.95&amp;#x27;
    });&lt;/code&gt;&lt;/pre&gt;</text></item></parent_chain><comment><author>C4stor</author><text>Reduce the refresh rate drastically, augment the number of messages fetched at once (let&amp;#x27;s say 200), and display them slowly. Should reduce 20 times the load on DB while making no sensible difference for end users anyway.</text></comment>