New Comments System (please help me test it)

Stephane BoucherOctober 4, 201618 comments

I thought it would take me a day or two to implement, it took almost two weeks...

But here it is, the new comments systems for blogs, heavily inspired by the forum system I developed earlier this year.  

Which means that:

  • You can easily add images, either by drag and drop or through the 'Insert Image' button
  • You can add MathML, TeX and ASCIImath equations and they will be rendered with Mathjax
  • You can add code snippets and they will be highlighted with highlights.js
  • You can edit your comment(s) at will
  • You can delete your comment if you were drunk when you wrote it and are having regrets

The email notification system has also been improved to let you know quickly when someone posts a comment to your blog (if you are the author of the blog post) or reply to your comment (if you are the author of a comment).

Please go ahead and post a comment down bellow.  Maybe try to add a photo (do you have a photo of your pet?), maybe try Mathjax or a code snippet?  I'd appreciate if you could let me know if you run into difficulties or if you encounter any error.

Thank you!


Previous post by Stephane Boucher:
   3 Good News
Next post by Stephane Boucher:
   Who else is going to Embedded World 2017 in Nuremberg?


Comments:

[ - ]
Comment by stephanebOctober 7, 2016

You can easily add images, either with a simple drag and drop or using the image button in the editor menu.  I will use drag and drop from my desktop here:

pilot_63346.jpg

You can also relatively easily add some equations:

$$ E = mc^2 $$

the code for this equation:

$$ E = mc^2 $$

or more complicated:

$$ y(n) = (h \ast x)(n) = \sum\limits_k h(k) x(n-k) $$

the TeX code for this equation:

$$ y(n) = (h \ast x)(n) = \sum\limits_k h(k) x(n-k) $$

As you notice, the TeX equations are surrounded by a two couples of dollar signs (delimiters):

$$ .. $$

If you want your equation to be showed inline like this: $E = mc^2$, you need to surround your TeX code with only one dollar sign on each side: 

$ E = mc^2 $

If you want to add a code snippet and would like to take advantage of the highlighter, you simply need to format it as 'code' in the formatting menu at the top of the editor.  

[ - ]
Comment by jms_nhOctober 8, 2016

This costs $200 and that costs $500.

It would be helpful if you could enable MathJax but not by default. Dollar signs are more common for financial use.

Thank goodness for the editing, though. That's a *huge* help. 

[ - ]
Comment by stephanebOctober 9, 2016

Thanks for your input Jason.

I agree that the ability to edit was way overdue.  Now that the comment system is home-brewed, changes/improvements will be much easier to implement.

I will soon change the delimiters for Mathjax inline equations from the two dollar signs to:

\( ... \)

but first, I need to go through all blog posts and change every inline equation to work with the new setting.

[ - ]
Comment by Ted LyngmoOctober 11, 2016

Testing testing ... I wonder if I'll get a chance to preview this before it gets posted? :-) [Edit: nope]

$$ E(x) = \sum\limits_x xP(x) $$

Note: Preview before posting would be a nice feature. It can be tricky to get it right the first time.

[ - ]
Comment by stephanebOctober 11, 2016

Hi Ted!  Thanks for taking the time to test the system.  There is no preview but you have usually plenty of time to edit a comment before anyone notice it.  I agree though that a preview would be cool - I'll keep this in mind.

[ - ]
Comment by Ted LyngmoOctober 11, 2016

Hi Stephane! Yes, that's probably true. Just noticed a nice feature. One can right click on an equation and then select Math Settings > Math Renderer > Plain Source to display the TeX code used.

[ - ]
Comment by stephanebOctober 11, 2016

Indeed, that's a nice trick to learn to write TeX faster, thanks for mentioning it.

[ - ]
Comment by martinthompsonOctober 17, 2016

Testing

wikipedia - yay - shortcut key for adding a link :)




[ - ]
Comment by Rick LyonsOctober 10, 2016

testing the new 'Comments' section:

Here's an image of an equation:

equation_13155.jpg

So the 'image drag-n-drop' feature seems to be working properly for me.

Stephane, I noticed at the top of the 'Comments' section you have a left-pointing arrow and the text:

"Select so add comment" in green font.  Should the text be: "Select to add comment"?

[ - ]
Comment by stephanebOctober 10, 2016
Should the text be: "Select to add comment"?

Indeed!  Thanks Rick for finding this error, I have made the correction.

[ - ]
Comment by N0UUOctober 12, 2016

Lurker

[ - ]
Comment by krasinOctober 13, 2016

Comment deleted by author

[ - ]
Comment by p2hembkOctober 13, 2016

Looking forward to using this facility to supplement DSP research and development.

[ - ]
Comment by MatthewEshlemanOctober 25, 2016

Looking very nice. One feature I keep looking for is the ability to click on the comment authors name to see their profile. That would be handy I think!

Thank you!

[ - ]
Comment by stephanebOctober 25, 2016

Yes, very good idea and on the todo list - thanks for the suggestion!

[ - ]
Comment by s-lightOctober 30, 2016
Some text..
[ - ]
Comment by s-lightOctober 30, 2016

Ok - again - i have written some comment text here -

than tried what will happen if i switch the editor to the html view and enter some valid html  structure...

hm - the editor strips all lthings away - and leaves only the demo text from inside the body tags - 

also stripes all away that i had written before this experimental insertion - that happens if you experiment outside the normal 'box' ;-)

first things first:

normally i first read all comments and then will write my own - so it would be nice to have a link to the 'write a comment' tab at the bottom of the comments list.

so here again my test content:

a picture pasted with Ctrl+V from my clipboard:


it appears in the editor.. will see how it is handled after submitting..
i have looked up how it shows up in the html: 

<p><img src="data:image/png;base64,iVBORw0KGgoA...rkJggg==" alt=""><br>
</p>

so this is a valid inlined base64 encoded image. should work fine in theory if the system is not stripping away the data: uri...

additionally here comes a image first saved to disk and than inserted with drag and drop into the editor:

new_comments_system_please_help_me_test_

and some code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gute Laune</title>
    <style media="screen">
        body {
            display: block;
            position: relative;
            margin: 0;
            padding: 1em;
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
            background-size: cover;
            font-size: 16px;
            /* evening sun */
            color: rgb(0, 0, 20);
            text-shadow:
                0 0 1px rgb(255, 255, 200),
                0 0 20px rgb(255, 255, 200);
            background-color: rgb(255, 255, 200);
            background-image:
                linear-gradient(
                    to bottom,
                    rgba(0, 0, 5, 0) 0%,
                    rgba(255, 200, 0, 0.8) 100%
                ),
                radial-gradient(
                    12em at 90% 9%,
                    rgba(250, 150, 0, 0.4) 0%,
                    rgba(0, 0, 0, 0) 100%
                )
            ;
        }
    </style>
</head>
<body class="">
    <div class="" >
        Some text..
    </div>
</body>
</html>

so thats all for now :-)


[ - ]
Comment by s-lightOctober 30, 2016
ok- the system is stripping away the data uri part...

that seems to be the only reason to me that this clippboard-pasted image is not working.

second thing:

new_comments_system_please_help_me_test_

iam not able to make a second top level comment - until i reload the site..

third: if i have submitted my comment it would be nice if the system switches to this comment automatically after showing me the success message a few seconds :-)

that would automatically also allow to link to a specific comment (if you handle the jump by a id attribute at the target comment and a anchor in the url.. you could also make this accessible by linking the date part of the comments headline to the comments id)

sunny greetings

stefan

To post reply to a comment, click on the 'reply' button attached to each comment. To post a new comment (not a reply to a comment) check out the 'Write a Comment' tab at the top of the comments.

Registering will allow you to participate to the forums on ALL the related sites and give you access to all pdf downloads.

Sign up
or Sign in