Javascript and CSS

Matthew Rosenberg 10 years ago in BLOX CMS updated by Patrick O'Lone (Director of Software Development) 10 years ago 3
The way JS and CSS is currently handled is unmanageable, causes conflicts and crashes my browser, often. Can there please be a comprehensive review of all the <script> blocks and consolidate them in an external file? Same thing for CSS. Preprocessing would be a plus.
Hi Matthew!

I have not heard any reports of our standard CSS or JS crashing the browser or causing conflicts... Most likely, this is a case of some site-defined scripts not playing well together.

If you haven't already, I would suggest submitting a ticket to our Customer Support staff with the browsers being used and the pages that are problematic, and we can check it out. =)

Many sites, especially larger sites like TD, have dozens of different types of non-standard JS being included - OAS, DFP, third-party ads, custom integrations, etc. It is often difficult to provide sites with the flexibility they want (to be able to add third-party stuff), while at the same time being able to change, upgrade and improve our own scripts.

That being said, we have been working diligently (over the last few years especially) to try to reduce and consolidate JS and CSS files as much as possible. To do this in a way that does not affect existing sites (who have their own customizations) is complicated and takes a long time.

Here is what we've been working on more specifically:

- Removed unneeded files, or files that were necessary for only one block or task and combined it with others. For example, most of our slideshow blocks are now built on top of the Cycle jQuery plugin, instead of each having separate JS scripts.

- Removed separate smaller scripts into one larger, minified file, where possible. We've reduced http requests for JS and CSS by at least 60% in the last year.

- We are now moving aggressively toward loading smaller script files asynchronously when needed (instead by default). Again, this reduces http requests and helps the site run faster. Asynchronous scripts make the site appear to load faster as well, since they are loaded at the end of the site build.

- We've also consolidated and minified most of our CSS files. Unfortunately, we can't make huge wholesale improvements here (like chopping off huge chunks of CSS we think may be unnecessary) because some site might be depending on that code.

Even though we have made a lot of progress in this area, there is only so much we can do without negatively affecting existing sites and the custom JS and CSS that they may have added. So, we are secretly working behind the scenes on a new set of templates that have NO backwards compatibility requirements (meaning, it would not be a soft update... this would require a full site redesign). There is not an ETA yet for these, which is why I can't talk about it =), but we're looking to launch a beta sometime next year.

As for preprocessing, let me respond to that separately. Thanks!

I would love to be on the beta testing team for the new template. TD.com currently has 14 style sheets plus a plethora of style blocks. Oy! Are you guys using Sass or Less? 

As for the JS will you be moving to a loading script on this new template? 
The BLOX template publishing process is not able to offer preprocessing at runtime nor as part of the publishing process. There is no easy way to add this support given the current filesystem layout and separation of products. Any preprocessing on these files must be done before providing them to the software and is a manual process for the template designer in question.