Last Updated:
September 28, 2021
by
Kayleigh LeBlanc
| Version: 5
| 1,281 views
| 0 followers
members are following updates on this item.
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.
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.
Note: It may not be a bad idea to include a light-weight CSS reset tailored to text selectors, padding and margins.
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.
Tip: It is highly recommended to lint your CSS with a tool such as CSS Lint
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);
})();
Tip: Always keep your JavaScript as local as possible to your application. Avoid loading unnecessary JavaScript on every page through the Header and Footer by using the Advanced page instead.
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:
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.
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.