Page Designer- Custom Code Best Practices

SharePoint offers many means of injecting custom components and even global CSS and JavaScript. Example means includes:

• Code Snippet Web Part
• Custom Web Parts
• Master Pages
• Application Customizers

Similarly, LiveTiles allows for extension of its components via code using:

• Custom Code in Page Settings
• Code Snippet Tile
• Custom Tile

These mechanisms can often interact with each other in various ways, along with potentially negatively interacting with the code experience. Simple examples include things like global stylesheets in SharePoint conflict with LiveTiles CSS on the same page. While LiveTiles cannot warranty any custom code or resulting interactions, here are some best practices to help avoid these kinds of situations:

Window Life-Cycle & Defensive Coding Events

A simple example of a negative interaction discovered by one customer came from what seemed like a simple change: a global JavaScript file that automatically applied behavior when any page in the site is loaded. Unfortunately, every page in a site collection included the Installer.aspx page for LiveTiles. In their code they overwrite the "window.onload" function, per something similar in the installer's code here:

// load landing page module
window.onload = function () { require(['Installer/modules/LTD.Installer.Start']); } 

// Sorry, this is from back when we had to support IE7 :(

This caused the installer itself to stop loading, showing only the header paragraph. This could have been avoided by using a defensive coding practices around registering event listeners. 

In a perfect world, everyone supporting Modern Browsers (IE9+) would use the DOMContentLoaded function:

document.addEventListener("DOMContentLoaded", function() {
  // Do work! Coding like you're still into new Star Wars movies!
});

You can also use an extensible approach like the ready function in jQuery, which is not exactly the same point in the life-cycle as DOMContentLoaded, but close enough for most applications:

$(function() {
  // Do work! Coding like the housing crash wasn't a thing yet!
}

If you really need to, you can also "hack" your way around it by carrying over the existing implementation into the new function using a variable:

var oldOnLoad = window.onload;
window.onload = function() {
  // do work! Coding like is college still affordable - so sad :(
}

Please use as modern a practice as you can manage given your requirements