Five Back-End Improvements in Titan CMS v6.9

Five Back-End Improvements in Titan CMS v6.9

I love seeing our clients get excited about the new features that come with each release of the Titan CMS Content Management System. Just now, they’re amped up about the new Drag and Drop File Uploads and ReFlex, our stunning new responsive template.

They generally don’t get so fired up about the 40+ bug fixes and API improvements that come along for the ride. But we do. Stay with me, here; you really do want to know about five huge back-end improvements.

1. Stripes

For several years, we’ve produced striped designs, which create visual separation in the sections of long content pages. Typically, stripes take the form of a solid color or background image that stretches the full width of the browser as page content stays within a set boundary.

Figure 1 The Northwoods website uses a striped design with a textured background image to segment content

Until now, the implementation of stripes in Titan CMS required several steps for Northwoods front-end designers. They needed to produce some CSS styles and configure those class names in Titan CMS, so authors and editors could assign content Blocks to appear in these various stripes. They needed to write custom JavaScript to manipulate the rendered page content and produce the desired effect.

The main issue with this approach is in the custom JavaScript. Client-side JavaScript that performs heavy DOM manipulation always runs the risk of introducing visual artifacts – those blips and flashes that every JavaScript programmer hopes no one will notice. In addition, introducing anything custom to a software system increases the complexity and fragility of that system and impacts maintainability of that code.

Titan CMS now handles striping natively on the back-end. Titan CMS knows when you want a stripe, and it builds the HTML the right way the first time. Titan CMS knows how to group blocks together in a stripe and when to start grouping blocks in a new stripe. No custom JavaScript. No flashes or blips.

2. Floats

The CSS float property is widely used for building multi-column responsive layouts. While floats were never intended for this task, browser support for floats goes back to Internet Explorer 4. Front-end designers have gobs of experience working around the “nuances” of clearing floats, calculating widths and equalizing container heights. The future is bright; modern browsers are adopting Flexible Box layout mode. But until adoption is complete, we continue to push forward with our tried and true methods.

When we started building responsive designs for Titan CMS, we established a practice of using CSS classes that define specific percentage widths to give authors and editors the ability to establish their own two-, three- and four-column layouts. If you want three equal columns, each block gets the Float33 class and you’re done. If you want to switch things up and have a two-column stripe, each block gets Float50 and you’re done. Easy, right?

Figure 2 Create a 3-column display using the Float33 class on blocks

Right -- because we’ve done a lot of behind-the-scenes work – that is, more custom JavaScript -- in our designs to deal with those “nuances” I mentioned earlier. Client-side scripting had been used to calculate when a block should be the first in a row. That differs across desktop, tablet and mobile screen widths and had to be recalculated with each window resize. All of this effort prevented blocks from floating in the middle of a page when they ought to be flush on a left margin.

Titan CMS now does the heavy lifting on these calculations. Titan CMS knows, based on the Float classes, how much space you intend a block to occupy. Titan CMS also knows how much space those blocks should take up at tablet width. By doing these calculations and applying additional CSS classes to blocks, Titan CMS gives front-end designers the flexibility to use CSS, rather than JavaScript, for layout.

3. CSS Preprocessing and CSS Custom Properties

CSS Preprocessors, such as Sass and Less, exist to extend the CSS language to give developers the ability to write more maintainable CSS code. They have become very popular among front-end developers. While CSS Preprocessors vary in their functionality, all can establish variables.

In a typical design, you might have the RGB or HEX values of your primary and secondary brand colors in a dozen places. You might have the main font specified in several places. You might have a smattering of light grays here and a slew of dark grays there. In these situations, variables in CSS would be immensely helpful. The ability to define a property once and reuse it throughout your code could save hours of work when the time comes to rebrand your site and change those colors and fonts.

Preprocessors allow you to add variables and use other time-saving tools, but at a cost. Typically, they require you to learn a new syntax. Furthermore, these preprocessors aren’t native to the browser. They are third-party utilities, which you either integrate into your site through JavaScript or integrate into your development processes, in the form of pre-compilers.

The widespread use of CSS Preprocessors has impacted the Standards Community and Browser developers, and that’s good. CSS Custom Properties (also called CSS Variables) are now a native feature of CSS in modern desktop and mobile browsers, including Microsoft Edge.

But they aren’t supported in any version of Internet Explorer, and that’s bad. I’m not here to badmouth IE. I simply want you to understand the future is bright, and that bright future means Titan CMS has a lot to offer CSS programmers.

Until the day when all browsers handle CSS Custom Properties natively, Titan CMS has your back. Through a simple back-end preprocessor, Titan CMS handles variable substitution in CSS files by using the syntax prescribed by the working draft of the specification. In fact, we use variables heavily in ReFlex, our new responsive theme, so that we can offer it as a Variable Color theme. That means you can spin up your own version of ReFlex, with different colors, in a matter of minutes.

Figure 3 Using CSS Custom Properties and the var() function in CSS code


4. CSS Minification and High Performance

Minification is the process of reducing the size of resources files, such as JavaScript and CSS, by removing superfluous whitespace, code comments, and other unnecessary characters without changing the functionality of the code. Reducing the size of these files improves page speed by requiring browsers to download and parse less information.

We have integrated a minification routine into Titan CMS’s CSS Preprocessor. The routine removes comments and extra whitespace to produce an optimized CSS file at the time the browser requests the resource. The minified code is cached in server memory for faster delivery on subsequent requests by other site visitors.

Figure 4 This sample CSS code is easier to maintain and understand given the formatting and comments

Figure 5 The same CSS minified is faster to download and parse and functions the same

Beyond the speed improvement, our approach to on-the-fly optimization in Titan CMS makes it possible to keep the original formatting of the CSS code. This matters to Titan CMS users who view or modify theme CSS code through the workstation. Readability and inline comments are essential for anyone maintaining code.

5. Custom JavaScript Reduction

Many of our back-end improvements reflect an underlying desire to reduce the amount of custom JavaScript that we use to build websites in Titan CMS. Every customization means more time spent writing, testing and debugging code. It also means more time maintaining and supporting code during upgrades. More time means higher cost to our clients.

It’s worth mentioning again. Our original approach to implementing striped designs depended heavily on expensive, DOM-manipulating JavaScript. Our approach to using CSS floats to produce multi-column layouts required JavaScript to work around natural deficiencies in that approach. By building all this into Titan CMS’s back end, we reduced our JavaScript footprint significantly in terms of file size. More importantly, we reduced “intangibles” -- code complexity, fragility, dependency on third-party libraries – and gained ease of implementation, which translates into money saved for our clients.

These two advances are the first steps on a long trek to improve the Titan CMS JavaScript ecosystem. We aren’t just removing script; we’re improving it by integrating commonly used functionality into Titan CMS. Many Titan CMS sites have animated headers that shrink when you scroll down the page, as well as a “back to top” icon that fades in when you scroll. These animations are largely controlled via CSS transitions by applying CSS classes during browser events. Listening for those events and adding the classes on the right elements is the right job for JavaScript.

This and every release of Titan CMS offers more than meets the eye. Thanks for taking a moment to look under the hood with me, to see the hidden improvements that make Titan CMS an ever more powerful tool.

Originally Published: Wed, August 02, 2017