Lithium has been around for quite a while. Through the years, we've used various technologies to render content on communities: JavaServer Pages (JSP), Velocity, and now FreeMarker. Out of the box, FreeMarker is a simple templating engine for Java. The real power of any templating engine, however, is in the injection of a data model for use in a template. As our Professional Services team, partners and customers have needed them – and sometimes before they need them – we've been adding objects to this data model to create richer content on our communities.   A separation of concerns   Templating engines generally attempt to split apart the logic of an application (in our case, our Java-based application code) from its content (HTML, CSS, etc.). This allows frontend engineers and designers to work on the look-and-feel of a web application without digging into the internals of the application itself.   An unfortunate side-effect of a technology such as JSP is the ability to call directly into Java code from the template. This can make upgrading existing templates from one version to the next extremely painful. Take this code for example:   <div> <% User user = new User(34); %> <%= user.getAvatar("medium"); %> </div> If we were to change the number of parameters to the "user" object's "getAvatar" method to 2 in version 13.1, any customer who had used this simple call would need to have their page(s) updated to reflect that change. It might not seem painful when it's just one method, but think about how many changes are made to code in a given month and how many potential "time bombs" there could be in related customer templates.   But what about FreeMarker?   FreeMarker, first and foremost, guards us against potential upgrade headaches (not to mention security hassles) by disallowing direct Java execution. This is "A Good Thing." Another step Lithium has taken is to "contractualize" the objects that are exposed to FreeMarker, so you won't run into any surprises when upgrading your community from version to version; any changes to the exposed objects – which should be few and far between – are communicated to our Upgrade team before communities are upgraded.   But as templating engines are generally only as good as the data models you provide them, we need a powerful set of objects so you can build the next great community. Fortunately, one of the very first objects we provided access to through FreeMarker was the "rest" object. This object encapsulates all of the calls you can make through our REST API (which is itself considered a contract point in our application), and makes them available directly to FreeMarker. If you haven't checked it out, and you're looking to build new components, I highly recommend reading the documentation (you'll need access to the Dev Nation section of the Lithosphere). In fact, we've exposed a number of objects to FreeMarker to provide information about your community.   Templatizing CSS   If you've been paying attention to new web technologies, you might've seen the terms "SASS" and "Compass" when reading about CSS. SASS is an extension of CSS that allows designers and engineers to reduce redundancy when writing CSS rules (which, historically, tend to be rather verbose). SASS templates are evaluated to CSS that browsers can understand. Compass is a framework built on top of SASS that provides common CSS patterns (for example, gradients, border radii, etc.). If you've ever had to write a cross-browser CSS rule to display a gradient, you may have had to write something like this:   .gradient { background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999); } Yikes. Compass takes the monotony out of using properties and values that either have not been adopted by all vendors yet (hence the "vendor prefixes" like "-webkit-" and "-moz-" shown above), or are generally a pain to write (like clearfix). A similar declaration in Compass may look like this:   .gradient { @include background-image(linear-gradient(top, #444444, #999999)); } } SASS and Compass are pretty hot right now, but Lithium does not support them yet. We've evaluated them for possible inclusion in the future (most likely as an alternative to FreeMarker, not as a rewrite). However, we do our own template processing when genearting CSS... using FreeMarker. The syntax is similar, and is exposed to CSS templates through the "css" context object:   .gradient { ${css.gradient("top", "#444444", "#999999")} } A few benefits are obvious: less typing, fewer mistakes and increased browser coverage. But as the web moves forward and as browser vendors update their applications to properly support CSS3 properties and values in non-vendor-prefixed forms, using these methods will also have the side-effect of being dynamically updated to maximize support across browsers. We keep up with sites like Paul Irish's CSS3 Please and others for updates in browser compatibility, and can easily update the FreeMarker objects to output new syntax as it becomes available. That saves you the headache of updating your stylesheets manually.   Where to next?   Whenever we expose new ways to customize our application, we're careful to not go overboard and expose too much, especially if we may need to change things in the future. Having said that, a good deal of our FreeMarker objects have come from suggestions or limitations brought up by our partners and customers. If there's something we don't have that you think we should, get in touch with us! We'd love to see you creating new functionality on your communities, while strengthening our platform at the same time.   Adam Traver is a Senior Software Engineer on Lithium's Engineering team.    He spends his days creating new product features that you're going to love and his evenings as one of Lithium's resident table tennis gurus. Follow him on the Lithosphere as AdamT. Looking to join the Engineering team? Check out Lithium's careers page for more details.   ... View more

If you find yourself playing a game of  buzzword bingo , there's a good chance HTML5 is going to be an item on your card. But what is it, and should you even care? After all, we've been using HTML(4) for quite a while now (since 1997!) and it's been treating us pretty well. I mean, have you  seen  the Internet lately? It's nothing short of amazing.   A bit of history   HTML5 is a technology a long time in the making. In 2004, the Web Hypertext Application Technology Working Group (or WHATWG, for short) realized the way we were using the web had changed considerably since HTML4 was adopted, and decided to extend it to meet the needs of the growing web. Between then and 2008, a lot of debate and uncertainty crept in, at one point, a "recommendation" date of 2022 even being proposed. But in 2011, the WHATWG transitioned HTML into a "living standard," stating that it will never be completed and will be continually improved and updated.   OK, but why should I care?   The good news about this "living standard" is that we benefit from updated features as they are recommended, and don't have to wait until some "completed" state of the language to exist. At Lithium, we take care to add new features while striving for backwards compatibility. This helps us seamlessly upgrade your community on a regular basis. As such, adding certain HTML5 features are easier than others, but we're as eager as anyone to provide you the latest the web has to offer. For now, here's a quick run-down of some of the things we've implemented:   The placeholder attribute   HTML5 introduces a handful of new attributes for "<form>" and "<input>" elements. The placeholder attribute allows an input element to specify default hint text when the field is empty. The text disappears either when the field gains focus or text is entered (it depends on the browser). We've added support in Lithium Studio to add this hint text to most form elements. All you need to do is add a new text key to supported elements--currently, "<textarea>" and "<input type=text>"--and the text will show up automatically. For example, adding placeholder text to your search form is as easy as adding this text key:   form.SearchForm.field.messageSearchField.placeholder = What are you looking for?   The general format is form.[form-name].field.[field-name].placeholder = [value].   Drag and drop   Soon, we'll be making it easier for you and your customers to upload photos to posts. HTML5 adds the ability to define drop zones on pages. Simply drag a file from your computer into one of these zones (for example, a message editor), and the file will be automatically uploaded, utilizing another new HTML5 feature: the ability to upload binary data using Ajax. We're using the recently announced social marketing solution as a testbed for this new drag and drop interaction.       CSS3   Part of the HTML5 specification adds new selectors and properties (among other things) to CSS. As browsers have started to support these features (e.g., border radii, background gradients, downloadable fonts, etc.), we've begun adding support for them in our product. And if your browser doesn't support them, we'll do our best to degrade our pages gracefully.   Future additions   These features are in no way where we stop; we're always looking for new web technologies to adopt. Be they WebSockets, seamless iframe support for ActiveCast content, browser history management or others, we look forward to staying on top of the web as it evolves.   Adam Traver is a Senior Software Engineer on Lithium's Engineering team.   He spends his days creating new product features that you're going to love and his evenings as one of Lithium's resident table tennis gurus. Follow him on the Lithosphere as AdamT. Looking to join the Engineering team? Check out Lithium's careers. ... View more

Lithium quietly incorporated a little over nine years ago. A small group of guys came together with the goal of helping companies better interact with and listen to their customers. These guys – almost all of whom are developers – decided to start building great community software.   We were founded on development. In fact, a lot of great companies start off with developers, and build the rest of the business as they go: Google, GitHub and Facebook consider themselves part of this crowd.   Nine years ago, we were a better-than-average forum vendor for a handful of technology companies. Today, we’re the leading community vendor for top brands worldwide. It’s safe to say that things have changed. But what has always stayed the same is this: We have great developers.   I’d like to start sharing some of the things the development team has been up to recently: How we’re utilizing HTML5 in upcoming features; how we’ve sped up our webpage load times; the processes we follow to support Lithium.now; and anything else that’s on our minds as we deliver our products to you.   There are great things happening at Lithium, and I’m thrilled to share them with you.     Adam Traver is a Senior Software Engineer on Lithium's Engineering team.    He spends his days creating new product features that you're going to love and his evenings as one of Lithium's resident table tennis gurus. Follow him on the Lithosphere as AdamT.   ... View more

Even with our skilled team, it helps to have systems in place informing us of any problems, whether real or potential. The Production Operations team's monitoring system of choice is Nagios.   Nagios is a 10-year-old, battle-hardened system for monitoring... just about anything. At Lithium, we use it to make sure our communities are running, to make sure our servers are healthy and to give us insights into services that may be due for a preemptive restart or configuration change.     Lithium has extended Nagios through various means: We've created a custom IRC bot to alert us to any changes in service status. We also work actively with our development teams to incorporate monitoring hooks directly into our application, to monitor the internals of our communities. These hooks give us rich access to health data such as garbage collection statistics over time, acute views at memory usage of specific pieces of the application and complex analyses of internal structures to provide heads-ups of any possible issues.   Nagios is a critical tool for the Production Operations team, but its extension and the maturity of Lithium's internal tools that surround it are what make the process shine. ... View more