Introduction

This article is intended to provide a starting point for Developers to troubleshoot issues with their own custom Igloo application code, or anywhere else on the Igloo site where custom “one off” code is executing. It is also a useful resource for new Developers who wish to speed up their workflow when designing regular, stand-alone Igloo web applications.

Cascading Style Sheets (CSS)

The order in which the platform and 3rd-party CSS files load on the page will effect the design of your application, so it is important to be aware of platform classes and use custom classes for unique HTML elements.

While it is considered bad practice in regular, “one off” web development, use of the !important rule in your CSS will be required when developing an Igloo application that runs directly on the page. This is because the application is not being rendered inside an IFRAME and thus effected by all of the platform CSS rules. Generally speaking this should only be required for overriding basic platform CSS item specificity such as as height, width, margin, padding, etc.

JavaScript (JS)

The biggest challenge when developing custom code for use on an Igloo is guaranteeing and maintaining the order in which JavaScript code is loaded and executed. Every Developer who is new to Igloo will encounter a scenario where the functions of their custom JavaScript are firing before the required DOM elements exist, etc.

In this case, it is standard practice to wait for the Igloo page HTML to be completely loaded and parsed before attempting to load custom code:

/** 
 * @description Ensure that HTML has been loaded, prior to the execution of custom JavaScript code, by attaching an event listener of type 'DOMContentLoaded' to the document interface
 */
document.addEventListener('DOMContentLoaded', function (event) {
    // My custom Igloo application
    console.log('Hello, World!');
}, false);

In more advanced scenarios you may have an iframe on the page, or the enhancement you’re building depends on image and other data to be fully loaded before executing. For these requirements, please use load or GlobalEventHandlers.onload instead.

/** 
 * @description Ensure that everything has been loaded, prior to the execution of custom JavaScript code, by attaching a 'load' event handler to the window interface
 */
window.addEventListener("load", function (event) {
    // My custom Igloo application
    console.log('Hello, World!');
});


/** 
 * @description ES2015 example of the same
 */
const load = () => {
    // My custom Igloo application
    console.log('Hello, World!');
}
window.onload = load;

Another thing to keep in mind when writing a “one off” script/application is the amount of Igloo and 3rd-party JavaScript libraries that are already being loaded on each Igloo page. For this reason, whenever possible it is recommended to wrap your JavaScript files in an IIFE to avoid issues in the global namespace.

/** 
 * @description Basic JavaScript IIFE
 */
(function () {
    // My custom Igloo application
    var greeting = 'Hello, World!';

    console.log(greeting);
})();

Page load speed

An unoptimized application design or large amount of custom code and assets may negatively impact Igloo page load performance. In that case, please review the following:

• Assets loading from a CDN or elsewhere in the cloud may be timing out or slow to load
• Excessive use of @imports or webfonts in a CSS file

FAQs

The appearance/layout of my application has broken, what is the preferred method of troubleshooting?

After it has been verified that all of the required CSS files have been loaded, the issue would be caused by a small change to platform CSS classes during a patch roll out. The first thing to do is make sure you are familiar with what’s changed recently, and the corresponding known issues list.

If you are still having issues with your CSS after considering all of the above, please contact Igloo Developer Support for assistance.

Can I use modern workflow and prototyping tools such as Browsersync?

Due to the security and authentication model of the Igloo platform it is not possible to use the Browsersync npm module to develop and prototype applications. That being said, it is possible to emulate the functionality closely to speed up development time.