Code Clean Bug (Markdown, Handlebars)

Good afternoon team,

I am testing different qualities of the working system with Ghost. Above all I am focused on achieving total optimization, using both HTML5, CSS3 (SASS), and Handlebars, chasing 100% purity in the code.

In the same way, I am also exploring the different options, both in the composition of the pages, as well as in the possibility of personalization of the content (by an end customer), through the editor itself.

A. Bug in the code

This study has led me to determine that when I work with the editor, adding different elements, certain comments regarding inclusion are generated, which can be viewed from the developer’s view, through: inspect element.

<!--kg-card-begin: html—>
<!--kg-card-end: html—>

<!--kg-card-begin: markdown—>
<!--kg-card-end: markdown—>

B. Bug inserting elements

At the same time, I have found a small bug, which generates several random “” in the texts, so far I have detected 2 variables:

  1. Adding h1, h2, h3 + in a text.

Added on a page with markdown

## Text H1, H2 <span>🤔</span>

Result code

  1. Including content with markdown, which generates an id = “customized according to the content” and adding, in turn, “” to the text.

As you can see in the previous photo, an id = “” is automatically generated for each markdown, without coherence and without real value. :point_up_2:t3: Similarly, if you include any content (paragraph type) in the normal editor, it also includes the quotes “”.

Possibly at first glance, do not report any type of problem, but improving these two aspects, we would gain in loading speed, SEO optimization and usability, since we could establish visual content in the editor itself, so that a less expert user could edit That content without problem. :smiley:

I feel immensely fortunate to have had the opportunity to meet you, and you have become my preferred option, as far as current and future web design is concerned.

That is why, I beg you to accept my requests, with the aim of taking Ghost, to the next level.

Thank you to everyone who forms this great family.

A hug. :surfing_man:

JesĂşs.-

Hey @Dreamsur, I suggest you check out some other sites, inspecting them, and compare the results :slight_smile:

@Dreamsur
Off topic
What editor and color scheme are you using ? :slight_smile:

I always love talking to you @DavidDarnes, because you help me continue to challenge myself. :call_me_hand:t3:

I have detected two things:

  • The use of “” in texts is something natural, apparently it is an extended use, although I am not clear about the reason, or why. (Since I come from the old school …) :sweat_smile: But I want to understand, that it does not affect the reading of the text as such.

And on the other hand, following your advice, I have analyzed several websites … it is true that if you use Ghost in its native form, that is, establishing its base structure without changes, it works perfectly and there are no indications of comments.

But if you want, explore alternatives (as is my case), and use custom routes with custom pages, if you view the comments originated by the ghost editor.

You can see an example online, from our partner @ErrantRuminant

If you examine the code, you can visualize the problem that is generated with the visible comments, in custom paths.

I would be extremely grateful if you could help me solve it, or much better, if you could evaluate it to fix it in the core itself. Well, Ghost has tremendous potential and I want to squeeze it to the fullest.

Thanks a million for your attention, it’s simply extraordinary.

I look forward to it,

Jesus.-

@giacomosilli The images are captures of the safari browser, although to work the development, I use Visual Code Studio.

A great ally, to develop and design for Ghost. :man_technologist:

1 Like

HTML comments have no impact on SEO, and next to no impact on load time. You can read more here on this StackExchange thread: Do HTML comments (<!-- -->) affect SEO? - Webmasters Stack Exchange

We add IDs to headings so people can link directly to them by creating an anchor link. Explanation over here: What is an anchor link? And how do you create them in 2022?

Hello @DavidDarnes,

I beg your double apology, first of all for the delay in answering you and on the other hand, in my words, since I do not speak English fluently, I may not be able to convey the ideas or questions that I ask myself.

Both concepts, I know them, my approach lies in polishing the small details:

  • On the one hand, I know that brief comments do not adversely affect, but the sum of many of them: Yes, it influences the loading speed. As detailed in the link you indicated to me:

  • On the other hand, knowing the value provided by the IDs well, I just wanted to know if it would be possible to assign them or custom values, or to take into account, less abrupt descriptions. Since at present, it absorbs the initial content, creating inelegant descriptions.

For example in my case, by default it creates:

id=“freelancequeesspanspan”

And perhaps, it would be more interesting to obtain:

id=“freelancequees”

My goal with this request for help is to improve both the visualization of the internal content of my developments, as well as obtain a code as clean and optimized as possible, and attend to the details that may arise, such as a simple URL: /#ID…

I will be immensely grateful, if you could shed some light on this subject.

Thanks infinite in advance. :call_me_hand:

I think you’re looking at the wrong piece of advice from the StackExchange page linked to. This is the quote I was referring to:

They are completely ignored so no, it doesn’t affect rankings. The only problem might be if you have such a massive amount of text in comments, that it increases the load time…

There would have to be a lot of comments on the page in order to have any effect on loading time.

I think you’re pursuing the wrong things to get the performance boosts you want. Compressing images shown on the site would be far more beneficial. Also using preprocessors to minify your CSS and JavaScript.

id=“freelancequeesspanspan”

This does seem like an odd ID value, but I suspect you’re copying your headings from another editor and the heading contains <span> elements that don’t need to be there. If you pasted the heading in as plain text you would get a more expected ID value in the HTML

I hope I didn’t bother you with my questions @DavidDarnes.

I want to convey to you in the first place, that I greatly appreciate the work that you are doing each of the members of the Ghost team, because you have allowed me to believe in a CMS again, and above all, because I feel a user extremely in love with the system.

That is why, every day I am focusing heavily on learning and observing, each line of code, understanding and addressing new ways of working and exposing the system, to current developments.

You are right, I have focused on small improvements, because I have an ambitious plan, to spread and expand the use of Ghost in the Spanish-speaking market, more specifically in Spain.

Then I find myself, that I have to fight with entrepreneurs and entrepreneurs on a daily basis, to convince them of the innumerable advantages that Ghost CMS has for their companies, and how important it is, to transfer their brands to this new way of understanding the future.

I think that the decisive advantage that Ghost has, is the work focused on detail, so that as Apple once was, it is so beautiful inside, how outside.

Sometimes I have to defend the product against very hard customers, and therefore I focus on all those details, with the sole intention of providing points of improvement, among all.

In a world as competitive as in which we live, a pixel can be the difference between success or failure, in this case, a simple comment, or a line of code.

Please think of me as a good friend, who just tries to help make Ghost totally perfect, in any situation.

I hope you understand and accept my apologies, it is a great pleasure for me to count on you.

I think I speak on behalf of many users, thanking you for your enormous professionalism.

I wish you a wonderful day. :wink: