Javascript (Modernizr/YepNope.js) syntax and usage

Question

I have a custom build of Modernizr in use on my site (includes only what I need to test for). That said, I struggle with JavaScript, about the best I can do is cut, paste, and pray.

I use Modernizr.load to load resources async but the only way I got it to work was to go http://mothereffinghsl.com/ and copy lines 73 to 86 (I saw it used in an HTML5 Boilerplate video tutorial)...I'll post my version:

<script>
  Modernizr.load({
    test: Modernizr.fontface,
    yep: [      
     ,'css!//static.adaminfinitum.com/css/lazy-fonts.css'      
    ],
    callback: function(url, testResult) {
    }
  });
</script>

Since I did this the documentation on http://yepnopejs.com/ for the YepNope part of Modernizr has improved tremendously but I have a couple questions.

1.) If I remove the < script > tags can I just paste it directly into my Modernizr file (it is currently right before the closing body tag of my pages)?

2.) If I want to know when/how/what was used do I need to use console.log (example below)?

From the yepnope docs:

yepnope({
  load: ["https:/­/my-cdn.com/jquery.min.js?v=1.7.1", "https:/­/my-cdn.com/jquery-ui.min.js?v=1.8.16"],
  callback: {
    "jquery.min.js": function () {
      console.log("jquery loaded!");
    },
    "jquery-ui.min.js": function () {
      console.log("jquery-ui loaded!");
    }
  }
});

In some places in the docs, I see they use 'alert' but it seems like the only place it could be alerting is to a record on my server, which seems to be what console.log is doing. Is this correct and just a different way of wording it or is there a difference between the two?

As you can tell, I am JS noob, all I really want is to be able to get usage statistics on how much of my traffic did or did not support a given feature.

Note: I read everything that seemed pertinent on here and a few weeks ago asked an overly broad question that included this (it was really about 6 questions smashed into one...sorry).

Thanks

UPDATE: For whatever reason, using the 'protocol relative' URL shown above (omitting http:) caused me a lot of problems with 404 errors (it was sometimes interpreted as a relative link) so I ended up adding http: to the links to resources.

Answer 1

You are correct that you can paste the JavaScript code without the script tags into your Modernizer file as long as you do it after the Modernizer object has been defined—that is, at the end of the Modernizer file.

The console.log function does not log to a file on your server but to the JavaScript console in your web browser. Not all web browsers have a JavaScript console, but those that do you can view log messages and error messages there. Both Firefox and chrome have JavaScript consoles you can open. Remember console.log should only be in your code for debugging.

One caveat is that some versions of Internet Explorer do not have console.log defined when the JavaScript console is not open in the window. This will cause your JavaScript to halt unexpectedly. Use Firefox or Chrome to examine how your code runs if you have a choice, it may save you a lot of time.

The alert function is a less convenient way to debug. It will popup a dialog window in your browser with your message. You will need to dismiss the message to continue running the JavaScript program. Again, nothing will be logged serverside.