Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sam Allen
Sam Allen
7,176 Points

Why isn't my CDN failsafe via JavaScript working?

For a project, I need to feature a JavaScript file, not a JavaScript function within HTML. During the development of my project, I had an actual issue involving the normalize.css Content Delivery Network (CDN) failing, which threw me off for days and inspired me to implement a CDN failsafe mechanism using JavaScript.

However, my code isn't working. It seems like it should be. What's wrong? (To save you some time, look for the third comment within HTML. It references a function from CDNfailsafe.js.)

HTML: 

<!DOCTYPE html>
<html lang="en-US">

<head>
    <!-- Metadata = data about data. Does not appear on-screen. Machine-readable only. -->
    <meta charset="utf-8">
    <meta name="keywords" content="Web Developer, Front End Web Developer, FEWD, Web Development, Front End Web Development, HTML, CSS, JavaScript, Louisville, Kentucky, Code Louisville">
    <meta name="description" content="Hire a Front End Web Developer trained by Code Louisville: Sam Allen of Louisville, Kentucky!">
    <meta name="author" content="Sam Allen">
    <!-- Maximize aesthetics for every viewport by setting the page-width to follow the screen-width of every device. Mobile-first. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sam Allen | Louisville, KY</title>
    <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
    <link rel="stylesheet" href="css/main.css">
    <!-- Load normalize.css and font CDNs. Moved from css/main.css so I could associate CDN with an onerror event to trigger failsafe. -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" onload="console.log('Normalize CDN loaded.')" onerror:"javascript:normalizeFailsafe()">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Julius+Sans+One" onload="console.log('Google font CDN loaded.')">
</head>

<body>
    <header class="navBar">
        <nav class="wrapper">
            <h1 class="title">Sam Allen | Web Developer</h1>
            <input type="checkbox" id="hidden-checkbox">
                <label for="hidden-checkbox" class="menu-toggle"></label>
            </input>
            <ul class="menuOptions">
                <li><a href="https://github.com/samallen502?tab=repositories" target="_blank">Portfolio</a></li>
                <li><a href="#">Credibility</a></li> <!-- Feature Code Lou FEWD Cert and link to Treehouse. Feature testimonials and clients here in the future? -->
                <li><a href="#">Bio</a></li> <!-- Brief life story, explain career change, personal living situation, favorite podcasts, professional inspirations, shout-out to mentors, fun hobbies. Maybe make this interactive eventually? -->
                <li><a href="#">Business Inquiries</a></li> <!-- Opportunity for JavaScript! User can click nav button and a form pops up. -->
            </ul>                 
        </nav>
    </header>

    <div class="content" id="content">
        <div class="primary column">
            <h2>Primary column!</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>

        <div class="secondary column">
            <h2>Secondary column!</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>

    <footer>
        <span>&copy;2018 Samuel Justin Allen</span>
        <!-- Add icons for LinkedIn and email later. -->
    </footer>  

    <!-- JavaScript before the closing body tag so HTML can load before executing the script per https://teamtreehouse.com/library/adding-data-to-arrays -->
    <script src="js/CDNfailsafe.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

JavaScript (CDNfailsafe.js):

// Within index.html, a normalize CDN is used. CDN could fail. If so, this application will implement a "Plan B" by pointing to normalize in a local file.

function normalizeFailsafe() {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", 'css/normalize_v8.0.0.css');
    css.setAttribute("onload", "console.log('Normalize CDN failed but local backup of normalize loaded.')");
    document.getElementsByTagName("head")[0].appendChild(css);
}

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! From what I can see in your <link> tag in the <head> you have:

onerror:"javascript:normalizeFailsafe()"

But I believe that should be:

onerror="javascript:normalizeFailsafe()"

According to the MDN documentation that should be an equals sign instead of a colon.

Hope this helps! :sparkles:

Sam Allen
Sam Allen
7,176 Points

:facepalms: You've found so many bonehead mistakes of mine on here that it's embarrassing. :-)

Thanks, though!

So, if I intentionally sabotage the normalize CSS CDN link by, say, deleting the "c" in "cdnjs", saving, refreshing my preview and the console shows this:

Google font CDN loaded.
index.html:16 GET https://dnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css net::ERR_NAME_NOT_RESOLVED
index.html:1 Normalize CDN failed but local backup of normalize loaded.

That's a sure sign that my coding was on-point, especially since the page itself still displays normally, right? (In recent experiences, a lack of normalize.css will cause all content to shift to the right.)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It's definitely loading and running that code. Just make sure to keep that link updated and you should be fine! Also, I'm sort of the opinion that the emoji for the nerd face(the guy with the glasses) could also be called "four eyes" not because we all wear glasses, but because we all need four eyes. In a discipline where a colon instead of an equals sign will completely break your stuff we all need an extra set of eyes :smiley: