Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

To answer your question "How can I make it more faster, more stable." it looks like there is a query to get IDs for each post, and then in the loop to create list items, there are calls to get_permalink(), get_the_title() and clean_comment_count_wo_newbies(). Do those function calls run queries against the database? If so, that would likely be the bottleneck. Ideally the code would run a single query to get all the information needed - e.g. IDs, titles, comment counts, etc. Remember that DB queries are expensive so it is best to minimize the number of queries needed.

Also, the front end code used jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods like $.get() and $.post() could be used to simplify the code.

On a finer level I see inline event handlers - e.g.

<button onclick='gundemNav(this)'

It is better to register event handlers within the JavaScript (e.g. using button.addEventListener (can be done when element is created or after is is selected via DOM) for multiple reasons:

1. The logic can be separated from the markup - if multiple teammates worked on the project then one could work on the JavaScript while the other could work on the HTML independently.
2. Such handlers can pollute the global namespace which can lead to strange behavior.

Overall comments

Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

Improving speed of code to lookup posts

To answer your question "How can I make it more faster, more stable." it looks like there is a query to get IDs for each post, and then in the loop to create list items, there are calls to get_permalink(), get_the_title() and clean_comment_count_wo_newbies(). Do those function calls run queries against the database? If so, that would likely be the bottleneck. Ideally the code would run a single query to get all the information needed - e.g. IDs, titles, comment counts, etc. Remember that DB queries are expensive so it is best to minimize the number of queries needed.

JavaScript

DOM Access

The code looks up the element with id sol-load three times within a few lines. It would be wise to cache those lookups, since they can be expensive.

”...DOM access is actually pretty costly - I think of it like if I have a bridge - like two pieces of land with a toll bridge, and the JavaScript engine is on one side, and the DOM is on the other, and every time I want to access the DOM from the JavaScript engine, I have to pay that toll”
- John Hrvatin, Microsoft, MIX09, in this talk Building High Performance Web Applications and Sites at 29:38, also cited in the O'Reilly Javascript book by Nicholas C Zakas Pg 36, as well as mentioned in this post

const solLoad = $("#sol-load");

AJAX

The front end code uses jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods like $.get() and $.post() could be used to simplify the code. Actually .load() can be used to simplify the code dramatically -

I haven't tested this but this should be what would be needed:

solLoad.load(bilgi.tema_url + '/admin-ajax.php', {action: 'popular_ajax'}, 
    solLoad.css.bind(solLoad, "opacity", 1));

Inline event handlers

There are event handlers registered within the HTML code - e.g.

<button onclick='gundemNav(this)'

It is better to register event handlers within the JavaScript (e.g. using button.addEventListener (can be done when element is created or after is is selected via DOM) for multiple reasons:

1. The logic can be separated from the markup - if multiple teammates worked on the project then one could work on the JavaScript while the other could work on the HTML independently.
2. Such handlers can pollute the global namespace which can lead to strange behavior.

Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

Also, the front end code used jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods could be used to simplify the code.

On a finer level I see inline event handlers - e.g.

<button onclick='gundemNav(this)'

It is better to register event handlers within the JavaScript (e.g. using button.addEventListener (can be done when element is created or after is is selected via DOM) for multiple reasons:

1. The logic can be separated from the markup - if multiple teammates worked on the project then one could work on the JavaScript while the other could work on the HTML independently.
2. Such handlers can pollute the global namespace which can lead to strange behavior.

Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

To answer your question "How can I make it more faster, more stable." it looks like there is a query to get IDs for each post, and then in the loop to create list items, there are calls to get_permalink(), get_the_title() and clean_comment_count_wo_newbies(). Do those function calls run queries against the database? If so, that would likely be the bottleneck. Ideally the code would run a single query to get all the information needed - e.g. IDs, titles, comment counts, etc. Remember that DB queries are expensive so it is best to minimize the number of queries needed.

Also, the front end code used jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods like $.get() and $.post() could be used to simplify the code.

On a finer level I see inline event handlers - e.g.

<button onclick='gundemNav(this)'

It is better to register event handlers within the JavaScript (e.g. using button.addEventListener (can be done when element is created or after is is selected via DOM) for multiple reasons:

1. The logic can be separated from the markup - if multiple teammates worked on the project then one could work on the JavaScript while the other could work on the HTML independently.
2. Such handlers can pollute the global namespace which can lead to strange behavior.

Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

Also the front end code used jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods could be used to simplify the code.

Overall I’d say that the practice of sending HTML in an AJAX response and using that to directly set the content of a DOM element is an antiquated practice, and could be an XSS avenue. While the practice of sending data from the API and having the front end code construct the HTML dynamically may have been a new construct eight years ago it is much more common in today’s web.

Also, the front end code used jQuery to access DOM elements yet the AJAX code uses vanilla XHR mechanisms. The jQuery AJAX methods could be used to simplify the code.

On a finer level I see inline event handlers - e.g.

<button onclick='gundemNav(this)'

It is better to register event handlers within the JavaScript (e.g. using button.addEventListener (can be done when element is created or after is is selected via DOM) for multiple reasons:

1. The logic can be separated from the markup - if multiple teammates worked on the project then one could work on the JavaScript while the other could work on the HTML independently.
2. Such handlers can pollute the global namespace which can lead to strange behavior.