This is a migrated thread and some comments may be shown as answers.

Loading order of JS & CSS files

5 Answers 638 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

rugydp asked on 19 Dec 2014, 07:33 AM

screen-shot-2014-12-19-at-08-25-24.png

Hello

I'm using Kendo UI with Symfony and so far it works perfectly. Only when I check my code with Kendo's chrome extension, I get some warnings like

VM235:545 Detected Kendo UI version: "2014.3.1119"
VM237:170 Kendo UI is included before jQueryVM237:170 (anonymous function)VM237:169 (anonymous function)VM237:148 req.onreadystatechange
VM237:170 jQuery does not seem to be includedVM237:170 (anonymous function)VM237:169 (anonymous function)VM237:148 req.onreadystatechange
VM237:170 Kendo CSS file kendo.bootstrap.min_2.css loaded before kendo.common CSS
VM237:170 Kendo CSS file kendo.common_3.css loaded before kendo.common CSS
VM237:170 Kendo CSS file kendo.common_2.css loaded before kendo.common CSS
VM237:170 Kendo CSS file kendo.bootstrap.min_3.css loaded before kendo.common CSS
VM237:170 The kendo.common CSS file is not included

I tried to change the load order of the files, but the warnings remain. As mentioned already, everything works fine. Should I bother?

Thank you

5 Answers, 1 is accepted

answered on 26 Aug 2016, 03:58 PM

@Mihai,

Does Telerik support "Telerik Kendo UI Chrome Inspector" plugin? If it's not perfect, it's an opportunity to make it better.

I think there are at least two obvious bugs there which is not hard to fix:

1) it checks for filename to be equal to "kendo.common", leading to error messages "The kendo.common CSS file is not included" and a few "Kendo CSS file kendo.*.css loaded before kendo.common CSS":

var m = /(kendo[^\/]*?)(\.min)?\.(less|css)/i.exec(url);

if (m) {

var filename = m[1], fullname = m[0];

if (filename == "kendo.mobile.all") {

kendo_css_mobile = i;

}

else if (filename != "kendo.common") {//Bug here

//...

according to Kendo theme documentation, theme-specific common styles (e.g. kendo.common-material.css) can replace kendo.common.css. So you should replace the equality check to "startsWith", or extend the regex accordingly to take theme name into account.

2) When checking for script reference duplicates it has the following code:

var m = /(^|\/)(kendo[^\/]*\.js)/i.exec(url);

var filename = m && m[1];

if (filename) {

//...

if (kendo_js_files[filename]) {

errors.push({

message: "Kendo file " + filename + " is included more than once"

});

}

filename is always equal to "/" since first group of your regex is just a slash symbol. So if I include more then one javascript file, which name is starting with "kendo", I get an error "Kendo file / is included more than once".It would be enough to replace m[1] with m[2] to make it working.

It's not that good to close eyes constantly on errors in console (you get used to them soon and reduce attention to new ones) so I'm surprised such bugs could live for years.

answered on 13 Sep 2016, 02:09 PM

Thank you for reply, Tsonko.

I agree it is hardly possible to make 100% reliable check. But my suggestions would make it slightly better.

Ideally, those checks should be executed not every time, but as some heuristic warnings only when requested and/or with ability to mute some messages forever for particular URL if I accept it is not an error and take the responsibility. If Mute configuration could be checked into source control and reused by the team - it would be perfect.

Removing those checks at all also could be a solution, but I appreciate time you spent on such checks and agree they are useful in many cases. They just shouldn't be so annoying.